@difizen/libro-codemirror 0.0.0-snapshot-20241017072317

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/mimetype.ts

@@ -0,0 +1,49 @@
+import type { IEditorMimeTypeService } from '@difizen/libro-code-editor';
+import { defaultMimeType } from '@difizen/libro-code-editor';
+import type { ILanguageInfoMetadata } from '@difizen/libro-common';
+
+import { findBest, findByFileName } from './mode.js';
+
+const extname = (path: string) => {
+  return path.split('.').pop();
+};
+
+/**
+ * The mime type service for CodeMirror.
+ */
+export class CodeMirrorMimeTypeService implements IEditorMimeTypeService {
+  /**
+   * Returns a mime type for the given language info.
+   *
+   * #### Notes
+   * If a mime type cannot be found returns the default mime type `text/plain`, never `null`.
+   */
+  getMimeTypeByLanguage(info: ILanguageInfoMetadata): string {
+    const ext = info.file_extension || '';
+    const mode = findBest(
+      (info.codemirror_mode as any) || {
+        mimetype: info.mimetype,
+        name: info.name,
+        ext: [ext.split('.').slice(-1)[0]],
+      },
+    );
+    return mode ? (mode.mime as string) : defaultMimeType;
+  }
+
+  /**
+   * Returns a mime type for the given file path.
+   *
+   * #### Notes
+   * If a mime type cannot be found returns the default mime type `text/plain`, never `null`.
+   */
+  getMimeTypeByFilePath(path: string): string {
+    const ext = extname(path);
+    if (ext === '.ipy') {
+      return 'text/x-python';
+    } else if (ext === '.md') {
+      return 'text/x-ipythongfm';
+    }
+    const mode = findByFileName(path) || findBest('');
+    return mode ? (mode.mime as string) : defaultMimeType;
+  }
+}

package/src/mode.ts

@@ -0,0 +1,265 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { markdown } from '@codemirror/lang-markdown';
+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';
+
+import { python } from './python-lang.js';
+import { jupyterHighlightStyle } from './theme.js';
+
+/**
+ * The interface of a codemirror language spec.
+ */
+export interface ISpec {
+  name: string;
+  alias?: readonly string[];
+  mime: string | readonly string[];
+  load?: () => Promise<LanguageSupport>;
+  extensions?: readonly string[];
+  filename?: RegExp;
+  support?: LanguageSupport;
+}
+
+// Code mirror uses two similar structures, a plain object with optional fields,
+// and a class with the same fields but all mandatory. Maybe adopting the same
+// pattern would be less confusing (although far more verbose)
+function makeSpec(spec: ISpec): ISpec {
+  const res = LanguageDescription.of(spec) as unknown as ISpec;
+  res.mime = spec.mime;
+  return res;
+}
+
+const modeList: ISpec[] = [
+  makeSpec({
+    name: 'Python',
+    mime: 'text/x-python',
+    extensions: ['BUILD', 'bzl', 'py', 'pyw'],
+    filename: /^(BUCK|BUILD)$/,
+    load() {
+      return Promise.resolve(python());
+    },
+  }),
+  makeSpec({
+    name: 'Markdown',
+    mime: 'text/x-markdown',
+    extensions: ['md', 'markdown', 'mkd'],
+    async load() {
+      return Promise.resolve(markdown());
+    },
+  }),
+];
+
+/**
+ * Get the raw list of available modes specs.
+ *
+ * @alpha
+ * @returns The available modes
+ */
+export function getModeInfo(): ISpec[] {
+  return modeList;
+}
+
+/**
+ * Find a codemirror mode by MIME.
+ *
+ * @alpha
+ * @param mime Mime type to look for
+ * @returns The mode or null
+ */
+export function findByMIME(mime: string | readonly string[]): ISpec | null {
+  if (Array.isArray(mime)) {
+    for (let i = 0; i < mime.length; i++) {
+      const spec = findByMIME(mime[i]);
+      if (spec) {
+        return spec;
+      }
+    }
+    return null;
+  }
+  const _mime = (mime as string).toLowerCase();
+  for (let i = 0; i < modeList.length; i++) {
+    const info = modeList[i];
+    if (Array.isArray(info.mime)) {
+      for (let j = 0; j < info.mime.length; j++) {
+        if (info.mime[j] === _mime) {
+          return info;
+        }
+      }
+    } else if (info.mime === _mime) {
+      return info;
+    }
+  }
+  if (/\+xml$/.test(_mime)) {
+    return findByMIME('application/xml');
+  }
+  if (/\+json$/.test(_mime)) {
+    return findByMIME('application/json');
+  }
+  return null;
+}
+
+/**
+ * Find a codemirror mode by name.
+ *
+ * @alpha
+ * @param name The mode name
+ * @returns The mode or null
+ */
+export function findByName(name: string): ISpec | null {
+  const _name = name.toLowerCase();
+  for (let i = 0; i < modeList.length; i++) {
+    const info = modeList[i];
+    if (info.name.toLowerCase() === _name) {
+      return info;
+    }
+    if (info.alias) {
+      for (let j = 0; j < info.alias.length; j++) {
+        if (info.alias[j].toLowerCase() === _name) {
+          return info;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Find a codemirror mode by extension.
+ *
+ * @alpha
+ * @param ext The extension name
+ * @returns The mode or null
+ */
+export function findByExtension(ext: string | readonly string[]): ISpec | null {
+  if (Array.isArray(ext)) {
+    for (let i = 0; i < ext.length; i++) {
+      const spec = findByExtension(ext[i]);
+      if (spec) {
+        return spec;
+      }
+    }
+    return null;
+  }
+  const _ext = (ext as string).toLowerCase();
+  for (let i = 0; i < modeList.length; i++) {
+    const info = modeList[i];
+    for (let j = 0; j < info.extensions!.length; j++) {
+      if (info.extensions![j].toLowerCase() === _ext) {
+        return info;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Find a codemirror mode by filename.
+ *
+ * @param name File name
+ * @returns The mode or null
+ */
+export function findByFileName(name: string): ISpec | null {
+  const basename = PathExt.basename(name);
+  for (let i = 0; i < modeList.length; i++) {
+    const info = modeList[i];
+    if (info.filename && info.filename.test(basename)) {
+      return info;
+    }
+  }
+  const dot = basename.lastIndexOf('.');
+  const ext = dot > -1 && basename.substring(dot + 1, basename.length);
+  if (ext) {
+    return findByExtension(ext);
+  }
+  return null;
+}
+
+/**
+ * Find a codemirror mode by name or CodeMirror spec.
+ *
+ * @alpha
+ * @param mode The CodeMirror mode
+ * @param fallback Whether to fallback to default mimetype spec or not
+ * @returns The mode or null
+ */
+export function findBest(mode: string | ISpec, fallback = true): ISpec | null {
+  const modename = typeof mode === 'string' ? mode : mode.name;
+  const mimetype = typeof mode !== 'string' ? mode.mime : modename;
+  const ext = typeof mode !== 'string' ? (mode.extensions ?? []) : [];
+
+  return (
+    (modename ? findByName(modename) : null) ??
+    (mimetype ? findByMIME(mimetype) : null) ??
+    findByExtension(ext) ??
+    (fallback ? findByMIME(defaultMimeType) : null)
+  );
+}
+
+/**
+ * Ensure a codemirror mode is available by name or Codemirror spec.
+ *
+ * @param mode - The mode to ensure.  If it is a string, uses [findBest]
+ *   to get the appropriate spec.
+ *
+ * @returns A promise that resolves when the mode is available.
+ */
+export async function ensure(mode: string | ISpec): Promise<ISpec | null> {
+  const spec = findBest(mode);
+  if (spec) {
+    spec.support = await spec.load!();
+    return spec;
+  }
+  return null;
+}
+
+/**
+ * Register a new mode for CodeMirror
+ *
+ * @alpha
+ * @param mode Mode to register
+ */
+export function registerModeInfo(mode: ISpec): void {
+  const info = findBest(mode, false);
+  if (info) {
+    throw new Error(`${mode.mime} already registered`);
+  }
+  modeList.push(makeSpec(mode));
+}
+
+/**
+ * Parse and style a string.
+ *
+ * @alpha
+ * @param code Code to highlight
+ * @param mode Code mode
+ * @param el HTML element into which the highlighted code will be inserted
+ */
+export function run(code: string, mode: ISpec, el: HTMLElement): void {
+  const language = mode.support?.language;
+  if (!language) {
+    return;
+  }
+
+  const tree = language.parser.parse(code);
+  // position state required because unstyled tokens are not emitted
+  // in highlightTree
+  let pos = 0;
+  highlightTree(tree, jupyterHighlightStyle, (from, to, classes) => {
+    if (from > pos) {
+      // No style applied to the token between pos and from
+      el.appendChild(document.createTextNode(code.slice(pos, from)));
+    }
+    const sp = el.appendChild(document.createElement('span'));
+    sp.className = classes;
+    sp.appendChild(document.createTextNode(code.slice(from, to)));
+    pos = to;
+  });
+
+  if (pos < tree.length - 1) {
+    // No style applied on the trailing text
+    el.appendChild(document.createTextNode(code.slice(pos, tree.length)));
+  }
+}
+// }

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/monitor.ts

@@ -0,0 +1,105 @@
+import { EditorView, hasHoverTooltips } from '@codemirror/view';
+import { Emitter } from '@difizen/mana-app';
+
+import {
+  closeCompletionEffect,
+  setSelectedEffect,
+  startCompletionEffect,
+} from './auto-complete/state.js';
+
+interface DocStatus {
+  source: string[];
+  cursor: number;
+  changes?: string;
+}
+
+interface CompletionChange {
+  start?: DocStatus;
+  accept?: DocStatus;
+  close?: DocStatus;
+  selectIndex?: number;
+}
+
+export class CompletionMonitor {
+  protected static instance: CompletionMonitor;
+
+  static getInstance() {
+    if (!CompletionMonitor.instance) {
+      CompletionMonitor.instance = new CompletionMonitor();
+    }
+    return CompletionMonitor.instance;
+  }
+
+  protected completionChangeEmitter: Emitter<CompletionChange> = new Emitter();
+
+  get compeltionChange() {
+    return this.completionChangeEmitter.event;
+  }
+
+  protected tooltipChangeEmitter: Emitter<boolean> = new Emitter();
+
+  get onTooltipChange() {
+    return this.tooltipChangeEmitter.event;
+  }
+
+  protected currentChange: CompletionChange | undefined;
+
+  start(doc: DocStatus) {
+    this.currentChange = { start: doc, selectIndex: 0 };
+  }
+
+  accept(doc: DocStatus) {
+    this.currentChange = { ...this.currentChange, ...{ accept: doc } };
+    this.emitChange(this.currentChange);
+  }
+
+  close(doc: DocStatus) {
+    this.currentChange = { ...this.currentChange, ...{ close: doc, selectIndex: -1 } };
+    this.emitChange(this.currentChange);
+  }
+
+  updateIndex(index: number) {
+    this.currentChange = { ...this.currentChange, ...{ selectIndex: index } };
+  }
+
+  emitChange(change: CompletionChange) {
+    this.completionChangeEmitter.fire(change);
+  }
+}
+
+export interface MonitorPluginOptions {
+  onTooltipChange?: (visible: boolean) => void;
+}
+
+export const monitorPlugin = (options: MonitorPluginOptions) =>
+  EditorView.updateListener.of((update) => {
+    for (const trans of update.transactions) {
+      const { effects } = trans;
+
+      options?.onTooltipChange?.(hasHoverTooltips(update.state));
+
+      if (trans.isUserEvent('input.complete')) {
+        CompletionMonitor.getInstance().accept({
+          changes: JSON.stringify(trans.changes.toJSON()),
+          cursor: update.state.selection.main.head,
+          source: update.state.doc.toJSON(),
+        });
+      }
+      for (const effect of effects) {
+        if (effect.is(startCompletionEffect)) {
+          CompletionMonitor.getInstance().start({
+            cursor: update.state.selection.main.head,
+            source: update.state.doc.toJSON(),
+          });
+        } else if (effect.is(closeCompletionEffect)) {
+          CompletionMonitor.getInstance().close({
+            cursor: update.state.selection.main.head,
+            source: update.state.doc.toJSON(),
+          });
+        } else if (effect.is(setSelectedEffect)) {
+          CompletionMonitor.getInstance().updateIndex(effect.value);
+        }
+      }
+    }
+    return null;
+  });

package/src/python-lang.ts

@@ -0,0 +1,7 @@
+import { pythonLanguage } from '@codemirror/lang-python';
+import { LanguageSupport } from '@codemirror/language';
+
+/// Python language support. 去掉了默认内置的代码提示
+export function python() {
+  return new LanguageSupport(pythonLanguage, []);
+}

package/src/style/base.css

@@ -0,0 +1,129 @@
+/* stylelint-disable function-url-quotes */
+.cm-editor {
+  line-height: var(--jp-code-line-height);
+  font-size: var(--jp-code-font-size);
+  font-family: var(--jp-code-font-family);
+  border: 0;
+  border-radius: 4px;
+  height: auto;
+  background: var(--mana-libro-input-background);
+  padding: 12px 0 18px;
+
+  /* Changed to auto to autogrow */
+}
+
+.cm-editor pre {
+  padding: 0 var(--jp-code-padding);
+}
+
+.cm-selectionMatch {
+  background-color: #e3ebff !important;
+}
+
+.jp-CodeMirrorEditor[data-type='inline'] .cm-dialog {
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-content-font-color1);
+}
+
+.jp-CodeMirrorEditor {
+  cursor: text;
+}
+
+/* When zoomed out 67% and 33% on a screen of 1440 width x 900 height */
+@media screen and (min-width: 2138px) and (max-width: 4319px) {
+  .jp-CodeMirrorEditor[data-type='inline'] .cm-cursor {
+    border-left: var(--jp-code-cursor-width1) solid var(--jp-editor-cursor-color);
+  }
+}
+
+/* When zoomed out less than 33% */
+@media screen and (min-width: 4320px) {
+  .jp-CodeMirrorEditor[data-type='inline'] .cm-cursor {
+    border-left: var(--jp-code-cursor-width2) solid var(--jp-editor-cursor-color);
+  }
+}
+
+.cm-editor.jp-mod-readOnly .cm-cursor {
+  display: none;
+}
+
+.jp-CollaboratorCursor {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: none;
+  border-bottom: 3px solid;
+  background-clip: content-box;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+
+.cm-searching,
+.cm-searching span {
+  background-color: var(--jp-search-unselected-match-background-color);
+  color: var(--jp-search-unselected-match-color);
+}
+
+.cm-searching span::selection {
+  background-color: var(--jp-search-selected-match-background-color) !important;
+  color: var(--jp-search-selected-match-color) !important;
+}
+
+.cm-trailingspace {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAsElEQVQIHQGlAFr/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7+r3zKmT0/+pk9P/7+r3zAAAAAAAAAAABAAAAAAAAAAA6OPzM+/q9wAAAAAA6OPzMwAAAAAAAAAAAgAAAAAAAAAAGR8NiRQaCgAZIA0AGR8NiQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQyoYJ/SY80UAAAAASUVORK5CYII=);
+  background-position: center left;
+  background-repeat: repeat-x;
+}
+
+.jp-CollaboratorCursor-hover {
+  position: absolute;
+  z-index: 1;
+  transform: translateX(-50%);
+  color: white;
+  border-radius: 3px;
+  padding: 1px 4px;
+  text-align: center;
+  font-size: var(--jp-ui-font-size1);
+  white-space: nowrap;
+}
+
+.jp-CodeMirror-ruler {
+  border-left: 1px dashed var(--jp-border-color2);
+}
+
+/* Styles for shared cursors (remote cursor locations and selected ranges) */
+.jp-CodeMirrorEditor .remote-caret {
+  position: relative;
+  border-left: 2px solid black;
+  margin-left: -1px;
+  margin-right: -1px;
+  box-sizing: border-box;
+}
+
+.jp-CodeMirrorEditor .remote-caret > div {
+  white-space: nowrap;
+  position: absolute;
+  top: -1.15em;
+  padding-bottom: 0.05em;
+  left: -2px;
+  font-size: 0.95em;
+  background-color: rgb(250, 129, 0);
+  font-family: var(--jp-ui-font-family);
+  font-weight: bold;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding-left: 2px;
+  padding-right: 2px;
+  z-index: 3;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.jp-CodeMirrorEditor .remote-caret.hide-name > div {
+  transition-delay: 0.7s;
+  opacity: 0;
+}
+
+.jp-CodeMirrorEditor .remote-caret:hover > div {
+  opacity: 1;
+  transition-delay: 0s;
+}

package/src/style/theme.css

@@ -0,0 +1,12 @@
+@import './variables.css';
+
+/* Set the default typography for monospace elements */
+tt,
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  line-height: var(--jp-code-line-height);
+}