rkgk/static/code-editor.js
liquidex ec773b7fe1 add error squiggles to brush editor
gosh I hate this code. CSS custom highlight API when, pleeeeeease Firefooooox
2024-09-06 22:51:19 +02:00

426 lines
12 KiB
JavaScript

export class CodeEditor extends HTMLElement {
constructor(layers) {
super();
this.layers = layers;
}
connectedCallback() {
this.indentWidth = 2;
this.layerGutter = this.appendChild(document.createElement("pre"));
this.layerGutter.classList.add("layer", "layer-gutter");
this.userLayers = [];
for (let layer of this.layers) {
let element = this.appendChild(document.createElement("pre"));
element.classList.add("layer", layer.className);
this.userLayers.push({
def: layer,
element,
});
}
this.textArea = this.appendChild(document.createElement("textarea"));
this.textArea.spellcheck = false;
this.textArea.rows = 1;
this.keyShortcuts = {
Enter: () => this.enter(),
Tab: () => this.tab(),
"Shift-Tab": () => this.decreaseIndent(),
"Ctrl-[": () => this.decreaseIndent(),
"Ctrl-]": () => this.increaseIndent(),
"Ctrl-z": () => this.undo(),
"Ctrl-Shift-z": () => this.redo(),
"Ctrl-y": () => this.redo(),
};
this.undoMergeTimeout = 300;
this.undoHistory = [];
this.undoHistoryTop = 0;
this.#textAreaAutoSizingBehaviour();
this.#keyShortcutBehaviours();
this.#renderLayers();
}
get code() {
return this.textArea.value;
}
#codeChanged() {
this.#resizeTextArea();
this.#renderLayers();
this.dispatchEvent(
Object.assign(new Event(".codeChanged"), {
newCode: this.code,
}),
);
}
setCode(value) {
this.textArea.value = value;
this.#codeChanged();
}
// Resizing the text area
#textAreaAutoSizingBehaviour() {
this.textArea.addEventListener("input", () => {
this.#codeChanged();
});
this.#resizeTextArea();
document.fonts.addEventListener("loadingdone", () => this.#resizeTextArea());
new ResizeObserver(() => this.#resizeTextArea()).observe(this.textArea);
}
#resizeTextArea() {
this.textArea.style.height = "";
this.textArea.style.height = `${this.textArea.scrollHeight}px`;
}
// Layers
rebuildLineMap() {
this.lineMap = new LineMap(this.code);
}
#renderLayers() {
this.rebuildLineMap();
this.#renderGutter();
for (let userLayer of this.userLayers) {
userLayer.element.replaceChildren();
userLayer.def.render(this.lineMap, userLayer.element);
}
}
#renderGutter() {
this.layerGutter.replaceChildren();
for (let lineBounds of this.lineMap.lineBounds) {
let lineElement = this.layerGutter.appendChild(document.createElement("span"));
lineElement.classList.add("line");
lineElement.textContent = lineBounds.substring;
}
}
renderLayer(className) {
for (let userLayer of this.userLayers) {
if (userLayer.def.className == className) {
userLayer.element.replaceChildren();
userLayer.def.render(this.lineMap, userLayer.element);
}
}
}
// Text editing
#keyShortcutBehaviours() {
this.textArea.addEventListener("keydown", (event) => {
let keyComponents = [];
if (event.ctrlKey) keyComponents.push("Ctrl");
if (event.altKey) keyComponents.push("Alt");
if (event.shiftKey) keyComponents.push("Shift");
keyComponents.push(event.key);
let keyChord = keyComponents.join("-");
let shortcut = this.keyShortcuts[keyChord];
if (shortcut != null) {
shortcut();
event.preventDefault();
}
});
this.textArea.addEventListener("beforeinput", () => {
this.pushHistory({ allowMerge: true });
});
}
getSelection() {
// NOTE: We only support one selection, because multiple selections are only
// supported by Firefox.
if (document.activeElement != this.textArea) return null;
if (this.textArea.selectionDirection == "forward") {
return new Selection(this.textArea.selectionStart, this.textArea.selectionEnd);
} else {
return new Selection(this.textArea.selectionEnd, this.textArea.selectionStart);
}
}
setSelection(selection) {
this.textArea.selectionDirection =
selection.anchor < selection.cursor ? "forward" : "backward";
this.textArea.selectionStart = selection.start;
this.textArea.selectionEnd = selection.end;
}
replace(selection, text) {
let left = this.code.substring(0, selection.start);
let right = this.code.substring(selection.end);
this.setCode(left + text + right);
}
pushHistory({ allowMerge }) {
this.undoHistory.splice(this.undoHistoryTop);
if (allowMerge && this.undoHistory.length > 1) {
let last = this.undoHistory[this.undoHistory.length - 1];
let elapsed = performance.now() - last.time;
if (elapsed < this.undoMergeTimeout) {
last.time = performance.now();
last.code = this.code;
last.selection = this.getSelection();
return;
}
}
this.undoHistory.push({
time: performance.now(),
code: this.code,
selection: this.getSelection(),
});
this.undoHistoryTop += 1;
}
popHistory() {
let entry = this.undoHistory[this.undoHistoryTop - 1];
if (entry == null) return null;
this.undoHistoryTop -= 1;
this.setCode(entry.code);
this.setSelection(entry.selection);
return entry;
}
insertTab(selection) {
let positionInLine = getPositionInLine(this.code, selection.cursor);
let positionInTab = positionInLine % this.indentWidth;
let spaceCount = this.indentWidth - positionInTab;
this.replace(selection, " ".repeat(spaceCount));
selection.advance(this.code, spaceCount);
}
indent(selection) {
let start = getLineStart(this.code, selection.start);
let end = getLineEnd(this.code, selection.end);
let indent = " ".repeat(this.indentWidth);
let indented = this.code.substring(start, end).split(/^/m);
for (let i = 0; i < indented.length; ++i) {
indented[i] = indent + indented[i];
}
this.replace(new Selection(start, end), indented.join(""));
if (selection.anchor < selection.cursor) {
selection.anchor += this.indentWidth;
selection.cursor += this.indentWidth * indented.length;
} else {
selection.anchor += this.indentWidth * indented.length;
selection.cursor += this.indentWidth;
}
}
unindent(selection) {
let start = getLineStart(this.code, selection.start);
let end = getLineEnd(this.code, selection.end);
let indent = " ".repeat(this.indentWidth);
let unindented = this.code.substring(start, end).split(/^/m);
for (let i = 0; i < unindented.length; ++i) {
if (unindented[i].startsWith(indent)) {
unindented[i] = unindented[i].substring(this.indentWidth);
}
}
this.replace(new Selection(start, end), unindented.join(""));
if (selection.anchor < selection.cursor) {
selection.anchor -= this.indentWidth;
selection.cursor -= this.indentWidth * unindented.length;
} else {
selection.anchor -= this.indentWidth * unindented.length;
selection.cursor -= this.indentWidth;
}
}
enter() {
this.pushHistory({ allowMerge: false });
let selection = this.getSelection();
let start = getLineStart(this.code, selection.start);
let indent = countSpaces(this.code, start);
let newLine = "\n" + " ".repeat(indent);
this.replace(selection, newLine);
selection.set(this.code, selection.start + newLine.length);
this.setSelection(selection);
}
tab() {
this.pushHistory({ allowMerge: false });
let selection = this.getSelection();
if (selection == null) return;
if (selection.anchor == selection.cursor) {
this.insertTab(selection);
} else {
this.indent(selection);
}
this.setSelection(selection);
}
increaseIndent() {
this.pushHistory({ allowMerge: false });
let selection = this.getSelection();
this.indent(selection);
this.setSelection(selection);
}
decreaseIndent() {
this.pushHistory({ allowMerge: false });
let selection = this.getSelection();
this.unindent(selection);
this.setSelection(selection);
}
undo() {
let code = this.code;
let popped = this.popHistory();
if (popped != null && popped.code == code) {
this.popHistory();
}
}
redo() {
let entry = this.undoHistory[this.undoHistoryTop];
if (entry == null) return;
this.undoHistoryTop += 1;
this.setCode(entry.code);
this.setSelection(entry.selection);
}
}
customElements.define("rkgk-code-editor", CodeEditor);
export class Selection {
constructor(anchor, cursor) {
this.anchor = anchor;
this.cursor = cursor;
}
get start() {
return Math.min(this.anchor, this.cursor);
}
get end() {
return Math.max(this.anchor, this.cursor);
}
clampCursor(text) {
this.cursor = Math.max(0, Math.min(this.cursor, text.length));
}
set(text, n) {
this.cursor = n;
this.clampCursor(text);
this.anchor = this.cursor;
}
advance(text, n) {
this.cursor += n;
this.clampCursor(text);
this.anchor = this.cursor;
}
}
export function getLineStart(string, position) {
do {
--position;
} while (string.charAt(position) != "\n" && position > 0);
if (string.charAt(position) == "\n") ++position;
return position;
}
export function getLineEnd(string, position) {
while (string.charAt(position) != "\n" && position < string.length) ++position;
return position + 1;
}
export function getPositionInLine(string, position) {
return position - getLineStart(string, position);
}
export function countSpaces(string, position) {
let count = 0;
while (string.charAt(position) == " ") {
++count;
++position;
}
return count;
}
export class LineMap {
constructor(string) {
// This simplifies the algorithm below a bit.
string += "\n";
this.string = string;
this.lineBounds = [];
let start = 0;
for (let i = 0; i < string.length; ++i) {
if (string.charAt(i) == "\n") {
let substring = string.substring(start, i);
this.lineBounds.push({ start, end: i, substring });
start = i + 1;
}
}
if (start < string.length) {
this.lineBounds.push({ start, end: string.length, substring: string.substring(start) });
}
}
get(lineIndex) {
return this.lineBounds[lineIndex];
}
lineIndexAt(position) {
// Ported from the Rust 1.81 standard library binary search.
// I was too lazy to come up with the algorithm myself. Sorry to disappoint.
let size = this.lineBounds.length;
let left = 0;
let right = size;
while (left < right) {
let mid = (left + size / 2) | 0;
let isLess = this.lineBounds[mid].start < position;
let isEqual = this.lineBounds[mid].start == position;
left = isLess && !isEqual ? mid + 1 : left;
right = !isLess && !isEqual ? mid : right;
if (isEqual) {
return mid;
}
size = right - left;
}
return left - 1;
}
}