Change to how anchor links are added

[SimonMurphyDI]

I'm submitting a ...

[X] Bug report 
[ ] Regression (behaviour that used to work and stopped working in a new release)

Describe the Issue

When trying to add anchor links to a page (using the option in the editor), the anchor link button creates 'href' rather than 'id' so the links don't function.

To Reproduce

1. Go to a publication or resource and try to add an anchor link - it doesn't function. Alex explained this is because the the anchor link button creates 'href' rather than 'id'

[edwinmp]

@SimonMurphyDI there are two ways to create anchor links, and both are behaving as expected i.e they create links to preexisting anchors (the value of href is supposed to match an already existing ID elsewhere).

Do you need one that creates actual anchors, or could you be using the wrong id in the anchor link. It would help to have a clear use case so that I can know how to proceed.

[akmiller01]

Hi @edwinmp Simon asked me about this one in the first place. You are correct in guessing that Simon is asking for the ability to place an anchor (something like <a id="arbitrary-id"></a>) via the WYSIWYG.

Given the fact that linking to pre-existing anchors was added to the standard link button, I thought it would make the most sense to refactor our old anchor link button to create <a id= instead of <a href=.

The existing anchor is created as a combination of this wagtail hook https://github.com/devinit/DIwebsite-redesign/blob/develop/di_website/publications/wagtail_hooks.py#L14-L68 and this bit of React https://github.com/devinit/DIwebsite-redesign/blob/develop/di_website/common/static/common/js/anchor.js

Theoretically it should be as simple as swapping out mentions of href in the hook and JS to id but I gave that a quick try and it seems like id is a protected namespace (reserved for giving anchors the ID number of a page for an internal link), and I couldn't figure out how to work around that.

If it's not possible to add to the WYSIWYG editor by extending Draftail, our only other option is to add it as a block to the StreamField.

[edwinmp]

@SimonMurphyDI added a StreamField - anchor. Add it before the content you want the navigate to.

[SimonMurphyDI]

I still don't understand how to make this work so can't test the functionality

[edwinmp]

@SimonMurphyDI Step are as follows:

1. Add an anchor to the place you want to navigate to - make sure the Anchor ID is unique

2. In a RichText block somewhere, add an anchor link, with the ID(#) set to the one you created in step 1

[SimonMurphyDI]

Looks great!