feat(whiteboard): keep editing state when crossing editor

libs/components/board-shapes/src/editor-util/EditorUtil.tsx

@@ -64,18 +64,7 @@ export class EditorUtil extends TDShapeUtil<T, E> {
     };
 
     Component = TDShapeUtil.Component<T, E, TDMeta>(
-        (
-            {
-                shape,
-                meta: {
-                    app: { useStore },
-                },
-                events,
-                isEditing,
-                onShapeChange,
-            },
-            ref
-        ) => {
+        ({ shape, meta: { app }, events, isEditing, onShapeChange }, ref) => {
             const containerRef = useRef<HTMLDivElement>();
             const {
                 workspace,
@@ -83,7 +72,7 @@ export class EditorUtil extends TDShapeUtil<T, E> {
                 size: [width, height],
             } = shape;
 
-            const state = useStore();
+            const state = app.useStore();
             const { currentPageId } = state.appState;
             const { editingId } = state.document.pageStates[currentPageId];
             const { shapes } = state.document.pages[currentPageId];
@@ -134,11 +123,19 @@ export class EditorUtil extends TDShapeUtil<T, E> {
                 [isEditing]
             );
 
+            const activateIfEditing = useCallback(() => {
+                if (editingText && editingId !== shape.id) {
+                    app.setEditingText(shape.id);
+                }
+            }, [app, shape.id, editingText, editingId]);
+
             return (
                 <HTMLContainer ref={ref} {...events}>
                     <Container
                         ref={containerRef}
                         onPointerDown={stopPropagation}
+                        onMouseEnter={activateIfEditing}
+                        onDragEnter={activateIfEditing}
                     >
                         <MemoAffineEditor
                             workspace={workspace}

libs/components/board-state/src/tldraw-app.ts

@@ -967,6 +967,29 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         );
     };
 
+    /**
+     * used for EditorUtil only
+     * @param id
+     * @returns
+     */
+    setEditingText = (id: string) => {
+        if (this.readOnly) return;
+
+        this.patchState(
+            {
+                document: {
+                    pageStates: {
+                        [this.currentPageId]: {
+                            selectedIds: [id],
+                            editingId: id,
+                        },
+                    },
+                },
+            },
+            `set_editing_id`
+        );
+    };
+
     /**
      * Set or clear the hovered id
      * @param id [string]

libs/components/board-types/src/types.ts

@@ -149,6 +149,7 @@ export interface TDMeta {
     isDarkMode: boolean;
     app: {
         useStore: () => TDSnapshot;
+        setEditingText: (id: string) => void;
     };
 }