Move RTE rendering from canvas to its module

src/canvas/index.js

@@ -106,7 +106,7 @@ module.exports = () => {
     },
 
     /**
-     * Returns element containing canvas tools
+     * Returns element containing all canvas tools
      * @return {HTMLElement}
      */
     getToolsEl() {

src/canvas/view/CanvasView.js

@@ -362,7 +362,6 @@ module.exports = Backbone.View.extend({
       </div>
     `);
     const el = this.el;
-    const rte = this.em.get('rte');
     const toolsEl = el.querySelector(`#${ppfx}tools`);
     this.hlEl = el.querySelector(`.${ppfx}highlighter`);
     this.badgeEl = el.querySelector(`.${ppfx}badge`);
@@ -372,13 +371,6 @@ module.exports = Backbone.View.extend({
     this.resizerEl = el.querySelector(`.${ppfx}resizer`);
     this.offsetEl = el.querySelector(`.${ppfx}offset-v`);
     this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`);
-
-    if (rte) {
-      const rteEl = rte.render();
-      rteEl.style.pointerEvents = 'all';
-      toolsEl.appendChild(rteEl);
-    }
-
     this.toolsEl = toolsEl;
     this.el.className = this.className;
     return this;

src/dom_components/view/ComponentTextView.js

@@ -12,9 +12,10 @@ module.exports = ComponentView.extend({
     ComponentView.prototype.initialize.apply(this, arguments);
     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.rte = this.config.rte || '';
+    this.rte = em && em.get('rte');
     this.activeRte = null;
   },
 

src/rich_text_editor/config/config.js

@@ -1,40 +1,11 @@
 module.exports = {
+
   stylePrefix  : 'rte-',
-  toolbarId  : 'toolbar',
 
   // If true, moves the toolbar below the element when the top canvas
   // edge is reached
   adjustToolbar: 1,
 
-  // Default toolbar commands
+  // Default RTE actions
-  commands  : [{
+  actions: ['bold', 'italic', 'underline', 'strikethrough', 'link'],
-    command: 'bold',
-    title: 'Bold',
-    class: 'fa fa-bold',
-  },{
-    command: 'italic',
-    title: 'Italic',
-    class: 'fa fa-italic',
-  },{
-    command: 'underline',
-    title: 'Underline',
-    class: 'fa fa-underline',
-   },{
-    command: 'strikethrough',
-    title: 'Strikethrough',
-    class: 'fa fa-strikethrough',
-    group: 'format'
-   },{
-    command: 'insertHTML',
-    title: 'Link',
-    class: 'fa fa-link',
-    args: '<a class="link" href="">${content}</a>',
-   }/*,{
-     command: 'fontSize',
-     options: [
-       {name: 'Huge', value: '7'},
-       {name: 'Normal', value: '5'},
-       {value: '1'}
-     ]
-   }*/],
 };

src/rich_text_editor/index.js

@@ -30,8 +30,7 @@ module.exports = () => {
   CommandButtons = require('./model/CommandButtons'),
   CommandButtonsView = require('./view/CommandButtonsView');
   const $ = require('backbone').$;
-  var tlbPfx, toolbar, commands;
+  let toolbar, commands;
-  var mainSelf;
 
   return {
 
@@ -50,26 +49,39 @@ module.exports = () => {
      * @private
      */
     init(config) {
-      mainSelf = this;
       c = config || {};
-      for (var name in defaults) {
+
-        if (!(name in c))
+      for (let name in defaults) {
+        if (!(name in c)) {
           c[name] = defaults[name];
+        }
       }
 
-      var ppfx = c.pStylePrefix;
+      const ppfx = c.pStylePrefix;
-      if(ppfx)
+
+      if (ppfx) {
         c.stylePrefix = ppfx + c.stylePrefix;
+      }
 
-      tlbPfx = c.stylePrefix;
+      toolbar = document.createElement('div');
+      toolbar.className = `${ppfx}rte-toolbar`;
+
+      /*
       commands = new CommandButtons(c.commands);
       toolbar = new CommandButtonsView({
         collection: commands,
         config: c,
       });
+      */
       return this;
     },
 
+    postRender(ev) {
+      const canvas = ev.model.get('Canvas');
+      toolbar.style.pointerEvents = 'all';
+      canvas.getToolsEl().appendChild(toolbar);
+    },
+
     /**
      * Add a new command to the toolbar
      * @param {string} command Command name
@@ -145,6 +157,7 @@ module.exports = () => {
      * @private
      * */
     attach(view, rte) {
+      const em = c.em;
       // lastEl will be used to place the RTE toolbar
       this.lastEl = view.el;
       var el = view.getChildrenContainer();
@@ -159,13 +172,13 @@ module.exports = () => {
 
       this.show();
 
-      if(c.em) {
+      if (em) {
         setTimeout(this.udpatePosition.bind(this), 0);
-        c.em.off('change:canvasOffset', this.udpatePosition, this);
+        em.off('change:canvasOffset', this.udpatePosition, this);
-        c.em.on('change:canvasOffset', this.udpatePosition, this);
+        em.on('change:canvasOffset', this.udpatePosition, this);
         // Update position on scrolling
-        c.em.off('canvasScroll', this.udpatePosition, this);
+        em.off('canvasScroll', this.udpatePosition, this);
-        c.em.on('canvasScroll', this.udpatePosition, this);
+        em.on('canvasScroll', this.udpatePosition, this);
       }
 
       //Avoid closing edit mode clicking on toolbar
@@ -214,8 +227,7 @@ module.exports = () => {
      * @private
      * */
     show() {
-      var toolbarStyle = toolbar.el.style;
+      toolbar.style.display = '';
-      toolbarStyle.display = "block";
     },
 
     /**
@@ -223,7 +235,7 @@ module.exports = () => {
      * @private
      * */
     hide() {
-      toolbar.el.style.display = "none";
+      toolbar.style.display = 'none';
     },
 
     /**
@@ -240,17 +252,7 @@ module.exports = () => {
      * @private
      */
     getToolbarEl() {
-      return toolbar.el;
+      return toolbar;
     },
-
-    /**
-     * Render toolbar
-     * @return {HTMLElement}
-     * @private
-     */
-    render() {
-      return toolbar.render().el;
-    }
-
   };
 };

src/rich_text_editor/view/RichTextEditor.js

@@ -29,7 +29,7 @@ const actions = {
     title: 'Link',
     result: (rte) => {
       const url = window.prompt('Enter the link URL')
-      if (url) rte.exec('createLink', url)
+      if (url) rte.exec('createLink', url)//class="link"
     }
   },
 }
@@ -43,14 +43,20 @@ export default class RichTextEditor {
       return el[RTE_KEY];
     }
 
+    el.oninput = e => settings.onChange && settings.onChange(e.target.innerHTML);
+    el.onkeydown = e => (e.which === 9 && e.preventDefault());
+    el[RTE_KEY] = this;
+    this.el = el;
+    this.doc = el.ownerDocument;
+
     settings.actions = settings.actions
       ? settings.actions.map(action => {
         if (typeof action === 'string') {
-          return actions[action]
+          return actions[action];
         } else if (actions[action.name]) {
-          return { ...actions[action.name], ...action }
+          return {...actions[action.name], ...action};
         }
-        return action
+        return action;
       }) : Object.keys(actions).map(action => actions[action])
 
     settings.classes = { ...{
@@ -71,12 +77,6 @@ export default class RichTextEditor {
       settings.actions.forEach(action => this.addAction(action))
     }
 
-    el.oninput = e => settings.onChange(e.target.innerHTML)
-    el.onkeydown = e => (e.which === 9 && e.preventDefault());
-    el[RTE_KEY] = this;
-
-    this.el = el;
-    this.doc = el.ownerDocument;
     this.settings = settings;
     this.classes = classes;
     settings.styleWithCSS && this.exec('styleWithCSS');