Problem/Motivation

When authoring content it is hard to see which elements already carry an ID
(for anchors, in-page links, JS/CSS targeting). Today you have to open Source
editing to check. It would help to optionally surface each element's ID
directly in the editor.

Proposed resolution

Add a per text format option "Show element IDs in the editor". When enabled,
each element that has a custom ID shows a small badge with its ID above it, in
the editing view only — the saved markup is never changed.

Implementation notes

- A configurable plugin class (CKEditor5PluginConfigurableInterface) adds the
checkbox and injects `idAttributes.showLabels` into the editor config.
- The badge is produced by an editing-downcast-only converter that mirrors the
custom id onto a `data-id-label` view attribute, plus a CSS ::before badge.
Nothing is added to the data downcast, so output HTML is untouched.
- The feature ships as a separate CKEditor 5 plugin built into its own bundle
(js/build/idAttributesLabels.js), so it does not modify the existing
idAttributes bundle. This keeps it independent from other changes/patches.
- For tables the badge is hosted on the wrapper, since
::before on a display:table box does not render reliably.

User interface changes

- New checkbox "Show element IDs in the editor" in the plugin settings of the
text format configuration.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

hesslinger created an issue. See original summary.

hesslinger’s picture

hesslinger’s picture

Status: Active » Needs review

dieterholvoet made their first commit to this issue’s fork.

  • dieterholvoet committed 8ad16c93 on 1.0.x
    feat: #3605548 Add an option to display element IDs in the editing view...
dieterholvoet’s picture

Status: Needs review » Fixed

Works great, good idea!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.