@difizen/libro-codemirror 0.0.2-alpha.0

package/src/auto-complete/view.ts

@@ -0,0 +1,343 @@
+/* eslint-disable @typescript-eslint/no-parameter-properties */
+/* eslint-disable @typescript-eslint/parameter-properties */
+import type { Transaction } from '@codemirror/state';
+import type {
+  EditorView,
+  Command,
+  PluginValue,
+  ViewUpdate,
+  TooltipView,
+} from '@codemirror/view';
+import { ViewPlugin, logException, getTooltip } from '@codemirror/view';
+
+import type { CompletionResult } from './completion.js';
+import { cur, CompletionContext, applyCompletion } from './completion.js';
+import { completionConfig } from './config.js';
+import {
+  completionState,
+  setSelectedEffect,
+  startCompletionEffect,
+  closeCompletionEffect,
+  setActiveEffect,
+  State,
+  ActiveSource,
+  ActiveResult,
+  getUserEvent,
+} from './state.js';
+
+/// Returns a command that moves the completion selection forward or
+/// backward by the given amount.
+export function moveCompletionSelection(
+  forward: boolean,
+  by: 'option' | 'page' = 'option',
+): Command {
+  return (view: EditorView) => {
+    const cState = view.state.field(completionState, false);
+    if (
+      !cState ||
+      !cState.open ||
+      Date.now() - cState.open.timestamp <
+        view.state.facet(completionConfig).interactionDelay
+    ) {
+      return false;
+    }
+    let step = 1,
+      tooltip: TooltipView | null;
+    if (by === 'page' && (tooltip = getTooltip(view, cState.open.tooltip))) {
+      step = Math.max(
+        2,
+        Math.floor(
+          tooltip.dom.offsetHeight /
+            (tooltip.dom.querySelector('li') as HTMLElement).offsetHeight,
+        ) - 1,
+      );
+    }
+    const { length } = cState.open.options;
+    let selected =
+      cState.open.selected > -1
+        ? cState.open.selected + step * (forward ? 1 : -1)
+        : forward
+        ? 0
+        : length - 1;
+    if (selected < 0) {
+      selected = by === 'page' ? 0 : length - 1;
+    } else if (selected >= length) {
+      selected = by === 'page' ? length - 1 : 0;
+    }
+    view.dispatch({ effects: setSelectedEffect.of(selected) });
+    return true;
+  };
+}
+
+/// Accept the current completion.
+export const acceptCompletion: Command = (view: EditorView) => {
+  const cState = view.state.field(completionState, false);
+  if (
+    view.state.readOnly ||
+    !cState ||
+    !cState.open ||
+    cState.open.selected < 0 ||
+    Date.now() - cState.open.timestamp <
+      view.state.facet(completionConfig).interactionDelay
+  ) {
+    return false;
+  }
+  applyCompletion(view, cState.open.options[cState.open.selected]);
+  return true;
+};
+
+/// Explicitly start autocompletion.
+export const startCompletion: Command = (view: EditorView) => {
+  const cState = view.state.field(completionState, false);
+  if (!cState) {
+    return false;
+  }
+  view.dispatch({ effects: startCompletionEffect.of(true) });
+  return true;
+};
+
+/// Close the currently active completion.
+export const closeCompletion: Command = (view: EditorView) => {
+  const cState = view.state.field(completionState, false);
+  if (!cState || !cState.active.some((a) => a.state !== State.Inactive)) {
+    return false;
+  }
+  view.dispatch({ effects: closeCompletionEffect.of(null) });
+  return true;
+};
+
+class RunningQuery {
+  time = Date.now();
+  updates: Transaction[] = [];
+  // Note that 'undefined' means 'not done yet', whereas 'null' means
+  // 'query returned null'.
+  done: undefined | CompletionResult | null = undefined;
+
+  constructor(
+    readonly active: ActiveSource,
+    readonly context: CompletionContext,
+  ) {}
+}
+
+const DebounceTime = 50,
+  MaxUpdateCount = 50,
+  MinAbortTime = 1000;
+
+const enum CompositionState {
+  None,
+  Started,
+  Changed,
+  ChangedAndMoved,
+}
+
+export const completionPlugin = ViewPlugin.fromClass(
+  class implements PluginValue {
+    debounceUpdate: NodeJS.Timeout | -1 = -1;
+    running: RunningQuery[] = [];
+    debounceAccept: NodeJS.Timeout | -1 = -1;
+    composing = CompositionState.None;
+
+    constructor(readonly view: EditorView) {
+      for (const active of view.state.field(completionState).active) {
+        if (active.state === State.Pending) {
+          this.startQuery(active);
+        }
+      }
+    }
+
+    update(update: ViewUpdate) {
+      const cState = update.state.field(completionState);
+      if (
+        !update.selectionSet &&
+        !update.docChanged &&
+        update.startState.field(completionState) === cState
+      ) {
+        return;
+      }
+
+      const doesReset = update.transactions.some((tr) => {
+        return (tr.selection || tr.docChanged) && !getUserEvent(tr);
+      });
+      for (let i = 0; i < this.running.length; i++) {
+        const query = this.running[i];
+        if (
+          doesReset ||
+          (query.updates.length + update.transactions.length > MaxUpdateCount &&
+            Date.now() - query.time > MinAbortTime)
+        ) {
+          for (const handler of query.context.abortListeners!) {
+            try {
+              handler();
+            } catch (e) {
+              logException(this.view.state, e);
+            }
+          }
+          query.context.abortListeners = null;
+          this.running.splice(i--, 1);
+        } else {
+          query.updates.push(...update.transactions);
+        }
+      }
+
+      if (this.debounceUpdate > -1) {
+        clearTimeout(this.debounceUpdate);
+      }
+      this.debounceUpdate = cState.active.some(
+        (a) =>
+          a.state === State.Pending &&
+          !this.running.some((q) => q.active.source === a.source),
+      )
+        ? setTimeout(() => this.startUpdate(), DebounceTime)
+        : -1;
+
+      if (this.composing !== CompositionState.None) {
+        for (const tr of update.transactions) {
+          if (getUserEvent(tr) === 'input') {
+            this.composing = CompositionState.Changed;
+          } else if (this.composing === CompositionState.Changed && tr.selection) {
+            this.composing = CompositionState.ChangedAndMoved;
+          }
+        }
+      }
+    }
+
+    startUpdate() {
+      this.debounceUpdate = -1;
+      const { state } = this.view,
+        cState = state.field(completionState);
+      for (const active of cState.active) {
+        if (
+          active.state === State.Pending &&
+          !this.running.some((r) => r.active.source === active.source)
+        ) {
+          this.startQuery(active);
+        }
+      }
+    }
+
+    startQuery(active: ActiveSource) {
+      const { state } = this.view,
+        pos = cur(state);
+      const context = new CompletionContext(state, pos, active.explicitPos === pos);
+      const pending = new RunningQuery(active, context);
+      this.running.push(pending);
+      Promise.resolve(active.source(context))
+        .then(
+          (result) => {
+            if (!pending.context.aborted) {
+              pending.done = result || null;
+              return this.scheduleAccept();
+            }
+            return undefined;
+          },
+          (err) => {
+            this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            logException(this.view.state, err);
+            return undefined;
+          },
+        )
+        .catch(() => {
+          //
+        });
+    }
+
+    scheduleAccept() {
+      if (this.running.every((q) => q.done !== undefined)) {
+        this.accept();
+      } else if (this.debounceAccept < 0) {
+        this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
+      }
+    }
+
+    // For each finished query in this.running, try to create a result
+    // or, if appropriate, restart the query.
+    accept() {
+      if (this.debounceAccept > -1) {
+        clearTimeout(this.debounceAccept);
+      }
+      this.debounceAccept = -1;
+
+      const updated: ActiveSource[] = [];
+      const conf = this.view.state.facet(completionConfig);
+      for (let i = 0; i < this.running.length; i++) {
+        const query = this.running[i];
+        if (query.done === undefined) {
+          continue;
+        }
+        this.running.splice(i--, 1);
+
+        if (query.done) {
+          let active: ActiveSource = new ActiveResult(
+            query.active.source,
+            query.active.explicitPos,
+            query.done,
+            query.done.from,
+            query.done.to ??
+              cur(query.updates.length ? query.updates[0].startState : this.view.state),
+          );
+          // Replay the transactions that happened since the start of
+          // the request and see if that preserves the result
+          for (const tr of query.updates) {
+            active = active.update(tr, conf);
+          }
+          if (active.hasResult()) {
+            updated.push(active);
+            continue;
+          }
+        }
+
+        const current = this.view.state
+          .field(completionState)
+          .active.find((a) => a.source === query.active.source);
+        if (current && current.state === State.Pending) {
+          if (query.done === null) {
+            // Explicitly failed. Should clear the pending status if it
+            // hasn't been re-set in the meantime.
+            let active = new ActiveSource(query.active.source, State.Inactive);
+            for (const tr of query.updates) {
+              active = active.update(tr, conf);
+            }
+            if (active.state !== State.Pending) {
+              updated.push(active);
+            }
+          } else {
+            // Cleared by subsequent transactions. Restart.
+            this.startQuery(current);
+          }
+        }
+      }
+
+      if (updated.length) {
+        this.view.dispatch({ effects: setActiveEffect.of(updated) });
+      }
+    }
+  },
+  {
+    eventHandlers: {
+      blur() {
+        const state = this.view.state.field(completionState, false);
+        if (
+          state &&
+          state.tooltip &&
+          this.view.state.facet(completionConfig).closeOnBlur
+        ) {
+          this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+        }
+      },
+      compositionstart() {
+        this.composing = CompositionState.Started;
+      },
+      compositionend() {
+        if (this.composing === CompositionState.ChangedAndMoved) {
+          // Safari fires compositionend events synchronously, possibly
+          // from inside an update, so dispatch asynchronously to avoid reentrancy
+          setTimeout(
+            () => this.view.dispatch({ effects: startCompletionEffect.of(false) }),
+            20,
+          );
+        }
+        this.composing = CompositionState.None;
+      },
+    },
+  },
+);

package/src/auto-complete/word.ts

@@ -0,0 +1,118 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-shadow */
+import type { Text } from '@codemirror/state';
+
+import type { Completion, CompletionSource } from './completion.js';
+
+const enum C {
+  Range = 50000,
+  MinCacheLen = 1000,
+  MaxList = 2000,
+}
+
+function wordRE(wordChars: string) {
+  const escaped = wordChars.replace(/[\\[.+*?(){|^$]/g, '\\$&');
+  try {
+    return new RegExp(`[\\p{Alphabetic}\\p{Number}_${escaped}]+`, 'ug');
+  } catch {
+    // eslint-disable-next-line no-useless-escape
+    return new RegExp(`[\w${escaped}]`, 'g');
+  }
+}
+
+function mapRE(re: RegExp, f: (source: string) => string) {
+  return new RegExp(f(re.source), re.unicode ? 'u' : '');
+}
+
+const wordCaches: Record<string, WeakMap<Text, readonly Completion[]>> = Object.create(
+  null,
+);
+
+function wordCache(wordChars: string) {
+  return wordCaches[wordChars] || (wordCaches[wordChars] = new WeakMap());
+}
+
+function storeWords(
+  doc: Text,
+  wordRE: RegExp,
+  result: Completion[],
+  seen: Record<string, boolean>,
+  ignoreAt: number,
+) {
+  for (let lines = doc.iterLines(), pos = 0; !lines.next().done; ) {
+    let { value } = lines,
+      m;
+    wordRE.lastIndex = 0;
+    while ((m = wordRE.exec(value))) {
+      if (!seen[m[0]] && pos + m.index !== ignoreAt) {
+        result.push({ type: 'text', label: m[0] });
+        seen[m[0]] = true;
+        if (result.length >= C.MaxList) {
+          return;
+        }
+      }
+    }
+    pos += value.length + 1;
+  }
+}
+
+function collectWords(
+  doc: Text,
+  cache: WeakMap<Text, readonly Completion[]>,
+  wordRE: RegExp,
+  to: number,
+  ignoreAt: number,
+) {
+  const big = doc.length >= C.MinCacheLen;
+  const cached = big && cache.get(doc);
+  if (cached) {
+    return cached;
+  }
+  const result: Completion[] = [],
+    seen: Record<string, boolean> = Object.create(null);
+  if (doc.children) {
+    let pos = 0;
+    for (const ch of doc.children) {
+      if (ch.length >= C.MinCacheLen) {
+        for (const c of collectWords(ch, cache, wordRE, to - pos, ignoreAt - pos)) {
+          if (!seen[c.label]) {
+            seen[c.label] = true;
+            result.push(c);
+          }
+        }
+      } else {
+        storeWords(ch, wordRE, result, seen, ignoreAt - pos);
+      }
+      pos += ch.length + 1;
+    }
+  } else {
+    storeWords(doc, wordRE, result, seen, ignoreAt);
+  }
+  if (big && result.length < C.MaxList) {
+    cache.set(doc, result);
+  }
+  return result;
+}
+
+/// A completion source that will scan the document for words (using a
+/// [character categorizer](#state.EditorState.charCategorizer)), and
+/// return those as completions.
+export const completeAnyWord: CompletionSource = (context) => {
+  const wordChars = context.state
+    .languageDataAt<string>('wordChars', context.pos)
+    .join('');
+  const re = wordRE(wordChars);
+  const token = context.matchBefore(mapRE(re, (s) => s + '$'));
+  if (!token && !context.explicit) {
+    return null;
+  }
+  const from = token ? token.from : context.pos;
+  const options = collectWords(
+    context.state.doc,
+    wordCache(wordChars),
+    re,
+    C.Range,
+    from,
+  );
+  return { from, options, validFor: mapRE(re, (s) => '^' + s) };
+};

package/src/completion.ts

@@ -0,0 +1,61 @@
+import type { CompletionSource, Completion } from '@codemirror/autocomplete';
+import type { CompletionProvider, CompletionReply } from '@difizen/libro-code-editor';
+import type { JSONObject } from '@difizen/libro-common';
+
+type EditorCompletion = (provider: CompletionProvider | undefined) => CompletionSource;
+
+export const kernelCompletions: EditorCompletion =
+  (provider: CompletionProvider | undefined) => async (context) => {
+    /**
+     * 只在显式的使用tab触发时调用kernel completion
+     * 只在只在隐式的输入时触发时调用lsp completion
+     */
+    if (!provider || !context.explicit) {
+      return null;
+    }
+    const word = context.matchBefore(/\w*/);
+    let result: CompletionReply;
+    const timeout = 500;
+    try {
+      result = await Promise.any([
+        provider({ cursorPosition: context.pos }),
+        new Promise<CompletionReply>((_resolve, reject) => {
+          setTimeout(() => {
+            reject(`request time out in ${timeout}ms`);
+          }, timeout);
+        }),
+      ]);
+    } catch (error) {
+      console.error('provider error', error);
+      return null;
+    }
+
+    if (!word) {
+      return null;
+    }
+    if (word.from === word.to) {
+      return null;
+    }
+
+    const metadata = result.metadata || {};
+    const types = metadata['_jupyter_types_experimental'] as JSONObject[];
+    let items: Completion[];
+    if (types) {
+      items = types.map((item) => {
+        return {
+          label: item['text'] as string,
+          type: item['type'] === '<unknown>' ? undefined : (item['type'] as string),
+        } as Completion;
+      });
+    } else {
+      items = result.matches.map((item) => {
+        return { label: item, type: 'text' };
+      });
+    }
+
+    return {
+      from: result.cursor_start ?? word.from,
+      to: result.cursor_end,
+      options: items,
+    };
+  };