Project

General

Profile

Actions

Bug #103979

open

Bug in cms-rte-ckeditor: "small" element not usable in Composer-mode

Added by Harald Witt about 1 month ago. Updated about 19 hours ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2024-06-05
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
8.2
Tags:
CKEditor 5 Backend
Complexity:
easy
Is Regression:
Sprint Focus:

Description

I found an error in cms-rte-ckeditor. In Configuration/RTE/Default.yaml and Configuration/RTE/Full.yaml you can find the following lines:

 style:
      definitions:
        - { name: "Lead", element: "p", classes: ['lead'] }
        - { name: "Small", element: "small", classes: [] }

The <small>-Tag does not function. But it will with the following line:
     - { name: "Small", element: "small", classes: [''] }

This will result in a <small class="">-Tag with an empty class, but it does function at least.

Actions #1

Updated by Garvin Hicking about 1 month ago

  • Status changed from New to Needs Feedback

In my installation (Firefox, Chromium, Safari) I can use "small" in the RTE, no matter if I:

  • use ", classes: []"
  • use ", classes: ['']"
  • drop ", classes: []" alltogether

In all three cases though, a <small class=""> is emitted for me...

Can you provide some details, is maybe some other extension also changing YAML RTE configuration, or maybe affect it via JS?

Actions #2

Updated by Harald Witt about 1 month ago

Garvin Hicking wrote in #note-1:

In my installation (Firefox, Chromium, Safari) I can use "small" in the RTE, no matter if I:

  • use ", classes: []"
  • use ", classes: ['']"
  • drop ", classes: []" alltogether

In all three cases though, a <small class=""> is emitted for me...

Can you provide some details, is maybe some other extension also changing YAML RTE configuration, or maybe affect it via JS?

Hi Garvin,

I'm using Windows 10 with Chrome 125.0.6422.142. I also tried Firefox 124.0.2 and MS-Edge 125.0.2535.85. All the latest version.
But the problem is the same in all 3 browsers:

  • use ", classes: []" does simply not function
  • use ", classes: ['']" functions properly
  • drop ", classes: []" alltogether makes, that the style-dropdown gives up completely (no dropdown possible)

I have nothing in Backend what would influence the RTE YAML config. And also no additional JavaScript.

And because I know that it smells like a JS inteference i've tried another Typo3 instance ...
I'ts a Typo3 12.4.11 instance, I've installed from scratch a few months before. And inside is beside the usual cms-extensions only one lonely EXT. And the latter only contains some TCA definitions - nothing else.
But the problem is the same. Seems to be OS / Browser dependent.

Greetings
Harald
BTW: You can also contact me in Typo3 Slack, e. g. https://app.slack.com/client/T024TUMLZ/C03AM9R17

Actions #3

Updated by Garvin Hicking about 1 month ago

I'll contact you and check if I could maybe verify this in your installation to see if it's browser or installation-related.

(Recent firefox should be 126.0.1 not 124.0.1 though)

Actions #4

Updated by Garvin Hicking about 1 month ago

  • Subject changed from Bug in cms-rte-ckeditor to Bug in cms-rte-ckeditor: "small" element not usable in Composer-mode
  • Status changed from Needs Feedback to Accepted

Color me surprised:

  • It works in Legacy mode for me in both main + v12.4 (i.e. GIT checkout)
  • It does NOT work in TYPO3 v12.4 composer mode with a completely vanilla installation (no extensions at all)

Steps to reproduce:

  • Create directory like "t3-vanilla"
  • Have a simple composer.json [1]
  • Create a ddev project ("ddev config" > pick some name, docroot "htdocs", project type "typo3"
  • ddev composer install
  • ddev restart
  • ddev launch typo3/install.php -> perform installation
  • open backend
  • Create an empty dummy page
  • Create a content element "Regular text"
  • In the bodytext enter any random text, select the text, choose dropdown "Styles" from CKeditor instance, pick "small"
  • No HTML layout will be applied

If you edit the file `./vendor/typo3/cms-rte-ckeditor/Configuration/RTE/Default.yaml` and change:

- { name: "Small", element: "small", classes: [] }

to:

- { name: "Small", element: "small", classes: [''] }

it will indeed work when reloading the browser. Removing ", classes: []" will break the dropdown.

Since "classes: ['']" works in both legacy mode and composer mode, I'd argue using that to unbreak composer mode would be fair.

[1] composer.json

{
  "name": "debug/t3v12-vanilly",
  "version": "1.0.0",
  "require": {
    "ext-mysqli": "*",
    "ext-pdo": "*",
    "ext-iconv": "*",
    "ext-json": "*",
    "ext-simplexml": "*",
    "ext-openssl": "*",

    "typo3/minimal": "^12.0",

    "typo3/cms-fluid-styled-content": "^12.3",
    "typo3/cms-info": "^12.3",
    "typo3/cms-recycler": "^12.3",
    "typo3/cms-reports": "^12.3",
    "typo3/cms-rte-ckeditor": "^12.3",
    "typo3/cms-scheduler": "^12.3",
    "typo3/cms-setup": "^12.3",
    "typo3/cms-tstemplate": "^12.3",
    "typo3/cms-belog": "^12.3",
    "typo3/cms-beuser": "^12.3",
    "typo3/cms-adminpanel": "^12.3",
    "typo3/cms-filemetadata": "^12.3",
    "typo3/cms-impexp": "^12.3",
    "typo3/cms-viewpage": "^12.3",
    "typo3/cms-lowlevel": "^12.3",
    "typo3/cms-redirects": "^12.3",
    "typo3/cms-seo": "^12.3",
    "typo3/cms-felogin": "^12.3",
    "typo3/cms-form": "^12.3" 
  },

  "extra": {
    "typo3/cms": {
      "cms-package-dir": "{$vendor-dir}/typo3/cms",
      "web-dir": "htdocs" 
    }
  },
  "config": {
    "allow-plugins": {
      "typo3/cms-composer-installers": true,
      "typo3/class-alias-loader": true
    }
  }
}

Actions #5

Updated by Garvin Hicking about 1 month ago

Small update. The reason it worked in my legacy install tests was because there I had the "bootstrap_package" installed which operated on the RTE configurations.

So the "classes: []" in fact seems broken everywhere. Sorry for getting off-track here and overcomplicating things with the way I tested it.

Actions #6

Updated by Gerrit Code Review about 1 month ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84679

Actions #7

Updated by Gerrit Code Review about 1 month ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84679

Actions #8

Updated by Gerrit Code Review about 19 hours ago

Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84679

Actions

Also available in: Atom PDF