URL fragments in link editor

Hi together,

is there a (simple :wink:) possibility to extend the link editor to use html tag ids to generate link suggestions with url fragments?

E.g. I have a page “Karriere” and inside the page an <article id="Unsere_Benefits"> and <section id="Stellenanzeigen"> and others.

Now I’d like to be able to add links in the text content with url fragments like “#Stellenanzeigen”.

Currently when I add a link I can start with the page name and a document node is suggested:
image

When I continue typing including a fragment nothing is found:
image
At this point a suggestion list with

  • Karriere#Unsere_Benefits
  • Karriere#Stellenanzeigen

would be very helpful.

If I directly start with the fragment (for references inside the same page) it doesn’t even start searching…
image

I can manually enter the fragment and the link works, but automatic suggestions for in-page targets would be very helpful.

Is there any solution for this?

Something along the way of this, perhaps?

Thanks for the hint. I’ll look into it.

The mentioned plugin doesn’t extend the link editor as far as I know.

There is this an OP link editor alternative: https://github.com/sitegeist/Sitegeist.Archaeopteryx

Which doesn’t offer auto completion for hashes yet I think but can probably be extended if that makes sense for everyone. This is bit of a challenge but maybe one can fetch the entered site parse the HTML into a Dom and look for all id’s and suggest them…

You can enable the anchor feature for the link editor in inline fields to edit the anchors of a link.

https://docs.neos.io/cms/manual/content-repository/nodetype-properties#allowed-html-elements

You still have to render the anchors somehow. There are multiple ways for that.

Since there is no default anchor that is added to any content i see no way to add a selector for that to Neos core or to Sitegeist.Archeaopteryx

I correct myself abit:

Concerning the Arch Editor

This is bit of a challenge but maybe one can fetch the HTML of the entered url pass the HTML into a DomDocument and look for all ID attributes and suggest them in the separate hash field of your editor

@martoro that should be doable right?

Would work for anchors in the current document but hardly in foreign ones

and hashes have the problem that neos is not aware of any actual relation… so when one changes the ID it will stop working…

But the identifier of the node will not change - so using that for reference, will work long into the future

Thanks for all the help and ideas.

I decided to just activate the anchor/fragment in the standard linkeditor

editorOptions:
  linking:
    anchor: true

and add a helper button while navigating in the neos backend:

<h2 @if.isInBackend={site.context.inBackend == true}>
  <button
    @if.hasTitle={node.properties.titel}
    data-copy-node-uri={'node://' + documentNode.identifier + '#' + MYCOMPANY.Site.Link.textToId(node.properties.titel, true)}
  >
    &#x1F4CB;
  </button>
  {props.titel}
</h2>

<h2
  @if.notInBackend={site.context.inBackend == false}
  @if.has={node.properties.titel}
  id={MYCOMPANY.Site.Link.textToId(node.properties.titel)}
>
  {node.properties.titel}
</h2>

which I render at the left side of the header

.neos-backend button[data-copy-node-uri] {
    position: absolute;
    left: 1rem;
}

The button copies the uri with the document node and element node anchor to the clipboard when clicked:

var nodeUriButtons = document.querySelectorAll("button[data-copy-node-uri]");
nodeUriButtons.forEach(buttonItem => {
    buttonItem.addEventListener("click", event => {
        event.preventDefault();
        var nodeUri = event.target.getAttribute("data-copy-node-uri");
        navigator.clipboard.writeText(nodeUri);
        return false;
    });
});

The copied uri (e.g. node://47a9775f-1ae6-40b8-9e14-05f54dc80910#Unsere_Benefits) I can then paste into the linkeditor.

1 Like