Add style (Styles-Plugin) to anchor leads to unuseable behaviour #14683

sascha-meissner · 2023-07-28T10:14:10Z

📝 Provide detailed reproduction steps (if any)

Make a ckeditor5 build with the Styles-plugin included

take this codesnippet

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .button {
        padding:25px;
        background:#eaeaea;
      }
    </style>
  </head>
<body>
  <div id="editor"></div>
  <!-- Make sure this points to the built ckeditor.js -->
  <script src="/ckeditor/ckeditor.js"></script>
  <script>
    ClassicEditor
      .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [
                'style',
                'link'
            ],
        },
        style: {
            definitions: [
                {
                  name: 'Button',
                  element: 'a',
                  classes: [ 'button' ]
                }
            ]
        }
      } )
      .then( editor => {
        window.editor = editor;
      } )
      .catch( err => {
        console.error( err.stack );
      } );
  </script>
</body>
</html>

Now, add some text, select it and make a link out of it, now when selecting the link-text, the style "button" will get avaiblable in the styles-dropdown, select the style - Now see the "Actual result" part of this issue.

✔️ Expected result

When applying the "button-style" to an anchor, a hit on return should "leave the anchor and exit the style" (like in ckeditor4)

❌ Actual result

When applying the "button-style" to an anchor, there is no way to continue writing without the style, when hitting return, the style will further be applied but cannot be removed (the style in the styles button is greyed out, even though you see visually that it is applied).

❓ Possible solution

When hitting enter the style should not be further applied

📃 Other details

Browser: FF / Chrome
OS: Windows/Mac
First affected CKEditor version: Ckeditor5
Installed CKEditor plugins: Styles

I really hope this is no duplicate, i can reproduce this with the latest 38.1 Version

The text was updated successfully, but these errors were encountered:

niegowski · 2023-08-01T16:19:01Z

The GHS has an invalid schema definition for htmlA:

ckeditor5/packages/ckeditor5-html-support/src/schemadefinitions.ts

Line 678 in cfab99d

copyOnEnter: true

This line should not be here same as for the linkHref attribute. cc @Witoso

Witoso · 2023-08-07T11:36:04Z

I wonder @sascha-meissner why don't you use Link plugin? With it, everything works correctly, and escape is possible.

Screen.Recording.2023-08-07.at.10.00.43.mov

(@niegowski 's case is to fix anyway)

sascha-meissner · 2023-08-08T09:31:53Z

@niegowski Thanks for your answer and @Witoso Thanks for your suggestion, My example code here was to break the error down to its root cause. Actually i´m using Ckeditor5 within Drupal10 (Drupal ships this with it´s core and has an own link-implementation which will supply an autocomplete to target content, and for this link-implementation the same error appears like described in my minimal code example)

wimleers · 2023-08-08T10:11:21Z

This seems like a similar behavior/bug to #14216, but based on #14683 (comment) by @niegowski, it sounds like it'll need to be fixed upstream anyway?

I wonder @sascha-meissner why don't you use Link plugin? With it, everything works correctly, and escape is possible.

I'm confused by this statement 😅 @sascha-meissner is showing that he's using the link + style plugins, and based on your video, you're doing the same? 🤔

What am I missing? 🙈

Upstream Drupal issue: https://www.drupal.org/project/drupal/issues/3376167

Witoso · 2023-08-08T10:21:32Z

@sascha-meissner showed an example w/o Link plugin, only with GHS*, where a link is an htmlA element in the model. I'm not certain how impactful this is for Drupal, do you have a link plugin that behaves differently than our link (uses htmlA?)

*GHS is a dependency of Style.

niegowski · 2023-08-08T10:38:39Z

@sascha-meissner showed an example w/o Link plugin, only with GHS*, where a link is an htmlA element in the model. I'm not certain how impactful this is for Drupal, do you have a link plugin that behaves differently than our link (uses htmlA?)

@Witoso. It's not that. The Link feature uses the linkHref attribute but GHS can extend the link behavior by storing additional data in htmlA attribute. The existence of both is completely valid and does not mean that the Link feature is not used.

Witoso · 2023-08-08T10:53:14Z

Gotcha, got confused about the minimal build mentioned above, I thought it's very minimal :)

Link plugin and GHS are enabled.
Additional attributes htmlA may be added:
And are copied on enter which shouldn't happen (This line should not be here same as for the linkHref attribute.)

Witoso · 2023-08-08T11:09:18Z

Workaround: removing the flag from the schema after initialization:

editor.model.schema.setAttributeProperties( 'htmlA', { copyOnEnter: false } )

wimleers · 2023-08-09T12:13:08Z

@Witoso Is that enough to completely fix the problem, without side effects for other functionality?

Witoso · 2023-08-09T13:16:55Z

Attaching video of what happens after the workaround:

Screen.Recording.2023-08-09.at.15.07.49.mov

Pressing enter inside the link, splits it and the style is copied. Possible to disable style (as before).
Pressing enter at the end of the link creates a new line without any htmlA properties (fix).

without side effects for other functionality?

No, it shouldn't affect other features unless someone created something that expects this is the way it works 🤔. But that would be an extremely rare case, I think. This is a bug, for sure.

wimleers · 2023-10-03T09:29:09Z

If it's really a one-liner to fix, can we please get this in the upcoming release? 🙏

el7cosmos · 2023-10-09T06:40:18Z

apply the suggestion workaround, but still have the problem when clicking outside the link

and also when backspace after hitting the enter button.

Screen.Recording.2023-10-09.at.13.34.57.mov

Witoso · 2023-10-10T08:10:27Z

May be related: #15051.

…o-unusable-behaviour Fix (html-support): Additional attributes for the link element (e.g. CSS class) should not be applied after pressing Enter. Closes #14683.

sascha-meissner added the type:bug This issue reports a buggy (incorrect) behavior. label Jul 28, 2023

niegowski added the intro Good first ticket. label Aug 1, 2023

Witoso added package:html-support domain:ui/ux This issue reports a problem related to UI or UX. labels Aug 7, 2023

Witoso added the squad:core Issue to be handled by the Core team. label Oct 3, 2023

Witoso mentioned this issue Oct 11, 2023

Links with class attributes can create unexpected duplicate elements in regular editing #15051

Closed

CKEditorBot added the status:planned Set automatically when an issue lands in the "Sprint backlog" column. We will be working on it soon. label Oct 18, 2023

mmotyczynska self-assigned this Oct 24, 2023

CKEditorBot added status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. and removed status:planned Set automatically when an issue lands in the "Sprint backlog" column. We will be working on it soon. labels Oct 24, 2023

mmotyczynska mentioned this issue Oct 24, 2023

Additional attributes for link element should not be copied on enter. #15226

Merged

niegowski closed this as completed in #15226 Oct 25, 2023

CKEditorBot removed the status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. label Oct 25, 2023

CKEditorBot added this to the iteration 68 milestone Oct 25, 2023

CKEditorBot mentioned this issue Oct 26, 2023

📄 Nightly releases changelog #14724

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add style (Styles-Plugin) to anchor leads to unuseable behaviour #14683

Add style (Styles-Plugin) to anchor leads to unuseable behaviour #14683

sascha-meissner commented Jul 28, 2023 •

edited

Loading

niegowski commented Aug 1, 2023

Witoso commented Aug 7, 2023

sascha-meissner commented Aug 8, 2023

wimleers commented Aug 8, 2023 •

edited

Loading

Witoso commented Aug 8, 2023 •

edited

Loading

niegowski commented Aug 8, 2023

Witoso commented Aug 8, 2023 •

edited

Loading

Witoso commented Aug 8, 2023

wimleers commented Aug 9, 2023

Witoso commented Aug 9, 2023 •

edited

Loading

wimleers commented Oct 3, 2023

el7cosmos commented Oct 9, 2023

Witoso commented Oct 10, 2023

Add style (Styles-Plugin) to anchor leads to unuseable behaviour #14683

Add style (Styles-Plugin) to anchor leads to unuseable behaviour #14683

Comments

sascha-meissner commented Jul 28, 2023 • edited Loading

📝 Provide detailed reproduction steps (if any)

✔️ Expected result

❌ Actual result

❓ Possible solution

📃 Other details

niegowski commented Aug 1, 2023

Witoso commented Aug 7, 2023

sascha-meissner commented Aug 8, 2023

wimleers commented Aug 8, 2023 • edited Loading

Witoso commented Aug 8, 2023 • edited Loading

niegowski commented Aug 8, 2023

Witoso commented Aug 8, 2023 • edited Loading

Witoso commented Aug 8, 2023

wimleers commented Aug 9, 2023

Witoso commented Aug 9, 2023 • edited Loading

wimleers commented Oct 3, 2023

el7cosmos commented Oct 9, 2023

Witoso commented Oct 10, 2023

sascha-meissner commented Jul 28, 2023 •

edited

Loading

wimleers commented Aug 8, 2023 •

edited

Loading

Witoso commented Aug 8, 2023 •

edited

Loading

Witoso commented Aug 8, 2023 •

edited

Loading

Witoso commented Aug 9, 2023 •

edited

Loading