@difizen/libro-codemirror 0.1.0 → 0.1.2

package/src/lsp/completion.ts

@@ -0,0 +1,175 @@
+import { pythonLanguage } from '@codemirror/lang-python';
+import { CompletionItemKind, CompletionTriggerKind } from '@difizen/libro-lsp';
+
+import type { Completion, CompletionSource } from '../auto-complete/index.js';
+
+import type { CMLSPExtension } from './protocol.js';
+import { offsetToPos, renderMarkupContent } from './util.js';
+
+export type CompletionItemDetailReolve = (
+  completion: Completion,
+) => Node | null | Promise<Node | null>;
+
+const CompletionItemKindMap = Object.fromEntries(
+  Object.entries(CompletionItemKind).map(([key, value]) => [value, key]),
+) as Record<CompletionItemKind, string>;
+
+function toSet(chars: Set<string>) {
+  let preamble = '';
+  let flat = Array.from(chars).join('');
+  const words = /\w/.test(flat);
+  if (words) {
+    preamble += '\\w';
+    flat = flat.replace(/\w/g, '');
+  }
+  return `[${preamble}${flat.replace(/[^\w\s]/g, '\\$&')}]`;
+}
+
+function prefixMatch(options: Completion[]) {
+  const first = new Set<string>();
+  const rest = new Set<string>();
+
+  for (const { apply } of options) {
+    const [initial, ...restStr] = apply as string;
+    first.add(initial);
+    for (const char of restStr) {
+      rest.add(char);
+    }
+  }
+
+  const source = toSet(first) + toSet(rest) + '*$';
+  return [new RegExp('^' + source), new RegExp(source)];
+}
+
+export const lspPythonCompletion: CMLSPExtension = ({ lspProvider }) => {
+  const completionSource: CompletionSource = async (context) => {
+    /**
+     * 只在显式的使用tab触发时调用kernel completion
+     * 只在只在隐式的输入时触发时调用lsp completion
+     */
+    if (!lspProvider || context.explicit === true) {
+      return null;
+    }
+
+    const { virtualDocument: doc, lspConnection, editor } = await lspProvider();
+
+    const { state } = context;
+    let { pos } = context;
+
+    if (
+      !lspConnection ||
+      !lspConnection.isReady ||
+      !lspConnection.provides('completionProvider')
+    ) {
+      return null;
+    }
+
+    const { line, character } = offsetToPos(state.doc, pos);
+
+    const rootPos = doc.transformFromEditorToRoot(editor, {
+      line,
+      ch: character,
+      isEditor: true,
+    });
+
+    if (!rootPos) {
+      return null;
+    }
+
+    const virtualPos = doc.virtualPositionAtDocument(rootPos);
+
+    const result = await lspConnection.clientRequests[
+      'textDocument/completion'
+    ].request({
+      position: { line: virtualPos.line, character: virtualPos.ch },
+      textDocument: {
+        uri: doc.documentInfo.uri,
+      },
+      context: {
+        triggerKind: CompletionTriggerKind.Invoked,
+      },
+    });
+
+    if (!result) {
+      return null;
+    }
+
+    const items = 'items' in result ? result.items : result;
+
+    let options = items.map((item) => {
+      const { detail, label, kind, textEdit, documentation, sortText, filterText } =
+        item;
+      const completion: Completion & {
+        filterText: string;
+        sortText?: string;
+        apply: string;
+      } = {
+        label,
+        detail,
+        apply: textEdit?.newText ?? label,
+        type: kind && CompletionItemKindMap[kind].toLowerCase(),
+        sortText: sortText ?? label,
+        filterText: filterText ?? label,
+      };
+      if (documentation) {
+        const resolver: CompletionItemDetailReolve = async () => {
+          return renderMarkupContent(documentation);
+        };
+        completion.info = resolver;
+      } else {
+        const resolver: CompletionItemDetailReolve = async () => {
+          const itemResult =
+            await lspConnection.clientRequests['completionItem/resolve'].request(item);
+          return itemResult.documentation
+            ? renderMarkupContent(itemResult.documentation)
+            : null;
+        };
+
+        completion.info = resolver;
+      }
+      return completion;
+    });
+
+    const [, match] = prefixMatch(options);
+    const token = context.matchBefore(match);
+
+    // TODO: sort 方法需要进一步改进
+    if (token) {
+      pos = token.from;
+      const word = token.text.toLowerCase();
+      if (/^\w+$/.test(word)) {
+        options = options
+          .filter(({ filterText }) => filterText.toLowerCase().startsWith(word))
+          .sort(
+            ({ apply: a, sortText: sortTexta }, { apply: b, sortText: sortTextb }) => {
+              switch (true) {
+                case sortTexta !== undefined && sortTextb !== undefined:
+                  return sortTexta!.localeCompare(sortTextb!);
+                case a.startsWith(token.text) && !b.startsWith(token.text):
+                  return -1;
+                case !a.startsWith(token.text) && b.startsWith(token.text):
+                  return 1;
+              }
+              return 0;
+            },
+          );
+      }
+    } else {
+      options = options.sort(({ sortText: sortTexta }, { sortText: sortTextb }) => {
+        switch (true) {
+          case sortTexta !== undefined && sortTextb !== undefined:
+            return sortTexta!.localeCompare(sortTextb!);
+        }
+        return 0;
+      });
+    }
+
+    return {
+      from: pos,
+      options,
+    };
+  };
+  return pythonLanguage.data.of({
+    autocomplete: completionSource,
+  });
+};

package/src/lsp/format.ts

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-parameter-properties */
+/* eslint-disable @typescript-eslint/parameter-properties */
+import type { TransactionSpec } from '@codemirror/state';
+import { StateEffect } from '@codemirror/state';
+import type {
+  Command,
+  EditorView,
+  KeyBinding,
+  PluginValue,
+  ViewUpdate,
+} from '@codemirror/view';
+import { ViewPlugin } from '@codemirror/view';
+
+import { insertCompletionText } from '../auto-complete/index.js';
+
+import type { CMLSPExtension, LSPExtensionOptions } from './protocol.js';
+import { offsetToPos, posToOffset } from './util.js';
+
+export const startFormatEffect = StateEffect.define<boolean>();
+
+export const formatCell: Command = (view: EditorView) => {
+  view.dispatch({ effects: startFormatEffect.of(true) });
+  return true;
+};
+
+export const formatKeymap: readonly KeyBinding[] = [{ key: 'Alt-f', run: formatCell }];
+
+class FormatPlugin implements PluginValue {
+  constructor(
+    readonly view: EditorView,
+    readonly options: LSPExtensionOptions,
+  ) {}
+
+  update(update: ViewUpdate) {
+    for (const tr of update.transactions) {
+      for (const effect of tr.effects) {
+        if (effect.is(startFormatEffect)) {
+          this.doFormat();
+        }
+      }
+    }
+  }
+
+  async doFormat() {
+    const lspProvider = await this.options.lspProvider?.();
+    if (!lspProvider) {
+      return;
+    }
+    // const { state } = this.view;
+    // const currentLine = state.doc.lineAt(state.selection.main.head).number;
+
+    const { editor, virtualDocument, lspConnection } = lspProvider;
+    const virtualStartPos = virtualDocument.transformEditorToVirtual(editor, {
+      line: 0,
+      ch: 0,
+      isEditor: true,
+    });
+
+    const end = offsetToPos(this.view.state.doc, this.view.state.doc.length);
+
+    const virtualEndPos = virtualDocument.transformEditorToVirtual(editor, {
+      line: end.line,
+      ch: end.character,
+      isEditor: true,
+    });
+
+    if (!virtualStartPos || !virtualEndPos) {
+      return;
+    }
+
+    lspConnection.clientRequests['textDocument/rangeFormatting']
+      .request({
+        textDocument: { uri: virtualDocument.uri },
+        range: {
+          start: { line: virtualStartPos.line, character: virtualStartPos.ch },
+          end: { line: virtualEndPos.line, character: virtualEndPos.ch },
+        },
+        options: {
+          tabSize: this.view.state.tabSize,
+          insertSpaces: true,
+        },
+      })
+      .then((result) => {
+        if (result && result?.length) {
+          const items = result;
+          const transaction: TransactionSpec[] = [];
+          items.forEach((item) => {
+            const defaultNewLine = {
+              line: end.line + 1,
+              ch: 0,
+            };
+            const editorStart =
+              virtualDocument.transformVirtualToEditor({
+                line: item.range.start.line,
+                ch: item.range.start.character,
+                isVirtual: true,
+              }) ?? defaultNewLine;
+            const editorEnd =
+              virtualDocument.transformVirtualToEditor({
+                line: item.range.end.line,
+                ch: item.range.end.character,
+                isVirtual: true,
+              }) ?? defaultNewLine;
+
+            if (!editorStart || !editorEnd) {
+              return;
+            }
+            const from = posToOffset(this.view.state.doc, {
+              line: editorStart.line,
+              character: editorStart.ch,
+            });
+            const to = posToOffset(this.view.state.doc, {
+              line: editorEnd.line,
+              character: editorEnd.ch,
+            });
+            // FIXME: 需要处理新增行的情况，目前在virtualdocument无法处理
+            // console.log('format', item.range, editorStart, editorEnd, from, to);
+            if (from !== undefined && to !== undefined) {
+              const trans = insertCompletionText(
+                this.view.state,
+                item.newText,
+                from,
+                to,
+              );
+              transaction.push(trans);
+            }
+          });
+          // console.log(transaction, 'format trans');
+
+          this.view.dispatch(...transaction);
+        }
+        return;
+      })
+      .catch(console.error);
+  }
+
+  destroy() {
+    //
+  }
+}
+
+export const lspFormat: CMLSPExtension = (options) => {
+  return [ViewPlugin.define((view) => new FormatPlugin(view, options))];
+};

package/src/lsp/index.ts

@@ -0,0 +1,6 @@
+export * from './lint.js';
+export * from './protocol.js';
+export * from './tooltip.js';
+export * from './util.js';
+export * from './completion.js';
+export * from './format.js';

package/src/lsp/lint.ts

@@ -0,0 +1,125 @@
+import type { Diagnostic } from '@codemirror/lint';
+import { setDiagnostics } from '@codemirror/lint';
+import type { PluginValue, EditorView } from '@codemirror/view';
+import { ViewPlugin } from '@codemirror/view';
+import { DiagnosticSeverity } from '@difizen/libro-lsp';
+
+import type { CMLSPExtension, LSPExtensionOptions } from './protocol.js';
+import { posToOffset } from './util.js';
+
+class LintPlugin implements PluginValue {
+  constructor(
+    readonly view: EditorView,
+    readonly options: LSPExtensionOptions,
+  ) {
+    this.processDiagnostic();
+  }
+
+  processDiagnostic() {
+    if (!this.options.lspProvider) {
+      return;
+    }
+    this.options
+      .lspProvider()
+      .then(({ lspConnection, virtualDocument, editor }) => {
+        if (!lspConnection) {
+          return;
+        }
+        lspConnection.serverNotifications['textDocument/publishDiagnostics'].event(
+          (e) => {
+            const diagnostics = e.diagnostics
+              .map(({ range, message, severity = DiagnosticSeverity.Information }) => {
+                const currentEditor = virtualDocument.getEditorAtVirtualLine({
+                  line: range.start.line,
+                  ch: range.start.character,
+                  isVirtual: true,
+                });
+
+                // the diagnostic range must be in current editor
+                if (editor !== currentEditor) {
+                  return;
+                }
+
+                const editorStart = virtualDocument.transformVirtualToEditor({
+                  line: range.start.line,
+                  ch: range.start.character,
+                  isVirtual: true,
+                });
+
+                let offset: number | undefined;
+                if (editorStart) {
+                  offset = posToOffset(this.view.state.doc, {
+                    line: editorStart.line,
+                    character: editorStart.ch,
+                  })!;
+                }
+
+                const editorEnd = virtualDocument.transformVirtualToEditor({
+                  line: range.end.line,
+                  ch: range.end.character,
+                  isVirtual: true,
+                });
+
+                let end: number | undefined;
+                if (editorEnd) {
+                  end = posToOffset(this.view.state.doc, {
+                    line: editorEnd.line,
+                    character: editorEnd.ch,
+                  });
+                }
+                return {
+                  from: offset,
+                  to: end,
+                  severity: (
+                    {
+                      [DiagnosticSeverity.Error]: 'error',
+                      [DiagnosticSeverity.Warning]: 'warning',
+                      [DiagnosticSeverity.Information]: 'info',
+                      [DiagnosticSeverity.Hint]: 'info',
+                    } as const
+                  )[severity],
+                  message,
+                } as Diagnostic;
+              })
+              .filter<Diagnostic>(isDiagnostic)
+              .sort((a, b) => {
+                switch (true) {
+                  case a.from < b.from:
+                    return -1;
+                  case a.from > b.from:
+                    return 1;
+                }
+                return 0;
+              });
+
+            this.view.dispatch(setDiagnostics(this.view.state, diagnostics));
+          },
+        );
+        return;
+      })
+      .catch(console.error);
+  }
+
+  update() {
+    //
+  }
+
+  destroy() {
+    //
+  }
+}
+
+export const lspLint: CMLSPExtension = (options) => {
+  return [ViewPlugin.define((view) => new LintPlugin(view, options))];
+};
+
+function isDiagnostic(item: any): item is Diagnostic {
+  return (
+    item !== undefined &&
+    item !== null &&
+    item.from !== null &&
+    item.to !== null &&
+    item.from !== undefined &&
+    item.to !== undefined
+  );
+}

package/src/lsp/protocol.ts

@@ -0,0 +1,8 @@
+import type { Extension } from '@codemirror/state';
+import type { LSPProvider } from '@difizen/libro-lsp';
+
+export interface LSPExtensionOptions {
+  lspProvider?: LSPProvider;
+}
+
+export type CMLSPExtension = (option: LSPExtensionOptions) => Extension;

package/src/lsp/tooltip.ts

@@ -0,0 +1,76 @@
+import { hoverTooltip } from '@codemirror/view';
+
+import type { CMLSPExtension } from './protocol.js';
+import { offsetToPos, posToOffset, renderMarkupContent } from './util.js';
+
+export const lspTooltip: CMLSPExtension = (options) => {
+  return hoverTooltip(async (view, pos) => {
+    if (!options.lspProvider) {
+      return null;
+    }
+
+    const {
+      lspConnection: connection,
+      virtualDocument: doc,
+      editor,
+    } = await options.lspProvider();
+
+    if (!connection || !connection.isReady || !connection.provides('hoverProvider')) {
+      return null;
+    }
+
+    const { line, character } = offsetToPos(view.state.doc, pos);
+
+    const virtualPos = doc.transformEditorToVirtual(editor, {
+      line,
+      ch: character,
+      isEditor: true,
+    });
+
+    if (!virtualPos) {
+      return null;
+    }
+
+    const result = await connection.clientRequests['textDocument/hover'].request({
+      position: { line: virtualPos.line, character: virtualPos.ch },
+      textDocument: {
+        uri: doc.documentInfo.uri,
+      },
+    });
+    if (!result) {
+      return null;
+    }
+    const { contents, range } = result;
+    let offset = posToOffset(view.state.doc, { line, character })!;
+    let end;
+    if (range) {
+      const editorStart = doc.transformVirtualToEditor({
+        line: range.start.line,
+        ch: range.start.character,
+        isVirtual: true,
+      });
+
+      if (editorStart) {
+        offset = posToOffset(view.state.doc, {
+          line: editorStart.line,
+          character: editorStart.ch,
+        })!;
+      }
+      const editorEnd = doc.transformVirtualToEditor({
+        line: range.end.line,
+        ch: range.end.character,
+        isVirtual: true,
+      });
+      if (editorEnd) {
+        end = posToOffset(view.state.doc, {
+          line: editorEnd.line,
+          character: editorEnd.ch,
+        });
+      }
+    }
+
+    const dom = renderMarkupContent(contents);
+
+    return { pos: offset, end, create: () => ({ dom }), above: false };
+  });
+};

package/src/lsp/util.ts

@@ -0,0 +1,69 @@
+import type { Text } from '@codemirror/state';
+import hljs from 'highlight.js';
+import MarkdownIt from 'markdown-it';
+import type * as lsp from 'vscode-languageserver-protocol';
+import 'highlight.js/styles/github.css';
+
+export function posToOffset(doc: Text, pos: { line: number; character: number }) {
+  if (pos.line >= doc.lines) {
+    return;
+  }
+  const offset = doc.line(pos.line + 1).from + pos.character;
+  if (offset > doc.length) {
+    return;
+  }
+  return offset;
+}
+
+export function offsetToPos(doc: Text, offset: number) {
+  const line = doc.lineAt(offset);
+  return {
+    line: line.number - 1,
+    character: offset - line.from,
+  };
+}
+
+export function formatContents(
+  contents: lsp.MarkupContent | lsp.MarkedString | lsp.MarkedString[],
+): string {
+  if (Array.isArray(contents)) {
+    return contents.map((c) => formatContents(c) + '\n\n').join('');
+  } else if (typeof contents === 'string') {
+    return contents;
+  } else {
+    return contents.value;
+  }
+}
+
+export const renderMarkdownContent = (val: string) => {
+  const render = new MarkdownIt({
+    html: true,
+    linkify: true,
+    breaks: true,
+    highlight: function (str, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          const hl = hljs.highlight(lang, str).value;
+          return hl;
+        } catch (__) {
+          //
+        }
+      }
+
+      return ''; // use external default escaping
+    },
+  });
+
+  return render.render(val);
+};
+
+export const renderMarkupContent = (
+  contents: lsp.MarkupContent | lsp.MarkedString | lsp.MarkedString[],
+) => {
+  const dom = document.createElement('div');
+  dom.classList.add('documentation');
+
+  const res = renderMarkdownContent(formatContents(contents));
+  dom.innerHTML = res;
+  return dom;
+};

package/src/mode.ts

@@ -1,6 +1,6 @@
 import { markdown } from '@codemirror/lang-markdown';
-import { LanguageDescription } from '@codemirror/language';
 import type { LanguageSupport } from '@codemirror/language';
+import { LanguageDescription } from '@codemirror/language';
 import { defaultMimeType } from '@difizen/libro-code-editor';
 import { PathExt } from '@difizen/libro-common';
 import { highlightTree } from '@lezer/highlight';

package/src/module.ts

@@ -0,0 +1,8 @@
+import { CodeEditorModule } from '@difizen/libro-code-editor';
+import { ManaModule } from '@difizen/mana-app';
+
+import { CodeMirrorEditorContribution } from './editor-contribution.js';
+
+export const CodeMirrorEditorModule = ManaModule.create()
+  .register(CodeMirrorEditorContribution)
+  .dependOn(CodeEditorModule);

package/src/theme.ts

@@ -14,7 +14,7 @@ export const jupyterEditorTheme = EditorView.theme({
    * these things differently.
    */
   '&': {
-    background: 'var(--jp-layout-color0)',
+    background: 'var(--mana-libro-input-background)',
     color: 'var(--mana-libro-text-default-color)',
   },
 
@@ -88,9 +88,9 @@ export const jupyterEditorTheme = EditorView.theme({
     lineHeight: '20px',
   },
 
-  // '.cm-editor': {
-  //   paddingTop: '24px',
-  // },
+  '.cm-editor': {
+    background: 'var(--mana-libro-input-background)',
+  },
 
   '.cm-searchMatch': {
     backgroundColor: 'var(--jp-search-unselected-match-background-color)',

package/src/tooltip.ts

@@ -43,7 +43,7 @@ const tooltipField = StateField.define<Tooltip | null>({
     return null;
   },
 
-  update(_tooltips, tr) {
+  update(tooltips, tr) {
     const { effects } = tr;
     for (const effect of effects) {
       if (effect.is(closeTooltipEffect)) {
@@ -119,9 +119,7 @@ class TooltipPlugin implements PluginValue {
               });
               return undefined;
             })
-            .catch(() => {
-              //
-            });
+            .catch(console.error);
         }
       }
     });

package/src/libro-icon.ts

@@ -1,4 +0,0 @@
-export const FoldIcon =
-  '<svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>1.通用/2.Icon图标/Line/Down</title><g id="0424" stroke="none" stroke-width="1" fill="none" fillRule="evenodd"><g id="Notebook-cell-色阶" transform="translate(-2015.000000, -434.000000)" fill="#A4AECB"><g id="编组-15" transform="translate(2004.000000, 407.000000)"><g id="1.通用/2.Icon图标/Line/Down" transform="translate(11.250000, 27.500000)"><path d="M7.34387369,0 L6.61145181,0 C6.56164712,0 6.51477212,0.0244140625 6.48547525,0.064453125 L3.71106119,3.88867188 L0.936647123,0.064453125 C0.907350248,0.0244140625 0.860475248,0 0.81067056,0 L0.0782486852,0 C0.0147721227,0 -0.0223372523,0.072265625 0.0147721227,0.124023438 L3.4581315,4.87109375 C3.5831315,5.04296875 3.83899087,5.04296875 3.96301431,4.87109375 L7.40637369,0.124023437 C7.44445962,0.072265625 7.40735025,0 7.34387369,0 Z" id="Down"></path></g></g></g></g></svg>';
-export const UnFoldIcon =
-  '<svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>1.通用/2.Icon图标/Line/Down收起</title><g id="0424" stroke="none" stroke-width="1" fill="none" fillRule="evenodd"><g id="Notebook-cell-色阶" transform="translate(-2094.000000, -433.000000)" fill="#A4AECB"><g id="编组-15备份" transform="translate(2082.000000, 407.000000)"><g id="1.通用/2.Icon图标/Line/Down" transform="translate(15.000000, 30.039124) rotate(270.000000) translate(-15.000000, -30.039124) translate(11.289124, 27.539124)"><path d="M7.34387369,1.77635684e-15 L6.61145181,1.77635684e-15 C6.56164712,1.77635684e-15 6.51477212,0.0244140625 6.48547525,0.064453125 L3.71106119,3.88867188 L0.936647123,0.064453125 C0.907350248,0.0244140625 0.860475248,1.77635684e-15 0.81067056,1.77635684e-15 L0.0782486852,1.77635684e-15 C0.0147721227,1.77635684e-15 -0.0223372523,0.072265625 0.0147721227,0.124023438 L3.4581315,4.87109375 C3.5831315,5.04296875 3.83899087,5.04296875 3.96301431,4.87109375 L7.40637369,0.124023438 C7.44445962,0.072265625 7.40735025,1.77635684e-15 7.34387369,1.77635684e-15 Z" id="Down"></path></g></g></g></g></svg>';