monza-editor 0.2.2 → 0.3.1

package/dist/index.css

@@ -1 +1 @@
-.main-TdgjvV{position:relative}.text-YtgeQ_{white-space:break-spaces;word-break:break-word}.editor-ore7X3{box-sizing:border-box;font-family:var(--font-family,monospace);font-size:inherit;line-height:inherit;padding:var(--padding,.1rem);text-align:left;overscroll-behavior:none;border:none;width:100%;height:100%;margin:0;overflow:scroll}.textarea-ugnhty{field-sizing:content;resize:none}.pre-bJTdjq{pointer-events:none;scrollbar-width:0;position:absolute;top:0;left:0}
+.main-TdgjvV{position:relative}.text-YtgeQ_{white-space:break-spaces;word-break:break-word}.editor-ore7X3{box-sizing:border-box;font-family:var(--me-font-family,monospace);font-size:inherit;line-height:inherit;padding:var(--me-padding,.1rem);text-align:left;overscroll-behavior:none;border:none;width:100%;height:100%;margin:0;overflow:scroll}.textarea-ugnhty{resize:none}.pre-bJTdjq{pointer-events:none;scrollbar-width:0;position:absolute;top:0;left:0}

package/dist/index.d.ts

@@ -1,2 +1,9 @@
-export declare const initialize: (container: Element, highlight: (text: string) => string) => void;
+interface Options {
+    highlight: (text: string) => string;
+    onChange?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+    value?: string;
+}
+export declare const initialize: (container: Element, { highlight, onChange, onInput, value }: Options) => void;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,GACrB,WAAW,OAAO,EAClB,WAAW,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,KAClC,IA+BF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,UAAU,OAAO;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,GACrB,WAAW,OAAO,EAClB,yCAAyC,OAAO,KAC/C,IAuCF,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-let e=(e,t)=>{e.className+=" main-TdgjvV";let l=e.appendChild(document.createElement("textarea"));l.className+=" textarea-ugnhty editor-ore7X3 text-YtgeQ_",l.setAttribute("spellcheck","false");let a=e.appendChild(document.createElement("pre"));a.className+=" pre-bJTdjq editor-ore7X3";let n=a.appendChild(document.createElement("code"));n.className+=" code-p0LDSQ text-YtgeQ_";let r=()=>{a.scrollTop=l.scrollTop,a.scrollLeft=l.scrollLeft},d=()=>window.requestAnimationFrame(()=>{let e=l.value;n.innerHTML=t("\n"===e.at(-1)?`${e} `:e),r()});l.addEventListener("input",d),l.addEventListener("scroll",r),d()};export{e as initialize};
+let e=(e,{highlight:t,onChange:l,onInput:a,value:n})=>{e.className+=" main-TdgjvV";let r=e.appendChild(document.createElement("textarea"));r.className+=" textarea-ugnhty editor-ore7X3 text-YtgeQ_",r.setAttribute("spellcheck","false"),r.value=n??"";let d=e.appendChild(document.createElement("pre"));d.className+=" pre-bJTdjq editor-ore7X3";let c=d.appendChild(document.createElement("code"));c.className+=" code-p0LDSQ text-YtgeQ_";let s=()=>{d.scrollTop=r.scrollTop,d.scrollLeft=r.scrollLeft},i=()=>window.requestAnimationFrame(()=>{let e=r.value;c.innerHTML=t("\n"===e.at(-1)?`${e} `:e),s()});r.addEventListener("input",e=>{i(),a?.(e)}),r.addEventListener("scroll",s),l&&r.addEventListener("change",l),i()};export{e as initialize};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monza-editor",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "The minimal textarea with syntax highlight",
   "repository": "https://github.com/raviqqe/monza-editor",
   "license": "MIT",

package/rslib.config.ts

@@ -13,9 +13,4 @@ export default defineConfig({
   output: {
     target: "web",
   },
-  source: {
-    entry: {
-      index: "./src/index.ts",
-    },
-  },
 });

package/src/index.module.css

@@ -10,11 +10,11 @@
 .editor {
   border: none;
   box-sizing: border-box;
-  font-family: var(--font-family, monospace);
+  font-family: var(--me-font-family, monospace);
   font-size: inherit;
   line-height: inherit;
   margin: 0;
-  padding: var(--padding, 0.1rem);
+  padding: var(--me-padding, 0.1rem);
   text-align: left;
   width: 100%;
   height: 100%;
@@ -26,9 +26,8 @@
   composes: editor;
   composes: text;
 
-  /* TODO Support auto height. */
-  field-sizing: content;
   resize: none;
+  /* TODO field-sizing: content; */
 }
 
 .pre {

package/src/index.test.ts

@@ -4,5 +4,5 @@ import { initialize } from "./index.js";
 it("initializes an editor", () => {
   const editor = document.createElement("div");
 
-  initialize(editor, (text) => text);
+  initialize(editor, { highlight: (text) => text });
 });

package/src/index.ts

@@ -1,14 +1,22 @@
 import styles from "./index.module.css";
 
+interface Options {
+  highlight: (text: string) => string;
+  onChange?: (event: Event) => void;
+  onInput?: (event: Event) => void;
+  value?: string;
+}
+
 export const initialize = (
   container: Element,
-  highlight: (text: string) => string,
+  { highlight, onChange, onInput, value }: Options,
 ): void => {
   container.className += ` ${styles.main}`;
 
   const textarea = container.appendChild(document.createElement("textarea"));
   textarea.className += ` ${styles.textarea}`;
   textarea.setAttribute("spellcheck", "false");
+  textarea.value = value ?? "";
 
   const pre = container.appendChild(document.createElement("pre"));
   pre.className += ` ${styles.pre}`;
@@ -30,8 +38,15 @@ export const initialize = (
       scroll();
     });
 
-  textarea.addEventListener("input", update);
+  textarea.addEventListener("input", (event) => {
+    update();
+    onInput?.(event);
+  });
   textarea.addEventListener("scroll", scroll);
 
+  if (onChange) {
+    textarea.addEventListener("change", onChange);
+  }
+
   update();
 };