fix: avoid applying data-md-button styles twice after the toolbar is moved

Author: kwy404

src/index.ts

@@ -348,15 +348,19 @@ function unsetFocusManagement(toolbar: MarkdownToolbarElement) {
 class MarkdownToolbarElement extends HTMLElement {
   static observedAttributes = ['data-no-focus']
 
+  constructor() {
+    super()
+    this.addEventListener('keydown', keydown(applyFromToolbar))
+    this.addEventListener('click', applyFromToolbar)
+  }
+
   connectedCallback(): void {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'toolbar')
     }
     if (!this.hasAttribute('data-no-focus')) {
       setFocusManagement(this)
     }
-    this.addEventListener('keydown', keydown(applyFromToolbar))
-    this.addEventListener('click', applyFromToolbar)
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {

test/test.js

@@ -921,6 +921,18 @@ describe('markdown-toolbar-element', function () {
 
         assert.equal('###### |title|', visualValue())
       })
+
+      it('applies a data-md-button style once from the keyboard after the toolbar is moved', function () {
+        const headerElement = document.createElement('button')
+        headerElement.setAttribute('data-md-button', 'header-6')
+        const toolbar = document.querySelector('markdown-toolbar')
+        toolbar.appendChild(headerElement)
+        toolbar.parentElement.append(toolbar)
+        setVisualValue('|title|')
+        headerElement.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true}))
+
+        assert.equal('###### |title|', visualValue())
+      })
     })
   })
 })