feat: add alignment action to tiptap toolbar with dropdown menu for text alignment options

aXenDeveloper · aXenDeveloper · commit e9479c869838 · 2025-09-08T17:25:26.000+02:00
diff --git a/apps/api/src/locales/@vitnode/core/en.json b/apps/api/src/locales/@vitnode/core/en.json
@@ -9,9 +9,17 @@
         "bold": "Bold",
         "italic": "Italic",
         "underline": "Underline",
+        "ordered_list": "Ordered List",
+        "bullet_list": "Bullet List",
         "text_format_more": {
           "label": "More text formats",
           "strike": "Strike"
+        },
+        "alignments": {
+          "left": "Left align",
+          "center": "Center align",
+          "right": "Right align",
+          "justify": "Justify align"
         }
       },
       "theme_switcher": "Toggle Theme",
diff --git a/apps/docs/src/locales/@vitnode/core/en.json b/apps/docs/src/locales/@vitnode/core/en.json
@@ -9,9 +9,17 @@
         "bold": "Bold",
         "italic": "Italic",
         "underline": "Underline",
+        "ordered_list": "Ordered List",
+        "bullet_list": "Bullet List",
         "text_format_more": {
           "label": "More text formats",
           "strike": "Strike"
+        },
+        "alignments": {
+          "left": "Left align",
+          "center": "Center align",
+          "right": "Right align",
+          "justify": "Justify align"
         }
       },
       "theme_switcher": "Toggle Theme",
diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
   "extends": ["@vitnode/config/biome"],
   "root": true,
   "files": {
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "test:e2e": "turbo test:e2e"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.3",
+    "@biomejs/biome": "2.2.2",
     "@types/node": "^24.3.1",
     "@vitnode/config": "workspace:*",
     "prettier": "^3.6.2",
diff --git a/packages/config/README.md b/packages/config/README.md
@@ -21,7 +21,7 @@ This package provides a default Biome configuration, TypeScript configuration fo
 
 ```json
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
   "extends": ["@vitnode/config/biome"],
   "root": true
 }
diff --git a/packages/config/biome.json b/packages/config/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
   "root": false,
   "vcs": {
     "enabled": true,
diff --git a/packages/config/package.json b/packages/config/package.json
@@ -28,11 +28,11 @@
     }
   },
   "peerDependencies": {
-    "@biomejs/biome": "2.2.3",
+    "@biomejs/biome": "2.2.2",
     "typescript": "5.9.x"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.3",
+    "@biomejs/biome": "2.2.2",
     "typescript": "^5.9.2"
   }
 }
diff --git a/packages/create-vitnode-app/copy-of-vitnode-app/biome/biome.json b/packages/create-vitnode-app/copy-of-vitnode-app/biome/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
   "extends": ["@vitnode/config/biome"],
   "root": false
 }
diff --git a/packages/create-vitnode-app/src/create/create-package-json.ts b/packages/create-vitnode-app/src/create/create-package-json.ts
@@ -33,7 +33,7 @@ const versions = {
   typescript: "^5.9.2",
   tsx: "^4.20.5",
   tscAlias: "^1.8.16",
-  biome: "^2.2.3",
+  biome: "2.2.2",
   tailwind: "^4.1.12",
   tailwindPostcss: "^4.1.13",
   postcss: "^8.5.6",
diff --git a/packages/vitnode/package.json b/packages/vitnode/package.json
@@ -112,6 +112,7 @@
     "@hono/swagger-ui": "^0.5.2",
     "@react-email/preview-server": "^4.2.8",
     "@tanstack/react-query": "^5.87.1",
+    "@tiptap/extension-text-align": "^3.4.1",
     "@tiptap/pm": "^3.4.1",
     "@tiptap/react": "^3.4.1",
     "@tiptap/starter-kit": "^3.4.1",
diff --git a/packages/vitnode/src/components/tiptap/extension.ts b/packages/vitnode/src/components/tiptap/extension.ts
@@ -1,3 +1,4 @@
+import TextAlign from "@tiptap/extension-text-align";
 import type { Extensions } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -19,4 +20,7 @@ export const tiptapExtensions: Extensions = [
       levels: [...SUPPORTED_HEADINGS_LEVELS],
     },
   }),
+  TextAlign.configure({
+    types: ["heading", "paragraph"],
+  }),
 ];
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/alignment-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/alignment-action.tsx
@@ -0,0 +1,111 @@
+import { useEditorState } from "@tiptap/react";
+import {
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  ChevronDown,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { CtrlOrCommandCharacter } from "@/lib/ctrl-or-command-character";
+import { cn } from "@/lib/utils";
+import { useToolbarEditor } from "../use-toolbar-editor";
+
+export const AlignmentAction = () => {
+  const t = useTranslations("core.global.editor");
+  const { editor } = useToolbarEditor();
+  const { isAlignActive } = useEditorState({
+    editor,
+    selector: ctx => {
+      return {
+        isAlignActive: () => {
+          if (ctx.editor.isActive({ textAlign: "left" })) {
+            return "left";
+          }
+
+          if (ctx.editor.isActive({ textAlign: "center" })) {
+            return "center";
+          }
+          if (ctx.editor.isActive({ textAlign: "right" })) {
+            return "right";
+          }
+          if (ctx.editor.isActive({ textAlign: "justify" })) {
+            return "justify";
+          }
+
+          return "left";
+        },
+      };
+    },
+  });
+
+  const alignments = [
+    {
+      label: t("alignments.left"),
+      value: "left" as const,
+      icon: <AlignLeftIcon />,
+      shortcut: "L",
+    },
+    {
+      label: t("alignments.center"),
+      value: "center" as const,
+      icon: <AlignCenterIcon />,
+      shortcut: "E",
+    },
+    {
+      label: t("alignments.right"),
+      value: "right" as const,
+      icon: <AlignRightIcon />,
+      shortcut: "R",
+    },
+    {
+      label: t("alignments.justify"),
+      value: "justify" as const,
+      icon: <AlignJustifyIcon />,
+      shortcut: "J",
+    },
+  ];
+  const activeAlignment = alignments.find(a => a.value === isAlignActive());
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="w-40 justify-between" variant="ghost">
+          {activeAlignment?.icon ?? <AlignLeftIcon />}
+          {t(`alignments.${activeAlignment?.value ?? "left"}`)}
+
+          <ChevronDown className="ml-auto" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-[14rem]">
+        {alignments.map(item => (
+          <DropdownMenuItem
+            key={item.value}
+            onClick={() =>
+              editor.chain().focus().setTextAlign(item.value).run()
+            }
+            className={cn({
+              "bg-accent": activeAlignment?.value === item.value,
+            })}
+          >
+            {item.icon}
+            {t(`alignments.${item.value}`)}
+            <DropdownMenuShortcut>
+              <CtrlOrCommandCharacter />
+              +Shift+{item.shortcut}
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/headings-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/headings-action.tsx
@@ -60,7 +60,7 @@ export const HeadingsAction = () => {
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="min-w-[12rem]" align="start">
+      <DropdownMenuContent className="min-w-[12rem]">
         <DropdownMenuItem
           onClick={() => editor.chain().focus().setParagraph().run()}
           className={cn({
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
@@ -1,5 +1,5 @@
 import { useEditorState } from "@tiptap/react";
-import { ItalicIcon } from "lucide-react";
+import { ListIcon, ListOrderedIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Toggle } from "@/components/ui/toggle";
 import { TooltipWithContent } from "@/components/ui/tooltip";
@@ -9,11 +9,12 @@ import { TooltipShortcut } from "./utils/tooltip-shortcut";
 export const ListAction = () => {
   const t = useTranslations("core.global.editor");
   const { editor } = useToolbarEditor();
-  const { isItalic } = useEditorState({
+  const { isBulletList, isOrderedList } = useEditorState({
     editor,
     selector: ctx => {
       return {
-        isItalic: ctx.editor.isActive("italic"),
+        isOrderedList: ctx.editor.isActive("orderedList"),
+        isBulletList: ctx.editor.isActive("bulletList"),
       };
     },
   });
@@ -23,37 +24,37 @@ export const ListAction = () => {
       <TooltipWithContent
         text={
           <>
-            {t("italic")}
+            {t("bullet_list")}
             <TooltipShortcut>+I</TooltipShortcut>
           </>
         }
       >
         <div>
           <Toggle
-            aria-label={t("italic")}
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-            pressed={isItalic}
+            aria-label={t("bullet_list")}
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            pressed={isBulletList}
           >
-            <ItalicIcon />
+            <ListIcon />
           </Toggle>
         </div>
       </TooltipWithContent>
 
       <TooltipWithContent
         text={
           <>
-            {t("italic")}
+            {t("ordered_list")}
             <TooltipShortcut>+I</TooltipShortcut>
           </>
         }
       >
         <div>
           <Toggle
-            aria-label={t("italic")}
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-            pressed={isItalic}
+            aria-label={t("ordered_list")}
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            pressed={isOrderedList}
           >
-            <ItalicIcon />
+            <ListOrderedIcon />
           </Toggle>
         </div>
       </TooltipWithContent>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx b/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
@@ -1,8 +1,10 @@
 import type { Editor } from "@tiptap/react";
 import { Separator } from "@/components/ui/separator";
+import { AlignmentAction } from "./actions/alignment-action";
 import { BoldAction } from "./actions/bold-action";
 import { HeadingsAction } from "./actions/headings-action";
 import { ItalicAction } from "./actions/italic-action";
+import { ListAction } from "./actions/list-action";
 import { TextFormatMore } from "./actions/text-format-more/text-format-more";
 import { UnderlineAction } from "./actions/underline-action";
 import { UndoRedoActions } from "./actions/undo-redo-actions";
@@ -19,8 +21,10 @@ export const TipTapToolbar = ({ editor }: { editor: Editor }) => {
         <BoldAction />
         <ItalicAction />
         <UnderlineAction />
-
         <TextFormatMore />
+        <AlignmentAction />
+        <Separator orientation="vertical" className="mx-2" />
+        <ListAction />
       </div>
     </ToolbarEditorContext>
   );
diff --git a/packages/vitnode/src/components/ui/toggle.tsx b/packages/vitnode/src/components/ui/toggle.tsx
@@ -7,7 +7,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap cursor-pointer",
   {
     variants: {
       variant: {
diff --git a/packages/vitnode/src/locales/en.json b/packages/vitnode/src/locales/en.json
@@ -9,9 +9,17 @@
         "bold": "Bold",
         "italic": "Italic",
         "underline": "Underline",
+        "ordered_list": "Ordered List",
+        "bullet_list": "Bullet List",
         "text_format_more": {
           "label": "More text formats",
           "strike": "Strike"
+        },
+        "alignments": {
+          "left": "Left align",
+          "center": "Center align",
+          "right": "Right align",
+          "justify": "Justify align"
         }
       },
       "theme_switcher": "Toggle Theme",
diff --git a/packages/vitnode/src/tiptap.css b/packages/vitnode/src/tiptap.css
@@ -17,4 +17,13 @@
   h4 {
     @apply text-xl font-semibold tracking-tight;
   }
+
+  ul,
+  ol {
+    @apply my-4 ml-6 space-y-2;
+  }
+
+  p {
+    @apply [&:not(:first-child)]:mt-2;
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",`
	`2`	`+ "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",`
`3`	`3`	`"extends": ["@vitnode/config/biome"],`
`4`	`4`	`"root": true,`
`5`	`5`	`"files": {`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ This package provides a default Biome configuration, TypeScript configuration fo`
`21`	`21`
`22`	`22`	```json
`23`	`23`	`{`
`24`		`- "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",`
	`24`	`+ "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",`
`25`	`25`	`"extends": ["@vitnode/config/biome"],`
`26`	`26`	`"root": true`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,11 +28,11 @@`
`28`	`28`	`}`
`29`	`29`	`},`
`30`	`30`	`"peerDependencies": {`
`31`		`- "@biomejs/biome": "2.2.3",`
	`31`	`+ "@biomejs/biome": "2.2.2",`
`32`	`32`	`"typescript": "5.9.x"`
`33`	`33`	`},`
`34`	`34`	`"devDependencies": {`
`35`		`- "@biomejs/biome": "^2.2.3",`
	`35`	`+ "@biomejs/biome": "2.2.2",`
`36`	`36`	`"typescript": "^5.9.2"`
`37`	`37`	`}`
`38`	`38`	`}`