editor.on('component:update:content', model = { }}) not work in some cause

Question

if the user remove all text from a element and click some where else . then again try to select empty element he is not able to select it again because it is hide and i dont know where it goes. So for this issue I am using this code

editor.on('component:update:content', model => {
const val = model.get('content');
if(val && val.length < 1){
model.set('content', '&nbsp');
}
})

this code set a space in text if user remove all text from a element . By doing this these is no empty element so i does not hide . and again we can select it . if the user remove text character one by one it works fine . But now issue is that if a user select a text by CTRL + A and remove by BACKSPACE . At this time this above code not work . Can anyone help me .

artf · Accepted Answer

As already suggested here https://github.com/artf/grapesjs/issues/3603#issuecomment-885305546 avoid doing what you're doing now and add a simple default CSS in case the element is empty

NoumanAhmad-Braqsol · Answer

Thank you i got it !

ClaudeCode · Answer

Thanks for reporting this, @NoumanAhmad-Braqsol.

Thanks for sharing your report about editor.on('component:update:content', model => { }}) not work in some cause. To help the team investigate and prioritize this:

Please provide:

A minimal reproducible example (CodeSandbox/JSFiddle)
Your GrapesJS version number
Browser and OS information
Any error messages from the browser console
Steps to reproduce the issue

What helps most:

Minimal code example (not your full project)
Screen recording or screenshot showing the issue
Expected vs actual behavior clearly stated
GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

Editor.on('component:update:content', model => { }}) not work in some cause

Question

Answers (3)

Related Questions and Answers

text in text component cannot update , cannot get final result from toHTML

TextNodes interfere when changing content on element

comment component type do not support adding traits

How we can remove default text content from text component 'Insert your text here' ?

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

Embed GrapesJS in Your SaaS: A Weekend Guide

Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS

Browse Plugin Categories