Improve UI when using with Editor Advanced Link

Created on 11 May 2023, about 1 year ago
Updated 16 May 2024, about 1 month ago

Problem/Motivation

My client is currently running both Linkit and Editor Advanced Links with CKEditor 5. It functionally works, however is UI is not very intuitive. Since Linkit is not really using a proper autocomplete and just added the list below the url element, when using Editor advanced links as well and adding the additional items such as title, classes, aira, etc it just pushes them off the bottom of the page.

Steps to reproduce

Install both Linkit and Editor Advanced Links and configure them with CKEditor 5 and use them both.

Proposed resolution

Either turn the list into a proper autocomplete or add a config to allow configuration to allow for either.

✨ Feature request
Status

Active

Version

7.0

Component

Code

Created by

πŸ‡¦πŸ‡ΊAustralia gordon Melbourne

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

Comments & Activities

  • Issue created by @gordon
  • Status changed to Postponed: needs info about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States mark_fullmer Tucson

    Hi, and thanks for exploring the UI possibilities for this module.

    To give the maintainers a better sense of what potential improvements could be made to the UI of the autcomplete, can you provide an example of what behavior you would expect to see? I assume it would still be useful to have a list of matches that can be browsed. Are you, however, picturing that those matches would be contained within a scrollable area?

    Or should the Editor Advanced Link items be located in a different place relative to the link field?

    Thanks!

  • Status changed to Active 7 months ago
  • πŸ‡¦πŸ‡ΊAustralia gordon Melbourne

    Hi, Sorry for the delay. because CKEditor 5 was not "ready" for primetime for my client I was redirected to upgrade our site to Drupal 10.

    Basically right now if linkit embeds the dropdown for the autocomplete in the form. When you are just running the standard ckeditor 5 link plugin there is nothing below it except the βœ” and the β›Œ of the ck balloon drop down. When you start enabling other modules like editor advanced which adds additional fields below the url the drop down starts to no look correct.

    Also other problems occurs when the balloon is lengthened by the auto complete it can push the lower items off the bottom of the screen making them unaccessible.

    What I would like to see is something like the jQuery UI autocomplete which pops the list out and doesn't expand the window. It would be better if it was how linkit does it in CKEditor 4 where the list expands over the following elements and not push them off the page.

  • πŸ‡ΊπŸ‡ΈUnited States mark_fullmer Tucson
Production build 0.69.0 2024