mirror of https://github.com/gchq/CyberChef.git
HTML outputs can now be selected and handle control characters correctly
This commit is contained in:
n1474335
parent
0dc2322269
commit
7c8a185a3d
|
|
@ -174,17 +174,13 @@ class Utils {
|
|||
* @returns {string}
|
||||
*/
|
||||
static printable(str, preserveWs=false, onlyAscii=false) {
|
||||
if (isWebEnvironment() && window.app && !window.app.options.treatAsUtf8) {
|
||||
str = Utils.byteArrayToChars(Utils.strToByteArray(str));
|
||||
}
|
||||
|
||||
if (onlyAscii) {
|
||||
return str.replace(/[^\x20-\x7f]/g, ".");
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-misleading-character-class
|
||||
const re = /[\0-\x08\x0B-\x0C\x0E-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u202A-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g;
|
||||
const wsRe = /[\x09-\x10\x0D\u2028\u2029]/g;
|
||||
const wsRe = /[\x09-\x10\u2028\u2029]/g;
|
||||
|
||||
str = str.replace(re, ".");
|
||||
if (!preserveWs) str = str.replace(wsRe, ".");
|
||||
|
|
@ -192,6 +188,21 @@ class Utils {
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns a string with whitespace represented as special characters from the
|
||||
* Unicode Private Use Area, which CyberChef will display as control characters.
|
||||
* Private Use Area characters are in the range U+E000..U+F8FF.
|
||||
* https://en.wikipedia.org/wiki/Private_Use_Areas
|
||||
* @param {string} str
|
||||
* @returns {string}
|
||||
*/
|
||||
static escapeWhitespace(str) {
|
||||
return str.replace(/[\x09-\x10]/g, function(c) {
|
||||
return String.fromCharCode(0xe000 + c.charCodeAt(0));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Parse a string entered by a user and replace escaped chars with the bytes they represent.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ class Magic extends Operation {
|
|||
|
||||
output += `<tr>
|
||||
<td><a href="#${recipeURL}">${Utils.generatePrettyRecipe(option.recipe, true)}</a></td>
|
||||
<td>${Utils.escapeHtml(Utils.printable(Utils.truncate(option.data, 99)))}</td>
|
||||
<td>${Utils.escapeHtml(Utils.escapeWhitespace(Utils.truncate(option.data, 99)))}</td>
|
||||
<td>${language}${fileType}${matchingOps}${useful}${validUTF8}${entropy}</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -86,12 +86,12 @@ class ROT13BruteForce extends Operation {
|
|||
}
|
||||
const rotatedString = Utils.byteArrayToUtf8(rotated);
|
||||
if (rotatedString.toLowerCase().indexOf(cribLower) >= 0) {
|
||||
const rotatedStringPrintable = Utils.printable(rotatedString, false);
|
||||
const rotatedStringEscaped = Utils.escapeWhitespace(rotatedString);
|
||||
if (printAmount) {
|
||||
const amountStr = "Amount = " + (" " + amount).slice(-2) + ": ";
|
||||
result.push(amountStr + rotatedStringPrintable);
|
||||
result.push(amountStr + rotatedStringEscaped);
|
||||
} else {
|
||||
result.push(rotatedStringPrintable);
|
||||
result.push(rotatedStringEscaped);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,12 +66,12 @@ class ROT47BruteForce extends Operation {
|
|||
}
|
||||
const rotatedString = Utils.byteArrayToUtf8(rotated);
|
||||
if (rotatedString.toLowerCase().indexOf(cribLower) >= 0) {
|
||||
const rotatedStringPrintable = Utils.printable(rotatedString, false);
|
||||
const rotatedStringEscaped = Utils.escapeWhitespace(rotatedString);
|
||||
if (printAmount) {
|
||||
const amountStr = "Amount = " + (" " + amount).slice(-2) + ": ";
|
||||
result.push(amountStr + rotatedStringPrintable);
|
||||
result.push(amountStr + rotatedStringEscaped);
|
||||
} else {
|
||||
result.push(rotatedStringPrintable);
|
||||
result.push(rotatedStringEscaped);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ class TextEncodingBruteForce extends Operation {
|
|||
let table = "<table class='table table-hover table-sm table-bordered table-nonfluid'><tr><th>Encoding</th><th>Value</th></tr>";
|
||||
|
||||
for (const enc in encodings) {
|
||||
const value = Utils.escapeHtml(Utils.printable(encodings[enc], true));
|
||||
const value = Utils.escapeHtml(Utils.escapeWhitespace(encodings[enc]));
|
||||
table += `<tr><td>${enc}</td><td>${value}</td></tr>`;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,33 +63,32 @@ class ToHexdump extends Operation {
|
|||
if (length < 1 || Math.round(length) !== length)
|
||||
throw new OperationError("Width must be a positive integer");
|
||||
|
||||
let output = "";
|
||||
const lines = [];
|
||||
for (let i = 0; i < data.length; i += length) {
|
||||
const buff = data.slice(i, i+length);
|
||||
let hexa = "";
|
||||
for (let j = 0; j < buff.length; j++) {
|
||||
hexa += Utils.hex(buff[j], padding) + " ";
|
||||
}
|
||||
|
||||
let lineNo = Utils.hex(i, 8);
|
||||
|
||||
const buff = data.slice(i, i+length);
|
||||
const hex = [];
|
||||
buff.forEach(b => hex.push(Utils.hex(b, padding)));
|
||||
let hexStr = hex.join(" ").padEnd(length*(padding+1), " ");
|
||||
|
||||
const ascii = Utils.printable(Utils.byteArrayToChars(buff), false, unixFormat);
|
||||
const asciiStr = ascii.padEnd(buff.length, " ");
|
||||
|
||||
if (upperCase) {
|
||||
hexa = hexa.toUpperCase();
|
||||
hexStr = hexStr.toUpperCase();
|
||||
lineNo = lineNo.toUpperCase();
|
||||
}
|
||||
|
||||
output += lineNo + " " +
|
||||
hexa.padEnd(length*(padding+1), " ") +
|
||||
" |" +
|
||||
Utils.printable(Utils.byteArrayToChars(buff), false, unixFormat).padEnd(buff.length, " ") +
|
||||
"|\n";
|
||||
lines.push(`${lineNo} ${hexStr} |${asciiStr}|`);
|
||||
|
||||
|
||||
if (includeFinalLength && i+buff.length === data.length) {
|
||||
output += Utils.hex(i+buff.length, 8) + "\n";
|
||||
lines.push(Utils.hex(i+buff.length, 8));
|
||||
}
|
||||
}
|
||||
|
||||
return output.slice(0, -1);
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -126,11 +126,7 @@ class XORBruteForce extends Operation {
|
|||
|
||||
if (crib && resultUtf8.toLowerCase().indexOf(crib) < 0) continue;
|
||||
if (printKey) record += "Key = " + Utils.hex(key, (2*keyLength)) + ": ";
|
||||
if (outputHex) {
|
||||
record += toHex(result);
|
||||
} else {
|
||||
record += Utils.printable(resultUtf8, false);
|
||||
}
|
||||
record += outputHex ? toHex(result) : Utils.escapeWhitespace(resultUtf8);
|
||||
|
||||
output.push(record);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -264,7 +264,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
|
||||
<div id="input-highlighter" class="no-select"></div>
|
||||
<div id="input-text"></div>
|
||||
<div class="input-file" id="input-file">
|
||||
<div class="file-overlay" id="file-overlay"></div>
|
||||
|
|
@ -341,7 +340,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="textarea-wrapper">
|
||||
<div id="output-highlighter" class="no-select"></div>
|
||||
<div id="output-text"></div>
|
||||
<img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
|
||||
<div id="output-file">
|
||||
|
|
|
|||
|
|
@ -177,31 +177,12 @@
|
|||
}
|
||||
|
||||
.textarea-wrapper textarea,
|
||||
.textarea-wrapper #output-text,
|
||||
.textarea-wrapper #output-highlighter {
|
||||
.textarea-wrapper #output-text {
|
||||
font-family: var(--fixed-width-font-family);
|
||||
font-size: var(--fixed-width-font-size);
|
||||
color: var(--fixed-width-font-colour);
|
||||
}
|
||||
|
||||
#input-highlighter,
|
||||
#output-highlighter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
letter-spacing: normal;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#output-loader {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -232,3 +232,11 @@ optgroup {
|
|||
.colorpicker-color div {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
/* CodeMirror */
|
||||
|
||||
.ͼ2 .cm-specialChar,
|
||||
.cm-specialChar {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
/**
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2022
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* In order to render whitespace characters as control character pictures in the output, even
|
||||
* when they are the designated line separator, CyberChef sometimes chooses to represent them
|
||||
* internally using the Unicode Private Use Area (https://en.wikipedia.org/wiki/Private_Use_Areas).
|
||||
* See `Utils.escapeWhitespace()` for an example of this.
|
||||
*
|
||||
* The `renderSpecialChar()` function understands that it should display these characters as
|
||||
* control pictures. When copying data from the Output, we need to replace these PUA characters
|
||||
* with their original values, so we override the DOM "copy" event and modify the copied data
|
||||
* if required. This handler is based closely on the built-in CodeMirror handler and defers to the
|
||||
* built-in handler if PUA characters are not present in the copied data, in order to minimise the
|
||||
* impact of breaking changes.
|
||||
*/
|
||||
|
||||
import {EditorView} from "@codemirror/view";
|
||||
|
||||
/**
|
||||
* Copies the currently selected text from the state doc.
|
||||
* Based on the built-in implementation with a few unrequired bits taken out:
|
||||
* https://github.com/codemirror/view/blob/7d9c3e54396242d17b3164a0e244dcc234ee50ee/src/input.ts#L604
|
||||
*
|
||||
* @param {EditorState} state
|
||||
* @returns {Object}
|
||||
*/
|
||||
function copiedRange(state) {
|
||||
const content = [];
|
||||
let linewise = false;
|
||||
for (const range of state.selection.ranges) if (!range.empty) {
|
||||
content.push(state.sliceDoc(range.from, range.to));
|
||||
}
|
||||
if (!content.length) {
|
||||
// Nothing selected, do a line-wise copy
|
||||
let upto = -1;
|
||||
for (const {from} of state.selection.ranges) {
|
||||
const line = state.doc.lineAt(from);
|
||||
if (line.number > upto) {
|
||||
content.push(line.text);
|
||||
}
|
||||
upto = line.number;
|
||||
}
|
||||
linewise = true;
|
||||
}
|
||||
|
||||
return {text: content.join(state.lineBreak), linewise};
|
||||
}
|
||||
|
||||
/**
|
||||
* Regex to match characters in the Private Use Area of the Unicode table.
|
||||
*/
|
||||
const PUARegex = new RegExp("[\ue000-\uf8ff]");
|
||||
const PUARegexG = new RegExp("[\ue000-\uf8ff]", "g");
|
||||
/**
|
||||
* Regex tto match Unicode Control Pictures.
|
||||
*/
|
||||
const CPRegex = new RegExp("[\u2400-\u243f]");
|
||||
const CPRegexG = new RegExp("[\u2400-\u243f]", "g");
|
||||
|
||||
/**
|
||||
* Overrides the DOM "copy" handler in the CodeMirror editor in order to return the original
|
||||
* values of control characters that have been represented in the Unicode Private Use Area for
|
||||
* visual purposes.
|
||||
* Based on the built-in copy handler with some modifications:
|
||||
* https://github.com/codemirror/view/blob/7d9c3e54396242d17b3164a0e244dcc234ee50ee/src/input.ts#L629
|
||||
*
|
||||
* This handler will defer to the built-in version if no PUA characters are present.
|
||||
*
|
||||
* @returns {Extension}
|
||||
*/
|
||||
export function copyOverride() {
|
||||
return EditorView.domEventHandlers({
|
||||
copy(event, view) {
|
||||
const {text, linewise} = copiedRange(view.state);
|
||||
if (!text && !linewise) return;
|
||||
|
||||
// If there are no PUA chars in the copied text, return false and allow the built-in
|
||||
// copy handler to fire
|
||||
if (!PUARegex.test(text)) return false;
|
||||
|
||||
// If PUA chars are detected, modify them back to their original values and copy that instead
|
||||
const rawText = text.replace(PUARegexG, function(c) {
|
||||
return String.fromCharCode(c.charCodeAt(0) - 0xe000);
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
event.clipboardData.clearData();
|
||||
event.clipboardData.setData("text/plain", rawText);
|
||||
|
||||
// Returning true prevents CodeMirror default handlers from firing
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handler for copy events in output-html decorations. If there are control pictures present,
|
||||
* this handler will convert them back to their raw form before copying. If there are no
|
||||
* control pictures present, it will do nothing and defer to the default browser handler.
|
||||
*
|
||||
* @param {ClipboardEvent} event
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function htmlCopyOverride(event) {
|
||||
const text = window.getSelection().toString();
|
||||
if (!text) return;
|
||||
|
||||
// If there are no control picture chars in the copied text, return false and allow the built-in
|
||||
// copy handler to fire
|
||||
if (!CPRegex.test(text)) return false;
|
||||
|
||||
// If control picture chars are detected, modify them back to their original values and copy that instead
|
||||
const rawText = text.replace(CPRegexG, function(c) {
|
||||
return String.fromCharCode(c.charCodeAt(0) - 0x2400);
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
event.clipboardData.clearData();
|
||||
event.clipboardData.setData("text/plain", rawText);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
@ -6,12 +6,41 @@
|
|||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
import Utils from "../../core/Utils.mjs";
|
||||
|
||||
// Descriptions for named control characters
|
||||
const Names = {
|
||||
0: "null",
|
||||
7: "bell",
|
||||
8: "backspace",
|
||||
10: "line feed",
|
||||
11: "vertical tab",
|
||||
13: "carriage return",
|
||||
27: "escape",
|
||||
8203: "zero width space",
|
||||
8204: "zero width non-joiner",
|
||||
8205: "zero width joiner",
|
||||
8206: "left-to-right mark",
|
||||
8207: "right-to-left mark",
|
||||
8232: "line separator",
|
||||
8237: "left-to-right override",
|
||||
8238: "right-to-left override",
|
||||
8233: "paragraph separator",
|
||||
65279: "zero width no-break space",
|
||||
65532: "object replacement"
|
||||
};
|
||||
|
||||
// Regex for Special Characters to be replaced
|
||||
const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
|
||||
const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\ufeff\ufff9-\ufffc\ue000-\uf8ff]", UnicodeRegexpSupport);
|
||||
|
||||
|
||||
/**
|
||||
* Override for rendering special characters.
|
||||
* Should mirror the toDOM function in
|
||||
* https://github.com/codemirror/view/blob/main/src/special-chars.ts#L150
|
||||
* But reverts the replacement of line feeds with newline control pictures.
|
||||
*
|
||||
* @param {number} code
|
||||
* @param {string} desc
|
||||
* @param {string} placeholder
|
||||
|
|
@ -19,10 +48,47 @@
|
|||
*/
|
||||
export function renderSpecialChar(code, desc, placeholder) {
|
||||
const s = document.createElement("span");
|
||||
// CodeMirror changes 0x0a to "NL" instead of "LF". We change it back.
|
||||
s.textContent = code === 0x0a ? "\u240a" : placeholder;
|
||||
|
||||
// CodeMirror changes 0x0a to "NL" instead of "LF". We change it back along with its description.
|
||||
if (code === 0x0a) {
|
||||
placeholder = "\u240a";
|
||||
desc = desc.replace("newline", "line feed");
|
||||
}
|
||||
|
||||
// Render CyberChef escaped characters correctly - see Utils.escapeWhitespace
|
||||
if (code >= 0xe000 && code <= 0xf8ff) {
|
||||
code = code - 0xe000;
|
||||
placeholder = String.fromCharCode(0x2400 + code);
|
||||
desc = "Control character " + (Names[code] || "0x" + code.toString(16));
|
||||
}
|
||||
|
||||
s.textContent = placeholder;
|
||||
s.title = desc;
|
||||
s.setAttribute("aria-label", desc);
|
||||
s.className = "cm-specialChar";
|
||||
return s;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Given a string, returns that string with any control characters replaced with HTML
|
||||
* renderings of control pictures.
|
||||
*
|
||||
* @param {string} str
|
||||
* @param {boolean} [preserveWs=false]
|
||||
* @param {string} [lineBreak="\n"]
|
||||
* @returns {html}
|
||||
*/
|
||||
export function escapeControlChars(str, preserveWs=false, lineBreak="\n") {
|
||||
if (!preserveWs)
|
||||
str = Utils.escapeWhitespace(str);
|
||||
|
||||
return str.replace(Specials, function(c) {
|
||||
if (lineBreak.includes(c)) return c;
|
||||
const code = c.charCodeAt(0);
|
||||
const desc = "Control character " + (Names[code] || "0x" + code.toString(16));
|
||||
const placeholder = code > 32 ? "\u2022" : String.fromCharCode(9216 + code);
|
||||
const n = renderSpecialChar(code, desc, placeholder);
|
||||
return n.outerHTML;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
*/
|
||||
|
||||
import {WidgetType, Decoration, ViewPlugin} from "@codemirror/view";
|
||||
import {escapeControlChars} from "./editorUtils.mjs";
|
||||
import {htmlCopyOverride} from "./copyOverride.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Adds an HTML widget to the Code Mirror editor
|
||||
|
|
@ -14,9 +17,10 @@ class HTMLWidget extends WidgetType {
|
|||
/**
|
||||
* HTMLWidget consructor
|
||||
*/
|
||||
constructor(html) {
|
||||
constructor(html, view) {
|
||||
super();
|
||||
this.html = html;
|
||||
this.view = view;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -27,9 +31,45 @@ class HTMLWidget extends WidgetType {
|
|||
const wrap = document.createElement("span");
|
||||
wrap.setAttribute("id", "output-html");
|
||||
wrap.innerHTML = this.html;
|
||||
|
||||
// Find text nodes and replace unprintable chars with control codes
|
||||
this.walkTextNodes(wrap);
|
||||
|
||||
// Add a handler for copy events to ensure the control codes are copied correctly
|
||||
wrap.addEventListener("copy", htmlCopyOverride);
|
||||
return wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Walks all text nodes in a given element
|
||||
* @param {DOMNode} el
|
||||
*/
|
||||
walkTextNodes(el) {
|
||||
for (const node of el.childNodes) {
|
||||
switch (node.nodeType) {
|
||||
case Node.TEXT_NODE:
|
||||
this.replaceControlChars(node);
|
||||
break;
|
||||
default:
|
||||
if (node.nodeName !== "SCRIPT" &&
|
||||
node.nodeName !== "STYLE")
|
||||
this.walkTextNodes(node);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders control characters in text nodes
|
||||
* @param {DOMNode} textNode
|
||||
*/
|
||||
replaceControlChars(textNode) {
|
||||
const val = escapeControlChars(textNode.nodeValue, true, this.view.state.lineBreak);
|
||||
const node = document.createElement("null");
|
||||
node.innerHTML = val;
|
||||
textNode.parentNode.replaceChild(node, textNode);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -42,7 +82,7 @@ function decorateHTML(view, html) {
|
|||
const widgets = [];
|
||||
if (html.length) {
|
||||
const deco = Decoration.widget({
|
||||
widget: new HTMLWidget(html),
|
||||
widget: new HTMLWidget(html, view),
|
||||
side: 1
|
||||
});
|
||||
widgets.push(deco.range(0));
|
||||
|
|
@ -79,7 +119,8 @@ export function htmlPlugin(htmlOutput) {
|
|||
}
|
||||
}
|
||||
}, {
|
||||
decorations: v => v.decorations
|
||||
decorations: v => v.decorations,
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -141,13 +141,6 @@ class OptionsWaiter {
|
|||
setWordWrap() {
|
||||
this.manager.input.setWordWrap(this.app.options.wordWrap);
|
||||
this.manager.output.setWordWrap(this.app.options.wordWrap);
|
||||
document.getElementById("input-highlighter").classList.remove("word-wrap");
|
||||
document.getElementById("output-highlighter").classList.remove("word-wrap");
|
||||
|
||||
if (!this.app.options.wordWrap) {
|
||||
document.getElementById("input-highlighter").classList.add("word-wrap");
|
||||
document.getElementById("output-highlighter").classList.add("word-wrap");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
import Utils, { debounce } from "../../core/Utils.mjs";
|
||||
import Utils, {debounce} from "../../core/Utils.mjs";
|
||||
import Dish from "../../core/Dish.mjs";
|
||||
import FileSaver from "file-saver";
|
||||
import ZipWorker from "worker-loader?inline=no-fallback!../workers/ZipWorker.mjs";
|
||||
|
|
@ -19,8 +19,9 @@ import {bracketMatching} from "@codemirror/language";
|
|||
import {search, searchKeymap, highlightSelectionMatches} from "@codemirror/search";
|
||||
|
||||
import {statusBar} from "../utils/statusBar.mjs";
|
||||
import {renderSpecialChar} from "../utils/editorUtils.mjs";
|
||||
import {htmlPlugin} from "../utils/htmlWidget.mjs";
|
||||
import {copyOverride} from "../utils/copyOverride.mjs";
|
||||
import {renderSpecialChar} from "../utils/editorUtils.mjs";
|
||||
|
||||
/**
|
||||
* Waiter to handle events related to the output
|
||||
|
|
@ -61,7 +62,8 @@ class OutputWaiter {
|
|||
initEditor() {
|
||||
this.outputEditorConf = {
|
||||
eol: new Compartment,
|
||||
lineWrapping: new Compartment
|
||||
lineWrapping: new Compartment,
|
||||
drawSelection: new Compartment
|
||||
};
|
||||
|
||||
const initialState = EditorState.create({
|
||||
|
|
@ -69,9 +71,10 @@ class OutputWaiter {
|
|||
extensions: [
|
||||
// Editor extensions
|
||||
EditorState.readOnly.of(true),
|
||||
htmlPlugin(this.htmlOutput),
|
||||
highlightSpecialChars({render: renderSpecialChar}),
|
||||
drawSelection(),
|
||||
highlightSpecialChars({
|
||||
render: renderSpecialChar, // Custom character renderer to handle special cases
|
||||
addSpecialChars: /[\ue000-\uf8ff]/g // Add the Unicode Private Use Area which we use for some whitespace chars
|
||||
}),
|
||||
rectangularSelection(),
|
||||
crosshairCursor(),
|
||||
bracketMatching(),
|
||||
|
|
@ -79,16 +82,19 @@ class OutputWaiter {
|
|||
search({top: true}),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
|
||||
// Custom extensiosn
|
||||
// Custom extensions
|
||||
statusBar({
|
||||
label: "Output",
|
||||
bakeStats: this.bakeStats,
|
||||
eolHandler: this.eolChange.bind(this)
|
||||
}),
|
||||
htmlPlugin(this.htmlOutput),
|
||||
copyOverride(),
|
||||
|
||||
// Mutable state
|
||||
this.outputEditorConf.lineWrapping.of(EditorView.lineWrapping),
|
||||
this.outputEditorConf.eol.of(EditorState.lineSeparator.of("\n")),
|
||||
this.outputEditorConf.drawSelection.of(drawSelection()),
|
||||
|
||||
// Keymap
|
||||
keymap.of([
|
||||
|
|
@ -153,6 +159,14 @@ class OutputWaiter {
|
|||
* @param {string} data
|
||||
*/
|
||||
setOutput(data) {
|
||||
// Turn drawSelection back on
|
||||
this.outputEditorView.dispatch({
|
||||
effects: this.outputEditorConf.drawSelection.reconfigure(
|
||||
drawSelection()
|
||||
)
|
||||
});
|
||||
|
||||
// Insert data into editor
|
||||
this.outputEditorView.dispatch({
|
||||
changes: {
|
||||
from: 0,
|
||||
|
|
@ -173,6 +187,11 @@ class OutputWaiter {
|
|||
// triggers the htmlWidget to render the HTML.
|
||||
this.setOutput("");
|
||||
|
||||
// Turn off drawSelection
|
||||
this.outputEditorView.dispatch({
|
||||
effects: this.outputEditorConf.drawSelection.reconfigure([])
|
||||
});
|
||||
|
||||
// Execute script sections
|
||||
const scriptElements = document.getElementById("output-html").querySelectorAll("script");
|
||||
for (let i = 0; i < scriptElements.length; i++) {
|
||||
|
|
@ -414,8 +433,6 @@ class OutputWaiter {
|
|||
if (typeof inputNum !== "number") inputNum = parseInt(inputNum, 10);
|
||||
|
||||
const outputFile = document.getElementById("output-file");
|
||||
const outputHighlighter = document.getElementById("output-highlighter");
|
||||
const inputHighlighter = document.getElementById("input-highlighter");
|
||||
|
||||
// If pending or baking, show loader and status message
|
||||
// If error, style the tab and handle the error
|
||||
|
|
@ -447,8 +464,6 @@ class OutputWaiter {
|
|||
this.outputTextEl.style.display = "block";
|
||||
this.outputTextEl.classList.remove("blur");
|
||||
outputFile.style.display = "none";
|
||||
outputHighlighter.display = "none";
|
||||
inputHighlighter.display = "none";
|
||||
this.clearHTMLOutput();
|
||||
|
||||
if (output.error) {
|
||||
|
|
@ -463,8 +478,6 @@ class OutputWaiter {
|
|||
if (output.data === null) {
|
||||
this.outputTextEl.style.display = "block";
|
||||
outputFile.style.display = "none";
|
||||
outputHighlighter.display = "block";
|
||||
inputHighlighter.display = "block";
|
||||
|
||||
this.clearHTMLOutput();
|
||||
this.setOutput("");
|
||||
|
|
@ -478,15 +491,11 @@ class OutputWaiter {
|
|||
switch (output.data.type) {
|
||||
case "html":
|
||||
outputFile.style.display = "none";
|
||||
outputHighlighter.style.display = "none";
|
||||
inputHighlighter.style.display = "none";
|
||||
|
||||
this.setHTMLOutput(output.data.result);
|
||||
break;
|
||||
case "ArrayBuffer":
|
||||
this.outputTextEl.style.display = "block";
|
||||
outputHighlighter.display = "none";
|
||||
inputHighlighter.display = "none";
|
||||
|
||||
this.clearHTMLOutput();
|
||||
this.setOutput("");
|
||||
|
|
@ -497,8 +506,6 @@ class OutputWaiter {
|
|||
default:
|
||||
this.outputTextEl.style.display = "block";
|
||||
outputFile.style.display = "none";
|
||||
outputHighlighter.display = "block";
|
||||
inputHighlighter.display = "block";
|
||||
|
||||
this.clearHTMLOutput();
|
||||
this.setOutput(output.data.result);
|
||||
|
|
@ -1215,8 +1222,6 @@ class OutputWaiter {
|
|||
document.querySelector("#output-loader .loading-msg").textContent = "Loading file slice...";
|
||||
this.toggleLoader(true);
|
||||
const outputFile = document.getElementById("output-file"),
|
||||
outputHighlighter = document.getElementById("output-highlighter"),
|
||||
inputHighlighter = document.getElementById("input-highlighter"),
|
||||
showFileOverlay = document.getElementById("show-file-overlay"),
|
||||
sliceFromEl = document.getElementById("output-file-slice-from"),
|
||||
sliceToEl = document.getElementById("output-file-slice-to"),
|
||||
|
|
@ -1238,8 +1243,6 @@ class OutputWaiter {
|
|||
|
||||
this.outputTextEl.style.display = "block";
|
||||
outputFile.style.display = "none";
|
||||
outputHighlighter.display = "block";
|
||||
inputHighlighter.display = "block";
|
||||
|
||||
this.toggleLoader(false);
|
||||
}
|
||||
|
|
@ -1251,8 +1254,6 @@ class OutputWaiter {
|
|||
document.querySelector("#output-loader .loading-msg").textContent = "Loading entire file at user instruction. This may cause a crash...";
|
||||
this.toggleLoader(true);
|
||||
const outputFile = document.getElementById("output-file"),
|
||||
outputHighlighter = document.getElementById("output-highlighter"),
|
||||
inputHighlighter = document.getElementById("input-highlighter"),
|
||||
showFileOverlay = document.getElementById("show-file-overlay"),
|
||||
output = this.outputs[this.manager.tabs.getActiveOutputTab()].data;
|
||||
|
||||
|
|
@ -1270,8 +1271,6 @@ class OutputWaiter {
|
|||
|
||||
this.outputTextEl.style.display = "block";
|
||||
outputFile.style.display = "none";
|
||||
outputHighlighter.display = "block";
|
||||
inputHighlighter.display = "block";
|
||||
|
||||
this.toggleLoader(false);
|
||||
}
|
||||
|
|
@ -1319,36 +1318,13 @@ class OutputWaiter {
|
|||
}
|
||||
|
||||
const output = await dish.get(Dish.STRING);
|
||||
const self = this;
|
||||
|
||||
// Create invisible textarea to populate with the raw dish string (not the printable version that
|
||||
// contains dots instead of the actual bytes)
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.top = 0;
|
||||
textarea.style.left = 0;
|
||||
textarea.style.width = 0;
|
||||
textarea.style.height = 0;
|
||||
textarea.style.border = "none";
|
||||
|
||||
textarea.value = output;
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
let success = false;
|
||||
try {
|
||||
textarea.select();
|
||||
success = output && document.execCommand("copy");
|
||||
} catch (err) {
|
||||
success = false;
|
||||
}
|
||||
|
||||
if (success) {
|
||||
this.app.alert("Copied raw output successfully.", 2000);
|
||||
} else {
|
||||
this.app.alert("Sorry, the output could not be copied.", 3000);
|
||||
}
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(textarea);
|
||||
navigator.clipboard.writeText(output).then(function() {
|
||||
self.app.alert("Copied raw output successfully.", 2000);
|
||||
}, function(err) {
|
||||
self.app.alert("Sorry, the output could not be copied.", 3000);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import HTMLOperation from "../HTMLOperation.mjs";
|
||||
import Sortable from "sortablejs";
|
||||
import Utils from "../../core/Utils.mjs";
|
||||
import {escapeControlChars} from "../utils/editorUtils.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -568,7 +569,7 @@ class RecipeWaiter {
|
|||
|
||||
const registerList = [];
|
||||
for (let i = 0; i < registers.length; i++) {
|
||||
registerList.push(`$R${numPrevRegisters + i} = ${Utils.escapeHtml(Utils.truncate(Utils.printable(registers[i]), 100))}`);
|
||||
registerList.push(`$R${numPrevRegisters + i} = ${escapeControlChars(Utils.escapeHtml(Utils.truncate(registers[i], 100)))}`);
|
||||
}
|
||||
const registerListEl = `<div class="register-list">
|
||||
${registerList.join("<br>")}
|
||||
|
|
|
|||
Loading…
Reference in New Issue