@difizen/libro-codemirror 0.0.2-alpha.0

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

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

package/src/libro-icon.ts

@@ -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" 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>';

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,269 @@
+import { markdown } from '@codemirror/lang-markdown';
+import type { LanguageSupport } from '@codemirror/language';
+import { LanguageDescription } from '@codemirror/language';
+import { defaultMimeType } from '@difizen/libro-code-editor';
+
+// This ensures the language spec for python will be loaded when
+// we instantiate a new editor instance, which is required since
+// python is the default language and we don't want to split
+// the editor constructor because of asynchronous loading.
+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/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);
+}