Contrib.social

Drupal and CKEditor5 Issue: SVG Icons with Query Parameters Incorrectly Flagged as Incompatible

Open on Drupal.org →
Created on 11 January 2024, over 1 year ago
Updated 12 January 2024, over 1 year ago

Problem/Motivation

The Drupal status report incorrectly flags valid SVG icons as incompatible with CKEditor5, and console errors are observed on pages with CKEditor due to SVG URL format issues. The `guessMimeType($icon)` method may not accurately identify SVG files with URLs containing AWS S3 `?VersionId=...` query parameters, leading to these errors.



Steps to reproduce

  1. https://www.drupal.org/project/s3fs →
  1. S3FS and S3 must have file revisions enabled.
  2. S3FS setting to Use S3 for public:// files should be enabled.
  1. AWS Configuration and SVG Hosting: Host SVG icons on AWS S3, with URLs that include `?VersionId=...` query parameters.
  2. Link SVGs in Drupal and Observe Errors: Use these SVG URLs in Drupal. Observe incorrect flagging in the status report and console errors on pages with CKEditor5, stating that SVG icons are not in the supported format.

Proposed resolution

Modify the `guessMimeType($icon)` function or its usage in `embed_requirements` to handle URLs with query parameters accurately. Additionally, address the CKEditor5 console errors by ensuring it recognizes SVG URLs with query parameters as valid.

Remaining tasks

  • Analyze and update the mime type guessing logic and CKEditor5's SVG URL handling.
  • Test with various SVG URLs, particularly those with query parameters.
  • Ensure accurate identification of SVG mime types and compatibility with CKEditor5.
  • Review and commit changes.

User interface changes

None expected, as changes pertain to backend processing and CKEditor5's handling of file types.

API changes

Potential minor adjustments in file type processing methods and CKEditor5's SVG handling.

Data model changes

No changes expected.

Release notes snippet

"Fixed issues with SVG icon URL processing in Drupal status reports and CKEditor5. Updates ensure SVGs with query parameters are correctly identified as valid formats, resolving both status report inaccuracies and CKEditor5 console errors."

Other notes

Status error

Status Details
Errors found
Embed button CKEditor5 compatiblity
The following embed button(s) are not using SVG icons and will not be compatible with CKEditor5
Embed Content: somefile.svg?VersionId=i8YlnyiQ7jgD_ZPP6sDFsWsbof5tAA3B

console error
CKEditor 5 only supports enity embed icons in SVG format. The icon provided is post_add_FILL0_wght400_GRAD0_opsz24.svg?VersionId=U2OvXbMiPNLelJEnvmocKQVjh2Towbh8

SVG icons not appearing in ckeditor.

Offending code for status report https://git.drupalcode.org/project/embed/-/blob/8.x-1.x/embed.install?re...

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇺🇸United States trackleft2 Tucson, AZ 🇺🇸

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024