add active state on inspector button

2wheeh · May 10, 2024 · 1e6faa6 · 1e6faa6
1 parent 6a33ccf
commit 1e6faa6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 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
@@ -18,19 +18,26 @@ interface Props {
 }
 
 export function EditorInspectorButton({tabID, setErrorMessage}: Props) {
+  const [isActive, setIsActive] = React.useState(false);
+
   const handleClick = () => {
     const injectedPegasusService = getRPCService<IInjectedPegasusService>(
       'InjectedPegasusService',
       {context: 'window', tabId: tabID},
     );
 
+    if (!isActive) {
+      setIsActive(true);
+    }
+
     injectedPegasusService
       .refreshLexicalEditors()
       .then(() => injectedPegasusService.toggleEditorPicker())
       .catch((err) => {
         setErrorMessage(err.message);
         console.error(err);
-      });
+      })
+      .finally(() => setIsActive(false));
   };
 
   return (
@@ -41,6 +48,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
@@ -85,39 +85,42 @@ export class InjectedPegasusService
     editor.setEditorState(deserializeEditorState(editorState));
   }
 
-  toggleEditorPicker(): void {
-    if (this.pickerActive != null) {
-      this.pickerActive?.stop();
-      this.pickerActive = null;
-
-      return;
-    }
+  toggleEditorPicker(): Promise<void> {
+    return new Promise((resolve) => {
+      if (this.pickerActive != null) {
+        this.pickerActive?.stop();
+        this.pickerActive = null;
 
-    this.pickerActive = new ElementPicker({style: ELEMENT_PICKER_STYLE});
-    this.pickerActive.start({
-      elementFilter: (el) => {
-        let parent: HTMLElement | null = el;
-        while (parent != null && parent.tagName !== 'BODY') {
-          if ('__lexicalEditor' in parent) {
-            return parent;
+        return resolve();
+      }
+
+      this.pickerActive = new ElementPicker({style: ELEMENT_PICKER_STYLE});
+      this.pickerActive.start({
+        elementFilter: (el) => {
+          let parent: HTMLElement | null = el;
+          while (parent != null && parent.tagName !== 'BODY') {
+            if ('__lexicalEditor' in parent) {
+              return parent;
+            }
+            parent = parent.parentElement;
           }
-          parent = parent.parentElement;
-        }
 
-        return false;
-      },
-
-      onClick: (el) => {
-        this.pickerActive?.stop();
-        this.pickerActive = null;
-        if (isLexicalNode(el)) {
-          this.extensionStore
-            .getState()
-            .setSelectedEditorKey(this.tabID, el.__lexicalEditor.getKey());
-        } else {
-          console.warn('Selected Element is not a Lexical node');
-        }
-      },
+          return false;
+        },
+
+        onClick: (el) => {
+          this.pickerActive?.stop();
+          this.pickerActive = null;
+          if (isLexicalNode(el)) {
+            this.extensionStore
+              .getState()
+              .setSelectedEditorKey(this.tabID, el.__lexicalEditor.getKey());
+          } else {
+            console.warn('Selected Element is not a Lexical node');
+          }
+          resolve();
+        },
+      });
     });
   }
 }