@kerebron/extension-codemirror 0.4.28 → 0.4.29

package/src/lsp/completion.ts

@@ -0,0 +1,231 @@
+import type * as lsp from 'vscode-languageserver-protocol';
+import { EditorState, Extension, Facet } from '@codemirror/state';
+import {
+  autocompletion,
+  Completion,
+  CompletionContext,
+  CompletionSource,
+  snippet,
+} from '@codemirror/autocomplete';
+
+import { LSPPlugin } from './plugin.js';
+import { CompletionTriggerKind } from 'vscode-languageserver-protocol';
+
+export function serverCompletion(config: {
+  override?: boolean;
+  validFor?: RegExp;
+} = {}): Extension {
+  let result: Extension[];
+  if (config.override) {
+    result = [autocompletion({ override: [serverCompletionSource] })];
+  } else {
+    const data = [{ autocomplete: serverCompletionSource }];
+    result = [autocompletion(), EditorState.languageData.of(() => data)];
+  }
+  if (config.validFor) {
+    result.push(completionConfig.of({ validFor: config.validFor }));
+  }
+  return result;
+}
+
+const completionConfig = Facet.define<
+  { validFor: RegExp },
+  { validFor: RegExp | null }
+>({
+  combine: (results) => results.length ? results[0] : { validFor: null },
+});
+
+async function getCompletions(
+  plugin: LSPPlugin,
+  pos: number,
+  context: lsp.CompletionContext,
+  abort?: CompletionContext,
+) {
+  const client = plugin.extensionLsp.getClient(plugin.lang);
+  if (!client) {
+    return [];
+  }
+
+  if (client.hasCapability('completionProvider') === false) {
+    null;
+  }
+  client.sync();
+  const params: lsp.CompletionParams = {
+    position: plugin.toPosition(pos),
+    textDocument: { uri: plugin.uri },
+    context,
+  };
+  if (abort) {
+    abort.addEventListener('abort', () => client.cancelRequest(params));
+  }
+  const result = await client.request<
+    lsp.CompletionParams,
+    lsp.CompletionItem[] | lsp.CompletionList | null
+  >(
+    'textDocument/completion',
+    params,
+  );
+  return result;
+}
+
+// Look for non-alphanumeric prefixes in the completions, and return a
+// regexp that matches them, to use in validFor
+function prefixRegexp(items: readonly lsp.CompletionItem[]) {
+  let step = Math.ceil(items.length / 50), prefixes: string[] = [];
+  for (let i = 0; i < items.length; i += step) {
+    let item = items[i],
+      text = item.textEdit?.newText || item.textEditText || item.insertText ||
+        item.label;
+    if (!/^\w/.test(text)) {
+      let prefix = /^[^\w]*/.exec(text)![0];
+      if (prefixes.indexOf(prefix) < 0) prefixes.push(prefix);
+    }
+  }
+  if (!prefixes.length) return /^\w*$/;
+  return new RegExp(
+    '^(?:' + prefixes.map(
+      (RegExp as any).escape || ((s) => s.replace(/[^\w\s]/g, '\\$&')),
+    ).join('|') + ')?\\w*$',
+  );
+}
+
+/// A completion source that requests completions from a language
+/// server.
+export const serverCompletionSource: CompletionSource = async (context) => {
+  const plugin = context.view && LSPPlugin.get(context.view);
+  if (!plugin) return null;
+
+  let triggerChar = '';
+  if (!context.explicit) {
+    triggerChar = context.view.state.sliceDoc(context.pos - 1, context.pos);
+
+    const client = plugin.extensionLsp.getClient(plugin.lang);
+    if (!client) {
+      return null;
+    }
+
+    const triggers = client.serverCapabilities?.completionProvider
+      ?.triggerCharacters;
+    if (
+      !/[a-zA-Z_]/.test(triggerChar) &&
+      !(triggers && triggers.indexOf(triggerChar) > -1)
+    ) return null;
+  }
+
+  try {
+    let result = await getCompletions(plugin, context.pos, {
+      triggerCharacter: triggerChar,
+      triggerKind: context.explicit
+        ? CompletionTriggerKind.Invoked
+        : CompletionTriggerKind.TriggerCharacter,
+    }, context);
+
+    if (!result) return null;
+    if (Array.isArray(result)) {
+      result = { items: result } as lsp.CompletionList;
+    }
+
+    const { from, to } = completionResultRange(context, result);
+    const defaultCommitChars = result.itemDefaults?.commitCharacters;
+    const config = context.state.facet(completionConfig);
+
+    const options = result.items.map<Completion>((item) => {
+      let text = item.textEdit?.newText || item.textEditText ||
+        item.insertText || item.label;
+      let option: Completion = {
+        label: text,
+        type: item.kind && kindToType[item.kind],
+      };
+      if (
+        item.commitCharacters && item.commitCharacters != defaultCommitChars
+      ) {
+        option.commitCharacters = item.commitCharacters;
+      }
+      if (item.detail) option.detail = item.detail;
+      if (item.insertTextFormat == 2 /* Snippet */) {
+        option.apply = (view, c, from, to) => snippet(text)(view, c, from, to);
+        option.label = item.label;
+      }
+      if (item.documentation) {
+        option.info = () => renderDocInfo(plugin, item.documentation!);
+      }
+      return option;
+    });
+
+    return {
+      from,
+      to,
+      options,
+      commitCharacters: defaultCommitChars,
+      validFor: config.validFor ?? prefixRegexp(result.items),
+      map: (result, changes) => ({
+        ...result,
+        from: changes.mapPos(result.from),
+      }),
+    };
+  } catch (err: any) {
+    if (
+      'code' in err &&
+      (err as lsp.ResponseError).code == -32800 /* RequestCancelled */
+    ) {
+      return null;
+    }
+    throw err;
+  }
+};
+
+function completionResultRange(
+  cx: CompletionContext,
+  result: lsp.CompletionList,
+): { from: number; to: number } {
+  if (!result.items.length) {
+    return { from: cx.pos, to: cx.pos };
+  }
+
+  const defaultRange = result.itemDefaults?.editRange;
+  const item0 = result.items[0];
+
+  const range = defaultRange
+    ? ('insert' in defaultRange ? defaultRange.insert : defaultRange)
+    : item0.textEdit
+    ? ('range' in item0.textEdit ? item0.textEdit.range : item0.textEdit.insert)
+    : null;
+
+  if (!range) return cx.state.wordAt(cx.pos) || { from: cx.pos, to: cx.pos };
+
+  const line = cx.state.doc.lineAt(cx.pos);
+
+  return {
+    from: line.from + range.start.character,
+    to: line.from + range.end.character,
+  };
+}
+
+function renderDocInfo(plugin: LSPPlugin, doc: string | lsp.MarkupContent) {
+  let elt = document.createElement('div');
+  elt.className = 'cm-lsp-documentation cm-lsp-completion-documentation';
+  elt.innerHTML = plugin.docToHTML(doc);
+  return elt;
+}
+
+const kindToType: { [kind: number]: string } = {
+  1: 'text', // Text
+  2: 'method', // Method
+  3: 'function', // Function
+  4: 'class', // Constructor
+  5: 'property', // Field
+  6: 'variable', // Variable
+  7: 'class', // Class
+  8: 'interface', // Interface
+  9: 'namespace', // Module
+  10: 'property', // Property
+  11: 'keyword', // Unit
+  12: 'constant', // Value
+  13: 'constant', // Enum
+  14: 'keyword', // Keyword
+  16: 'constant', // Color
+  20: 'constant', // EnumMember
+  21: 'constant', // Constant
+  22: 'class', // Struct
+  25: 'type', // TypeParameter
+};

package/src/lsp/hover.ts

@@ -0,0 +1,100 @@
+import type * as lsp from 'vscode-languageserver-protocol';
+import { EditorView, hoverTooltip, Tooltip } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import {
+  highlightingFor,
+  language as languageFacet,
+} from '@codemirror/language';
+import { fromPosition } from './pos.js';
+import { LSPPlugin } from './plugin.js';
+// import {highlightCode} from "@lezer/highlight"
+// import {escHTML} from "./text.ts"
+
+/// Create an extension that queries the language server for hover
+/// tooltips when the user hovers over the code with their pointer,
+/// and displays a tooltip when the server provides one.
+export function hoverTooltips(config: { hoverTime?: number } = {}): Extension {
+  return hoverTooltip(lspTooltipSource, {
+    hideOn: (tr) => tr.docChanged,
+    hoverTime: config.hoverTime,
+  });
+}
+
+function hoverRequest(plugin: LSPPlugin, pos: number) {
+  const client = plugin.getClient();
+  if (client?.hasCapability('hoverProvider') === false) {
+    return Promise.resolve(null);
+  }
+  client?.sync();
+  return client?.request<lsp.HoverParams, lsp.Hover | null>(
+    'textDocument/hover',
+    {
+      position: plugin.toPosition(pos),
+      textDocument: { uri: plugin.uri },
+    },
+  );
+}
+
+function lspTooltipSource(
+  view: EditorView,
+  pos: number,
+): Promise<Tooltip | null> {
+  const plugin = LSPPlugin.get(view);
+  if (!plugin) return Promise.resolve(null);
+  return hoverRequest(plugin, pos).then((result) => {
+    if (!result) return null;
+    return {
+      pos: result.range
+        ? fromPosition(view.state.doc, result.range.start)
+        : pos,
+      end: result.range ? fromPosition(view.state.doc, result.range.end) : pos,
+      create() {
+        let elt = document.createElement('div');
+        elt.className = 'cm-lsp-hover-tooltip cm-lsp-documentation';
+        elt.innerHTML = renderTooltipContent(plugin, result.contents);
+        return { dom: elt };
+      },
+      above: true,
+    };
+  });
+}
+
+function renderTooltipContent(
+  plugin: LSPPlugin,
+  value: string | lsp.MarkupContent | lsp.MarkedString | lsp.MarkedString[],
+) {
+  if (Array.isArray(value)) {
+    return value.map((m) => renderCode(plugin, m)).join('<br>');
+  }
+  if (
+    typeof value == 'string' || typeof value == 'object' && 'language' in value
+  ) return renderCode(plugin, value);
+  return plugin.docToHTML(value);
+}
+
+function renderCode(plugin: LSPPlugin, code: lsp.MarkedString) {
+  if (typeof code == 'string') return plugin.docToHTML(code, 'markdown');
+  let { language, value } = code;
+  // return plugin.docToHTML(value, language); // TODO highlight language
+  return plugin.docToHTML(value, 'plaintext');
+}
+
+/*
+function renderCode(plugin: LSPPlugin, code: lsp.MarkedString) {
+  if (typeof code == "string") return plugin.docToHTML(code, "markdown")
+  let {language, value} = code
+  let lang = plugin.client.config.highlightLanguage && plugin.client.config.highlightLanguage(language || "")
+  if (!lang) {
+    let viewLang = plugin.view.state.facet(languageFacet)
+    if (viewLang && (!language || viewLang.name == language)) lang = viewLang
+  }
+  if (!lang) return escHTML(value)
+  let result = ""
+  highlightCode(value, lang.parser.parse(value), {style: tags => highlightingFor(plugin.view.state, tags)}, (text, cls) => {
+    result += cls ? `<span class="${cls}">${escHTML(text)}</span>` : escHTML(text)
+  }, () => {
+    result += "<br>"
+  })
+  return result
+}
+*/

package/src/lsp/index.ts

@@ -0,0 +1,55 @@
+import { Extension } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+
+export { LSPExtension, type LSPExtensionConfig } from './LSPExtension.js';
+export { LSPPlugin } from './plugin.js';
+export { serverCompletion, serverCompletionSource } from './completion.js';
+export { hoverTooltips } from './hover.js';
+// export { formatDocument, formatKeymap } from './formatting.ts';
+// export { renameKeymap, renameSymbol } from './rename.ts';
+// export {
+//   nextSignature,
+//   prevSignature,
+//   showSignatureHelp,
+//   signatureHelp,
+//   signatureKeymap,
+// } from './signature.ts';
+// export {
+//   jumpToDeclaration,
+//   jumpToDefinition,
+//   jumpToDefinitionKeymap,
+//   jumpToImplementation,
+//   jumpToTypeDefinition,
+// } from './definition.ts';
+// export {
+//   closeReferencePanel,
+//   findReferences,
+//   findReferencesKeymap,
+// } from './references.ts';
+// export { serverDiagnostics } from './diagnostics.ts';
+
+import { serverCompletion } from './completion.js';
+import { hoverTooltips } from './hover.js';
+// import { formatKeymap } from './formatting.ts';
+// import { renameKeymap } from './rename.ts';
+// import { signatureHelp } from './signature.ts';
+// import { jumpToDefinitionKeymap } from './definition.ts';
+// import { findReferencesKeymap } from './references.ts';
+// import { serverDiagnostics } from './diagnostics.ts';
+
+export function languageServerExtensions(): readonly (
+  Extension
+)[] {
+  return [
+    serverCompletion(),
+    hoverTooltips(),
+    keymap.of([
+      // ...formatKeymap,
+      // ...renameKeymap,
+      // ...jumpToDefinitionKeymap,
+      // ...findReferencesKeymap,
+    ]),
+    // signatureHelp(),
+    // serverDiagnostics(),
+  ];
+}

package/src/lsp/plugin.ts

@@ -0,0 +1,128 @@
+import type * as lsp from 'vscode-languageserver-protocol';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+import { Text } from '@codemirror/state';
+
+import { type CoreEditor, RawTextResult } from '@kerebron/editor';
+import type {
+  ExtensionLsp,
+  LSPClient,
+  LspSource,
+} from '@kerebron/extension-lsp';
+
+import { fromPosition, toPosition } from './pos.js';
+import { escHTML } from './text.js';
+import { LSPExtension } from './index.js';
+import { PositionMapper } from '@kerebron/extension-markdown/PositionMapper';
+import { toRawTextResult } from '@kerebron/editor/utilities';
+
+export class LSPPlugin {
+  readonly extensionLsp: ExtensionLsp;
+  readonly uri: string;
+  readonly editor: CoreEditor;
+  readonly extension: LSPExtension;
+  lang = 'plaintext';
+  client?: LSPClient;
+  source: LspSource;
+
+  /// @internal
+  constructor(
+    /// The editor view that this plugin belongs to.
+    readonly view: EditorView,
+    { extension, extensionLsp, uri, editor }: {
+      extension: LSPExtension;
+      extensionLsp: ExtensionLsp;
+      uri: string;
+      editor: CoreEditor;
+    },
+  ) {
+    this.extension = extension;
+    this.extensionLsp = extensionLsp;
+    this.uri = uri;
+    this.editor = editor;
+
+    this.source = {
+      ui: this.editor.ui,
+      getMappedContent: async () => {
+        const editor = this.editor;
+        const result: RawTextResult = toRawTextResult(
+          this.view.state.doc.toString().toString(),
+          0,
+        );
+        const mapper = new PositionMapper(editor, result.rawTextMap);
+        return {
+          ...result,
+          mapper,
+        };
+      },
+    };
+  }
+
+  getClient() {
+    return this.client;
+  }
+
+  setLang(lang: string) {
+    this.lang = lang;
+
+    const client = this.extensionLsp.getClient(lang);
+    this.client = client;
+    if (client) {
+      client.disconnect(this.uri);
+      client.connect(this.uri, this.source);
+      client.workspace.openFile(
+        this.uri,
+        lang,
+        this.source,
+      );
+    }
+  }
+
+  update() {
+    if (this.client) {
+      this.client.workspace.changedFile(
+        this.uri,
+      );
+    }
+  }
+
+  // /// Render a doc string from the server to HTML.
+  // docToHTML(value: string | lsp.MarkupContent, defaultKind: lsp.MarkupKind = "plaintext") {
+  //   let html = withContext(this.view, this.client.config.highlightLanguage, () => docToHTML(value, defaultKind))
+  //   return this.client.config.sanitizeHTML ? this.client.config.sanitizeHTML(html) : html
+  // }
+
+  docToHTML(
+    value: string | lsp.MarkupContent,
+    defaultKind: lsp.MarkupKind = 'plaintext',
+  ) {
+    if ('string' === typeof value) {
+      return escHTML(value);
+    }
+    return `docToHTML ${value.kind} ${JSON.stringify(value.value, null, 2)}`;
+  }
+
+  /// Convert a CodeMirror document offset into an LSP `{line,
+  /// character}` object. Defaults to using the view's current
+  /// document, but can be given another one.
+  toPosition(pos: number, doc: Text = this.view.state.doc): lsp.Position {
+    return toPosition(doc, pos);
+  }
+
+  /// Convert an LSP `{line, character}` object to a CodeMirror
+  /// document offset.
+  fromPosition(pos: lsp.Position, doc: Text = this.view.state.doc): number {
+    return fromPosition(doc, pos);
+  }
+
+  /// Display an error in this plugin's editor.
+  reportError(message: string, err: any) {
+    this.editor.ui.showError(err);
+  }
+
+  /// Get the LSP plugin associated with an editor, if any.
+  static get(view: EditorView) {
+    return view.plugin(lspPlugin);
+  }
+}
+
+export const lspPlugin = ViewPlugin.fromClass(LSPPlugin);

package/src/lsp/pos.ts

@@ -0,0 +1,12 @@
+import type * as lsp from 'vscode-languageserver-protocol';
+import { Text } from '@codemirror/state';
+
+export function toPosition(doc: Text, pos: number): lsp.Position {
+  let line = doc.lineAt(pos);
+  return { line: line.number - 1, character: pos - line.from };
+}
+
+export function fromPosition(doc: Text, pos: lsp.Position): number {
+  let line = doc.line(pos.line + 1);
+  return line.from + pos.character;
+}

package/src/lsp/text.ts

@@ -0,0 +1,63 @@
+import type * as lsp from 'vscode-languageserver-protocol';
+import { EditorView } from '@codemirror/view';
+import {
+  highlightingFor,
+  Language,
+  language as languageFacet,
+} from '@codemirror/language';
+// import {Marked} from "marked"
+// import {highlightCode, Highlighter} from "@lezer/highlight"
+
+// let context: {view: EditorView, language: ((name: string) => Language | null) | undefined} | null = null
+
+// export function withContext<T>(view: EditorView, language: ((name: string) => Language | null) | undefined, f: () => T): T {
+//   let prev = context
+//   try {
+//     context = {view, language}
+//     return f()
+//   } finally {
+//     context = prev
+//   }
+// }
+
+export function escHTML(text: string) {
+  return text.replace(
+    /[\n<&]/g,
+    (ch) => ch == '\n' ? '<br>' : ch == '<' ? '&lt;' : '&amp;',
+  );
+}
+
+// const marked = new Marked({
+//   walkTokens(token) {
+//     if (!context || token.type != "code") return
+
+//     let lang = context.language && context.language(token.lang)
+//     if (!lang) {
+//       let viewLang = context.view.state.facet(languageFacet)
+//       if (viewLang && viewLang.name == token.lang) lang = viewLang
+//     }
+//     if (!lang) return
+//     let highlighter: Highlighter = {style: tags => highlightingFor(context!.view.state, tags)}
+//     let result = ""
+//     highlightCode(token.text, lang.parser.parse(token.text), highlighter, (text, cls) => {
+//       result += cls ? `<span class="${cls}">${escHTML(text)}</span>` : escHTML(text)
+//     }, () => {
+//       result += "<br>"
+//     })
+//     token.escaped = true
+//     token.text = result
+//   }
+// })
+
+// export function docToHTML(value: string | lsp.MarkupContent, defaultKind: lsp.MarkupKind) {
+//   let kind = defaultKind, text = value
+//   if (typeof text != "string") {
+//     kind = text.kind
+//     text = text.value
+//   }
+//   if (kind == "plaintext") {
+//     return escHTML(text)
+//   } else {
+//     return marked.parse(text, {async: false, })
+//   }
+// }

package/src/lsp/theme.ts

@@ -0,0 +1,81 @@
+import { EditorView } from '@codemirror/view';
+
+export const lspTheme = EditorView.baseTheme({
+  '.cm-lsp-documentation': {
+    padding: '0 7px',
+    '& p, & pre': {
+      margin: '2px 0',
+    },
+  },
+
+  '.cm-lsp-signature-tooltip': {
+    padding: '2px 6px',
+    borderRadius: '2.5px',
+    position: 'relative',
+    maxWidth: '30em',
+    maxHeight: '10em',
+    overflowY: 'scroll',
+    '& .cm-lsp-documentation': {
+      padding: '0',
+      fontSize: '80%',
+    },
+    '& .cm-lsp-signature-num': {
+      fontFamily: 'monospace',
+      position: 'absolute',
+      left: '2px',
+      top: '4px',
+      fontSize: '70%',
+      lineHeight: '1.3',
+    },
+    '& .cm-lsp-signature': {
+      fontFamily: 'monospace',
+      textIndent: '1em hanging',
+    },
+    '& .cm-lsp-active-parameter': {
+      fontWeight: 'bold',
+    },
+  },
+  '.cm-lsp-signature-multiple': {
+    paddingLeft: '1.5em',
+  },
+
+  '.cm-panel.cm-lsp-rename-panel': {
+    padding: '2px 6px 4px',
+    position: 'relative',
+    '& label': { fontSize: '80%' },
+    '& [name=close]': {
+      position: 'absolute',
+      top: '0',
+      bottom: '0',
+      right: '4px',
+      backgroundColor: 'inherit',
+      border: 'none',
+      font: 'inherit',
+      padding: '0',
+    },
+  },
+
+  '.cm-lsp-message button[type=submit]': {
+    display: 'block',
+  },
+
+  '.cm-lsp-reference-panel': {
+    fontFamily: 'monospace',
+    whiteSpace: 'pre',
+    padding: '3px 6px',
+    maxHeight: '120px',
+    overflow: 'auto',
+    '& .cm-lsp-reference-file': {
+      fontWeight: 'bold',
+    },
+    '& .cm-lsp-reference': {
+      cursor: 'pointer',
+      '&[aria-selected]': {
+        backgroundColor: '#0077ee44',
+      },
+    },
+    '& .cm-lsp-reference-line': {
+      opacity: '0.7',
+    },
+  },
+});