BUG: editing/replacing the text inside of a link

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v122

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

Open demo
Create a text, with a link in it
edit text with the default RTE
select the whole link
type anything, to replace the text of the link

What is the expected behavior? When you type something, it should continue to write inside the link. You can edit the text of links that contain only one character.

What is the current behavior? Currently only the first character gets written inside the link. From the 2nd character onwards, the cursor isn't in the link anymore, so the text gets inserted right after the link. There is also no way to edit links, with only one character in it, so you have to delete the whole link after this behavior occures.

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (3)

bernesto• March 14, 20241 reactions

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

bernesto• March 8, 20240 reactions

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

Sphenox• March 10, 20240 reactions

Yeah, excactly as shown in the video you provided.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

BUG: editing/replacing the text inside of a link

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

BUG: Text disappears if pasted for a second time in text block

BUG: The link titles are not editable

BUG: It's possible to drag and drop literally anything inside grapesjs canvas

BUG: ColorPicker Offset incorrect when Panels are outside of Editor Container

Paid Plugins That Match This Issue

Browse Plugin Categories