@difizen/libro-search-code-cell 0.1.2

package/src/code-editor-cell-search-provider.ts

@@ -0,0 +1,377 @@
+import type { LibroCodeCellView } from '@difizen/libro-code-cell';
+import type { IPosition, SearchMatch } from '@difizen/libro-code-editor';
+import type { BaseSearchProvider, SearchFilters } from '@difizen/libro-search';
+import { searchText } from '@difizen/libro-search';
+import type { Event } from '@difizen/mana-app';
+import { prop } from '@difizen/mana-app';
+import { DisposableCollection, Emitter } from '@difizen/mana-app';
+import { watch } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+
+import type { CodeEditorSearchHighlighter } from './code-cell-search-protocol.js';
+import { CodeEditorSearchHighlighterFactory } from './code-cell-search-protocol.js';
+/**
+ * Search provider for cells.
+ */
+@transient()
+export class CodeEditorCellSearchProvider implements BaseSearchProvider {
+  protected toDispose = new DisposableCollection();
+  /**
+   * CodeMirror search highlighter
+   */
+  @prop() protected editorHighlighter: CodeEditorSearchHighlighter;
+  /**
+   * Current match index
+   */
+  @prop() protected currentIndex: number | undefined = undefined;
+  /**
+   * Current search filters
+   */
+  @prop() protected filters: SearchFilters | undefined;
+  /**
+   * Current search query
+   */
+  protected query: RegExp | null = null;
+  // Needs to be protected so subclass can emit the signal too.
+  protected stateChangedEmitter: Emitter<void>;
+  protected _isActive = true;
+  protected _isDisposed = false;
+  protected lastReplacementPosition: IPosition | null = null;
+  protected highlighterFactory: CodeEditorSearchHighlighterFactory;
+  protected cell: LibroCodeCellView;
+  /**
+   * Constructor
+   *
+   * @param cell Cell widget
+   */
+  constructor(
+    @inject(CodeEditorSearchHighlighterFactory)
+    highlighterFactory: CodeEditorSearchHighlighterFactory,
+    cell: LibroCodeCellView,
+  ) {
+    this.cell = cell;
+    this.highlighterFactory = highlighterFactory;
+    this.currentIndex = undefined;
+    this.stateChangedEmitter = new Emitter<void>();
+    this.toDispose.push(this.stateChangedEmitter);
+    this.editorHighlighter = this.highlighterFactory(this.cell.editor);
+
+    this.toDispose.push(watch(this.cell.model, 'value', this.updateMatches));
+    this.toDispose.push(
+      watch(this.cell, 'editor', async () => {
+        await this.cell.editorReady;
+        if (this.cell.hasInputHidden === true) {
+          this.endQuery();
+        } else {
+          this.startQuery(this.query, this.filters);
+        }
+      }),
+    );
+  }
+
+  /**
+   * Get an initial query value if applicable so that it can be entered
+   * into the search box as an initial query
+   *
+   * @returns Initial value used to populate the search box.
+   */
+  getInitialQuery(): string {
+    const selection = this.cell?.editor?.getSelectionValue();
+    // if there are newlines, just return empty string
+    return selection?.search(/\r?\n|\r/g) === -1 ? selection : '';
+  }
+
+  get disposed() {
+    return this._isDisposed;
+  }
+
+  protected async setEditor() {
+    await this.cell.editorReady;
+    if (this.cell.editor) {
+      this.editorHighlighter.setEditor(this.cell.editor);
+    }
+  }
+
+  /**
+   * Changed signal to be emitted when search matches change.
+   */
+  get stateChanged(): Event<void> {
+    return this.stateChangedEmitter.event;
+  }
+
+  /**
+   * Current match index
+   */
+  get currentMatchIndex(): number | undefined {
+    return this.isActive ? this.currentIndex : undefined;
+  }
+
+  /**
+   * Whether the cell search is active.
+   *
+   * This is used when applying search only on selected cells.
+   */
+  get isActive(): boolean {
+    return this._isActive;
+  }
+
+  /**
+   * Whether the search provider is disposed or not.
+   */
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+
+  /**
+   * Number of matches in the cell.
+   */
+  get matchesCount(): number {
+    return this.isActive ? this.editorHighlighter.matches.length : 0;
+  }
+
+  get isCellSelected(): boolean {
+    return this.cell.parent.isSelected(this.cell);
+  }
+
+  /**
+   * Clear currently highlighted match
+   */
+  clearHighlight(): Promise<void> {
+    this.currentIndex = undefined;
+    this.editorHighlighter.clearHighlight();
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Dispose the search provider
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this.toDispose.dispose();
+    this._isDisposed = true;
+    if (this.isActive) {
+      this.endQuery().catch((reason) => {
+        console.error(`Failed to end search query on cells.`, reason);
+      });
+    }
+  }
+
+  /**
+   * Set `isActive` status.
+   *
+   * #### Notes
+   * It will start or end the search
+   *
+   * @param v New value
+   */
+  async setIsActive(v: boolean): Promise<void> {
+    if (this.isActive !== v) {
+      this._isActive = v;
+    }
+    if (this.isActive) {
+      if (this.query !== null) {
+        await this.startQuery(this.query, this.filters);
+      }
+    } else {
+      await this.endQuery();
+    }
+  }
+
+  /**
+   * Initialize the search using the provided options. Should update the UI
+   * to highlight all matches and "select" the first match.
+   *
+   * @param query A RegExp to be use to perform the search
+   * @param filters Filter parameters to pass to provider
+   */
+  async startQuery(query: RegExp | null, filters?: SearchFilters): Promise<void> {
+    this.query = query;
+    this.filters = filters;
+    if (this.cell.hasInputHidden) {
+      return;
+    }
+    await this.setEditor();
+    // Search input
+    await this.updateMatches();
+  }
+
+  /**
+   * Stop the search and clean any UI elements.
+   */
+  async endQuery(): Promise<void> {
+    this.currentIndex = undefined;
+    this.query = null;
+    await this.editorHighlighter.endQuery();
+  }
+
+  /**
+   * Highlight the next match.
+   *
+   * @returns The next match if there is one.
+   */
+  async highlightNext(): Promise<SearchMatch | undefined> {
+    if (this.matchesCount === 0 || !this.isActive) {
+      this.currentIndex = undefined;
+    } else {
+      if (this.lastReplacementPosition) {
+        this.cell.editor?.setCursorPosition(this.lastReplacementPosition);
+        this.lastReplacementPosition = null;
+      }
+
+      // This starts from the cursor position
+      const match = await this.editorHighlighter.highlightNext();
+
+      if (match) {
+        this.currentIndex = this.editorHighlighter.currentIndex;
+      } else {
+        this.currentIndex = undefined;
+      }
+      return match;
+    }
+
+    return Promise.resolve(this.getCurrentMatch());
+  }
+
+  /**
+   * Highlight the previous match.
+   *
+   * @returns The previous match if there is one.
+   */
+  async highlightPrevious(): Promise<SearchMatch | undefined> {
+    if (this.matchesCount === 0 || !this.isActive) {
+      this.currentIndex = undefined;
+    } else {
+      // This starts from the cursor position
+      const match = await this.editorHighlighter.highlightPrevious();
+      if (match) {
+        this.currentIndex = this.editorHighlighter.currentIndex;
+      } else {
+        this.currentIndex = undefined;
+      }
+      return match;
+    }
+
+    return Promise.resolve(this.getCurrentMatch());
+  }
+
+  /**
+   * Replace the currently selected match with the provided text.
+   *
+   * If no match is selected, it won't do anything.
+   *
+   * @param newText The replacement text.
+   * @returns Whether a replace occurred.
+   */
+  replaceCurrentMatch(newText: string): Promise<boolean> {
+    if (!this.isActive) {
+      return Promise.resolve(false);
+    }
+
+    let occurred = false;
+
+    if (
+      this.currentIndex !== undefined &&
+      this.currentIndex < this.editorHighlighter.matches.length
+    ) {
+      const editor = this.cell.editor;
+      const selection = editor?.getSelectionValue();
+      const match = this.getCurrentMatch();
+      if (!match) {
+        return Promise.resolve(occurred);
+      }
+      // If cursor is not on a selection, highlight the next match
+      if (selection !== match?.text) {
+        this.currentIndex = undefined;
+        // The next will be highlighted as a consequence of this returning false
+      } else {
+        this.editorHighlighter.matches.splice(this.currentIndex, 1);
+        this.currentIndex = undefined;
+        // Store the current position to highlight properly the next search hit
+        this.lastReplacementPosition = editor?.getCursorPosition() ?? null;
+        editor?.replaceSelection(newText, {
+          start: editor.getPositionAt(match.position)!,
+          end: editor.getPositionAt(match.position + match.text.length)!,
+        });
+        occurred = true;
+      }
+    }
+    return Promise.resolve(occurred);
+  }
+
+  /**
+   * Replace all matches in the cell source with the provided text
+   *
+   * @param newText The replacement text.
+   * @returns Whether a replace occurred.
+   */
+  replaceAllMatches = (newText: string): Promise<boolean> => {
+    if (!this.isActive) {
+      return Promise.resolve(false);
+    }
+
+    const occurred = this.editorHighlighter.matches.length > 0;
+    // const src = this.cell.model.value;
+    // let lastEnd = 0;
+    // const finalSrc = this.cmHandler.matches.reduce((agg, match) => {
+    //   const start = match.position as number;
+    //   const end = start + match.text.length;
+    //   const newStep = `${agg}${src.slice(lastEnd, start)}${newText}`;
+    //   lastEnd = end;
+    //   return newStep;
+    // }, '');
+
+    const editor = this.cell.editor;
+    if (occurred && editor) {
+      const changes = this.editorHighlighter.matches.map((match) => ({
+        range: {
+          start: editor.getPositionAt(match.position)!,
+          end: editor.getPositionAt(match.position + match.text.length)!,
+        },
+        text: newText,
+      }));
+      editor?.replaceSelections(changes);
+      this.editorHighlighter.matches = [];
+      this.currentIndex = undefined;
+      // this.cell.model.setSource(`${finalSrc}${src.slice(lastEnd)}`);
+    }
+    return Promise.resolve(occurred);
+  };
+
+  /**
+   * Get the current match if it exists.
+   *
+   * @returns The current match
+   */
+  protected getCurrentMatch(): SearchMatch | undefined {
+    if (this.currentIndex === undefined) {
+      return undefined;
+    } else {
+      let match: SearchMatch | undefined = undefined;
+      if (this.currentIndex < this.editorHighlighter.matches.length) {
+        match = this.editorHighlighter.matches[this.currentIndex];
+      }
+      return match;
+    }
+  }
+
+  protected updateMatches = async () => {
+    if (this.query !== null) {
+      if (this.isActive) {
+        const matches = await searchText(this.query, this.cell.model.value);
+        this.editorHighlighter.matches = matches;
+        if (this.isCellSelected) {
+          const cursorOffset = this.cell.editor!.getOffsetAt(
+            this.cell.editor?.getCursorPosition() ?? { column: 0, line: 0 },
+          );
+          const index = matches.findIndex((item) => item.position >= cursorOffset);
+          this.currentIndex = index;
+        }
+      } else {
+        this.editorHighlighter.matches = [];
+      }
+    }
+  };
+}

package/src/index.spec.ts

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+import assert from 'assert';
+
+import { SearchCodeCellModule } from './index.js';
+
+describe('libro-search-code-cell', () => {
+  it('#import', () => {
+    assert(SearchCodeCellModule);
+  });
+});

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './code-cell-search-protocol.js';
+export * from './code-cell-search-provider.js';
+export * from './code-editor-cell-search-provider.js';
+export * from './module.js';

package/src/module.ts

@@ -0,0 +1,46 @@
+import type { IEditor } from '@difizen/libro-code-editor';
+import { LibroSearchModule } from '@difizen/libro-search';
+import { ManaModule } from '@difizen/mana-app';
+
+import {
+  CodeCellSearchOption,
+  CodeCellSearchProviderFactory,
+  CodeEditorSearchHighlighterFactory,
+} from './code-cell-search-protocol.js';
+import { CodeCellSearchProviderContribution } from './code-cell-search-provider-contribution.js';
+import { CodeCellSearchProvider } from './code-cell-search-provider.js';
+import { GenericSearchHighlighter } from './search-highlighter.js';
+
+export const SearchCodeCellModule = ManaModule.create()
+  .register(
+    CodeCellSearchProvider,
+    CodeCellSearchProviderContribution,
+    CodeCellSearchProviderFactory,
+    GenericSearchHighlighter,
+    {
+      token: CodeEditorSearchHighlighterFactory,
+      useFactory: (ctx) => {
+        return (editor: IEditor) => {
+          const child = ctx.container.createChild();
+          const highlighter = child.get(GenericSearchHighlighter);
+          highlighter.setEditor(editor);
+          return highlighter;
+        };
+      },
+    },
+    {
+      token: CodeCellSearchProviderFactory,
+      useFactory: (ctx) => {
+        return (options: CodeCellSearchOption) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: CodeCellSearchOption,
+            useValue: options,
+          });
+          const model = child.get(CodeCellSearchProvider);
+          return model;
+        };
+      },
+    },
+  )
+  .dependOn(LibroSearchModule);

package/src/search-highlighter.ts

@@ -0,0 +1,207 @@
+/* eslint-disable no-param-reassign */
+import type { IEditor, SearchMatch } from '@difizen/libro-code-editor';
+import { deepEqual } from '@difizen/libro-common';
+import { LibroSearchUtils } from '@difizen/libro-search';
+import { prop } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+
+import type { CodeEditorSearchHighlighter } from './code-cell-search-protocol.js';
+
+/**
+ * Helper class to highlight texts in a code mirror editor.
+ *
+ * Highlighted texts (aka `matches`) must be provided through
+ * the `matches` attributes.
+ */
+@transient()
+export class GenericSearchHighlighter implements CodeEditorSearchHighlighter {
+  @inject(LibroSearchUtils) utils: LibroSearchUtils;
+
+  protected editor: IEditor | undefined;
+  @prop() _currentIndex: number | undefined;
+  @prop() protected _matches: SearchMatch[];
+
+  /**
+   * The list of matches
+   */
+  get matches(): SearchMatch[] {
+    return this._matches;
+  }
+  set matches(v: SearchMatch[]) {
+    if (!deepEqual(this._matches as any, v as any)) {
+      this._matches = v;
+    }
+    this.refresh();
+  }
+
+  get currentIndex(): number | undefined {
+    return this._currentIndex;
+  }
+  set currentIndex(v: number | undefined) {
+    this._currentIndex = v;
+    this.refresh();
+  }
+
+  /**
+   * Constructor
+   *
+   * @param editor The CodeMirror editor
+   */
+  constructor() {
+    this._matches = new Array<SearchMatch>();
+    this.currentIndex = undefined;
+  }
+
+  /**
+   * Clear all highlighted matches
+   */
+  clearHighlight(): void {
+    this.currentIndex = undefined;
+    this._highlightCurrentMatch();
+  }
+
+  /**
+   * Clear the highlighted matches.
+   */
+  endQuery(): Promise<void> {
+    this._currentIndex = undefined;
+    this._matches = [];
+
+    if (this.editor) {
+      this.editor.highlightMatches([], undefined);
+
+      const selection = this.editor.getSelection();
+
+      const start = this.editor.getOffsetAt(selection.start);
+      const end = this.editor.getOffsetAt(selection.end);
+
+      // Setting a reverse selection to allow search-as-you-type to maintain the
+      // current selected match. See comment in _findNext for more details.
+      if (start !== end) {
+        this.editor.setSelection(selection);
+      }
+    }
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Highlight the next match
+   *
+   * @returns The next match if available
+   */
+  highlightNext(): Promise<SearchMatch | undefined> {
+    this.currentIndex = this._findNext(false);
+    this._highlightCurrentMatch();
+    return Promise.resolve(
+      this.currentIndex !== undefined ? this._matches[this.currentIndex] : undefined,
+    );
+  }
+
+  /**
+   * Highlight the previous match
+   *
+   * @returns The previous match if available
+   */
+  highlightPrevious(): Promise<SearchMatch | undefined> {
+    this.currentIndex = this._findNext(true);
+    this._highlightCurrentMatch();
+    return Promise.resolve(
+      this.currentIndex !== undefined ? this._matches[this.currentIndex] : undefined,
+    );
+  }
+
+  /**
+   * Set the editor
+   *
+   * @param editor Editor
+   */
+  setEditor(editor: IEditor): void {
+    this.editor = editor;
+    this.refresh();
+    if (this.currentIndex !== undefined) {
+      this._highlightCurrentMatch();
+    }
+  }
+
+  protected _highlightCurrentMatch(): void {
+    if (!this.editor) {
+      // no-op
+      return;
+    }
+
+    // Highlight the current index
+    if (this.currentIndex !== undefined) {
+      const match = this.matches[this.currentIndex];
+      // this.cm.editor.focus();
+      const start = this.editor.getPositionAt(match.position);
+      const end = this.editor.getPositionAt(match.position + match.text.length);
+      if (start && end) {
+        this.editor.setSelection({ start, end });
+        this.editor.revealSelection({ start, end });
+      }
+    } else {
+      const start = this.editor.getPositionAt(0)!;
+      const end = this.editor.getPositionAt(0)!;
+      // Set cursor to remove any selection
+      this.editor.setSelection({ start, end });
+    }
+  }
+
+  protected refresh(): void {
+    if (!this.editor) {
+      // no-op
+      return;
+    }
+    this.editor.highlightMatches(this.matches, this.currentIndex);
+  }
+
+  protected _findNext(reverse: boolean): number | undefined {
+    if (this.matches.length === 0) {
+      // No-op
+      return undefined;
+    }
+    if (!this.editor) {
+      return;
+    }
+    // In order to support search-as-you-type, we needed a way to allow the first
+    // match to be selected when a search is started, but prevent the selected
+    // search to move for each new keypress.  To do this, when a search is ended,
+    // the cursor is reversed, putting the head at the 'from' position.  When a new
+    // search is started, the cursor we want is at the 'from' position, so that the same
+    // match is selected when the next key is entered (if it is still a match).
+    //
+    // When toggling through a search normally, the cursor is always set in the forward
+    // direction, so head is always at the 'to' position.  That way, if reverse = false,
+    // the search proceeds from the 'to' position during normal toggling.  If reverse = true,
+    // the search always proceeds from the 'anchor' position, which is at the 'from'.
+
+    const selection = this.editor?.getSelection();
+
+    const start = this.editor?.getOffsetAt(selection.start);
+    const end = this.editor.getOffsetAt(selection.end);
+    let lastPosition = reverse ? start : end;
+    if (lastPosition === 0 && reverse && this.currentIndex === undefined) {
+      // The default position is (0, 0) but we want to start from the end in that case
+      lastPosition = this.editor.model.value.length;
+    }
+
+    const position = lastPosition;
+
+    let found = this.utils.findNext(this.matches, position, 0, this.matches.length - 1);
+    if (found === undefined) {
+      // Don't loop
+      return reverse ? this.matches.length - 1 : undefined;
+    }
+
+    if (reverse) {
+      found -= 1;
+      if (found < 0) {
+        // Don't loop
+        return undefined;
+      }
+    }
+
+    return found;
+  }
+}