@difizen/libro-search 0.0.2-alpha.0

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

@@ -0,0 +1,37 @@
+import 'reflect-metadata';
+import assert from 'assert';
+import { LibroSearchUtils } from './libro-search-utils.js';
+import type { SearchMatch } from './libro-search-protocol.js';
+
+describe('libro search utils', () => {
+  it('#find next', () => {
+    /**
+     * 示例文本：1010011000111
+     * 查找文本：0
+     */
+    const instance = new LibroSearchUtils();
+    const matches: SearchMatch[] = [
+      { position: 1, text: '0' }, // 0
+      { position: 3, text: '0' }, // 1
+      { position: 4, text: '0' }, // 2
+      { position: 7, text: '0' }, // 3
+      { position: 8, text: '0' }, // 4
+      { position: 9, text: '0' }, // 5
+    ];
+    assert(instance.findNext(matches, 0) === 0);
+    assert(instance.findNext(matches, 1) === 0);
+    assert(instance.findNext(matches, 2) === 1);
+    assert(instance.findNext(matches, 4) === 2);
+    assert(instance.findNext(matches, 5) === 3);
+    assert(instance.findNext(matches, 9) === 5);
+    assert(instance.findNext(matches, 10) === undefined);
+    assert(instance.findNext(matches, 5, 3) === 3);
+  });
+  it('#find next 0', () => {
+    const instance = new LibroSearchUtils();
+    const matches: SearchMatch[] = [
+      { position: 7, text: '0' }, // 0
+    ];
+    assert(instance.findNext(matches, 0, 0, 0) === 0);
+  });
+});

package/src/libro-search-utils.ts

@@ -0,0 +1,83 @@
+import { singleton } from '@difizen/mana-app';
+
+import type { SearchMatch } from './libro-search-protocol.js';
+
+/**
+ * Search Utils
+ */
+@singleton()
+export class LibroSearchUtils {
+  /**
+   * 查找当前 position 最靠近的匹配项，适用于文本中查找
+   * @param matches 匹配项列表，通常来自一个 cell 或者 output
+   * @param position 查找起点，当前位置的文本偏移量
+   * @param lower 查找范围下限，值为匹配列表 index
+   * @param higher 查找范围上限，值为匹配列表 index
+   * @returns 下一个匹配项的 index，如果没有找到则返回 null
+   */
+  findNext(
+    matches: SearchMatch[],
+    position: number,
+    lower = 0,
+    higher = Infinity,
+  ): number | undefined {
+    let higherBound = Math.min(matches.length - 1, higher);
+    let lowerBound = lower;
+    while (lowerBound <= higherBound) {
+      // 取中间匹配项
+      const middle = Math.floor(0.5 * (lowerBound + higherBound));
+      // 中间匹配项的文本偏移量
+      const currentPosition = matches[middle].position;
+
+      if (currentPosition < position) {
+        // 中间值的偏移量小于查找起点
+        lowerBound = middle + 1; // 场景1：查找范围下限太小，需要增大，更新中间值
+        if (lowerBound < matches.length && matches[lowerBound].position > position) {
+          return lowerBound; // 场景2：下限已经是要查找的前一个匹配项了，下个匹配项的偏移量会大于查找起点。
+        }
+      } else if (currentPosition > position) {
+        // 中间值的偏移量大于查找起点
+        higherBound = middle - 1; // 场景1：查找范围上限太大，需要减小，更新中间值
+        if (higherBound > 0 && matches[higherBound].position < position) {
+          return middle; // 场景2：上限已经是要查找的后一个匹配项了，下个匹配项的偏移量会小于查找起点。
+        }
+      } else {
+        return middle; // 直接命中查找起点，选择此匹配项
+      }
+    }
+    // 查找起点不在 match 范围内，要么在范围前面，要么在范围后面
+    const first = lowerBound > 0 ? lowerBound - 1 : 0;
+    const match = matches[first];
+    return match.position >= position ? first : undefined;
+  }
+
+  /**
+   * Build the regular expression to use for searching.
+   *
+   * @param queryString Query string
+   * @param caseSensitive Whether the search is case sensitive or not
+   * @param regex Whether the expression is a regular expression
+   * @returns The regular expression to use
+   */
+  parseQuery(
+    queryString: string,
+    caseSensitive: boolean,
+    regex: boolean,
+  ): RegExp | undefined {
+    const flag = caseSensitive ? 'g' : 'gi';
+    // escape regex characters in query if its a string search
+    const queryText = regex
+      ? queryString
+      : queryString.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+    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;
+    }
+
+    return ret;
+  }
+}

package/src/libro-search-view.tsx

@@ -0,0 +1,404 @@
+import {
+  RightOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  EllipsisOutlined,
+  CloseOutlined,
+  createFromIconfontCN,
+} 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 { 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 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';
+import { LibroSearchProviderFactory } from './libro-search-provider.js';
+import { LibroSearchUtils } from './libro-search-utils.js';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/a/font_3381673_65wfctnq7rt.js',
+});
+
+export const ReplaceToggle: FC = () => {
+  const instance = useInject<LibroSearchView>(ViewInstance);
+  return (
+    <div className="libro-search-replace-toggle" onClick={instance.toggleReplace}>
+      <RightOutlined
+        className={classnames({
+          'libro-search-replace-toggle-icon': true,
+          'libro-search-replace-toggle-replace-icon': instance.replaceVisible,
+        })}
+      />
+    </div>
+  );
+};
+
+export const SearchIndex: FC = () => {
+  const instance = useInject<LibroSearchView>(ViewInstance);
+  return (
+    <div className="libro-search-index">
+      {instance.currentMatchIndex ?? '-'}/{instance.matchesCount ?? '-'}
+    </div>
+  );
+};
+
+export const SearchContent: FC = () => {
+  const instance = useInject<LibroSearchView>(ViewInstance);
+  const findInputRef = useRef<InputRef>(null);
+  useEffect(() => {
+    if (findInputRef.current) {
+      findInputRef.current.focus();
+    }
+    instance.findInputRef = findInputRef;
+    if (instance.container?.current) {
+      const container = instance.container.current;
+      container.addEventListener('keydown', instance.handleKeydown);
+      return () => {
+        container.removeEventListener('keydown', instance.handleKeydown);
+      };
+    }
+    return;
+  }, [instance]);
+  return (
+    <div
+      className="libro-search-content"
+      style={{ height: `${instance.contentHeight}px` }}
+    >
+      <ReplaceToggle />
+      <table className="libro-search-input-area">
+        <tr className="libro-search-row">
+          <td className="libro-search-input">
+            <Input
+              ref={findInputRef}
+              value={instance.findStr}
+              onChange={instance.handleFindChange}
+              size="small"
+              suffix={
+                <span className="libro-search-input-suffix">
+                  <IconFont
+                    className={classnames({
+                      'libro-search-input-suffix-active': instance.caseSensitive,
+                    })}
+                    onClick={instance.toggleCaseSensitive}
+                    type="icon-Aa"
+                  />
+
+                  <IconFont
+                    className={classnames({
+                      'libro-search-input-suffix-active': instance.useRegex,
+                    })}
+                    onClick={instance.toggleUseRegex}
+                    type="icon-zhengzeshi"
+                  />
+                </span>
+              }
+            />
+          </td>
+          <td className="libro-search-action">
+            <SearchIndex />
+            <div>
+              <Button
+                onClick={instance.previous}
+                icon={<ArrowUpOutlined />}
+                size="small"
+              />
+              <Button
+                onClick={instance.next}
+                icon={<ArrowDownOutlined />}
+                size="small"
+              />
+              <Button
+                onClick={instance.toggleSetting}
+                icon={<EllipsisOutlined />}
+                size="small"
+              />
+              <Button onClick={instance.hide} icon={<CloseOutlined />} size="small" />
+            </div>
+          </td>
+        </tr>
+        {instance.replaceVisible && (
+          <tr className="libro-search-row">
+            <td className="libro-search-input">
+              <Input
+                value={instance.replaceStr}
+                onChange={instance.handleReplaceChange}
+                size="small"
+              />
+            </td>
+            <td className="libro-search-action">
+              <div>
+                <Button
+                  onClick={instance.replace}
+                  icon={<IconFont type="icon-zifuchuantihuan_2" />}
+                  size="small"
+                />
+
+                <Button
+                  onClick={instance.replaceAll}
+                  icon={<IconFont type="icon-tihuantupian" />}
+                  size="small"
+                />
+              </div>
+            </td>
+          </tr>
+        )}
+
+        {instance.settingVisible && (
+          <div className="libro-search-row">
+            <Checkbox
+              checked={instance.searchProvider?.searchCellOutput}
+              onChange={instance.searchCellOutputChange}
+              disabled={instance.replaceVisible}
+            >
+              {l10n.t('在 output 中查找')}
+            </Checkbox>
+            {instance.replaceVisible && (
+              <Tag color="warning">{l10n.t('替换功能不能在 output 生效')}</Tag>
+            )}
+          </div>
+        )}
+      </table>
+    </div>
+  );
+};
+// TODO: 更改图标
+export const SearchComponent = forwardRef<HTMLDivElement>(function SearchComponent(
+  _props: { top?: number },
+  ref,
+) {
+  const instance = useInject<LibroSearchView>(ViewInstance);
+  return (
+    <div
+      tabIndex={1}
+      className="libro-search-overlay"
+      style={{ top: instance.getHeaderHeight() }}
+      ref={ref}
+      onBlur={(e) => instance.onBlur(e)}
+      onFocus={instance.onFocus}
+    >
+      {instance.searchVisible && <SearchContent />}
+    </div>
+  );
+});
+
+@transient()
+@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! });
+  }
+
+  @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() replaceStr = '';
+  @prop() caseSensitive = false;
+  @prop() useRegex = false;
+
+  override view = SearchComponent;
+
+  get contentHeight() {
+    let height = 32;
+    if (this.replaceVisible) {
+      height += 32;
+    }
+    if (this.settingVisible) {
+      height += 32;
+    }
+    return height;
+  }
+  get currentMatchIndex() {
+    const current = this.searchProvider?.currentMatchIndex;
+    if (current !== undefined) {
+      return current + 1;
+    }
+    return undefined;
+  }
+  get matchesCount() {
+    return this.searchProvider?.matchesCount;
+  }
+
+  onviewWillUnmount = () => {
+    this.searchProvider?.endQuery();
+  };
+
+  show = () => {
+    this.contextKey.disableCommandMode();
+    this.searchVisible = true;
+    this.initialQuery();
+    this.findInputRef?.current?.focus();
+  };
+  hide = () => {
+    this.searchVisible = false;
+    this.contextKey.enableCommandMode();
+    this.searchProvider?.endQuery();
+    this.libro?.focus();
+  };
+
+  onFocus = () => {
+    this.contextKey.disableCommandMode();
+  };
+
+  onBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    if (this.libro?.container?.current?.contains(e.relatedTarget)) {
+      this.contextKey.enableCommandMode();
+    }
+  };
+
+  search = (hightlightNext = true) => {
+    if (this.searchProvider) {
+      this.lastSearch = this.findStr;
+      const query = this.utils.parseQuery(
+        this.findStr || '',
+        this.caseSensitive,
+        this.useRegex,
+      );
+      if (query) {
+        this.searchProvider?.startQuery(query, undefined, hightlightNext);
+      } else {
+        this.searchProvider?.endQuery();
+      }
+    }
+  };
+  toggleReplace = () => {
+    if (this.searchProvider) {
+      this.searchProvider.replaceMode = !this.replaceVisible;
+      this.search();
+    }
+  };
+
+  toggleSetting = () => {
+    this.settingVisible = !this.settingVisible;
+    this.search();
+  };
+
+  toggleCaseSensitive = () => {
+    this.caseSensitive = !this.caseSensitive;
+    this.search();
+  };
+
+  toggleUseRegex = () => {
+    this.useRegex = !this.useRegex;
+  };
+
+  next = () => {
+    this.searchProvider?.highlightNext();
+  };
+
+  previous = () => {
+    this.searchProvider?.highlightPrevious();
+  };
+
+  searchCellOutputChange = (e: CheckboxChangeEvent) => {
+    if (this.searchProvider) {
+      this.searchProvider.updateSearchCellOutput(e.target.checked);
+    }
+  };
+
+  replace = () => {
+    this.searchProvider?.replaceCurrentMatch(this.replaceStr);
+  };
+  replaceAll = () => {
+    this.searchProvider?.replaceAllMatches(this.replaceStr);
+  };
+  initialQuery = () => {
+    const init = this.searchProvider?.getInitialQuery();
+    if (init) {
+      this.findStr = init;
+      this.search(false);
+    }
+  };
+  getHeaderHeight = () => {
+    let height = 32;
+    const container = this.libro?.container?.current;
+    if (container) {
+      const elements = container.getElementsByClassName('libro-view-top');
+      if (elements.length > 0) {
+        height = elements[0].clientHeight;
+      }
+    }
+    return height;
+  };
+
+  nextMatch = (reverse: boolean) => {
+    if (reverse) {
+      this.searchProvider?.highlightPrevious();
+    } else {
+      this.searchProvider?.highlightNext();
+    }
+  };
+
+  handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      e.preventDefault();
+      this.hide();
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (this.findStr !== this.lastSearch) {
+        this.search();
+        return;
+      }
+      if (this.matchesCount !== undefined && this.matchesCount > 0) {
+        this.nextMatch(e.shiftKey);
+      } else {
+        this.search();
+      }
+      return;
+    }
+  };
+
+  protected doHandleFindChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.findStr = e.target.value;
+  };
+
+  handleFindChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.findStr = e.target.value;
+    if (this.findStr !== this.lastSearch) {
+      this.search(false);
+    }
+  };
+  handleReplaceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.replaceStr = e.target.value;
+  };
+}

package/src/module.ts

@@ -0,0 +1,59 @@
+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 const LibroSearchModule = ManaModule.create()
+  .register(
+    LibroSearchUtils,
+    LibroSearchManager,
+    LibroSearchView,
+    GenericSearchProvider,
+    LibroSearchModel,
+    LibroSearchProvider,
+    LibroCellSearchProvider,
+    LibroSearchUtils,
+    {
+      token: GenericSearchProviderFactory,
+      useFactory: (ctx) => {
+        return (option) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: SearchProviderOption,
+            useValue: option,
+          });
+          return child.get(GenericSearchProvider);
+        };
+      },
+    },
+    {
+      token: LibroSearchProviderFactory,
+      useFactory: (ctx) => {
+        return (option) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: SearchProviderOption,
+            useValue: option,
+          });
+          return child.get(LibroSearchProvider);
+        };
+      },
+    },
+  )
+  .contribution(CellSearchProviderContribution);