fix(@lexical/devtools): Fixed permissions for Edge and improved devto…

…ols tab layout (#5972) - Fixed work of the extension in Edge by adding "tabs" permission - Now header within devtools tab is fixed to simplify work with many editors - On interactive editor selection we now scroll to the respective state
facebook · Apr 26, 2024 · 9df0da1 · 9df0da1
1 parent 988a25a
commit 9df0da1
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 42 deletions.
diff --git a/packages/lexical-devtools/src/components/EditorsRefreshCTA.tsx b/packages/lexical-devtools/src/components/EditorsRefreshCTA.tsx
@@ -42,9 +42,10 @@ function EditorsRefreshCTA({tabID, setErrorMessage}: Props) {
     <Button
       colorScheme="gray"
       size="xs"
+      isLoading={isRefreshing}
       onClick={handleRefreshClick}
       disabled={isRefreshing}>
-      {isRefreshing ? 'Refreshing...' : 'Refresh'}
+      Refresh
     </Button>
   );
 }

diff --git a/packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx b/packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx
@@ -15,6 +15,7 @@ import {
   ButtonGroup,
   Flex,
   Spacer,
+  Text,
 } from '@chakra-ui/react';
 import * as React from 'react';
 import {useState} from 'react';
@@ -45,8 +46,18 @@ function App({tabID}: Props) {
     </Alert>
   ) : (
     <>
-      <Flex>
-        <Box p="4">
+      <Flex
+        as="header"
+        position="fixed"
+        top="0"
+        height="50px"
+        backgroundColor="rgba(255,
+ 255, 255, 0.97)"
+        backdropFilter="saturate(180%) blur(5px)"
+        w="100%"
+        boxShadow="md"
+        zIndex={99}>
+        <Box paddingX="2" alignContent="center">
           <ButtonGroup variant="outline" spacing="2">
             <EditorInspectorButton
               tabID={tabID}
@@ -58,42 +69,44 @@ function App({tabID}: Props) {
             />
           </ButtonGroup>
         </Box>
-        <Box p="4" alignContent="center">
+        <Box pl="4" alignContent="center">
           {states === undefined ? (
-            <span>Loading...</span>
+            <Text fontSize="xs">Loading...</Text>
           ) : (
-            <span>
+            <Text fontSize="xs">
               Found <b>{lexicalCount}</b> editor
               {lexicalCount > 1 || lexicalCount === 0 ? 's' : ''} on the page.
-            </span>
+            </Text>
           )}
         </Box>
         <Spacer />
-        <Box p="2">
+        <Box px="2" alignContent="center">
           <a href="https://lexical.dev" target="_blank">
             <img
               src={lexicalLogo}
               className="logo"
-              width={178}
-              height={40}
+              width={134}
+              height={30}
               alt="Lexical logo"
             />
           </a>
         </Box>
       </Flex>
-      {errorMessage !== '' ? (
-        <div className="card error">{errorMessage}</div>
-      ) : null}
+      <Box as="main" mt="50px">
+        {errorMessage !== '' ? (
+          <div className="card error">{errorMessage}</div>
+        ) : null}
 
-      <Box mt={5}>
-        {lexicalCount > 0 ? (
-          <EditorsList tabID={tabID} setErrorMessage={setErrorMessage} />
-        ) : (
-          <Alert status="info">
-            <AlertIcon />
-            No Lexical editors found on the page.
-          </Alert>
-        )}
+        <Box pt={5}>
+          {lexicalCount > 0 ? (
+            <EditorsList tabID={tabID} setErrorMessage={setErrorMessage} />
+          ) : (
+            <Alert status="info">
+              <AlertIcon />
+              No Lexical editors found on the page.
+            </Alert>
+          )}
+        </Box>
       </Box>
     </>
   );

diff --git a/packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorsList.tsx b/packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorsList.tsx
@@ -21,7 +21,7 @@ import {
 import {TreeView} from '@lexical/devtools-core';
 import {getRPCService} from '@webext-pegasus/rpc';
 import * as React from 'react';
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 import {useExtensionStore} from '../../../store';
 import {SerializedRawEditorState} from '../../../types';
@@ -32,6 +32,7 @@ interface Props {
 }
 
 export function EditorsList({tabID, setErrorMessage}: Props) {
+  const tabRefs = useRef(new Map<number, HTMLDivElement | null>());
   const [expandedItems, setExpandedItems] = useState<number[] | number>([0]);
   const {lexicalState, selectedEditorKey} = useExtensionStore();
   const states = lexicalState[tabID] ?? {};
@@ -42,6 +43,14 @@ export function EditorsList({tabID, setErrorMessage}: Props) {
   useEffect(() => {
     if (selectedEditorIdx !== -1) {
       setExpandedItems([selectedEditorIdx]);
+      setTimeout(
+        () =>
+          tabRefs.current
+            .get(selectedEditorIdx)
+            ?.scrollIntoView({behavior: 'smooth', block: 'start'}),
+        // Delay scrolling to let accordion finish it's animation first
+        100,
+      );
     }
   }, [selectedEditorIdx]);
 
@@ -61,8 +70,8 @@ export function EditorsList({tabID, setErrorMessage}: Props) {
       onChange={setExpandedItems}
       allowMultiple={true}
       allowToggle={true}>
-      {Object.entries(states).map(([key, state]) => (
-        <AccordionItem key={key}>
+      {Object.entries(states).map(([key, state], idx) => (
+        <AccordionItem key={key} ref={(el) => tabRefs.current.set(idx, el)}>
           <h2>
             <AccordionButton>
               <Box as="span" flex="1" textAlign="left">

diff --git a/packages/lexical-devtools/src/entrypoints/popup/App.tsx b/packages/lexical-devtools/src/entrypoints/popup/App.tsx
@@ -7,7 +7,7 @@
  */
 import './App.css';
 
-import {Box, Flex} from '@chakra-ui/react';
+import {Box, Flex, Text} from '@chakra-ui/react';
 import * as React from 'react';
 import {useState} from 'react';
 
@@ -29,31 +29,33 @@ function App({tabID}: Props) {
     <Flex direction="column">
       {errorMessage !== '' ? (
         <Box className="error" mb={2} color="red">
-          {errorMessage}
+          <Text fontSize="xs">{errorMessage}</Text>
         </Box>
       ) : null}
       <Box>
         {states === null ? (
-          <span>
+          <Text fontSize="xs">
             This is a restricted browser page. Lexical DevTools cannot access
             this page.
-          </span>
+          </Text>
         ) : states === undefined ? (
-          <span>Loading...</span>
+          <Text fontSize="xs">Loading...</Text>
         ) : (
           <>
             <Box>
-              Found <b>{lexicalCount}</b> editor
-              {lexicalCount > 1 || lexicalCount === 0 ? 's' : ''} on the page
-              {lexicalCount > 0 ? (
-                <>
-                  {' '}
-                  &#x2705;
-                  <br />
-                  Open the developer tools, and "Lexical" tab will appear to the
-                  right.
-                </>
-              ) : null}
+              <Text fontSize="xs">
+                Found <b>{lexicalCount}</b> editor
+                {lexicalCount > 1 || lexicalCount === 0 ? 's' : ''} on the page
+                {lexicalCount > 0 ? (
+                  <>
+                    {' '}
+                    &#x2705;
+                    <br />
+                    Open the developer tools, and "Lexical" tab will appear to
+                    the right.
+                  </>
+                ) : null}
+              </Text>
             </Box>
 
             <Box mt={1}>

diff --git a/packages/lexical-devtools/wxt.config.ts b/packages/lexical-devtools/wxt.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
         48: '/icon/48.png',
       },
       name: 'Lexical Developer Tools',
-      permissions: ['scripting', 'storage'],
+      permissions: ['scripting', 'storage', 'tabs'],
       web_accessible_resources: [
         {
           extension_ids: [],