@difizen/libro-search 0.0.2-alpha.0

package/es/module.js

@@ -0,0 +1,35 @@
+import { ManaModule } from '@difizen/mana-app';
+import "./index.less";
+import { LibroCellSearchProvider } from "./libro-cell-search-provider.js";
+import { GenericSearchProvider, GenericSearchProviderFactory } from "./libro-search-generic-provider.js";
+import { LibroSearchManager } from "./libro-search-manager.js";
+import { LibroSearchModel } from "./libro-search-model.js";
+import { CellSearchProviderContribution, SearchProviderOption } from "./libro-search-protocol.js";
+import { LibroSearchProvider, LibroSearchProviderFactory } from "./libro-search-provider.js";
+import { LibroSearchUtils } from "./libro-search-utils.js";
+import { LibroSearchView } from "./libro-search-view.js";
+export var LibroSearchModule = ManaModule.create().register(LibroSearchUtils, LibroSearchManager, LibroSearchView, GenericSearchProvider, LibroSearchModel, LibroSearchProvider, LibroCellSearchProvider, LibroSearchUtils, {
+  token: GenericSearchProviderFactory,
+  useFactory: function useFactory(ctx) {
+    return function (option) {
+      var child = ctx.container.createChild();
+      child.register({
+        token: SearchProviderOption,
+        useValue: option
+      });
+      return child.get(GenericSearchProvider);
+    };
+  }
+}, {
+  token: LibroSearchProviderFactory,
+  useFactory: function useFactory(ctx) {
+    return function (option) {
+      var child = ctx.container.createChild();
+      child.register({
+        token: SearchProviderOption,
+        useValue: option
+      });
+      return child.get(LibroSearchProvider);
+    };
+  }
+}).contribution(CellSearchProviderContribution);

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@difizen/libro-search",
+  "version": "0.0.2-alpha.0",
+  "description": "",
+  "keywords": [
+    "libro",
+    "notebook"
+  ],
+  "repository": "git@github.com:difizen/libro.git",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "typings": "./es/index.d.ts",
+      "default": "./es/index.js"
+    },
+    "./mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./es/mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "src"
+  ],
+  "dependencies": {
+    "@difizen/mana-app": "alpha",
+    "@difizen/mana-l10n": "alpha",
+    "@ant-design/icons": "^5.1.0",
+    "@difizen/libro-common": "^0.0.2-alpha.0",
+    "@difizen/libro-core": "^0.0.2-alpha.0",
+    "@types/lodash.debounce": "^4.0.7",
+    "classnames": "^2.3.2",
+    "lodash.debounce": "^4.0.8",
+    "reflect-metadata": "^0.1.13"
+  },
+  "peerDependencies": {
+    "antd": "^5.8.6",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.25"
+  },
+  "scripts": {
+    "setup": "father build",
+    "build": "father build",
+    "test": ": Note: lint task is delegated to test:* scripts",
+    "test:vitest": "vitest run",
+    "test:jest": "jest",
+    "coverage": ": Note: lint task is delegated to coverage:* scripts",
+    "coverage:vitest": "vitest run --coverage",
+    "coverage:jest": "jest --coverage",
+    "lint": ": Note: lint task is delegated to lint:* scripts",
+    "lint:eslint": "eslint src",
+    "lint:tsc": "tsc --noEmit"
+  }
+}

package/src/abstract-search-provider.ts

@@ -0,0 +1,160 @@
+import type { Event } from '@difizen/mana-app';
+import type { View } from '@difizen/mana-app';
+import { Emitter } from '@difizen/mana-app';
+import { transient } from '@difizen/mana-app';
+
+import type {
+  SearchFilter,
+  SearchFilters,
+  SearchMatch,
+  SearchProvider,
+} from './libro-search-protocol.js';
+
+/**
+ * Abstract class implementing the search provider interface.
+ */
+@transient()
+export abstract class AbstractSearchProvider implements SearchProvider {
+  // Needs to be protected so subclass can emit the signal too.
+  protected _stateChanged: Emitter<void> = new Emitter();
+  protected _disposed = false;
+  protected view: View;
+  get disposed(): boolean {
+    return this._disposed;
+  }
+  /**
+   * Constructor
+   */
+  constructor(option: { view: View }) {
+    this.view = option.view;
+  }
+
+  /**
+   * Signal indicating that something in the search has changed, so the UI should update
+   */
+  get stateChanged(): Event<void> {
+    return this._stateChanged.event;
+  }
+
+  /**
+   * The current index of the selected match.
+   */
+  get currentMatchIndex(): number | undefined {
+    return undefined;
+  }
+
+  /**
+   * Whether the search provider is disposed or not.
+   */
+  get isDisposed(): boolean {
+    return this._disposed;
+  }
+
+  /**
+   * The number of matches.
+   */
+  get matchesCount(): number | undefined {
+    return undefined;
+  }
+
+  /**
+   * 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.
+   */
+  abstract get isReadOnly(): boolean;
+
+  /**
+   * 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.
+   */
+  dispose(): void {
+    if (this._disposed) {
+      return;
+    }
+    this._disposed = true;
+  }
+
+  /**
+   * 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 {
+    return '';
+  }
+
+  /**
+   * Get the filters for the given provider.
+   *
+   * @returns The filters.
+   *
+   * ### Notes
+   * TODO For now it only supports boolean filters (represented with checkboxes)
+   */
+  getFilters(): Record<string, SearchFilter> {
+    return {};
+  }
+
+  /**
+   * Start a search using the provided options.
+   *
+   * @param query A RegExp to be use to perform the search
+   * @param filters Filter parameters to pass to provider
+   */
+  abstract startQuery(
+    query: RegExp,
+    filters: SearchFilters,
+    highlightNext?: boolean,
+  ): Promise<void>;
+
+  /**
+   * Stop a search and clear any internal state of ssthe search provider.
+   */
+  abstract endQuery(): Promise<void>;
+
+  /**
+   * Clear currently highlighted match.
+   */
+  abstract clearHighlight(): Promise<void>;
+
+  /**
+   * Highlight the next match.
+   *
+   * @returns The next match if available
+   */
+  abstract highlightNext(): Promise<SearchMatch | undefined>;
+
+  /**
+   * Highlight the previous match.
+   *
+   * @returns The previous match if available.
+   */
+  abstract highlightPrevious(): Promise<SearchMatch | undefined>;
+
+  /**
+   * Replace the currently selected match with the provided text
+   *
+   * @param newText The replacement text
+   *
+   * @returns A promise that resolves with a boolean indicating whether a replace occurred.
+   */
+  abstract replaceCurrentMatch(newText: string): Promise<boolean>;
+
+  /**
+   * Replace all matches in the widget with the provided text
+   *
+   * @param newText The replacement text
+   *
+   * @returns A promise that resolves with a boolean indicating whether a replace occurred.
+   */
+  abstract replaceAllMatches(newText: string): Promise<boolean>;
+}

package/src/index.less

@@ -0,0 +1,107 @@
+.libro-search-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-shadow: 0 2px 2px 0 #7c68681a;
+  background-color: var(--mana-color-bg-elevated);
+  z-index: 2000;
+}
+
+.libro-search-content {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  min-width: 320px;
+}
+
+.libro-search-row {
+  height: 32px;
+
+  input {
+    margin-right: 4px;
+  }
+
+  .ant-btn {
+    border: none;
+    box-shadow: none;
+    margin-left: 4px;
+  }
+}
+
+.libro-search-replace-toggle {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-right: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--mana-activityBar-background);
+  }
+}
+
+.libro-search-input {
+  align-items: center;
+  flex: 1;
+
+  .ant-input-affix-wrapper-sm {
+    margin-right: 4px;
+  }
+}
+
+.libro-search-input-suffix {
+  span {
+    margin-left: 4px;
+    padding: 2px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--mana-activityBar-background);
+    }
+  }
+
+  .libro-search-input-suffix-active {
+    background-color: var(--mana-activityBar-background);
+  }
+}
+
+.libro-search-index {
+  // width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+  margin-right: 16px;
+}
+
+.libro-search-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.libro-search-replace-toggle-icon {
+  font-size: 12px;
+  transition: transform 0.2s linear;
+}
+
+.libro-search-replace-toggle-replace-icon {
+  transform: rotate(90deg);
+}
+
+.libro-search-input-area {
+  flex: 1;
+}
+
+.libro-selectedtext {
+  background-color: rgb(255, 225, 0);
+
+  span {
+    background-color: rgb(255, 225, 0);
+  }
+}
+
+mark.libro-searching {
+  padding: 0;
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './module.js';
+export * from './libro-search-protocol.js';
+export * from './libro-search-utils.js';
+export * from './libro-search-manager.js';
+export * from './libro-search-engine-text.js';
+export * from './libro-search-engine-html.js';
+export * from './libro-search-generic-provider.js';
+export * from './libro-search-view.js';
+export * from './abstract-search-provider.js';

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

@@ -0,0 +1,39 @@
+import type { CellView } from '@difizen/libro-core';
+import type { Contribution } from '@difizen/mana-app';
+import { Priority } from '@difizen/mana-app';
+import { contrib, transient } from '@difizen/mana-app';
+
+import { CellSearchProviderContribution } from './libro-search-protocol.js';
+
+@transient()
+export class LibroCellSearchProvider {
+  @contrib(CellSearchProviderContribution)
+  protected providerContribution: Contribution.Provider<CellSearchProviderContribution>;
+
+  createCellSearchProvider(cell: CellView) {
+    const ctrb = this.findCellSearchProviderContribution(cell);
+    if (ctrb) {
+      return ctrb.factory(cell);
+    }
+    return;
+  }
+
+  getInitialQuery = (cell: CellView): string => {
+    const ctrb = this.findCellSearchProviderContribution(cell);
+    if (ctrb && ctrb.getInitialQuery) {
+      return ctrb.getInitialQuery(cell);
+    }
+    return '';
+  };
+
+  protected findCellSearchProviderContribution(
+    cell: CellView,
+  ): CellSearchProviderContribution | undefined {
+    const prioritized = Priority.sortSync(
+      this.providerContribution.getContributions(),
+      (contribution) => contribution.canHandle(cell),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0];
+  }
+}

package/src/libro-search-engine-html.ts

@@ -0,0 +1,74 @@
+/* eslint-disable no-param-reassign */
+import type { HTMLSearchMatch } from './libro-search-protocol.js';
+
+const UNSUPPORTED_ELEMENTS = [
+  'BASE',
+  'HEAD',
+  'LINK',
+  'META',
+  'STYLE',
+  'TITLE',
+  'SVG',
+  'SOURCE',
+  'SCRIPT',
+  'BODY',
+  'AREA',
+  'AUDIO',
+  'IMG',
+  'MAP',
+  'TRACK',
+  'VIDEO',
+  'APPLET',
+  'EMBED',
+  'IFRAME',
+  'NOEMBED',
+  'OBJECT',
+  'PARAM',
+  'PICTURE',
+  'CANVAS',
+  'NOSCRIPT',
+];
+
+export const searchInHTML = async (
+  query: RegExp,
+  rootNode: Node,
+): Promise<HTMLSearchMatch[]> => {
+  if (!(rootNode instanceof Node)) {
+    console.warn(
+      'Unable to search with HTMLSearchEngine the provided object.',
+      rootNode,
+    );
+    return [];
+  }
+  if (!query.global) {
+    query = new RegExp(query.source, query.flags + 'g');
+  }
+  const matches: HTMLSearchMatch[] = [];
+  const walker = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, {
+    acceptNode: (node) => {
+      let parentElement = node.parentElement!;
+      while (parentElement !== rootNode) {
+        if (UNSUPPORTED_ELEMENTS.includes(parentElement.nodeName)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        parentElement = parentElement.parentElement!;
+      }
+      return query.test(node.textContent!)
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_REJECT;
+    },
+  });
+  let node: Node | null = null;
+  while ((node = walker.nextNode()) !== null) {
+    query.lastIndex = 0;
+    let match: RegExpExecArray | null = null;
+    while ((match = query.exec(node.textContent!)) !== null) {
+      matches.push({
+        text: match[0],
+        position: match.index,
+        node: node as Text,
+      });
+    }
+  }
+  return Promise.resolve(matches);
+};

package/src/libro-search-engine-text.ts

@@ -0,0 +1,34 @@
+import type { SearchMatch } from './libro-search-protocol.js';
+
+/**
+ * Search for regular expression matches in a string.
+ *
+ * @param query Query regular expression
+ * @param data String to look into
+ * @returns List of matches
+ */
+
+export const searchText = (query: RegExp, data: string): Promise<SearchMatch[]> => {
+  let searchData = data;
+  let searchQuery = query;
+  if (typeof searchData !== 'string') {
+    try {
+      searchData = JSON.stringify(searchData);
+    } catch (reason) {
+      console.warn('Unable to search.', reason, searchData);
+      return Promise.resolve([]);
+    }
+  }
+  if (!searchQuery.global) {
+    searchQuery = new RegExp(searchQuery.source, searchQuery.flags + 'g');
+  }
+  const matches: SearchMatch[] = [];
+  let match: RegExpExecArray | null = null;
+  while ((match = searchQuery.exec(data)) !== null) {
+    matches.push({
+      text: match[0],
+      position: match.index,
+    });
+  }
+  return Promise.resolve(matches);
+};