@difizen/libro-codemirror 0.0.2-alpha.0

package/src/factory.ts

@@ -0,0 +1,10 @@
+import type { CodeEditorFactory, IEditorOptions } from '@difizen/libro-code-editor';
+
+import { codeMirrorDefaultConfig, CodeMirrorEditor } from './editor.js';
+
+export const codeMirrorEditorFactory: CodeEditorFactory = (options: IEditorOptions) => {
+  return new CodeMirrorEditor({
+    ...options,
+    config: { ...codeMirrorDefaultConfig, ...options.config },
+  });
+};

package/src/hyperlink.ts

@@ -0,0 +1,95 @@
+import { syntaxTree } from '@codemirror/language';
+import type { Extension, Range } from '@codemirror/state';
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
+import { ViewPlugin, EditorView, Decoration, WidgetType } from '@codemirror/view';
+
+const pathStr = `<svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z"></path></svg>`;
+
+export interface HyperLinkState {
+  from: number;
+  to: number;
+  url: string;
+}
+
+class HyperLink extends WidgetType {
+  private readonly state: HyperLinkState;
+  constructor(state: HyperLinkState) {
+    super();
+    this.state = state;
+  }
+  override eq(other: HyperLink) {
+    return (
+      this.state.url === other.state.url &&
+      this.state.to === other.state.to &&
+      this.state.from === other.state.from
+    );
+  }
+  toDOM() {
+    const wrapper = document.createElement('a');
+    wrapper.href = this.state.url;
+    wrapper.target = '__blank';
+    wrapper.innerHTML = pathStr;
+    wrapper.className = 'cm-hyper-link-icon';
+    return wrapper;
+  }
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+function hyperLinkDecorations(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const range of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from: range.from,
+      to: range.to,
+      enter: ({ type, from, to }) => {
+        const callExp: string = view.state.doc.sliceString(from, to);
+        if (type.name === 'URL') {
+          const widget = Decoration.widget({
+            widget: new HyperLink({
+              from,
+              to,
+              url: callExp,
+            }),
+            side: 1,
+          });
+          widgets.push(widget.range(to));
+        }
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export function hyperLinkExtension() {
+  return ViewPlugin.fromClass(
+    class HyperLinkView {
+      decorations: DecorationSet;
+      constructor(view: EditorView) {
+        this.decorations = hyperLinkDecorations(view);
+      }
+      update(update: ViewUpdate) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = hyperLinkDecorations(update.view);
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}
+
+export const hyperLinkStyle = EditorView.baseTheme({
+  '.cm-hyper-link-icon': {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    marginLeft: '0.2ch',
+  },
+  '.cm-hyper-link-icon svg': {
+    display: 'block',
+  },
+});
+
+export const hyperLink: Extension = [hyperLinkExtension(), hyperLinkStyle];

package/src/indent.ts

@@ -0,0 +1,69 @@
+import { indentLess, indentMore, insertTab } from '@codemirror/commands';
+import type { Command, EditorView } from '@codemirror/view';
+
+import { completionState, startCompletionEffect } from './auto-complete/state.js';
+import { startTooltip } from './tooltip.js';
+
+/**
+ * Indent or insert a tab as appropriate.
+ */
+export const indentMoreOrInsertTab: Command = (view: EditorView): boolean => {
+  const from = view.state.selection.main.from;
+  const to = view.state.selection.main.to;
+  if (from !== to) {
+    return indentMore(view);
+  }
+  const line = view.state.doc.lineAt(from);
+  const before = view.state.doc.slice(line.from, from).toString();
+  if (/^\s*$/.test(before)) {
+    return indentMore(view);
+  } else {
+    return insertTab(view);
+  }
+};
+
+/**
+ * RegExp to test for leading whitespace
+ */
+const leadingWhitespaceRe = /^\s+$/;
+export const indentOrCompletion: Command = (view: EditorView) => {
+  const from = view.state.selection.main.from;
+
+  const line = view.state.doc.lineAt(from);
+
+  let shouldIndent = false;
+  if (line.from === from) {
+    shouldIndent = true;
+  } else {
+    shouldIndent =
+      view.state.doc
+        .slice(from - 1, from)
+        .toString()
+        .match(leadingWhitespaceRe) !== null;
+  }
+
+  if (shouldIndent) {
+    return indentMoreOrInsertTab(view);
+  } else {
+    const cState = view.state.field(completionState, false);
+    if (!cState) {
+      return false;
+    }
+    view.dispatch({ effects: startCompletionEffect.of(true) });
+    return true;
+  }
+};
+
+export const indentOrTooltip: Command = (view: EditorView) => {
+  const from = view.state.selection.main.from;
+  const line = view.state.doc.lineAt(from);
+  const shouldIndentLess =
+    view.state.doc.slice(line.from, from).toString().match(leadingWhitespaceRe) !==
+    null;
+
+  if (shouldIndentLess) {
+    return indentLess(view);
+  } else {
+    return startTooltip(view);
+  }
+};

package/src/indentation-markers/config.ts

@@ -0,0 +1,31 @@
+import { combineConfig, Facet } from '@codemirror/state';
+
+export interface IndentationMarkerConfiguration {
+  /**
+   * Determines whether active block marker is styled differently.
+   */
+  highlightActiveBlock?: boolean;
+
+  /**
+   * Determines whether markers in the first column are omitted.
+   */
+  hideFirstIndent?: boolean;
+
+  /**
+   * Determines the type of indentation marker.
+   */
+  markerType?: 'fullScope' | 'codeOnly';
+}
+
+export const indentationMarkerConfig = Facet.define<
+  IndentationMarkerConfiguration,
+  Required<IndentationMarkerConfiguration>
+>({
+  combine(configs) {
+    return combineConfig(configs, {
+      highlightActiveBlock: true,
+      hideFirstIndent: false,
+      markerType: 'codeOnly',
+    });
+  },
+});

package/src/indentation-markers/index.ts

@@ -0,0 +1,192 @@
+import { getIndentUnit } from '@codemirror/language';
+import type { EditorState } from '@codemirror/state';
+import { RangeSetBuilder } from '@codemirror/state';
+import type { DecorationSet, ViewUpdate, PluginValue } from '@codemirror/view';
+import { Decoration, ViewPlugin, EditorView } from '@codemirror/view';
+
+import { indentationMarkerConfig } from './config.js';
+import type { IndentationMarkerConfiguration } from './config.js';
+import type { IndentEntry } from './map.js';
+import { IndentationMap } from './map.js';
+import { getCurrentLine, getVisibleLines } from './utils.js';
+
+// CSS classes:
+// - .cm-indent-markers
+
+// CSS variables:
+// - --indent-marker-bg-part
+// - --indent-marker-active-bg-part
+
+/** Color of inactive indent markers. Based on RUI's var(--background-higher) */
+const MARKER_COLOR_LIGHT = '#5f6064';
+const MARKER_COLOR_DARK = '#5f6064';
+
+/** Color of active indent markers. Based on RUI's var(--background-highest) */
+const MARKER_COLOR_ACTIVE_LIGHT = '#A4AECB';
+const MARKER_COLOR_ACTIVE_DARK = '#565C6D';
+
+/** Thickness of indent markers. Probably should be integer pixel values. */
+const MARKER_THICKNESS = '1px';
+
+const indentTheme = EditorView.baseTheme({
+  '&light': {
+    '--indent-marker-bg-color': MARKER_COLOR_LIGHT,
+    '--indent-marker-active-bg-color': MARKER_COLOR_ACTIVE_LIGHT,
+  },
+
+  '&dark': {
+    '--indent-marker-bg-color': MARKER_COLOR_DARK,
+    '--indent-marker-active-bg-color': MARKER_COLOR_ACTIVE_DARK,
+  },
+
+  '.cm-line': {
+    position: 'relative',
+  },
+
+  // this pseudo-element is used to draw the indent markers,
+  // while still allowing the line to have its own background.
+  '.cm-indent-markers::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'var(--indent-markers)',
+    pointerEvents: 'none',
+    zIndex: '-1',
+  },
+});
+
+function createGradient(
+  markerCssProperty: string,
+  indentWidth: number,
+  startOffset: number,
+  columns: number,
+) {
+  const gradient = `repeating-linear-gradient(to right, var(${markerCssProperty}) 0 ${MARKER_THICKNESS}, transparent ${MARKER_THICKNESS} ${indentWidth}ch)`;
+  // Subtract one pixel from the background width to get rid of artifacts of pixel rounding
+  return `${gradient} ${startOffset * indentWidth}ch/calc(${
+    indentWidth * columns
+  }ch - 1px) no-repeat`;
+}
+
+// libro 没有使用codemirror的dark theme机制
+// const indentMarkerBgColor = '--indent-marker-bg-color';
+// const indentMarkerActiveBgColor = '--indent-marker-active-bg-color';
+const indentMarkerBgColor = '--mana-libro-editor-indent-marker-bg-color';
+const indentMarkerActiveBgColor = '--mana-libro-editor-indent-marker-active-bg-color';
+
+function makeBackgroundCSS(
+  entry: IndentEntry,
+  indentWidth: number,
+  hideFirstIndent: boolean,
+) {
+  const { level, active } = entry;
+  if (hideFirstIndent && level === 0) {
+    return [];
+  }
+  const startAt = hideFirstIndent ? 1 : 0;
+  const backgrounds = [];
+
+  if (active !== undefined) {
+    const markersBeforeActive = active - startAt - 1;
+    if (markersBeforeActive > 0) {
+      backgrounds.push(
+        createGradient(indentMarkerBgColor, indentWidth, startAt, markersBeforeActive),
+      );
+    }
+    backgrounds.push(
+      createGradient(indentMarkerActiveBgColor, indentWidth, active - 1, 1),
+    );
+    if (active !== level) {
+      backgrounds.push(
+        createGradient(indentMarkerBgColor, indentWidth, active, level - active),
+      );
+    }
+  } else {
+    backgrounds.push(
+      createGradient(indentMarkerBgColor, indentWidth, startAt, level - startAt),
+    );
+  }
+
+  return backgrounds.join(',');
+}
+
+class IndentMarkersClass implements PluginValue {
+  view: EditorView;
+  decorations!: DecorationSet;
+
+  private unitWidth: number;
+  private currentLineNumber: number;
+
+  constructor(view: EditorView) {
+    this.view = view;
+    this.unitWidth = getIndentUnit(view.state);
+    this.currentLineNumber = getCurrentLine(view.state).number;
+    this.generate(view.state);
+  }
+
+  update(update: ViewUpdate) {
+    const unitWidth = getIndentUnit(update.state);
+    const unitWidthChanged = unitWidth !== this.unitWidth;
+    if (unitWidthChanged) {
+      this.unitWidth = unitWidth;
+    }
+    const lineNumber = getCurrentLine(update.state).number;
+    const lineNumberChanged = lineNumber !== this.currentLineNumber;
+    this.currentLineNumber = lineNumber;
+    const activeBlockUpdateRequired =
+      update.state.facet(indentationMarkerConfig).highlightActiveBlock &&
+      lineNumberChanged;
+    if (
+      update.docChanged ||
+      update.viewportChanged ||
+      unitWidthChanged ||
+      activeBlockUpdateRequired
+    ) {
+      this.generate(update.state);
+    }
+  }
+
+  private generate(state: EditorState) {
+    const builder = new RangeSetBuilder<Decoration>();
+
+    const lines = getVisibleLines(this.view, state);
+    const { hideFirstIndent, markerType } = state.facet(indentationMarkerConfig);
+    const map = new IndentationMap(lines, state, this.unitWidth, markerType);
+
+    for (const line of lines) {
+      const entry = map.get(line.number);
+
+      if (!entry?.level) {
+        continue;
+      }
+
+      const backgrounds = makeBackgroundCSS(entry, this.unitWidth, hideFirstIndent);
+
+      builder.add(
+        line.from,
+        line.from,
+        Decoration.line({
+          class: 'cm-indent-markers',
+          attributes: {
+            style: `--indent-markers: ${backgrounds}`,
+          },
+        }),
+      );
+    }
+
+    this.decorations = builder.finish();
+  }
+}
+
+export function indentationMarkers(config: IndentationMarkerConfiguration = {}) {
+  return [
+    indentationMarkerConfig.of(config),
+    indentTheme,
+    ViewPlugin.fromClass(IndentMarkersClass, {
+      decorations: (v) => v.decorations,
+    }),
+  ];
+}

package/src/indentation-markers/map.ts

@@ -0,0 +1,273 @@
+import type { EditorState, Line } from '@codemirror/state';
+
+import { indentationMarkerConfig } from './config.js';
+import { getCurrentLine, numColumns } from './utils.js';
+
+export interface IndentEntry {
+  line: Line;
+  col: number;
+  level: number;
+  empty: boolean;
+  active?: number;
+}
+
+/**
+ * Indentation map for a set of lines.
+ *
+ * This map will contain the indentation for lines that are not a part of the given set,
+ * but this is because calculating the indentation for those lines was necessary to
+ * calculate the indentation for the lines provided to the constructor.
+ *
+ * @see {@link IndentEntry}
+ */
+export class IndentationMap {
+  /** The {@link EditorState} indentation is derived from. */
+  private state: EditorState;
+
+  /** The set of lines that are used as an entrypoint. */
+  private lines: Set<Line>;
+
+  /** The internal mapping of line numbers to {@link IndentEntry} objects. */
+  private map: Map<number, IndentEntry>;
+
+  /** The width of the editor's indent unit. */
+  private unitWidth: number;
+
+  /** The type of indentation to use (terminate at end of scope vs last non-empty line in scope) */
+  private markerType: 'fullScope' | 'codeOnly';
+
+  /**
+   * @param lines - The set of lines to get the indentation map for.
+   * @param state - The {@link EditorState} to derive the indentation map from.
+   * @param unitWidth - The width of the editor's indent unit.
+   * @param markerType - The type of indentation to use (terminate at end of scope vs last line of code in scope)
+   */
+  constructor(
+    lines: Set<Line>,
+    state: EditorState,
+    unitWidth: number,
+    markerType: 'fullScope' | 'codeOnly',
+  ) {
+    this.lines = lines;
+    this.state = state;
+    this.map = new Map();
+    this.unitWidth = unitWidth;
+    this.markerType = markerType;
+
+    for (const line of this.lines) {
+      this.add(line);
+    }
+
+    if (this.state.facet(indentationMarkerConfig).highlightActiveBlock) {
+      this.findAndSetActiveLines();
+    }
+  }
+
+  /**
+   * Checks if the indentation map has an entry for the given line.
+   *
+   * @param line - The {@link Line} or line number to check for.
+   */
+  has(line: Line | number) {
+    return this.map.has(typeof line === 'number' ? line : line.number);
+  }
+
+  /**
+   * Returns the {@link IndentEntry} for the given line.
+   *
+   * Note that this function will throw an error if the line does not exist in the map.
+   *
+   * @param line - The {@link Line} or line number to get the entry for.
+   */
+  get(line: Line | number) {
+    const entry = this.map.get(typeof line === 'number' ? line : line.number);
+
+    if (!entry) {
+      throw new Error('Line not found in indentation map');
+    }
+
+    return entry;
+  }
+
+  /**
+   * Sets the {@link IndentEntry} for the given line.
+   *
+   * @param line - The {@link Line} to set the entry for.
+   * @param col - The visual beginning whitespace width of the line.
+   * @param level - The indentation level of the line.
+   */
+  private set(line: Line, col: number, level: number) {
+    const empty = !line.text.trim().length;
+    const entry: IndentEntry = { line, col, level, empty };
+    this.map.set(entry.line.number, entry);
+
+    return entry;
+  }
+
+  /**
+   * Adds a line to the indentation map.
+   *
+   * @param line - The {@link Line} to add to the map.
+   */
+  private add(line: Line) {
+    if (this.has(line)) {
+      return this.get(line);
+    }
+
+    // empty lines continue their indentation from surrounding lines
+    if (!line.length || !line.text.trim().length) {
+      // the very first line, if empty, is just ignored and set as a 0 indent level
+      if (line.number === 1) {
+        return this.set(line, 0, 0);
+      }
+
+      // if we're at the end, we'll just use the previous line's indentation
+      if (line.number === this.state.doc.lines) {
+        const prev = this.closestNonEmpty(line, -1);
+
+        return this.set(line, 0, prev.level);
+      }
+
+      const prev = this.closestNonEmpty(line, -1);
+      const next = this.closestNonEmpty(line, 1);
+
+      // if the next line ends the block and the marker type is not set to codeOnly,
+      // we'll just use the previous line's indentation
+      if (prev.level >= next.level && this.markerType !== 'codeOnly') {
+        return this.set(line, 0, prev.level);
+      }
+
+      // having an indent marker that starts from an empty line looks weird
+      if (prev.empty && prev.level === 0 && next.level !== 0) {
+        return this.set(line, 0, 0);
+      }
+
+      // if the next indentation level is greater than the previous,
+      // we'll only increment up to the next indentation level. this prevents
+      // a weirdly "backwards propagating" indentation.
+      if (next.level > prev.level) {
+        return this.set(line, 0, prev.level + 1);
+      }
+
+      // else, we default to the next line's indentation
+      return this.set(line, 0, next.level);
+    }
+
+    const col = numColumns(line.text, this.state.tabSize);
+    const level = Math.floor(col / this.unitWidth);
+
+    return this.set(line, col, level);
+  }
+
+  /**
+   * Finds the closest non-empty line, starting from the given line.
+   *
+   * @param from - The {@link Line} to start from.
+   * @param dir - The direction to search in. Either `1` or `-1`.
+   */
+  private closestNonEmpty(from: Line, dir: -1 | 1) {
+    let lineNo = from.number + dir;
+
+    while (dir === -1 ? lineNo >= 1 : lineNo <= this.state.doc.lines) {
+      if (this.has(lineNo)) {
+        const entry = this.get(lineNo);
+        if (!entry.empty) {
+          return entry;
+        }
+      }
+
+      // we can check if the line is empty, if it's not, we can
+      // just create a new entry for it and return it.
+      // this prevents us from hitting the beginning/end of the document unnecessarily.
+
+      const line = this.state.doc.line(lineNo);
+
+      if (line.text.trim().length) {
+        const col = numColumns(line.text, this.state.tabSize);
+        const level = Math.floor(col / this.unitWidth);
+
+        return this.set(line, col, level);
+      }
+
+      lineNo += dir;
+    }
+
+    // if we're here, we didn't find anything.
+    // that means we're at the beginning/end of the document,
+    // and the first/last line is empty.
+
+    const line = this.state.doc.line(dir === -1 ? 1 : this.state.doc.lines);
+
+    return this.set(line, 0, 0);
+  }
+
+  /**
+   * Finds the state's active block (via the current selection) and sets all
+   * the active indent level for the lines in the block.
+   */
+  private findAndSetActiveLines() {
+    const currentLine = getCurrentLine(this.state);
+
+    if (!this.has(currentLine)) {
+      return;
+    }
+
+    let current = this.get(currentLine);
+
+    // check if the current line is starting a new block, if yes, we want to
+    // start from inside the block.
+    if (this.has(current.line.number + 1)) {
+      const next = this.get(current.line.number + 1);
+      if (next.level > current.level) {
+        current = next;
+      }
+    }
+
+    // same, but if the current line is ending a block
+    if (this.has(current.line.number - 1)) {
+      const prev = this.get(current.line.number - 1);
+      if (prev.level > current.level) {
+        current = prev;
+      }
+    }
+
+    if (current.level === 0) {
+      return;
+    }
+
+    current.active = current.level;
+
+    let start: number;
+    let end: number;
+
+    // iterate to the start of the block
+    for (start = current.line.number; start > 1; start--) {
+      if (!this.has(start - 1)) {
+        continue;
+      }
+
+      const prev = this.get(start - 1);
+
+      if (prev.level < current.level) {
+        break;
+      }
+
+      prev.active = current.level;
+    }
+
+    // iterate to the end of the block
+    for (end = current.line.number; end < this.state.doc.lines; end++) {
+      if (!this.has(end + 1)) {
+        continue;
+      }
+
+      const next = this.get(end + 1);
+
+      if (next.level < current.level) {
+        break;
+      }
+
+      next.active = current.level;
+    }
+  }
+}