feat: improve link-popup state

pubuzhixing8 · pubuzhixing8 · commit e446a54694dd · 2025-06-09T23:25:18.000+08:00
diff --git a/packages/drawnix/src/components/popup/link-popup/link-popup.tsx b/packages/drawnix/src/components/popup/link-popup/link-popup.tsx
@@ -9,6 +9,8 @@ import { LinkState, useDrawnix } from '../../../hooks/use-drawnix';
 import { FeltTipPenIcon, TrashIcon } from '../../icons';
 import { Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
+import { LinkEditor } from '@plait/text-plugins';
+import { LinkElement } from '@plait/common';
 
 export const LinkPopup = () => {
   const [isEditing, setIsEditing] = useState(false);
@@ -26,6 +28,19 @@ export const LinkPopup = () => {
 
   const target = appState.linkState?.targetDom || null;
 
+  const closeHandle = () => {
+    setIsOpening(false);
+    setLinkState(null);
+    setIsEditing(false);
+    setUrl('');
+    if (target) {
+      setAppState({
+        ...appState,
+        linkState: null,
+      });
+    }
+  };
+
   useEffect(() => {
     if (target) {
       setIsOpening(true);
@@ -40,29 +55,30 @@ export const LinkPopup = () => {
       if (appState.linkState?.isEditing) {
         setIsEditing(true);
       }
-    } else if (!isHovering && !isEditing) {
-      setIsOpening(false);
-      setLinkState(null);
-      setUrl('');
+    } else if (!isHovering) {
+      closeHandle();
+    }
+  }, [target]);
+
+  useEffect(() => {
+    if (!isHovering && !isEditing && !target) {
+      closeHandle();
     }
-  }, [target, isHovering]);
+  }, [isHovering]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
         refs.floating.current &&
         !refs.floating.current.contains(event.target as Node)
       ) {
-        setIsOpening(false);
-        setIsEditing(false);
-        setLinkState(null);
-        setUrl('');
-        if (linkState && url !== linkState.targetElement.url) {
-          const editor = linkState.editor;
-          const node = linkState.targetElement;
-          const path = ReactEditor.findPath(editor, node);
-          Transforms.setNodes(editor, { url: url }, { at: path });
+        if (linkState) {
+          const linkElement = LinkEditor.getLinkElement(linkState.editor);
+          if (linkElement && !(linkElement[0] as LinkElement).url.trim()) {
+            LinkEditor.unwrapLink(linkState.editor);
+          }
         }
+        closeHandle();
       }
     };
 
@@ -72,6 +88,36 @@ export const LinkPopup = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (appState.linkState) {
+      if (isEditing && !appState.linkState.isEditing) {
+        setAppState({
+          ...appState,
+          linkState: {
+            ...appState.linkState,
+            isEditing: true,
+          },
+        });
+      } else if (!isEditing && appState.linkState.isEditing) {
+        setAppState({
+          ...appState,
+          linkState: {
+            ...appState.linkState,
+            isEditing: false,
+          },
+        });
+      }
+    } else if (isEditing) {
+      setAppState({
+        ...appState,
+        linkState: {
+          ...linkState!,
+          isEditing: true,
+        },
+      });
+    }
+  }, [isEditing]);
+
   let timeoutId: any | null = null;
 
   const saveUrl = () => {
@@ -104,19 +150,19 @@ export const LinkPopup = () => {
         <Stack.Row gap={1} align="center">
           {isEditing ? (
             <input
-                type="text"
-                value={url}
-                onChange={(e) => {
-                  setUrl(e.target.value);
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    saveUrl();
-                  }
-                }}
-                className="link-popup__input"
-                autoFocus
-              />
+              type="text"
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  saveUrl();
+                }
+              }}
+              className="link-popup__input"
+              autoFocus
+            />
           ) : (
             <>
               <a
diff --git a/packages/drawnix/src/drawnix.tsx b/packages/drawnix/src/drawnix.tsx
@@ -27,7 +27,11 @@ import { buildDrawnixHotkeyPlugin } from './plugins/with-hotkey';
 import { withFreehand } from './plugins/freehand/with-freehand';
 import { ThemeToolbar } from './components/toolbar/theme-toolbar';
 import { buildPencilPlugin } from './plugins/with-pencil';
-import { DrawnixContext, DrawnixState } from './hooks/use-drawnix';
+import {
+  DrawnixBoard,
+  DrawnixContext,
+  DrawnixState,
+} from './hooks/use-drawnix';
 import { ClosePencilToolbar } from './components/toolbar/pencil-mode-toolbar';
 import { TTDDialog } from './components/ttd-dialog/ttd-dialog';
 import { CleanConfirm } from './components/clean-confirm/clean-confirm';
@@ -63,6 +67,7 @@ export const Drawnix: React.FC<DrawnixProps> = ({
     disabledScrollOnNonFocus: false,
     themeColors: MindThemeColors,
   };
+
   const [appState, setAppState] = useState<DrawnixState>(() => {
     // TODO: need to consider how to maintenance the pointer state in future
     const md = new MobileDetect(window.navigator.userAgent);
@@ -75,16 +80,29 @@ export const Drawnix: React.FC<DrawnixProps> = ({
     };
   });
 
+  const [board, setBoard] = useState<DrawnixBoard | null>(null);
+
+  if (board) {
+    board.appState = appState;
+  }
+
+  const updateAppState = (newAppState: Partial<DrawnixState>) => {
+    setAppState({
+      ...appState,
+      ...newAppState,
+    });
+  };
+
   const plugins: PlaitPlugin[] = [
     withDraw,
     withGroup,
     withMind,
     withMindExtend,
     withCommonPlugin,
-    buildDrawnixHotkeyPlugin(appState, setAppState),
+    buildDrawnixHotkeyPlugin(updateAppState),
     withFreehand,
-    buildPencilPlugin(appState, setAppState),
-    buildTextLinkPlugin(appState, setAppState),
+    buildPencilPlugin(updateAppState),
+    buildTextLinkPlugin(updateAppState),
   ];
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -111,7 +129,12 @@ export const Drawnix: React.FC<DrawnixProps> = ({
           onThemeChange={onThemeChange}
           onValueChange={onValueChange}
         >
-          <Board afterInit={afterInit}></Board>
+          <Board
+            afterInit={(board) => {
+              setBoard(board as DrawnixBoard);
+              afterInit && afterInit(board);
+            }}
+          ></Board>
           <AppToolbar></AppToolbar>
           <CreationToolbar></CreationToolbar>
           <ZoomToolbar></ZoomToolbar>
diff --git a/packages/drawnix/src/hooks/use-drawnix.tsx b/packages/drawnix/src/hooks/use-drawnix.tsx
@@ -2,14 +2,13 @@
  * A React context for sharing the board object, in a way that re-renders the
  * context whenever changes occur.
  */
-
-import { PlaitPointerType } from '@plait/core';
+import { PlaitBoard, PlaitPointerType } from '@plait/core';
 import { createContext, useContext } from 'react';
 import { MindPointerType } from '@plait/mind';
 import { DrawPointerType } from '@plait/draw';
 import { FreehandShape } from '../plugins/freehand/type';
-import { Editor, Element } from 'slate';
-import { LinkElement } from '@plait-board/react-text';
+import { Editor } from 'slate';
+import { LinkElement } from '@plait/common';
 
 export enum DialogType {
   mermaidToDrawnix = 'mermaidToDrawnix',
@@ -22,11 +21,15 @@ export type DrawnixPointerType =
   | DrawPointerType
   | FreehandShape;
 
+export interface DrawnixBoard extends PlaitBoard {
+  appState: DrawnixState;
+}
+
 export type LinkState = {
   targetDom: HTMLElement;
   editor: Editor;
   targetElement: LinkElement;
-  isEditing?: boolean;
+  isEditing: boolean;
 };
 
 export type DrawnixState = {
diff --git a/packages/drawnix/src/plugins/with-hotkey.ts b/packages/drawnix/src/plugins/with-hotkey.ts
@@ -5,8 +5,7 @@ import { saveAsJSON } from '../data/json';
 import { DrawnixState } from '../hooks/use-drawnix';
 
 export const buildDrawnixHotkeyPlugin = (
-  appState: DrawnixState,
-  setAppState: (appState: DrawnixState) => void
+  updateAppState: (appState: Partial<DrawnixState>) => void
 ) => {
   const withDrawnixHotkey = (board: PlaitBoard) => {
     const { globalKeyDown } = board;
@@ -29,8 +28,7 @@ export const buildDrawnixHotkeyPlugin = (
           isHotkey(['mod+backspace'])(event) ||
           isHotkey(['mod+delete'])(event)
         ) {
-          setAppState({
-            ...appState,
+          updateAppState({
             openCleanConfirm: true,
           });
           event.preventDefault();
diff --git a/packages/drawnix/src/plugins/with-pencil.ts b/packages/drawnix/src/plugins/with-pencil.ts
@@ -12,16 +12,15 @@ export const setIsPencilMode = (board: PlaitBoard, isPencilMode: boolean) => {
 };
 
 export const buildPencilPlugin = (
-  appState: DrawnixState,
-  setAppState: (appState: DrawnixState) => void
+  updateAppState: (appState: Partial<DrawnixState>) => void
 ) => {
   const withPencil = (board: PlaitBoard) => {
     const { pointerDown } = board;
 
     board.pointerDown = (event: PointerEvent) => {
       if (isPencilEvent(event) && !isPencilMode(board)) {
         setIsPencilMode(board, true);
-        setAppState({ ...appState, isPencilMode: true });
+        updateAppState({ isPencilMode: true });
       }
       if (isPencilMode(board) && !isPencilEvent(event)) {
         return;
diff --git a/packages/drawnix/src/plugins/with-text-link.tsx b/packages/drawnix/src/plugins/with-text-link.tsx
@@ -1,12 +1,16 @@
-import { PlaitBoard, PlaitPointerType } from '@plait/core';
-import { DrawnixState } from '../hooks/use-drawnix';
+import {
+  isMovingElements,
+  PlaitBoard,
+  PlaitPointerType,
+  throttleRAF,
+} from '@plait/core';
+import { DrawnixBoard, DrawnixState } from '../hooks/use-drawnix';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
-import { LinkElement } from '@plait-board/react-text';
+import { isResizing, LinkElement } from '@plait/common';
 
 export const buildTextLinkPlugin = (
-  appState: DrawnixState,
-  setAppState: (appState: DrawnixState) => void
+  updateAppState: (appState: Partial<DrawnixState>) => void
 ) => {
   const withTextLink = (board: PlaitBoard) => {
     const { pointerMove } = board;
@@ -16,46 +20,53 @@ export const buildTextLinkPlugin = (
     let timeoutId: any | null = null;
 
     board.pointerMove = (event: PointerEvent) => {
+      const { appState } = board as DrawnixBoard;
+      const isEditing =
+        appState && appState.linkState && appState.linkState.isEditing;
       if (
-        PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
-        PlaitBoard.isPointer(board, PlaitPointerType.hand)
+        (PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
+          PlaitBoard.isPointer(board, PlaitPointerType.hand)) &&
+        !isMovingElements(board) &&
+        !isResizing(board) &&
+        !isEditing
       ) {
-        const textLinkDom = (event.target as HTMLElement).closest(
-          '.plait-board-link'
-        ) as HTMLElement | null;
-        if (textLinkDom && textLinkDom !== target) {
-          const editable = textLinkDom.closest(
-            '.plait-text-container'
-          ) as HTMLElement;
-          const editor = ReactEditor.toSlateNode(
-            undefined as unknown as Editor,
-            editable
-          ) as Editor;
-          const node = ReactEditor.toSlateNode(
-            undefined as unknown as Editor,
-            textLinkDom
-          ) as LinkElement;
-          target = textLinkDom;
-          setAppState({
-            ...appState,
-            linkState: {
-              targetDom: textLinkDom,
-              targetElement: node,
-              editor,
-            },
-          });
-          clearTimeout(timeoutId);
-        } else {
-          if (!textLinkDom && target) {
-            timeoutId = setTimeout(() => {
-              setAppState({
-                ...appState,
-                linkState: null,
-              });
-            }, 300);
-            target = null;
+        throttleRAF(board, 'with-text-link', () => {
+          const textLinkDom = (event.target as HTMLElement).closest(
+            '.plait-board-link'
+          ) as HTMLElement | null;
+          if (textLinkDom && textLinkDom !== target) {
+            const editable = textLinkDom.closest(
+              '.plait-text-container'
+            ) as HTMLElement;
+            const editor = ReactEditor.toSlateNode(
+              undefined as unknown as Editor,
+              editable
+            ) as Editor;
+            const node = ReactEditor.toSlateNode(
+              undefined as unknown as Editor,
+              textLinkDom
+            ) as LinkElement;
+            target = textLinkDom;
+            updateAppState({
+              linkState: {
+                targetDom: textLinkDom,
+                targetElement: node,
+                editor,
+                isEditing: false,
+              },
+            });
+            clearTimeout(timeoutId);
+          } else {
+            if (!textLinkDom && target) {
+              timeoutId = setTimeout(() => {
+                updateAppState({
+                  linkState: null,
+                });
+              }, 300);
+              target = null;
+            }
           }
-        }
+        });
       }
       pointerMove(event);
     };
