@monza-editor/astro 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monza-editor/astro",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Astro component of Monza editor",
   "license": "MIT",
   "repository": {
@@ -18,12 +18,12 @@
     "provenance": true
   },
   "dependencies": {
-    "monza-editor": "^0.6.0",
-    "picolight": "^0.2.10"
+    "monza-editor": "^0.6.1",
+    "picolight": "^0.3.4"
   },
   "devDependencies": {
-    "@raviqqe/tsconfig": "^3.0.2",
-    "astro": "^7.2.10",
+    "@raviqqe/tsconfig": "^3.0.5",
+    "astro": "^7.4.7",
     "typescript": "^6.0.3"
   },
   "scripts": {

package/src/Editor.astro

@@ -16,9 +16,9 @@ const { id, language, theme, darkTheme, value, ...props } = Astro.props;
 ---
 
 <monza-editor
+  data-dark-theme={JSON.stringify(darkTheme)}
   data-language={serializeLanguage(language)}
   data-theme={JSON.stringify(theme)}
-  data-dark-theme={JSON.stringify(darkTheme)}
 >
   <div class={`${styles.root} ${props.class}`} id={id}>
     <textarea class={styles.textarea}>{value}</textarea>
@@ -26,43 +26,43 @@ const { id, language, theme, darkTheme, value, ...props } = Astro.props;
   </div>
 </monza-editor>
 <script>
-  import { initialize } from "monza-editor";
-  import { deserializeLanguage, highlight } from "picolight";
+import { initialize } from "monza-editor";
+import { deserializeLanguage, highlight } from "picolight";
 
-  class Editor extends HTMLElement {
-    async connectedCallback(): Promise<void> {
-      const { language, theme, darkTheme } = this.dataset;
+class Editor extends HTMLElement {
+  async connectedCallback(): Promise<void> {
+    const { language, theme, darkTheme } = this.dataset;
 
-      if (!language || !theme) {
-        throw new Error("Editor props missing");
-      }
+    if (!language || !theme) {
+      throw new Error("Editor props missing");
+    }
 
-      const div = this.querySelector("div");
-      const textarea = this.querySelector("textarea");
-      const pre = this.querySelector("pre");
-      const code = this.querySelector("code");
+    const div = this.querySelector("div");
+    const textarea = this.querySelector("textarea");
+    const pre = this.querySelector("pre");
+    const code = this.querySelector("code");
 
-      if (!div || !textarea || !pre || !code) {
-        throw new Error("Editor elements missing");
-      }
+    if (!div || !textarea || !pre || !code) {
+      throw new Error("Editor elements missing");
+    }
 
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      let dark = mediaQuery.matches;
-      mediaQuery.addEventListener("change", (event) => (dark = event.matches));
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    let dark = mediaQuery.matches;
+    mediaQuery.addEventListener("change", (event) => (dark = event.matches));
 
-      initialize({
-        code,
-        highlight: (text) =>
-          highlight(
-            text,
-            deserializeLanguage(language),
-            JSON.parse((dark && darkTheme) || theme),
-          ).outerHTML,
-        pre,
-        textarea,
-      });
-    }
+    initialize({
+      code,
+      highlight: (text) =>
+        highlight(
+          text,
+          deserializeLanguage(language),
+          JSON.parse((dark && darkTheme) || theme),
+        ).outerHTML,
+      pre,
+      textarea,
+    });
   }
+}
 
-  customElements.define("monza-editor", Editor);
+customElements.define("monza-editor", Editor);
 </script>