Editing/replacing the text inside of a link

@artf, you're right again. Whitespace in the node matters. If the text butts right up to the closing node, the first keystroke replaces the text, the next keystroke exits the node, if not, it works as one would expect.

There is an old thread about this (https://github.com/w3c/editing/issues/1560), specifically in webkit and blink, and how they work this way. One of the authors of CKEditor 5 was there, and basically said you have to build an abstraction layer to fix this behavior which is a total PITA in our case.

@Sphenox I'd say that this issue probably existed in the prior release as well from what I read. And, I's also say is likely be too much of a project to build that level of abstraction vs. just using an RTE that already has it built in.

Just to clarify, you are referring to the selection of and editing of the text within the link behaving abnormally like this?

Yeah, excactly as shown in the video you provided.

Thanks for reporting this, @Sphenox.

Great question about editing/replacing the text inside of a link. The recommended approach with ProseMirror is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!