feat: Inlinemenu double link interaction

libs/components/common/src/lib/text/plugins/DoubleLink.tsx

@@ -6,6 +6,7 @@ import { RenderElementProps } from 'slate-react';
 
 export type DoubleLinkElement = {
     type: 'link';
+    linkType: 'doubleLink';
     workspaceId: string;
     blockId: string;
     children: Descendant[];

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

@@ -137,6 +137,7 @@ export const DoubleLinkMenu = ({
 
     const resetState = useCallback(
         (preNodeId: string, nextNodeId: string) => {
+            preNodeId &&
                 editor.blockHelper.removeDoubleLinkSearchSlash(preNodeId);
             setCurBlockId(nextNodeId);
             setSearchText('');
@@ -206,7 +207,7 @@ export const DoubleLinkMenu = ({
                 }
             }
         },
-        [editor, isOpen, curBlockId, hideMenu]
+        [editor, isOpen, curBlockId, hideMenu, resetState]
     );
 
     const handleKeyup = useCallback(
@@ -251,6 +252,20 @@ export const DoubleLinkMenu = ({
         };
     }, [handleKeyup, handleKeyDown, hooks]);
 
+    useEffect(() => {
+        const showDoubleLink = () => {
+            const { anchorNode } = editor.selection.currentSelectInfo;
+            editor.blockHelper.insertNodes(anchorNode.id, [{ text: '[[' }], {
+                select: true,
+            });
+            setTimeout(() => {
+                resetState('', anchorNode.id);
+            }, 0);
+        };
+        editor.plugins.observe('showDoubleLink', showDoubleLink);
+        return () => editor.plugins.unobserve('showDoubleLink', showDoubleLink);
+    }, [editor, resetState]);
+
     const insertDoubleLink = useCallback(
         async (pageId: string) => {
             editor.blockHelper.setSelectDoubleLinkSearchSlash(curBlockId);
@@ -328,6 +343,7 @@ export const DoubleLinkMenu = ({
                 ...doubleLinkMenuStyle,
             }}
         >
+            {isOpen && (
                 <MuiClickAwayListener onClickAway={() => hideMenu()}>
                     <Popper
                         open={isOpen}
@@ -368,6 +384,7 @@ export const DoubleLinkMenu = ({
                         )}
                     </Popper>
                 </MuiClickAwayListener>
+            )}
         </div>
     );
 };

libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx

@@ -1,9 +1,9 @@
+import { Tooltip } from '@toeverything/components/ui';
 import React, { useCallback } from 'react';
 import style9 from 'style9';
-
-import type { IconItemType, WithEditorSelectionType } from '../types';
 import { inlineMenuNamesKeys, inlineMenuShortcuts } from '../config';
-import { Tooltip } from '@toeverything/components/ui';
+import type { IconItemType, WithEditorSelectionType } from '../types';
+
 type MenuIconItemProps = IconItemType & WithEditorSelectionType;
 
 export const MenuIconItem = ({
@@ -22,6 +22,7 @@ export const MenuIconItem = ({
                     editor,
                     type: nameKey,
                     anchorNodeId: selectionInfo?.anchorNode?.id,
+                    setShow,
                 });
             }
             if ([inlineMenuNamesKeys.comment].includes(nameKey)) {

libs/components/editor-plugins/src/menu/inline-menu/types.ts

@@ -1,5 +1,5 @@
 import type { SvgIconProps } from '@toeverything/components/ui';
-import type { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
+import type { SelectionInfo, Virgo } from '@toeverything/framework/virgo';
 import { inlineMenuNames, INLINE_MENU_UI_TYPES } from './config';
 
 export type WithEditorSelectionType = {
@@ -14,10 +14,12 @@ export type ClickItemHandler = ({
     type,
     editor,
     anchorNodeId,
+    setShow,
 }: {
     type: InlineMenuNamesType;
     editor: Virgo;
     anchorNodeId: string;
+    setShow?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => void;
 
 export type IconItemType = {

libs/components/editor-plugins/src/menu/inline-menu/utils.ts

@@ -107,6 +107,7 @@ const common_handler_for_inline_menu: ClickItemHandler = ({
     editor,
     anchorNodeId,
     type,
+    setShow,
 }) => {
     switch (type) {
         case inlineMenuNamesKeys.text:
@@ -438,6 +439,10 @@ const common_handler_for_inline_menu: ClickItemHandler = ({
                 blockType: Protocol.Block.Type.file,
             });
             break;
+        case inlineMenuNamesKeys.backlinks:
+            editor.plugins.emit('showDoubleLink');
+            setShow(false);
+            break;
         default: // do nothing
     }
 };