improve header level implementation and add tests

Author: Paul Dixon

index.js

@@ -43,9 +43,16 @@ class MarkdownButtonElement extends HTMLElement {
 class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   constructor() {
     super()
+
+    if (!this.hasAttribute('level')) {
+      this.setAttribute('level', '3')
+    }
+
+    const level = parseInt(this.getAttribute('level'), 10)
+    const prefix = `${'#'.repeat(level)} `
     styles.set(this, {
-      prefix: '#'.repeat(this.getAttribute('level') || 3).' '
-    });
+      prefix
+    })
   }
 }
 

test/test.js

@@ -70,6 +70,7 @@ 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-italic>italic</md-italic>
           <md-quote>quote</md-quote>
           <md-code>code</md-code>
@@ -489,5 +490,18 @@ describe('markdown-toolbbar-element', function() {
         assert.equal("GitHub's [homepage](|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())
+      })
+    })
   })
 })