Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Anchor tags for local pages don't follow through in SvelteKit application

EDIT: Interestingly, if I insert a broken href, I do get a page not found error. But if it’s a correct one, nothing happens.

I have an rich text field made with EditorJS. The user should be allowed to link to other files in the same library. So I got an inline-tool that allows to create links like <a href="/library/other-file">Other File</a>. Unfortunately, clicking these links in the EditorJS field does not actually forward the user to the Other File. However, when I inspect the element and just click the href there, it does open the respective page.

I’m using SvelteKit for routing and the same linking logic seems to work in other parts of the application (sometimes I also just change the window.location to the new route).

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

To be honest, I’m somewhat lost. I’m not even sure if the reason is coming from some mistreatment of SvelteKits oder EditorJS’ logic, or if I overlook something more fundamental.

>Solution :

The editor probably uses contentEditable and any links within a editable section will not trigger on click. You could probably work around this, by adding a manual click event listener like this:

link.addEventListener('click',
  () => document.location.href = link.href
);

If the link is currently not editable, there might be other logic which prevents the default behavior for some reason. The same workaround should apply.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading