@difizen/libro-codemirror 0.0.0-snapshot-20241017072317

package/src/indentation-markers/utils.ts

@@ -0,0 +1,84 @@
+import type { EditorState, Line } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+
+/**
+ * Gets the visible lines in the editor. Lines will not be repeated.
+ *
+ * @param view - The editor view to get the visible lines from.
+ * @param state - The editor state. Defaults to the view's current one.
+ */
+export function getVisibleLines(view: EditorView, state = view.state) {
+  const lines = new Set<Line>();
+
+  for (const { from, to } of view.visibleRanges) {
+    let pos = from;
+
+    while (pos <= to) {
+      const line = state.doc.lineAt(pos);
+
+      if (!lines.has(line)) {
+        lines.add(line);
+      }
+
+      pos = line.to + 1;
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * Gets the line at the position of the primary cursor.
+ *
+ * @param state - The editor state from which to extract the line.
+ */
+export function getCurrentLine(state: EditorState) {
+  const currentPos = state.selection.main.head;
+  return state.doc.lineAt(currentPos);
+}
+
+/**
+ * Returns the number of columns that a string is indented, controlling for
+ * tabs. This is useful for determining the indentation level of a line.
+ *
+ * Note that this only returns the number of _visible_ columns, not the number
+ * of whitespace characters at the start of the string.
+ *
+ * @param str - The string to check.
+ * @param tabSize - The size of a tab character. Usually 2 or 4.
+ */
+export function numColumns(str: string, tabSize: number) {
+  // as far as I can tell, this is pretty much the fastest way to do this,
+  // at least involving iteration. `str.length - str.trimStart().length` is
+  // much faster, but it has some edge cases that are hard to deal with.
+
+  let col = 0;
+
+  // eslint-disable-next-line no-restricted-syntax
+  loop: for (let i = 0; i < str.length; i++) {
+    switch (str[i]) {
+      case ' ': {
+        col += 1;
+        continue loop;
+      }
+
+      case '\t': {
+        // if the current column is a multiple of the tab size, we can just
+        // add the tab size to the column. otherwise, we need to add the
+        // difference between the tab size and the current column.
+        col += tabSize - (col % tabSize);
+        continue loop;
+      }
+
+      case '\r': {
+        continue loop;
+      }
+
+      default: {
+        break loop;
+      }
+    }
+  }
+
+  return col;
+}

package/src/index.spec.ts

@@ -0,0 +1,12 @@
+import 'reflect-metadata';
+import assert from 'assert';
+
+// import { CodeMirrorEditor, codeMirrorEditorFactory } from './index.js';
+
+describe('libro-codemirror', () => {
+  it('#import', () => {
+    assert(true);
+    // assert(CodeMirrorEditor);
+    // assert(codeMirrorEditorFactory);
+  });
+});

package/src/index.ts

@@ -0,0 +1,14 @@
+import './style/base.css';
+import './style/theme.css';
+import './style/variables.css';
+
+export * from './config.js';
+export * from './editor.js';
+export * from './lsp/index.js';
+export * from './mode.js';
+export * from './module.js';
+export * from './factory.js';
+export * from './monitor.js';
+export * from './theme.js';
+
+export * from './auto-complete/index.js';

package/src/libro-icon.tsx

@@ -0,0 +1,4 @@
+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" fill-rule="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" fill-rule="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>';

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 };
+  });
+};