@jupyterlab/codemirror 4.0.0-rc.0 → 4.0.0

package/src/searchprovider.ts

@@ -32,7 +32,13 @@
 
 import { ISearchMatch } from '@jupyterlab/documentsearch';
 import { CodeMirrorEditor } from './editor';
-import { StateEffect, StateEffectType, StateField } from '@codemirror/state';
+import {
+  EditorSelection,
+  Extension,
+  StateEffect,
+  StateEffectType,
+  StateField
+} from '@codemirror/state';
 import { Decoration, DecorationSet, EditorView } from '@codemirror/view';
 import { CodeEditor } from '@jupyterlab/codeeditor';
 import {
@@ -45,6 +51,43 @@ import {
 import { ISignal, Signal } from '@lumino/signaling';
 import { ISharedText, SourceChange } from '@jupyter/ydoc';
 
+/**
+ * Defines from which position the search should be executed.
+ * - `'selection'` - search from selection head/anchor (depending on search direction)
+ * - `'previous-match'` - search from previous match
+ * - `'auto'` - search from selection if editor is focused or previous match otherwise
+ * - `'selection-start'` - search from selection head/anchor whichever is smaller
+ * - `'start'` - from start of the editor
+ */
+type SearchStartAnchor =
+  | 'auto'
+  | 'selection'
+  | 'selection-start'
+  | 'previous-match'
+  | 'start';
+
+interface IHighlightMatchOptions {
+  /**
+   * Whether the highlighted match should be scrolled into view.
+   * Defaults to `true`.
+   */
+  scroll?: boolean;
+  /**
+   * Whether the user cursor should be moved to select the match.
+   * `protectSelection` flag takes precedence over this option.
+   * Defaults to `true`.
+   */
+  select?: boolean;
+}
+
+export interface IHighlightAdjacentMatchOptions extends IHighlightMatchOptions {
+  /**
+   * What should be used as an anchor when searching for adjacent match.
+   * Defaults to `'auto'`.
+   */
+  from?: SearchStartAnchor;
+}
+
 /**
  * Search provider for editors.
  */
@@ -167,7 +210,7 @@ export abstract class EditorSearchProvider<
   }
 
   /**
-   * Set whether search should be limitted to specified selection.
+   * Set whether search should be limitted to specified text selection.
    */
   async setSearchSelection(selection: CodeEditor.IRange | null): Promise<void> {
     if (this._inSelection === selection) {
@@ -178,6 +221,20 @@ export abstract class EditorSearchProvider<
     this._stateChanged.emit();
   }
 
+  /**
+   * Set whether user selection should be protected from modifications.
+   *
+   * If disabled, the selection will be updated on search and on editor focus
+   * to cover the current match. We need to protect selection from modifications
+   * for both: search in text and search in cells; since `setSearchSelection`
+   * is only telling us about search in text, we need to have an additional
+   * way to signal that either search in text or in cells is active, or for
+   * any other reason selection range should be protected.
+   */
+  setProtectSelection(v: boolean) {
+    this.cmHandler.protectSelection = v;
+  }
+
   /**
    * Initialize the search using the provided options. Should update the UI
    * to highlight all matches and "select" the first match.
@@ -211,13 +268,12 @@ export abstract class EditorSearchProvider<
    */
   async highlightNext(
     loop = true,
-    fromCursor = false
+    options?: IHighlightAdjacentMatchOptions
   ): Promise<ISearchMatch | undefined> {
     if (this.matchesCount === 0 || !this.isActive) {
       this.currentIndex = null;
     } else {
-      // This starts from the cursor position if `fromCursor` is true
-      let match = await this.cmHandler.highlightNext(fromCursor);
+      let match = await this.cmHandler.highlightNext(options);
       if (match) {
         this.currentIndex = this.cmHandler.currentIndex;
       } else {
@@ -239,13 +295,12 @@ export abstract class EditorSearchProvider<
    */
   async highlightPrevious(
     loop = true,
-    fromCursor = false
+    options?: IHighlightAdjacentMatchOptions
   ): Promise<ISearchMatch | undefined> {
     if (this.matchesCount === 0 || !this.isActive) {
       this.currentIndex = null;
     } else {
-      // This starts from the cursor position if `fromCursor` is true
-      let match = await this.cmHandler.highlightPrevious(fromCursor);
+      let match = await this.cmHandler.highlightPrevious(options);
       if (match) {
         this.currentIndex = this.cmHandler.currentIndex;
       } else {
@@ -405,7 +460,11 @@ export abstract class EditorSearchProvider<
           this.cmHandler.currentIndex === null &&
           this.cmHandler.matches.length > 0
         ) {
-          await this.cmHandler.highlightNext(true, false);
+          await this.cmHandler.highlightNext({
+            from: 'selection',
+            select: false,
+            scroll: false
+          });
         }
         this.currentIndex = this.cmHandler.currentIndex;
       } else {
@@ -452,9 +511,9 @@ interface IEffectValue {
  *
  * **NOTES:**
  * - to retain the selection visibility `drawSelection` extension is needed.
- * - highlighting starts from the cursor (if editor is focused, cursor moved,
- *   or `fromCursor` argument is set to `true`), or from last "current" match
- *   otherwise.
+ * - highlighting starts from the cursor (if editor is focused and `from` is set
+ *   to `'auto'`, cursor moved, or `from` argument is set to `'selection'` or
+ *   `'selection-start'`), or from last "current" match otherwise.
  * - `currentIndex` is the (readonly) source of truth for the current match.
  */
 export class CodeMirrorSearchHighlighter {
@@ -495,6 +554,8 @@ export class CodeMirrorSearchHighlighter {
           if (ef.is(this._highlightEffect)) {
             const e = ef as StateEffect<IEffectValue>;
             if (e.value.matches.length) {
+              // Note: nesting will vary; sometimes `.cm-searching` will be
+              // inside `.jp-current-match`, sometime the other way round.
               highlights = highlights.update({
                 add: e.value.matches.map(m =>
                   this._highlightMark.range(
@@ -525,6 +586,13 @@ export class CodeMirrorSearchHighlighter {
       },
       provide: f => EditorView.decorations.from(f)
     });
+
+    this._domEventHandlers = EditorView.domEventHandlers({
+      focus: () => {
+        // Set cursor on active match when editor gets focused.
+        this._selectCurrentMatch();
+      }
+    });
   }
 
   /**
@@ -548,11 +616,22 @@ export class CodeMirrorSearchHighlighter {
     ) {
       this._currentIndex = this._matches.length > 0 ? 0 : null;
     }
-    this._highlightCurrentMatch(true);
+    this._highlightCurrentMatch({ select: false });
   }
 
   private _current: ISearchMatch | null = null;
 
+  /**
+   * Whether the cursor/selection should not be modified.
+   */
+  get protectSelection(): boolean {
+    return this._protectSelection;
+  }
+  set protectSelection(v: boolean) {
+    this._protectSelection = v;
+  }
+  private _protectSelection: boolean;
+
   /**
    * Clear all highlighted matches
    */
@@ -583,11 +662,10 @@ export class CodeMirrorSearchHighlighter {
    * @returns The next match if available
    */
   highlightNext(
-    fromCursor = false,
-    doNotModifySelection = false
+    options?: IHighlightAdjacentMatchOptions
   ): Promise<ISearchMatch | undefined> {
-    this._currentIndex = this._findNext(false, fromCursor);
-    this._highlightCurrentMatch(doNotModifySelection);
+    this._currentIndex = this._findNext(false, options?.from ?? 'auto');
+    this._highlightCurrentMatch(options);
     return Promise.resolve(
       this._currentIndex !== null
         ? this._matches[this._currentIndex]
@@ -600,9 +678,11 @@ export class CodeMirrorSearchHighlighter {
    *
    * @returns The previous match if available
    */
-  highlightPrevious(fromCursor = false): Promise<ISearchMatch | undefined> {
-    this._currentIndex = this._findNext(true, fromCursor);
-    this._highlightCurrentMatch();
+  highlightPrevious(
+    options?: IHighlightAdjacentMatchOptions
+  ): Promise<ISearchMatch | undefined> {
+    this._currentIndex = this._findNext(true, options?.from ?? 'auto');
+    this._highlightCurrentMatch(options);
     return Promise.resolve(
       this._currentIndex !== null
         ? this._matches[this._currentIndex]
@@ -623,11 +703,24 @@ export class CodeMirrorSearchHighlighter {
       if (this._currentIndex !== null) {
         this._highlightCurrentMatch();
       }
+      this._cm.editor.dispatch({
+        effects: StateEffect.appendConfig.of(this._domEventHandlers)
+      });
       this._refresh();
     }
   }
 
-  private _selectCurrentMatch(): void {
+  private _selectCurrentMatch(scroll = true): void {
+    // This method has two responsibilities:
+    // 1) Scroll the current match into the view - useful for long lines,
+    //    and file editors with more lines that fit on the screen
+    // 2) When user has focus on the editor (not search box) and presses
+    //    ctrl + g/ctrl + shift + g to jump to next match they want their
+    //    cursor to jump too.
+    // We execute (1) and (2) together as CodeMirror has a special code path
+    // to handle both in a single dispatch.
+    // The (2) case is inapplicable to search in selection mode, as it would
+    // invalidate the query selection, so in that case we only execute (1).
     const match = this._current;
     if (!match) {
       return;
@@ -635,24 +728,35 @@ export class CodeMirrorSearchHighlighter {
     if (!this._cm) {
       return;
     }
-    const selection = this._cm.editor.state.selection.main;
-    if (
-      selection.from === match.position &&
-      selection.to === match.position + match.text.length
-    ) {
-      return;
-    }
     const cursor = {
       anchor: match.position,
       head: match.position + match.text.length
     };
-    this._cm.editor.dispatch({
-      selection: cursor,
-      scrollIntoView: true
-    });
+    const selection = this._cm.editor.state.selection.main;
+    if (
+      (selection.from === match.position &&
+        selection.to === match.position + match.text.length) ||
+      this._protectSelection
+    ) {
+      // Correct selection is already set or search is restricted to selection:
+      // scroll without changing the selection.
+      if (scroll) {
+        this._cm.editor.dispatch({
+          effects: EditorView.scrollIntoView(
+            EditorSelection.range(cursor.anchor, cursor.head)
+          )
+        });
+        return;
+      }
+    } else {
+      this._cm.editor.dispatch({
+        selection: cursor,
+        scrollIntoView: scroll
+      });
+    }
   }
 
-  private _highlightCurrentMatch(doNotModifySelection = false): void {
+  private _highlightCurrentMatch(options?: IHighlightMatchOptions): void {
     if (!this._cm) {
       // no-op
       return;
@@ -662,12 +766,14 @@ export class CodeMirrorSearchHighlighter {
     if (this._currentIndex !== null) {
       const match = this.matches[this._currentIndex];
       this._current = match;
-      // Do not change selection/scroll if user is selecting
-      if (!doNotModifySelection) {
+      // We do not change selection nor scroll if:
+      // - user is selecting text,
+      // - document was modified
+      if (options?.select ?? true) {
         if (this._cm.hasFocus()) {
           // If editor is focused we actually set the cursor on the match.
-          this._selectCurrentMatch();
-        } else {
+          this._selectCurrentMatch(options?.scroll ?? true);
+        } else if (options?.scroll ?? true) {
           // otherwise we just scroll to preserve the selection.
           this._cm.editor.dispatch({
             effects: EditorView.scrollIntoView(match.position)
@@ -694,27 +800,28 @@ export class CodeMirrorSearchHighlighter {
 
     if (!this._cm!.state.field(this._highlightField, false)) {
       effects.push(StateEffect.appendConfig.of([this._highlightField]));
-      // set cursor on active match when editor gets focused
-      const focusExtension = EditorView.domEventHandlers({
-        focus: () => {
-          this._selectCurrentMatch();
-        }
-      });
-      effects.push(StateEffect.appendConfig.of([focusExtension]));
     }
     this._cm!.editor.dispatch({ effects });
   }
 
-  private _findNext(reverse: boolean, fromCursor = false): number | null {
+  private _findNext(
+    reverse: boolean,
+    from: SearchStartAnchor = 'auto'
+  ): number | null {
     if (this._matches.length === 0) {
       // No-op
       return null;
     }
 
     let lastPosition = 0;
-    if (this._cm!.hasFocus() || fromCursor) {
+    if ((from === 'auto' && this._cm!.hasFocus()) || from === 'selection') {
       const cursor = this._cm!.state.selection.main;
       lastPosition = reverse ? cursor.anchor : cursor.head;
+    } else if (from === 'selection-start') {
+      const cursor = this._cm!.state.selection.main;
+      lastPosition = Math.min(cursor.anchor, cursor.head);
+    } else if (from === 'start') {
+      lastPosition = 0;
     } else if (this._current) {
       lastPosition = reverse
         ? this._current.position
@@ -757,6 +864,7 @@ export class CodeMirrorSearchHighlighter {
   private _highlightMark: Decoration;
   private _currentMark: Decoration;
   private _highlightField: StateField<DecorationSet>;
+  private _domEventHandlers: Extension;
 }
 
 /**

package/style/base.css

@@ -59,24 +59,28 @@
 
 .cm-searching,
 .cm-searching span {
+  /* `.cm-searching span`: we need to override syntax highlighting */
   background-color: var(--jp-search-unselected-match-background-color);
   color: var(--jp-search-unselected-match-color);
 }
 
-.cm-content .cm-searching::selection,
-.cm-content .cm-searching span::selection {
+.cm-searching::selection,
+.cm-searching span::selection {
   background-color: var(--jp-search-unselected-match-background-color);
   color: var(--jp-search-unselected-match-color);
 }
 
-.jp-current-match .cm-searching,
-.jp-current-match .cm-searching span {
+.jp-current-match > .cm-searching,
+.jp-current-match > .cm-searching span,
+.cm-searching > .jp-current-match,
+.cm-searching > .jp-current-match span {
   background-color: var(--jp-search-selected-match-background-color);
   color: var(--jp-search-selected-match-color);
 }
 
-.cm-content .jp-current-match .cm-searching::selection,
-.cm-content .jp-current-match .cm-searching span::selection {
+.jp-current-match > .cm-searching::selection,
+.cm-searching > .jp-current-match::selection,
+.jp-current-match > .cm-searching span::selection {
   background-color: var(--jp-search-selected-match-background-color);
   color: var(--jp-search-selected-match-color);
 }

package/lib/codemirror-ipythongfm.d.ts

@@ -1,9 +0,0 @@
-/**
- * Define an IPython GFM (GitHub Flavored Markdown) mode.
- *
- * Is just a slightly altered GFM Mode with support for LaTeX.
- * LaTeX support was supported by Codemirror GFM as of
- *   https://github.com/codemirror/CodeMirror/pull/567
- *  But was later removed in
- *   https://github.com/codemirror/CodeMirror/commit/d9c9f1b1ffe984aee41307f3e927f80d1f23590c
- */

package/lib/codemirror-ipythongfm.js

@@ -1,108 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-// TODO: add support for LaTeX
-// This should be coded as an extension for https://github.com/lezer-parser/markdown
-// see https://github.com/lezer-parser/markdown/blob/main/src/extension.ts for examples
-// Then this extension can be passed to the markdown function above:
-//
-// load: () => {
-//   return import('@codemirror/lang-markdown').then(m => m.markdown({extensions: latex}));
-// }
-/*import CodeMirror from 'codemirror';
-import 'codemirror/addon/mode/multiplex';
-import 'codemirror/mode/gfm/gfm';
-import 'codemirror/mode/stex/stex';
-*/
-/**
- * Define an IPython GFM (GitHub Flavored Markdown) mode.
- *
- * Is just a slightly altered GFM Mode with support for LaTeX.
- * LaTeX support was supported by Codemirror GFM as of
- *   https://github.com/codemirror/CodeMirror/pull/567
- *  But was later removed in
- *   https://github.com/codemirror/CodeMirror/commit/d9c9f1b1ffe984aee41307f3e927f80d1f23590c
- */
-/*CodeMirror.defineMode(
-  'ipythongfm',
-  (config: CodeMirror.EditorConfiguration, modeOptions?: any) => {
-    const gfmMode = CodeMirror.getMode(config, {
-      name: 'gfm',
-      // Override list3 with an under-used token, rather than `keyword`
-      tokenTypeOverrides: { list3: 'string-2' }
-    });
-    const texMode = CodeMirror.getMode(config, {
-      name: 'stex',
-      inMathMode: true
-    });
-
-    return CodeMirror.multiplexingMode(
-      gfmMode,
-      // force parsing inline code and code blocks with gfmMode to prevent
-      // parsing them as tex see:
-      // https://github.com/jupyterlab/jupyterlab/issues/6774
-      {
-        open: '<code>',
-        close: '</code>',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      {
-        open: '<pre>',
-        close: '</pre>',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      {
-        open: '```',
-        close: '```',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      {
-        open: '`',
-        close: '`',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      // only if we did not match a code element or block,
-      // then try do parse using the tex mode
-      {
-        open: '$$',
-        close: '$$',
-        mode: texMode,
-        delimStyle: 'delimit'
-      },
-      {
-        // `$math mode$` is only matched if both opening
-        // and closing $ are in the same line
-        open: /\$(?=.*\$)/,
-        close: '$',
-        mode: texMode,
-        delimStyle: 'delimit'
-      },
-      {
-        open: '\\(',
-        close: '\\)',
-        mode: texMode,
-        delimStyle: 'delimit'
-      },
-      {
-        open: '\\[',
-        close: '\\]',
-        mode: texMode,
-        delimStyle: 'delimit'
-      }
-      // .. more multiplexed styles can follow here
-    );
-  },
-  'gfm'
-);
-
-CodeMirror.defineMIME('text/x-ipythongfm', 'ipythongfm');
-CodeMirror.modeInfo.push({
-  ext: [],
-  mime: 'text/x-ipythongfm',
-  mode: 'ipythongfm',
-  name: 'ipythongfm'
-});*/
-//# sourceMappingURL=codemirror-ipythongfm.js.map

package/lib/codemirror-ipythongfm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"codemirror-ipythongfm.js","sourceRoot":"","sources":["../src/codemirror-ipythongfm.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,8BAA8B;AAC9B,oFAAoF;AACpF,uFAAuF;AACvF,oEAAoE;AACpE,EAAE;AACF,gBAAgB;AAChB,2FAA2F;AAC3F,IAAI;AAEJ;;;;EAIE;AACF;;;;;;;;GAQG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFK"}

package/src/codemirror-ipythongfm.ts

@@ -1,109 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-// TODO: add support for LaTeX
-// This should be coded as an extension for https://github.com/lezer-parser/markdown
-// see https://github.com/lezer-parser/markdown/blob/main/src/extension.ts for examples
-// Then this extension can be passed to the markdown function above:
-//
-// load: () => {
-//   return import('@codemirror/lang-markdown').then(m => m.markdown({extensions: latex}));
-// }
-
-/*import CodeMirror from 'codemirror';
-import 'codemirror/addon/mode/multiplex';
-import 'codemirror/mode/gfm/gfm';
-import 'codemirror/mode/stex/stex';
-*/
-/**
- * Define an IPython GFM (GitHub Flavored Markdown) mode.
- *
- * Is just a slightly altered GFM Mode with support for LaTeX.
- * LaTeX support was supported by Codemirror GFM as of
- *   https://github.com/codemirror/CodeMirror/pull/567
- *  But was later removed in
- *   https://github.com/codemirror/CodeMirror/commit/d9c9f1b1ffe984aee41307f3e927f80d1f23590c
- */
-/*CodeMirror.defineMode(
-  'ipythongfm',
-  (config: CodeMirror.EditorConfiguration, modeOptions?: any) => {
-    const gfmMode = CodeMirror.getMode(config, {
-      name: 'gfm',
-      // Override list3 with an under-used token, rather than `keyword`
-      tokenTypeOverrides: { list3: 'string-2' }
-    });
-    const texMode = CodeMirror.getMode(config, {
-      name: 'stex',
-      inMathMode: true
-    });
-
-    return CodeMirror.multiplexingMode(
-      gfmMode,
-      // force parsing inline code and code blocks with gfmMode to prevent
-      // parsing them as tex see:
-      // https://github.com/jupyterlab/jupyterlab/issues/6774
-      {
-        open: '<code>',
-        close: '</code>',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      {
-        open: '<pre>',
-        close: '</pre>',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      {
-        open: '```',
-        close: '```',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      {
-        open: '`',
-        close: '`',
-        mode: gfmMode,
-        parseDelimiters: true
-      },
-      // only if we did not match a code element or block,
-      // then try do parse using the tex mode
-      {
-        open: '$$',
-        close: '$$',
-        mode: texMode,
-        delimStyle: 'delimit'
-      },
-      {
-        // `$math mode$` is only matched if both opening
-        // and closing $ are in the same line
-        open: /\$(?=.*\$)/,
-        close: '$',
-        mode: texMode,
-        delimStyle: 'delimit'
-      },
-      {
-        open: '\\(',
-        close: '\\)',
-        mode: texMode,
-        delimStyle: 'delimit'
-      },
-      {
-        open: '\\[',
-        close: '\\]',
-        mode: texMode,
-        delimStyle: 'delimit'
-      }
-      // .. more multiplexed styles can follow here
-    );
-  },
-  'gfm'
-);
-
-CodeMirror.defineMIME('text/x-ipythongfm', 'ipythongfm');
-CodeMirror.modeInfo.push({
-  ext: [],
-  mime: 'text/x-ipythongfm',
-  mode: 'ipythongfm',
-  name: 'ipythongfm'
-});*/