@difizen/libro-search 0.0.2-alpha.0

package/src/libro-search-generic-provider.ts

@@ -0,0 +1,303 @@
+/* eslint-disable @typescript-eslint/no-loop-func */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { View } from '@difizen/mana-app';
+import { prop } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+
+import { AbstractSearchProvider } from './abstract-search-provider.js';
+import { searchInHTML } from './libro-search-engine-html.js';
+import type { HTMLSearchMatch } from './libro-search-protocol.js';
+import {
+  LIBRO_SEARCH_FOUND_CLASSES,
+  LIBRO_SEARCH_SELECTED_CLASSES,
+  SearchProviderOption,
+} from './libro-search-protocol.js';
+
+export type GenericSearchProviderFactory = (
+  option: SearchProviderOption,
+) => GenericSearchProvider;
+export const GenericSearchProviderFactory = Symbol('GenericSearchProviderFactory');
+/**
+ * Generic DOM tree search provider.
+ */
+@transient()
+export class GenericSearchProvider extends AbstractSearchProvider {
+  protected _query: RegExp | null;
+  protected _currentMatchIndex: number;
+  @prop() protected _matches: HTMLSearchMatch[] = [];
+  protected _mutationObserver: MutationObserver = new MutationObserver(
+    this._onWidgetChanged.bind(this),
+  );
+  protected _markNodes = new Array<HTMLSpanElement>();
+  /**
+   * Report whether or not this provider has the ability to search on the given object
+   */
+  static isApplicable(domain: View): boolean {
+    return !!domain.container?.current;
+  }
+
+  /**
+   * The current index of the selected match.
+   */
+  override get currentMatchIndex(): number | undefined {
+    return this._currentMatchIndex >= 0 ? this._currentMatchIndex : undefined;
+  }
+
+  /**
+   * The current match
+   */
+  get currentMatch(): HTMLSearchMatch | undefined {
+    return this._matches[this._currentMatchIndex] ?? undefined;
+  }
+
+  /**
+   * The current matches
+   */
+  get matches(): HTMLSearchMatch[] {
+    // Ensure that no other fn can overwrite matches index property
+    // We shallow clone each node
+    return this._matches
+      ? this._matches.map((m) => Object.assign({}, m))
+      : this._matches;
+  }
+
+  /**
+   * The number of matches.
+   */
+  override get matchesCount(): number | undefined {
+    return this._matches.length;
+  }
+
+  /**
+   * Set to true if the widget under search is read-only, false
+   * if it is editable.  Will be used to determine whether to show
+   * the replace option.
+   */
+  readonly isReadOnly = true;
+
+  constructor(@inject(SearchProviderOption) option: SearchProviderOption) {
+    super(option);
+  }
+  /**
+   * Clear currently highlighted match.
+   */
+  clearHighlight(): Promise<void> {
+    if (this._currentMatchIndex >= 0) {
+      const hit = this._markNodes[this._currentMatchIndex];
+      hit.classList.remove(...LIBRO_SEARCH_SELECTED_CLASSES);
+    }
+    this._currentMatchIndex = -1;
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Dispose of the resources held by the search provider.
+   *
+   * #### Notes
+   * If the object's `dispose` method is called more than once, all
+   * calls made after the first will be a no-op.
+   *
+   * #### Undefined Behavior
+   * It is undefined behavior to use any functionality of the object
+   * after it has been disposed unless otherwise explicitly noted.
+   */
+  override dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+
+    this.endQuery().catch((reason) => {
+      console.error(`Failed to end search query.`, reason);
+    });
+    super.dispose();
+  }
+
+  /**
+   * Move the current match indicator to the next match.
+   *
+   * @param loop Whether to loop within the matches list.
+   *
+   * @returns A promise that resolves once the action has completed.
+   */
+  async highlightNext(loop?: boolean): Promise<HTMLSearchMatch | undefined> {
+    return this._highlightNext(false, loop ?? true) ?? undefined;
+  }
+
+  /**
+   * Move the current match indicator to the previous match.
+   *
+   * @param loop Whether to loop within the matches list.
+   *
+   * @returns A promise that resolves once the action has completed.
+   */
+  async highlightPrevious(loop?: boolean): Promise<HTMLSearchMatch | undefined> {
+    return this._highlightNext(true, loop ?? true) ?? undefined;
+  }
+
+  /**
+   * Replace the currently selected match with the provided text
+   *
+   * @param newText The replacement text
+   * @param loop Whether to loop within the matches list.
+   *
+   * @returns A promise that resolves with a boolean indicating whether a replace occurred.
+   */
+  async replaceCurrentMatch(_newText: string, _loop?: boolean): Promise<boolean> {
+    return Promise.resolve(false);
+  }
+
+  /**
+   * Replace all matches in the notebook with the provided text
+   *
+   * @param newText The replacement text
+   *
+   * @returns A promise that resolves with a boolean indicating whether a replace occurred.
+   */
+  async replaceAllMatches(_newText: string): Promise<boolean> {
+    // This is read only, but we could loosen this in theory for input boxes...
+    return Promise.resolve(false);
+  }
+
+  /**
+   * Initialize the search using the provided options.  Should update the UI
+   * to highlight all matches and "select" whatever the first match should be.
+   *
+   * @param query A RegExp to be use to perform the search
+   * @param filters Filter parameters to pass to provider
+   */
+  startQuery = async (query: RegExp | null, _filters = {}): Promise<void> => {
+    await this.endQuery();
+    this._query = query;
+
+    if (query === null) {
+      return Promise.resolve();
+    }
+
+    const matches = this.view.container?.current
+      ? await searchInHTML(query, this.view.container?.current)
+      : [];
+
+    // Transform the DOM
+    let nodeIdx = 0;
+    while (nodeIdx < matches.length) {
+      const activeNode = matches[nodeIdx].node;
+      const parent = activeNode.parentNode!;
+
+      const subMatches = [matches[nodeIdx]];
+      while (++nodeIdx < matches.length && matches[nodeIdx].node === activeNode) {
+        subMatches.unshift(matches[nodeIdx]);
+      }
+
+      const markedNodes = subMatches.map((match) => {
+        // TODO: support tspan for svg when svg support is added
+        const markedNode = document.createElement('mark');
+        markedNode.classList.add(...LIBRO_SEARCH_FOUND_CLASSES);
+        markedNode.textContent = match.text;
+
+        const newNode = activeNode.splitText(match.position);
+        newNode.textContent = newNode.textContent!.slice(match.text.length);
+        parent.insertBefore(markedNode, newNode);
+        return markedNode;
+      });
+
+      // Insert node in reverse order as we replace from last to first
+      // to maintain match position.
+      for (let i = markedNodes.length - 1; i >= 0; i--) {
+        this._markNodes.push(markedNodes[i]);
+      }
+    }
+    if (this.view.container?.current) {
+      // Watch for future changes:
+      this._mutationObserver.observe(
+        this.view.container?.current,
+        // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
+        {
+          attributes: false,
+          characterData: true,
+          childList: true,
+          subtree: true,
+        },
+      );
+    }
+    this._matches = matches;
+  };
+
+  /**
+   * Clear the highlighted matches and any internal state.
+   */
+  async endQuery(): Promise<void> {
+    this._mutationObserver.disconnect();
+    this._markNodes.forEach((el) => {
+      const parent = el.parentNode!;
+      parent.replaceChild(document.createTextNode(el.textContent!), el);
+      parent.normalize();
+    });
+    this._markNodes = [];
+    this._matches = [];
+    this._currentMatchIndex = -1;
+  }
+
+  protected _highlightNext(reverse: boolean, loop: boolean): HTMLSearchMatch | null {
+    if (this._matches.length === 0) {
+      return null;
+    }
+    if (this._currentMatchIndex === -1) {
+      this._currentMatchIndex = reverse ? this.matches.length - 1 : 0;
+    } else {
+      const hit = this._markNodes[this._currentMatchIndex];
+      hit.classList.remove(...LIBRO_SEARCH_SELECTED_CLASSES);
+
+      this._currentMatchIndex = reverse
+        ? this._currentMatchIndex - 1
+        : this._currentMatchIndex + 1;
+      if (
+        loop &&
+        (this._currentMatchIndex < 0 || this._currentMatchIndex >= this._matches.length)
+      ) {
+        // Cheap way to make this a circular buffer
+        this._currentMatchIndex =
+          (this._currentMatchIndex + this._matches.length) % this._matches.length;
+      }
+    }
+
+    if (
+      this._currentMatchIndex >= 0 &&
+      this._currentMatchIndex < this._matches.length
+    ) {
+      const hit = this._markNodes[this._currentMatchIndex];
+      hit.classList.add(...LIBRO_SEARCH_SELECTED_CLASSES);
+      // If not in view, scroll just enough to see it
+      if (!elementInViewport(hit)) {
+        hit.scrollIntoView(reverse);
+      }
+      hit.focus();
+
+      return this._matches[this._currentMatchIndex];
+    } else {
+      this._currentMatchIndex = -1;
+      return null;
+    }
+  }
+
+  protected async _onWidgetChanged(
+    _mutations: MutationRecord[],
+    _observer: MutationObserver,
+  ) {
+    this._currentMatchIndex = -1;
+    // This is typically cheap, but we do not control the rate of change or size of the output
+    await this.startQuery(this._query);
+    this._stateChanged.fire();
+  }
+}
+function elementInViewport(el: HTMLElement): boolean {
+  const boundingClientRect = el.getBoundingClientRect();
+  return (
+    boundingClientRect.top >= 0 &&
+    boundingClientRect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    boundingClientRect.left >= 0 &&
+    boundingClientRect.right <=
+      (window.innerWidth || document.documentElement.clientWidth)
+  );
+}

package/src/libro-search-manager.ts

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  LibroCommandRegister,
+  LibroExtensionSlotContribution,
+} from '@difizen/libro-core';
+import type {
+  LibroExtensionSlotFactory,
+  LibroSlot,
+  LibroView,
+} from '@difizen/libro-core';
+import type { CommandRegistry, KeybindingRegistry } from '@difizen/mana-app';
+import {
+  ViewManager,
+  CommandContribution,
+  KeybindingContribution,
+} from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { LibroSearchView } from './libro-search-view.js';
+
+export const LibroSearchToggleCommand = {
+  ShowLibroSearch: {
+    id: 'libro-search:toggle',
+    keybind: 'ctrlcmd+F',
+  },
+  // LibroSearchToggle: {
+  //   id: 'libro-search:toogle',
+  //   keybind: 'ctrlcmd+F',
+  // },
+};
+
+@singleton({
+  contrib: [
+    CommandContribution,
+    KeybindingContribution,
+    LibroExtensionSlotContribution,
+  ],
+})
+export class LibroSearchManager
+  implements
+    CommandContribution,
+    KeybindingContribution,
+    LibroExtensionSlotContribution
+{
+  @inject(ViewManager) viewManager: ViewManager;
+  @inject(LibroCommandRegister) libroCommandRegister: LibroCommandRegister;
+  protected viewMap: Map<string, LibroSearchView> = new Map();
+
+  public readonly slot: LibroSlot = 'container';
+  registerKeybindings(keybindings: KeybindingRegistry): void {
+    this.libroCommandRegister.registerKeybinds(
+      keybindings,
+      LibroSearchToggleCommand,
+      false,
+      false,
+    );
+  }
+  registerCommands(commands: CommandRegistry) {
+    this.libroCommandRegister.registerLibroCommand(
+      commands,
+      LibroSearchToggleCommand.ShowLibroSearch,
+      {
+        execute: (_cell, libro, _position) => {
+          if (libro) {
+            this.showSearchView(libro);
+          }
+        },
+      },
+    );
+  }
+  factory: LibroExtensionSlotFactory = async (libro: LibroView) => {
+    const view = await this.viewManager.getOrCreateView(LibroSearchView, {
+      parentId: libro.id,
+    });
+    view.libro = libro;
+    this.viewMap.set(libro.id, view);
+    view.onDisposed(() => {
+      this.viewMap.delete(libro.id);
+    });
+    return view;
+  };
+
+  showSearchView = (libro: LibroView) => {
+    this.viewMap.get(libro.id)?.show();
+  };
+}

package/src/libro-search-model.ts

@@ -0,0 +1,266 @@
+import type { Disposable } from '@difizen/mana-app';
+import { DisposableCollection, Emitter } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+import debounce from 'lodash.debounce';
+
+import type { SearchProvider } from './libro-search-protocol.js';
+import type { SearchFilter, SearchFilters } from './libro-search-protocol.js';
+import { LibroSearchUtils } from './libro-search-utils.js';
+
+/**
+ * Search in a document model.
+ */
+@singleton()
+export class LibroSearchModel implements Disposable {
+  utils: LibroSearchUtils;
+  protected _disposed?: boolean = false;
+  protected _caseSensitive = false;
+  protected parsingError = '';
+  protected _filters: SearchFilters = {
+    searchCellOutput: true,
+    onlySearchSelectedCells: false,
+  };
+  protected _replaceText = '';
+  protected searchDebouncer: any;
+  protected _searchExpression = '';
+  protected _useRegex = false;
+  protected disposedEmitter = new Emitter<void>();
+  protected searchProvider: SearchProvider;
+  protected toDispose = new DisposableCollection();
+  get onDisposed() {
+    return this.disposedEmitter.event;
+  }
+
+  get disposed() {
+    return !!this._disposed;
+  }
+  /**
+   * Search document model
+   * @param searchProvider Provider for the current document
+   * @param searchDebounceTime Debounce search time
+   */
+  constructor(
+    @inject(LibroSearchUtils) utils: LibroSearchUtils,
+    searchProvider: SearchProvider,
+    searchDebounceTime: number,
+  ) {
+    this.utils = utils;
+    this.searchProvider = searchProvider;
+    // this._filters = {};
+    // if (this.searchProvider.getFilters) {
+    //   const filters = this.searchProvider.getFilters();
+    //   for (const filter in filters) {
+    //     this._filters[filter] = filters[filter].default;
+    //   }
+    // }
+
+    this.toDispose.push(searchProvider.stateChanged(this.refresh));
+
+    this.searchDebouncer = debounce(() => {
+      this.updateSearch().catch((reason) => {
+        console.error('Failed to update search on document.', reason);
+      });
+    }, searchDebounceTime);
+  }
+
+  /**
+   * Whether the search is case sensitive or not.
+   */
+  get caseSensitive(): boolean {
+    return this._caseSensitive;
+  }
+  set caseSensitive(v: boolean) {
+    if (this._caseSensitive !== v) {
+      this._caseSensitive = v;
+      this.refresh();
+    }
+  }
+
+  /**
+   * Current highlighted match index.
+   */
+  get currentIndex(): number | undefined {
+    return this.searchProvider.currentMatchIndex;
+  }
+
+  /**
+   * Filter values.
+   */
+  get filters(): SearchFilters {
+    return this._filters;
+  }
+
+  /**
+   * Filter definitions for the current provider.
+   */
+  get filtersDefinition(): Record<string, SearchFilter> {
+    return this.searchProvider.getFilters?.() ?? {};
+  }
+
+  /**
+   * The initial query string.
+   */
+  get initialQuery(): string {
+    if (!this.searchProvider.getInitialQuery) {
+      return this._searchExpression;
+    }
+    return this._searchExpression || this.searchProvider.getInitialQuery();
+  }
+
+  /**
+   * Whether the document is read-only or not.
+   */
+  get isReadOnly(): boolean {
+    return this.searchProvider.isReadOnly;
+  }
+
+  /**
+   * Replacement expression
+   */
+  get replaceText(): string {
+    return this._replaceText;
+  }
+  set replaceText(v: string) {
+    if (this._replaceText !== v) {
+      this._replaceText = v;
+    }
+  }
+
+  /**
+   * Search expression
+   */
+  get searchExpression(): string {
+    return this._searchExpression;
+  }
+  set searchExpression(v: string) {
+    if (this._searchExpression !== v) {
+      this._searchExpression = v;
+      this.refresh();
+    }
+  }
+
+  /**
+   * Total number of matches.
+   */
+  get totalMatches(): number | undefined {
+    return this.searchProvider.matchesCount;
+  }
+
+  /**
+   * Whether to use regular expression or not.
+   */
+  get useRegex(): boolean {
+    return this._useRegex;
+  }
+  set useRegex(v: boolean) {
+    if (this._useRegex !== v) {
+      this._useRegex = v;
+      this.refresh();
+    }
+  }
+
+  /**
+   * Dispose the model.
+   */
+  dispose(): void {
+    if (this.disposed) {
+      return;
+    }
+    if (this._searchExpression) {
+      this.endQuery().catch((reason) => {
+        console.error(`Failed to end query '${this._searchExpression}.`, reason);
+      });
+    }
+    this.toDispose.dispose();
+    this.searchDebouncer.dispose();
+    this._disposed = true;
+  }
+
+  /**
+   * End the query.
+   */
+  async endQuery(): Promise<void> {
+    await this.searchProvider.endQuery();
+  }
+
+  /**
+   * Highlight the next match.
+   */
+  async highlightNext(): Promise<void> {
+    await this.searchProvider.highlightNext();
+  }
+
+  /**
+   * Highlight the previous match
+   */
+  async highlightPrevious(): Promise<void> {
+    await this.searchProvider.highlightPrevious();
+  }
+
+  /**
+   * Refresh search
+   */
+  refresh(): void {
+    this.searchDebouncer.invoke().catch((reason: any) => {
+      console.error('Failed to invoke search document debouncer.', reason);
+    });
+  }
+
+  /**
+   * Replace all matches.
+   */
+  async replaceAllMatches(): Promise<void> {
+    await this.searchProvider.replaceAllMatches(this._replaceText);
+    // Emit state change as the index needs to be updated
+  }
+
+  /**
+   * Replace the current match.
+   */
+  async replaceCurrentMatch(): Promise<void> {
+    await this.searchProvider.replaceCurrentMatch(this._replaceText);
+  }
+
+  /**
+   * Set the value of a given filter.
+   *
+   * @param name Filter name
+   * @param v Filter value
+   */
+  async setFilter(_name: string, _v: boolean): Promise<void> {
+    // if (this._filters[name] !== v) {
+    //   if (this.searchProvider.validateFilter) {
+    //     this._filters[name] = await this.searchProvider.validateFilter(name, v);
+    //     // If the value was changed
+    //     if (this._filters[name] === v) {
+    //       this.refresh();
+    //     }
+    //   } else {
+    //     this._filters[name] = v;
+    //     this.refresh();
+    //   }
+    // }
+  }
+
+  protected async updateSearch(): Promise<void> {
+    if (this.parsingError) {
+      this.parsingError = '';
+    }
+    try {
+      const query = this.searchExpression
+        ? this.utils.parseQuery(
+            this.searchExpression,
+            this.caseSensitive,
+            this.useRegex,
+          )
+        : null;
+      if (query) {
+        await this.searchProvider.startQuery(query, this._filters);
+        // Emit state change as the index needs to be updated
+      }
+    } catch (reason: any) {
+      this.parsingError = reason.toString();
+      console.error(`Failed to parse expression ${this.searchExpression}`, reason);
+    }
+  }
+}