Paragraph Anchors

About

Automatically generates a URL-safe anchor ID for Paragraph entities, based on whichever "title-like" field is populated on the paragraph, and exposes it as a read-only tracking field in the admin UI. Optionally postfixes each anchored paragraph with a "copy link" button so editors and site visitors can copy a direct link to that section.

• Anchor generation: on save, the module scans a prioritized list of source fields (e.g. field_title, field_heading) and slugifies the first non-empty one into field_generated_anchor_id. If none of those fields have a value, it falls back to the paragraph's UUID so an anchor is always available. A numeric suffix (--2, --3, ...) is only added when the slug collides with another paragraph's stored anchor on the same page (the same host node/entity) — a duplicate title on a different, unrelated page never gets suffixed, since it isn't a real HTML id collision.
• Read-only tracking field: field_generated_anchor_id is shown on the paragraph's edit form so editors can see the generated value, but the widget is disabled — it can't be hand-edited. This works even when the paragraph is nested inside other paragraphs (e.g. layout paragraphs).
• Copy anchor link button: a small icon button is postfixed to each anchored paragraph on the front end, pinned to the top-right corner of the component, copying the absolute page URL + #anchor to the clipboard on click. Controlled by a site-wide default, a per-paragraph override, and a permission (see below).

Requirements

• Paragraphs

Permissions

• Administer Paragraph Anchors settings — access to the settings form at /admin/config/content/paragraph-anchors. Restricted by default.
• Access "copy anchor link" buttons — required for the copy-link icon button to appear at all, checked ahead of the site-wide default/ per-paragraph override below. Granted to Anonymous and Authenticated user automatically on install so the button keeps working out of the box; revoke it from specific roles at /admin/people/permissions if you need to restrict who sees it (e.g. hide it from anonymous visitors and only show it to logged-in editors).

Configuration

Visit Admin > Configuration > Content > Paragraph Anchors (/admin/config/content/paragraph-anchors, requires the Administer Paragraph Anchors settings permission) to configure:

1. Enable on these paragraph bundles — check the paragraph types that should get an anchor. This attaches field_generated_anchor_id (the generated slug) and field_anchor_copy_override (the per-instance copy button override) to that bundle. Unchecking a bundle removes both fields from it.
2. Source fields (priority order) — one field machine name per line. The first field in the list with a non-empty value on a given paragraph is used to build its anchor slug. Defaults to a sensible list of common title-like fields (field_title, field_heading, field_name, field_label, title); add your own to the list as needed.
3. Show 'copy anchor link' button by default — the site-wide default for the copy-link button described above. Still subject to the permission above — unchecking someone's permission hides the button regardless of this setting.

How editors use it

Once a bundle is enabled, editing a paragraph of that type shows a greyed out, monospaced Generated Anchor ID field with a description like Automated System Field: Use #your-slug-here to link here. — this updates automatically every time the paragraph is saved; it can't be typed into directly.

Each paragraph also gets a Copy anchor link button field (a simple "Use site default" / "Always show" / "Always hide" selector) so an editor can force the copy-link button on or off for one specific component, regardless of the site-wide default.

The copy-link button

• Appearance: a small circular icon button (no text label), pinned to the top-right corner of the anchored paragraph's own wrapper via position: absolute — it does not affect the component's layout or push its content down.
• Accessibility: the icon is aria-hidden; the button's accessible name comes entirely from an aria-label ("Copy link to this section"), translatable via Drupal.t(). The same text is also set as a title attribute, so sighted mouse users get a native hover tooltip too — aria-label alone has no visible on-screen equivalent. It's a real </code>, so it's reachable and operable by keyboard (Tab + Enter/Space) with no extra markup needed, and gets a visible <code>:focus outline (not :focus-visible-only, so it isn't dependent on browser support). A visually-hidden aria-live="polite" region announces "Copied!" to screen readers when the click succeeds; it's a sibling of the button rather than nested inside it, because a live region inside an aria-label'd button isn't reliably re-announced by assistive tech.
• Visibility: gated by the access paragraph anchor copy links permission first, then the site-wide default / per-paragraph override described above. All three must allow it for the button to render.