Merge pull request #3239 from kumarajay0412/Bug-Refactor-Type-determi…

…nation-logic-in-turn-into-dropdown-componet Bug-Refactor-Type-determination-logic-in-turn-into-dropdown-component
udecode · Jun 9, 2024 · cd82934 · cd82934
2 parents abc06bc + 6bcce76
commit cd82934
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 42 deletions.
diff --git a/.changeset/orange-dolphins-hear.md 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
@@ -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
@@ -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<TElement>(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
@@ -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<TElement>(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
@@ -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<TElement>(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();