@difizen/libro-codemirror 0.0.2-alpha.0

package/src/auto-complete/completion.ts

@@ -0,0 +1,345 @@
+/* eslint-disable @typescript-eslint/no-parameter-properties */
+/* eslint-disable @typescript-eslint/parameter-properties */
+import { syntaxTree } from '@codemirror/language';
+import type { EditorState, TransactionSpec } from '@codemirror/state';
+import { Annotation, EditorSelection } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import type { SyntaxNode } from '@lezer/common';
+
+import type { ActiveResult } from './state.js';
+
+/// Objects type used to represent individual completions.
+export interface Completion {
+  /// The label to show in the completion picker. This is what input
+  /// is matched agains to determine whether a completion matches (and
+  /// how well it matches).
+  label: string;
+  /// An optional short piece of information to show (with a different
+  /// style) after the label.
+  detail?: string;
+  /// Additional info to show when the completion is selected. Can be
+  /// a plain string or a function that'll render the DOM structure to
+  /// show when invoked.
+  info?: string | ((completion: Completion) => Node | null | Promise<Node | null>);
+  /// How to apply the completion. The default is to replace it with
+  /// its [label](#autocomplete.Completion.label). When this holds a
+  /// string, the completion range is replaced by that string. When it
+  /// is a function, that function is called to perform the
+  /// completion. If it fires a transaction, it is responsible for
+  /// adding the [`pickedCompletion`](#autocomplete.pickedCompletion)
+  /// annotation to it.
+  apply?:
+    | string
+    | ((view: EditorView, completion: Completion, from: number, to: number) => void);
+  /// The type of the completion. This is used to pick an icon to show
+  /// for the completion. Icons are styled with a CSS class created by
+  /// appending the type name to `"cm-completionIcon-"`. You can
+  /// define or restyle icons by defining these selectors. The base
+  /// library defines simple icons for `class`, `constant`, `enum`,
+  /// `function`, `interface`, `keyword`, `method`, `namespace`,
+  /// `property`, `text`, `type`, and `variable`.
+  ///
+  /// Multiple types can be provided by separating them with spaces.
+  type?: string;
+  /// When given, should be a number from -99 to 99 that adjusts how
+  /// this completion is ranked compared to other completions that
+  /// match the input as well as this one. A negative number moves it
+  /// down the list, a positive number moves it up.
+  boost?: number;
+}
+
+/// An instance of this is passed to completion source functions.
+export class CompletionContext {
+  /// @internal
+  abortListeners: (() => void)[] | null = [];
+
+  /// Create a new completion context. (Mostly useful for testing
+  /// completion sources—in the editor, the extension will create
+  /// these for you.)
+  constructor(
+    /// The editor state that the completion happens in.
+    readonly state: EditorState,
+    /// The position at which the completion is happening.
+    readonly pos: number,
+    /// Indicates whether completion was activated explicitly, or
+    /// implicitly by typing. The usual way to respond to this is to
+    /// only return completions when either there is part of a
+    /// completable entity before the cursor, or `explicit` is true.
+    readonly explicit: boolean,
+  ) {}
+
+  /// Get the extent, content, and (if there is a token) type of the
+  /// token before `this.pos`.
+  tokenBefore(types: readonly string[]) {
+    let token: SyntaxNode | null = syntaxTree(this.state).resolveInner(this.pos, -1);
+    while (token && types.indexOf(token.name) < 0) {
+      token = token.parent;
+    }
+    return token
+      ? {
+          from: token.from,
+          to: this.pos,
+          text: this.state.sliceDoc(token.from, this.pos),
+          type: token.type,
+        }
+      : null;
+  }
+
+  /// Get the match of the given expression directly before the
+  /// cursor.
+  matchBefore(expr: RegExp) {
+    const line = this.state.doc.lineAt(this.pos);
+    const start = Math.max(line.from, this.pos - 250);
+    const str = line.text.slice(start - line.from, this.pos - line.from);
+    const found = str.search(ensureAnchor(expr, false));
+    return found < 0
+      ? null
+      : { from: start + found, to: this.pos, text: str.slice(found) };
+  }
+
+  /// Yields true when the query has been aborted. Can be useful in
+  /// asynchronous queries to avoid doing work that will be ignored.
+  get aborted() {
+    return this.abortListeners === null;
+  }
+
+  /// Allows you to register abort handlers, which will be called when
+  /// the query is
+  /// [aborted](#autocomplete.CompletionContext.aborted).
+  addEventListener(type: 'abort', listener: () => void) {
+    if (type === 'abort' && this.abortListeners) {
+      this.abortListeners.push(listener);
+    }
+  }
+}
+
+function toSet(chars: Record<string, true>) {
+  let flat = Object.keys(chars).join('');
+  const words = /\w/.test(flat);
+  if (words) {
+    flat = flat.replace(/\w/g, '');
+  }
+  return `[${words ? '\\w' : ''}${flat.replace(/[^\w\s]/g, '\\$&')}]`;
+}
+
+function prefixMatch(options: readonly Completion[]) {
+  const first = Object.create(null),
+    rest = Object.create(null);
+  for (const { label } of options) {
+    first[label[0]] = true;
+    for (let i = 1; i < label.length; i++) {
+      rest[label[i]] = true;
+    }
+  }
+  const source = toSet(first) + toSet(rest) + '*$';
+  return [new RegExp('^' + source), new RegExp(source)];
+}
+
+/// Given a a fixed array of options, return an autocompleter that
+/// completes them.
+export function completeFromList(
+  list: readonly (string | Completion)[],
+): CompletionSource {
+  const options = list.map((o) => (typeof o === 'string' ? { label: o } : o));
+  const [validFor, match] = options.every((o) => /^\w+$/.test(o.label))
+    ? [/\w*$/, /\w+$/]
+    : prefixMatch(options);
+  return (context: CompletionContext) => {
+    const token = context.matchBefore(match);
+    return token || context.explicit
+      ? { from: token ? token.from : context.pos, options, validFor }
+      : null;
+  };
+}
+
+/// Wrap the given completion source so that it will only fire when the
+/// cursor is in a syntax node with one of the given names.
+export function ifIn(
+  nodes: readonly string[],
+  source: CompletionSource,
+): CompletionSource {
+  return (context: CompletionContext) => {
+    for (
+      let pos: SyntaxNode | null = syntaxTree(context.state).resolveInner(
+        context.pos,
+        -1,
+      );
+      pos;
+      pos = pos.parent
+    ) {
+      if (nodes.indexOf(pos.name) > -1) {
+        return source(context);
+      }
+    }
+    return null;
+  };
+}
+
+/// Wrap the given completion source so that it will not fire when the
+/// cursor is in a syntax node with one of the given names.
+export function ifNotIn(
+  nodes: readonly string[],
+  source: CompletionSource,
+): CompletionSource {
+  return (context: CompletionContext) => {
+    for (
+      let pos: SyntaxNode | null = syntaxTree(context.state).resolveInner(
+        context.pos,
+        -1,
+      );
+      pos;
+      pos = pos.parent
+    ) {
+      if (nodes.indexOf(pos.name) > -1) {
+        return null;
+      }
+    }
+    return source(context);
+  };
+}
+
+/// The function signature for a completion source. Such a function
+/// may return its [result](#autocomplete.CompletionResult)
+/// synchronously or as a promise. Returning null indicates no
+/// completions are available.
+export type CompletionSource = (
+  context: CompletionContext,
+) => CompletionResult | null | Promise<CompletionResult | null>;
+
+/// Interface for objects returned by completion sources.
+export interface CompletionResult {
+  /// The start of the range that is being completed.
+  from: number;
+  /// The end of the range that is being completed. Defaults to the
+  /// main cursor position.
+  to?: number;
+  /// The completions returned. These don't have to be compared with
+  /// the input by the source—the autocompletion system will do its
+  /// own matching (against the text between `from` and `to`) and
+  /// sorting.
+  options: readonly Completion[];
+  /// When given, further typing or deletion that causes the part of
+  /// the document between ([mapped](#state.ChangeDesc.mapPos)) `from`
+  /// and `to` to match this regular expression or predicate function
+  /// will not query the completion source again, but continue with
+  /// this list of options. This can help a lot with responsiveness,
+  /// since it allows the completion list to be updated synchronously.
+  validFor?:
+    | RegExp
+    | ((text: string, from: number, to: number, state: EditorState) => boolean);
+  /// By default, the library filters and scores completions. Set
+  /// `filter` to `false` to disable this, and cause your completions
+  /// to all be included, in the order they were given. When there are
+  /// other sources, unfiltered completions appear at the top of the
+  /// list of completions. `validFor` must not be given when `filter`
+  /// is `false`, because it only works when filtering.
+  filter?: boolean;
+  /// When [`filter`](#autocomplete.CompletionResult.filter) is set to
+  /// `false`, this may be provided to compute the ranges on the label
+  /// that match the input. Should return an array of numbers where
+  /// each pair of adjacent numbers provide the start and end of a
+  /// range.
+  getMatch?: (completion: Completion) => readonly number[];
+  /// Synchronously update the completion result after typing or
+  /// deletion. If given, this should not do any expensive work, since
+  /// it will be called during editor state updates. The function
+  /// should make sure (similar to
+  /// [`validFor`](#autocomplete.CompletionResult.validFor)) that the
+  /// completion still applies in the new state.
+  update?: (
+    current: CompletionResult,
+    from: number,
+    to: number,
+    context: CompletionContext,
+  ) => CompletionResult | null;
+}
+
+export class Option {
+  constructor(
+    readonly completion: Completion,
+    readonly source: ActiveResult,
+    readonly match: readonly number[],
+  ) {}
+}
+
+export function cur(state: EditorState) {
+  return state.selection.main.head;
+}
+
+// Make sure the given regexp has a $ at its end and, if `start` is
+// true, a ^ at its start.
+export function ensureAnchor(expr: RegExp, start: boolean) {
+  const { source } = expr;
+  const addStart = start && source[0] !== '^',
+    addEnd = source[source.length - 1] !== '$';
+  if (!addStart && !addEnd) {
+    return expr;
+  }
+  return new RegExp(
+    `${addStart ? '^' : ''}(?:${source})${addEnd ? '$' : ''}`,
+    expr.flags ?? (expr.ignoreCase ? 'i' : ''),
+  );
+}
+
+/// This annotation is added to transactions that are produced by
+/// picking a completion.
+export const pickedCompletion = Annotation.define<Completion>();
+
+/// Helper function that returns a transaction spec which inserts a
+/// completion's text in the main selection range, and any other
+/// selection range that has the same text in front of it.
+export function insertCompletionText(
+  state: EditorState,
+  text: string,
+  from: number,
+  to: number,
+): TransactionSpec {
+  return {
+    ...state.changeByRange((range) => {
+      if (range === state.selection.main) {
+        return {
+          changes: { from: from, to: to, insert: text },
+          range: EditorSelection.cursor(from + text.length),
+        };
+      }
+      const len = to - from;
+      if (
+        !range.empty ||
+        (len &&
+          state.sliceDoc(range.from - len, range.from) !== state.sliceDoc(from, to))
+      ) {
+        return { range };
+      }
+      return {
+        changes: { from: range.from - len, to: range.from, insert: text },
+        range: EditorSelection.cursor(range.from - len + text.length),
+      };
+    }),
+    userEvent: 'input.complete',
+  };
+}
+
+export function applyCompletion(view: EditorView, option: Option) {
+  const apply = option.completion.apply || option.completion.label;
+  const result = option.source;
+  if (typeof apply === 'string') {
+    view.dispatch(insertCompletionText(view.state, apply, result.from, result.to));
+  } else {
+    apply(view, option.completion, result.from, result.to);
+  }
+}
+
+const SourceCache = new WeakMap<readonly (string | Completion)[], CompletionSource>();
+
+export function asSource(
+  source: CompletionSource | readonly (string | Completion)[],
+): CompletionSource {
+  if (!Array.isArray(source)) {
+    return source as CompletionSource;
+  }
+  let known = SourceCache.get(source);
+  if (!known) {
+    SourceCache.set(source, (known = completeFromList(source)));
+  }
+  return known;
+}

package/src/auto-complete/config.ts

@@ -0,0 +1,101 @@
+import type { EditorState } from '@codemirror/state';
+import { Facet, combineConfig } from '@codemirror/state';
+
+import type { Completion, CompletionSource } from './completion.js';
+
+export interface CompletionConfig {
+  /// When enabled (defaults to true), autocompletion will start
+  /// whenever the user types something that can be completed.
+  activateOnTyping?: boolean;
+  /// By default, when completion opens, the first option is selected
+  /// and can be confirmed with
+  /// [`acceptCompletion`](#autocomplete.acceptCompletion). When this
+  /// is set to false, the completion widget starts with no completion
+  /// selected, and the user has to explicitly move to a completion
+  /// before you can confirm one.
+  selectOnOpen?: boolean;
+  /// Override the completion sources used. By default, they will be
+  /// taken from the `"autocomplete"` [language
+  /// data](#state.EditorState.languageDataAt) (which should hold
+  /// [completion sources](#autocomplete.CompletionSource) or arrays
+  /// of [completions](#autocomplete.Completion)).
+  override?: readonly CompletionSource[] | null;
+  /// Determines whether the completion tooltip is closed when the
+  /// editor loses focus. Defaults to true.
+  closeOnBlur?: boolean;
+  /// The maximum number of options to render to the DOM.
+  maxRenderedOptions?: number;
+  /// Set this to false to disable the [default completion
+  /// keymap](#autocomplete.completionKeymap). (This requires you to
+  /// add bindings to control completion yourself. The bindings should
+  /// probably have a higher precedence than other bindings for the
+  /// same keys.)
+  defaultKeymap?: boolean;
+  /// By default, completions are shown below the cursor when there is
+  /// space. Setting this to true will make the extension put the
+  /// completions above the cursor when possible.
+  aboveCursor?: boolean;
+  /// This can be used to add additional CSS classes to completion
+  /// options.
+  optionClass?: (completion: Completion) => string;
+  /// By default, the library will render icons based on the
+  /// completion's [type](#autocomplete.Completion.type) in front of
+  /// each option. Set this to false to turn that off.
+  icons?: boolean;
+  /// This option can be used to inject additional content into
+  /// options. The `render` function will be called for each visible
+  /// completion, and should produce a DOM node to show. `position`
+  /// determines where in the DOM the result appears, relative to
+  /// other added widgets and the standard content. The default icons
+  /// have position 20, the label position 50, and the detail position
+  /// 80.
+  addToOptions?: {
+    render: (completion: Completion, state: EditorState) => Node | null;
+    position: number;
+  }[];
+  /// The comparison function to use when sorting completions with the same
+  /// match score. Defaults to using
+  /// [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
+  compareCompletions?: (a: Completion, b: Completion) => number;
+  /// By default, commands relating to an open completion only take
+  /// effect 75 milliseconds after the completion opened, so that key
+  /// presses made before the user is aware of the tooltip don't go to
+  /// the tooltip. This option can be used to configure that delay.
+  interactionDelay?: number;
+}
+
+export const completionConfig = Facet.define<
+  CompletionConfig,
+  Required<CompletionConfig>
+>({
+  combine(configs) {
+    return combineConfig(
+      configs,
+      {
+        activateOnTyping: true,
+        selectOnOpen: true,
+        override: null,
+        closeOnBlur: true,
+        maxRenderedOptions: 100,
+        defaultKeymap: true,
+        optionClass: () => '',
+        aboveCursor: false,
+        icons: true,
+        addToOptions: [],
+        compareCompletions: (a, b) => a.label.localeCompare(b.label),
+        interactionDelay: 75,
+      },
+      {
+        defaultKeymap: (a, b) => a && b,
+        closeOnBlur: (a, b) => a && b,
+        icons: (a, b) => a && b,
+        optionClass: (a, b) => (c) => joinClass(a(c), b(c)),
+        addToOptions: (a, b) => a.concat(b),
+      },
+    );
+  },
+});
+
+function joinClass(a: string, b: string) {
+  return a ? (b ? a + ' ' + b : a) : b;
+}

package/src/auto-complete/filter.ts

@@ -0,0 +1,215 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-parameter-properties */
+/* eslint-disable @typescript-eslint/parameter-properties */
+import { codePointAt, codePointSize, fromCodePoint } from '@codemirror/state';
+
+// Scores are counted from 0 (great match) down to negative numbers,
+// assigning specific penalty values for specific shortcomings.
+const enum Penalty {
+  Gap = -1100, // Added for each gap in the match (not counted for by-word matches)
+  NotStart = -700, // The match doesn't start at the start of the word
+  CaseFold = -200, // At least one character needed to be case-folded to match
+  ByWord = -100, // The match is by-word, meaning each char in the pattern matches the start of a word in the string
+}
+
+const enum Tp {
+  NonWord,
+  Upper,
+  Lower,
+}
+
+// A pattern matcher for fuzzy completion matching. Create an instance
+// once for a pattern, and then use that to match any number of
+// completions.
+export class FuzzyMatcher {
+  chars: number[] = [];
+  folded: number[] = [];
+  astral: boolean;
+
+  // Buffers reused by calls to `match` to track matched character
+  // positions.
+  any: number[] = [];
+  precise: number[] = [];
+  byWord: number[] = [];
+
+  constructor(readonly pattern: string) {
+    for (let p = 0; p < pattern.length; ) {
+      const char = codePointAt(pattern, p),
+        size = codePointSize(char);
+      this.chars.push(char);
+      const part = pattern.slice(p, p + size),
+        upper = part.toUpperCase();
+      this.folded.push(codePointAt(upper === part ? part.toLowerCase() : upper, 0));
+      p += size;
+    }
+    this.astral = pattern.length !== this.chars.length;
+  }
+
+  // Matches a given word (completion) against the pattern (input).
+  // Will return null for no match, and otherwise an array that starts
+  // with the match score, followed by any number of `from, to` pairs
+  // indicating the matched parts of `word`.
+  //
+  // The score is a number that is more negative the worse the match
+  // is. See `Penalty` above.
+  match(word: string): number[] | null {
+    if (this.pattern.length === 0) {
+      return [0];
+    }
+    if (word.length < this.pattern.length) {
+      return null;
+    }
+    const { chars, folded, any, precise, byWord } = this;
+    // For single-character queries, only match when they occur right
+    // at the start
+    if (chars.length === 1) {
+      const first = codePointAt(word, 0);
+      return first === chars[0]
+        ? [0, 0, codePointSize(first)]
+        : first === folded[0]
+        ? [Penalty.CaseFold, 0, codePointSize(first)]
+        : null;
+    }
+    const direct = word.indexOf(this.pattern);
+    if (direct === 0) {
+      return [0, 0, this.pattern.length];
+    }
+
+    let len = chars.length,
+      anyTo = 0;
+    if (direct < 0) {
+      for (let i = 0, e = Math.min(word.length, 200); i < e && anyTo < len; ) {
+        const next = codePointAt(word, i);
+        if (next === chars[anyTo] || next === folded[anyTo]) {
+          any[anyTo++] = i;
+        }
+        i += codePointSize(next);
+      }
+      // No match, exit immediately
+      if (anyTo < len) {
+        return null;
+      }
+    }
+
+    // This tracks the extent of the precise (non-folded, not
+    // necessarily adjacent) match
+    let preciseTo = 0;
+    // Tracks whether there is a match that hits only characters that
+    // appear to be starting words. `byWordFolded` is set to true when
+    // a case folded character is encountered in such a match
+    let byWordTo = 0,
+      byWordFolded = false;
+    // If we've found a partial adjacent match, these track its state
+    let adjacentTo = 0,
+      adjacentStart = -1,
+      adjacentEnd = -1;
+    let hasLower = /[a-z]/.test(word),
+      wordAdjacent = true;
+    // Go over the option's text, scanning for the various kinds of matches
+    for (
+      let i = 0, e = Math.min(word.length, 200), prevType = Tp.NonWord;
+      i < e && byWordTo < len;
+
+    ) {
+      const next = codePointAt(word, i);
+      if (direct < 0) {
+        if (preciseTo < len && next === chars[preciseTo]) {
+          precise[preciseTo++] = i;
+        }
+        if (adjacentTo < len) {
+          if (next === chars[adjacentTo] || next === folded[adjacentTo]) {
+            if (adjacentTo === 0) {
+              adjacentStart = i;
+            }
+            adjacentEnd = i + 1;
+            adjacentTo++;
+          } else {
+            adjacentTo = 0;
+          }
+        }
+      }
+      let ch,
+        type =
+          next < 0xff
+            ? (next >= 48 && next <= 57) || (next >= 97 && next <= 122)
+              ? Tp.Lower
+              : next >= 65 && next <= 90
+              ? Tp.Upper
+              : Tp.NonWord
+            : (ch = fromCodePoint(next)) !== ch.toLowerCase()
+            ? Tp.Upper
+            : ch !== ch.toUpperCase()
+            ? Tp.Lower
+            : Tp.NonWord;
+      if (
+        !i ||
+        (type === Tp.Upper && hasLower) ||
+        (prevType === Tp.NonWord && type !== Tp.NonWord)
+      ) {
+        if (
+          chars[byWordTo] === next ||
+          (folded[byWordTo] === next && (byWordFolded = true))
+        ) {
+          byWord[byWordTo++] = i;
+        } else if (byWord.length) {
+          wordAdjacent = false;
+        }
+      }
+      prevType = type;
+      i += codePointSize(next);
+    }
+
+    if (byWordTo === len && byWord[0] === 0 && wordAdjacent) {
+      return this.result(
+        Penalty.ByWord + (byWordFolded ? Penalty.CaseFold : 0),
+        byWord,
+        word,
+      );
+    }
+    if (adjacentTo === len && adjacentStart === 0) {
+      return [Penalty.CaseFold - word.length, 0, adjacentEnd];
+    }
+    if (direct > -1) {
+      return [Penalty.NotStart - word.length, direct, direct + this.pattern.length];
+    }
+    if (adjacentTo === len) {
+      return [
+        Penalty.CaseFold + Penalty.NotStart - word.length,
+        adjacentStart,
+        adjacentEnd,
+      ];
+    }
+    if (byWordTo === len) {
+      return this.result(
+        Penalty.ByWord +
+          (byWordFolded ? Penalty.CaseFold : 0) +
+          Penalty.NotStart +
+          (wordAdjacent ? 0 : Penalty.Gap),
+        byWord,
+        word,
+      );
+    }
+    return chars.length === 2
+      ? null
+      : this.result(
+          (any[0] ? Penalty.NotStart : 0) + Penalty.CaseFold + Penalty.Gap,
+          any,
+          word,
+        );
+  }
+
+  result(score: number, positions: number[], word: string) {
+    let result = [score - word.length],
+      i = 1;
+    for (const pos of positions) {
+      const to = pos + (this.astral ? codePointSize(codePointAt(word, pos)) : 1);
+      if (i > 1 && result[i - 1] === pos) {
+        result[i - 1] = to;
+      } else {
+        result[i++] = pos;
+        result[i++] = to;
+      }
+    }
+    return result;
+  }
+}