mail icon indicating copy to clipboard operation
mail copied to clipboard

Left-aligned mail signature images not possible

Open handkerchief333 opened this issue 1 year ago • 5 comments

Steps to reproduce

  1. Go to the signature settings of a mailbox
  2. Upload an image

Expected behavior

Align the image as I like.

Actual behavior

It is always centered and not possible to align the image to the left.

Mail app version

3.5.6

Mailserver or service

No response

Operating system

FreeBSD 13.2

PHP engine version

None

Web server

Apache (supported)

Database

MariaDB

Additional info

Can be solved, possibly together with the issue #9290

handkerchief333 avatar Feb 19 '24 08:02 handkerchief333

This has done the trick for us, on v3.6.0-beta3:

diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue
index 8756c0848..f64d06780 100644
--- a/src/components/TextEditor.vue
+++ b/src/components/TextEditor.vue
@@ -56,6 +56,8 @@ import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64u
 import ImagePlugin from '@ckeditor/ckeditor5-image/src/image.js'
 import ImageResizePlugin from '@ckeditor/ckeditor5-image/src/imageresize.js'
 import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload.js'
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js'
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js'
 import { DropdownView } from '@ckeditor/ckeditor5-ui'
 import MailPlugin from '../ckeditor/mail/MailPlugin.js'
 import { searchProvider, getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
@@ -123,6 +125,8 @@ export default {
                                Base64UploadAdapter,
                                ImageResizePlugin,
                                MailPlugin,
+                               ImageStyle,
+                               ImageToolbar,
                        ])
                        toolbar.unshift(...[
                                'heading',
@@ -170,6 +174,14 @@ export default {
                                                },
                                        ],
                                },
+                               image: {
+                                   toolbar: [
+                                       'imageStyle:inline', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight'
+                                   ],
+                                   insert: {
+                                       type: 'inline'
+                                   }
+                               }
                        },
                }
        },

Now when an image is uploaded, a toolbar shows under it with options for making it inline (it respects the text alignment), or aligning left, center and right. It also adds it as inline by default.

kiaralemke avatar Mar 21 '24 21:03 kiaralemke