Make the UI for adding/editing abbr tag similar to the anchor link UI

Created on 11 March 2024, 8 months ago
Updated 2 April 2024, 8 months ago

Problem/Motivation

abbr UI can be improved as it's currently not a CKEditor5 object and can't be edited by navigating to it same way as link is:

Proposed resolution

Make adding/editing

Example: CKEditor's "Add Link" UI:

Example: CKEditor's "Edit Link" UI:

Remaining tasks

  1. Clarify what "[abbr UI is] currently not a CKEditor5 object" means (see #2)
  2. Clarify (or propose a new design/mockup) what the "Add Abbreviation" UI should look like if the toolbar button is clicked without selecting text (see #2)
  3. Clarify (or propose a new design/mockup) what the "Add Abbreviation" UI should look like if the toolbar button is clicked after selecting text (see #2)
  4. Clarify (or propose a new design/mockup) what the "Edit Abbreviation" UI should look like. (see #2)
  5. Clarify (or propose a new design/mockup) what should appear in the balloon if you click on an abbreviation in the editor. (see #2)
  6. Write a patch with tests
  7. Review and feedback
  8. RTBC and feedback
  9. Commit and release

User interface changes

(to be determined)

API changes

(to be determined, hopefully none)

Data model changes

(to be determined, hopefully none)

Feature request
Status

Postponed: needs info

Version

4.0

Component

Code

Created by

🇦🇺Australia jannakha Brisbane!

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

Comments & Activities

  • Issue created by @jannakha
  • Status changed to Postponed: needs info 8 months ago
  • 🇨🇦Canada mparker17 UTC-4

    @jannakha, thank you for filing this issue. I've moved it from the "Task" category to the "Feature request" category , because it is asking for "new functionality to be added to the project". I have also changed the Priority from "Normal" to "Major" because changing the UI is both very valuable to the project, and also a large scope of work to complete.

    I didn't see your proposed resolution ("Make adding/editing

    I am marking this as "Postponed (maintainer needs more info)" because we need some more information from you before we can proceed...

    1. Apologies (you probably know a lot more about the inner workings of CKEditor plugins than I do), but when you say "abbr UI can be improved as it's currently not a CKEditor5 object", what do you mean by "not a CKEditor5 object"?
      My first thought was that you're referring to how CKEditor core upcasts anchor tags to CKEditor "model" objects; but the code in our js/ckeditor5_plugins/abbreviation/src/abbreviationediting.js does the same thing... so perhaps you mean something else? Can you explain what you mean specifically?
    2. Could you clarify whether you're requesting that we change the "Add Abbreviation" UI if the toolbar button is clicked without selecting text? (currently, both fields in the balloon are editable in this case) If so, what should it look like and how should it work?
    3. Could you clarify whether you're requesting that we change the "Add Abbreviation" UI if the toolbar button is clicked after selecting text? (currently, only the second "Add title" field in the balloon is editable in this case) If so, what should it look like and how should it work?
    4. Could you clarify whether you're requesting that we change the "Edit Abbreviation" UI at all? If so, what should it look like and how should it work?
    5. Could you clarify which buttons you are requesting to appear in the balloon if you click an abbreviation? (CKEditor core's anchor tag UI shows an "Fragment" button which doesn't make sense in the context of an abbreviation, an "Edit" button that launches an Edit balloon, and a "Delete" link that removes the link/abbreviation)

    Thank you!

Production build 0.71.5 2024