Comments (8)
@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.
from grapesjs.
Just to clarify, you are referring to the selection of and editing of the text within the link behaving abnormally like this?
from grapesjs.
Yeah, excactly as shown in the video you provided.
from grapesjs.
Okay, I can confirm I am having the same issue. Probably related to the text selection point in the RTE (a guess).
Let's route @artf in on this and see if he has any insights to add.
from grapesjs.
Unfortunately, this is how the default contenteditable works 🤷♂️ (you can reproduce the same behavior there).
The only alternative here is to avoid the built-in RTE (which will be always limited to the native behavior).
from grapesjs.
@artf Let's keep this one open. I can't reproduce with a standard contenteditable as mentioned, and I want to try correcting this behavior.
from grapesjs.
@bernesto I don't know if it helps, but I only noticed this behaviour because I updated the GrapesJS version I was using. Before, I used v0.17.XX, don't remember the excact release.
Before the update, the RTE didn't behave like this.
from grapesjs.
Before the update, the RTE didn't behave like this.
@Sphenox I see the same behavior here: https://jsfiddle.net/3wtjpcro/4/
@bernesto FYI
contenteditable.mp4
from grapesjs.
Related Issues (20)
- BUG: Unnecessary Canvas style HOT 3
- Interested in Collaboration?
- BUG: Double Entry in Layers if Component is moved directly after add HOT 1
- BUG:
- event works also on component mount HOT 1
- BUG: Uncaught TypeError: __webpack_require__.r is not a function at ./node_modules/grapesjs/dist/grapes.mjs (grapes.mjs:1:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/Demo/Templates/TextEditor.js (Templates.js:31:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/Demo/Templates/Templates.js (Templates.css:45:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) HOT 2
- When rendering <tr> tags inside <template> tags, tags are trimmed off and only string content is remained.
- Icons and Shapes options HOT 1
- BUG: ID isn't updating after change
- BUG: on fullscreen, color picker is hidden HOT 2
- BUG: Cannot edit component content even with editable property set to true HOT 1
- Installation of Grapesjs and yarn on Ubuntu 24.04 LTS HOT 1
- BUG: Broken link on Asset Manager
- BUG: Unable to open component settings again, after clicking component and then clicking Blocks HOT 1
- BUG: SVG containing mask and image doesn't render correctly HOT 1
- BUG: Unable to use UI controls for the video component when HOT 1
- BUG: GrapeJs not loading on browsers sometimes
- BUG: GrapesJS Fails to Apply Styles to Wrapper HOT 1
- image send to mail HOT 2
- BUG: GrapesJS CDN not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grapesjs.