[QUESTION] NS_ERROR_FAILURE on rte.exec
Question
I'm currently using GrapesJS to build an editor for blog posts in my website. One of the things that I wanted to change from the default behavior was the inability to "unlink" a piece of text that had been converted to a hyperlink using the rte toolbar. So I wrote the following function:
editor.RichTextEditor.add('hyperlink',
{
icon: '🔗',
attributes: {title: 'Hyperlink'},
result: rte =>
{
var range = rte.selection().getRangeAt(0);
var container = range.commonAncestorContainer;
if (container.nodeType == 3)
container = container.parentNode;
if(container.nodeName === "A")
{
var sel = rte.selection();
sel.removeAllRanges();
range = document.createRange();
range.selectNodeContents(container);
sel.addRange(range);
rte.exec('unlink');
}
else
{
var url = window.prompt('Enter the URL to link to:');
if (url)
rte.insertHTML(`<a class="link" href="${url}">${rte.selection()}</a>`);
}
}
});
The function allows you to unset a link, if the cursor/selection is anywhere inside the hyperlink text.
I tested this by selecting some text that was part of a paragraph and converting it into a hyperlink as follows (the hyperlink button is the rightmost button in the RTE toolbar):

[Working Case] As you can see from the layer manager on the left, even though the selection ("GrapesJS") has been converted into a link, it will not be recognized as a new component unless I click outside of the current text block.
At this point, I am able to select the text again and press the button associated with my hyperlink command to successfully unlink the text.

[Failure Case] If, however, after link creation I click outside the block, the link is recognized as a component, and it appears as a child of the text node in the layer manager.
Now, if I try to click inside the link and press the button, it does not work, but instead throws an error "NS_ERROR_FAILURE" at exec http://unpkg.com/grapesjs:43426

The steps followed are exactly the same for both, the working and the failure cases. The only thing that changes is that in the working case, I create the link and also unlink it without clicking outside the text block (i.e., so grapesjs does not treat my link as a "new" component), while in the failure case, I create the link, click outside, and then attempt to unlink the text by clicking inside the newly recognized component.
Is this an issue with how components are handled by grapesjs? Could you help me understand why this might be happening and what I can do to address this?
Info: GrapesJS Version Used: Latest from unpkg Browser: Mozilla Firefox 64.0.4
Answers (2)
Is this an issue with how components are handled by grapesjs? Could you help me understand why this might be happening and what I can do to address this?
Yeah, it's how the built-in text component and RTE work, so I'd just update your result() logic by adding a check if the selected component is a link, and in that case replacing it with something else
const comp = editor.getSelected();
comp.is('link') && comp.replaceWith(`${comp.get('content')}`);
This worked perfectly! Thank you!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2337
[BUG / QUESTION] Deleting default styles does not work
Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to upd...
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #2920
Question: Replace Rich Text Editor with summernote does not seem to work
I am trying to replace the default RTE in grapesjs with summernote. I got some help from the author of summernote and got this codepen to w...
Issue #1567
rte toolbar bug
Hello all, I am using the latest grapesjs stable version (40) and I noticed the following bug in the rich text editor: If the user drags an...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.