Merge pull request #2953 from shaungrady/add-start-end-to-alignment-p…

…lugin [alignment] Support 'start' and 'end' values, default to 'start'
udecode · Feb 16, 2024 · 45ff410 · 45ff410
2 parents 56a1877 + 67fae94
commit 45ff410
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/light-comics-dream.md b/.changeset/light-comics-dream.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-alignment": patch
+---
+
+[alignment] Support 'start' and 'end' values, default to 'start'
diff --git a/packages/alignment/src/__tests__/setAlign/left.spec.tsx b/packages/alignment/src/__tests__/setAlign/left.spec.tsx
@@ -29,7 +29,7 @@ it('should remove align prop', () => {
     plugins: [createAlignPlugin()],
   });
 
-  setAlign(editor, { value: 'left' });
+  setAlign(editor, { value: 'start' });
 
   expect(editor.children).toEqual(output.children);
 });
diff --git a/packages/alignment/src/createAlignPlugin.ts b/packages/alignment/src/createAlignPlugin.ts
@@ -16,9 +16,9 @@ export const createAlignPlugin = createPluginFactory({
     inject: {
       props: {
         nodeKey: KEY_ALIGN,
-        defaultNodeValue: 'left',
+        defaultNodeValue: 'start',
         styleKey: 'textAlign',
-        validNodeValues: ['left', 'center', 'right', 'justify'],
+        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
         validTypes: [getPluginType(editor, ELEMENT_DEFAULT)],
       },
     },

diff --git a/packages/alignment/src/hooks/useAlignDropdownMenu.ts b/packages/alignment/src/hooks/useAlignDropdownMenu.ts
@@ -18,13 +18,15 @@ export const useAlignDropdownMenuState = () => {
 
       if (entry) {
         const nodeValue = entry[0][KEY_ALIGN] as string;
-        if (nodeValue === 'right') return 'right';
+        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 'left';
+    return 'start';
   }, []);
 
   return {

diff --git a/packages/alignment/src/types.ts b/packages/alignment/src/types.ts
@@ -1 +1 @@
-export type Alignment = 'left' | 'center' | 'right' | 'justify';
+export type Alignment = 'start' | 'left' | 'center' | 'right' | 'end' | 'justify';