@kerebron/extension-codejar 0.4.27 → 0.4.29

package/src/ExtensionCodeJar.ts

@@ -0,0 +1,83 @@
+import { Node, Schema } from 'prosemirror-model';
+import {
+  AnyExtensionOrReq,
+  type Converter,
+  type CoreEditor,
+  Extension,
+} from '@kerebron/editor';
+import { createNodeFromObject } from '@kerebron/editor/utilities';
+import { NodeCodeJar, NodeCodeJarConfig } from './NodeCodeJar.js';
+
+export * from './NodeCodeJar.js';
+
+export interface ExtensionCodeJarConfig {
+  readOnly?: boolean;
+  languageWhitelist?: string[];
+}
+
+export class ExtensionCodeJar extends Extension {
+  override name = 'code-jar';
+  requires: AnyExtensionOrReq[];
+
+  constructor(protected override config: ExtensionCodeJarConfig = {}) {
+    super(config);
+
+    this.requires = [
+      new NodeCodeJar({
+        languageWhitelist: config.languageWhitelist,
+        // theme: config.theme,
+      }),
+    ];
+  }
+
+  override getConverters(
+    editor: CoreEditor,
+    schema: Schema,
+  ): Record<string, Converter> {
+    return {
+      'text/code-only': {
+        fromDoc: async (document: Node): Promise<Uint8Array> => {
+          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 new TextEncoder().encode(retVal.join(''));
+        },
+        toDoc: async (buffer: Uint8Array): Promise<Node> => {
+          const code = new TextDecoder().decode(buffer);
+          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,
+            {
+              errorOnInvalidContent: false,
+            },
+          );
+        },
+      },
+    };
+  }
+}

package/src/NodeCodeJar.ts

@@ -0,0 +1,107 @@
+import { EditorView } from 'prosemirror-view';
+import {
+  EditorState,
+  Plugin,
+  PluginKey,
+  Selection,
+  Transaction,
+} from 'prosemirror-state';
+import type { NodeType } from 'prosemirror-model';
+
+import { type CoreEditor } from '@kerebron/editor';
+import { getShadowRoot } from '@kerebron/editor/utilities';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+
+import { getLangsList } from '@kerebron/wasm';
+import { NodeCodeBlock } from '@kerebron/extension-basic-editor/NodeCodeBlock';
+
+import { codeJarBlockNodeView } from './codeJarBlockNodeView.js';
+
+export const codeJarBlockKey = new PluginKey('code-jar-block');
+
+function arrowHandler(dir: 'left' | 'right' | 'up' | 'down') {
+  return (
+    state: EditorState,
+    dispatch: (tr: Transaction) => void,
+    view: EditorView,
+  ) => {
+    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;
+  };
+}
+
+export interface NodeCodeJarConfig {
+  readOnly?: boolean;
+  languageWhitelist?: string[];
+}
+
+export class NodeCodeJar extends NodeCodeBlock {
+  constructor(override config: NodeCodeJarConfig) {
+    super(config);
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'setCodeBlock': (lang?: string) =>
+        editor.commandFactories.setBlockType(type, { lang }),
+      // ArrowLeft: () => arrowHandler('left'),
+      // ArrowRight: () => arrowHandler('right'),
+      // ArrowUp: () => arrowHandler('up'),
+      // ArrowDown: () => arrowHandler('down'),
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    return {
+      'Shift-Ctrl-"': 'setCodeBlock',
+      'ArrowLeft': 'ArrowLeft',
+      'ArrowRight': 'ArrowRight',
+      'ArrowUp': 'ArrowUp',
+      'ArrowDown': 'ArrowDown',
+    };
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    const shadowRoot = getShadowRoot(this.editor.config.element);
+
+    const settings = {
+      languageWhitelist: this.config.languageWhitelist || getLangsList(),
+      shadowRoot,
+      readOnly: this.editor.config.readOnly || this.config.readOnly,
+      undo: () => {
+        this.editor.chain().undo().run();
+      },
+      redo: () => {
+        this.editor.chain().redo().run();
+      },
+    };
+
+    return [
+      new Plugin({
+        key: codeJarBlockKey,
+        props: {
+          nodeViews: {
+            [this.name]: codeJarBlockNodeView(settings, this.editor),
+          },
+        },
+      }),
+    ];
+  }
+}

package/src/TreeSitterHighlighter.ts

@@ -0,0 +1,85 @@
+import { createParser, type Parser } from '@kerebron/tree-sitter';
+
+import {
+  fetchTextResource,
+  fetchWasm,
+  getLangTreeSitter,
+} from '@kerebron/wasm';
+
+import { DecorationInline, Decorator } from './Decorator.js';
+
+export class TreeSitterHighlighter {
+  parser: Parser | undefined;
+  hightligtScm: string | undefined;
+  cdnUrl? = 'http://localhost:8000/wasm/';
+  lang?: string;
+
+  async init(lang: string): Promise<boolean> {
+    this.lang = lang;
+    if (!lang) {
+      this.parser = undefined;
+      this.hightligtScm = undefined;
+      return true;
+    }
+    const treeSitterConfig = getLangTreeSitter(lang, this.cdnUrl);
+    const wasmUrl = treeSitterConfig.files[0]; // TODO add support for split parsers like markdown
+    const highlightUrl = treeSitterConfig.queries['highlights.scm'];
+
+    try {
+      const wasm = await fetchWasm(wasmUrl);
+      this.parser = await createParser(wasm);
+
+      this.hightligtScm = await fetchTextResource(highlightUrl);
+    } catch (err) {
+      console.error('Error init highlight for: ' + lang, err);
+    }
+
+    if (!this.parser) {
+      console.warn('Parser not inited');
+      return false;
+    }
+    if (!this.hightligtScm) {
+      console.warn('hightligtScm not inited');
+      return false;
+    }
+
+    return true;
+  }
+
+  highlight(code: string, decorator: Decorator) {
+    if (!this.lang || !this.parser || !this.hightligtScm) {
+      decorator.decorationGroups['highlight'] = [];
+      return decorator.highlight(code);
+    }
+
+    const tree = this.parser.parse(code)!;
+    const root = tree.rootNode;
+
+    const highlightsQuery = root.query(this.hightligtScm);
+
+    const captures = [];
+
+    for (const item of highlightsQuery) {
+      captures.push(...item.captures);
+    }
+
+    const decorations: DecorationInline[] = [];
+
+    for (const capture of captures) {
+      const { node, name } = capture; // name is the capture like "@string"
+
+      const startIndex = node.startIndex;
+      const endIndex = node.endIndex;
+
+      decorations.push({
+        startIndex,
+        endIndex,
+        className: 'ts-' + name.replaceAll('.', '_'),
+      });
+    }
+
+    decorator.decorationGroups['highlight'] = decorations;
+
+    return decorator.highlight(code);
+  }
+}

package/src/_dnt.shims.ts

@@ -0,0 +1,60 @@
+const dntGlobals = {
+};
+export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
+
+function createMergeProxy<T extends object, U extends object>(
+  baseObj: T,
+  extObj: U,
+): Omit<T, keyof U> & U {
+  return new Proxy(baseObj, {
+    get(_target, prop, _receiver) {
+      if (prop in extObj) {
+        return (extObj as any)[prop];
+      } else {
+        return (baseObj as any)[prop];
+      }
+    },
+    set(_target, prop, value) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      (baseObj as any)[prop] = value;
+      return true;
+    },
+    deleteProperty(_target, prop) {
+      let success = false;
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+        success = true;
+      }
+      if (prop in baseObj) {
+        delete (baseObj as any)[prop];
+        success = true;
+      }
+      return success;
+    },
+    ownKeys(_target) {
+      const baseKeys = Reflect.ownKeys(baseObj);
+      const extKeys = Reflect.ownKeys(extObj);
+      const extKeysSet = new Set(extKeys);
+      return [...baseKeys.filter((k) => !extKeysSet.has(k)), ...extKeys];
+    },
+    defineProperty(_target, prop, desc) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      Reflect.defineProperty(baseObj, prop, desc);
+      return true;
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      if (prop in extObj) {
+        return Reflect.getOwnPropertyDescriptor(extObj, prop);
+      } else {
+        return Reflect.getOwnPropertyDescriptor(baseObj, prop);
+      }
+    },
+    has(_target, prop) {
+      return prop in extObj || prop in baseObj;
+    },
+  }) as any;
+}

package/src/codeJarBlockNodeView.ts

@@ -0,0 +1,372 @@
+import { Node } from 'prosemirror-model';
+import {
+  Decoration,
+  DecorationSource,
+  EditorView,
+  EditorView as PMEditorView,
+  NodeView,
+} from 'prosemirror-view';
+import { Diagnostic } from 'vscode-languageserver-protocol';
+
+import { CoreEditor, RawTextResult } from '@kerebron/editor';
+import { PositionMapper } from '@kerebron/extension-markdown/PositionMapper';
+import { ExtensionLsp, LspSource } from '@kerebron/extension-lsp';
+import { toRawTextResult } from '@kerebron/editor/utilities';
+
+import { CodeJar, Position } from './CodeJar.js';
+import { computeChange, forwardSelection, valueChanged } from './utils.js';
+import { TreeSitterHighlighter } from './TreeSitterHighlighter.js';
+import { DecorationInline, Decorator } from './Decorator.js';
+import {
+  initLineNumbers,
+  lineNumberOptions,
+  refreshNumbers,
+} from './codeJarLineNumbers.js';
+import { NodeCodeJarConfig } from './NodeCodeJar.js';
+
+class CodeJarBlockNodeView implements NodeView {
+  dom: HTMLDivElement;
+  codeJar: CodeJar;
+  updating: boolean;
+  element: HTMLDivElement;
+  highlighter: TreeSitterHighlighter;
+  decorator: Decorator;
+  languageDropDown: HTMLSelectElement;
+  lineNumbers: HTMLElement;
+
+  source: LspSource;
+  extensionLsp: ExtensionLsp | undefined;
+  lang: string = 'plaintext';
+  uri: string = 'file:///' + Math.random() + '.ts';
+  diagListener: (event: Event) => void;
+
+  constructor(
+    private node: Node,
+    private view: EditorView,
+    private getPos: () => number | undefined,
+    private config: NodeCodeJarConfig,
+    private editor: CoreEditor,
+  ) {
+    this.updating = false;
+    const dom = document.createElement('div');
+    this.dom = dom;
+    dom.className = 'codejar-root';
+
+    this.languageDropDown = this.addLanguageDropDown();
+
+    const root = (editor.view && 'root' in editor.view)
+      ? editor.view.root
+      : document || document;
+
+    this.element = document.createElement('div');
+    this.element.classList.add('codejar');
+
+    this.codeJar = new CodeJar(
+      this.element,
+      (element) => this.highlight(element),
+      {
+        tab: '  ',
+        indentOn: new RegExp('^(?!)'),
+        moveToNewLine: new RegExp('^(?!)'),
+        history: false,
+        readOnly: this.config.readOnly,
+      },
+    );
+
+    this.codeJar.onUpdate(() => {
+      if (!this.updating) {
+        const textUpdate = this.codeJar.toString();
+        valueChanged(textUpdate, this.node, getPos, view);
+        if (document.activeElement === this.element) {
+          forwardSelection(this.codeJar, view, getPos);
+        }
+      }
+
+      const client = this.extensionLsp?.getClient(this.lang);
+      if (client) {
+        client.workspace.changedFile(
+          this.uri,
+        );
+      }
+    });
+
+    this.highlighter = new TreeSitterHighlighter();
+    this.highlighter.cdnUrl = this.editor.config.cdnUrl;
+    this.decorator = new Decorator();
+
+    dom.append(this.element);
+
+    this.lineNumbers = initLineNumbers(this.element, lineNumberOptions);
+
+    this.source = {
+      ui: this.editor.ui,
+      getMappedContent: async () => {
+        const editor = this.editor;
+        const result: RawTextResult = toRawTextResult(
+          this.codeJar.toString(),
+          0,
+        );
+        const mapper = new PositionMapper(editor, result.rawTextMap);
+        return {
+          ...result,
+          mapper,
+        };
+      },
+    };
+
+    this.extensionLsp = editor.getExtension('lsp');
+
+    let lastDiag = 0;
+    this.diagListener = (event: Event) => {
+      const detail = (event as CustomEvent).detail;
+      if (detail.params.uri !== this.uri) {
+        return;
+      }
+
+      event.preventDefault();
+
+      lastDiag = +Date();
+
+      const client = this.extensionLsp?.getClient(this.lang);
+      if (client) {
+        const file = client.workspace.getFile(this.uri);
+        if (file) {
+          const { mapper } = file;
+          console.debug({
+            diagnostics: detail.params.diagnostics,
+            mapper,
+          });
+
+          const diagnostics: Diagnostic[] = detail.params.diagnostics;
+
+          const decors: DecorationInline[] = [];
+
+          for (const diag of diagnostics) {
+            const startIndex = mapper.fromLineChar(
+              diag.range.start.line,
+              diag.range.start.character,
+            );
+            const endIndex = mapper.fromLineChar(
+              diag.range.end.line,
+              diag.range.end.character,
+            );
+
+            decors.push({
+              startIndex,
+              endIndex,
+              className: 'kb-lsp__error',
+              title: diag.message || '',
+            });
+          }
+
+          this.decorator.decorationGroups.innerDiag = decors;
+          this.highlight(this.element);
+        }
+      }
+    };
+  }
+
+  addLanguageDropDown() {
+    const select = document.createElement('select');
+    select.classList.add('codejar-select');
+    for (const lang of [''].concat(this.config.languageWhitelist || [])) {
+      const option = document.createElement('option');
+      option.value = lang;
+      option.innerText = lang;
+      select.appendChild(option);
+    }
+    this.dom.appendChild(select);
+    select.addEventListener('change', async () => {
+      const lang = select.value;
+      const pos = this.getPos();
+      if (pos) {
+        this.view.dispatch(
+          this.view.state.tr.setNodeMarkup(pos, undefined, {
+            ...this.node.attrs,
+            lang,
+          }),
+        );
+      }
+      await this.setLang(lang);
+    });
+    return select;
+  }
+
+  async setLang(lang: string) {
+    this.languageDropDown.value = lang || '';
+    await this.highlighter.init(lang);
+    this.highlight(this.element);
+    this.lang = lang;
+
+    const client = this.extensionLsp?.getClient(this.lang);
+    if (client) {
+      client.addEventListener(
+        'textDocument/publishDiagnostics',
+        this.diagListener,
+      );
+
+      client.connect(this.uri, this.source);
+      client.workspace.openFile(
+        this.uri,
+        lang,
+        this.source,
+      );
+    }
+  }
+
+  async init() {
+    this.codeJar.updateCode(this.node.textContent, false);
+    if (this.node.attrs.lang) {
+      await this.setLang(this.node.attrs.lang);
+    }
+  }
+
+  setSelection(anchor: number, head: number) {
+    this.element.focus();
+    this.updating = true;
+
+    const pos = this.getPos();
+    if (pos) {
+      anchor -= pos;
+      head -= pos;
+
+      const posJar: Position = {
+        start: Math.min(anchor, head),
+        end: Math.max(anchor, head),
+        dir: (anchor <= head) ? '->' : '<-',
+      };
+      this.codeJar.restore(posJar);
+    }
+
+    this.updating = false;
+  }
+
+  highlight(editor: HTMLElement) {
+    // const highlight = withLineNumbers((element) => this.highlight(element));
+    if (!this.highlighter) {
+      editor.innerHTML = editor.textContent;
+    } else {
+      const content = editor.textContent;
+      editor.innerHTML = this.highlighter.highlight(content, this.decorator) ||
+        content;
+    }
+    refreshNumbers(this.lineNumbers, editor);
+  }
+
+  update(
+    updateNode: Node,
+    _decorations: readonly Decoration[],
+    innerDecorations: DecorationSource,
+  ) {
+    const codeDecorations: Decoration[] = [];
+
+    innerDecorations
+      .forEachSet((set) =>
+        set.find()
+          .map((d) => {
+            codeDecorations.push(d);
+          })
+      );
+
+    const decors: DecorationInline[] = [];
+
+    for (const cd of codeDecorations) {
+      if ('type' in cd) {
+        const type = cd.type;
+        decors.push({
+          startIndex: cd.from,
+          endIndex: cd.to,
+          className: type?.attrs?.class || '',
+          title: type?.attrs?.title || '',
+        });
+      }
+    }
+
+    this.decorator.decorationGroups.diag = decors;
+
+    const oldNode = this.node;
+
+    const content = this.codeJar.toString();
+
+    const change = computeChange(
+      content,
+      updateNode.textContent,
+    );
+
+    if (change) {
+      const pos = this.codeJar.save();
+
+      this.updating = true;
+      this.codeJar.updateCode(updateNode.textContent, true);
+      this.updating = false;
+
+      // TODO fix for yjs collab
+      // change.from, change.to, change.text.length
+      if (pos) {
+        this.codeJar.restore(pos);
+      }
+    }
+
+    this.node = updateNode;
+    if (updateNode.attrs.lang !== oldNode.attrs.lang) {
+      this.setLang(updateNode.attrs.lang);
+    }
+
+    return true;
+  }
+
+  selectNode() {
+    this.element.focus();
+  }
+
+  stopEvent(_e: Event) {
+    return true;
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  destroy() {
+    const client = this.extensionLsp?.getClient(this.lang);
+    if (client) {
+      if (this.uri) {
+        client.disconnect(this.uri);
+      }
+      if (this.diagListener) {
+        client.removeEventListener(
+          'textDocument/publishDiagnostics',
+          this.diagListener,
+        );
+      }
+    }
+    this.codeJar.destroy();
+  }
+}
+
+export const codeJarBlockNodeView: (
+  settings: NodeCodeJarConfig,
+  editor: CoreEditor,
+) => (
+  node: Node,
+  view: EditorView,
+  getPos: () => number | undefined,
+  decorations: readonly Decoration[],
+  innerDecorations: DecorationSource,
+) => NodeView = (settings, editor) => {
+  return (
+    pmNode: Node,
+    view: PMEditorView,
+    getPos: () => number | undefined,
+  ) => {
+    const plugin = new CodeJarBlockNodeView(
+      pmNode,
+      view,
+      getPos,
+      settings,
+      editor,
+    );
+    plugin.init();
+    return plugin;
+  };
+};