UI not correct when running with editor advanced links and CKEditor 5

Created on 11 May 2023, about 2 years 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.

🐛 Bug report
Status

Active

Version

6.1

Component

Code

Created by

🇦🇺Australia gordon Melbourne

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

Merge Requests

Comments & Activities

  • Issue created by @gordon
  • Status changed to Postponed: needs info about 2 years 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 over 1 year 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
  • First commit to issue fork.
  • Pipeline finished with Success
    20 days ago
    Total: 268s
    #541526
  • 🇮🇳India shubhamgoel Delhi

    Hi,

    Created a merge request to resolve the UI Issue. Please review and merge the MR.

  • Pipeline finished with Canceled
    20 days ago
    Total: 388s
    #541532
  • Pipeline finished with Success
    20 days ago
    Total: 335s
    #541536
  • 🇺🇸United States mark_fullmer Tucson

    As of Drupal 10.5 and Drupal 11.2, version 45 of CKEditor is used, which places the Editor Advanced Link items in its own collapsible fieldset within the CKEditor Link editor. Given this, it is is likely that this proposed change is outdated. I'll not close the issue just yet, but I'm going to set its status to "Postponed" to evaluate the impact of version 45 of CKEditor.

Production build 0.71.5 2024