@github/markdown-toolbar-element - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

dist/index.d.ts

@@ -83,3 +83,5 @@ declare global {
 declare class MarkdownToolbarElement extends HTMLElement {
+    static observedAttributes: string[];
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     disconnectedCallback(): void;
@@ -86,0 +88,0 @@ get field(): HTMLTextAreaElement | null;

dist/index.js

@@ -36,3 +36,2 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
         if (event.key === ' ' || event.key === 'Enter') {
-            event.preventDefault();
             fn(event);
@@ -79,6 +78,7 @@ }
         super();
-        const apply = () => {
+        const apply = (event) => {
             const style = styles.get(this);
             if (!style)
                 return;
+            event.preventDefault();
             applyStyle(this, style);
@@ -252,4 +252,15 @@ };
         return;
+    event.preventDefault();
     applyStyle(target, style);
 }
+function setFocusManagement(toolbar) {
+    toolbar.addEventListener('keydown', focusKeydown);
+    toolbar.setAttribute('tabindex', '0');
+    toolbar.addEventListener('focus', onToolbarFocus, { once: true });
+}
+function unsetFocusManagement(toolbar) {
+    toolbar.removeEventListener('keydown', focusKeydown);
+    toolbar.removeAttribute('tabindex');
+    toolbar.removeEventListener('focus', onToolbarFocus);
+}
 class MarkdownToolbarElement extends HTMLElement {
@@ -260,10 +271,20 @@ connectedCallback() {
         }
-        this.addEventListener('keydown', focusKeydown);
-        this.setAttribute('tabindex', '0');
-        this.addEventListener('focus', onToolbarFocus, { once: true });
+        if (!this.hasAttribute('data-no-focus')) {
+            setFocusManagement(this);
+        }
         this.addEventListener('keydown', keydown(applyFromToolbar));
         this.addEventListener('click', applyFromToolbar);
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name !== 'data-no-focus')
+            return;
+        if (newValue === null) {
+            setFocusManagement(this);
+        }
+        else {
+            unsetFocusManagement(this);
+        }
+    }
     disconnectedCallback() {
-        this.removeEventListener('keydown', focusKeydown);
+        unsetFocusManagement(this);
     }
@@ -282,7 +303,6 @@ get field() {
 }
+MarkdownToolbarElement.observedAttributes = ['data-no-focus'];
 function onToolbarFocus({ target }) {
     if (!(target instanceof Element))
         return;
-    if (target.hasAttribute('data-no-focus'))
-        return;
     target.removeAttribute('tabindex');
@@ -305,4 +325,2 @@ let tabindex = '0';
         return;
-    if (toolbar.hasAttribute('data-no-focus'))
-        return;
     const buttons = getButtons(toolbar);
@@ -309,0 +327,0 @@ const index = buttons.indexOf(event.target);

package.json

 {
   "name": "@github/markdown-toolbar-element",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Markdown formatting buttons for text inputs.",
@@ -5,0 +5,0 @@ "repository": "github/markdown-toolbar-element",

No alert changes

Improved metrics

Total package byte prevSize

35005

1.98%

Lines of code

771

2.66%

No dependency changes