[PULSE-42] feat: text alignment for all editors

packages/editor/package.json

@@ -48,6 +48,7 @@
     "@tiptap/extension-placeholder": "^2.3.0",
     "@tiptap/extension-task-item": "^2.1.13",
     "@tiptap/extension-task-list": "^2.1.13",
+    "@tiptap/extension-text-align": "^2.8.0",
     "@tiptap/extension-text-style": "^2.7.1",
     "@tiptap/extension-underline": "^2.1.13",
     "@tiptap/pm": "^2.1.13",

packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx

@@ -0,0 +1,89 @@
+import { Editor } from "@tiptap/core";
+import { AlignCenter, AlignLeft, AlignRight, LucideIcon } from "lucide-react";
+// components
+import { TextAlignItem } from "@/components/menus";
+// helpers
+import { cn } from "@/helpers/common";
+// types
+import { TEditorCommands } from "@/types";
+
+type Props = {
+  editor: Editor;
+};
+
+export const TextAlignmentSelector: React.FC<Props> = (props) => {
+  const { editor } = props;
+
+  const menuItem = TextAlignItem(editor);
+
+  const textAlignmentOptions: {
+    itemKey: TEditorCommands;
+    renderKey: string;
+    icon: LucideIcon;
+    command: () => void;
+    isActive: () => boolean;
+  }[] = [
+    {
+      itemKey: "text-align",
+      renderKey: "text-align-left",
+      icon: AlignLeft,
+      command: () =>
+        menuItem.command({
+          alignment: "left",
+        }),
+      isActive: () =>
+        menuItem.isActive({
+          alignment: "left",
+        }),
+    },
+    {
+      itemKey: "text-align",
+      renderKey: "text-align-center",
+      icon: AlignCenter,
+      command: () =>
+        menuItem.command({
+          alignment: "center",
+        }),
+      isActive: () =>
+        menuItem.isActive({
+          alignment: "center",
+        }),
+    },
+    {
+      itemKey: "text-align",
+      renderKey: "text-align-right",
+      icon: AlignRight,
+      command: () =>
+        menuItem.command({
+          alignment: "right",
+        }),
+      isActive: () =>
+        menuItem.isActive({
+          alignment: "right",
+        }),
+    },
+  ];
+
+  return (
+    <div className="flex gap-0.5 px-2">
+      {textAlignmentOptions.map((item) => (
+        <button
+          key={item.renderKey}
+          type="button"
+          onClick={(e) => {
+            item.command();
+            e.stopPropagation();
+          }}
+          className={cn(
+            "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
+            {
+              "bg-custom-background-80 text-custom-text-100": item.isActive(),
+            }
+          )}
+        >
+          <item.icon className="size-4" />
+        </button>
+      ))}
+    </div>
+  );
+};

packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx

@@ -64,7 +64,7 @@ export const BubbleMenuColorSelector: FC<Props> = (props) => {
                   style={{
                     backgroundColor: color.textColor,
                   }}
-                  onClick={() => TextColorItem(editor).command(color.key)}
+                  onClick={() => TextColorItem(editor).command({ color: color.key })}
                 />
               ))}
               <button
@@ -87,7 +87,7 @@ export const BubbleMenuColorSelector: FC<Props> = (props) => {
                   style={{
                     backgroundColor: color.backgroundColor,
                   }}
-                  onClick={() => BackgroundColorItem(editor).command(color.key)}
+                  onClick={() => BackgroundColorItem(editor).command({ color: color.key })}
                 />
               ))}
               <button

packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx

@@ -19,6 +19,8 @@ import {
 } from "@/components/menus";
 // helpers
 import { cn } from "@/helpers/common";
+// types
+import { TEditorCommands } from "@/types";
 
 type Props = {
   editor: Editor;
@@ -29,7 +31,7 @@ type Props = {
 export const BubbleMenuNodeSelector: FC<Props> = (props) => {
   const { editor, isOpen, setIsOpen } = props;
 
-  const items: EditorMenuItem[] = [
+  const items: EditorMenuItem<TEditorCommands>[] = [
     TextItem(editor),
     HeadingOneItem(editor),
     HeadingTwoItem(editor),
@@ -44,7 +46,7 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
     CodeItem(editor),
   ];
 
-  const activeItem = items.filter((item) => item.isActive("")).pop() ?? {
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
     name: "Multiple",
   };
 

packages/editor/src/core/components/menus/bubble-menu/root.tsx

@@ -7,7 +7,6 @@ import {
   BubbleMenuLinkSelector,
   BubbleMenuNodeSelector,
   CodeItem,
-  EditorMenuItem,
   ItalicItem,
   StrikeThroughItem,
   UnderLineItem,
@@ -16,6 +15,8 @@ import {
 import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
 // helpers
 import { cn } from "@/helpers/common";
+// local components
+import { TextAlignmentSelector } from "./alignment-selector";
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
 
@@ -26,7 +27,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
   const [isSelecting, setIsSelecting] = useState(false);
 
-  const items: EditorMenuItem[] = props.editor.isActive("code")
+  const basicFormattingOptions = props.editor.isActive("code")
     ? [CodeItem(props.editor)]
     : [BoldItem(props.editor), ItalicItem(props.editor), UnderLineItem(props.editor), StrikeThroughItem(props.editor)];
 
@@ -132,7 +133,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
             )}
           </div>
           <div className="flex gap-0.5 px-2">
-            {items.map((item) => (
+            {basicFormattingOptions.map((item) => (
               <button
                 key={item.key}
                 type="button"
@@ -151,6 +152,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
               </button>
             ))}
           </div>
+          <TextAlignmentSelector editor={props.editor} />
         </>
       )}
     </BubbleMenu>