feat: Intra-line double link interaction

libs/components/common/src/lib/text/EditableText.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-import { SearchIcon } from '@toeverything/components/icons';
 import { ErrorBoundary, isEqual } from '@toeverything/utils';
 import isHotkey from 'is-hotkey';
 import isUrl from 'is-url';
@@ -844,8 +843,7 @@ const EditorLeaf = ({ attributes, children, leaf }: any) => {
 
     if (leaf.doubleLinkSearch) {
         customChildren = (
-            <span style={{ backgroundColor: '#eee' }}>
+            <span style={{ backgroundColor: '#eee', borderRadius: '4px' }}>
-                <SearchIcon style={{ width: '16px', height: '16px' }} />
                 {customChildren}
             </span>
         );

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

@@ -166,7 +166,6 @@ export const DoubleLinkMenuContainer = ({
 
 const RootContainer = styled('div')(({ theme }) => ({
     zIndex: 1,
-    maxHeight: '525px',
     borderRadius: '10px',
     boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#fff',
@@ -176,5 +175,5 @@ const RootContainer = styled('div')(({ theme }) => ({
 const ContentContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     overflow: 'hidden',
-    maxHeight: '493px',
+    maxHeight: '300px',
 }));

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

@@ -56,7 +56,7 @@ export const DoubleLinkMenu = ({
         });
 
     const [curBlockId, setCurBlockId] = useState<string>();
-    const [searchText, setSearchText] = useState<string>('');
+    const [searchText, setSearchText] = useState<string>();
     const [inAddNewPage, setInAddNewPage] = useState(false);
     const [filterText, setFilterText] = useState<string>('');
     const [searchResultBlocks, setSearchResultBlocks] = useState<QueryResult>(
@@ -85,7 +85,13 @@ export const DoubleLinkMenu = ({
             });
             items.push(
                 ...(searchResultBlocks?.map(
-                    block => ({ block } as CommonListItem)
+                    block =>
+                        ({
+                            block: {
+                                ...block,
+                                content: block.content || 'Untitled',
+                            },
+                        } as CommonListItem)
                 ) || [])
             );
         }
@@ -199,11 +205,32 @@ export const DoubleLinkMenu = ({
 
     const handleKeyDown = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (!isOpen) {
+                return;
+            }
             if (event.code === 'Escape') {
                 hideMenu();
             }
+            const { type, anchorNode } = editor.selection.currentSelectInfo;
+            if (
+                type === 'Range' &&
+                anchorNode &&
+                editor.blockHelper.isSelectionCollapsed(anchorNode.id)
+            ) {
+                const text = editor.blockHelper.getBlockTextBeforeSelection(
+                    anchorNode.id
+                );
+                if (text.endsWith('[[')) {
+                    if (event.key === 'Backspace') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        hideMenu();
+                        return;
+                    }
+                }
+            }
         },
-        [hideMenu]
+        [hideMenu, editor, isOpen]
     );
 
     useEffect(() => {

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

@@ -1,16 +1,15 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
-import style9 from 'style9';
-
 import { BlockPreview } from '@toeverything/components/common';
 import {
-    TransitionsModal,
     MuiBox as Box,
     MuiBox,
     styled,
+    TransitionsModal,
 } from '@toeverything/components/ui';
-import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
+import { BlockEditor, Virgo } from '@toeverything/framework/virgo';
 import { throttle } from '@toeverything/utils';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import style9 from 'style9';
 
 const styles = style9.create({
     wrapper: {
@@ -37,9 +36,7 @@ const query_blocks = (
     search: string,
     callback: (result: QueryResult) => void
 ) => {
-    (editor as BlockEditor)
+    (editor as BlockEditor).search(search).then(pages => callback(pages));
-        .search(search)
-        .then(pages => callback(pages.filter(b => !!b.content)));
 };
 
 export const QueryBlocks = throttle(query_blocks, 500);