CKEditor 5 not compatible with CKEditor 4

majpay · February 14, 2024, 3:44pm

Is it possible to rollback to V4 of CKEditor? As far as i learned it’s currently not possible to define styles with the same effect for multiple elements. In Typo3 V11 (CKEditor 4) i could do this:

editor:
  config:
    stylesSet:
      - { name: "test", element: ["h1", "h2", "h3"], attributes: { class: "text-small" } }

That had the effect, that i could apply utility classes to various elements.

In CKEditor 5 i can only add one element, so i would need to add multiple styles:

editor:
  config:
    style:
      definitions:
        - { name: "test", element: "h1", classes: ["text-small"] }
        - { name: "test", element: "h2", classes: ["text-small"] }
        - { name: "test", element: "h3", classes: ["text-small"] }

But this results in multiple options in the style dropdown. We used this feature quiet extensively.

Does anyone experience the same and how do you deal with it?

majpay · February 15, 2024, 9:25am

Analyzing the ckeditor source code it seems you can use a Regular Expression for the element option.

StyleUtils::normalizeConfig

github.com

ckeditor/ckeditor5/blob/master/packages/ckeditor5-style/src/styleutils.ts#L95


      
          	): NormalizedStyleDefinitions {
          		const normalizedDefinitions: NormalizedStyleDefinitions = {
          			block: [],
          			inline: []
          		};
          
          		for ( const definition of styleDefinitions ) {
          			const modelElements: Array<string> = [];
          			const ghsAttributes: Array<string> = [];
          
          			for ( const ghsDefinition of dataSchema.getDefinitionsForView( definition.element ) ) {
          				const appliesToBlock = 'appliesToBlock' in ghsDefinition ? ghsDefinition.appliesToBlock : false;
          
          				if ( ghsDefinition.isBlock || appliesToBlock ) {
          					if ( typeof appliesToBlock == 'string' ) {
          						modelElements.push( appliesToBlock );
          					} else if ( ghsDefinition.isBlock ) {
          						const ghsBlockDefinition: DataSchemaBlockElementDefinition = ghsDefinition;
          
          						modelElements.push( ghsDefinition.model );

DataSchema::getDefinitionsForView

github.com

ckeditor/ckeditor5/blob/master/packages/ckeditor5-html-support/src/dataschema.ts#L117


      
          	 */
          	public extendInlineElement( definition: DataSchemaInlineElementDefinition ): void {
          		this._extendDefinition( { ...definition, isInline: true } );
          	}
          
          	/**
          	 * Returns all definitions matching the given view name.
          	 *
          	 * @param includeReferences Indicates if this method should also include definitions of referenced models.
          	 */
          	public getDefinitionsForView( viewName: string | RegExp, includeReferences: boolean = false ): Set<DataSchemaDefinition> {
          		const definitions = new Set<DataSchemaDefinition>();
          
          		for ( const definition of this._getMatchingViewDefinitions( viewName ) ) {
          			if ( includeReferences ) {
          				for ( const reference of this._getReferences( definition.model ) ) {
          					definitions.add( reference );
          				}
          			}
          
          			definitions.add( definition );

So doing something like this might work:

editor:
  config:
    style:
      definitions:
        - { name: "test", element: ^(h1|h2|h3|h4|h5|h6|p)$, classes: ["text-small"] }

So i would need some event to modify the evaluated json before passing the config to ckeditor.

Analyzing the ckeditor typescript file from TYPO3 i found this:

convertPseudoRegExp::convertPseudoRegExp

github.com

TYPO3/typo3/blob/main/Build/Sources/TypeScript/rte_ckeditor/ckeditor5.ts#L330


      
              }
              const newData: Record<string, unknown> = {};
              for (const [key, value] of Object.entries(data)) {
                newData[key] = proc(value) ?? walkObj(value, proc);
              }
              return newData;
            }
            return data;
          }
          
          function convertPseudoRegExp(data: RecurseMapInput): RecurseMapInput {
            return walkObj(data, (entry: PseudoRegExp | unknown): RegExp | null => {
              if (typeof entry === 'object' && 'pattern' in entry && typeof entry.pattern === 'string') {
                const pseudoRegExp = entry as PseudoRegExp;
                return new RegExp(pseudoRegExp.pattern, pseudoRegExp.flags || undefined);
              }
              return null;
            });
          }
          
          function normalizeImportModules(modules: Array<string|PluginModuleDescriptor>): Array<PluginModuleDescriptor> {

Seems close but still a miss, i would need to manipulate options.editor.config.style.definitions.*.element

Does anyone have an idea? I could try to “monkeypatch” JSON parsing in the browser or try to override the ckeditor options getter method. I dont see any other option besides waiting for ckeditor to add support for multiple elements and wait for typo3 to include that features…

majpay · February 15, 2024, 12:12pm

Okay, thats just the tip of the ice-berg. Due to the editor not being a simple iframe anymore (great decision! [NOT]) you can not include the same css in the editor and your frontend. No relative paths will work (absolute paths are not possible due to the new _assets inclusion), @-rules do not work, :root selectors do not work (what about :where(:root) for default variables with low specificity).

All in all CKEditor 5 is no improvement at all IMO, it just changes many things (javascript => typescript, iframe => inline) for the worse.

My best option would be a rollback to CKEditor4, but that’s not a real option i guess so i just have to explain everyone to go f*** themselves but not being able to apply custom styles is much better and hey - TYPESCRIPT (omfg)!

majpay · February 15, 2024, 2:07pm

FYI: When using something like url(‘…/Icons/bullet-a.svg’) to reference assets (in my case configurable custom list symbols), you need to add a inline style block to the typo3 backend overwriting the relative paths with absolute paths, that you generate server-side (where you can generate the public path from the EXT:-path). That way you can use the same css for the frontend (where the relative path will work because the stylesheet location stays the same).

@-rules seem to work now, don’t know if there was any problem at all.

I am still unsure about the :root selector, this is all very hard to debug.

In the end i think using an iframe is the better option for such things, its much easier to achieve parity with the frontend.

But i can’t come up with a solution to the styles problem described in the opening post.

mabolek · February 16, 2024, 7:58am

Hi Philipp!

I can understand that this change from CKEditor 4 to 5 is causing headaches. CKEditor 4 reached end-of-life status in June 2023, so the new version is the one to use. As far as I can see, your issue is already a known and reported bug in CKEditor 5:

github.com/ckeditor/ckeditor5

Styles Feature: Allow specifying multiple (block) elements to apply to

opened 03:58PM - 01 Nov 22 UTC

mmichaelis

type:improvement support:2

## 📝 Provide a description of the improvement The suggestion is to have a con…figuration such as (taken and extended from [config example](https://ckeditor.com/docs/ckeditor5/35.2.1/api/module_style_style-StyleDefinition.html)): ```javascript { name: 'Example style', element: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], classes: [ 'foo' ] } ``` This would decrease duplication for such scenarios and would be one way to reducing the impact of: * #12770 which would, for the workaround of adding all elements one by one, bloat up the UI a lot. Note, that such multi-element approach may make sense only for block-elements, as (unfortunately, from my point of view, as it raises other already reported issues) for inline elements also the inline elements will be created (instead of also applying only to the matched element). Thus, a configuration like this would be ambiguous: ```javascript { name: 'Example style', element: ['span', 'strong'], classes: [ 'foo' ] } ``` and, if allowed, would require a clear contract like: The first element wins. ## 📃 Other details * Browser: Chrome * OS: Windows * CKEditor version: 35.2.1 * Installed CKEditor plugins: [Styles](https://ckeditor.com/docs/ckeditor5/35.2.1/features/style.html) --- If you'd like to see this improvement implemented, add a 👍 reaction to this post.

Since TYPO3 is not the vendor of CKEditor, I suggest you ask your question in the CKEditor community.

For optimal results, I recommend that you watch your language in your posts. Whether you’re saying it straight out or hide obscene language in abbreviated or garbled form, everybody understands what it means.

Best wishes

Mathias

majpay · February 16, 2024, 1:42pm

I can understand that this change from CKEditor 4 to 5 is causing headaches. CKEditor 4 reached end-of-life status in June 2023, so the new version is the one to use. As far as I can see, your issue is already a known and reported bug in CKEditor 5:
…
Since TYPO3 is not the vendor of CKEditor, I suggest you ask your question in the CKEditor community.

I know, found that myself thank you. I just wanted to check if someone in this community was able to workaround this issue.

For optimal results, I recommend that you watch your language in your posts. Whether you’re saying it straight out or hide obscene language in abbreviated or garbled form, everybody understands what it means.

I agree, sorry for my bad language. My frustration level got too high dealing with so many breaking changes at once.