Added fields to the link editing balloon should appear above submit/cancel buttons

Created on 30 June 2023, about 1 year ago
Updated 2 January 2024, 8 months ago

Problem/Motivation

Following the documentation for hook_ckeditor5_plugin_info_alter enables the addition of a field to the linking form. Unfortunately, the new field is added underneath the action buttons for the form, violating the Principle of Least Astonishment, since users expect the action buttons to be located at the bottom of a form.

Steps to reproduce

  1. Implement hook_ckeditor5_plugin_info_alter() in a custom module as documented
  2. open a page with a field configured for editing with ckeditor5
  3. highlight some text
  4. click on the Link button
  5. note the position of the new field

Proposed resolution

Position the action buttons at the bottom of the form, or at the very least expose and document an API for controlling the position of fields added with the hook described above.

User interface changes

Action buttons appear where the user expects them to be.

API changes

Possibly expose mechanism for controlling the position of fields added to the form.

🐛 Bug report
Status

Active

Version

10.1

Component
CKEditor 5 

Last updated 2 days ago

Created by

🇺🇸United States bkline@rksystems.com Virginia

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

Comments & Activities

  • Issue created by @bkline@rksystems.com
  • Status changed to Postponed: needs info about 1 year ago
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Can you please provide steps to reproduce? Such sample code would be helpful to A) write a failing test, B) then fix it.

    That way we can prevent this from ever regressing again!

  • 🇺🇸United States bkline@rksystems.com Virginia

    I'm a little bit puzzled by your request (and the new state for the issue), since I provided steps to reproduce the problem with the original ticket, and included a link to the code which demonstrates the problem. Can you be more specific about what you're asking for? Other than substituting our module name for "hook" in the name of the function, and a renamed variable, our code is pretty much identical to the code I linked to in the hook's documentation.

    /**
     * Implements hook_ckeditor5_plugin_info_alter().
     */
    function ebms_core_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
      assert($plugin_definitions['ckeditor5_link'] instanceof CKEditor5PluginDefinition);
      $definition = $plugin_definitions['ckeditor5_link']->toArray();
      $definition['ckeditor5']['config']['link']['decorators'][] = [
        'mode' => 'manual',
        'label' => 'Open in a new tab',
        'defaultValue' => TRUE,
        'attributes' => [
          'target' => '_blank',
        ],
      ];
      $plugin_definitions['ckeditor5_link'] = new CKEditor5PluginDefinition($definition);
    }
    
    
  • 🇺🇸United States bkline@rksystems.com Virginia

    Here's a screen shot showing the position of the new field.

  • Status changed to Active about 1 year ago
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    #4 was exactly what I was after — thanks!

    (I just wanted concrete steps to reproduce!)

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Clarifying title.

  • 🇮🇩Indonesia el7cosmos 🇮🇩 GMT+7

    This does not happen on a clean install.

    This is caused by https://www.drupal.org/project/editor_advanced_link .

Production build 0.71.5 2024