feat(composer): align images in the editor and in sent messages

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>

Author: kesselb

src/ckeditor/image/ImageDowncastPlugin.ts

@@ -7,6 +7,19 @@ import type { ViewDocumentFragment, ViewElement } from 'ckeditor5'
 
 import { ImageUtils, Plugin, UpcastWriter } from 'ckeditor5'
 
+/**
+ * Alignment as inline styles, keyed by the class the image style feature writes.
+ *
+ * Physical margins because the Word engine behind Outlook ignores margin-inline.
+ * The margins place a figure narrower than the available space, text-align
+ * places the image inside a full width figure.
+ */
+const ALIGNMENTS: Record<string, Record<string, string>> = {
+	'image-style-align-center': { 'margin-left': 'auto', 'margin-right': 'auto', 'text-align': 'center' },
+	'image-style-block-align-right': { 'margin-left': 'auto', 'margin-right': '0', 'text-align': 'right' },
+	'image-style-block-align-left': { 'margin-left': '0', 'margin-right': 'auto', 'text-align': 'left' },
+}
+
 /**
  * Parse a CSS length into whole pixels. Anything but an absolute pixel value
  * yields null.
@@ -52,12 +65,29 @@ export default class ImageDowncastPlugin extends Plugin {
 				// A block image carries the resized width on its figure, an inline
 				// one on the img itself.
 				if ((item.is('element', 'figure') && item.hasClass('image')) || item.is('element', 'img')) {
+					this._inlineAlignment(writer, item)
 					this._mirrorResizedWidth(writer, item)
 				}
 			}
 		}, { priority: 'low' })
 	}
 
+	/**
+	 * Adds the inline styles for the figure's alignment class, which is backed by
+	 * an editor stylesheet recipients never load. The class stays so that
+	 * reopening the draft restores the active alignment.
+	 *
+	 * @param writer view writer of the data view
+	 * @param figure the figure to align
+	 */
+	_inlineAlignment(writer: UpcastWriter, figure: ViewElement): void {
+		// Without an alignment class the figure keeps the client's own margins.
+		const className = Object.keys(ALIGNMENTS).find((candidate) => figure.hasClass(candidate))
+			?? 'image-style-block-align-left'
+
+		writer.setStyle(ALIGNMENTS[className], figure)
+	}
+
 	/**
 	 * Mirrors a resized image's CSS width onto the img width attribute, which
 	 * clients that drop CSS still honour. Reopening the message reads that width

src/components/TextEditor.vue

@@ -39,6 +39,8 @@ import {
 	Heading,
 	Image,
 	ImageResize,
+	ImageStyle,
+	ImageToolbar,
 	ImageUpload,
 	Italic,
 	Link,
@@ -152,6 +154,8 @@ export default {
 				Image,
 				ImageUpload,
 				ImageResize,
+				ImageStyle,
+				ImageToolbar,
 				FilesImagePlugin,
 				ImageDowncastPlugin,
 				Font,
@@ -206,6 +210,15 @@ export default {
 				image: {
 					// A percentage would be relative to the recipient's unknown viewport.
 					resizeUnit: 'px',
+					styles: {
+						options: ['alignBlockLeft', 'alignCenter', 'alignBlockRight'],
+					},
+
+					toolbar: [
+						'imageStyle:alignBlockLeft',
+						'imageStyle:alignCenter',
+						'imageStyle:alignBlockRight',
+					],
 				},
 
 				mention: {
@@ -718,6 +731,12 @@ export default {
 	cursor: text;
 	margin: 0 !important;
 }
+
+/* CKEditor centres a block image without a style class; match the left aligned
+   option, which is what ImageDowncast writes for it. */
+:deep(.ck-content .image:not([class*='image-style'])) {
+	margin-inline: 0 auto;
+}
 </style>
 
 <style>

src/tests/unit/ckeditor/image/ImageDowncastPlugin.spec.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { ClassicEditor, ImageBlock, ImageInline, ImageResizeEditing, Paragraph } from 'ckeditor5'
+import { ClassicEditor, ImageBlock, ImageInline, ImageResizeEditing, ImageStyleEditing, Paragraph } from 'ckeditor5'
 import ImageDowncastPlugin from '../../../../ckeditor/image/ImageDowncastPlugin.ts'
 
 // The editor UI observes the size of its toolbar, which jsdom does not provide.
@@ -26,9 +26,12 @@ async function downcast(initialData) {
 	const editor = await ClassicEditor.create(element, {
 		licenseKey: 'GPL',
 		initialData,
-		plugins: [Paragraph, ImageBlock, ImageInline, ImageResizeEditing, ImageDowncastPlugin],
+		plugins: [Paragraph, ImageBlock, ImageInline, ImageResizeEditing, ImageStyleEditing, ImageDowncastPlugin],
 		image: {
 			resizeUnit: 'px',
+			styles: {
+				options: ['alignBlockLeft', 'alignCenter', 'alignBlockRight'],
+			},
 		},
 	})
 
@@ -109,4 +112,36 @@ describe('ImageDowncastPlugin', () => {
 		expect(resent).toContain('width:200px;')
 		expect(resent).not.toContain('height=')
 	})
+
+	it('inlines the styles of a centred image', async () => {
+		const data = await downcast('<figure class="image image-style-align-center"><img src="test.png"></figure>')
+
+		expect(data).toContain('margin-left:auto;')
+		expect(data).toContain('margin-right:auto;')
+		expect(data).toContain('text-align:center;')
+		expect(data).toContain('image-style-align-center')
+	})
+
+	it('inlines the styles of a right aligned image', async () => {
+		const data = await downcast('<figure class="image image-style-block-align-right"><img src="test.png"></figure>')
+
+		expect(data).toContain('margin-left:auto;')
+		expect(data).toContain('margin-right:0;')
+		expect(data).toContain('text-align:right;')
+	})
+
+	it('left aligns an image without a style class', async () => {
+		const data = await downcast('<figure class="image"><img src="test.png"></figure>')
+
+		expect(data).toContain('margin-left:0;')
+		expect(data).toContain('margin-right:auto;')
+		expect(data).toContain('text-align:left;')
+	})
+
+	it('keeps the alignment when the message is reopened and sent again', async () => {
+		const sent = await downcast('<figure class="image image-style-align-center"><img src="test.png"></figure>')
+		const resent = await downcast(sent)
+
+		expect(resent).toContain('text-align:center;')
+	})
 })

src/tests/unit/components/TextEditor.spec.js

@@ -57,7 +57,7 @@ describe('TextEditor', () => {
 		expect(wrapper.vm.config.htmlSupport.allow.some((rule) => rule.name === 'img')).toBe(true)
 	})
 
-	it('resizes images in pixels in html mode', async () => {
+	it('aligns and resizes images in html mode', async () => {
 		const wrapper = shallowMount(TextEditor, {
 			localVue,
 			provide: {
@@ -72,6 +72,7 @@ describe('TextEditor', () => {
 
 		expect(wrapper.vm.config.plugins).toContain(ImageDowncastPlugin)
 		expect(wrapper.vm.config.image.resizeUnit).toBe('px')
+		expect(wrapper.vm.config.image.toolbar).toContain('imageStyle:alignCenter')
 	})
 
 	it('throw when editor not ready', async () => {