Avoid double content by removing its children in Text Component

index.html

@@ -6,6 +6,8 @@
     <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>
@@ -24,7 +26,7 @@
             <div class="menu-item">WEB</div>
           </nav>
           <div class="clearfix"></div>
-          <div class="lead-title">Build your templates without coding</div>
+          <div class="lead-title">Build your templates without coding <br/></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>
@@ -822,6 +824,17 @@
 
 
     {
+      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,

src/asset_manager/view/FileUploader.js

@@ -128,7 +128,13 @@ module.exports = Backbone.View.extend({
 
       if (c.openAssetsOnDrop && editor) {
         const target = editor.getSelected();
-        editor.runCommand('open-assets', {target});
+        editor.runCommand('open-assets', {
+          target,
+          onSelect() {
+            editor.Modal.close();
+            editor.AssetManager.setTarget(null);
+          }
+        });
       }
 
       return false;

src/canvas/view/CanvasView.js

@@ -75,7 +75,6 @@ module.exports = Backbone.View.extend({
         externalStyles += `<link rel="stylesheet" href="${style}"/>`;
       });
 
-      // rgb(255, 202, 111)
       const colorWarn = '#ffca6f';
 
       let baseCss = `
@@ -85,18 +84,23 @@ module.exports = Backbone.View.extend({
         html, body, #wrapper {
           min-height: 100%;
         }
-        html {
-          height: 100%;
-        }
         body {
           margin: 0;
-          height: auto;
+          height: 100%;
           background-color: #fff
         }
         #wrapper {
           overflow: auto
         }
       `;
+      // Remove `html { height: 100%;}` from the baseCss as it gives jumpings
+      // effects (on ENTER) with RTE like CKEditor (maybe some bug there?!?)
+      // With `body {height: auto;}` jumps in CKEditor are removed but in
+      // Firefox is impossible to drag stuff in empty canvas, so bring back
+      // `body {height: 100%;}`.
+      // For the moment I give the priority to Firefox as it might be
+      // CKEditor's issue
+
 
       let layoutCss = `
         .${ppfx}comp-selected{

src/dom_components/view/ComponentTextView.js

@@ -29,7 +29,7 @@ module.exports = ComponentView.extend({
         this.activeRte = this.rte.attach(this, this.activeRte);
         this.rte.focus(this, this.activeRte);
       } catch (err) {
-          console.error(err);
+        console.error(err);
       }
     }
     this.toggleEvents(1);
@@ -51,6 +51,8 @@ module.exports = ComponentView.extend({
         console.error(err);
       }
       var el = this.getChildrenContainer();
+      // Avoid double content by removing its children components
+      model.get('components').reset();
       model.set('content', el.innerHTML);
     }