Add a attributeChangedCallback to header button

Even though we don't expect header buttons to change levels dynamically
during an application lifetime, we should ensure that it works as
expected.

So I've added an `attributeChangedCallback` to the header
button element. The callback changes the level style based on the
`level` attribute.

Author: koddsson

src/index.ts

@@ -113,6 +113,20 @@ class MarkdownButtonElement extends HTMLElement {
 class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   connectedCallback() {
     const level = parseInt(this.getAttribute('level') || '3', 10)
+    this.#setLevelStyle(level)
+  }
+
+  static get observedAttributes() {
+    return ['level']
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (name !== 'level') return
+    const level = parseInt(newValue || '3', 10)
+    this.#setLevelStyle(level)
+  }
+
+  #setLevelStyle(level: number) {
     if (level < 1 || level > 6) {
       return
     }

test/test.js

@@ -860,6 +860,15 @@ describe('markdown-toolbar-element', function () {
         clickToolbar('md-header[level="10"]')
         assert.equal('|title|', visualValue())
       })
+
+      it('dynamically changes header level based on the level attribute', function () {
+        setVisualValue('|title|')
+        const headerButton = document.querySelector('md-header[level="1"]')
+        headerButton.setAttribute('level', '2')
+        headerButton.click()
+
+        assert.equal('## |title|', visualValue())
+      })
     })
   })
 })