diff --git a/.changeset/orange-dolphins-hear.md b/.changeset/orange-dolphins-hear.md new file mode 100644 index 0000000000..aece883efa --- /dev/null +++ b/.changeset/orange-dolphins-hear.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-ui": patch +--- + +refactor node type determination logic in turn-into-dropdown component diff --git a/.changeset/serious-bikes-remember.md b/.changeset/serious-bikes-remember.md new file mode 100644 index 0000000000..b9253ea3c9 --- /dev/null +++ b/.changeset/serious-bikes-remember.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-ui": patch +--- + +refactor type determination logic in turn-into-dropdown component 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 8f94345607..f3a72c669b 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 @@ -4,12 +4,10 @@ import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote'; import { - type TElement, collapseSelection, - findNode, focusEditor, + getNodeEntries, isBlock, - isSelectionExpanded, toggleNodeType, useEditorRef, useEditorSelector, @@ -109,20 +107,24 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!; export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) { const value: string = useEditorSelector((editor) => { - if (!isSelectionExpanded(editor)) { - const entry = findNode(editor!, { - match: (n) => isBlock(editor, n), + let initialNodeType: string = ELEMENT_PARAGRAPH; + let allNodesMatchInitialNodeType = false; + const codeBlockEntries = getNodeEntries(editor, { + match: (n) => isBlock(editor, n), + mode: 'highest', + }); + const nodes = Array.from(codeBlockEntries); + + if (nodes.length > 0) { + initialNodeType = nodes[0][0].type as string; + allNodesMatchInitialNodeType = nodes.every(([node]) => { + const type: string = (node?.type as string) || ELEMENT_PARAGRAPH; + + return type === initialNodeType; }); - - if (entry) { - return ( - items.find((item) => item.value === entry[0].type)?.value ?? - ELEMENT_PARAGRAPH - ); - } } - return ELEMENT_PARAGRAPH; + return allNodesMatchInitialNodeType ? initialNodeType : ELEMENT_PARAGRAPH; }, []); const editor = useEditorRef(); 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 156cf6316b..3d0819b775 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 @@ -4,12 +4,10 @@ import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote'; import { - type TElement, collapseSelection, - findNode, focusEditor, + getNodeEntries, isBlock, - isCollapsed, toggleNodeType, useEditorRef, useEditorSelector, @@ -79,20 +77,24 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!; export function TurnIntoDropdownMenu(props: DropdownMenuProps) { const value: string = useEditorSelector((editor) => { - if (isCollapsed(editor.selection)) { - const entry = findNode(editor, { - match: (n) => isBlock(editor, n), - }); + let initialNodeType: string = ELEMENT_PARAGRAPH; + let allNodesMatchInitialNodeType = false; + const codeBlockEntries = getNodeEntries(editor, { + match: (n) => isBlock(editor, n), + mode: 'highest', + }); + const nodes = Array.from(codeBlockEntries); + + if (nodes.length > 0) { + initialNodeType = nodes[0][0].type as string; + allNodesMatchInitialNodeType = nodes.every(([node]) => { + const type: string = (node?.type as string) || ELEMENT_PARAGRAPH; - if (entry) { - return ( - items.find((item) => item.value === entry[0].type)?.value ?? - ELEMENT_PARAGRAPH - ); - } + return type === initialNodeType; + }); } - return ELEMENT_PARAGRAPH; + return allNodesMatchInitialNodeType ? initialNodeType : ELEMENT_PARAGRAPH; }, []); const editor = useEditorRef(); diff --git a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx index e2b3e1feba..1eca1e4d50 100644 --- a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx @@ -3,11 +3,9 @@ import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote'; import { collapseSelection, - findNode, focusEditor, + getNodeEntries, isBlock, - isCollapsed, - TElement, toggleNodeType, useEditorRef, useEditorSelector, @@ -77,20 +75,24 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!; export function TurnIntoDropdownMenu(props: DropdownMenuProps) { const value: string = useEditorSelector((editor) => { - if (isCollapsed(editor.selection)) { - const entry = findNode(editor, { - match: (n) => isBlock(editor, n), - }); + let initialNodeType: string = ELEMENT_PARAGRAPH; + let allNodesMatchInitialNodeType = false; + const codeBlockEntries = getNodeEntries(editor, { + match: (n) => isBlock(editor, n), + mode: 'highest', + }); + const nodes = Array.from(codeBlockEntries); + + if (nodes.length > 0) { + initialNodeType = nodes[0][0].type as string; + allNodesMatchInitialNodeType = nodes.every(([node]) => { + const type: string = (node?.type as string) || ELEMENT_PARAGRAPH; - if (entry) { - return ( - items.find((item) => item.value === entry[0].type)?.value ?? - ELEMENT_PARAGRAPH - ); - } + return type === initialNodeType; + }); } - return ELEMENT_PARAGRAPH; + return allNodesMatchInitialNodeType ? initialNodeType : ELEMENT_PARAGRAPH; }, []); const editor = useEditorRef();