@difizen/libro-codemirror 0.1.0 → 0.1.2

package/src/editor.ts

@@ -4,34 +4,36 @@ import type {
   ChangeSet,
   Extension,
   Range,
-  StateEffectType,
   StateCommand,
+  StateEffectType,
   Text,
 } from '@codemirror/state';
 import {
-  Prec,
-  EditorState,
   EditorSelection,
+  EditorState,
+  Prec,
   StateEffect,
   StateField,
 } from '@codemirror/state';
-import { Decoration, EditorView } from '@codemirror/view';
 import type { Command, DecorationSet, ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView } from '@codemirror/view';
+import { defaultConfig, defaultSelectionStyle } from '@difizen/libro-code-editor';
 import type {
+  ICoordinate,
   IEditor,
   IEditorConfig,
-  IEditorSelectionStyle,
-  KeydownHandler,
   IEditorOptions,
+  IEditorSelectionStyle,
   IModel,
   IPosition,
   IRange,
-  ICoordinate,
   ITextSelection,
   IToken,
+  KeydownHandler,
+  SearchMatch,
 } from '@difizen/libro-code-editor';
-import { defaultSelectionStyle, defaultConfig } from '@difizen/libro-code-editor';
 import { findFirstArrayIndex, removeAllWhereFromArray } from '@difizen/libro-common';
+import type { LSPProvider } from '@difizen/libro-lsp';
 import { Disposable, Emitter } from '@difizen/mana-app';
 import { getOrigin, watch } from '@difizen/mana-app';
 import type { SyntaxNodeRef } from '@lezer/common';
@@ -90,7 +92,7 @@ export const codeMirrorDefaultConfig: Required<CodeMirrorConfig> = {
   ...defaultConfig,
   mode: 'null',
   mimetype: 'text/x-python',
-  theme: 'jupyter',
+  theme: { light: 'jupyter', dark: 'jupyter', hc: 'jupyter' },
   smartIndent: true,
   electricChars: true,
   keyMap: 'default',
@@ -108,7 +110,7 @@ export const codeMirrorDefaultConfig: Required<CodeMirrorConfig> = {
   styleSelectedText: true,
   selectionPointer: false,
   handlePaste: true,
-  lineWrap: 'off',
+  scrollBarHeight: 8,
 
   //
   highlightActiveLineGutter: false,
@@ -135,12 +137,21 @@ export const codeMirrorDefaultConfig: Required<CodeMirrorConfig> = {
 };
 
 export class CodeMirrorEditor implements IEditor {
+  // highlight
+  protected highlightEffect: StateEffectType<{
+    matches: SearchMatch[];
+    currentIndex: number | undefined;
+  }>;
+  protected highlightMark: Decoration;
+  protected selectedMatchMark: Decoration;
+  protected highlightField: StateField<DecorationSet>;
+
   /**
    * Construct a CodeMirror editor.
    */
   constructor(options: IOptions) {
     this._editorConfig = new EditorConfiguration(options);
-    const host = (this.host = options['host']);
+    const host = (this.host = options.host);
 
     host.classList.add(EDITOR_CLASS);
     host.classList.add('jp-Editor');
@@ -148,7 +159,7 @@ export class CodeMirrorEditor implements IEditor {
     host.addEventListener('blur', this, true);
     host.addEventListener('scroll', this, true);
 
-    this._uuid = options['uuid'] || v4();
+    this._uuid = options.uuid || v4();
 
     // State and effects for handling the selection marks
     this._addMark = StateEffect.define<ICollabSelectionText>();
@@ -186,20 +197,84 @@ export class CodeMirrorEditor implements IEditor {
       provide: (f) => EditorView.decorations.from(f),
     });
 
+    // handle highlight
+    this.highlightEffect = StateEffect.define<{
+      matches: SearchMatch[];
+      currentIndex: number | undefined;
+    }>({
+      map: (value, mapping) => ({
+        matches: value.matches.map((v) => ({
+          text: v.text,
+          position: mapping.mapPos(v.position),
+        })),
+        currentIndex: value.currentIndex,
+      }),
+    });
+    this.highlightMark = Decoration.mark({ class: 'cm-searchMatch' });
+    this.selectedMatchMark = Decoration.mark({
+      class: 'cm-searchMatch cm-searchMatch-selected libro-selectedtext',
+    });
+    this.highlightField = StateField.define<DecorationSet>({
+      create: () => {
+        return Decoration.none;
+      },
+      update: (highlights, transaction) => {
+        // eslint-disable-next-line no-param-reassign
+        highlights = highlights.map(transaction.changes);
+        for (const ef of transaction.effects) {
+          if (ef.is(this.highlightEffect)) {
+            const e = ef as StateEffect<{
+              matches: SearchMatch[];
+              currentIndex: number | undefined;
+            }>;
+            if (e.value.matches.length) {
+              // eslint-disable-next-line no-param-reassign
+              highlights = highlights.update({
+                add: e.value.matches.map((m, index) => {
+                  if (index === e.value.currentIndex) {
+                    return this.selectedMatchMark.range(
+                      m.position,
+                      m.position + m.text.length,
+                    );
+                  }
+                  return this.highlightMark.range(
+                    m.position,
+                    m.position + m.text.length,
+                  );
+                }),
+                filter: (from, to) => {
+                  return (
+                    !e.value.matches.some(
+                      (m) => m.position >= from && m.position + m.text.length <= to,
+                    ) || from === to
+                  );
+                },
+              });
+            } else {
+              // eslint-disable-next-line no-param-reassign
+              highlights = Decoration.none;
+            }
+          }
+        }
+        return highlights;
+      },
+      provide: (f) => EditorView.decorations.from(f),
+    });
+
     // Handle selection style.
-    const style = options['selectionStyle'] || {};
+    const style = options.selectionStyle || {};
     this._selectionStyle = {
       ...defaultSelectionStyle,
       ...(style as IEditorSelectionStyle),
     };
 
-    const model = (this._model = options['model']);
+    const model = (this._model = options.model);
 
     const config = options.config || {};
     const fullConfig = (this._config = {
       ...codeMirrorDefaultConfig,
       ...config,
-      mimetype: options['model'].mimeType,
+      mimetype: options.model.mimeType,
     });
 
     // this._initializeEditorBinding();
@@ -207,16 +282,13 @@ export class CodeMirrorEditor implements IEditor {
     // Extension for handling DOM events
     const domEventHandlers = EditorView.domEventHandlers({
       keydown: (event: KeyboardEvent) => {
-        const index = findFirstArrayIndex(
-          this._keydownHandlers,
-          (handler: KeydownHandler) => {
-            if (handler(this, event) === true) {
-              event.preventDefault();
-              return true;
-            }
-            return false;
-          },
-        );
+        const index = findFirstArrayIndex(this._keydownHandlers, (handler) => {
+          if (handler(this, event) === true) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        });
         if (index === -1) {
           return this.onKeydown(event);
         }
@@ -261,10 +333,6 @@ export class CodeMirrorEditor implements IEditor {
     watch(model, 'mimeType', this._onMimeTypeChanged);
   }
 
-  handleTooltipChange = (val: boolean) => {
-    this.modalChangeEmitter.fire(val);
-  };
-
   /**
    * Initialize the editor binding.
    */
@@ -277,9 +345,7 @@ export class CodeMirrorEditor implements IEditor {
   //   };
   // }
 
-  save: () => void = () => {
-    //
-  };
+  save: () => void;
   /**
    * A signal emitted when either the top or bottom edge is requested.
    */
@@ -360,7 +426,7 @@ export class CodeMirrorEditor implements IEditor {
   /**
    * Tests whether the editor is disposed.
    */
-  get isDisposed(): boolean {
+  get disposed(): boolean {
     return this._isDisposed;
   }
 
@@ -368,7 +434,7 @@ export class CodeMirrorEditor implements IEditor {
    * Dispose of the resources held by the widget.
    */
   dispose(): void {
-    if (this.isDisposed) {
+    if (this.disposed) {
       return;
     }
     this._isDisposed = true;
@@ -394,7 +460,7 @@ export class CodeMirrorEditor implements IEditor {
     // Don't bother setting the option if it is already the same.
     if (this._config[option] !== value) {
       this._config[option] = value;
-      this._editorConfig.reconfigureExtension(this._editor, option as string, value);
+      this._editorConfig.reconfigureExtension(this._editor, option, value);
     }
 
     if (option === 'readOnly') {
@@ -427,8 +493,7 @@ export class CodeMirrorEditor implements IEditor {
    */
   getLine(line: number): string | undefined {
     // TODO: CM6 remove +1 when CM6 first line number has propagated
-    const _line = line + 1;
-    return _line <= this.doc.lines ? this.doc.line(_line).text : undefined;
+    return line <= this.doc.lines ? this.doc.line(line).text : undefined;
   }
 
   /**
@@ -436,7 +501,7 @@ export class CodeMirrorEditor implements IEditor {
    */
   getOffsetAt(position: IPosition): number {
     // TODO: CM6 remove +1 when CM6 first line number has propagated
-    return this.doc.line(position.line + 1).from + position.column;
+    return this.doc.line(position.line).from + position.column - 1;
   }
 
   /**
@@ -537,6 +602,16 @@ export class CodeMirrorEditor implements IEditor {
     return this.state.sliceDoc(fromOffset, toOffset);
   }
 
+  getSelectionValue(range?: IRange) {
+    const fromOffset = range
+      ? this.getOffsetAt(range.start)
+      : this.editor.state.selection.main.from;
+    const toOffset = range
+      ? this.getOffsetAt(range.end)
+      : this.editor.state.selection.main.to;
+    return this.state.sliceDoc(fromOffset, toOffset);
+  }
+
   /**
    * Add a keydown handler to the editor.
    *
@@ -547,10 +622,7 @@ export class CodeMirrorEditor implements IEditor {
   addKeydownHandler(handler: KeydownHandler): Disposable {
     this._keydownHandlers.push(handler);
     return Disposable.create(() => {
-      removeAllWhereFromArray(
-        this._keydownHandlers,
-        (val: KeydownHandler) => val === handler,
-      );
+      removeAllWhereFromArray(this._keydownHandlers, (val) => val === handler);
     });
   }
 
@@ -682,10 +754,41 @@ export class CodeMirrorEditor implements IEditor {
    *
    * @param text The text to be inserted.
    */
-  replaceSelection(text: string): void {
-    this.editor.dispatch(this.state.replaceSelection(text));
+  replaceSelection(text: string, range: IRange): void {
+    this.editor.dispatch({
+      changes: {
+        from: this.getOffsetAt(range.start),
+        to: this.getOffsetAt(range.end),
+        insert: text,
+      },
+    });
+  }
+
+  replaceSelections(edits: { text: string; range: IRange }[]): void {
+    // const trans = this.state.replaceSelection(text);
+    this.editor.dispatch({
+      changes: edits.map((item) => ({
+        from: this.getOffsetAt(item.range.start),
+        to: this.getOffsetAt(item.range.end),
+        insert: item.text,
+      })),
+    });
   }
 
+  highlightMatches(matches: SearchMatch[], currentIndex: number | undefined) {
+    const effects: StateEffect<unknown>[] = [
+      this.highlightEffect.of({ matches: matches, currentIndex: currentIndex }),
+    ];
+    if (!this.state.field(this.highlightField, false)) {
+      effects.push(StateEffect.appendConfig.of([this.highlightField]));
+    }
+    this.editor.dispatch({ effects });
+  }
+
+  handleTooltipChange = (val: boolean) => {
+    this.modalChangeEmitter.fire(val);
+  };
+
   /**
    * Get a list of tokens for the current editor text content.
    */
@@ -806,10 +909,36 @@ export class CodeMirrorEditor implements IEditor {
     });
   }
 
+  /**
+   * Handles a selections change.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _onSelectionsChanged(args: ITextSelection[]): void {
+    // const uuid = args.key;
+    // if (uuid !== this.uuid) {
+    //   this._cleanSelections(uuid);
+    //   if (args.type !== 'remove' && args.newValue) {
+    //     this._markSelections(uuid, args.newValue);
+    //   }
+    // }
+  }
+
+  /**
+   * Clean selections for the given uuid.
+   */
+  protected _cleanSelections(uuid: string) {
+    this.editor.dispatch({
+      effects: this._removeMark.of({
+        uuid: uuid,
+        decorations: this._selectionMarkers[uuid],
+      }),
+    });
+  }
+
   protected _buildMarkDecoration(
     uuid: string,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _selections: ISelectionText[],
+    selections: ISelectionText[],
   ) {
     const decorations: Range<Decoration>[] = [];
 
@@ -886,6 +1015,20 @@ export class CodeMirrorEditor implements IEditor {
   //   });
   // }
 
+  /**
+   * Marks selections.
+   */
+  protected _markSelections(uuid: string, selections: ITextSelection[]) {
+    const sel = selections.map((selection) => ({
+      from: this.getOffsetAt(selection.start),
+      to: this.getOffsetAt(selection.end),
+      style: selection.style,
+    }));
+    this.editor.dispatch({
+      effects: this._addMark.of({ uuid: uuid, selections: sel }),
+    });
+  }
+
   /**
    * Handles a cursor activity event.
    */
@@ -943,7 +1086,6 @@ export class CodeMirrorEditor implements IEditor {
     if (update.docChanged) {
       this._lastChange = update.changes;
     }
-
     this.model.value = update.state.doc.toJSON().join('\n');
   }
   /**
@@ -1013,13 +1155,47 @@ export class CodeMirrorEditor implements IEditor {
       this._caretHover = null;
     }
   }
+  /**
+   * Check for an out of sync editor.
+   */
+  protected _checkSync(): void {
+    const change = this._lastChange;
+    if (!change) {
+      return;
+    }
+    this._lastChange = null;
+    const doc = this.doc;
+    if (doc.toString() === this._model.value) {
+      return;
+    }
+
+    // void showDialog({
+    //   title: this._trans.__('Code Editor out of Sync'),
+    //   body: this._trans.__(
+    //     'Please open your browser JavaScript console for bug report instructions',
+    //   ),
+    // });
+    console.warn(
+      'If you are able and willing to publicly share the text or code in your editor, you can help us debug the "Code Editor out of Sync" message by pasting the following to the public issue at https://github.com/jupyterlab/jupyterlab/issues/2951. Please note that the data below includes the text/code in your editor.',
+    );
+    console.warn(
+      JSON.stringify({
+        model: this._model.value,
+        view: doc.toString(),
+        selections: this.getSelections(),
+        cursor: this.getCursorPosition(),
+        lineSep: this.state.facet(EditorState.lineSeparator),
+        change,
+      }),
+    );
+  }
   protected _model: IModel;
   protected _editor: EditorView;
   protected _selectionMarkers: Record<string, Range<Decoration>[]> = {};
-  protected _caretHover: HTMLElement | null = null;
+  protected _caretHover: HTMLElement | null;
   protected _config: IConfig;
-  protected _hoverTimeout: number | undefined = undefined;
-  protected _hoverId: string | undefined = undefined;
+  protected _hoverTimeout: number;
+  protected _hoverId: string;
   protected _keydownHandlers = new Array<KeydownHandler>();
   protected _selectionStyle: IEditorSelectionStyle;
   protected _uuid = '';
@@ -1036,7 +1212,7 @@ export class CodeMirrorEditor implements IEditor {
 export type IConfig = CodeMirrorConfig;
 
 export interface IOptions extends IEditorOptions {
-  [x: string]: any;
+  lspProvider?: LSPProvider;
   /**
    * The configuration options for the editor.
    */

package/src/hyperlink.ts

@@ -12,7 +12,7 @@ export interface HyperLinkState {
 }
 
 class HyperLink extends WidgetType {
-  private readonly state: HyperLinkState;
+  protected readonly state: HyperLinkState;
   constructor(state: HyperLinkState) {
     super();
     this.state = state;

package/src/indentation-markers/index.ts

@@ -117,8 +117,8 @@ class IndentMarkersClass implements PluginValue {
   view: EditorView;
   decorations!: DecorationSet;
 
-  private unitWidth: number;
-  private currentLineNumber: number;
+  protected unitWidth: number;
+  protected currentLineNumber: number;
 
   constructor(view: EditorView) {
     this.view = view;
@@ -149,7 +149,7 @@ class IndentMarkersClass implements PluginValue {
     }
   }
 
-  private generate(state: EditorState) {
+  protected generate(state: EditorState) {
     const builder = new RangeSetBuilder<Decoration>();
 
     const lines = getVisibleLines(this.view, state);

package/src/indentation-markers/map.ts

@@ -22,19 +22,19 @@ export interface IndentEntry {
  */
 export class IndentationMap {
   /** The {@link EditorState} indentation is derived from. */
-  private state: EditorState;
+  protected state: EditorState;
 
   /** The set of lines that are used as an entrypoint. */
-  private lines: Set<Line>;
+  protected lines: Set<Line>;
 
   /** The internal mapping of line numbers to {@link IndentEntry} objects. */
-  private map: Map<number, IndentEntry>;
+  protected map: Map<number, IndentEntry>;
 
   /** The width of the editor's indent unit. */
-  private unitWidth: number;
+  protected unitWidth: number;
 
   /** The type of indentation to use (terminate at end of scope vs last non-empty line in scope) */
-  private markerType: 'fullScope' | 'codeOnly';
+  protected markerType: 'fullScope' | 'codeOnly';
 
   /**
    * @param lines - The set of lines to get the indentation map for.
@@ -96,7 +96,7 @@ export class IndentationMap {
    * @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) {
+  protected 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);
@@ -109,7 +109,7 @@ export class IndentationMap {
    *
    * @param line - The {@link Line} to add to the map.
    */
-  private add(line: Line) {
+  protected add(line: Line) {
     if (this.has(line)) {
       return this.get(line);
     }
@@ -165,7 +165,7 @@ export class IndentationMap {
    * @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) {
+  protected closestNonEmpty(from: Line, dir: -1 | 1) {
     let lineNo = from.number + dir;
 
     while (dir === -1 ? lineNo >= 1 : lineNo <= this.state.doc.lines) {
@@ -205,7 +205,7 @@ export class IndentationMap {
    * 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() {
+  protected findAndSetActiveLines() {
     const currentLine = getCurrentLine(this.state);
 
     if (!this.has(currentLine)) {

package/src/index.ts

@@ -4,8 +4,11 @@ import './style/variables.css';
 
 export * from './config.js';
 export * from './editor.js';
+export * from './lsp/index.js';
 export * from './mode.js';
-export * from './theme.js';
+export * from './module.js';
 export * from './factory.js';
 export * from './monitor.js';
+export * from './theme.js';
+
 export * from './auto-complete/index.js';

package/src/libro-icon.tsx

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