create-volt 0.47.0 → 0.48.1

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.48.1] - 2026-06-29
+
+### Changed
+- Config WYSIWYG loads RTEPro at a **major-version float** (`@1`) instead of a
+  pinned patch, so RTEPro 1.x updates flow without a create-volt release. Dropped
+  the marked dependency entirely — RTEPro takes markdown directly via setMarkdown().
+
+## [0.48.0] - 2026-06-29
+
+### Added
+- **WYSIWYG editor in the config.** Manage content embeds the RTEPro rich editor
+  (loaded from CDN) instead of a raw textarea — visual editing, shell-gated, no
+  public route or auth. Opens markdown rendered to HTML, saves markdown (or HTML
+  for complex layouts), with a title field beside the slug.
+
 ## [0.47.0] - 2026-06-29
 
 ### Added
@@ -620,6 +635,8 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.48.1]: https://github.com/MIR-2025/volt/releases/tag/v0.48.1
+[0.48.0]: https://github.com/MIR-2025/volt/releases/tag/v0.48.0
 [0.47.0]: https://github.com/MIR-2025/volt/releases/tag/v0.47.0
 [0.46.0]: https://github.com/MIR-2025/volt/releases/tag/v0.46.0
 [0.45.1]: https://github.com/MIR-2025/volt/releases/tag/v0.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.47.0",
+  "version": "0.48.1",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/blog/setup/index.html

@@ -40,6 +40,7 @@
       });
     })();
   </script>
+  <script src="https://cdn.jsdelivr.net/npm/rte-rich-text-editor-pro@1/rte-pro.js"></script>
   <script type="module" src="/setup.js"></script>
 </body>
 </html>

package/templates/blog/setup/setup.js

@@ -300,24 +300,52 @@ async function buyCredits(amountUsd) {
   }
 }
 const items = signal({ pages: [], posts: [] });
-const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
+let ed = null; // live RTEPro instance for the open editor
 const loadItems = async () => items(await (await fetch("/setup/content")).json());
+// raw .md → { title, body, isHtml }; RTEPro takes markdown directly (setMarkdown),
+// so no markdown library is needed.
+function parseDoc(raw) {
+  const fm = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);
+  const front = fm ? fm[1] : "";
+  const title = ((front.match(/^title:\s*(.+)$/m) || [])[1] || "").trim();
+  return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
+}
+function mountEditor(doc) {
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  if (doc && doc.isHtml) ed.setHTML(doc.body || "");
+  else ed.setMarkdown((doc && doc.body) || "");
+}
 async function editItem(type, slug) {
   const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
-  editing({ type, slug, body: d.body || "", isNew: false });
+  const doc = parseDoc(d.body || "");
+  editing({ type, slug, title: doc.title, isNew: false });
+  queueMicrotask(() => mountEditor(doc));
 }
 function newItem(type) {
-  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
-  editing({ type, slug: "", body, isNew: true });
+  editing({ type, slug: "", title: "", isNew: true });
+  queueMicrotask(() => mountEditor({ body: "", isHtml: false }));
+}
+// markdown can't round-trip complex layouts (columns, inline styles, merged cells,
+// embeds) — save those as HTML so they aren't flattened.
+function isComplex(h) {
+  return /\bstyle\s*=\s*["'][^"']*(text-align|column|float|grid|flex|width|height|color|background|font|margin|padding)/i.test(h) || /\b(colspan|rowspan)\b/i.test(h) || /<(u|font|mark|sub|sup|iframe|video|audio|figure)\b/i.test(h) || /class\s*=\s*["'][^"']*(col|grid|row|flex|layout)/i.test(h);
 }
 async function saveItem() {
   const e = editing();
   const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
-  const body = document.querySelector("#mg-body").value;
   if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const title = (document.querySelector("#mg-title").value || "").trim() || slug;
+  const htmlOut = ed ? ed.getHTML() : "";
+  const complex = isComplex(htmlOut);
+  const front = [`title: ${title}`];
+  if (complex) front.push("format: html");
+  const docBody = complex ? htmlOut : ed ? ed.getMarkdown() : "";
+  const body = `---\n${front.join("\n")}\n---\n\n${docBody}\n`;
   const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
   if (!r.ok) return status("Error: " + (r.error || "?"));
-  status("Saved → " + r.file);
+  status("Saved → " + r.file + (complex ? " (HTML — complex layout)" : ""));
+  ed = null;
   editing(null);
   loadItems();
 }
@@ -339,10 +367,10 @@ const section = (label, type, key) =>
     ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
   </div>`;
 const editorPanel = () => {
-  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
-  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
-    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
-    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px" value=${e.body}></textarea>
+  const e = editing(); // inputs uncontrolled (read on Save); RTEPro mounts into #mg-editor
+  return html`<div class="p-3 mb-2" style="border:1px solid var(--border,#232a36);border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} style="max-width:200px" /><input id="mg-title" class="form-control" placeholder="Title" value=${e.title || ""} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <div id="mg-editor"></div>
     <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
   </div>`;
 };

package/templates/default/setup/index.html

@@ -40,6 +40,7 @@
       });
     })();
   </script>
+  <script src="https://cdn.jsdelivr.net/npm/rte-rich-text-editor-pro@1/rte-pro.js"></script>
   <script type="module" src="/setup.js"></script>
 </body>
 </html>

package/templates/default/setup/setup.js

@@ -300,24 +300,52 @@ async function buyCredits(amountUsd) {
   }
 }
 const items = signal({ pages: [], posts: [] });
-const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
+let ed = null; // live RTEPro instance for the open editor
 const loadItems = async () => items(await (await fetch("/setup/content")).json());
+// raw .md → { title, body, isHtml }; RTEPro takes markdown directly (setMarkdown),
+// so no markdown library is needed.
+function parseDoc(raw) {
+  const fm = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);
+  const front = fm ? fm[1] : "";
+  const title = ((front.match(/^title:\s*(.+)$/m) || [])[1] || "").trim();
+  return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
+}
+function mountEditor(doc) {
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  if (doc && doc.isHtml) ed.setHTML(doc.body || "");
+  else ed.setMarkdown((doc && doc.body) || "");
+}
 async function editItem(type, slug) {
   const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
-  editing({ type, slug, body: d.body || "", isNew: false });
+  const doc = parseDoc(d.body || "");
+  editing({ type, slug, title: doc.title, isNew: false });
+  queueMicrotask(() => mountEditor(doc));
 }
 function newItem(type) {
-  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
-  editing({ type, slug: "", body, isNew: true });
+  editing({ type, slug: "", title: "", isNew: true });
+  queueMicrotask(() => mountEditor({ body: "", isHtml: false }));
+}
+// markdown can't round-trip complex layouts (columns, inline styles, merged cells,
+// embeds) — save those as HTML so they aren't flattened.
+function isComplex(h) {
+  return /\bstyle\s*=\s*["'][^"']*(text-align|column|float|grid|flex|width|height|color|background|font|margin|padding)/i.test(h) || /\b(colspan|rowspan)\b/i.test(h) || /<(u|font|mark|sub|sup|iframe|video|audio|figure)\b/i.test(h) || /class\s*=\s*["'][^"']*(col|grid|row|flex|layout)/i.test(h);
 }
 async function saveItem() {
   const e = editing();
   const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
-  const body = document.querySelector("#mg-body").value;
   if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const title = (document.querySelector("#mg-title").value || "").trim() || slug;
+  const htmlOut = ed ? ed.getHTML() : "";
+  const complex = isComplex(htmlOut);
+  const front = [`title: ${title}`];
+  if (complex) front.push("format: html");
+  const docBody = complex ? htmlOut : ed ? ed.getMarkdown() : "";
+  const body = `---\n${front.join("\n")}\n---\n\n${docBody}\n`;
   const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
   if (!r.ok) return status("Error: " + (r.error || "?"));
-  status("Saved → " + r.file);
+  status("Saved → " + r.file + (complex ? " (HTML — complex layout)" : ""));
+  ed = null;
   editing(null);
   loadItems();
 }
@@ -339,10 +367,10 @@ const section = (label, type, key) =>
     ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
   </div>`;
 const editorPanel = () => {
-  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
-  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
-    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
-    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px" value=${e.body}></textarea>
+  const e = editing(); // inputs uncontrolled (read on Save); RTEPro mounts into #mg-editor
+  return html`<div class="p-3 mb-2" style="border:1px solid var(--border,#232a36);border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} style="max-width:200px" /><input id="mg-title" class="form-control" placeholder="Title" value=${e.title || ""} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <div id="mg-editor"></div>
     <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
   </div>`;
 };

package/templates/docs/setup/index.html

@@ -40,6 +40,7 @@
       });
     })();
   </script>
+  <script src="https://cdn.jsdelivr.net/npm/rte-rich-text-editor-pro@1/rte-pro.js"></script>
   <script type="module" src="/setup.js"></script>
 </body>
 </html>

package/templates/docs/setup/setup.js

@@ -300,24 +300,52 @@ async function buyCredits(amountUsd) {
   }
 }
 const items = signal({ pages: [], posts: [] });
-const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
+let ed = null; // live RTEPro instance for the open editor
 const loadItems = async () => items(await (await fetch("/setup/content")).json());
+// raw .md → { title, body, isHtml }; RTEPro takes markdown directly (setMarkdown),
+// so no markdown library is needed.
+function parseDoc(raw) {
+  const fm = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);
+  const front = fm ? fm[1] : "";
+  const title = ((front.match(/^title:\s*(.+)$/m) || [])[1] || "").trim();
+  return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
+}
+function mountEditor(doc) {
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  if (doc && doc.isHtml) ed.setHTML(doc.body || "");
+  else ed.setMarkdown((doc && doc.body) || "");
+}
 async function editItem(type, slug) {
   const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
-  editing({ type, slug, body: d.body || "", isNew: false });
+  const doc = parseDoc(d.body || "");
+  editing({ type, slug, title: doc.title, isNew: false });
+  queueMicrotask(() => mountEditor(doc));
 }
 function newItem(type) {
-  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
-  editing({ type, slug: "", body, isNew: true });
+  editing({ type, slug: "", title: "", isNew: true });
+  queueMicrotask(() => mountEditor({ body: "", isHtml: false }));
+}
+// markdown can't round-trip complex layouts (columns, inline styles, merged cells,
+// embeds) — save those as HTML so they aren't flattened.
+function isComplex(h) {
+  return /\bstyle\s*=\s*["'][^"']*(text-align|column|float|grid|flex|width|height|color|background|font|margin|padding)/i.test(h) || /\b(colspan|rowspan)\b/i.test(h) || /<(u|font|mark|sub|sup|iframe|video|audio|figure)\b/i.test(h) || /class\s*=\s*["'][^"']*(col|grid|row|flex|layout)/i.test(h);
 }
 async function saveItem() {
   const e = editing();
   const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
-  const body = document.querySelector("#mg-body").value;
   if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const title = (document.querySelector("#mg-title").value || "").trim() || slug;
+  const htmlOut = ed ? ed.getHTML() : "";
+  const complex = isComplex(htmlOut);
+  const front = [`title: ${title}`];
+  if (complex) front.push("format: html");
+  const docBody = complex ? htmlOut : ed ? ed.getMarkdown() : "";
+  const body = `---\n${front.join("\n")}\n---\n\n${docBody}\n`;
   const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
   if (!r.ok) return status("Error: " + (r.error || "?"));
-  status("Saved → " + r.file);
+  status("Saved → " + r.file + (complex ? " (HTML — complex layout)" : ""));
+  ed = null;
   editing(null);
   loadItems();
 }
@@ -339,10 +367,10 @@ const section = (label, type, key) =>
     ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
   </div>`;
 const editorPanel = () => {
-  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
-  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
-    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
-    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px" value=${e.body}></textarea>
+  const e = editing(); // inputs uncontrolled (read on Save); RTEPro mounts into #mg-editor
+  return html`<div class="p-3 mb-2" style="border:1px solid var(--border,#232a36);border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} style="max-width:200px" /><input id="mg-title" class="form-control" placeholder="Title" value=${e.title || ""} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <div id="mg-editor"></div>
     <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
   </div>`;
 };

package/templates/starter/setup/index.html

@@ -40,6 +40,7 @@
       });
     })();
   </script>
+  <script src="https://cdn.jsdelivr.net/npm/rte-rich-text-editor-pro@1/rte-pro.js"></script>
   <script type="module" src="/setup.js"></script>
 </body>
 </html>

package/templates/starter/setup/setup.js

@@ -300,24 +300,52 @@ async function buyCredits(amountUsd) {
   }
 }
 const items = signal({ pages: [], posts: [] });
-const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
+let ed = null; // live RTEPro instance for the open editor
 const loadItems = async () => items(await (await fetch("/setup/content")).json());
+// raw .md → { title, body, isHtml }; RTEPro takes markdown directly (setMarkdown),
+// so no markdown library is needed.
+function parseDoc(raw) {
+  const fm = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);
+  const front = fm ? fm[1] : "";
+  const title = ((front.match(/^title:\s*(.+)$/m) || [])[1] || "").trim();
+  return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
+}
+function mountEditor(doc) {
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  if (doc && doc.isHtml) ed.setHTML(doc.body || "");
+  else ed.setMarkdown((doc && doc.body) || "");
+}
 async function editItem(type, slug) {
   const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
-  editing({ type, slug, body: d.body || "", isNew: false });
+  const doc = parseDoc(d.body || "");
+  editing({ type, slug, title: doc.title, isNew: false });
+  queueMicrotask(() => mountEditor(doc));
 }
 function newItem(type) {
-  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
-  editing({ type, slug: "", body, isNew: true });
+  editing({ type, slug: "", title: "", isNew: true });
+  queueMicrotask(() => mountEditor({ body: "", isHtml: false }));
+}
+// markdown can't round-trip complex layouts (columns, inline styles, merged cells,
+// embeds) — save those as HTML so they aren't flattened.
+function isComplex(h) {
+  return /\bstyle\s*=\s*["'][^"']*(text-align|column|float|grid|flex|width|height|color|background|font|margin|padding)/i.test(h) || /\b(colspan|rowspan)\b/i.test(h) || /<(u|font|mark|sub|sup|iframe|video|audio|figure)\b/i.test(h) || /class\s*=\s*["'][^"']*(col|grid|row|flex|layout)/i.test(h);
 }
 async function saveItem() {
   const e = editing();
   const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
-  const body = document.querySelector("#mg-body").value;
   if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const title = (document.querySelector("#mg-title").value || "").trim() || slug;
+  const htmlOut = ed ? ed.getHTML() : "";
+  const complex = isComplex(htmlOut);
+  const front = [`title: ${title}`];
+  if (complex) front.push("format: html");
+  const docBody = complex ? htmlOut : ed ? ed.getMarkdown() : "";
+  const body = `---\n${front.join("\n")}\n---\n\n${docBody}\n`;
   const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
   if (!r.ok) return status("Error: " + (r.error || "?"));
-  status("Saved → " + r.file);
+  status("Saved → " + r.file + (complex ? " (HTML — complex layout)" : ""));
+  ed = null;
   editing(null);
   loadItems();
 }
@@ -339,10 +367,10 @@ const section = (label, type, key) =>
     ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
   </div>`;
 const editorPanel = () => {
-  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
-  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
-    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
-    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px" value=${e.body}></textarea>
+  const e = editing(); // inputs uncontrolled (read on Save); RTEPro mounts into #mg-editor
+  return html`<div class="p-3 mb-2" style="border:1px solid var(--border,#232a36);border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} style="max-width:200px" /><input id="mg-title" class="form-control" placeholder="Title" value=${e.title || ""} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <div id="mg-editor"></div>
     <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
   </div>`;
 };