[lexical-devtools] Feature: Reflect picker state on inspector button …

…ui (#6077)
facebook · May 15, 2024 · 94c44f4 · 94c44f4
1 parent ec18fcf
commit 94c44f4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 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
@@ -10,6 +10,7 @@ import {IconButton, Image} from '@chakra-ui/react';
 import {getRPCService} from '@webext-pegasus/rpc';
 import * as React from 'react';
 
+import {useExtensionStore} from '../../../store';
 import {IInjectedPegasusService} from '../../injected/InjectedPegasusService';
 
 interface Props {
@@ -18,6 +19,9 @@ interface Props {
 }
 
 export function EditorInspectorButton({tabID, setErrorMessage}: Props) {
+  const {isSelecting} = useExtensionStore();
+  const isActive = isSelecting[tabID] ?? false;
+
   const handleClick = () => {
     const injectedPegasusService = getRPCService<IInjectedPegasusService>(
       'InjectedPegasusService',
@@ -41,6 +45,8 @@ export function EditorInspectorButton({tabID, setErrorMessage}: Props) {
       size="xs"
       onClick={handleClick}
       icon={<Image w={5} src="/inspect.svg" />}
+      isActive={isActive}
+      _active={{bg: 'blue.100'}}
     />
   );
 }
diff --git a/packages/lexical-devtools/src/entrypoints/injected/InjectedPegasusService.ts b/packages/lexical-devtools/src/entrypoints/injected/InjectedPegasusService.ts
@@ -86,18 +86,21 @@ export class InjectedPegasusService
   }
 
   toggleEditorPicker(): void {
-    if (this.pickerActive != null) {
-      this.pickerActive?.stop();
-      this.pickerActive = null;
-
-      return;
+    if (this.pickerActive !== null) {
+      this.deactivatePicker();
+    } else {
+      this.activatePicker();
     }
+  }
+
+  private activatePicker(): void {
+    this.extensionStore.getState().setIsSelecting(this.tabID, true);
 
     this.pickerActive = new ElementPicker({style: ELEMENT_PICKER_STYLE});
     this.pickerActive.start({
       elementFilter: (el) => {
         let parent: HTMLElement | null = el;
-        while (parent != null && parent.tagName !== 'BODY') {
+        while (parent !== null && parent.tagName !== 'BODY') {
           if ('__lexicalEditor' in parent) {
             return parent;
           }
@@ -108,8 +111,7 @@ export class InjectedPegasusService
       },
 
       onClick: (el) => {
-        this.pickerActive?.stop();
-        this.pickerActive = null;
+        this.deactivatePicker();
         if (isLexicalNode(el)) {
           this.extensionStore
             .getState()
@@ -120,4 +122,10 @@ export class InjectedPegasusService
       },
     });
   }
+
+  private deactivatePicker(): void {
+    this.pickerActive?.stop();
+    this.pickerActive = null;
+    this.extensionStore.getState().setIsSelecting(this.tabID, false);
+  }
 }
diff --git a/packages/lexical-devtools/src/store.ts b/packages/lexical-devtools/src/store.ts
@@ -22,16 +22,21 @@ export interface ExtensionState {
   selectedEditorKey: {
     [tabID: number]: string | null;
   };
+  isSelecting: {
+    [tabID: number]: boolean;
+  };
   markTabAsRestricted: (tabID: number) => void;
   setStatesForTab: (
     id: number,
     states: {[editorKey: string]: SerializedRawEditorState},
   ) => void;
   setSelectedEditorKey: (tabID: number, editorKey: string | null) => void;
+  setIsSelecting: (tadID: number, isSelecting: boolean) => void;
 }
 
 export const useExtensionStore = create<ExtensionState>()(
   subscribeWithSelector((set) => ({
+    isSelecting: {},
     lexicalState: {},
     markTabAsRestricted: (tabID: number) =>
       set((state) => ({
@@ -41,6 +46,13 @@ export const useExtensionStore = create<ExtensionState>()(
         },
       })),
     selectedEditorKey: {},
+    setIsSelecting: (tabID: number, isSelecting: boolean) =>
+      set((state) => ({
+        isSelecting: {
+          ...state.isSelecting,
+          [tabID]: isSelecting,
+        },
+      })),
     setSelectedEditorKey: (tabID: number, editorKey: string | null) =>
       set((state) => ({
         selectedEditorKey: {