feat: Double-link: Search interaction

apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx

@@ -1,7 +1,5 @@
-import { Route, Routes, useParams } from 'react-router';
-
 import { useUserAndSpaces } from '@toeverything/datasource/state';
-
+import { Route, Routes, useParams } from 'react-router';
 import { WorkspaceRootContainer } from './Container';
 import { Page } from './docs';
 import { Edgeless } from './Edgeless';
@@ -10,7 +8,7 @@ import Labels from './labels';
 import Pages from './pages';
 
 export function WorkspaceContainer() {
-    const { workspace_id } = useParams();
+    const { workspace_id, page_id } = useParams();
     const { user, currentSpaceId } = useUserAndSpaces();
 
     if (

libs/components/common/src/lib/text/slate-utils.ts

@@ -713,7 +713,10 @@ class SlateUtils {
         if (!this.editor) {
             return undefined;
         }
-        const { selectionEnd } = this.getSelectionStartAndEnd();
+        const selectionEnd = this.getSelectionStartAndEnd()?.selectionEnd;
+        if (!selectionEnd) {
+            return undefined;
+        }
         return this.getStringBetween(this.getStart(), selectionEnd);
     }
 

libs/components/editor-core/src/editor/types.ts

@@ -10,8 +10,6 @@
  */
 import type { PatchNode } from '@toeverything/components/ui';
 import type { BlockFlavors } from '@toeverything/datasource/db-service';
-import type { IdList, SelectionInfo, SelectionManager } from './selection';
-
 import { Point } from '@toeverything/utils';
 import { Observable } from 'rxjs';
 import type { AsyncBlock } from './block';
@@ -20,6 +18,7 @@ import type { BlockCommands } from './commands/block-commands';
 import type { DragDropManager } from './drag-drop';
 import { MouseManager } from './mouse';
 import { ScrollManager } from './scroll';
+import type { IdList, SelectionInfo, SelectionManager } from './selection';
 
 // import { BrowserClipboard } from './clipboard/browser-clipboard';
 
@@ -109,6 +108,7 @@ export interface Virgo {
     getGroupBlockByPoint: (point: Point) => Promise<AsyncBlock>;
     isEdgeless: boolean;
     mouseManager: MouseManager;
+    getHooks: () => HooksRunner & PluginHooks;
 }
 
 export interface Plugin {

libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx

@@ -192,9 +192,10 @@ export const DoubleLinkMenu = ({
                     anchorNode.id !== curBlockId &&
                     editor.blockHelper.isSelectionCollapsed(anchorNode.id))
             ) {
-                const text = editor.blockHelper.getBlockTextBeforeSelection(
+                const text =
-                    anchorNode.id
+                    editor.blockHelper.getBlockTextBeforeSelection(
-                );
+                        anchorNode.id
+                    ) || '';
                 if (text.endsWith('[[')) {
                     resetState(curBlockId, anchorNode.id);
                 }

libs/components/editor-plugins/src/search/Search.tsx

@@ -5,7 +5,12 @@ import {
     styled,
     TransitionsModal,
 } from '@toeverything/components/ui';
-import { BlockEditor, Virgo } from '@toeverything/framework/virgo';
+import {
+    BlockEditor,
+    HookType,
+    PluginHooks,
+    Virgo,
+} from '@toeverything/framework/virgo';
 import { throttle } from '@toeverything/utils';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router';
@@ -31,7 +36,7 @@ const styles = style9.create({
 
 export type QueryResult = Awaited<ReturnType<BlockEditor['search']>>;
 
-const query_blocks = (
+const queryBlocksExec = (
     editor: Virgo,
     search: string,
     callback: (result: QueryResult) => void
@@ -39,45 +44,58 @@ const query_blocks = (
     (editor as BlockEditor).search(search).then(pages => callback(pages));
 };
 
-export const QueryBlocks = throttle(query_blocks, 500);
+export const QueryBlocks = throttle(queryBlocksExec, 500);
 
 type SearchProps = {
-    onClose: () => void;
     editor: Virgo;
+    hooks: PluginHooks;
 };
 
 export const Search = (props: SearchProps) => {
-    const { workspace_id } = useParams();
+    const { workspace_id: workspaceId } = useParams();
     const navigate = useNavigate();
 
-    const [open, set_open] = useState(true);
+    const [open, setOpen] = useState(false);
-    const [search, set_search] = useState('');
+    const [search, setSearch] = useState<string>();
-    const [result, set_result] = useState<QueryResult>([]);
+    const [result, setResult] = useState<QueryResult>([]);
 
     useEffect(() => {
-        QueryBlocks(props.editor, search, result => {
+        search !== undefined &&
-            set_result(result);
+            QueryBlocks(props.editor, search, result => {
-        });
+                setResult(result);
+            });
     }, [props.editor, search]);
 
-    const handle_navigate = useCallback(
+    const handleNavigate = useCallback(
-        (id: string) => navigate(`/${workspace_id}/${id}`),
+        (id: string) => navigate(`/${workspaceId}/${id}`),
-        [navigate, workspace_id]
+        [navigate, workspaceId]
     );
 
+    const handleSearch = useCallback(() => {
+        setOpen(true);
+        setSearch('');
+    }, []);
+
+    useEffect(() => {
+        const sub = props.hooks.get(HookType.ON_SEARCH).subscribe(handleSearch);
+
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [props, handleSearch]);
+
     return (
         <TransitionsModal
             open={open}
             onClose={() => {
-                set_open(false);
+                setOpen(false);
-                props.onClose();
             }}
         >
             <Box className={styles('wrapper')}>
                 <SearchInput
                     autoFocus
                     value={search}
-                    onChange={e => set_search(e.target.value)}
+                    onChange={e => setSearch(e.target.value)}
                 />
                 <ResultContainer
                     sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
@@ -89,10 +107,12 @@ export const Search = (props: SearchProps) => {
                         <BlockPreview
                             className={styles('resultItem')}
                             key={block.id}
-                            block={block}
+                            block={{
+                                ...block,
+                                content: block.content || 'Untitled',
+                            }}
                             onClick={() => {
-                                handle_navigate(block.id);
+                                handleNavigate(block.id);
-                                props.onClose();
                             }}
                         />
                     ))}

libs/components/editor-plugins/src/search/index.tsx

@@ -1,59 +1,40 @@
 import { StrictMode } from 'react';
-
-import { HookType } from '@toeverything/framework/virgo';
-
 import { BasePlugin } from '../base-plugin';
 import { PluginRenderRoot } from '../utils';
 import { Search } from './Search';
 
 export class FullTextSearchPlugin extends BasePlugin {
-    #root?: PluginRenderRoot;
+    private root?: PluginRenderRoot;
 
     public static override get pluginName(): string {
         return 'search';
     }
 
-    public override init(): void {
-        this.sub.add(
-            this.hooks.get(HookType.ON_SEARCH).subscribe(this._handleSearch)
-        );
-    }
-
     protected override _onRender(): void {
-        this.#root = new PluginRenderRoot({
+        this.root = new PluginRenderRoot({
             name: FullTextSearchPlugin.pluginName,
             render: this.editor.reactRenderRoot.render,
         });
+        this._renderSearch();
     }
 
-    private unmount() {
+    private _renderSearch() {
-        if (this.#root) {
+        if (this.root) {
-            this.editor.setHotKeysScope();
+            this.root.mount();
-            this.#root.unmount();
+            this.root.render(
-            // this.#root = undefined;
-        }
-        this.sub.unsubscribe();
-    }
-
-    private _handleSearch = () => {
-        this.editor.setHotKeysScope('search');
-        this.render_search();
-    };
-    private render_search() {
-        if (this.#root) {
-            this.#root.mount();
-            this.#root.render(
                 <StrictMode>
-                    <Search
+                    <Search editor={this.editor} hooks={this.hooks} />
-                        onClose={() => this.unmount()}
-                        editor={this.editor}
-                    />
                 </StrictMode>
             );
         }
     }
     public renderSearch() {
-        this.render_search();
+        this._renderSearch();
+    }
+
+    public override dispose() {
+        this.root?.unmount();
+        super.dispose();
     }
 }
 

libs/components/layout/src/header/LayoutHeader.tsx

@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import {
     LogoIcon,
     SearchIcon,
@@ -8,10 +6,11 @@ import {
 } from '@toeverything/components/icons';
 import { IconButton, styled } from '@toeverything/components/ui';
 import {
+    useCurrentEditors,
     useLocalTrigger,
     useShowSettingsSidebar,
 } from '@toeverything/datasource/state';
-
+import { useCallback, useMemo } from 'react';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 import { FileSystem, fsApiSupported } from './FileSystem';
 import { CurrentPageTitle } from './Title';
@@ -31,6 +30,14 @@ export const LayoutHeader = () => {
         }
     }, [isLocalWorkspace]);
 
+    const { currentEditors } = useCurrentEditors();
+
+    const handleSearch = useCallback(() => {
+        for (const key in currentEditors || {}) {
+            currentEditors[key].getHooks().onSearch();
+        }
+    }, [currentEditors]);
+
     return (
         <StyledContainerForHeaderRoot>
             <StyledHeaderRoot>
@@ -48,8 +55,7 @@ export const LayoutHeader = () => {
                             <IconButton
                                 size="large"
                                 hoverColor={'transparent'}
-                                disabled={true}
+                                onClick={handleSearch}
-                                style={{ cursor: 'not-allowed' }}
                             >
                                 <SearchIcon />
                             </IconButton>