BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

How can I keep links from opening in a new tab

Open EvanParden opened this issue 1 year ago • 0 comments

I am building an application similar to Obsidian, where there are internal and external links. I have tried to modify them. I have special links for the internal links that start with a $ and then an ID, for example: $55a2902f... For these links, I do not want to open them in a new tab, so I have tried to remove previous event listeners and then handle it with a function. This works, but it still opens a new blank tab even though all attributes are removed. I inspected it with dev tools and everything is removed, and my code works, but it is still opening a new tab with auto:blank.

Disabling special links

  function disableSpecialLinks(): void {
    // Get all <a> elements on the page
    const links = document.querySelectorAll<HTMLAnchorElement>('a');

    // Iterate over each link
    links.forEach(link => {
        const href = link.getAttribute("href");
        if (href && !href.startsWith("$")) {
            // Remove previous event listeners
            const oldOnClick = link.onclick;
            if (oldOnClick) {
                link.removeEventListener("click", oldOnClick);
            }

            
            // Add event listener
            link.addEventListener("click", (event) => {
                event.preventDefault();
                event.stopPropagation();

                console.log(link.getAttribute("data-href"));
            });

            // Set new attributes
            link.setAttribute("href", "javascript:void(0)");
            link.setAttribute("data-href", href);
            link.removeAttribute("target"); // Remove target to prevent opening in new tab
        }
    });
}

Special link output

<a href="javascript:void(0)" data-href="$55a2902f-ceae-4d23-bd24-dd1d2812f78e">test</a>

Normal link output

<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.exsample.com">test</a>

I have also tried adding or modifying the _tiptap editor extensions but no luck

I know that this is not a future request but i have been stuck on this for a while now and i ask on Discord but have not gotten any answers, Any help would be greatly appreciated Thanks!

EvanParden avatar May 25 '24 15:05 EvanParden