CKEditor5 resets the autocomplete result styles

Created on 23 May 2023, about 1 year ago
Updated 26 May 2023, about 1 year ago

Problem/Motivation

Currently .linkit-result-line--title (the result label) and .linkit-result-line--description (the result metadata) have the same style. This is a bit confusing, as it's hard to see where a new line with the next result starts.

Steps to reproduce

Enter Metadata into the link matcher configuration, like for content:
#[node:nid] | [node:content-type:name] | [node:created:medium] by [node:author]
Try the autocomplete and see the results (in our case in Gin theme)

Proposed resolution

Display .linkit-result-line--description smaller and in <em> or something like that.
Eventually use zebra-style or add a border-bottom to each entry

This is the markup:

<li class="linkit-result-line ui-menu-item">
  <div class="linkit-result-line-wrapper ui-menu-item-wrapper" id="ui-id-44" tabindex="-1">
    <span class="linkit-result-line--title">I am the label, e.g. the node title</span>
    <span class="linkit-result-line--description">I am the result meta data</span>
  </div>
</li>

Remaining tasks

  1. Discuss
  2. Implement
  3. Release

User interface changes

See above

API changes

None

Data model changes

None

πŸ› Bug report
Status

Fixed

Version

6.1

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024