URL fragments in link editor

Community Newcomer's Corner
#1

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?

#2

Something along the way of this, perhaps?

#3

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

#4

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…

#5

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

#6

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?

#7

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

#8

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

#9

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

#10

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