diff --git a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx index a1e041bd4d..6b4de7ee23 100644 --- a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx @@ -106,10 +106,6 @@ const items = [ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!; export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) { - const editor = useEditorRef(); - const openState = useOpenState(); - - // eslint-disable-next-line @typescript-eslint/no-shadow const value: string = useEditorSelector((editor) => { if (!isSelectionExpanded(editor)) { const entry = findNode(editor!, { @@ -127,6 +123,9 @@ export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) { return ELEMENT_PARAGRAPH; }, []); + const editor = useEditorRef(); + const openState = useOpenState(); + const selectedItem = items.find((item) => item.value === value) ?? defaultItem; const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem; diff --git a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx index cc5de0e78e..6d75bb5ac1 100644 --- a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx @@ -31,14 +31,12 @@ import { import { ToolbarButton } from './toolbar'; export function TableDropdownMenu(props: DropdownMenuProps) { - const editor = useEditorRef(); - const tableSelected = useEditorSelector( - // eslint-disable-next-line @typescript-eslint/no-shadow (editor) => someNode(editor, { match: { type: ELEMENT_TABLE } }), [] ); + const editor = useEditorRef(); const openState = useOpenState(); return ( diff --git a/apps/www/src/registry/default/plate-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element.tsx index a7b0130694..3ff8aafed2 100644 --- a/apps/www/src/registry/default/plate-ui/table-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-element.tsx @@ -115,15 +115,15 @@ const TableFloatingToolbar = React.forwardRef< const element = useElement(); const { props: buttonProps } = useRemoveNodeButton({ element }); - const readOnly = useReadOnly(); - const selected = useSelected(); - const editor = useEditorRef(); - const selectionCollapsed = useEditorSelector( - // eslint-disable-next-line @typescript-eslint/no-shadow (editor) => !isSelectionExpanded(editor), [] ); + + const readOnly = useReadOnly(); + const selected = useSelected(); + const editor = useEditorRef(); + const collapsed = !readOnly && selected && selectionCollapsed; const open = !readOnly && selected; diff --git a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx index 51b843cb1e..d0221d0a58 100644 --- a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx @@ -76,10 +76,6 @@ const items = [ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!; export function TurnIntoDropdownMenu(props: DropdownMenuProps) { - const editor = useEditorRef(); - const openState = useOpenState(); - - // eslint-disable-next-line @typescript-eslint/no-shadow const value: string = useEditorSelector((editor) => { if (isCollapsed(editor.selection)) { const entry = findNode(editor, { @@ -97,6 +93,9 @@ export function TurnIntoDropdownMenu(props: DropdownMenuProps) { return ELEMENT_PARAGRAPH; }, []); + const editor = useEditorRef(); + const openState = useOpenState(); + const selectedItem = items.find((item) => item.value === value) ?? defaultItem; const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;