Make the RTE understand active commands

src/rich_text_editor/index.js

@@ -161,6 +161,7 @@ module.exports = () => {
       const classes = {
         actionbar: `${pfx}actionbar`,
         button: `${pfx}action`,
+        active: `${pfx}active`,
       };
 
       toolbar.style.display = '';

src/rich_text_editor/model/RichTextEditor.js

@@ -1,25 +1,31 @@
 // The initial version of this RTE was borrowed from https://github.com/jaredreich/pell
 // and adapted to the GrapesJS's need
 
+import {on, off} from 'utils/mixins'
+
 const RTE_KEY = '_rte';
 
 const actions = {
   bold: {
+    name: 'bold',
     icon: '<b>B</b>',
     attributes: {title: 'Bold'},
     result: (rte) => rte.exec('bold')
   },
   italic: {
+    name: 'italic',
     icon: '<i>I</i>',
     attributes: {title: 'Italic'},
     result: (rte) => rte.exec('italic')
   },
   underline: {
+    name: 'underline',
     icon: '<u>U</u>',
     attributes: {title: 'Underline'},
     result: (rte) => rte.exec('underline')
   },
   strikethrough: {
+    name: 'strikethrough',
     icon: '<strike>S</strike>',
     attributes: {title: 'Strike-through'},
     result: (rte) => rte.exec('strikeThrough')
@@ -48,6 +54,7 @@ export default class RichTextEditor {
     el[RTE_KEY] = this;
     this.el = el;
     this.doc = el.ownerDocument;
+    this.updateActiveActions = this.updateActiveActions.bind(this);
 
     settings.actions = settings.actions
       ? settings.actions.map(action => {
@@ -62,6 +69,7 @@ export default class RichTextEditor {
     settings.classes = { ...{
       actionbar: 'actionbar',
       button: 'action',
+      active: 'active',
     }, ...settings.classes};
 
     const classes = settings.classes;
@@ -85,16 +93,31 @@ export default class RichTextEditor {
     return this;
   }
 
+  updateActiveActions() {
+    this.actions().forEach(action => {
+      const btn = action.btn;
+      const active = this.classes.active;
+      btn.className = btn.className.replace(active, '').trim();
+
+      if (this.doc.queryCommandState(action.name)) {
+        btn.className += ` ${active}`;
+      }
+    })
+  }
+
   enable() {
     this.actionbarEl().style.display = '';
     this.el.contentEditable = true;
+    on(this.el, 'mouseup keyup', this.updateActiveActions)
     this.syncActions();
+    this.el.focus();
     return this;
   }
 
   disable() {
     this.actionbarEl().style.display = 'none';
     this.el.contentEditable = false;
+    off(this.el, 'mouseup keyup', this.updateActiveActions)
     return this;
   }
 
@@ -104,7 +127,10 @@ export default class RichTextEditor {
   syncActions() {
     this.actions().forEach(action => {
       const event = action.event || 'click';
-      action.btn[`on${event}`] = e => action.result(this);
+      action.btn[`on${event}`] = e => {
+        action.result(this);
+        this.updateActiveActions();
+      };
     })
   }
 

src/styles/scss/_gjs_rte.scss

@@ -30,12 +30,12 @@
       border-right: none;
     }
 
-    &.btn-info {
-      background-color: $mainDkColor;
-    }
-
     &:hover {
       background-color: $mainLhColor;
     }
   }
+
+  &active {
+    background-color: $mainDkColor;
+  }
 }

src/styles/scss/main.scss

@@ -236,41 +236,10 @@
 
 @import "gjs_canvas";
 
-/*************  RTE  ****************/
+/********* COMMANDS **********/
-#commands.panel {
-    min-width: 35px;
-    height: 100%;
-    z-index:3;
-}
-#options.panel{ z-index:4; bottom: 0;}
-#views.panel {
-	width: 16.5%;
-	font-weight: lighter;
-	color:  $fontColor;
-	right:0; top:0;
-  	z-index: 3;
-  	height: 100%;
-  	padding:0;
-}
-#views.panel .c{height:100%}
-#commands.panel, #options.panel {width: 3.5%; left:0;}
-#options .c { display: table;  margin: 0 auto; }
-
-/*********TEST**********/
-body.dragging, body.dragging * { cursor: move !important;}
-.dragged {
-	position: absolute;
-	@include opacity(0.50);
-	z-index: 2000;}
-ol.example li.placeholder {position: relative;}
-ol.example li.placeholder:before {position: absolute;}
-/*********END-TEST**********/
 
 .no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; }
 
-
-/********* COMMANDS **********/
-
 .#{$com-prefix}dashed *{
 	outline: 1px dashed #888;
 	outline-offset: -2px;