From 415c97093051b233d6599aab1b35f76e990ba264 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Tue, 14 May 2024 23:56:21 +0900
Subject: [PATCH] init tab states on the panel entry

---
 .../components/EditorInspectorButton.tsx      |  2 +-
 .../src/entrypoints/devtools-panel/main.tsx   | 20 ++++++++++---------
 packages/lexical-devtools/src/store.ts        | 16 +++++++++++++++
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorInspectorButton.tsx b/packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorInspectorButton.tsx
index 3da34b700ebb..3d24ae1a4628 100644
--- a/packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorInspectorButton.tsx
+++ b/packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorInspectorButton.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 export function EditorInspectorButton({tabID, setErrorMessage}: Props) {
   const {isSelecting} = useExtensionStore();
-  const isActive = isSelecting[tabID] ?? false;
+  const isActive = isSelecting[tabID];
 
   const handleClick = () => {
     const injectedPegasusService = getRPCService<IInjectedPegasusService>(
diff --git a/packages/lexical-devtools/src/entrypoints/devtools-panel/main.tsx b/packages/lexical-devtools/src/entrypoints/devtools-panel/main.tsx
index 8cc392f962d4..815c3c1c4491 100644
--- a/packages/lexical-devtools/src/entrypoints/devtools-panel/main.tsx
+++ b/packages/lexical-devtools/src/entrypoints/devtools-panel/main.tsx
@@ -17,12 +17,14 @@ import App from './App.tsx';
 const tabID = browser.devtools.inspectedWindow.tabId;
 initPegasusTransport();
 
-extensionStoreReady().then(() =>
-  ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-      <ChakraProvider>
-        <App tabID={tabID} />
-      </ChakraProvider>
-    </React.StrictMode>,
-  ),
-);
+extensionStoreReady()
+  .then((store) => store.getState().initTab(tabID))
+  .then(() =>
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+      <React.StrictMode>
+        <ChakraProvider>
+          <App tabID={tabID} />
+        </ChakraProvider>
+      </React.StrictMode>,
+    ),
+  );
diff --git a/packages/lexical-devtools/src/store.ts b/packages/lexical-devtools/src/store.ts
index ba4524b34ac7..c85dad11abd9 100644
--- a/packages/lexical-devtools/src/store.ts
+++ b/packages/lexical-devtools/src/store.ts
@@ -25,6 +25,7 @@ export interface ExtensionState {
   isSelecting: {
     [tabID: number]: boolean;
   };
+  initTab: (tabID: number) => void;
   markTabAsRestricted: (tabID: number) => void;
   setStatesForTab: (
     id: number,
@@ -36,6 +37,21 @@ export interface ExtensionState {
 
 export const useExtensionStore = create<ExtensionState>()(
   subscribeWithSelector((set) => ({
+    initTab: (tabID: number) =>
+      set((state) => ({
+        isSelecting: {
+          ...state.isSelecting,
+          [tabID]: false,
+        },
+        lexicalState: {
+          ...state.lexicalState,
+          [tabID]: null,
+        },
+        selectedEditorKey: {
+          ...state.selectedEditorKey,
+          [tabID]: null,
+        },
+      })),
     isSelecting: {},
     lexicalState: {},
     markTabAsRestricted: (tabID: number) =>