commit 0b9477109e9ee8130423148752ee866f88a0bcca
parent 7b35b4d5e96aa15d95268262c3a4d3c803b6280b
Author: Hunter
Date: Wed, 24 Dec 2025 23:27:39 -0500
convert <!> tag to boilerplate
Diffstat:
2 files changed, 38 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
@@ -19,6 +19,22 @@ Craft handmade websites in their natural habitat (your web browser).
### Stock Images
A library of stock images is included for your convenience. To browse them, type `<img src="?">` anywhere in the editor. You can use them in your pages like so: `<img src="coffee.gif">`.
+### Boilerplate
+Type `<!>` to insert the following starter HTML:
+
+```html
+<html>
+ <head>
+ <style>
+
+ </style>
+ </head>
+ <body>
+
+ </body>
+</html>
+```
+
<br>
<img src="images/hint.gif" width=60px>
<i>
diff --git a/main.js b/main.js
@@ -394,9 +394,31 @@ function initializeCodeMirror() {
]),
html(),
// Auto-close <style> and <script> tags (not handled by default html() extension)
+ // Also expand <!> into HTML boilerplate
EditorView.inputHandler.of((view, from, to, text) => {
if (text !== '>') return false;
const before = view.state.doc.sliceString(Math.max(0, from - 20), from);
+ // Check for <!> boilerplate trigger
+ if (before.endsWith('<!')) {
+ const boilerplate = `<html>
+\t<head>
+\t\t<style>
+\t\t\t
+\t\t</style>
+\t</head>
+\t<body>
+\t\t
+\t</body>
+</html>`;
+ const startPos = from - 2;
+ const cursorPos = startPos + boilerplate.indexOf('<body>') + 9;
+ view.dispatch({
+ changes: { from: startPos, to: from, insert: boilerplate },
+ selection: { anchor: cursorPos }
+ });
+ return true;
+ }
+ // Check for <style> or <script>
const match = before.match(/<(style|script)(\s[^>]*)?$/i);
if (!match) return false;
const tagName = match[1].toLowerCase();