@kerebron/extension-codejar 0.4.1

package/esm/extension-codejar/src/CodeJar.d.ts

@@ -0,0 +1,50 @@
+import * as dntShim from "../../_dnt.shims.js";
+type Options = {
+    tab: string;
+    indentOn: RegExp;
+    moveToNewLine: RegExp;
+    spellcheck: boolean;
+    catchTab: boolean;
+    preserveIdent: boolean;
+    addClosing: boolean;
+    history: boolean;
+    window: typeof dntShim.dntGlobalThis;
+    autoclose: {
+        open: string;
+        close: string;
+    };
+};
+type HistoryRecord = {
+    html: string;
+    pos: Position;
+};
+export type Position = {
+    start: number;
+    end: number;
+    dir?: '->' | '<-';
+};
+export declare class CodeJar extends EventTarget {
+    private editor;
+    private highlight;
+    options: Options;
+    listeners: [string, any][];
+    history: HistoryRecord[];
+    at: number;
+    onUpdateCbk: (code: string) => void | undefined;
+    focus: boolean;
+    prev: string | undefined;
+    constructor(editor: HTMLElement, highlight: (e: HTMLElement, pos?: Position) => void, opt?: Partial<Options>);
+    getSelection(): Selection;
+    private doHighlight;
+    private uneditable;
+    toString(): any;
+    updateOptions(newOptions: Partial<Options>): void;
+    updateCode(code: string, callOnUpdate?: boolean): void;
+    onUpdate(callback: (code: string) => void): void;
+    save(): Position;
+    restore(pos: Position): void;
+    recordHistory(): void;
+    destroy(): void;
+}
+export {};
+//# sourceMappingURL=CodeJar.d.ts.map

package/esm/extension-codejar/src/CodeJar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeJar.d.ts","sourceRoot":"","sources":["../../../src/extension-codejar/src/CodeJar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAC;AAG/C,KAAK,OAAO,GAAG;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,OAAO,CAAC,aAAa,CAAC;IACrC,SAAS,EAAE;QACT,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAqEF,qBAAa,OAAQ,SAAQ,WAAW;IAUpC,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,SAAS;IAVnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAM;IAChC,OAAO,EAAE,aAAa,EAAE,CAAM;IAC9B,EAAE,SAAM;IACR,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,SAAS,CAAgB;IAC/D,KAAK,UAAS;IACd,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;gBAGf,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,QAAQ,KAAK,IAAI,EAC3D,GAAG,GAAE,OAAO,CAAC,OAAO,CAAM;IAiS5B,YAAY,IACyC,SAAS;IAG9D,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAYT,QAAQ;IAIjB,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,OAAO,CAAC;IAI1C,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,GAAE,OAAc;IAMrD,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IAIzC,IAAI,IAAI,QAAQ;IA0EhB,OAAO,CAAC,GAAG,EAAE,QAAQ;IAiFrB,aAAa;IA0Bb,OAAO;CAKR"}

package/esm/extension-codejar/src/CodeJar.js

@@ -0,0 +1,585 @@
+import * as dntShim from "../../_dnt.shims.js";
+const globalWindow = dntShim.dntGlobalThis;
+function visit(editor, visitor) {
+    const queue = [];
+    if (editor.firstChild)
+        queue.push(editor.firstChild);
+    let el = queue.pop();
+    while (el) {
+        if (visitor(el) === 'stop')
+            break;
+        if (el.nextSibling)
+            queue.push(el.nextSibling);
+        if (el.firstChild)
+            queue.push(el.firstChild);
+        el = queue.pop();
+    }
+}
+function isCtrl(event) {
+    return event.metaKey || event.ctrlKey;
+}
+function isUndo(event) {
+    return isCtrl(event) && !event.shiftKey && getKeyCode(event) === 'Z';
+}
+function isRedo(event) {
+    return isCtrl(event) && event.shiftKey && getKeyCode(event) === 'Z';
+}
+function isCopy(event) {
+    return isCtrl(event) && getKeyCode(event) === 'C';
+}
+function getKeyCode(event) {
+    let key = event.key || event.keyCode || event.which;
+    if (!key)
+        return undefined;
+    return (typeof key === 'string' ? key : String.fromCharCode(key))
+        .toUpperCase();
+}
+function insert(text) {
+    text = text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    document.execCommand('insertHTML', false, text);
+}
+function debounce(cb, wait) {
+    let timeout = 0;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = globalThis.setTimeout(() => cb(...args), wait);
+    };
+}
+function findPadding(text) {
+    // Find beginning of previous line.
+    let i = text.length - 1;
+    while (i >= 0 && text[i] !== '\n')
+        i--;
+    i++;
+    // Find padding of the line.
+    let j = i;
+    while (j < text.length && /[ \t]/.test(text[j]))
+        j++;
+    return [text.substring(i, j) || '', i, j];
+}
+export class CodeJar extends EventTarget {
+    constructor(editor, highlight, opt = {}) {
+        super();
+        Object.defineProperty(this, "editor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: editor
+        });
+        Object.defineProperty(this, "highlight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: highlight
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "history", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "at", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: -1
+        });
+        Object.defineProperty(this, "onUpdateCbk", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => void 0
+        });
+        Object.defineProperty(this, "focus", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "prev", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        }); // code content prior keydown event
+        this.options = {
+            tab: '\t',
+            indentOn: /[({\[]$/,
+            moveToNewLine: /^[)}\]]/,
+            spellcheck: false,
+            catchTab: true,
+            preserveIdent: true,
+            addClosing: true,
+            history: true,
+            window: globalWindow,
+            autoclose: {
+                open: '',
+                close: '',
+            },
+            ...opt,
+        };
+        const window = this.options.window;
+        const document = window.document;
+        editor.setAttribute('contenteditable', 'plaintext-only');
+        editor.setAttribute('spellcheck', this.options.spellcheck ? 'true' : 'false');
+        editor.style.outline = 'none';
+        editor.style.overflowWrap = 'break-word';
+        editor.style.overflowY = 'auto';
+        editor.style.whiteSpace = 'pre-wrap';
+        const matchFirefoxVersion = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
+        const firefoxVersion = matchFirefoxVersion
+            ? parseInt(matchFirefoxVersion[1])
+            : 0;
+        let isLegacy = false; // true if plaintext-only is not supported
+        if (editor.contentEditable !== 'plaintext-only' || firefoxVersion >= 136) {
+            isLegacy = true;
+        }
+        if (isLegacy)
+            editor.setAttribute('contenteditable', 'true');
+        const debounceHighlight = debounce(() => {
+            const pos = this.save();
+            this.doHighlight(editor, pos);
+            this.restore(pos);
+        }, 30);
+        let recording = false;
+        const shouldRecord = (event) => {
+            return !isUndo(event) && !isRedo(event) &&
+                event.key !== 'Meta' &&
+                event.key !== 'Control' &&
+                event.key !== 'Alt' &&
+                !event.key.startsWith('Arrow');
+        };
+        const debounceRecordHistory = debounce((event) => {
+            if (shouldRecord(event)) {
+                this.recordHistory();
+                recording = false;
+            }
+        }, 300);
+        const on = (type, fn) => {
+            this.listeners.push([type, fn]);
+            this.editor.addEventListener(type, fn);
+        };
+        on('keydown', (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.prev = this.toString();
+            if (this.options.preserveIdent)
+                handleNewLine(event);
+            else
+                legacyNewLineFix(event);
+            if (this.options.catchTab)
+                handleTabCharacters(event);
+            if (this.options.addClosing)
+                handleSelfClosingCharacters(event);
+            if (this.options.history) {
+                handleUndoRedo(event);
+                if (shouldRecord(event) && !recording) {
+                    this.recordHistory();
+                    recording = true;
+                }
+            }
+            if (isLegacy && !isCopy(event))
+                this.restore(this.save());
+        });
+        on('keyup', (event) => {
+            if (event.defaultPrevented)
+                return;
+            if (event.isComposing)
+                return;
+            if (this.prev !== this.toString())
+                debounceHighlight();
+            debounceRecordHistory(event);
+            this.onUpdateCbk(this.toString());
+        });
+        on('focus', (_event) => {
+            this.focus = true;
+        });
+        on('blur', (_event) => {
+            this.focus = false;
+        });
+        on('paste', (event) => {
+            this.recordHistory();
+            handlePaste(event);
+            this.recordHistory();
+            this.onUpdateCbk(this.toString());
+        });
+        on('cut', (event) => {
+            this.recordHistory();
+            handleCut(event);
+            this.recordHistory();
+            this.onUpdateCbk(this.toString());
+        });
+        const beforeCursor = () => {
+            const s = this.getSelection();
+            const r0 = s.getRangeAt(0);
+            const r = document.createRange();
+            r.selectNodeContents(editor);
+            r.setEnd(r0.startContainer, r0.startOffset);
+            return r.toString();
+        };
+        const afterCursor = () => {
+            const s = this.getSelection();
+            const r0 = s.getRangeAt(0);
+            const r = document.createRange();
+            r.selectNodeContents(editor);
+            r.setStart(r0.endContainer, r0.endOffset);
+            return r.toString();
+        };
+        const handleNewLine = (event) => {
+            if (event.key === 'Enter') {
+                const before = beforeCursor();
+                const after = afterCursor();
+                let [padding] = findPadding(before);
+                let newLinePadding = padding;
+                // If last symbol is "{" ident new line
+                if (this.options.indentOn.test(before)) {
+                    newLinePadding += this.options.tab;
+                }
+                // Preserve padding
+                if (newLinePadding.length > 0) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    insert('\n' + newLinePadding);
+                }
+                else {
+                    legacyNewLineFix(event);
+                }
+                // Place adjacent "}" on next line
+                if (newLinePadding !== padding && this.options.moveToNewLine.test(after)) {
+                    const pos = this.save();
+                    insert('\n' + padding);
+                    this.restore(pos);
+                }
+            }
+        };
+        const legacyNewLineFix = (event) => {
+            // Firefox does not support plaintext-only mode
+            // and puts <div><br></div> on Enter. Let's help.
+            if (isLegacy && event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                if (afterCursor() == '') {
+                    insert('\n ');
+                    const pos = this.save();
+                    pos.start = --pos.end;
+                    this.restore(pos);
+                }
+                else {
+                    insert('\n');
+                }
+            }
+        };
+        const handleSelfClosingCharacters = (event) => {
+            const open = this.options.autoclose.open;
+            const close = this.options.autoclose.close;
+            if (open.includes(event.key)) {
+                event.preventDefault();
+                const pos = this.save();
+                const wrapText = pos.start == pos.end
+                    ? ''
+                    : this.getSelection().toString();
+                const text = event.key + wrapText +
+                    (close[open.indexOf(event.key)] ?? '');
+                insert(text);
+                pos.start++;
+                pos.end++;
+                this.restore(pos);
+            }
+        };
+        const handleTabCharacters = (event) => {
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    const before = beforeCursor();
+                    let [padding, start] = findPadding(before);
+                    if (padding.length > 0) {
+                        const pos = this.save();
+                        // Remove full length tab or just remaining padding
+                        const len = Math.min(this.options.tab.length, padding.length);
+                        this.restore({ start, end: start + len });
+                        document.execCommand('delete');
+                        pos.start -= len;
+                        pos.end -= len;
+                        this.restore(pos);
+                    }
+                }
+                else {
+                    insert(this.options.tab);
+                }
+            }
+        };
+        const handleUndoRedo = (event) => {
+            if (isUndo(event)) {
+                event.preventDefault();
+                this.at--;
+                const record = this.history[this.at];
+                if (record) {
+                    editor.innerHTML = record.html;
+                    this.restore(record.pos);
+                }
+                if (this.at < 0)
+                    this.at = 0;
+            }
+            if (isRedo(event)) {
+                event.preventDefault();
+                this.at++;
+                const record = this.history[this.at];
+                if (record) {
+                    editor.innerHTML = record.html;
+                    this.restore(record.pos);
+                }
+                if (this.at >= history.length)
+                    this.at--;
+            }
+        };
+        const handlePaste = (event) => {
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            const originalEvent = event.originalEvent ?? event;
+            const text = originalEvent.clipboardData.getData('text/plain').replace(/\r\n?/g, '\n');
+            const pos = this.save();
+            insert(text);
+            this.doHighlight(editor);
+            this.restore({
+                start: Math.min(pos.start, pos.end) + text.length,
+                end: Math.min(pos.start, pos.end) + text.length,
+                dir: '<-',
+            });
+        };
+        const handleCut = (event) => {
+            const pos = this.save();
+            const selection = this.getSelection();
+            const originalEvent = event.originalEvent ?? event;
+            originalEvent.clipboardData.setData('text/plain', selection.toString());
+            document.execCommand('delete');
+            this.doHighlight(editor);
+            this.restore({
+                start: Math.min(pos.start, pos.end),
+                end: Math.min(pos.start, pos.end),
+                dir: '<-',
+            });
+            event.preventDefault();
+        };
+    }
+    getSelection() {
+        return this.editor.getRootNode().getSelection();
+    }
+    doHighlight(editor, pos) {
+        this.highlight(editor, pos);
+    }
+    uneditable(node) {
+        while (node && node !== this.editor) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.getAttribute('contenteditable') == 'false') {
+                    return el;
+                }
+            }
+            node = node.parentNode;
+        }
+    }
+    toString() {
+        return this.editor.textContent || '';
+    }
+    updateOptions(newOptions) {
+        Object.assign(this.options, newOptions);
+    }
+    updateCode(code, callOnUpdate = true) {
+        this.editor.textContent = code;
+        this.doHighlight(this.editor);
+        callOnUpdate && this.onUpdateCbk(code);
+    }
+    onUpdate(callback) {
+        this.onUpdateCbk = callback;
+    }
+    save() {
+        const s = this.getSelection();
+        const pos = { start: 0, end: 0, dir: undefined };
+        if (!s) {
+            return pos;
+        }
+        let { anchorNode, anchorOffset, focusNode, focusOffset } = s;
+        if (!anchorNode)
+            throw new Error('No anchorNode');
+        if (!focusNode)
+            throw new Error('No focusNode');
+        // If the anchor and focus are the editor element, return either a full
+        // highlight or a start/end cursor position depending on the selection
+        if (anchorNode === this.editor && focusNode === this.editor) {
+            pos.start = (anchorOffset > 0 && this.editor.textContent)
+                ? this.editor.textContent.length
+                : 0;
+            pos.end = (focusOffset > 0 && this.editor.textContent)
+                ? this.editor.textContent.length
+                : 0;
+            pos.dir = (focusOffset >= anchorOffset) ? '->' : '<-';
+            return pos;
+        }
+        // Selection anchor and focus are expected to be text nodes,
+        // so normalize them.
+        if (anchorNode.nodeType === Node.ELEMENT_NODE) {
+            const node = document.createTextNode('');
+            anchorNode.insertBefore(node, anchorNode.childNodes[anchorOffset]);
+            anchorNode = node;
+            anchorOffset = 0;
+        }
+        if (focusNode.nodeType === Node.ELEMENT_NODE) {
+            const node = document.createTextNode('');
+            focusNode.insertBefore(node, focusNode.childNodes[focusOffset]);
+            focusNode = node;
+            focusOffset = 0;
+        }
+        visit(this.editor, (el) => {
+            if (el === anchorNode && el === focusNode) {
+                pos.start += anchorOffset;
+                pos.end += focusOffset;
+                pos.dir = anchorOffset <= focusOffset ? '->' : '<-';
+                return 'stop';
+            }
+            if (el === anchorNode) {
+                pos.start += anchorOffset;
+                if (!pos.dir) {
+                    pos.dir = '->';
+                }
+                else {
+                    return 'stop';
+                }
+            }
+            else if (el === focusNode) {
+                pos.end += focusOffset;
+                if (!pos.dir) {
+                    pos.dir = '<-';
+                }
+                else {
+                    return 'stop';
+                }
+            }
+            if (el.nodeType === Node.TEXT_NODE) {
+                if (pos.dir != '->')
+                    pos.start += el.nodeValue.length;
+                if (pos.dir != '<-')
+                    pos.end += el.nodeValue.length;
+            }
+        });
+        this.editor.normalize(); // collapse empty text nodes
+        return pos;
+    }
+    restore(pos) {
+        const s = this.getSelection();
+        if (!s) {
+            return;
+        }
+        let startNode, startOffset = 0;
+        let endNode, endOffset = 0;
+        if (!pos.dir)
+            pos.dir = '->';
+        if (pos.start < 0)
+            pos.start = 0;
+        if (pos.end < 0)
+            pos.end = 0;
+        // Flip start and end if the direction reversed
+        if (pos.dir == '<-') {
+            const { start, end } = pos;
+            pos.start = end;
+            pos.end = start;
+        }
+        let current = 0;
+        visit(this.editor, (el) => {
+            if (el.nodeType !== Node.TEXT_NODE)
+                return;
+            const len = (el.nodeValue || '').length;
+            if (current + len > pos.start) {
+                if (!startNode) {
+                    startNode = el;
+                    startOffset = pos.start - current;
+                }
+                if (current + len > pos.end) {
+                    endNode = el;
+                    endOffset = pos.end - current;
+                    return 'stop';
+                }
+            }
+            current += len;
+        });
+        if (!startNode) {
+            startNode = this.editor;
+            startOffset = this.editor.childNodes.length;
+        }
+        if (!endNode) {
+            endNode = this.editor;
+            endOffset = this.editor.childNodes.length;
+        }
+        // Flip back the selection
+        if (pos.dir == '<-') {
+            [startNode, startOffset, endNode, endOffset] = [
+                endNode,
+                endOffset,
+                startNode,
+                startOffset,
+            ];
+        }
+        {
+            // If nodes not editable, create a text node.
+            const startEl = this.uneditable(startNode);
+            if (startEl) {
+                const node = document.createTextNode('');
+                startEl.parentNode?.insertBefore(node, startEl);
+                startNode = node;
+                startOffset = 0;
+            }
+            const endEl = this.uneditable(endNode);
+            if (endEl) {
+                const node = document.createTextNode('');
+                endEl.parentNode?.insertBefore(node, endEl);
+                endNode = node;
+                endOffset = 0;
+            }
+        }
+        s.setBaseAndExtent(startNode, startOffset, endNode, endOffset);
+        this.editor.normalize(); // collapse empty text nodes
+    }
+    recordHistory() {
+        if (!focus)
+            return;
+        const html = this.editor.innerHTML;
+        const pos = this.save();
+        const lastRecord = this.history[this.at];
+        if (lastRecord) {
+            if (lastRecord.html === html &&
+                lastRecord.pos.start === pos.start &&
+                lastRecord.pos.end === pos.end)
+                return;
+        }
+        this.at++;
+        this.history[this.at] = { html, pos };
+        this.history.splice(this.at + 1);
+        const maxHistory = 300;
+        if (this.at > maxHistory) {
+            this.at = maxHistory;
+            this.history.splice(0, 1);
+        }
+    }
+    destroy() {
+        for (let [type, fn] of this.listeners) {
+            this.editor.removeEventListener(type, fn);
+        }
+    }
+}

package/esm/extension-codejar/src/Decorator.d.ts

@@ -0,0 +1,11 @@
+export interface DecorationInline {
+    startIndex: number;
+    endIndex: number;
+    className: string;
+    title?: string;
+}
+export declare class Decorator {
+    decorationGroups: Record<string, DecorationInline[]>;
+    highlight(code: string): string;
+}
+//# sourceMappingURL=Decorator.d.ts.map

package/esm/extension-codejar/src/Decorator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Decorator.d.ts","sourceRoot":"","sources":["../../../src/extension-codejar/src/Decorator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,SAAS;IACb,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAM;IAEjE,SAAS,CAAC,IAAI,EAAE,MAAM;CAiDvB"}