init tab states on the panel entry

facebook · May 14, 2024 · 415c970 · 415c970
1 parent 6cd1a62
commit 415c970
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/...ages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorInspectorButton.tsx b/...ages/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
@@ -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
@@ -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) =>