feat(composer): align images in the editor and in sent messages - #13509
feat(composer): align images in the editor and in sent messages#13509kesselb wants to merge 3 commits into
Conversation
de4b4ef to
f237fb7
Compare
There was a problem hiding this comment.
Pull request overview
Warning
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
This PR updates the CKEditor composer configuration and downcast behavior so image alignment (left/center/right) is consistent between the editor view and the HTML that gets sent (and later reopened).
Changes:
- Enable image style + image toolbar in the editor and expose alignment actions.
- Inline alignment styles during downcast so email clients render alignment consistently.
- Add/update unit tests to cover alignment toolbar config and downcasted alignment styles.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/TextEditor.vue | Enables CKEditor image style/toolbar and aligns editor CSS with downcast defaults. |
| src/ckeditor/image/ImageDowncastPlugin.ts | Adds alignment inlining logic based on image style classes during downcast. |
| src/tests/unit/components/TextEditor.spec.js | Updates test to assert alignment toolbar configuration is present. |
| src/tests/unit/ckeditor/image/ImageDowncastPlugin.spec.js | Extends downcast tests to cover center/right/default-left alignment behavior. |
馃挕 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| if ((item.is('element', 'figure') && item.hasClass('image')) || item.is('element', 'img')) { | ||
| this._inlineAlignment(writer, item) | ||
| this._mirrorResizedWidth(writer, item) |
| _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) | ||
| } |
| * @param writer view writer of the data view | ||
| * @param figure the figure to align | ||
| */ | ||
| _inlineAlignment(writer: UpcastWriter, figure: ViewElement): void { |
GVodyanov
left a comment
GVodyanov
left a comment
There was a problem hiding this comment.
Is it expected that the arrows in the blue border not change when changing the alignment buttons underneath? Maybe I'm not understanding this correctly.
Also when clicking alignment to the right it's still aligned to the left
Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>
Expected. When you click on the arrow it should insert a paragraph before or after the image.
I'd only tested the result in Thunderbird 馃檲 |
f237fb7 to
0bb35f5
Compare
That resolves a weird height, when the last element of an email is an aligned image.
|
@GVodyanov please give it another try |
|
Tested to send an image aligned to right and it is correctly managed both on Thunderbird and GMail. But alignment is not preserved when restoring a draft message in NC Mail. HTML sent to the server and read back when reopening the mail is correct, but apparently CKEditor ignores the inline style. |
Summary
Fix #11131
Fix #9350
STR:
Main: Image not aligned
Here: Image aligned
馃 AI (if applicable)