feat(tiptap): add text alignment controls

packages/web-pkg/package.json

@@ -66,6 +66,7 @@
     "@tiptap/extension-task-item": "^3.20.4",
     "@tiptap/extension-task-list": "^3.20.4",
     "@tiptap/extension-underline": "^3.20.4",
+    "@tiptap/extension-text-align": "^3.20.4",
     "@tiptap/markdown": "^3.20.4",
     "@tiptap/pm": "^3.20.4",
     "@tiptap/starter-kit": "^3.20.4",

packages/web-pkg/src/editor/composables/strategies/html.ts

@@ -9,6 +9,8 @@ import Image from '@tiptap/extension-image'
 import { Table, TableRow, TableHeader, TableCell } from '@tiptap/extension-table'
 import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
+import TextAlign from '@tiptap/extension-text-align'
+
 import {
   TextStyle,
   FontFamily,
@@ -51,6 +53,9 @@ export const useStrategyHtml = (editorState: TextEditorState): ContentTypeStrate
       TableHeader,
       TaskList,
       TaskItem.configure({ nested: true }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph']
+      }),
       FontFamily,
       TextStyle,
       Underline,
@@ -78,6 +83,10 @@ export const useStrategyHtml = (editorState: TextEditorState): ContentTypeStrate
     heading2,
     heading3,
     heading4,
+    alignLeft,
+    alignCenter,
+    alignRight,
+    alignJustify,
     bulletList,
     orderedList,
     taskList,
@@ -124,6 +133,11 @@ export const useStrategyHtml = (editorState: TextEditorState): ContentTypeStrate
           strikethrough()
         ]
       },
+      {
+        id: 'text-align',
+        title: $gettext('Text align'),
+        actions: [alignLeft(), alignCenter(), alignRight(), alignJustify()]
+      },
       {
         id: 'lists',
         title: $gettext('Lists'),

packages/web-pkg/src/editor/composables/useEditorActions.ts

@@ -109,6 +109,38 @@ export function useEditorActions(
     }))
   })
 
+  const alignLeft = (): EditorAction => ({
+    id: 'align-left',
+    title: $gettext('Align left'),
+    icon: 'align-left',
+    toolbarAction: (editor) => editor.chain().focus().setTextAlign('left').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'left' })
+  })
+
+  const alignCenter = (): EditorAction => ({
+    id: 'align-center',
+    title: $gettext('Align center'),
+    icon: 'align-center',
+    toolbarAction: (editor) => editor.chain().focus().setTextAlign('center').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'center' })
+  })
+
+  const alignRight = (): EditorAction => ({
+    id: 'align-right',
+    title: $gettext('Align right'),
+    icon: 'align-right',
+    toolbarAction: (editor) => editor.chain().focus().setTextAlign('right').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'right' })
+  })
+
+  const alignJustify = (): EditorAction => ({
+    id: 'align-justify',
+    title: $gettext('Align justify'),
+    icon: 'align-justify',
+    toolbarAction: (editor) => editor.chain().focus().setTextAlign('justify').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'justify' })
+  })
+
   const textColor = (): EditorAction => ({
     id: 'text-color',
     title: $gettext('Text color'),
@@ -653,6 +685,10 @@ export function useEditorActions(
     heading4,
     fontSize,
     textColor,
+    alignLeft,
+    alignCenter,
+    alignRight,
+    alignJustify,
     backgroundColor,
     bold,
     italic,

packages/web-pkg/tests/unit/editor/composables/helpers.ts

@@ -67,6 +67,7 @@ export function createMockEditor(options: MockEditorOptions = {}) {
       'setLineHeight',
       'setColor',
       'setBackgroundColor',
+      'setTextAlign',
       'addRowBefore',
       'addRowAfter',
       'addColumnBefore',

packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts

@@ -244,6 +244,33 @@ describe('useEditorActions', () => {
     })
   })
 
+  describe('text align actions', () => {
+    const alignActions = [
+      { name: 'alignLeft', alignment: 'left' },
+      { name: 'alignCenter', alignment: 'center' },
+      { name: 'alignRight', alignment: 'right' },
+      { name: 'alignJustify', alignment: 'justify' }
+    ] as const
+
+    for (const { name, alignment } of alignActions) {
+      describe(name, () => {
+        it('toolbarAction sets the correct text alignment', () => {
+          const editor = createMockEditor()
+          actions[name]().toolbarAction!(editor)
+          expect(editor._chain.setTextAlign).toHaveBeenCalledWith(alignment)
+          expect(editor._chain.run).toHaveBeenCalled()
+        })
+
+        it('isActive checks the correct alignment', () => {
+          const editor = createMockEditor({
+            isActive: (attrs) => (attrs as { textAlign?: string } | null)?.textAlign === alignment
+          })
+          expect(actions[name]().isActive!(editor)).toBe(true)
+        })
+      })
+    }
+  })
+
   describe('list actions', () => {
     const listActions = [
       { name: 'bulletList', toggleMethod: 'toggleBulletList', markName: 'bulletList' },