monza-editor 0.2.0 → 0.2.2

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;border:none;width:100%;height:100%;margin:0}.textarea-ugnhty{field-sizing:content;resize:none}.pre-bJTdjq{pointer-events:none;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(--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}

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,IAuBF,CAAC"}
+{"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"}

package/dist/index.js

@@ -1 +1 @@
-let e=(e,t)=>{e.className+=" main-TdgjvV";let a=e.appendChild(document.createElement("textarea"));a.className+=" textarea-ugnhty editor-ore7X3 text-YtgeQ_";let l=e.appendChild(document.createElement("pre"));l.className+=" pre-bJTdjq editor-ore7X3";let n=l.appendChild(document.createElement("code"));n.className+=" code-p0LDSQ text-YtgeQ_";let i=()=>window.requestAnimationFrame(()=>{n.innerHTML=t(a.value),a.style.height="0",a.style.height=`max(${a.scrollHeight}px, 100%)`});a.addEventListener("input",i),i()};export{e as initialize};
+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};

package/dist/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "monza-editor",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "The minimal textarea with syntax highlight",
   "repository": "https://github.com/raviqqe/monza-editor",
   "license": "MIT",
   "publishConfig": {
     "provenance": true
   },
-  "engines": {
-    "node": "^24.5.0"
-  },
-  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
   "type": "module",
   "exports": {
     ".": {
@@ -23,21 +19,15 @@
   },
   "scripts": {
     "build": "rslib build",
-    "build:tsc": "tsc --emitDeclarationOnly",
     "lint": "biome ci",
     "test": "vitest"
   },
-  "dependencies": {
-    "shiki": "^3.9.2"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@biomejs/biome": "^2.1.4",
-    "@raviqqe/biome-config": "^2.0.10",
     "@raviqqe/tsconfig": "^2.0.1",
     "@rslib/core": "^0.12.0",
-    "@vitest/coverage-v8": "^3.0.2",
     "jsdom": "^26.1.0",
-    "typescript": "^5.0.2",
+    "typescript": "^5.9.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vitest": "^3.0.2"
   }

package/src/css.d.ts

@@ -0,0 +1,3 @@
+declare module "*.module.css" {
+  export default styles satisfies { [key: string]: string };
+}

package/src/index.module.css

@@ -0,0 +1,46 @@
+.main {
+  position: relative;
+}
+
+.text {
+  white-space: break-spaces;
+  word-break: break-word;
+}
+
+.editor {
+  border: none;
+  box-sizing: border-box;
+  font-family: var(--font-family, monospace);
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: var(--padding, 0.1rem);
+  text-align: left;
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  overscroll-behavior: none;
+}
+
+.textarea {
+  composes: editor;
+  composes: text;
+
+  /* TODO Support auto height. */
+  field-sizing: content;
+  resize: none;
+}
+
+.pre {
+  composes: editor;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  scrollbar-width: 0;
+}
+
+.code {
+  composes: text;
+}

package/src/index.test.ts

@@ -0,0 +1,8 @@
+import { it } from "vitest";
+import { initialize } from "./index.js";
+
+it("initializes an editor", () => {
+  const editor = document.createElement("div");
+
+  initialize(editor, (text) => text);
+});

package/src/index.ts

@@ -0,0 +1,37 @@
+import styles from "./index.module.css";
+
+export const initialize = (
+  container: Element,
+  highlight: (text: string) => string,
+): void => {
+  container.className += ` ${styles.main}`;
+
+  const textarea = container.appendChild(document.createElement("textarea"));
+  textarea.className += ` ${styles.textarea}`;
+  textarea.setAttribute("spellcheck", "false");
+
+  const pre = container.appendChild(document.createElement("pre"));
+  pre.className += ` ${styles.pre}`;
+
+  const code = pre.appendChild(document.createElement("code"));
+  code.className += ` ${styles.code}`;
+
+  const scroll = () => {
+    pre.scrollTop = textarea.scrollTop;
+    pre.scrollLeft = textarea.scrollLeft;
+  };
+
+  const update = () =>
+    window.requestAnimationFrame(() => {
+      const text = textarea.value;
+
+      code.innerHTML = highlight(text.at(-1) === "\n" ? `${text} ` : text);
+
+      scroll();
+    });
+
+  textarea.addEventListener("input", update);
+  textarea.addEventListener("scroll", scroll);
+
+  update();
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@raviqqe/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "goToDefinition": true,
+          "noUncheckedIndexedAccess": true
+        }
+      }
+    ]
+  },
+  "include": ["src"]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.9.2"}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Yota Toyama
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,11 +0,0 @@
-# Monza editor
-
-[![GitHub Action](https://img.shields.io/github/actions/workflow/status/raviqqe/monza-editor/test.yaml?branch=main&style=flat-square)](https://github.com/raviqqe/monza-editor/actions)
-[![npm](https://img.shields.io/npm/v/monza-editor?style=flat-square)](https://www.npmjs.com/package/monza-editor)
-[![License](https://img.shields.io/github/license/raviqqe/monza-editor.svg?style=flat-square)](LICENSE)
-
-The minimal `textarea` element with syntax highlight.
-
-## License
-
-[MIT](LICENSE)

package/biome.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["./node_modules/@raviqqe/biome-config/biome.json"]
-}

package/cspell.json

@@ -1,13 +0,0 @@
-{
-  "words": [
-    "byonm",
-    "codecov",
-    "deno",
-    "monza",
-    "raviqqe",
-    "rslib",
-    "shiki",
-    "typeof",
-    "vitesse"
-  ]
-}

package/examples/shiki/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Shiki example for Monza editor</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/index.ts"></script>
-  </body>
-</html>

package/examples/shiki/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "@monza-editor/shiki-example",
-  "description": "Shiki example for Monza editor",
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build"
-  },
-  "dependencies": {
-    "monza-editor": "workspace:*",
-    "shiki": "^3.9.2"
-  },
-  "devDependencies": {
-    "@raviqqe/tsconfig": "^2.0.1",
-    "typescript": "~5.9.2",
-    "vite": "^7.1.2"
-  }
-}

package/pnpm-workspace.yaml

@@ -1,3 +0,0 @@
-packages:
-  - .
-  - examples/shiki