@kerebron/extension-codemirror 0.2.0 → 0.2.1

package/esm/extension-codemirror/src/NodeCodeMirror.js

@@ -0,0 +1,198 @@
+import { Plugin, PluginKey, Selection } from 'prosemirror-state';
+import { Node } from '../../editor/src/mod.js';
+import { setBlockType, } from '../../editor/src/commands/mod.js';
+import { textblockTypeInputRule, } from '../../editor/src/plugins/input-rules/mod.js';
+import { codeMirrorBlockNodeView } from './codeMirrorBlockNodeView.js';
+import { defaultSettings } from './defaults.js';
+import languageLoaders, { legacyLanguageLoaders } from './languageLoaders.js';
+import { createNodeFromObject } from '../../editor/src/utilities/mod.js';
+export const codeMirrorBlockKey = new PluginKey('codemirror-block');
+function arrowHandler(dir) {
+    return (state, dispatch, view) => {
+        if (state.selection.empty && view.endOfTextblock(dir)) {
+            let side = dir == 'left' || dir == 'up' ? -1 : 1;
+            let $head = state.selection.$head;
+            let nextPos = Selection.near(state.doc.resolve(side > 0 ? $head.after() : $head.before()), side);
+            if (nextPos.$head && nextPos.$head.parent.type.name == 'code_block') {
+                dispatch(state.tr.setSelection(nextPos));
+                return true;
+            }
+        }
+        return false;
+    };
+}
+const LANGS = [
+    'diff',
+    'dockerfile',
+    'http',
+    'nginx',
+    'properties',
+    'shell',
+    'toml',
+    'yaml',
+    'sql',
+    'javascript',
+    'cpp',
+    'css',
+    'xml',
+    'java',
+    'json',
+    'markdown',
+    'rust',
+    'html',
+];
+export class NodeCodeMirror extends Node {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'code_block'
+        });
+        // requires = ['doc'];
+        Object.defineProperty(this, "automerge", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                block: this.name,
+                attrParsers: {
+                    fromAutomerge: (block) => ({ lang: block.attrs.lang }),
+                    fromProsemirror: (node) => ({ lang: node.attrs.lang }),
+                },
+            }
+        });
+    }
+    getConverters(editor, schema) {
+        return {
+            'text/code-only': {
+                fromDoc(document) {
+                    const retVal = [];
+                    if (document.content) {
+                        for (const node of document.content.toJSON()) {
+                            if ('code_block' === node.type && Array.isArray(node.content)) {
+                                for (const content of node.content) {
+                                    retVal.push(content.text);
+                                }
+                            }
+                        }
+                    }
+                    return retVal.join('');
+                },
+                toDoc(code) {
+                    const content = {
+                        'type': 'doc_code',
+                        'content': [
+                            {
+                                'type': 'code_block',
+                                'attrs': {
+                                    'lang': schema.topNodeType.spec.defaultAttrs?.lang,
+                                },
+                                'content': [
+                                    {
+                                        'type': 'text',
+                                        'text': code,
+                                    },
+                                ],
+                            },
+                        ],
+                    };
+                    return createNodeFromObject(content, schema, {
+                        slice: false,
+                        errorOnInvalidContent: false,
+                    });
+                },
+            },
+        };
+    }
+    getNodeSpec() {
+        const langs = this.config.languageWhitelist || LANGS;
+        return {
+            content: 'text*',
+            marks: '',
+            group: 'block',
+            code: true,
+            defining: true,
+            parseDOM: [
+                {
+                    tag: 'pre',
+                    preserveWhitespace: 'full',
+                    getAttrs(dom) {
+                        let lang = dom.getAttribute('lang');
+                        if (!lang) {
+                            for (const className of dom.classList) {
+                                if (className.startsWith('lang-') &&
+                                    langs.indexOf(className.substring('lang-'.length)) > -1) {
+                                    lang = className.substring('lang-'.length);
+                                    break;
+                                }
+                            }
+                        }
+                        return {
+                            lang,
+                        };
+                    },
+                },
+            ],
+            attrs: { lang: { default: null } },
+            toDOM(node) {
+                const { lang } = node.attrs;
+                return ['pre', { lang }, ['code', 0]];
+            },
+        };
+    }
+    getInputRules(type) {
+        /// Given a code block node type, returns an input rule that turns a
+        /// textblock starting with three backticks into a code block.
+        return [
+            textblockTypeInputRule(/^```$/, type),
+        ];
+    }
+    getCommands(editor, type) {
+        return {
+            'setCodeBlock': (lang) => setBlockType(type, { lang }),
+            ArrowLeft: () => arrowHandler('left'),
+            ArrowRight: () => arrowHandler('right'),
+            ArrowUp: () => arrowHandler('up'),
+            ArrowDown: () => arrowHandler('down'),
+        };
+    }
+    getKeyboardShortcuts() {
+        return {
+            'Shift-Ctrl-"': 'setCodeBlock',
+            'ArrowLeft': 'ArrowLeft',
+            'ArrowRight': 'ArrowRight',
+            'ArrowUp': 'ArrowUp',
+            'ArrowDown': 'ArrowDown',
+        };
+    }
+    getProseMirrorPlugins(editor) {
+        const codeMirrorBlockPlugin = (settings) => new Plugin({
+            key: codeMirrorBlockKey,
+            props: {
+                nodeViews: {
+                    [this.name]: codeMirrorBlockNodeView(settings),
+                },
+            },
+        });
+        return [
+            codeMirrorBlockPlugin({
+                provider: this.config.provider,
+                languageWhitelist: this.config.languageWhitelist || LANGS,
+                shadowRoot: this.config.shadowRoot,
+                ...defaultSettings,
+                readOnly: this.config.readOnly,
+                languageLoaders: { ...languageLoaders, ...legacyLanguageLoaders },
+                undo: () => {
+                    editor.chain().undo().run();
+                },
+                redo: () => {
+                    editor.chain().redo().run();
+                },
+                theme: [...(this.config.theme || [])],
+            }),
+            // keymap(codeBlockKeymap),
+        ];
+    }
+}

package/esm/extension-codemirror/src/NodeDocumentCode.d.ts

@@ -0,0 +1,7 @@
+import { NodeSpec } from 'prosemirror-model';
+import { Node } from '../../editor/src/mod.js';
+export declare class NodeDocumentCode extends Node {
+    name: string;
+    getNodeSpec(): NodeSpec;
+}
+//# sourceMappingURL=NodeDocumentCode.d.ts.map

package/esm/extension-codemirror/src/NodeDocumentCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeDocumentCode.d.ts","sourceRoot":"","sources":["../../../src/extension-codemirror/src/NodeDocumentCode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,qBAAa,gBAAiB,SAAQ,IAAI;IAC/B,IAAI,SAAc;IAElB,WAAW,IAAI,QAAQ;CAyBjC"}

package/esm/extension-codemirror/src/NodeDocumentCode.js

@@ -0,0 +1,37 @@
+import { Node } from '../../editor/src/mod.js';
+export class NodeDocumentCode extends Node {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'doc_code'
+        });
+    }
+    getNodeSpec() {
+        return {
+            content: 'code_block',
+            defaultAttrs: {
+                'lang': this.config.lang || null,
+            },
+            EMPTY_DOC: {
+                'type': this.name,
+                'content': [
+                    {
+                        'type': 'code_block',
+                        'attrs': {
+                            'lang': this.config.lang || null,
+                        },
+                        'content': [
+                        // {
+                        //   "type": "text",
+                        // "text": ""
+                        // }
+                        ],
+                    },
+                ],
+            },
+        };
+    }
+}

package/esm/extension-codemirror/src/codeMirrorBlockNodeView.d.ts

@@ -0,0 +1,6 @@
+import { Node } from 'prosemirror-model';
+import { EditorView as PMEditorView, NodeView } from 'prosemirror-view';
+import { CodeBlockSettings } from './types.js';
+export declare const themeCallbacks: Array<(theme: string) => void>;
+export declare const codeMirrorBlockNodeView: (settings: CodeBlockSettings) => (pmNode: Node, view: PMEditorView, getPos: (() => number) | boolean) => NodeView;
+//# sourceMappingURL=codeMirrorBlockNodeView.d.ts.map

package/esm/extension-codemirror/src/codeMirrorBlockNodeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeMirrorBlockNodeView.d.ts","sourceRoot":"","sources":["../../../src/extension-codemirror/src/codeMirrorBlockNodeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAEL,UAAU,IAAI,YAAY,EAC1B,QAAQ,EACT,MAAM,kBAAkB,CAAC;AA0C1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAO/C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAM,CAAC;AA0QjE,eAAO,MAAM,uBAAuB,EAAE,CACpC,QAAQ,EAAE,iBAAiB,KACxB,CACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC,GAAG,OAAO,KAC7B,QAQJ,CAAC"}

package/esm/extension-codemirror/src/codeMirrorBlockNodeView.js

@@ -0,0 +1,267 @@
+import { exitCode, selectAll } from '../../editor/src/commands/mod.js';
+import { drawSelection, EditorView as CodeMirror, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, rectangularSelection, } from '@codemirror/view';
+import { highlightSelectionMatches, selectNextOccurrence, } from '@codemirror/search';
+import { bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, } from '@codemirror/language';
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, } from '@codemirror/autocomplete';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { Compartment, EditorState } from '@codemirror/state';
+import { backspaceHandler, computeChange, forwardSelection, maybeEscape, setMode, setTheme, valueChanged, } from './utils.js';
+import { YSyncConfig, ySyncFacet } from './y-sync.js';
+import { yRemoteSelections, yRemoteSelectionsTheme, } from './y-remote-selections.js';
+export const themeCallbacks = [];
+class CodeMirrorBlockNodeView {
+    constructor(node, view, getPos, settings) {
+        Object.defineProperty(this, "node", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: node
+        });
+        Object.defineProperty(this, "view", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: view
+        });
+        Object.defineProperty(this, "getPos", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: getPos
+        });
+        Object.defineProperty(this, "settings", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: settings
+        });
+        Object.defineProperty(this, "dom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "codeMirrorView", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "updating", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "createCopyButtonCB", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "selectDeleteCB", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "languageConf", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.updating = false;
+        const dom = document.createElement('div');
+        this.dom = dom;
+        dom.className = 'codeblock-root';
+        this.languageConf = new Compartment();
+        const themeConfig = new Compartment();
+        const yCollab = () => {
+            const plugins = [];
+            if (settings.provider?.awareness) {
+                const ySyncConfig = new YSyncConfig(() => this.node, getPos, settings.provider.awareness);
+                plugins.push(ySyncFacet.of(ySyncConfig));
+                plugins.push(yRemoteSelectionsTheme, yRemoteSelections);
+            }
+            return plugins;
+        };
+        const state = EditorState.create({
+            extensions: [
+                EditorState.readOnly.of(settings.readOnly),
+                CodeMirror.editable.of(!settings.readOnly),
+                lineNumbers(),
+                highlightActiveLineGutter(),
+                foldGutter(),
+                bracketMatching(),
+                closeBrackets(),
+                highlightSelectionMatches(),
+                autocompletion(),
+                rectangularSelection(),
+                drawSelection({ cursorBlinkRate: 1000 }), // broken focus
+                EditorState.allowMultipleSelections.of(true),
+                highlightActiveLine(),
+                syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+                this.languageConf.of([]),
+                indentOnInput(),
+                keymap.of([
+                    { key: 'Mod-d', run: selectNextOccurrence, preventDefault: true },
+                    {
+                        key: 'ArrowUp',
+                        run: (cmView) => maybeEscape('line', -1, cmView, view, getPos),
+                    },
+                    {
+                        key: 'ArrowLeft',
+                        run: (cmView) => maybeEscape('char', -1, cmView, view, getPos),
+                    },
+                    {
+                        key: 'ArrowDown',
+                        run: (cmView) => maybeEscape('line', 1, cmView, view, getPos),
+                    },
+                    {
+                        key: 'ArrowRight',
+                        run: (cmView) => maybeEscape('char', 1, cmView, view, getPos),
+                    },
+                    {
+                        key: 'Ctrl-Enter',
+                        run: () => {
+                            if (!exitCode(view.state, view.dispatch))
+                                return false;
+                            view.focus();
+                            return true;
+                        },
+                    },
+                    {
+                        key: 'Mod-z',
+                        run: () => settings.undo?.(view.state, view.dispatch) || true,
+                        shift: () => settings.redo?.(view.state, view.dispatch) || true,
+                    },
+                    {
+                        key: 'Mod-y',
+                        run: () => settings.redo?.(view.state, view.dispatch) || true,
+                    },
+                    { key: 'Backspace', run: (cmView) => backspaceHandler(view, cmView) },
+                    {
+                        key: 'Mod-Backspace',
+                        run: (cmView) => backspaceHandler(view, cmView),
+                    },
+                    {
+                        key: 'Mod-a',
+                        run: () => {
+                            const result = selectAll(view.state, view.dispatch);
+                            view.focus();
+                            return result;
+                        },
+                    },
+                    {
+                        key: 'Enter',
+                        run: (cmView) => {
+                            const sel = cmView.state.selection.main;
+                            if (cmView.state.doc.line(cmView.state.doc.lines).text === '' &&
+                                sel.from === sel.to &&
+                                sel.from === cmView.state.doc.length) {
+                                exitCode(view.state, view.dispatch);
+                                view.focus();
+                                return true;
+                            }
+                            return false;
+                        },
+                    },
+                    ...defaultKeymap,
+                    ...foldKeymap,
+                    ...closeBracketsKeymap,
+                    ...completionKeymap,
+                    indentWithTab,
+                ]),
+                ...(settings.theme ? settings.theme : []),
+                themeConfig.of([]),
+                yCollab(),
+            ],
+            doc: node.textContent,
+        });
+        const root = settings.shadowRoot || document;
+        this.codeMirrorView = new CodeMirror({
+            state,
+            root,
+            dispatch: (tr) => {
+                this.codeMirrorView.update([tr]);
+                if (!this.updating) {
+                    const textUpdate = tr.state.toJSON().doc;
+                    valueChanged(textUpdate, this.node, getPos, view);
+                    forwardSelection(this.codeMirrorView, view, getPos);
+                }
+            },
+        });
+        dom.append(this.codeMirrorView.dom);
+        if (!(Array.isArray(settings.languageWhitelist) &&
+            settings.languageWhitelist.length === 1)) {
+            this.selectDeleteCB = settings.createSelect(settings, dom, node, view, getPos);
+        }
+        this.createCopyButtonCB = settings.createCopyButton(settings, dom, node, view, this.codeMirrorView, getPos);
+        setMode(node.attrs.lang, this.codeMirrorView, settings, this.languageConf);
+        const currentTheme = settings.getCurrentTheme?.();
+        setTheme(this.codeMirrorView, themeConfig, [
+            settings.themes.find((t) => t.name === currentTheme),
+        ]);
+        this.updateTheme = (theme) => {
+            setTheme(this.codeMirrorView, themeConfig, [
+                settings.themes.find((t) => t.name === theme),
+            ]);
+        };
+        themeCallbacks.push(this.updateTheme);
+    }
+    updateTheme(updateTheme) {
+        throw new Error('Method not implemented.');
+    }
+    selectNode() {
+        this.codeMirrorView.focus();
+    }
+    stopEvent(e) {
+        return this.settings.stopEvent(e, this.node, this.getPos, this.view, this.dom);
+    }
+    setSelection(anchor, head) {
+        this.codeMirrorView.focus();
+        this.updating = true;
+        this.codeMirrorView.dispatch({ selection: { anchor, head } });
+        this.updating = false;
+    }
+    update(updateNode) {
+        if (updateNode.type.name !== this.node.type.name)
+            return false;
+        if (updateNode.attrs.lang !== this.node.attrs.lang) {
+            setMode(updateNode.attrs.lang, this.codeMirrorView, this.settings, this.languageConf);
+        }
+        const oldNode = this.node;
+        this.node = updateNode;
+        const change = computeChange(this.codeMirrorView.state.doc.toString(), this.node.textContent);
+        if (change) {
+            this.updating = true;
+            this.codeMirrorView.dispatch({
+                changes: {
+                    from: change.from,
+                    to: change.to,
+                    insert: change.text,
+                },
+                selection: { anchor: change.from + change.text.length },
+            });
+            this.updating = false;
+        }
+        this.settings.updateSelect(this.settings, this.dom, updateNode, this.view, this.getPos, oldNode);
+        return true;
+    }
+    ignoreMutation() {
+        return true;
+    }
+    destroy() {
+        if (this.selectDeleteCB) {
+            this.selectDeleteCB();
+        }
+        this.createCopyButtonCB();
+        themeCallbacks.splice(themeCallbacks.indexOf(this.updateTheme), 1);
+    }
+}
+export const codeMirrorBlockNodeView = (settings) => {
+    return (pmNode, view, getPos) => {
+        return new CodeMirrorBlockNodeView(pmNode, view, getPos, settings);
+    };
+};

package/esm/extension-codemirror/src/defaults.d.ts

@@ -0,0 +1,6 @@
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { CodeBlockSettings } from './types.js';
+export declare const defaultCreateSelect: (settings: CodeBlockSettings, dom: HTMLElement, node: Node, view: EditorView, getPos: (() => number) | boolean) => () => void;
+export declare const defaultSettings: CodeBlockSettings;
+//# sourceMappingURL=defaults.d.ts.map

package/esm/extension-codemirror/src/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/extension-codemirror/src/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,eAAO,MAAM,mBAAmB,aACpB,iBAAiB,OACtB,WAAW,QACV,IAAI,QACJ,UAAU,UACR,CAAC,MAAM,MAAM,CAAC,GAAG,OAAO,eAwCjC,CAAC;AAmBF,eAAO,MAAM,eAAe,EAAE,iBAS7B,CAAC"}

package/esm/extension-codemirror/src/defaults.js

@@ -0,0 +1,57 @@
+export const defaultCreateSelect = (settings, dom, node, view, getPos) => {
+    if (!settings.languageLoaders)
+        return () => { };
+    const { languageLoaders } = settings;
+    const select = document.createElement('select');
+    select.className = 'codeblock-select';
+    const noneOption = document.createElement('option');
+    noneOption.value = 'none';
+    noneOption.textContent = settings.languageNameMap?.none || 'none';
+    select.append(noneOption);
+    Object.keys(languageLoaders)
+        .sort()
+        .forEach((lang) => {
+        if (settings.languageWhitelist &&
+            !settings.languageWhitelist.includes(lang)) {
+            return;
+        }
+        const option = document.createElement('option');
+        option.value = lang;
+        option.textContent = settings.languageNameMap?.[lang] || lang;
+        select.append(option);
+    });
+    select.value = node.attrs.lang || 'none';
+    dom.prepend(select);
+    select.onchange = async (e) => {
+        if (!(e.target instanceof HTMLSelectElement))
+            return;
+        const lang = e.target.value;
+        if (typeof getPos === 'function') {
+            view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
+                ...node.attrs,
+                lang,
+            }));
+        }
+    };
+    // Delete code.
+    return () => { };
+};
+const defaultUpdateSelect = (settings, dom, node, view, getPos, oldNode) => {
+    if (oldNode.attrs.lang !== node.attrs.lang) {
+        const select = dom.querySelector('.codeblock-select');
+        if (!(select instanceof HTMLSelectElement))
+            return;
+        select.value = node.attrs.lang || 'none';
+    }
+};
+const defaultStopEvent = () => true;
+export const defaultSettings = {
+    createSelect: defaultCreateSelect,
+    updateSelect: defaultUpdateSelect,
+    createCopyButton: () => {
+        return () => { };
+    },
+    stopEvent: defaultStopEvent,
+    readOnly: false,
+    themes: [],
+};

package/esm/extension-codemirror/src/languageLoaders.d.ts

@@ -0,0 +1,5 @@
+import { LanguageLoaders } from './types.js';
+declare const languageLoaders: LanguageLoaders;
+export declare const legacyLanguageLoaders: LanguageLoaders;
+export default languageLoaders;
+//# sourceMappingURL=languageLoaders.d.ts.map

package/esm/extension-codemirror/src/languageLoaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"languageLoaders.d.ts","sourceRoot":"","sources":["../../../src/extension-codemirror/src/languageLoaders.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,QAAA,MAAM,eAAe,EAAE,eA6BtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,eAyWnC,CAAC;AAEF,eAAe,eAAe,CAAC"}