feat(mail): add option to align images

This code is from the original PR that I split into two — it contained both dark mode fixes and image alignment, so I had to separate them.
It should work, but it still needs a bit more work — especially regarding the signature settings.

Signed-off-by: Tobiáš Vašťák <tobias.vastak@gmail.com>

Author: CreatorOfBiontium

src/components/AppSettingsMenu.vue

@@ -312,7 +312,9 @@
 				:is-form="true"
 				size="normal">
 				<NcInputField :value.sync="localTextBlock.title" :label="t('mail','Title of the text block')" />
-				<TextEditor v-model="localTextBlock.content"
+				<TextEditor 
+					ref="textEditor"
+					v-model="localTextBlock.content"
 					:is-bordered="true"
 					:html="true"
 					:placeholder="t('mail','Content of the text block')"
@@ -654,6 +656,7 @@ export default {
 			this.trapElements.push(element)
 		},
 		newTextBlock() {
+			this.localTextBlock.content = this.$refs.textEditor.convertImageClassesToInlineStyles(this.localTextBlock.content)
 			this.mainStore.createTextBlock({ ...this.localTextBlock })
 			this.textBlockDialogOpen = false
 			this.localTextBlock = {

src/components/Composer.vue

@@ -1138,8 +1138,10 @@ export default {
 				isPgpMime: this.encrypt,
 			}
 
-			if (data.isHtml) {
-				data.bodyHtml = this.bodyVal
+			if (data.isHtml && this.$refs.editor && this.$refs.editor.convertImageClassesToInlineStyles) {
+				data.bodyHtml = this.$refs.editor.convertImageClassesToInlineStyles(this.bodyVal)
+			} else if (!data.isHtml) {
+				data.bodyPlain = toPlain(html(this.bodyVal)).value
 			} else {
 				data.bodyPlain = toPlain(html(this.bodyVal)).value
 			}

src/components/SignatureSettings.vue

@@ -23,11 +23,13 @@
 			label="label"
 			track-by="id"
 			@option:selected="changeIdentity" />
+		<div v-if="toolbarElement" ref="toolbarContainer" class="toolbar"></div>
 		<TextEditor v-model="signature"
 			:html="true"
 			:placeholder="t('mail', 'Signature …')"
 			:bus="bus"
-			@show-toolbar="handleShowToolbar" />
+			@show-toolbar="handleShowToolbar"
+			ref="textEditor" />
 		<p v-if="isLargeSignature" class="warning-large-signature">
 			{{ t('mail', 'Your signature is larger than 2 MB. This may affect the performance of your editor.') }}
 		</p>
@@ -84,6 +86,7 @@ export default {
 			identity: null,
 			signature: '',
 			signatureAboveQuote: this.account.signatureAboveQuote,
+			toolbarElement: null,
 		}
 	},
 	computed: {
@@ -125,6 +128,12 @@ export default {
 			}
 		},
 	},
+	toolbarElement(newEl) {
+			if (newEl && this.$refs.toolbarContainer) {
+				this.$refs.toolbarContainer.innerHTML = ''
+				this.$refs.toolbarContainer.appendChild(newEl)
+			}
+	},
 	beforeMount() {
 		this.changeIdentity(this.identities[0])
 	},
@@ -145,7 +154,7 @@ export default {
 
 			const payload = {
 				account: this.account,
-				signature: this.signature,
+				signature: this.$refs.textEditor.convertImageClassesToInlineStyles(this.signature),
 			}
 
 			if (this.identity.id > -1) {
@@ -215,6 +224,7 @@ export default {
   display: block;
   padding: 0;
   margin-bottom: 23px;
+  height: 100%;
 }
 
 .ck-balloon-panel {

src/components/TextEditor.vue

@@ -47,6 +47,11 @@ import ImagePlugin from '@ckeditor/ckeditor5-image/src/image.js'
 import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace.js'
 import ImageResizePlugin from '@ckeditor/ckeditor5-image/src/imageresize.js'
 import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload.js'
+import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle.js'
+import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
+import ImageUtilsPlugin from '@ckeditor/ckeditor5-image/src/imageutils';
+import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
+import ImageTextAlternativePlugin from '@ckeditor/ckeditor5-image/src/imagetextalternative';
 import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js'
 import { DropdownView } from '@ckeditor/ckeditor5-ui'
 import MailPlugin from '../ckeditor/mail/MailPlugin.js'
@@ -129,6 +134,11 @@ export default {
 				ImagePlugin,
 				ImageUploadPlugin,
 				ImageResizePlugin,
+				ImageStylePlugin,
+				ImageToolbarPlugin,
+				ImageUtilsPlugin,
+				ImageCaptionPlugin,
+				ImageTextAlternativePlugin,
 				ListProperties,
 				FontPlugin,
 				RemoveFormat,
@@ -196,6 +206,18 @@ export default {
 						},
 					],
 				},
+				image: {
+					toolbar: [
+						'imageStyle:alignLeft',
+						'imageStyle:alignCenter',
+						'imageStyle:alignRight',
+						'|',
+						'imageTextAlternative',
+					],
+					styles: [
+						'alignLeft', 'alignCenter', 'alignRight',
+					],
+				},
 			},
 		}
 	},
@@ -278,6 +300,44 @@ export default {
 
 			return itemElement
 		},
+		convertImageClassesToInlineStyles(html) {
+			const div = document.createElement('div');
+			div.innerHTML = html;
+
+			div.querySelectorAll('figure.image').forEach(figure => {
+				// Keep the original style attribute
+				let baseStyle = figure.getAttribute('style') || '';
+				let alignmentStyle = 'display:block;margin-top:1em;margin-bottom:1em;';
+
+				if (figure.classList.contains('image-style-align-left')) {
+					alignmentStyle += 'margin-left:0;margin-right:auto;';
+				} else if (figure.classList.contains('image-style-align-right')) {
+					alignmentStyle += 'margin-left:auto;margin-right:0;';
+				} else if (figure.classList.contains('image-style-align-center')) {
+					alignmentStyle += 'margin-left:auto;margin-right:auto;text-align:center;';
+				}
+
+				// Combine original styles with alignment styles
+				const combinedStyle = `${baseStyle.trim()}${!baseStyle.endsWith(';') ? ';' : ''}${alignmentStyle}`;
+				figure.setAttribute('style', combinedStyle);
+
+				// IMPORTANT: Do NOT remove alignment classes
+				// so CKEditor can reuse them when reopening the content
+
+				// Adjust the <img> inside the figure to ensure correct display in email clients
+				const img = figure.querySelector('img');
+				if (img) {
+					const baseImgStyle = img.getAttribute('style') || '';
+					const imgStyle = 'display:block;margin:0 auto;max-width:100%;height:auto;border:0;';
+					img.setAttribute(
+						'style',
+						`${baseImgStyle.trim()}${!baseImgStyle.endsWith(';') ? ';' : ''}${imgStyle}`
+					);
+				}
+			});
+
+			return div.innerHTML;
+		},
 		overrideDropdownPositionsToNorth(editor, toolbarView) {
 			const {
 				south, north, southEast, southWest, northEast, northWest,

src/components/textBlocks/ListItem.vue

@@ -35,7 +35,9 @@
 				{{ localTextBlock.title }}
 			</p>
 			<NcInputField v-else :value.sync="localTextBlock.title" :label="t('mail','Title of the text block')" />
-			<TextEditor v-model="localTextBlock.content"
+			<TextEditor 
+				ref="textEditor"
+				v-model="localTextBlock.content"
 				:is-bordered="!shared"
 				:html="true"
 				:read-only="shared"
@@ -352,6 +354,7 @@ export default {
 		async saveTextBlock() {
 			this.saveLoading = true
 			try {
+				this.localTextBlock.content = this.$refs.textEditor.convertImageClassesToInlineStyles(this.localTextBlock.content)
 				await this.mainStore.patchTextBlock(this.localTextBlock)
 				this.saveLoading = false
 				this.editModalOpen = false