Use VanX.list

package-lock.json

@@ -31,6 +31,7 @@
         "eslint-plugin-import": "^2.32.0",
         "typescript": "~4.5.4",
         "vanjs-core": "^1.5.5",
+        "vanjs-ext": "^0.6.3",
         "vite": "^7.1.2"
       }
     },
@@ -9105,6 +9106,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vanjs-ext": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/vanjs-ext/-/vanjs-ext-0.6.3.tgz",
+      "integrity": "sha512-Jmaeqx9nCjelwDVSQEaRtt7R4Y/Kj/zJBG3bZSiIPj8Wtr8nEFRsJX9K5qcGl1o3cGEEFBE9suyoSqs/6tiOBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vanjs-core": "^1.5.5"
+      }
+    },
     "node_modules/vite": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.2.tgz",

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-import": "^2.32.0",
     "typescript": "~4.5.4",
     "vanjs-core": "^1.5.5",
+    "vanjs-ext": "^0.6.3",
     "vite": "^7.1.2"
   },
   "dependencies": {

src/renderer.ts

@@ -30,36 +30,48 @@ import './pico.jade.css';
 import './index.css';
 
 import van from "vanjs-core"
+import * as vanX from "vanjs-ext"
 const v = van.tags
 
 import { basicSetup } from "codemirror"
 import { EditorView } from "@codemirror/view"
 import { oneDark } from "@codemirror/theme-one-dark"
 
-// const fixedHeightEditor = EditorView.theme({
-//   "&": {height: "100%"},
-//   ".cm-scroller": {overflow: "auto"}
-// })
-
 const fixedHeightEditor = EditorView.theme({
     "&": {
         height: "100%",
         minHeight: "0px",
         resize: "horizontal",
         overflow: "auto",
-        width: "400px",
+        width: "600px",
         minWidth: "8em",
     },
     ".cm-scroller": { overflow: "auto" }
 })
 
+class EditorColumn {
+    view: EditorView;
+    wrapper: HTMLElement;
+
+    constructor() {
+        this.view = new EditorView({
+            doc: "Start document",
+            extensions: [basicSetup, oneDark, fixedHeightEditor]
+        })
+        console.log("Character width: ", this.view.defaultCharacterWidth);
+        this.wrapper = v.div({ class: "editorWrapper" }, this.view.dom);
+    }
+    get dom() {
+        return this.wrapper;
+    }
+}
+
+// Create and mount editor list
+const editors = vanX.reactive([]);
+vanX.list(document.getElementById("editorGrid"), editors, v => v.val.dom);
+
 function addView() {
-    const view = new EditorView({
+    editors.push(vanX.noreactive(new EditorColumn()));
-        doc: "Start document",
-        extensions: [basicSetup, oneDark, fixedHeightEditor]
-    })
-    const wrapper = v.div({class: "editorWrapper"}, view.dom);
-    document.getElementById("editorGrid").appendChild(wrapper);
 }
 
 document.getElementById("addEditor")?.addEventListener("click", addView);