mirror of
https://github.com/gchq/CyberChef.git
synced 2025-07-04 03:42:23 -04:00
Automatically detect EOL from paste events and output setting
This commit is contained in:
n1474335
parent
c4e7c41a6e
commit
16dfb3fac6
7 changed files with 215 additions and 43 deletions
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
import Utils from "../../core/Utils.mjs";
|
||||
import { eolSeqToCode } from "../utils/editorUtils.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -140,16 +141,16 @@ class ControlsWaiter {
|
|||
|
||||
const inputChrEnc = this.manager.input.getChrEnc();
|
||||
const outputChrEnc = this.manager.output.getChrEnc();
|
||||
const inputEOLSeq = this.manager.input.getEOLSeq();
|
||||
const outputEOLSeq = this.manager.output.getEOLSeq();
|
||||
const inputEOL = eolSeqToCode[this.manager.input.getEOLSeq()];
|
||||
const outputEOL = eolSeqToCode[this.manager.output.getEOLSeq()];
|
||||
|
||||
const params = [
|
||||
includeRecipe ? ["recipe", recipeStr] : undefined,
|
||||
includeInput && input.length ? ["input", Utils.escapeHtml(input)] : undefined,
|
||||
inputChrEnc !== 0 ? ["ienc", inputChrEnc] : undefined,
|
||||
outputChrEnc !== 0 ? ["oenc", outputChrEnc] : undefined,
|
||||
inputEOLSeq !== "\n" ? ["ieol", inputEOLSeq] : undefined,
|
||||
outputEOLSeq !== "\n" ? ["oeol", outputEOLSeq] : undefined
|
||||
inputEOL !== "LF" ? ["ieol", inputEOL] : undefined,
|
||||
outputEOL !== "LF" ? ["oeol", outputEOL] : undefined
|
||||
];
|
||||
|
||||
const hash = params
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ import {
|
|||
|
||||
import {statusBar} from "../utils/statusBar.mjs";
|
||||
import {fileDetailsPanel} from "../utils/fileDetails.mjs";
|
||||
import {renderSpecialChar} from "../utils/editorUtils.mjs";
|
||||
import {eolCodeToSeq, eolCodeToName, renderSpecialChar} from "../utils/editorUtils.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -62,6 +62,7 @@ class InputWaiter {
|
|||
|
||||
this.inputTextEl = document.getElementById("input-text");
|
||||
this.inputChrEnc = 0;
|
||||
this.eolSetManually = false;
|
||||
this.initEditor();
|
||||
|
||||
this.inputWorker = null;
|
||||
|
|
@ -92,6 +93,7 @@ class InputWaiter {
|
|||
fileDetailsPanel: new Compartment
|
||||
};
|
||||
|
||||
const self = this;
|
||||
const initialState = EditorState.create({
|
||||
doc: null,
|
||||
extensions: [
|
||||
|
|
@ -141,6 +143,15 @@ class InputWaiter {
|
|||
if (e.docChanged && !this.silentInputChange)
|
||||
this.inputChange(e);
|
||||
this.silentInputChange = false;
|
||||
}),
|
||||
|
||||
// Event handlers
|
||||
EditorView.domEventHandlers({
|
||||
paste(event, view) {
|
||||
setTimeout(() => {
|
||||
self.afterPaste(event);
|
||||
});
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
|
|
@ -154,12 +165,35 @@ class InputWaiter {
|
|||
/**
|
||||
* Handler for EOL change events
|
||||
* Sets the line separator
|
||||
* @param {string} eolVal
|
||||
* @param {string} eol
|
||||
* @param {boolean} manual - a flag for whether this was set by the user or automatically
|
||||
*/
|
||||
eolChange(eolVal) {
|
||||
const oldInputVal = this.getInput();
|
||||
eolChange(eol, manual=false) {
|
||||
const eolVal = eolCodeToSeq[eol];
|
||||
if (eolVal === undefined) return;
|
||||
|
||||
const eolBtn = document.querySelector("#input-text .eol-value");
|
||||
if (manual) {
|
||||
this.eolSetManually = true;
|
||||
eolBtn.classList.remove("font-italic");
|
||||
} else {
|
||||
eolBtn.classList.add("font-italic");
|
||||
}
|
||||
|
||||
if (eolVal === this.getEOLSeq()) return;
|
||||
|
||||
if (!manual) {
|
||||
// Pulse
|
||||
eolBtn.classList.add("pulse");
|
||||
setTimeout(() => {
|
||||
eolBtn.classList.remove("pulse");
|
||||
}, 2000);
|
||||
// Alert
|
||||
this.app.alert(`Input EOL separator has been changed to ${eolCodeToName[eol]}`, 5000);
|
||||
}
|
||||
|
||||
// Update the EOL value
|
||||
const oldInputVal = this.getInput();
|
||||
this.inputEditorView.dispatch({
|
||||
effects: this.inputEditorConf.eol.reconfigure(EditorState.lineSeparator.of(eolVal))
|
||||
});
|
||||
|
|
@ -866,6 +900,49 @@ class InputWaiter {
|
|||
}, delay, "inputChange", this, [e])();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler that fires just after input paste events.
|
||||
* Checks whether the EOL separator or character encoding should be updated.
|
||||
*
|
||||
* @param {event} e
|
||||
*/
|
||||
afterPaste(e) {
|
||||
// If EOL has been fixed, skip this.
|
||||
if (this.eolSetManually) return;
|
||||
|
||||
const inputText = this.getInput();
|
||||
|
||||
// Detect most likely EOL sequence
|
||||
const eolCharCounts = {
|
||||
"LF": inputText.count("\u000a"),
|
||||
"VT": inputText.count("\u000b"),
|
||||
"FF": inputText.count("\u000c"),
|
||||
"CR": inputText.count("\u000d"),
|
||||
"CRLF": inputText.count("\u000d\u000a"),
|
||||
"NEL": inputText.count("\u0085"),
|
||||
"LS": inputText.count("\u2028"),
|
||||
"PS": inputText.count("\u2029")
|
||||
};
|
||||
|
||||
// If all zero, leave alone
|
||||
const total = Object.values(eolCharCounts).reduce((acc, curr) => {
|
||||
return acc + curr;
|
||||
}, 0);
|
||||
if (total === 0) return;
|
||||
|
||||
// If CRLF not zero and more than half the highest alternative, choose CRLF
|
||||
const highest = Object.entries(eolCharCounts).reduce((acc, curr) => {
|
||||
return curr[1] > acc[1] ? curr : acc;
|
||||
}, ["LF", 0]);
|
||||
if ((eolCharCounts.CRLF * 2) > highest[1]) {
|
||||
this.eolChange("CRLF");
|
||||
return;
|
||||
}
|
||||
|
||||
// Else choose max
|
||||
this.eolChange(highest[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for input dragover events.
|
||||
* Gives the user a visual cue to show that items can be dropped here.
|
||||
|
|
@ -1199,6 +1276,9 @@ class InputWaiter {
|
|||
this.manager.output.removeAllOutputs();
|
||||
this.manager.output.terminateZipWorker();
|
||||
|
||||
this.eolSetManually = false;
|
||||
this.manager.output.eolSetManually = false;
|
||||
|
||||
const tabsList = document.getElementById("input-tabs");
|
||||
const tabsListChildren = tabsList.children;
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ import {
|
|||
import {statusBar} from "../utils/statusBar.mjs";
|
||||
import {htmlPlugin} from "../utils/htmlWidget.mjs";
|
||||
import {copyOverride} from "../utils/copyOverride.mjs";
|
||||
import {renderSpecialChar} from "../utils/editorUtils.mjs";
|
||||
import {eolCodeToSeq, eolCodeToName, renderSpecialChar} from "../utils/editorUtils.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -70,6 +70,7 @@ class OutputWaiter {
|
|||
this.zipWorker = null;
|
||||
this.maxTabs = this.manager.tabs.calcMaxTabs();
|
||||
this.tabTimeout = null;
|
||||
this.eolSetManually = false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -146,9 +147,33 @@ class OutputWaiter {
|
|||
/**
|
||||
* Handler for EOL change events
|
||||
* Sets the line separator
|
||||
* @param {string} eolVal
|
||||
* @param {string} eol
|
||||
* @param {boolean} manual - a flag for whether this was set by the user or automatically
|
||||
*/
|
||||
async eolChange(eolVal) {
|
||||
async eolChange(eol, manual=false) {
|
||||
const eolVal = eolCodeToSeq[eol];
|
||||
if (eolVal === undefined) return;
|
||||
|
||||
const eolBtn = document.querySelector("#output-text .eol-value");
|
||||
if (manual) {
|
||||
this.eolSetManually = true;
|
||||
eolBtn.classList.remove("font-italic");
|
||||
} else {
|
||||
eolBtn.classList.add("font-italic");
|
||||
}
|
||||
|
||||
if (eolVal === this.getEOLSeq()) return;
|
||||
|
||||
if (!manual) {
|
||||
// Pulse
|
||||
eolBtn.classList.add("pulse");
|
||||
setTimeout(() => {
|
||||
eolBtn.classList.remove("pulse");
|
||||
}, 2000);
|
||||
// Alert
|
||||
this.app.alert(`Output EOL separator has been changed to ${eolCodeToName[eol]}`, 5000);
|
||||
}
|
||||
|
||||
const currentTabNum = this.manager.tabs.getActiveTab("output");
|
||||
if (currentTabNum >= 0) {
|
||||
this.outputs[currentTabNum].eolSequence = eolVal;
|
||||
|
|
@ -276,6 +301,9 @@ class OutputWaiter {
|
|||
// If turning word wrap off, do it before we populate the editor for performance reasons
|
||||
if (!wrap) this.setWordWrap(wrap);
|
||||
|
||||
// Detect suitable EOL sequence
|
||||
this.detectEOLSequence(data);
|
||||
|
||||
// We use setTimeout here to delay the editor dispatch until the next event cycle,
|
||||
// ensuring all async actions have completed before attempting to set the contents
|
||||
// of the editor. This is mainly with the above call to setWordWrap() in mind.
|
||||
|
|
@ -345,6 +373,48 @@ class OutputWaiter {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether the EOL separator should be updated
|
||||
*
|
||||
* @param {string} data
|
||||
*/
|
||||
detectEOLSequence(data) {
|
||||
// If EOL has been fixed, skip this.
|
||||
if (this.eolSetManually) return;
|
||||
// If data is too long, skip this.
|
||||
if (data.length > 1000000) return;
|
||||
|
||||
// Detect most likely EOL sequence
|
||||
const eolCharCounts = {
|
||||
"LF": data.count("\u000a"),
|
||||
"VT": data.count("\u000b"),
|
||||
"FF": data.count("\u000c"),
|
||||
"CR": data.count("\u000d"),
|
||||
"CRLF": data.count("\u000d\u000a"),
|
||||
"NEL": data.count("\u0085"),
|
||||
"LS": data.count("\u2028"),
|
||||
"PS": data.count("\u2029")
|
||||
};
|
||||
|
||||
// If all zero, leave alone
|
||||
const total = Object.values(eolCharCounts).reduce((acc, curr) => {
|
||||
return acc + curr;
|
||||
}, 0);
|
||||
if (total === 0) return;
|
||||
|
||||
// If CRLF not zero and more than half the highest alternative, choose CRLF
|
||||
const highest = Object.entries(eolCharCounts).reduce((acc, curr) => {
|
||||
return curr[1] > acc[1] ? curr : acc;
|
||||
}, ["LF", 0]);
|
||||
if ((eolCharCounts.CRLF * 2) > highest[1]) {
|
||||
this.eolChange("CRLF");
|
||||
return;
|
||||
}
|
||||
|
||||
// Else choose max
|
||||
this.eolChange(highest[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the maximum number of tabs to display
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue