Adding styling to a mention built with MentionCustomization adds the style tags in the wrong place

[adampal]

📝 Provide detailed reproduction steps (if any)

The bug occurs any time when you use the mention feature with the MentionCustomization function.
You can see the bug in action in the ckeditor docs page on the example here:

In that demo,

1. Highlight the @tdog text .
2. Click the Bold button to add the bold style to the text
3. Inspect the element

✔️ Expected result

What is the expected result of the above steps?

The expected result is that the <strong> tags should be added outside of the <span> that creates the mention.
Eg <strong><span>my mention</span></strong>
This works correctly when you do the same actions with the demo at the top of the page here

❌ Actual result

What is the actual result of the above steps?

What actually happens is that the <strong> tag is inside the <span> tag
Eg <span><strong>my mention</strong></span>

This creates an issue when pulling data back from a database to re-render the mention. It seems like because the contents of the <span> tag don't match up with what is expected, it gets flagged as a partial mention and the mention span is not rendered.

I'm thinking maybe here in the source code is where the issue happens.

📃 Other details

• Browser: Safari 13.0.5
• OS: MacOS 10.15.3
• CKEditor version: 18.0.0
• Installed CKEditor plugins:
  EssentialsPlugin,
  UploadAdapterPlugin,
  AutoformatPlugin,
  BoldPlugin,
  ItalicPlugin,
  Underline,
  BlockQuotePlugin,
  EasyImagePlugin,
  HeadingPlugin,
  ImagePlugin,
  ImageCaptionPlugin,
  ImageStylePlugin,
  ImageToolbarPlugin,
  ImageUploadPlugin,
  LinkPlugin,
  ListPlugin,
  ParagraphPlugin,
  Mention,
  MentionCustomization,
  Table,
  TableToolbar,
  TableProperties,
  TableCellProperties,
  Indent,
  IndentBlock,
  RemoveFormat,
  Font,
  Highlight,
  HorizontalLine,
  PasteFromOffice,
  Alignment,
  PageBreak,
  Subscript,
  Superscript,

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Mgsy]

Hi! Thanks for the report, I can reproduce the issue. After loading the content with a styled customized mention, the marker is lost.

Steps to reproduce:

1. Go to http://localhost:8125/ckeditor5-mention/tests/manual/mention-custom-view.html
2. Add bold to one of the markers
3. editor.setData( editor.getData() )

I've noticed also another behaviour - styles applies to the whole marker regardless of the selection. If you'll style only one character, the whole marker becomes styled.

[Reinmar]

@jodator, AFAICS MentionEditing uses priority:20 for the view attribute element generated for the mention. Shouldn't we use the same priority in the other guides and manual tests?

[jodator]

Shouldn't we use the same priority in the other guides and manual tests?

Yep. Confirmed - we should use it also in the docs and manual tests.

[adampal]

I've noticed also another behaviour - styles applies to the whole marker regardless of the selection. If you'll style only one character, the whole marker becomes styled.

@Mgsy I like this particular behaviour. It's what I was expecting to happen as a user.

[adampal]

Thanks for looking in to the issue everyone.
To confirm, would changing the priority change the order of the html tags?

[jodator]

@adampal yes you need to change attribute element priority. This is a default mention downcast:

https://github.com/ckeditor/ckeditor5-mention/blob/572d198f8beef66e10d8ed7f14420a19f13d34cc/src/mentionediting.js#L134-L150:

viewWriter.createAttributeElement( 
    'span',
    {
        class: 'mention',
        'data-mention': mention.id
    }, 
    {
        id: mention._uid,
        priority: 20 // <-- attribute element priority.
    } 
);