feat(richtext-lexical): add justify aligment to AlignFeature (#4035) (#…

…4868)
payloadcms · Feb 12, 2024 · 6d6823c · 6d6823c
1 parent ca70298
commit 6d6823c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/packages/richtext-lexical/src/field/features/align/index.ts b/packages/richtext-lexical/src/field/features/align/index.ts
@@ -56,6 +56,22 @@ export const AlignFeature = (): FeatureProvider => {
                 order: 3,
               },
             ]),
+            AlignDropdownSectionWithEntries([
+              {
+                ChildComponent: () =>
+                  // @ts-expect-error
+                  import('../../lexical/ui/icons/AlignJustify').then(
+                    (module) => module.AlignJustifyIcon,
+                  ),
+                isActive: () => false,
+                key: 'align-justify',
+                label: `Align Justify`,
+                onClick: ({ editor }) => {
+                  editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')
+                },
+                order: 4,
+              },
+            ]),
           ],
         },
         props: null,

diff --git a/packages/richtext-lexical/src/field/lexical/ui/icons/AlignJustify/index.tsx b/packages/richtext-lexical/src/field/lexical/ui/icons/AlignJustify/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const AlignJustifyIcon: React.FC = () => (
+  <svg
+    aria-hidden="true"
+    className="icon"
+    fill="none"
+    focusable="false"
+    height="20"
+    viewBox="0 0 20 20"
+    width="20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2.5 5H17.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M2.5 10H17.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M2.5 15H17.5" stroke="currentColor" strokeWidth="1.5" />
+  </svg>
+)