fix(composer): keep resized image dimensions in sent messages

[kesselb]

Summary

Fix #9290

STR:

• New message
• Enable formatting
• Upload/attach image
• Resize the image
• Sent

Main:

Mail (and also other clients) show the image with the original dimension

Here:

The image is shown with the resized dimension

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI

Summary by CodeRabbit

• New Features

  • Improved HTML image output by preserving resized pixel widths.
  • Automatically removes fixed height values so images retain their natural aspect ratio.
  • Supports resized and linked images while preserving percentage-based sizing behavior.

• Tests

  • Added coverage for image resizing, serialization, reopening, and HTML editor configuration.

[kesselb]

/backport to stable5.11

[kesselb]

cc @CreatorOfBiontium @joeldj-nl

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

[kesselb]

@coderabbitai please review 🙈

[coderabbitai]

@kesselb I will review pull request #13482, with focus on preservation of resized image dimensions in sent messages.

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

The change adds ImageDowncastPlugin to post-process CKEditor HTML output. Valid pixel widths are copied to <img> attributes, natural heights are removed, and HTML mode uses pixel-based image resizing. Unit tests cover resizing, ignored values, linked images, serialization, and editor configuration.

Image dimension downcasting

Layer / File(s)	Summary
Image downcast processing src/ckeditor/image/ImageDowncastPlugin.ts	Adds ImageDowncastPlugin. It detects resized image figures, accepts positive pixel widths, writes the width attribute, and removes the height attribute.
Editor configuration src/components/TextEditor.vue	Enables ImageDowncastPlugin in HTML mode and configures image resizing to use pixel units.
Downcast and integration validation src/tests/unit/ckeditor/image/ImageDowncastPlugin.spec.js, src/tests/unit/components/TextEditor.spec.js	Tests pixel resizing, ignored dimensions, linked images, serialization cycles, and HTML-mode configuration.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Mergeability Score: ⚪ Minimal · up to 1b6d1

The image-dimension change is localized and introduces no actionable runtime or product risk; only a minor SPDX header-format correction remains.

Sequence Diagram(s)

sequenceDiagram
  participant TextEditor
  participant CKEditor
  participant ImageDowncastPlugin
  participant HTMLOutput
  TextEditor->>CKEditor: configure HTML mode with pixel resizing
  CKEditor->>ImageDowncastPlugin: downcast image figure
  ImageDowncastPlugin->>HTMLOutput: set pixel width and remove height

Loading

Suggested reviewers: christophwurst, gretad

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The implementation adds the image width attribute and removes height, but does not add the required pixel width and max-width styles from #9290.	Update the downcast output to set image width and max-width styles in pixels, retain the explicit width attribute, and add tests for these styles.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes preserving resized image dimensions in sent composer messages.
Out of Scope Changes check	✅ Passed	The code, configuration, and tests directly support preserving resized image dimensions in composed messages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ckeditor-keep-resize

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8cc74691-1941-495c-a91c-630cc1e0da99

📥 Commits

Reviewing files that changed from the base of the PR and between 167702f and 1b6d1ed.

📒 Files selected for processing (4)

• src/ckeditor/image/ImageDowncastPlugin.ts
• src/components/TextEditor.vue
• src/tests/unit/ckeditor/image/ImageDowncastPlugin.spec.js
• src/tests/unit/components/TextEditor.spec.js

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Use the required SPDX block-comment format in both new files. Each header starts with /**, but the required format starts with /*.

• src/ckeditor/image/ImageDowncastPlugin.ts#L1-L4: change the opening delimiter from /** to /*.
• src/tests/unit/ckeditor/image/ImageDowncastPlugin.spec.js#L1-L4: change the opening delimiter from /** to /*.

As per coding guidelines, “Header format: /* SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */”.

📍 Affects 2 files

• src/ckeditor/image/ImageDowncastPlugin.ts#L1-L4 (this comment)
• src/tests/unit/ckeditor/image/ImageDowncastPlugin.spec.js#L1-L4

Source: Coding guidelines