synthetic-markdown 0.0.3 → 0.0.5

package/README.md

@@ -13,7 +13,7 @@
             let value = ''
             element.value = value
 
-            element.addEventListener('input', (event) => {
+            element.addEventListener('change', (event) => {
                 value = event.target.value
             })
         </script>

package/dist/index.cjs.js

@@ -7633,11 +7633,13 @@ var Element = class extends HTMLElement {
     this.intent = null;
     this.styled = false;
     this.hasAcceptedExternalValue = false;
+    this.appliedClasses = [];
+    this.customClass = "";
     this.hasAutofocus = false;
     this.shadowRootElement = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["autofocus"];
+    return ["class", "autofocus"];
   }
   get value() {
     return this.ast.text;
@@ -7661,15 +7663,22 @@ var Element = class extends HTMLElement {
     if (!on && currentlyOn) this.removeAttribute("autofocus");
     this.hasAutofocus = on;
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "class") {
+      this.customClass = (newValue ?? "").trim();
+      this.applyClass();
+      return;
+    }
     if (name === "autofocus") {
       this.hasAutofocus = this.hasAttribute("autofocus");
       this.setAutoFocus();
+      return;
     }
   }
   connectedCallback() {
     const attrValue = this.getAttribute("value") ?? "";
     this.hasAutofocus = this.hasAttribute("autofocus");
+    this.customClass = (this.getAttribute("class") ?? "").trim();
     this.ast.setText(attrValue);
     this.addStyles();
     this.addDOM();
@@ -7709,6 +7718,20 @@ var Element = class extends HTMLElement {
     div.contentEditable = "true";
     this.shadowRootElement.appendChild(div);
     this.rootElement = div;
+    this.applyClass();
+  }
+  applyClass() {
+    if (!this.rootElement) return;
+    if (this.appliedClasses.length) {
+      this.rootElement.classList.remove(...this.appliedClasses);
+      this.appliedClasses = [];
+    }
+    if (!this.customClass) return;
+    const classes = this.customClass.split(/\s+/).filter(Boolean);
+    if (classes.length) {
+      this.rootElement.classList.add(...classes);
+      this.appliedClasses = classes;
+    }
   }
   emitChange() {
     this.dispatchEvent(new Event("change", {

package/dist/index.d.cts

@@ -11,19 +11,22 @@ declare class Element extends HTMLElement {
     private intent;
     private styled;
     private hasAcceptedExternalValue;
+    private appliedClasses;
+    private customClass;
     hasAutofocus: boolean;
-    static get observedAttributes(): string[];
     constructor();
+    static get observedAttributes(): string[];
     get value(): string;
     set value(value: string);
     get autofocus(): any;
     set autofocus(value: any);
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private renderDOM;
     private addStyles;
     private addDOM;
+    private applyClass;
     private emitChange;
     private setAutoFocus;
 }

package/dist/index.d.ts

@@ -11,19 +11,22 @@ declare class Element extends HTMLElement {
     private intent;
     private styled;
     private hasAcceptedExternalValue;
+    private appliedClasses;
+    private customClass;
     hasAutofocus: boolean;
-    static get observedAttributes(): string[];
     constructor();
+    static get observedAttributes(): string[];
     get value(): string;
     set value(value: string);
     get autofocus(): any;
     set autofocus(value: any);
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private renderDOM;
     private addStyles;
     private addDOM;
+    private applyClass;
     private emitChange;
     private setAutoFocus;
 }

package/dist/index.esm.js

@@ -7605,11 +7605,13 @@ var Element = class extends HTMLElement {
     this.intent = null;
     this.styled = false;
     this.hasAcceptedExternalValue = false;
+    this.appliedClasses = [];
+    this.customClass = "";
     this.hasAutofocus = false;
     this.shadowRootElement = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["autofocus"];
+    return ["class", "autofocus"];
   }
   get value() {
     return this.ast.text;
@@ -7633,15 +7635,22 @@ var Element = class extends HTMLElement {
     if (!on && currentlyOn) this.removeAttribute("autofocus");
     this.hasAutofocus = on;
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "class") {
+      this.customClass = (newValue ?? "").trim();
+      this.applyClass();
+      return;
+    }
     if (name === "autofocus") {
       this.hasAutofocus = this.hasAttribute("autofocus");
       this.setAutoFocus();
+      return;
     }
   }
   connectedCallback() {
     const attrValue = this.getAttribute("value") ?? "";
     this.hasAutofocus = this.hasAttribute("autofocus");
+    this.customClass = (this.getAttribute("class") ?? "").trim();
     this.ast.setText(attrValue);
     this.addStyles();
     this.addDOM();
@@ -7681,6 +7690,20 @@ var Element = class extends HTMLElement {
     div.contentEditable = "true";
     this.shadowRootElement.appendChild(div);
     this.rootElement = div;
+    this.applyClass();
+  }
+  applyClass() {
+    if (!this.rootElement) return;
+    if (this.appliedClasses.length) {
+      this.rootElement.classList.remove(...this.appliedClasses);
+      this.appliedClasses = [];
+    }
+    if (!this.customClass) return;
+    const classes = this.customClass.split(/\s+/).filter(Boolean);
+    if (classes.length) {
+      this.rootElement.classList.add(...classes);
+      this.appliedClasses = classes;
+    }
   }
   emitChange() {
     this.dispatchEvent(new Event("change", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "synthetic-markdown",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "",
     "license": "MIT",
     "author": {