diff --git a/index.html b/index.html index 93bf6da..57ec202 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Hello World! + Miller code editor
Miller code editor - welcome!
diff --git a/package-lock.json b/package-lock.json index 97a71d9..e6023e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "eslint": "^8.57.1", "eslint-plugin-import": "^2.32.0", "typescript": "~4.5.4", + "vanjs-core": "^1.5.5", "vite": "^5.4.19" } }, @@ -8998,6 +8999,13 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/vanjs-core": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/vanjs-core/-/vanjs-core-1.5.5.tgz", + "integrity": "sha512-BC9MjbXYIRqnwncXfacT6upJpVmIKyrV2MjZi8NuCK+yc9RP0hfdghTpmEuYswXOfkLarDPPcYK4X6q68T9e+g==", + "dev": true, + "license": "MIT" + }, "node_modules/vite": { "version": "5.4.19", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz", diff --git a/package.json b/package.json index 91dde28..3319ef7 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "eslint": "^8.57.1", "eslint-plugin-import": "^2.32.0", "typescript": "~4.5.4", + "vanjs-core": "^1.5.5", "vite": "^5.4.19" }, "dependencies": { diff --git a/src/index.css b/src/index.css index f0ac4dc..575b72b 100644 --- a/src/index.css +++ b/src/index.css @@ -13,7 +13,7 @@ body { /* padding: 0; */ display: grid; grid-template-rows: auto minmax(0, 1fr); - grid-template-columns: auto minmax(0, 1fr); + grid-template-columns: 1fr minmax(0, 4fr); } body > header { @@ -37,6 +37,7 @@ aside { min-width: 120px; max-width: 50vw; + width: 20wv; } #editorGrid { @@ -45,10 +46,13 @@ aside { width: minmax(0, 100%); overflow: auto; grid-auto-flow: column; - grid-auto-columns: fit-content(1fr); + grid-auto-columns: min-content; grid-gap: 1em; grid-template-columns: none; /* grid-template-columns: 1fr; */ overflow-x: auto; +} -} \ No newline at end of file +.editorWrapper { + min-width: fit-content; +} diff --git a/src/renderer.ts b/src/renderer.ts index 79cbb27..00b081c 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -29,6 +29,9 @@ import './pico.jade.css'; import './index.css'; +import van from "vanjs-core" +const v = van.tags + import { basicSetup } from "codemirror" import { EditorView } from "@codemirror/view" import { oneDark } from "@codemirror/theme-one-dark" @@ -44,20 +47,21 @@ const fixedHeightEditor = EditorView.theme({ minHeight: "0px", resize: "horizontal", overflow: "auto", - // width: "24em", + width: "30vw", minWidth: "8em", }, ".cm-scroller": { overflow: "auto" } }) function addView() { - new EditorView({ + const view = new EditorView({ doc: "Start document", - parent: document.getElementById("editorGrid"), extensions: [basicSetup, oneDark, fixedHeightEditor] }) + const wrapper = v.div({class: "editorWrapper"}, view.dom); + document.getElementById("editorGrid").appendChild(wrapper); } document.getElementById("addEditor")?.addEventListener("click", addView); -addView(); \ No newline at end of file +addView();