Text Align in bubble menu

package.json

@@ -24,6 +24,7 @@
     "@tiptap/extension-placeholder": "2.0.3",
     "@tiptap/extension-task-item": "^2.0.4",
     "@tiptap/extension-task-list": "^2.0.4",
+    "@tiptap/extension-text-align": "^2.1.6",
     "@tiptap/extension-text-style": "^2.0.4",
     "@tiptap/extension-underline": "^2.0.4",
     "@tiptap/pm": "^2.0.4",

ui/editor/components/bubble-menu.tsx

@@ -12,6 +12,7 @@ import { NodeSelector } from "./node-selector";
 import { ColorSelector } from "./color-selector";
 import { LinkSelector } from "./link-selector";
 import { cn } from "@/lib/utils";
+import { TextAlignSelector } from "./text-align-selector";
 
 export interface BubbleMenuItem {
   name: string;
@@ -78,6 +79,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+  const [isTextAlignSelectorOpen, setIsTextAlignSelectorOpen] = useState(false);
 
   return (
     <BubbleMenu
@@ -91,6 +93,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsNodeSelectorOpen(!isNodeSelectorOpen);
           setIsColorSelectorOpen(false);
           setIsLinkSelectorOpen(false);
+          setIsTextAlignSelectorOpen(false);
         }}
       />
       <LinkSelector
@@ -116,14 +119,26 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             />
           </button>
         ))}
+        <TextAlignSelector
+          editor={props.editor}
+          isOpen={isTextAlignSelectorOpen}
+          setIsOpen={() => {
+            setIsTextAlignSelectorOpen(!isTextAlignSelectorOpen);
+            setIsColorSelectorOpen(false);
+            setIsNodeSelectorOpen(false);
+            setIsLinkSelectorOpen(false);
+          }}
+        />
       </div>
+
       <ColorSelector
         editor={props.editor}
         isOpen={isColorSelectorOpen}
         setIsOpen={() => {
           setIsColorSelectorOpen(!isColorSelectorOpen);
           setIsNodeSelectorOpen(false);
           setIsLinkSelectorOpen(false);
+          setIsTextAlignSelectorOpen(false);
         }}
       />
     </BubbleMenu>

ui/editor/components/text-align-selector.tsx

@@ -0,0 +1,91 @@
+import { Editor } from "@tiptap/core";
+import {
+  Check,
+  ChevronDown,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+} from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { BubbleMenuItem } from "./bubble-menu";
+
+interface TextAlignSelectorProps {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const TextAlignSelector: FC<TextAlignSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "Align Left",
+      icon: AlignLeft,
+      command: () => editor.chain().focus().setTextAlign("left").run(),
+      isActive: () => editor.isActive({ textAlign: "left" }),
+    },
+    {
+      name: "Align Center",
+      icon: AlignCenter,
+      command: () => editor.chain().focus().setTextAlign("center").run(),
+      isActive: () => editor.isActive({ textAlign: "center" }),
+    },
+    {
+      name: "Align Right",
+      icon: AlignRight,
+      command: () => editor.chain().focus().setTextAlign("right").run(),
+      isActive: () => editor.isActive({ textAlign: "right" }),
+    },
+    {
+      name: "Align Justify",
+      icon: AlignJustify,
+      command: () => editor.chain().focus().setTextAlign("justify").run(),
+      isActive: () => editor.isActive({ textAlign: "justify" }),
+    },
+  ];
+
+  const activeItem = items.filter((item) => item.isActive()).pop();
+
+  return (
+    <div className="relative h-full">
+      <button
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span>
+          <activeItem.icon className="h-3 w-3" />
+        </span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {isOpen && (
+        <section className="fixed top-full z-[99999] mt-1 flex w-20 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+          {items.map((item, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                item.command();
+                setIsOpen(false);
+              }}
+              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-stone-200 p-1">
+                  <item.icon className="h-3 w-3" />
+                </div>
+              </div>
+              {activeItem && activeItem.name === item.name && (
+                <Check className="h-4 w-4" />
+              )}
+            </button>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+};

ui/editor/extensions/index.tsx

@@ -14,6 +14,7 @@ import SlashCommand from "./slash-command";
 import { InputRule } from "@tiptap/core";
 import UploadImagesPlugin from "@/ui/editor/plugins/upload-images";
 import UpdatedImage from "./updated-image";
+import TextAlign from "@tiptap/extension-text-align";
 
 const CustomImage = TiptapImage.extend({
   addProseMirrorPlugins() {
@@ -137,4 +138,7 @@ export const TiptapExtensions = [
     html: false,
     transformCopiedText: true,
   }),
+  TextAlign.configure({
+    types: ["heading", "paragraph"],
+  }),
 ];