fix: resolve inline image bugs with class, link, toggle, and indicators

[CybotTM]

Summary

Fixes 5 bugs reported in #655 involving inline image handling in CKEditor:

• Bug 1 — Empty class on new images: edit() now defaults to image-block (or image-inline) when the dialog returns an empty class string for newly inserted images
• Bug 2a — Double <a> tags: Inline image upcast now consumes the parent <a> element to prevent CKEditor's link plugin from double-processing it
• Bug 2b — Alignment class leaks to imageLinkClass: Inline upcast filters image-inline, image-block, etc. from link class before storing as imageLinkClass (same pattern already used in block upcast)
• Bug 3 — image-inline persists on <a> after toggle: ToggleImageTypeCommand now strips alignment classes from imageLinkClass when switching between inline/block
• Bug 4 — Double link indicators: Suppresses CKEditor's built-in ::after link icon on figure.image > a since we provide custom .ck-image-indicator--link badges

Bug 2c (t3:// link not resolved on FE) is a downstream consequence of bug 2a — the double <a> tags cause the outer link to bypass TYPO3's link resolution. Fixed by fixing 2a.

Bug 5 (preview image docs) is an enhancement request tracked separately.

Test plan

• 3 new PHP regression tests (TDD red→green) verify JS source patterns
• All 668 unit tests pass (665 baseline + 3 new)
• PHPStan clean, CS fixer clean
• E2E tests pass in CI
• Manual: insert new image → verify image-block class applied
• Manual: insert inline image with link → verify single <a>, no double wrapping
• Manual: toggle inline→block on linked image → verify image-inline removed from <a>
• Manual: linked block image → verify single link indicator badge (no duplicate)

Closes #655

[github-actions]

Automated approval for solo maintainer project

All assigned reviewers have completed their reviews. See SECURITY.md for compensating controls.

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[gemini-code-assist]

Summary of Changes

Hello @CybotTM, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses five specific bugs related to inline image handling within CKEditor, focusing on improving class assignment, link management, image type toggling, and visual indicators. The changes ensure more robust and predictable behavior for images, preventing issues like empty classes, double links, and incorrect class persistence, ultimately enhancing the editor's stability and user experience.

Highlights

• Default Image Class Assignment: Ensured new images inserted without a specified class default to 'image-block' or 'image-inline' to prevent empty class attributes, addressing Bug 1.
• Prevention of Double '' Tags: Modified inline image upcast to consume the parent '' element, resolving issues with CKEditor's link plugin creating duplicate link wrappers and fixing Bug 2a.
• Refined imageLinkClass Handling: Implemented filtering in inline image upcast to prevent alignment classes (e.g., 'image-inline', 'image-block') from leaking into the 'imageLinkClass' attribute, addressing Bug 2b.
• Correct imageLinkClass on Toggle: Updated the ToggleImageTypeCommand to strip alignment classes from 'imageLinkClass' when switching between inline and block image types, preventing persistence of incorrect classes and fixing Bug 3.
• Suppression of Duplicate Link Indicators: Added CSS to hide CKEditor's default '::after' link indicators on images, ensuring only custom badges are displayed and resolving Bug 4.

Changelog

• Resources/Public/Css/editor-image-widget.css
  • Added CSS to hide CKEditor's default '::after' link indicators on 'figure.image > a' and 'span.image-inline > a'.
• Resources/Public/JavaScript/Plugins/typo3image.js
  • Modified the 'edit' function to default the 'class' attribute to 'image-block' or 'image-inline' if it's empty for new images.
  • Updated the 'ToggleImageTypeCommand' to clean alignment classes (e.g., 'image-inline', 'image-block') from the 'imageLinkClass' attribute when an image's type is toggled.
  • Enhanced the inline image upcast 'model' to 'consumable.consume' the parent '' element, preventing CKEditor's link plugin from double-processing it.
  • Added logic to the inline image upcast to filter out alignment classes from the 'imageLinkClass' attribute before storing it.
• Tests/Unit/JavaScript/Typo3ImagePluginTest.php
  • Refactored 'setUp' method to read 'typo3image.js' content once for all tests.
  • Added 'newBlockImageGetsDefaultClass' test to verify default class assignment for new block images.
  • Added 'inlineImageUpcastFiltersAlignmentClassesFromLinkClass' test to ensure alignment classes are filtered from 'imageLinkClass' during inline image upcast.
  • Added 'toggleCommandCleansImageLinkClass' test to confirm 'ToggleImageTypeCommand' correctly cleans 'imageLinkClass'.

Activity

• Implemented fixes for 5 reported bugs as detailed in issue upgrade dev-main fbceca4 => dev-main f081642 #655.
• Added 3 new PHP regression tests to validate the JavaScript source patterns for the bug fixes.
• Ensured all 668 unit tests pass, including the newly introduced tests.
• Verified PHPStan and CS fixer are clean, maintaining code quality standards.
• Manual testing steps are outlined in the PR description for verifying default class assignment, single '' tags, correct class removal on toggle, and single link indicators.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request provides a comprehensive set of fixes for several bugs related to inline image handling in CKEditor. The changes address issues with default classes, duplicate link tags, class leakage between elements, and UI indicator consistency. The approach is solid, with fixes in the JavaScript plugin logic and corresponding CSS adjustments. The addition of new regression tests in PHP to verify the JavaScript source patterns is a great way to prevent these issues from recurring.

I have one suggestion for improvement in the JavaScript file to enhance consistency and maintainability regarding how alignment classes are handled.

[Copilot]

Pull request overview

This PR fixes multiple CKEditor inline image edge cases reported in #655, focusing on ensuring consistent class defaults, preventing double-link wrapping during upcast, keeping link-related classes clean when toggling inline/block, and avoiding duplicate link indicators in the editor UI.

Changes:

• Default newly inserted images to image-block (or image-inline) when the dialog returns an empty class string.
• Adjust inline image upcast to prevent double <a> creation and to strip alignment classes from imageLinkClass.
• Clean alignment classes from imageLinkClass when toggling inline/block, and suppress CKEditor’s built-in link indicator to avoid duplicate badges.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
Tests/Unit/JavaScript/Typo3ImagePluginTest.php	Adds regression tests for #655 and refactors JS loading into setUp().
Resources/Public/JavaScript/Plugins/typo3image.js	Implements default class handling, link upcast consumption/filtering, and toggle cleanup of imageLinkClass.
Resources/Public/Css/editor-image-widget.css	Hides CKEditor’s built-in link ::after indicator to avoid duplicate link badges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.04%. Comparing base (5139250) to head (655e089).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #658   +/-   ##
=======================================
  Coverage   93.04%   93.04%           
=======================================
  Files          27       27           
  Lines        2286     2286           
=======================================
  Hits         2127     2127           
  Misses        159      159           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Automated approval for solo maintainer project

All assigned reviewers have completed their reviews. See SECURITY.md for compensating controls.

[Copilot]

Pull request overview

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

[github-actions]

Automated approval for solo maintainer project

All assigned reviewers have completed their reviews. See SECURITY.md for compensating controls.

[Copilot]

Pull request overview

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

[github-actions]

Automated approval for solo maintainer project

All assigned reviewers have completed their reviews. See SECURITY.md for compensating controls.

[Copilot]

Pull request overview

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