Implement strikethrough

Author: mattmikolay

examples/index.html

@@ -20,6 +20,7 @@
         <md-task-list class="btn btn-sm">task-list</md-task-list>
         <md-mention class="btn btn-sm">mention</md-mention>
         <md-ref class="btn btn-sm">ref</md-ref>
+        <md-strikethrough class="btn btn-sm">strikethrough</md-strikethrough>
       </markdown-toolbar>
       <textarea rows="6" class="mt-3 d-block width-full" id="textarea"></textarea>
     </div>
@@ -41,6 +42,7 @@
           <md-task-list class="btn btn-sm">task-list</md-task-list>
           <md-mention class="btn btn-sm">mention</md-mention>
           <md-ref class="btn btn-sm">ref</md-ref>
+          <md-strikethrough class="btn btn-sm">strikethrough</md-strikethrough>
         </markdown-toolbar>
         <textarea rows="6" class="mt-3 d-block width-full" id="textarea2"></textarea>
       </div>

src/index.ts

@@ -13,6 +13,7 @@ declare global {
     MarkdownTaskListButtonElement: typeof MarkdownTaskListButtonElement
     MarkdownMentionButtonElement: typeof MarkdownMentionButtonElement
     MarkdownRefButtonElement: typeof MarkdownRefButtonElement
+    MarkdownStrikethroughButtonElement: typeof MarkdownStrikethroughButtonElement
   }
   interface HTMLElementTagNameMap {
     'markdown-toolbar': MarkdownToolbarElement
@@ -28,6 +29,7 @@ declare global {
     'md-task-list': MarkdownTaskListButtonElement
     'md-mention': MarkdownMentionButtonElement
     'md-ref': MarkdownRefButtonElement
+    'md-strikethrough': MarkdownStrikethroughButtonElement
   }
 }
 
@@ -44,7 +46,8 @@ const buttonSelectors = [
   'md-ordered-list',
   'md-task-list',
   'md-mention',
-  'md-ref'
+  'md-ref',
+  'md-strikethrough'
 ]
 function getButtons(toolbar: Element): HTMLElement[] {
   const els = []
@@ -279,6 +282,18 @@ if (!window.customElements.get('md-ref')) {
   window.customElements.define('md-ref', MarkdownRefButtonElement)
 }
 
+class MarkdownStrikethroughButtonElement extends MarkdownButtonElement {
+  constructor() {
+    super()
+    styles.set(this, {prefix: '~~', suffix: '~~', trimFirst: true})
+  }
+}
+
+if (!window.customElements.get('md-strikethrough')) {
+  window.MarkdownStrikethroughButtonElement = MarkdownStrikethroughButtonElement
+  window.customElements.define('md-strikethrough', MarkdownStrikethroughButtonElement)
+}
+
 const modifierKey = navigator.userAgent.match(/Macintosh/) ? 'Meta' : 'Control'
 
 class MarkdownToolbarElement extends HTMLElement {