Skip to content

Add media embed alignment feature#20126

Open
jacek-cke wants to merge 6 commits into
masterfrom
ck/2781-add-media-embed-alignment-feature
Open

Add media embed alignment feature#20126
jacek-cke wants to merge 6 commits into
masterfrom
ck/2781-add-media-embed-alignment-feature

Conversation

@jacek-cke
Copy link
Copy Markdown
Contributor

@jacek-cke jacek-cke commented May 6, 2026

🚀 Summary

Adds the MediaEmbedStyle plugin to align media embeds, with optional text wrapping.

Configuration options similar to those available in the image style plugins will be delivered in a follow-up ticket: #20131


📌 Related issues


🧾 Checklists

Use the following checklists to ensure important areas were not overlooked.
This does not apply to feature-branch merges.
If an item is not relevant to this type of change, simply leave it unchecked.

Author checklist

  • Is the changelog entry intentionally omitted?
  • Is the change backward-compatible?
  • Have you considered the impact on different editor setups and core interactions? (e.g., classic/inline/multi-root/many editors, typing, selection, paste, tables, lists, images, collaboration, pagination)
  • Has the change been manually verified in the relevant setups?
  • Does this change affect any of the above?
  • Is performance impacted?
  • Is accessibility affected?
  • Have tests been added that fail without this change (against regression)?
  • Have the API documentation, guides, feature digest, and related feature sections been updated where needed?
  • Have metadata files (ckeditor5-metadata.json) been updated if needed?
  • Are there any changes the team should be informed about (e.g. architectural, difficult to revert in future versions or having impact on other features)?
  • Were these changes documented (in Logbook)?

Reviewer checklist

  • PR description explains the changes and the chosen approach (especially when performance, API, or UX is affected).
  • The changelog entry is clear, user‑ or integrator-facing, and it describes any breaking changes.
  • All new external dependencies have been approved and mentioned in LICENSE.md (if any).
  • All human-readable, translateable strings in this PR been introduced using t() (if any).
  • I manually verified the change (e.g., in manual tests or documentation).
  • The target branch is correct.

Base automatically changed from ck/6593-add-media-embed-resizing-feature to master May 12, 2026 10:48
@jacek-cke jacek-cke changed the title [Draft] Add media embed alignment feature Add media embed alignment feature May 12, 2026
@jacek-cke jacek-cke marked this pull request as ready for review May 12, 2026 10:52
Comment thread packages/ckeditor5-media-embed/theme/mediaembedstyle.css
@jacek-cke jacek-cke requested a review from mmotyczynska May 12, 2026 11:39
@pszczesniak pszczesniak self-requested a review May 13, 2026 08:02
Copy link
Copy Markdown
Contributor

@pszczesniak pszczesniak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The two /* istanbul ignore if: paranoid check ... */ annotations don't match ckeditor5-image/src/imagestyle/converters.ts and similar checks in other features:

  • Downcast - image-style skips the guard entirely and uses a non-null assertion on mapper.toViewElement(...). I suggest the same here.
  • Upcast - image-style has the same !data.modelRange check without coverage suppression. The branch is reachable, so a small test could cover it for real.

Other than that - good job 👍 it looks really good and works as expected :)

Comment on lines +91 to +95
{ name: 'alignLeft', label: t( 'Left aligned media' ), icon: IconObjectInlineLeft },
{ name: 'alignBlockLeft', label: t( 'Left aligned media' ), icon: IconObjectLeft },
{ name: 'alignCenter', label: t( 'Centered media' ), icon: IconObjectCenter },
{ name: 'alignBlockRight', label: t( 'Right aligned media' ), icon: IconObjectRight },
{ name: 'alignRight', label: t( 'Right aligned media' ), icon: IconObjectInlineRight }
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to add those missing translation keys to the contexst.json in lang folder.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! All suggestions applied.

@jacek-cke jacek-cke requested a review from pszczesniak May 13, 2026 12:37
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit eb2e34f. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Introduce media styles for media embed

2 participants