diff --git a/package-lock.json b/package-lock.json index 3281b02..277766f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 25cd7e9..e5864c9 100644 --- a/package.json +++ b/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": { diff --git a/src/renderer.ts b/src/renderer.ts index be36160..6d9e334 100644 --- a/src/renderer.ts +++ b/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({ - doc: "Start document", - extensions: [basicSetup, oneDark, fixedHeightEditor] - }) - const wrapper = v.div({class: "editorWrapper"}, view.dom); - document.getElementById("editorGrid").appendChild(wrapper); + editors.push(vanX.noreactive(new EditorColumn())); } document.getElementById("addEditor")?.addEventListener("click", addView);