feat: articles format option with markdown new default

web/src/lib/__tests__/articleAlign.spec.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { ArticleIndent } from '../articleIndent'
+import { ArticleTextAlign } from '../articleAlign'
+
+function createEditor(content: string) {
+	return new Editor({
+		extensions: [StarterKit, ArticleIndent, ArticleTextAlign],
+		content,
+	})
+}
+
+describe('Aligning text writes text-align on paragraphs and headings', () => {
+	it.each(['center', 'right', 'justify'])('can align a paragraph to the %s', (align) => {
+		const editor = createEditor('<p>Hello</p>')
+		editor.commands.setTextSelection(2)
+
+		expect(editor.can().setTextAlign(align)).toBe(true)
+		editor.commands.setTextAlign(align)
+
+		expect(editor.getHTML()).toContain(`<p style="text-align: ${align};">Hello</p>`)
+		expect(editor.isActive({ textAlign: align })).toBe(true)
+		editor.destroy()
+	})
+
+	it('leaves unaligned paragraphs and headings without a style', () => {
+		const editor = createEditor('<h2>Title</h2><p>Hello</p>')
+
+		expect(editor.getHTML()).toBe('<h2>Title</h2><p>Hello</p>')
+		editor.destroy()
+	})
+
+	it('aligns a heading', () => {
+		const editor = createEditor('<h2>Title</h2>')
+		editor.commands.setTextSelection(2)
+
+		editor.commands.setTextAlign('right')
+
+		expect(editor.getHTML()).toContain('<h2 style="text-align: right;">Title</h2>')
+		editor.destroy()
+	})
+
+	it('returns to left alignment', () => {
+		const editor = createEditor('<p style="text-align: center">Hello</p>')
+		editor.commands.setTextSelection(2)
+
+		editor.commands.setTextAlign('left')
+
+		expect(editor.isActive({ textAlign: 'center' })).toBe(false)
+		expect(editor.getHTML()).not.toContain('center')
+		editor.destroy()
+	})
+
+	it('loads stored alignment back from HTML', () => {
+		const editor = createEditor('<p style="text-align: justify">Hello</p>')
+		editor.commands.setTextSelection(2)
+
+		expect(editor.isActive({ textAlign: 'justify' })).toBe(true)
+		editor.destroy()
+	})
+
+	it('keeps alignment and indentation together', () => {
+		const editor = createEditor('<p>Hello</p>')
+		editor.commands.setTextSelection(2)
+
+		editor.commands.indent()
+		editor.commands.setTextAlign('center')
+
+		expect(editor.getHTML()).toContain('data-indent="1"')
+		expect(editor.getHTML()).toContain('text-align: center')
+		editor.destroy()
+	})
+})

web/src/lib/articleAlign.ts

@@ -0,0 +1,8 @@
+import TextAlign from '@tiptap/extension-text-align'
+
+export const ALIGN_TYPES = ['heading', 'paragraph']
+
+export const ArticleTextAlign = TextAlign.configure({
+	types: ALIGN_TYPES,
+	alignments: ['left', 'center', 'right', 'justify'],
+})