quintenk
/
miller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix resizing editors, add VanJS

This commit is contained in:
Quinten Kock 2025-08-12 18:06:23 +02:00
parent 008d96d802
commit c400a976d2
5 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<title>Miller code editor</title>
</head>
<body>
<header>Miller code editor - welcome! <button id="addEditor">Add Editor</button></header>

8
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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": {

10
src/index.css
View File

@ -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;
}
.editorWrapper {
min-width: fit-content;
}

10
src/renderer.ts
View File

@ -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,18 +47,19 @@ 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);