Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(@lexical/devtools): Fixed permissions for Edge and improved devtools tab layout #5972

Merged
merged 1 commit into from
Apr 26, 2024
Merged

fix(@lexical/devtools): Fixed permissions for Edge and improved devtools tab layout #5972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/lexical-devtools/src/components/EditorsRefreshCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
55 changes: 34 additions & 21 deletions packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
ButtonGroup,
Flex,
Spacer,
Text,
} from '@chakra-ui/react';
import * as React from 'react';
import {useState} from 'react';
Expand Down Expand Up @@ -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}
Expand All @@ -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>
</>
);
Expand Down
15 changes: 12 additions & 3 deletions packages/lexical-devtools/src/entrypoints/devtools-panel/components/EditorsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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] ?? {};
Expand All @@ -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]);

Expand All @@ -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">
Expand Down
34 changes: 18 additions & 16 deletions packages/lexical-devtools/src/entrypoints/popup/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion packages/lexical-devtools/wxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [],
Expand Down
Loading