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 1 commit into
Conversation
Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>
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
Summary
Fix #11131
Fix #9350
STR:
Main: Image not aligned
Here: Image aligned
馃 AI (if applicable)