Project

General

Profile

Actions

Bug #99673

closed

Epic #99669: CKEditor5 Collection

CKEditor5 Style Plugin

Added by Benjamin Kott about 1 year ago. Updated 7 months ago.

Status:
Resolved
Priority:
Should have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2023-01-06
Due date:
% Done:

100%

Estimated time:
(Total: 0.00 h)
TYPO3 Version:
12
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

Style definition, this should add btn and a btn-primary to a link.

{
    name: 'a',
    classes: [ 'btn', 'btn-primary' ]
},

The following examples show the result of selecting the style and | represents the current cursor positon:

Text <a href="#">Example Text</a> Text
<a class="btn btn-primary"></a>Text <a href="#">Example Text</a> Text
Text <a href="#">Example| Text</a> Text
Text <a href="#">Example</a><a class="btn btn-primary"></a><a href="#"> Text</a> Text
Text |<a href="#">Example Text</a>| Text
Text |<a href="#" class="btn btn-primary">Example Text</a>| Text
Text <a href="#">Exam|ple| Text</a> Text
Text <a href="#">Exam</a><a class="btn btn-primary" href="#">ple</a><a href="#"> Text</a> Text
Text <a href="#">Example |Text|</a> Text
Text <a href="#">Example </a><a class="btn btn-primary" href="#">Text</a> Text
Text <a href="#">Example |Text</a> Text|
Text <a href="#">Example </a><a class="btn btn-primary" href="#">Text</a><a class="btn btn-primary"> Text</a>

As a user I expect that when the text selection is inside the link, that the class will be added to the existing element.
As a user I expect that when no text selection exists, only styles are available that can be inserted standalone.
As a user I expect to only see available styles for a selection

This seems not to be possible with CKEditor5 Styles plugin.

Possible Solution:
Write custom plugin for styles and replace existing styles plugin

https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-style


Subtasks 3 (0 open3 closed)

Bug #99477: ckeditor5 html tag limitation on custom stylesClosed2023-01-06

Actions
Bug #101427: Errors in content creation in connection with styled linksResolved2023-07-24

Actions
Bug #101429: Changing the stylesheet class are confusingly and incorrectlyResolved2023-07-24

Actions
Actions #1

Updated by Benjamin Kott about 1 year ago

  • Description updated (diff)
Actions #2

Updated by Benjamin Kott about 1 year ago

  • Description updated (diff)
Actions #3

Updated by Benjamin Kott about 1 year ago

  • Description updated (diff)
Actions #4

Updated by Benjamin Kott about 1 year ago

  • Description updated (diff)
Actions #5

Updated by Benjamin Kott about 1 year ago

  • Subtask #99678 added
Actions #6

Updated by Benjamin Kott about 1 year ago

  • Category set to RTE (rtehtmlarea + ckeditor)
Actions #7

Updated by Benjamin Kott about 1 year ago

  • Subtask deleted (#99678)
Actions #8

Updated by Benjamin Franzke 7 months ago

  • Subtask #101429 added
Actions #9

Updated by Benjamin Franzke 7 months ago

  • Subtask #99477 added
Actions #10

Updated by Benjamin Franzke 7 months ago

  • Subtask #101427 added
Actions #11

Updated by Benjamin Franzke 7 months ago

  • Status changed from New to Accepted

The style plugin received a link-integration in CKEditor5 v38 [1].
It is included in TYPO3 since v12.4.2 (see #100908)

https://github.com/ckeditor/ckeditor5/blob/v38.0.1/CHANGELOG.md#styles

Actions #12

Updated by Benjamin Franzke 7 months ago

As a user I expect that when the text selection is inside the link, that the class will be added to the existing element.

Solved upstream

As a user I expect that when no text selection exists, only styles are available that can be inserted standalone.

Solved upstream by marking those styles as deactived.

As a user I expect to only see available styles for a selection

This is not ideal, but not a reason to fork the plugin IMO. We are good with CKEditor only allowing sensible styles to be activated.

Now that ckeditor marks unavailable items as disabled, We could fix this via:

.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled {
  display: none;
}
Actions #13

Updated by Gerrit Code Review 7 months 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/+/81269

Actions #14

Updated by Gerrit Code Review 7 months 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/+/81269

Actions #15

Updated by Gerrit Code Review 7 months ago

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

Actions #16

Updated by Anonymous 7 months ago

  • Status changed from Under Review to Resolved
Actions

Also available in: Atom PDF