TextNodes interfere when changing content on element

Hi Juan, thanks for the report, are you able to show me how your text trait works? I'd expect it to work correctly if you update your component in this way component.components(e.target.value)

This was my trait

tm.addType('content', {
   events: {
     'change': 'onValueChange'
   },
   getInputEl: function() {
     this.inputEl = document.createElement('input');
     this.inputEl.value = this.getModelValue();
     return this.inputEl;
   },
   getModelValue: function() {
     const { model, target } = this;
     var value = target.get('content') || target.getEl().textContent;
     return value;
   },
   onValueChange: function() {
     const { model, target } = this;
     var value = this.inputEl.value;
     target.set('content', value);
     target.getEl().textContent = value;
   },
   onUpdate: function() {
     var value = this.getModelValue();
     this.target.getEl().textContent = value;
   }
 });

I have changed it to

tm.addType('content', {
   events: {
     'change': 'onValueChange'
   },
   getInputEl: function() {
     this.inputEl = document.createElement('input');
     this.inputEl.value = this.getModelValue();
     return this.inputEl;
   },
   getModelValue: function() {
     const { model, target } = this;
     var value = target.get('content') || target.getEl().textContent;
     return value;
   },
   onValueChange: function() {
     const { model, target } = this;
     var value = this.inputEl.value;
     target.set('content', value);
     target.components(value);
   },
   onUpdate: function() {
     var value = this.getModelValue();
     this.target.getEl().textContent = value;
   }
 });

And now it works without overriding update content or render children, thanks! I would have never arrived to the conclusion of using the components method. Now i don't like text nodes 😅

I think we can close this issue unless there's some other point you want to add to improve.

Thanks!

I don't think you need this one target.set('content', value);. For the rest all good 👍

Thanks for reporting this, @jcamejo.

Thanks for sharing your report about TextNodes interfere when changing content on element. To help the team investigate and prioritize this:

Please provide:

1. A minimal reproducible example (CodeSandbox/JSFiddle)
2. Your GrapesJS version number
3. Browser and OS information
4. Any error messages from the browser console
5. 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.