update : logic of iterating over nodes using every in turn into dropd…

…own component
udecode · Jun 4, 2024 · 6294793 · 6294793
1 parent b5ed9ce
commit 6294793
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 49 deletions.
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
@@ -107,28 +107,24 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
 
 export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) {
   const value: string = useEditorSelector((editor) => {
-    let commonSelection: string | undefined;
-    let uniqueTypeFound = false;
+    let firstNodeType: string = ELEMENT_PARAGRAPH;
+    let allNodesMatchFirstNode = false;
     const codeBlockEntries = getNodeEntries(editor, {
       match: (n) => isBlock(editor, n),
+      mode: 'highest',
     });
-
     const nodes = Array.from(codeBlockEntries);
-    nodes.forEach(([node]) => {
-      const type: string = (node?.type as string) || ELEMENT_PARAGRAPH;
 
-      if (uniqueTypeFound) {
-        if (commonSelection !== type) {
-          commonSelection = undefined;
-          uniqueTypeFound = false;
-        }
-      } else {
-        commonSelection = type;
-        uniqueTypeFound = true;
-      }
-    });
+    if (nodes.length > 0) {
+      firstNodeType = nodes[0][0].type as string;
+      allNodesMatchFirstNode = nodes.every(([node]) => {
+        const type: string = (node?.type as string) || ELEMENT_PARAGRAPH;
+
+        return type === firstNodeType;
+      });
+    }
 
-    return commonSelection ?? ELEMENT_PARAGRAPH;
+    return allNodesMatchFirstNode ? firstNodeType : 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
@@ -77,28 +77,24 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
 
 export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
   const value: string = useEditorSelector((editor) => {
-    let commonSelection: string | undefined;
-    let uniqueTypeFound = false;
+    let firstNodeType: string = ELEMENT_PARAGRAPH;
+    let allNodesMatchFirstNode = false;
     const codeBlockEntries = getNodeEntries(editor, {
       match: (n) => isBlock(editor, n),
+      mode: 'highest',
     });
-
     const nodes = Array.from(codeBlockEntries);
-    nodes.forEach(([node]) => {
-      const type: string = (node?.type as string) || ELEMENT_PARAGRAPH;
-
-      if (uniqueTypeFound) {
-        if (commonSelection !== type) {
-          commonSelection = undefined;
-          uniqueTypeFound = false;
-        }
-      } else {
-        commonSelection = type;
-        uniqueTypeFound = true;
-      }
-    });
 
-    return commonSelection ?? ELEMENT_PARAGRAPH;
+    if (nodes.length > 0) {
+      firstNodeType = nodes[0][0].type as string;
+      allNodesMatchFirstNode = nodes.every(([node]) => {
+        const type: string = (node?.type as string) || ELEMENT_PARAGRAPH;
+
+        return type === firstNodeType;
+      });
+    }
+
+    return allNodesMatchFirstNode ? firstNodeType : 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
@@ -75,28 +75,24 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
 
 export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
   const value: string = useEditorSelector((editor) => {
-    let commonSelection: string | undefined;
-    let uniqueTypeFound = false;
+    let firstNodeType: string = ELEMENT_PARAGRAPH;
+    let allNodesMatchFirstNode = false;
     const codeBlockEntries = getNodeEntries(editor, {
       match: (n) => isBlock(editor, n),
+      mode: 'highest',
     });
-
     const nodes = Array.from(codeBlockEntries);
-    nodes.forEach(([node]) => {
-      const type: string = (node?.type as string) || ELEMENT_PARAGRAPH;
 
-      if (uniqueTypeFound) {
-        if (commonSelection !== type) {
-          commonSelection = undefined;
-          uniqueTypeFound = false;
-        }
-      } else {
-        commonSelection = type;
-        uniqueTypeFound = true;
-      }
-    });
+    if (nodes.length > 0) {
+      firstNodeType = nodes[0][0].type as string;
+      allNodesMatchFirstNode = nodes.every(([node]) => {
+        const type: string = (node?.type as string) || ELEMENT_PARAGRAPH;
+
+        return type === firstNodeType;
+      });
+    }
 
-    return commonSelection ?? ELEMENT_PARAGRAPH;
+    return allNodesMatchFirstNode ? firstNodeType : ELEMENT_PARAGRAPH;
   }, []);
 
   const editor = useEditorRef();