From 37b6a1abcb9f9ff9b3b2c31eefa0adb34ba4b014 Mon Sep 17 00:00:00 2001
From: Paul Dixon <paul.dixon@mintbridge.co.uk>
Date: Tue, 17 Sep 2019 17:21:17 +0100
Subject: [PATCH 1/4] add attribute support for setting the heading level

---
 index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 929cdf1..9208991 100644
--- a/index.js
+++ b/index.js
@@ -43,7 +43,9 @@ class MarkdownButtonElement extends HTMLElement {
 class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   constructor() {
     super()
-    styles.set(this, {prefix: '### '})
+    styles.set(this, {
+      prefix: '#'.repeat(this.getAttribute('level') || 3).' '
+    });
   }
 }
 

From 347bec1968d0312a84bf928d6ab2bf0d1641e926 Mon Sep 17 00:00:00 2001
From: Paul Dixon <paul.dixon@rocketx.com>
Date: Wed, 18 Sep 2019 20:39:51 +0100
Subject: [PATCH 2/4] improve header level implementation and add tests

---
 index.js     | 11 +++++++++--
 test/test.js | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 9208991..d6d17fc 100644
--- a/index.js
+++ b/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
+    })
   }
 }
 
diff --git a/test/test.js b/test/test.js
index a6f989f..0081661 100644
--- a/test/test.js
+++ b/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())
+      })
+    })
   })
 })

From bfde86036aefd25a83606b1e52bc1a92d9acf4a1 Mon Sep 17 00:00:00 2001
From: Paul Dixon <paul.dixon@rocketx.com>
Date: Thu, 19 Sep 2019 22:52:30 +0100
Subject: [PATCH 3/4] use data attribute instead of non standard attribute, and
 dont set the data if not present

---
 index.js     | 6 +-----
 test/test.js | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/index.js b/index.js
index d6d17fc..bbe778e 100644
--- a/index.js
+++ b/index.js
@@ -44,11 +44,7 @@ class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   constructor() {
     super()
 
-    if (!this.hasAttribute('level')) {
-      this.setAttribute('level', '3')
-    }
-
-    const level = parseInt(this.getAttribute('level'), 10)
+    const level = parseInt(this.dataset.level || 3, 10)
     const prefix = `${'#'.repeat(level)} `
     styles.set(this, {
       prefix
diff --git a/test/test.js b/test/test.js
index 0081661..1578659 100644
--- a/test/test.js
+++ b/test/test.js
@@ -70,7 +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-header data-level="1">h1</md-header>
           <md-italic>italic</md-italic>
           <md-quote>quote</md-quote>
           <md-code>code</md-code>
@@ -499,7 +499,7 @@ describe('markdown-toolbbar-element', function() {
       })
       it('inserts header 1 syntax with cursor in description', function() {
         setVisualValue('|title|')
-        clickToolbar('md-header[level="1"]')
+        clickToolbar('md-header[data-level="1"]')
         assert.equal('# |title|', visualValue())
       })
     })

From 2fa7feebc3bc92cc87f2a983cd7617309afa7932 Mon Sep 17 00:00:00 2001
From: Paul Dixon <paul.dixon@rocketx.com>
Date: Thu, 19 Sep 2019 22:56:14 +0100
Subject: [PATCH 4/4] use attribute instead of data attribute

---
 index.js     | 2 +-
 test/test.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index bbe778e..76f8f12 100644
--- a/index.js
+++ b/index.js
@@ -44,7 +44,7 @@ class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   constructor() {
     super()
 
-    const level = parseInt(this.dataset.level || 3, 10)
+    const level = parseInt(this.getAttribute('level') || 3, 10)
     const prefix = `${'#'.repeat(level)} `
     styles.set(this, {
       prefix
diff --git a/test/test.js b/test/test.js
index 1578659..0081661 100644
--- a/test/test.js
+++ b/test/test.js
@@ -70,7 +70,7 @@ describe('markdown-toolbbar-element', function() {
         <markdown-toolbar for="textarea_id">
           <md-bold>bold</md-bold>
           <md-header>header</md-header>
-          <md-header data-level="1">h1</md-header>
+          <md-header level="1">h1</md-header>
           <md-italic>italic</md-italic>
           <md-quote>quote</md-quote>
           <md-code>code</md-code>
@@ -499,7 +499,7 @@ describe('markdown-toolbbar-element', function() {
       })
       it('inserts header 1 syntax with cursor in description', function() {
         setVisualValue('|title|')
-        clickToolbar('md-header[data-level="1"]')
+        clickToolbar('md-header[level="1"]')
         assert.equal('# |title|', visualValue())
       })
     })