From b71dc4a04a41907c783511568ee4c100633beefa Mon Sep 17 00:00:00 2001
From: austaras <austaras@outlook.com>
Date: Tue, 2 Aug 2022 15:58:17 +0800
Subject: [PATCH] feat(whiteboard): keep editing state when crossing editor

---
 .../src/editor-util/EditorUtil.tsx            | 23 ++++++++-----------
 libs/components/board-state/src/tldraw-app.ts | 23 +++++++++++++++++++
 libs/components/board-types/src/types.ts      |  1 +
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx b/libs/components/board-shapes/src/editor-util/EditorUtil.tsx
index 237224fe51..430a3069f2 100644
--- a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx
+++ b/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}
diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts
index 9ad3377540..c431a90bde 100644
--- a/libs/components/board-state/src/tldraw-app.ts
+++ b/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]
diff --git a/libs/components/board-types/src/types.ts b/libs/components/board-types/src/types.ts
index 9f678921e9..fbf3e5c308 100644
--- a/libs/components/board-types/src/types.ts
+++ b/libs/components/board-types/src/types.ts
@@ -149,6 +149,7 @@ export interface TDMeta {
     isDarkMode: boolean;
     app: {
         useStore: () => TDSnapshot;
+        setEditingText: (id: string) => void;
     };
 }