Update correctly the text component on content change. Fixes #1511

GrapesJS · Nov 17, 2018 · 5819604 · 5819604
1 parent bc2fcf1
commit 5819604
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js
@@ -4,7 +4,7 @@ const ComponentView = require('./ComponentView');
 
 module.exports = ComponentView.extend({
   events: {
-    dblclick: 'enableEditing',
+    dblclick: 'onActive',
     input: 'onInput'
   },
 
@@ -13,16 +13,20 @@ module.exports = ComponentView.extend({
     this.disableEditing = this.disableEditing.bind(this);
     const model = this.model;
     const em = this.em;
-    this.listenTo(model, 'focus active', this.enableEditing);
-    this.listenTo(model, 'change:content', this.updateContent);
+    this.listenTo(model, 'focus', this.onActive);
+    this.listenTo(model, 'change:content', this.updateContentText);
     this.rte = em && em.get('RichTextEditor');
   },
 
+  updateContentText(m, v, opts = {}) {
+    !opts.fromDisable && this.disableEditing();
+  },
+
   /**
    * Enable element content editing
    * @private
    * */
-  enableEditing(e) {
+  onActive(e) {
     // We place this before stopPropagation in case of nested
     // text components will not block the editing (#1394)
     if (this.rteEnabled || !this.model.get('editable')) {
@@ -51,6 +55,7 @@ module.exports = ComponentView.extend({
     const model = this.model;
     const editable = model.get('editable');
     const rte = this.rte;
+    const contentOpt = { fromDisable: 1 };
 
     if (rte && editable) {
       try {
@@ -62,14 +67,14 @@ module.exports = ComponentView.extend({
       const content = this.getChildrenContainer().innerHTML;
       const comps = model.get('components');
       comps.length && comps.reset();
-      model.set('content', '');
+      model.set('content', '', contentOpt);
 
       // If there is a custom RTE the content is just baked staticly
       // inside 'content'
       if (rte.customRte) {
         // Avoid double content by removing its children components
         // and force to trigger change
-        model.set('content', content);
+        model.set('content', content, contentOpt);
       } else {
         const clean = model => {
           const selectable = !model.is('text');
@@ -87,7 +92,7 @@ module.exports = ComponentView.extend({
         };
 
         // Avoid re-render on reset with silent option
-        model.trigger('change:content', model);
+        model.trigger('change:content', model, '', contentOpt);
         comps.add(content);
         comps.each(model => clean(model));
         comps.trigger('resetNavigator');