From 7756992ab0773a92cd018688dc9d10c4678e0d5e Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 15 Aug 2017 02:23:39 +0200
Subject: [PATCH] Add content listener in text view component

---
 index.html                                   | 15 +--------------
 src/dom_components/view/ComponentTextView.js |  4 +++-
 src/dom_components/view/ComponentView.js     | 11 +++++++++--
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index c491b8636..7f48850a3 100755
--- a/index.html
+++ b/index.html
@@ -6,8 +6,6 @@
     <link rel="stylesheet" href="dist/css/grapes.min.css">
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="dist/grapes.min.js"></script>
-    <script src="private/ckeditor/ckeditor.js"></script>
-    <script src="private/grapesjs-plugin-ckeditor.min.js"></script>
 
   </head>
   <style>
@@ -26,7 +24,7 @@
             <div class="menu-item">WEB</div>
           </nav>
           <div class="clearfix"></div>
-          <div class="lead-title">Build your templates without coding <br/></div>
+          <div class="lead-title">Build your templates without coding</div>
           <div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
           <div class="lead-btn">Hover me</div>
         </div>
@@ -824,17 +822,6 @@
 
 
     {
-      plugins: ['gjs-plugin-ckeditor'],
-        pluginsOpts: {
-          'gjs-plugin-ckeditor': {
-            position: 'center',
-            options: {
-              enterMode: CKEDITOR.ENTER_BR,
-              language: 'en',
-              //skin: 'moono-dark',
-            }
-          }
-        },
       allowScripts: 1,
       showOffsets: 1,
       autorender: 0,
diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js
index 1ad504e8d..593a4c431 100644
--- a/src/dom_components/view/ComponentTextView.js
+++ b/src/dom_components/view/ComponentTextView.js
@@ -11,7 +11,9 @@ module.exports = ComponentView.extend({
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     _.bindAll(this,'disableEditing');
-    this.listenTo(this.model, 'focus active', this.enableEditing);
+    const model = this.model;
+    this.listenTo(model, 'focus active', this.enableEditing);
+    this.listenTo(model, 'change:content', this.updateContent);
     this.rte = this.config.rte || '';
     this.activeRte = null;
     this.em = this.config.em;
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index 3ff711957..9c4b38e3f 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@@ -183,6 +183,14 @@ module.exports = Backbone.View.extend({
     this.$el.attr('style', this.getStyleString());
   },
 
+  /**
+   * Update component content
+   * @private
+   * */
+  updateContent() {
+    this.getChildrenContainer().innerHTML = this.model.get('content');
+  },
+
   /**
    * Return style string
    * @return  {string}
@@ -401,8 +409,7 @@ module.exports = Backbone.View.extend({
   render() {
     this.renderAttributes();
     var model = this.model;
-    var container = this.getChildrenContainer();
-    container.innerHTML = model.get('content');
+    this.updateContent();
     this.renderChildren();
     this.updateScript();
     return this;