@difizen/libro-search 0.1.0 → 0.1.2

package/src/libro-search-model.ts

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
 import type { Disposable } from '@difizen/mana-app';
 import { DisposableCollection, Emitter } from '@difizen/mana-app';
 import { inject, singleton } from '@difizen/mana-app';
@@ -12,15 +16,15 @@ import { LibroSearchUtils } from './libro-search-utils.js';
  */
 @singleton()
 export class LibroSearchModel implements Disposable {
-  utils: LibroSearchUtils;
-  protected _disposed?: boolean = false;
+  @inject(LibroSearchUtils) utils: LibroSearchUtils;
+  protected _disposed?: boolean | undefined = false;
   protected _caseSensitive = false;
   protected parsingError = '';
   protected _filters: SearchFilters = {
     searchCellOutput: true,
     onlySearchSelectedCells: false,
   };
-  protected _replaceText = '';
+  protected _replaceText: string;
   protected searchDebouncer: any;
   protected _searchExpression = '';
   protected _useRegex = false;
@@ -32,19 +36,14 @@ export class LibroSearchModel implements Disposable {
   }
 
   get disposed() {
-    return !!this._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;
+  constructor(searchProvider: SearchProvider, searchDebounceTime: number) {
     this.searchProvider = searchProvider;
     // this._filters = {};
     // if (this.searchProvider.getFilters) {
@@ -227,7 +226,7 @@ export class LibroSearchModel implements Disposable {
    * @param name Filter name
    * @param v Filter value
    */
-  async setFilter(_name: string, _v: boolean): Promise<void> {
+  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);

package/src/libro-search-protocol.ts

@@ -1,23 +1,8 @@
+import type { SearchMatch } from '@difizen/libro-code-editor';
 import type { CellView } from '@difizen/libro-core';
 import type { Disposable, Event } from '@difizen/mana-app';
 import type { View } from '@difizen/mana-app';
 import { Syringe } from '@difizen/mana-app';
-
-/**
- * Base search match interface
- */
-export interface SearchMatch {
-  /**
-   * Text of the exact match itself
-   */
-  readonly text: string;
-
-  /**
-   * Start location of the match (in a text, this is the column)
-   */
-  position: number;
-}
-
 /**
  * HTML search match interface
  */

package/src/libro-search-provider.ts

@@ -1,18 +1,34 @@
-import type { CellView } from '@difizen/libro-core';
-import { LibroView } from '@difizen/libro-core';
-import { inject, prop, transient, watch, equals } from '@difizen/mana-app';
+import type { SearchMatch } from '@difizen/libro-code-editor';
+import type { CellView, VirtualizedManager } from '@difizen/libro-core';
+import {
+  EditorCellView,
+  LibroView,
+  VirtualizedManagerHelper,
+} from '@difizen/libro-core';
+import { inject, prop, transient, equals } from '@difizen/mana-app';
 import { Deferred, DisposableCollection } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 
 import { AbstractSearchProvider } from './abstract-search-provider.js';
 import { LibroCellSearchProvider } from './libro-cell-search-provider.js';
+import { SearchProviderOption } from './libro-search-protocol.js';
 import type {
   CellSearchProvider,
   SearchFilter,
-  SearchMatch,
   SearchFilters,
 } from './libro-search-protocol.js';
-import { SearchProviderOption } from './libro-search-protocol.js';
+
+export 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)
+  );
+}
 
 export type LibroSearchProviderFactory = (
   option: SearchProviderOption,
@@ -44,6 +60,7 @@ export class LibroSearchProvider extends AbstractSearchProvider {
   @prop() protected providerMap = new Map<string, CellSearchProvider>();
   protected documentHasChanged = false;
   protected override view: LibroView;
+  protected virtualizedManager: VirtualizedManager;
 
   updateSearchCellOutput(value: boolean): void {
     this.searchCellOutput = value;
@@ -52,16 +69,20 @@ export class LibroSearchProvider extends AbstractSearchProvider {
   /**
    * @param option Provide the view to search in
    */
-  constructor(@inject(SearchProviderOption) option: SearchProviderOption) {
+  constructor(
+    @inject(SearchProviderOption) option: SearchProviderOption,
+    @inject(VirtualizedManagerHelper)
+    virtualizedManagerHelper: VirtualizedManagerHelper,
+  ) {
     super(option);
     this.view = option.view as LibroView;
-    this.toDispose.push(watch(this.view.model, 'active', this.onActiveCellChanged));
-    this.toDispose.push(watch(this.view.model, 'cells', this.onCellsChanged));
+    this.virtualizedManager = virtualizedManagerHelper.getOrCreate(this.view.model);
   }
 
   protected getProvider = (cell: CellView) => {
     return this.providerMap.get(cell.id);
   };
+
   /**
    * Report whether or not this provider has the ability to search on the given object
    *
@@ -230,7 +251,7 @@ export class LibroSearchProvider extends AbstractSearchProvider {
    */
   startQuery = async (
     query: RegExp,
-    _filters?: SearchFilters,
+    filters?: SearchFilters,
     highlightNext = true,
   ): Promise<void> => {
     if (!this.view) {
@@ -379,12 +400,11 @@ export class LibroSearchProvider extends AbstractSearchProvider {
     this.onSearchProviderChanged();
     this.cellsChangeDeferred = undefined;
   };
-  protected onCellsChanged = async (): Promise<void> => {
+
+  onCellsChanged = async (): Promise<void> => {
     if (!this.cellsChangeDeferred) {
       this.cellsChangeDeferred = new Deferred();
-      this.cellsChangeDeferred.promise.then(this.doCellsChanged).catch(() => {
-        //
-      });
+      this.cellsChangeDeferred.promise.then(this.doCellsChanged).catch(console.error);
       this.cellsChangeDeferred.resolve();
     }
   };
@@ -401,35 +421,62 @@ export class LibroSearchProvider extends AbstractSearchProvider {
     }
     return index;
   };
+
+  protected selectCell(selectIndex: number) {
+    if (selectIndex >= 0 && selectIndex < this.view.model.cells.length - 1) {
+      this.view.model.selectCell(this.view.model.cells[selectIndex]);
+    }
+  }
+
   protected stepNext = async (
     reverse = false,
     loop = false,
   ): Promise<SearchMatch | undefined> => {
-    const activateNewMatch = async () => {
-      // if (this.getActiveIndex() !== this._currentProviderIndex!) {
-      //   this.widget.content.activeCellIndex = this._currentProviderIndex!;
-      // }
-      // const activeCell = this.view.activeCell;
-      // if (!activeCell.inViewport) {
-      //   try {
-      //     if (this.view.activeCell) {
-      //       this.view.model.scrollToView(this.view.activeCell);
-      //     }
-      //   } catch (error) {
-      //     // no-op
-      //   }
-      // }
-      // // Unhide cell
-      // if (activeCell.inputHidden) {
-      //   activeCell.inputHidden = false;
-      // }
-      // if (!activeCell.inViewport) {
-      //   // It will not be possible the cell is not in the view
-      //   return;
-      // }
-      // await activeCell.ready;
-      // const editor = activeCell.editor! as CodeMirrorEditor;
-      // editor.revealSelection(editor.getSelection());
+    const activateNewMatch = async (match: SearchMatch) => {
+      if (this.getActiveIndex() !== this.currentProviderIndex!) {
+        this.selectCell(this.currentProviderIndex!);
+      }
+      const activeCell = this.view.activeCell;
+
+      if (!activeCell) {
+        return;
+      }
+
+      const node = activeCell.container?.current;
+
+      if (!elementInViewport(node!)) {
+        try {
+          if (this.view.activeCell) {
+            if (this.virtualizedManager.isVirtualized) {
+              if (EditorCellView.is(activeCell)) {
+                const line = activeCell.editor?.getPositionAt(match.position)?.line;
+
+                this.view.model.scrollToCellView({
+                  cellIndex: this.view.activeCellIndex,
+                  lineIndex: line,
+                });
+              }
+            } else {
+              this.view.model.scrollToView(this.view.activeCell);
+            }
+          }
+        } catch (error) {
+          // no-op
+        }
+      }
+      // Unhide cell
+      if (activeCell.hasInputHidden) {
+        activeCell.hasInputHidden = false;
+      }
+      if (!elementInViewport(node!)) {
+        // It will not be possible the cell is not in the view
+        return;
+      }
+      if (EditorCellView.is(activeCell)) {
+        // await activeCell.editor;
+        const editor = activeCell.editor;
+        editor?.revealSelection(editor.getSelection());
+      }
     };
     if (this.currentProviderIndex === undefined) {
       this.currentProviderIndex = this.getActiveIndex()!;
@@ -441,7 +488,7 @@ export class LibroSearchProvider extends AbstractSearchProvider {
         ? await searchEngine?.highlightPrevious()
         : await searchEngine?.highlightNext();
       if (match) {
-        await activateNewMatch();
+        await activateNewMatch(match);
         return match;
       } else {
         this.currentProviderIndex = this.currentProviderIndex + (reverse ? -1 : 1);
@@ -469,7 +516,7 @@ export class LibroSearchProvider extends AbstractSearchProvider {
         : await searchEngine?.highlightNext();
 
       if (match) {
-        await activateNewMatch();
+        await activateNewMatch(match);
         return match;
       }
     }
@@ -478,7 +525,7 @@ export class LibroSearchProvider extends AbstractSearchProvider {
     return undefined;
   };
 
-  protected onActiveCellChanged = async () => {
+  onActiveCellChanged = async () => {
     await this._onSelectionChanged();
 
     if (this.getActiveIndex() !== this.currentProviderIndex) {

package/src/libro-search-utils.spec.ts

@@ -1,7 +1,7 @@
-import 'reflect-metadata';
 import assert from 'assert';
 
-import type { SearchMatch } from './libro-search-protocol.js';
+import type { SearchMatch } from '@difizen/libro-code-editor';
+
 import { LibroSearchUtils } from './libro-search-utils.js';
 
 describe('libro search utils', () => {

package/src/libro-search-utils.ts

@@ -1,7 +1,6 @@
+import type { SearchMatch } from '@difizen/libro-code-editor';
 import { singleton } from '@difizen/mana-app';
 
-import type { SearchMatch } from './libro-search-protocol.js';
-
 /**
  * Search Utils
  */
@@ -69,15 +68,18 @@ export class LibroSearchUtils {
     const queryText = regex
       ? queryString
       : queryString.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
-    const ret = new RegExp(queryText, flag);
+    try {
+      const ret = new RegExp(queryText, flag);
+      // If the empty string is hit, the search logic will freeze the browser tab
+      //  Trying /^/ or /$/ on the codemirror search demo, does not find anything.
+      //  So this is a limitation of the editor.
+      if (ret.test('')) {
+        return undefined;
+      }
 
-    // If the empty string is hit, the search logic will freeze the browser tab
-    //  Trying /^/ or /$/ on the codemirror search demo, does not find anything.
-    //  So this is a limitation of the editor.
-    if (ret.test('')) {
+      return ret;
+    } catch (error) {
       return undefined;
     }
-
-    return ret;
   }
 }

package/src/libro-search-view.tsx

@@ -1,22 +1,21 @@
 import {
-  RightOutlined,
-  ArrowUpOutlined,
   ArrowDownOutlined,
-  EllipsisOutlined,
+  ArrowUpOutlined,
   CloseOutlined,
   createFromIconfontCN,
+  EllipsisOutlined,
+  RightOutlined,
 } from '@ant-design/icons';
 import type { LibroView } from '@difizen/libro-core';
 import { LirboContextKey } from '@difizen/libro-core';
-import { prop, useInject } from '@difizen/mana-app';
+import { prop, useInject, watch } from '@difizen/mana-app';
 import { BaseView, view, ViewInstance } from '@difizen/mana-app';
 import { inject, transient } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Input, Button, Checkbox, Tag } from 'antd';
+import { Button, Checkbox, Input, Tag } from 'antd';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import type { InputRef } from 'antd/es/input';
 import classnames from 'classnames';
-import type { FC } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 
 import type { LibroSearchProvider } from './libro-search-provider.js';
@@ -27,7 +26,7 @@ const IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/a/font_3381673_65wfctnq7rt.js',
 });
 
-export const ReplaceToggle: FC = () => {
+export const ReplaceToggle = () => {
   const instance = useInject<LibroSearchView>(ViewInstance);
   return (
     <div className="libro-search-replace-toggle" onClick={instance.toggleReplace}>
@@ -41,16 +40,24 @@ export const ReplaceToggle: FC = () => {
   );
 };
 
-export const SearchIndex: FC = () => {
+export const SearchIndex = () => {
   const instance = useInject<LibroSearchView>(ViewInstance);
+
+  // TODO: trigger update when current match index changed, matchesCount dont work
+  useEffect(() => {
+    //
+  }, [instance.currentMatchIndex]);
+
   return (
     <div className="libro-search-index">
-      {instance.currentMatchIndex ?? '-'}/{instance.matchesCount ?? '-'}
+      {instance.matchesCount !== undefined
+        ? `${instance.currentMatchIndex}/${instance.matchesCount}`
+        : '无结果'}
     </div>
   );
 };
 
-export const SearchContent: FC = () => {
+export const SearchContent = () => {
   const instance = useInject<LibroSearchView>(ViewInstance);
   const findInputRef = useRef<InputRef>(null);
   useEffect(() => {
@@ -67,6 +74,7 @@ export const SearchContent: FC = () => {
     }
     return;
   }, [instance]);
+
   return (
     <div
       className="libro-search-content"
@@ -81,6 +89,7 @@ export const SearchContent: FC = () => {
               value={instance.findStr}
               onChange={instance.handleFindChange}
               size="small"
+              placeholder="搜索"
               suffix={
                 <span className="libro-search-input-suffix">
                   <IconFont
@@ -89,6 +98,7 @@ export const SearchContent: FC = () => {
                     })}
                     onClick={instance.toggleCaseSensitive}
                     type="icon-Aa"
+                    title="Match Case"
                   />
 
                   <IconFont
@@ -97,6 +107,7 @@ export const SearchContent: FC = () => {
                     })}
                     onClick={instance.toggleUseRegex}
                     type="icon-zhengzeshi"
+                    title="Use Regular Expression"
                   />
                 </span>
               }
@@ -106,11 +117,13 @@ export const SearchContent: FC = () => {
             <SearchIndex />
             <div>
               <Button
+                title="Previous Match"
                 onClick={instance.previous}
                 icon={<ArrowUpOutlined />}
                 size="small"
               />
               <Button
+                title="Next Match"
                 onClick={instance.next}
                 icon={<ArrowDownOutlined />}
                 size="small"
@@ -131,6 +144,7 @@ export const SearchContent: FC = () => {
                 value={instance.replaceStr}
                 onChange={instance.handleReplaceChange}
                 size="small"
+                placeholder="替换"
               />
             </td>
             <td className="libro-search-action">
@@ -139,12 +153,14 @@ export const SearchContent: FC = () => {
                   onClick={instance.replace}
                   icon={<IconFont type="icon-zifuchuantihuan_2" />}
                   size="small"
+                  title="Replace"
                 />
 
                 <Button
                   onClick={instance.replaceAll}
                   icon={<IconFont type="icon-tihuantupian" />}
                   size="small"
+                  title="Replace All"
                 />
               </div>
             </td>
@@ -171,7 +187,7 @@ export const SearchContent: FC = () => {
 };
 // TODO: 更改图标
 export const SearchComponent = forwardRef<HTMLDivElement>(function SearchComponent(
-  _props: { top?: number },
+  props: { top?: number },
   ref,
 ) {
   const instance = useInject<LibroSearchView>(ViewInstance);
@@ -193,41 +209,18 @@ export const SearchComponent = forwardRef<HTMLDivElement>(function SearchCompone
 @view('libro-search-view')
 export class LibroSearchView extends BaseView {
   findInputRef?: React.RefObject<InputRef> | null;
-  contextKey: LirboContextKey;
-  utils: LibroSearchUtils;
-  searchProviderFactory: LibroSearchProviderFactory;
-
-  constructor(
-    @inject(LirboContextKey) contextKey: LirboContextKey,
-    @inject(LibroSearchUtils) utils: LibroSearchUtils,
-    @inject(LibroSearchProviderFactory)
-    searchProviderFactory: LibroSearchProviderFactory,
-  ) {
-    super();
-    this.contextKey = contextKey;
-    this.utils = utils;
-    this.searchProviderFactory = searchProviderFactory;
-  }
-
-  protected _libro?: LibroView;
-
-  get libro(): LibroView | undefined {
-    return this._libro;
-  }
-
-  set libro(value: LibroView | undefined) {
-    this._libro = value;
-    this.searchProvider = this.searchProviderFactory({ view: this.libro! });
-  }
-
+  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroSearchUtils) utils: LibroSearchUtils;
+  @inject(LibroSearchProviderFactory) searchProviderFactory: LibroSearchProviderFactory;
+  libro?: LibroView;
   @prop() searchProvider?: LibroSearchProvider;
   @prop() searchVisible = false;
   get replaceVisible(): boolean {
     return this.searchProvider?.replaceMode ?? false;
   }
   @prop() settingVisible = false;
-  @prop() findStr?: string | undefined = undefined;
-  @prop() lastSearch?: string | undefined = undefined;
+  @prop() findStr?: string = undefined;
+  @prop() lastSearch?: string = undefined;
   @prop() replaceStr = '';
   @prop() caseSensitive = false;
   @prop() useRegex = false;
@@ -255,8 +248,31 @@ export class LibroSearchView extends BaseView {
     return this.searchProvider?.matchesCount;
   }
 
-  onviewWillUnmount = () => {
-    this.searchProvider?.endQuery();
+  override onViewMount = () => {
+    if (!this.searchProvider && this.libro) {
+      this.searchProvider = this.searchProviderFactory({ view: this.libro });
+      this.toDispose.push(watch(this.libro.model, 'active', this.onActiveCellChanged));
+      this.toDispose.push(
+        this.libro.model.onSourceChanged(() => this.onCellsChanged()),
+      );
+    }
+  };
+
+  onActiveCellChanged = () => {
+    if (this.searchVisible) {
+      this.searchProvider?.onActiveCellChanged();
+    }
+  };
+
+  onCellsChanged = () => {
+    if (this.searchVisible) {
+      this.searchProvider?.onCellsChanged();
+    }
+  };
+
+  onviewWillUnmount = async () => {
+    await this.searchProvider?.endQuery();
+    this.searchProvider?.dispose();
   };
 
   show = () => {
@@ -269,6 +285,9 @@ export class LibroSearchView extends BaseView {
     this.searchVisible = false;
     this.contextKey.enableCommandMode();
     this.searchProvider?.endQuery();
+    if (this.searchProvider) {
+      this.searchProvider.replaceMode = false;
+    }
     this.libro?.focus();
   };
 
@@ -316,6 +335,7 @@ export class LibroSearchView extends BaseView {
 
   toggleUseRegex = () => {
     this.useRegex = !this.useRegex;
+    this.search();
   };
 
   next = () => {
@@ -342,8 +362,8 @@ export class LibroSearchView extends BaseView {
     const init = this.searchProvider?.getInitialQuery();
     if (init) {
       this.findStr = init;
-      this.search(false);
     }
+    this.search(false);
   };
   getHeaderHeight = () => {
     let height = 32;