Merge pull request #22 from mintbridge/image-button

adding an image button to generate image markdown

Author: koddsson

README.md

@@ -22,6 +22,7 @@ import '@github/markdown-toolbar-element'
   <md-quote>quote</md-quote>
   <md-code>code</md-code>
   <md-link>link</md-link>
+  <md-image>image</md-image>
   <md-unordered-list>unordered-list</md-unordered-list>
   <md-ordered-list>ordered-list</md-ordered-list>
   <md-task-list>task-list</md-task-list>

examples/index.html

@@ -13,6 +13,7 @@
         <md-quote class="btn btn-sm">quote</md-quote>
         <md-code class="btn btn-sm">code</md-code>
         <md-link class="btn btn-sm">link</md-link>
+        <md-image class="btn btn-sm">image</md-link>
         <md-unordered-list class="btn btn-sm">unordered-list</md-unordered-list>
         <md-ordered-list class="btn btn-sm">ordered-list</md-ordered-list>
         <md-task-list class="btn btn-sm">task-list</md-task-list>

index.js

@@ -136,6 +136,18 @@ if (!window.customElements.get('md-link')) {
   window.customElements.define('md-link', MarkdownLinkButtonElement)
 }
 
+class MarkdownImageButtonElement extends MarkdownButtonElement {
+  constructor() {
+    super()
+    styles.set(this, {prefix: '![', suffix: '](url)', replaceNext: 'url', scanFor: 'https?://'})
+  }
+}
+
+if (!window.customElements.get('md-image')) {
+  window.MarkdownImageButtonElement = MarkdownImageButtonElement
+  window.customElements.define('md-image', MarkdownImageButtonElement)
+}
+
 class MarkdownUnorderedListButtonElement extends MarkdownButtonElement {
   constructor() {
     super()

test/test.js

@@ -76,6 +76,7 @@ describe('markdown-toolbar-element', function() {
           <md-quote>quote</md-quote>
           <md-code>code</md-code>
           <md-link>link</md-link>
+          <md-image>image</md-image>
           <md-unordered-list>unordered-list</md-unordered-list>
           <md-ordered-list>ordered-list</md-ordered-list>
           <md-task-list>task-list</md-task-list>
@@ -492,6 +493,32 @@ describe('markdown-toolbar-element', function() {
       })
     })
 
+    describe('images', function() {
+      it('inserts image syntax with cursor in description', function() {
+        setVisualValue('|')
+        clickToolbar('md-image')
+        assert.equal('![|](url)', visualValue())
+      })
+
+      it('selected url is wrapped in image syntax with cursor in description', function() {
+        setVisualValue('Octocat is |https://octodex.github.com/images/original.png|')
+        clickToolbar('md-image')
+        assert.equal('Octocat is ![|](https://octodex.github.com/images/original.png)', visualValue())
+      })
+
+      it('cursor on url is wrapped in image syntax with cursor in description', function() {
+        setVisualValue('Octocat is https://octodex.git|hub.com/images/original.png')
+        clickToolbar('md-image')
+        assert.equal('Octocat is ![|](https://octodex.github.com/images/original.png)', visualValue())
+      })
+
+      it('selected plan text is wrapped in image syntax with cursor in url', function() {
+        setVisualValue("GitHub's |logo|")
+        clickToolbar('md-image')
+        assert.equal("GitHub's ![logo](|url|)", visualValue())
+      })
+    })
+
     describe('header', function() {
       it('inserts header syntax with cursor in description', function() {
         setVisualValue('|title|')