javascripthtmlsveltekiteditorjs

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).

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.