Merge branch 'master' into victorenator-root-node

Author: victorenator

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-image>
         <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>
@@ -21,7 +22,14 @@
       </markdown-toolbar>
       <textarea rows="6" class="mt-3 d-block width-full" id="textarea"></textarea>
     </div>
-    <!-- script src="../dist/index.umd.js"></script -->
-    <script src="https://unpkg.com/@github/markdown-toolbar-element@latest/dist/index.umd.js"></script>
+    <script>
+      const script = document.createElement('script')
+      if (window.location.hostname.endsWith('github.io') || window.location.hostname.endsWith('github.com')) {
+        script.src = "https://unpkg.com/@github/markdown-toolbar-element@latest/dist/index.umd.js"
+      } else {
+        script.src = "../dist/index.umd.js"
+      }
+      document.body.appendChild(script)
+    </script>
   </body>
 </html>

index.js

@@ -43,7 +43,16 @@ class MarkdownButtonElement extends HTMLElement {
 class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   constructor() {
     super()
-    styles.set(this, {prefix: '### '})
+
+    const level = parseInt(this.getAttribute('level') || 3, 10)
+    if (level < 1 || level > 6) {
+      return
+    }
+
+    const prefix = `${'#'.repeat(level)} `
+    styles.set(this, {
+      prefix
+    })
   }
 }
 
@@ -127,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()

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@github/markdown-toolbar-element",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Markdown formatting buttons for text inputs.",
   "repository": "github/markdown-toolbar-element",
   "main": "dist/index.umd.js",

package.json

@@ -1,4 +1,4 @@
-describe('markdown-toolbbar-element', function() {
+describe('markdown-toolbar-element', function() {
   describe('element creation', function() {
     it('creates from document.createElement', function() {
       const el = document.createElement('markdown-toolbar')
@@ -70,10 +70,13 @@ describe('markdown-toolbbar-element', function() {
         <markdown-toolbar for="textarea_id">
           <md-bold>bold</md-bold>
           <md-header>header</md-header>
+          <md-header level="1">h1</md-header>
+          <md-header level="10">h1</md-header>
           <md-italic>italic</md-italic>
           <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>
@@ -489,5 +492,51 @@ describe('markdown-toolbbar-element', function() {
         assert.equal("GitHub's [homepage](|url|)", visualValue())
       })
     })
+
+    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|')
+        clickToolbar('md-header')
+        assert.equal('### |title|', visualValue())
+      })
+
+      it('inserts header 1 syntax with cursor in description', function() {
+        setVisualValue('|title|')
+        clickToolbar('md-header[level="1"]')
+        assert.equal('# |title|', visualValue())
+      })
+
+      it('does not insert header for invalid level', function() {
+        setVisualValue('|title|')
+        clickToolbar('md-header[level="10"]')
+        assert.equal('|title|', visualValue())
+      })
+    })
   })
 })