feat: articles format option with markdown new default

web/src/components/ArticleEditor.vue

@@ -5,6 +5,7 @@ import { ref } from 'vue'
 import type { EditorToolbarItem } from '@nuxt/ui'
 import type { Editor } from '@tiptap/core'
 import { ArticleIndent } from '@/lib/articleIndent'
+import { ArticleTextAlign } from '@/lib/articleAlign'
 import { ArticleImage, findArticleImagePos } from '@/lib/articleImage'
 
 const props = withDefaults(
@@ -27,6 +28,7 @@ const emit = defineEmits<{
 const editorInstance = ref<Editor | null>(null)
 const extensions = [
 	ArticleIndent,
+	ArticleTextAlign,
 	ArticleImage.configure({
 		onRequestRemove: (imageId: number) => emit('request-remove-image', imageId),
 	}),

web/src/components/NewArticleModal.vue

@@ -120,7 +120,7 @@ async function onSubmit() {
 	formAlert.value = ''
 	submitting.value = true
 	try {
-		const article = await api.request<Article>('/v1/article/', {
+		const article = await api.request<Article>('/v1/article/?format=html', {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ title: title.value, body: body.value }),

web/src/components/__tests__/ArticleEditor.spec.ts

@@ -56,6 +56,35 @@ afterEach(async () => {
 	await router.push('/login')
 })
 
+describe('the alignment toolbar buttons align the current block', () => {
+	const ALIGNMENTS = ['left', 'center', 'right', 'justify']
+	const FIRST_ALIGN_BUTTON = 7
+
+	function alignButton(name: string) {
+		const buttons = document.body.querySelectorAll<HTMLButtonElement>('.article-editor button')
+		return buttons[FIRST_ALIGN_BUTTON + ALIGNMENTS.indexOf(name)] ?? null
+	}
+
+	it.each(ALIGNMENTS)('keeps the %s button enabled', async (name) => {
+		await mountArticleEditor()
+
+		const button = alignButton(name)
+
+		expect(button).not.toBeNull()
+		expect(button?.disabled).toBe(false)
+	})
+
+	it('writes the alignment into the body when a button is clicked', async () => {
+		const wrapper = await mountArticleEditor()
+		const editor = wrapper.findComponent(ArticleEditor)
+
+		alignButton('center')?.click()
+		await flushPromises()
+
+		expect(editor.props('modelValue')).toContain('text-align: center')
+	})
+})
+
 describe('insertImage stamps the inserted image with its numeric id', () => {
 	it('renders data-image-id on the img and emits the updated body', async () => {
 		const wrapper = await mountArticleEditor()

web/src/components/__tests__/NewArticleModal.spec.ts

@@ -206,7 +206,7 @@ describe('Submitting disables the form and cannot be dismissed', () => {
 		await clickButton('Create draft')
 
 		expect(requestMock).toHaveBeenCalledWith(
-			'/v1/article/',
+			'/v1/article/?format=html',
 			expect.objectContaining({
 				method: 'POST',
 				body: JSON.stringify({ title: TITLE, body: BODY }),
@@ -336,7 +336,7 @@ describe('Retrying after an Error succeeds', () => {
 		expect(requestMock).toHaveBeenCalledTimes(2)
 		expect(requestMock).toHaveBeenNthCalledWith(
 			2,
-			'/v1/article/',
+			'/v1/article/?format=html',
 			expect.objectContaining({
 				body: JSON.stringify({ title: TITLE, body: BODY }),
 			}),