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> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello World!</title> <title>Miller code editor</title>
</head> </head>
<body> <body>
<header>Miller code editor - welcome! <button id="addEditor">Add Editor</button></header> <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": "^8.57.1",
"eslint-plugin-import": "^2.32.0", "eslint-plugin-import": "^2.32.0",
"typescript": "~4.5.4", "typescript": "~4.5.4",
"vanjs-core": "^1.5.5",
"vite": "^5.4.19" "vite": "^5.4.19"
} }
}, },
@ -8998,6 +8999,13 @@
"spdx-expression-parse": "^3.0.0" "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": { "node_modules/vite": {
"version": "5.4.19", "version": "5.4.19",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz", "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": "^8.57.1",
"eslint-plugin-import": "^2.32.0", "eslint-plugin-import": "^2.32.0",
"typescript": "~4.5.4", "typescript": "~4.5.4",
"vanjs-core": "^1.5.5",
"vite": "^5.4.19" "vite": "^5.4.19"
}, },
"dependencies": { "dependencies": {

10
src/index.css
View File

@ -13,7 +13,7 @@ body {
/* padding: 0; */ /* padding: 0; */
display: grid; display: grid;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: 1fr minmax(0, 4fr);
} }
body > header { body > header {
@ -37,6 +37,7 @@ aside {
min-width: 120px; min-width: 120px;
max-width: 50vw; max-width: 50vw;
width: 20wv;
} }
#editorGrid { #editorGrid {
@ -45,10 +46,13 @@ aside {
width: minmax(0, 100%); width: minmax(0, 100%);
overflow: auto; overflow: auto;
grid-auto-flow: column; grid-auto-flow: column;
grid-auto-columns: fit-content(1fr); grid-auto-columns: min-content;
grid-gap: 1em; grid-gap: 1em;
grid-template-columns: none; grid-template-columns: none;
/* grid-template-columns: 1fr; */ /* grid-template-columns: 1fr; */
overflow-x: auto; overflow-x: auto;
}
} .editorWrapper {
min-width: fit-content;
}

12
src/renderer.ts
View File

@ -29,6 +29,9 @@
import './pico.jade.css'; import './pico.jade.css';
import './index.css'; import './index.css';
import van from "vanjs-core"
const v = van.tags
import { basicSetup } from "codemirror" import { basicSetup } from "codemirror"
import { EditorView } from "@codemirror/view" import { EditorView } from "@codemirror/view"
import { oneDark } from "@codemirror/theme-one-dark" import { oneDark } from "@codemirror/theme-one-dark"
@ -44,20 +47,21 @@ const fixedHeightEditor = EditorView.theme({
minHeight: "0px", minHeight: "0px",
resize: "horizontal", resize: "horizontal",
overflow: "auto", overflow: "auto",
// width: "24em", width: "30vw",
minWidth: "8em", minWidth: "8em",
}, },
".cm-scroller": { overflow: "auto" } ".cm-scroller": { overflow: "auto" }
}) })
function addView() { function addView() {
new EditorView({ const view = new EditorView({
doc: "Start document", doc: "Start document",
parent: document.getElementById("editorGrid"),
extensions: [basicSetup, oneDark, fixedHeightEditor] extensions: [basicSetup, oneDark, fixedHeightEditor]
}) })
const wrapper = v.div({class: "editorWrapper"}, view.dom);
document.getElementById("editorGrid").appendChild(wrapper);
} }
document.getElementById("addEditor")?.addEventListener("click", addView); document.getElementById("addEditor")?.addEventListener("click", addView);
addView(); addView();