Merge pull request #36 from mattmikolay/strikethrough

Add support for strikethrough

Author: keithamus

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 {

test/test.js

@@ -92,6 +92,7 @@ describe('markdown-toolbar-element', function () {
           <md-header level="10">h1</md-header>
           <div data-md-button>Other button</div>
           <md-italic>italic</md-italic>
+          <md-strikethrough>strikethrough</md-strikethrough>
           <md-quote>quote</md-quote>
           <md-code>code</md-code>
           <md-link>link</md-link>
@@ -135,47 +136,47 @@ describe('markdown-toolbar-element', function () {
       it('moves focus to next button when ArrowRight is pressed', function () {
         focusFirstButton()
         pushKeyOnFocussedButton('ArrowRight')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
         pushKeyOnFocussedButton('ArrowRight')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header[level="1"]')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
         pushKeyOnFocussedButton('ArrowRight')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header[level="10"]')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
       })
 
       it('cycles focus round to last element from first when ArrowLeft is pressed', function () {
         focusFirstButton()
         pushKeyOnFocussedButton('ArrowLeft')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
         pushKeyOnFocussedButton('ArrowLeft')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-mention')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
       })
 
       it('focussed first/last button when Home/End key is pressed', function () {
         focusFirstButton()
         pushKeyOnFocussedButton('End')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
         pushKeyOnFocussedButton('End')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
         pushKeyOnFocussedButton('Home')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
         pushKeyOnFocussedButton('Home')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
       })
@@ -186,7 +187,7 @@ describe('markdown-toolbar-element', function () {
         pushKeyOnFocussedButton('ArrowRight')
         pushKeyOnFocussedButton('ArrowRight')
         pushKeyOnFocussedButton('ArrowRight')
-        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.equal(getElementsWithTabindex(-1).length, 15)
         assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('div[data-md-button]')])
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
       })
@@ -390,6 +391,62 @@ describe('markdown-toolbar-element', function () {
       })
     })
 
+    describe('strikethrough', function () {
+      it('strikes through selected text when you click the strikethrough icon', function () {
+        setVisualValue('The |quick| brown fox jumps over the lazy dog')
+        clickToolbar('md-strikethrough')
+        assert.equal('The ~~|quick|~~ brown fox jumps over the lazy dog', visualValue())
+      })
+
+      it('strikes through when there is leading whitespace in selection', function () {
+        setVisualValue('|  \nHello world|')
+        clickToolbar('md-strikethrough')
+        assert.equal('  \n~~|Hello world|~~', visualValue())
+      })
+
+      it('strikes through when there is trailing whitespace in selection', function () {
+        setVisualValue('|Hello world\n \t|')
+        clickToolbar('md-strikethrough')
+        assert.equal('~~|Hello world|~~\n \t', visualValue())
+      })
+
+      it('strikes through empty selection and textarea inserts ~~ with cursor ready to type inside', function () {
+        setVisualValue('|')
+        clickToolbar('md-strikethrough')
+        assert.equal('~~|~~', visualValue())
+      })
+
+      it('strikes through empty selection with previous text inserts ~~ with cursor ready to type inside', function () {
+        setVisualValue('The |')
+        clickToolbar('md-strikethrough')
+        assert.equal('The ~~|~~', visualValue())
+      })
+
+      it('strikes through selected word when cursor is at the start of the word', function () {
+        setVisualValue('The |quick brown fox jumps over the lazy dog')
+        clickToolbar('md-strikethrough')
+        assert.equal('The ~~|quick~~ brown fox jumps over the lazy dog', visualValue())
+      })
+
+      it('strikes through selected word when cursor is in the middle of the word', function () {
+        setVisualValue('The qui|ck brown fox jumps over the lazy dog')
+        clickToolbar('md-strikethrough')
+        assert.equal('The ~~qui|ck~~ brown fox jumps over the lazy dog', visualValue())
+      })
+
+      it('strikes through selected word when cursor is at the end of the word', function () {
+        setVisualValue('The quick| brown fox jumps over the lazy dog')
+        clickToolbar('md-strikethrough')
+        assert.equal('The ~~quick|~~ brown fox jumps over the lazy dog', visualValue())
+      })
+
+      it('un-strikes through selected struck-through text when you click the strikethrough icon', function () {
+        setVisualValue('The ~~|quick|~~ brown fox jumps over the lazy dog')
+        clickToolbar('md-strikethrough')
+        assert.equal('The |quick| brown fox jumps over the lazy dog', visualValue())
+      })
+    })
+
     describe('quote level', function () {
       it('inserts selected quoted sample if you click the quote icon', function () {
         setVisualValue('')