Refactor alignment determination logic in useAlignDropdownMenuState t…

…o handle multiple nodes and simplify return conditions
udecode · May 20, 2024 · 168ed8f · 168ed8f
1 parent c9efba4
commit 168ed8f
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 71 deletions.
diff --git a/packages/alignment/src/client/useAlignDropdownMenu.ts b/packages/alignment/src/client/useAlignDropdownMenu.ts
@@ -1,31 +1,45 @@
+import type { Location } from 'slate';
+
 import {
   focusEditor,
+  getNodeEntries,
+  isBlock,
   useEditorRef,
   useEditorSelector,
 } from '@udecode/plate-common';
-import { findNode, isCollapsed, isDefined } from '@udecode/plate-common/server';
+import { isDefined } from '@udecode/plate-common/server';
 
 import { type Alignment, KEY_ALIGN, setAlign } from '../index';
 
 export const useAlignDropdownMenuState = () => {
   const value: Alignment = useEditorSelector((editor) => {
-    if (isCollapsed(editor.selection)) {
-      const entry = findNode(editor, {
-        match: (n) => isDefined(n[KEY_ALIGN]),
-      });
-
-      if (entry) {
-        const nodeValue = entry[0][KEY_ALIGN] as string;
-
-        if (nodeValue === 'left') return 'left';
-        if (nodeValue === 'center') return 'center';
-        if (nodeValue === 'right') return 'right';
-        if (nodeValue === 'end') return 'end';
-        if (nodeValue === 'justify') return 'justify';
+    let commonAlignment: string | undefined;
+    const codeBlockEntries = getNodeEntries(editor, {
+      at: editor.selection as Location,
+      match: (n) => isBlock(editor, n),
+    });
+    const nodes = Array.from(codeBlockEntries);
+    nodes.forEach(([node, path]) => {
+      const align: string = (node[KEY_ALIGN] as string) || 'left';
+
+      if (!isDefined(commonAlignment)) {
+        commonAlignment = align;
+      } else if (commonAlignment !== align) {
+        commonAlignment = undefined;
       }
+    });
+
+    if (isDefined(commonAlignment)) {
+      const nodeValue = commonAlignment;
+
+      if (nodeValue === 'left') return 'left';
+      if (nodeValue === 'center') return 'center';
+      if (nodeValue === 'right') return 'right';
+      if (nodeValue === 'end') return 'end';
+      if (nodeValue === 'justify') return 'justify';
     }
 
-    return 'start';
+    return 'left';
   }, []);
 
   return {