@opensumi/ide-search 2.21.13 → 2.22.0

package/src/browser/tree/search-tree.service.ts

@@ -0,0 +1,323 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { LabelService } from '@opensumi/ide-core-browser';
+import {
+  URI,
+  Schemes,
+  Emitter,
+  IDisposable,
+  DisposableStore,
+  IRange,
+  memoize,
+  Disposable,
+} from '@opensumi/ide-core-common';
+import {
+  IEditorDocumentModelService,
+  IEditorDocumentModelContentRegistry,
+  IEditorDocumentModelContentProvider,
+  IEditorDocumentModelRef,
+} from '@opensumi/ide-editor/lib/browser';
+import { IFileServiceClient } from '@opensumi/ide-file-service/lib/common';
+import type { IModelDeltaDecoration } from '@opensumi/ide-monaco/lib/browser/monaco-api/editor';
+import type { ITextModel } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+import { IWorkspaceEditService } from '@opensumi/ide-workspace-edit';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import { IContentSearchClientService, ISearchTreeService } from '../../common/content-search';
+import { replace } from '../replace';
+import { SearchContextKey } from '../search-contextkey';
+import { SearchContentNode, SearchFileNode, SearchRoot } from '../tree/tree-node.defined';
+
+@Injectable()
+export class RangeHighlightDecorations implements IDisposable {
+  private preDeltaDecoration: string[] | null = null;
+  private _model: ITextModel | null = null;
+  private _modelRef: IEditorDocumentModelRef | null = null;
+  private readonly _modelDisposables = new DisposableStore();
+
+  @Autowired(IEditorDocumentModelService)
+  documentModelManager: IEditorDocumentModelService;
+
+  removeHighlightRange() {
+    if (this._model && this.preDeltaDecoration) {
+      this._model.deltaDecorations(this.preDeltaDecoration, []);
+    }
+    this.preDeltaDecoration = null;
+  }
+
+  highlightRange(resource: URI | ITextModel, range: IRange): void {
+    let model: ITextModel | null = null;
+    if (URI.isUri(resource)) {
+      const modelRef = this.documentModelManager.getModelReference(resource, 'highlight-range');
+      if (modelRef) {
+        model = modelRef.instance.getMonacoModel();
+        this._modelRef = modelRef;
+      }
+    } else {
+      model = resource;
+    }
+
+    if (model) {
+      this.doHighlightRange(model, range);
+    }
+  }
+
+  private doHighlightRange(model: ITextModel, range: IRange) {
+    this.removeHighlightRange();
+    this.preDeltaDecoration = model.deltaDecorations([], this.createEditorDecorations(range));
+    this.setModel(model);
+  }
+
+  private createEditorDecorations(range: IRange) {
+    return [{ range, options: RangeHighlightDecorations.RANGE_HIGHLIGHT_DECORATION }] as IModelDeltaDecoration[];
+  }
+
+  private setModel(model: ITextModel) {
+    if (this._modelRef) {
+      this._modelRef.dispose();
+      this._modelRef = null;
+    }
+    if (this._model !== model) {
+      this.clearModelListeners();
+      this._model = model;
+
+      this._modelDisposables.add(
+        this._model.onWillDispose(() => {
+          this.clearModelListeners();
+          this.removeHighlightRange();
+          this._model = null;
+        }),
+      );
+    }
+  }
+
+  private clearModelListeners() {
+    this._modelDisposables.clear();
+  }
+
+  dispose() {
+    if (this._model) {
+      this.removeHighlightRange();
+      this._modelDisposables.dispose();
+      this._model = null;
+    }
+  }
+
+  private static readonly RANGE_HIGHLIGHT_DECORATION = {
+    className: 'rangeHighlight',
+    stickiness: monaco.editor.TrackedRangeStickiness.GrowsOnlyWhenTypingBefore,
+    isWholeLine: true,
+  };
+}
+
+@Injectable()
+export class ReplaceDocumentModelContentProvider implements IEditorDocumentModelContentProvider {
+  contentMap: Map<string, string> = new Map();
+
+  @Autowired(IEditorDocumentModelService)
+  private documentModelManager: IEditorDocumentModelService;
+
+  @Autowired(IContentSearchClientService)
+  private searchBrowserService: IContentSearchClientService;
+
+  @Autowired(IWorkspaceEditService)
+  private workspaceEditService: IWorkspaceEditService;
+
+  private onDidChangeContentEvent: Emitter<URI> = new Emitter();
+
+  handlesScheme(scheme: string) {
+    return scheme === Schemes.internal;
+  }
+
+  provideEditorDocumentModelContent(uri: URI): string {
+    return this.contentMap.get(uri.toString()) || '';
+  }
+
+  isReadonly() {
+    return true;
+  }
+
+  async updateContent(uri: URI): Promise<any> {
+    const sourceFileUri = uri.withScheme(JSON.parse(uri.query).scheme).withoutQuery().withoutFragment();
+    const sourceDocModelRef =
+      this.documentModelManager.getModelReference(sourceFileUri) ||
+      (await this.documentModelManager.createModelReference(sourceFileUri));
+    const sourceDocModel = sourceDocModelRef.instance;
+    const value = sourceDocModel.getText();
+    const replaceViewDocModelRef =
+      this.documentModelManager.getModelReference(uri) || (await this.documentModelManager.createModelReference(uri));
+    const replaceViewDocModel = replaceViewDocModelRef.instance;
+
+    replaceViewDocModel.updateContent(value);
+
+    let searchResults = this.searchBrowserService.searchResults.get(sourceFileUri.toString());
+
+    if (!searchResults) {
+      return '';
+    }
+
+    searchResults = searchResults.map((result) =>
+      Object.assign({}, result, {
+        fileUri: uri.toString(),
+      }),
+    );
+
+    await replace(
+      this.documentModelManager,
+      this.workspaceEditService,
+      searchResults,
+      this.searchBrowserService.replaceValue,
+      this.searchBrowserService.searchValue,
+      this.searchBrowserService.UIState.isUseRegexp,
+    );
+
+    this.contentMap.set(uri.toString(), replaceViewDocModel.getText());
+  }
+
+  onDidChangeContent = this.onDidChangeContentEvent.event;
+
+  delete(uri: URI) {
+    this.contentMap.delete(uri.toString());
+  }
+
+  clear() {
+    this.contentMap.clear();
+  }
+}
+
+@Injectable()
+export class SearchTreeService extends Disposable implements ISearchTreeService {
+  private userhomePath: URI | null;
+
+  @Autowired(IContentSearchClientService)
+  private readonly searchBrowserService: IContentSearchClientService;
+
+  @Autowired(IWorkspaceService)
+  private readonly workspaceService: IWorkspaceService;
+
+  @Autowired(IEditorDocumentModelContentRegistry)
+  private readonly contentRegistry: IEditorDocumentModelContentRegistry;
+
+  @Autowired(ReplaceDocumentModelContentProvider)
+  private readonly replaceDocumentModelContentProvider: ReplaceDocumentModelContentProvider;
+
+  @Autowired(RangeHighlightDecorations)
+  private readonly rangeHighlightDecorations: RangeHighlightDecorations;
+
+  @Autowired(IFileServiceClient)
+  private readonly fileServiceClient: IFileServiceClient;
+
+  @Autowired(SearchContextKey)
+  private readonly searchContextKey: SearchContextKey;
+
+  @Autowired(LabelService)
+  private readonly labelService: LabelService;
+
+  constructor() {
+    super();
+    this.addDispose(this.rangeHighlightDecorations);
+    this.addDispose(
+      this.contentRegistry.registerEditorDocumentModelContentProvider(this.replaceDocumentModelContentProvider),
+    );
+  }
+
+  get replaceValue() {
+    return this.searchBrowserService.replaceValue;
+  }
+
+  get resultTotal() {
+    return this.searchBrowserService.resultTotal;
+  }
+
+  get contextKey() {
+    return this.searchContextKey;
+  }
+
+  initContextKey(dom: HTMLDivElement) {
+    this.contextKey.initScopedContext(dom);
+  }
+
+  removeHighlightRange() {
+    this.rangeHighlightDecorations.removeHighlightRange();
+  }
+
+  async resolveChildren(
+    parent?: SearchRoot | SearchFileNode,
+  ): Promise<(SearchRoot | SearchFileNode | SearchContentNode)[]> {
+    if (!parent) {
+      const root = new SearchRoot(this);
+      return [root];
+    } else if (parent) {
+      if (SearchRoot.isRoot(parent)) {
+        const files = this.searchBrowserService.searchResults;
+        if (!files) {
+          return [];
+        }
+        const childs: SearchFileNode[] = [];
+        for (const filesArray of files) {
+          const uri = filesArray[0];
+          const resultList = filesArray[1];
+          const _uri = new URI(uri);
+          const description = (await this.workspaceService.asRelativePath(_uri.parent))?.path;
+          if (!resultList || resultList.length < 1) {
+            continue;
+          }
+          childs.push(
+            new SearchFileNode(
+              this,
+              resultList,
+              description,
+              await this.getReadableTooltip(_uri),
+              this.labelService.getIcon(_uri),
+              _uri,
+              parent,
+            ),
+          );
+        }
+        return childs;
+      } else {
+        const contentResults = (parent as SearchFileNode).contentResults;
+        return contentResults.map((content) => {
+          const start = (content.renderStart || content.matchStart) - 1;
+          const end = start + content.matchLength;
+          const description = content.renderLineText || content.lineText;
+          return new SearchContentNode(
+            this,
+            content,
+            description,
+            { start, end },
+            (parent as SearchFileNode).resource,
+            parent as SearchFileNode,
+          );
+        });
+      }
+    }
+    return [];
+  }
+
+  @memoize
+  private async getCurrentUserHome() {
+    if (!this.userhomePath) {
+      try {
+        const userhome = await this.fileServiceClient.getCurrentUserHome();
+        if (userhome) {
+          this.userhomePath = new URI(userhome.uri);
+        }
+      } catch (err) {}
+    }
+    return this.userhomePath;
+  }
+
+  private async getReadableTooltip(path: URI) {
+    const pathStr = path.toString();
+    const userhomePath = await this.getCurrentUserHome();
+    if (!userhomePath) {
+      return decodeURIComponent(path.withScheme('').toString());
+    }
+    if (userhomePath.isEqualOrParent(path)) {
+      const userhomePathStr = userhomePath && userhomePath.toString();
+      return decodeURIComponent(pathStr.replace(userhomePathStr, '~'));
+    }
+    return decodeURIComponent(path.withScheme('').toString());
+  }
+}

package/src/browser/tree/search-tree.view.tsx

@@ -0,0 +1,179 @@
+import cls from 'classnames';
+import React, { useEffect, useState, RefObject, useRef, useCallback } from 'react';
+
+import { IRecycleTreeHandle, RecycleTree, Button, TreeNodeEvent } from '@opensumi/ide-components';
+import { localize, formatLocalize, useInjectable, CommandService } from '@opensumi/ide-core-browser';
+import { ViewState } from '@opensumi/ide-core-browser';
+
+import { ResultTotal, SEARCH_STATE } from '../../common/content-search';
+import styles from '../search.module.less';
+
+import { SearchNodeRendered, SEARCH_TREE_NODE_HEIGHT, ISearchNodeRenderedProps } from './search-node';
+import { SearchModelService, SearchTreeModel } from './tree-model.service';
+
+export interface ISearchTreeProp {
+  offsetTop: number;
+  search: string;
+  replace: string;
+  total: ResultTotal;
+  viewState: ViewState;
+  state: SEARCH_STATE;
+  isUseRegexp: boolean;
+  isMatchCase: boolean;
+}
+
+export interface ISearchResultTotalContent {
+  total: ResultTotal;
+  state: SEARCH_STATE;
+  model?: SearchTreeModel;
+}
+
+const ResultTotalContent = ({ total, state, model }: ISearchResultTotalContent) => {
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const searchModelService = useInjectable<SearchModelService>(SearchModelService);
+  const handleFold = useCallback(() => {
+    const toCollapsed = !collapsed;
+    setCollapsed(toCollapsed);
+    if (toCollapsed) {
+      searchModelService.collapsedAll();
+    } else {
+      searchModelService.expandAll();
+    }
+  }, [collapsed, searchModelService]);
+
+  const handleRefresh = useCallback(() => {
+    searchModelService.refresh();
+  }, [searchModelService]);
+
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+    const dispose = model.root.watcher.on(TreeNodeEvent.DidChangeExpansionState, () => {
+      if (collapsed) {
+        setCollapsed(!collapsed);
+      }
+    });
+    return () => {
+      dispose.dispose();
+    };
+  }, [model, collapsed]);
+
+  if (total.resultNum > 0) {
+    return (
+      <p className={styles.result_describe}>
+        <span className={styles.text}>
+          {formatLocalize('search.files.result', String(total.resultNum), String(total.fileNum))}
+        </span>
+        <Button
+          className={cls(styles.result_fresh, { [styles.disabled]: state === SEARCH_STATE.doing })}
+          onClick={handleRefresh}
+          type='icon'
+          icon='refresh'
+          title={localize('search.RefreshAction.label')}
+        ></Button>
+        <Button
+          className={cls(styles.result_fold, { [styles.disabled]: state === SEARCH_STATE.doing })}
+          onClick={handleFold}
+          type='icon'
+          icon={!collapsed ? 'collapse-all' : 'expand-all'}
+          title={localize(
+            !collapsed
+              ? 'search.CollapseDeepestExpandedLevelAction.label'
+              : 'search.ExpandDeepestExpandedLevelAction.label',
+          )}
+        ></Button>
+      </p>
+    );
+  }
+  return null;
+};
+
+export const SearchTree = ({
+  offsetTop,
+  total,
+  state,
+  replace,
+  search,
+  viewState,
+  isUseRegexp,
+  isMatchCase,
+}: ISearchTreeProp) => {
+  const [model, setModel] = useState<SearchTreeModel | undefined>();
+  const searchModelService = useInjectable<SearchModelService>(SearchModelService);
+  const commandService = useInjectable<CommandService>(CommandService);
+  const wrapperRef: RefObject<HTMLDivElement> = useRef(null);
+  const totalRef: RefObject<HTMLDivElement> = useRef(null);
+
+  const [totalHeight, setTotalHeight] = useState<number>(0);
+
+  const { handleTreeBlur, handleTreeFocus } = searchModelService;
+
+  useEffect(() => {
+    setModel(searchModelService.treeModel);
+    const disposable = searchModelService.onDidUpdateTreeModel((model?: SearchTreeModel) => {
+      setModel(model);
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (totalRef.current) {
+      setTotalHeight(totalRef.current.clientHeight);
+    }
+  }, [totalRef.current]);
+
+  const handleTreeReady = useCallback(
+    (handle: IRecycleTreeHandle) => {
+      searchModelService.handleTreeHandler(handle);
+    },
+    [searchModelService],
+  );
+
+  const renderTreeNode = useCallback(
+    (props: ISearchNodeRenderedProps) => (
+      <SearchNodeRendered
+        item={props.item}
+        itemType={props.itemType}
+        decorations={searchModelService.decorations.getDecorations(props.item as any)}
+        defaultLeftPadding={8}
+        search={search}
+        replace={replace}
+        onClick={searchModelService.handleItemClick}
+        onDoubleClick={searchModelService.handleItemDoubleClick}
+        onContextMenu={searchModelService.handleContextMenu}
+        leftPadding={8}
+        isUseRegexp={isUseRegexp}
+        isMatchCase={isMatchCase}
+        commandService={commandService}
+      />
+    ),
+    [model, search, replace, isUseRegexp, isMatchCase],
+  );
+
+  const renderSearchTree = useCallback(() => {
+    if (model) {
+      return (
+        <RecycleTree
+          height={viewState.height - offsetTop - totalHeight}
+          itemHeight={SEARCH_TREE_NODE_HEIGHT}
+          onReady={handleTreeReady}
+          model={model}
+        >
+          {renderTreeNode}
+        </RecycleTree>
+      );
+    }
+  }, [model, totalHeight, offsetTop, search, replace, isUseRegexp, isMatchCase, viewState]);
+
+  return (
+    <div className={styles.tree} tabIndex={-1} onBlur={handleTreeBlur} onFocus={handleTreeFocus} ref={wrapperRef}>
+      <div ref={totalRef}>
+        <ResultTotalContent total={total} state={state} model={model} />
+      </div>
+      {renderSearchTree()}
+    </div>
+  );
+};