feature-strikethrough: Add strikethrough menu button.

DreamworldSolutions · Nov 13, 2019 · bebaca1 · bebaca1
1 parent 39265de
commit bebaca1
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/dw-text-editor.js b/dw-text-editor.js
@@ -178,6 +178,13 @@ class DwTextEditor extends LitElement {
         type: Boolean
       },
 
+      /**
+       * Current state of Strikethrough menu in toolbar.
+       */
+      _isStrikeThrough: {
+        type: Boolean
+      },
+
       /**
        * Current state of Number menu in toolbar.
        */
@@ -221,6 +228,14 @@ class DwTextEditor extends LitElement {
           <dw-icon name="format_underlined"></dw-icon>
         </button>
 
+        <button 
+          class="menu-btn" 
+          title="Strikethrough" 
+          ?active="${this._isStrikeThrough}"
+          @click="${this._updateStrikeThrough}">
+          <dw-icon name="format_strikethrough"></dw-icon>
+        </button>
+
         <button 
           class="menu-btn" 
           title="Ordered List" 
@@ -401,6 +416,22 @@ class DwTextEditor extends LitElement {
     }
   }
 
+  /**
+   * Updates `strikethrough` status of selected text.
+   */
+  _updateStrikeThrough() {
+    if(!this._editor) {
+      console.warn('Editor is not ready.');
+      return;
+    }
+
+    if (this._isStrikeThrough) {
+      this._editor.removeStrikethrough();
+    } else {
+      this._editor.strikethrough();
+    }
+  }
+
   /**
    * Sets or removes numbered list.
    */
@@ -461,6 +492,12 @@ class DwTextEditor extends LitElement {
       this._isUnderlined = false;
     }
 
+    if (this._editor.hasFormat('S')) {
+      this._isStrikeThrough = true;
+    } else {
+      this._isStrikeThrough = false;
+    }
+
     if (this._editor.hasFormat('OL')) {
       this._isOrderedList = true;
     } else {