@pramen/cms-editor 0.0.41 → 0.0.43

package/src/fields.tsx

@@ -1,8 +1,9 @@
 // Schema-driven field forms: one input per FieldDefinition type, recursively composed for
 // group/repeater. Media fields open a picker (upload + choose from the library).
 
-import { Button, Input, Textarea } from "@podoba/react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Button, Heading, Input, ModalDialog, ModalOverlay, ModalSurface, Text, Textarea } from "@podoba/react";
+import { BlockEditor } from "@podoba/react/editor";
+import { useEffect, useState, type ReactNode } from "react";
 import type { Api } from "./api";
 import type { FieldDefinition, Media } from "./types";
 
@@ -98,104 +99,14 @@ function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value
 }
 
 // --- rich text (WYSIWYG) --------------------------------------------------------------
-// A dependency-free contentEditable editor. Emits an HTML string, so it round-trips with
-// existing rich_text content and every set:html renderer — no value migration, no bundled
-// ProseMirror. TipTap is the upgrade path if tables/embeds are ever needed.
-
-const RT_TOOLS: Array<{ label: string; title: string; run: (exec: (c: string, a?: string) => void) => void }> = [
-  { label: "B", title: "Bold", run: (x) => x("bold") },
-  { label: "I", title: "Italic", run: (x) => x("italic") },
-  { label: "H2", title: "Heading", run: (x) => x("formatBlock", "H2") },
-  { label: "H3", title: "Subheading", run: (x) => x("formatBlock", "H3") },
-  { label: "¶", title: "Paragraph", run: (x) => x("formatBlock", "P") },
-  { label: "• List", title: "Bulleted list", run: (x) => x("insertUnorderedList") },
-  { label: "1. List", title: "Numbered list", run: (x) => x("insertOrderedList") },
-  { label: "Link", title: "Add link", run: (x) => {
-    const raw = window.prompt("Link URL (https://, mailto:, /path)", "https://");
-    if (!raw) return;
-    const url = safeLinkUrl(raw);
-    if (!url) { window.alert("Only http(s), mailto, tel, or relative (/, #) links are allowed."); return; }
-    x("createLink", url);
-  } },
-  { label: "Unlink", title: "Remove link", run: (x) => x("unlink") },
-  { label: "Clear", title: "Clear formatting", run: (x) => x("removeFormat") },
-];
-
-/** Allow-list for a link href: http(s), mailto, tel, or a relative/anchor path.
- * The prefix allow-list inherently rejects `javascript:`/`data:`/`vbscript:` (they
- * don't match), so a bare script URL never reaches execCommand. */
-function safeLinkUrl(raw: string): string | null {
-  const url = raw.trim();
-  return /^(https?:\/\/|mailto:|tel:|\/|#)/i.test(url) ? url : null;
-}
-
-/** NOTE: this is cosmetic paste-cleaning, NOT a security boundary. It cannot be relied
- * on for XSS defense — an editor-role caller can POST any `richtext` value straight to
- * the RPC handler, never touching this editor. Stored-XSS is prevented on the SERVER by
- * sanitizeRichText() in @pramen/cms on write (which also covers raw writes / imports).
- * Here we just tidy obviously-unwanted markup so the editor doesn't render junk. */
-function scrubHtml(html: string): string {
-  return html
-    .replace(/<\s*(script|style)[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, "")
-    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-    .replace(/(href|src)\s*=\s*("javascript:[^"]*"|'javascript:[^']*')/gi, '$1="#"');
-}
+// The `richtext` field is podoba's Notion-style BlockEditor (Tiptap): `/` slash palette,
+// block conversion, inline bubble toolbar. Still an HTML string in/out, so it round-trips
+// with existing rich_text content + every set:html renderer — no value migration. The
+// server's sanitizeRichText() (@pramen/cms) remains the XSS boundary on write; ProseMirror
+// parses HTML to its schema on load, so scripts never survive into the editor either.
 
 export function RichText({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const last = useRef<string>("");
-
-  // Sync only EXTERNAL changes (e.g. switching blocks) into the DOM — never on our own
-  // keystrokes, or the caret jumps to the start on every character.
-  useEffect(() => {
-    const el = ref.current;
-    if (el && value !== last.current) {
-      // Scrub on load too — content may have entered the store via raw writes or imports,
-      // not just this editor. contentEditable requires innerHTML; scrubHtml strips
-      // scripts / inline handlers / javascript: URLs first.
-      el.innerHTML = scrubHtml(value || "");
-      last.current = value || "";
-    }
-  }, [value]);
-
-  const emit = () => {
-    const html = scrubHtml(ref.current?.innerHTML ?? "");
-    last.current = html;
-    onChange(html);
-  };
-  const exec = (command: string, arg?: string) => {
-    ref.current?.focus();
-    document.execCommand(command, false, arg);
-    emit();
-  };
-  // Paste as plain text — avoids importing Word/Docs style-junk into the HTML.
-  const onPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    document.execCommand("insertText", false, e.clipboardData.getData("text/plain"));
-  };
-
-  return (
-    <div className="overflow-hidden rounded-lg border border-border bg-surface-card">
-      <div className="flex flex-wrap gap-0.5 border-b border-border bg-surface-muted px-2 py-1.5">
-        {RT_TOOLS.map((t) => (
-          // preventDefault on mousedown keeps the editor's selection while the button is clicked.
-          <button key={t.label} type="button" className="rounded border-0 bg-transparent px-2.5 py-0.5 text-xs text-fg-muted hover:bg-surface-card hover:text-fg" title={t.title} onMouseDown={(e) => e.preventDefault()} onClick={() => t.run(exec)}>
-            {t.label}
-          </button>
-        ))}
-      </div>
-      <div
-        ref={ref}
-        className="prose prose-sm min-h-[180px] max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
-        contentEditable
-        suppressContentEditableWarning
-        data-placeholder="Write…"
-        onInput={emit}
-        onBlur={emit}
-        onPaste={onPaste}
-      />
-    </div>
-  );
+  return <BlockEditor value={value} onChange={onChange} minHeight={180} placeholder="Write, or press '/' for blocks…" />;
 }
 
 function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: ReactNode }) {
@@ -310,26 +221,36 @@ export function MediaPicker({ api, onClose, onPick }: { api: Api; onClose: () =>
     }
   };
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(20,15,5,0.28)] p-6" onClick={onClose}>
-      <div className="max-h-[86vh] w-full max-w-[680px] overflow-auto rounded-panel border border-border bg-surface-card px-9 py-8 shadow-[0_24px_60px_rgba(30,20,10,0.12)]" onClick={(e) => e.stopPropagation()}>
-        <h2 className="mb-5 text-[28px] font-normal text-fg">Choose <span className="text-fg-subtle">a file</span> from the library</h2>
-        {err ? <div className="my-2 rounded-lg border border-danger bg-surface-card px-3.5 py-2.5 text-[13px] text-danger">{err}</div> : null}
-        <label className="mb-4 flex w-full flex-col gap-2">
-          <span className="text-sm font-medium text-fg">Upload a new file</span>
-          <input type="file" className="text-sm text-fg-muted" disabled={busy} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
-        </label>
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2.5">
-          {media.map((m) => (
-            <div key={m.id} className="cursor-pointer overflow-hidden rounded-lg border border-border bg-surface-card" onClick={() => onPick(m.id)}>
-              {(m.file.contentType ?? "").startsWith("image/") ? <img className="block h-[130px] w-full object-cover" src={api.resolve(`/media/${m.file.key}`)} alt="" /> : <div className="h-[130px] bg-surface-muted" />}
-              <div className="truncate px-2 py-1.5 text-[11px] text-fg-muted">{m.file.filename ?? m.id}</div>
-            </div>
-          ))}
-        </div>
-        <div className="mt-3 text-right">
-          <Button variant="ghost" onPress={onClose}>close</Button>
-        </div>
-      </div>
-    </div>
+    <ModalOverlay isOpen isDismissable onOpenChange={(open) => !open && onClose()}>
+      <ModalSurface className="w-full max-w-[680px] px-9 py-8">
+        <ModalDialog className="max-h-[86vh] overflow-auto outline-none">
+          <Heading level="1" className="mb-5 font-normal">
+            Choose <span className="text-fg-subtle">a file</span> from the library
+          </Heading>
+          {err ? (
+            <div className="my-2 rounded-lg border border-danger bg-surface-card px-3.5 py-2.5 text-small text-danger">{err}</div>
+          ) : null}
+          <label className="mb-4 flex w-full flex-col gap-2">
+            <Text size="small" weight="medium">
+              Upload a new file
+            </Text>
+            <input type="file" className="text-small text-fg-muted" disabled={busy} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
+          </label>
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2.5">
+            {media.map((m) => (
+              <div key={m.id} className="cursor-pointer overflow-hidden rounded-lg border border-border bg-surface-card" onClick={() => onPick(m.id)}>
+                {(m.file.contentType ?? "").startsWith("image/") ? <img className="block h-[130px] w-full object-cover" src={api.resolve(`/media/${m.file.key}`)} alt="" /> : <div className="h-[130px] bg-surface-muted" />}
+                <div className="truncate px-2 py-1.5 text-caption text-fg-muted">{m.file.filename ?? m.id}</div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-3 text-right">
+            <Button variant="ghost" onPress={onClose}>
+              close
+            </Button>
+          </div>
+        </ModalDialog>
+      </ModalSurface>
+    </ModalOverlay>
   );
 }

package/src/routes/_layout.tsx

@@ -1,16 +1,26 @@
-// Root layout: the persistent chrome (top bar + tab nav + global error banner) wrapped
-// around every route via <Outlet />. Tab highlighting is derived from the current path,
-// so a deep link or refresh lands with the right tab lit.
+// Root layout: the persistent chrome (podoba Topbar + tab nav + global error banner)
+// wrapped around every route via <Outlet />. Tab highlighting is derived from the
+// current path, so a deep link or refresh lands with the right tab lit.
 
 import { Outlet, useNavigate, useRoute } from "@buzola/router";
-import { Button } from "@podoba/react";
+import { Badge, Button, Card, MoonIcon, SunIcon, Text, Topbar } from "@podoba/react";
+import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
 
+const THEME_KEY = "pramen.cms.theme";
+
 export default function RootLayout() {
   const { cfg, isAdmin, collections, error, reconfigure } = useApp();
   const navigate = useNavigate();
   const { pathname } = useRoute();
 
+  // Dark mode: podoba tokens flip under `[data-theme="dark"]` — no `dark:` prefixes.
+  const [theme, setTheme] = useState(() => (typeof localStorage !== "undefined" ? localStorage.getItem(THEME_KEY) ?? "light" : "light"));
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme === "dark" ? "dark" : "light";
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
   // The active collection slug, if we're under /collections/:slug(/...).
   const collectionSlug = pathname.startsWith("/collections/") ? pathname.split("/")[2] : undefined;
 
@@ -22,8 +32,7 @@ export default function RootLayout() {
     : pathname.startsWith("/settings") ? "settings"
     : "";
 
-  const tabCls = (key: string) =>
-    active === key ? "bg-surface-muted text-fg" : "text-fg-muted";
+  const tabCls = (key: string) => (active === key ? "bg-surface-muted text-fg" : "text-fg-muted");
 
   // Host-configured links to companion tools (e.g. a curation page), from /config.js.
   const extraNav = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.extraNav ?? [] : [];
@@ -31,26 +40,37 @@ export default function RootLayout() {
   const hidePages = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.hidePages === true : false;
 
   return (
-    <>
-      <div className="sticky top-0 z-10 flex items-center gap-4 bg-surface px-7 py-4">
-        <span className="text-[15px] font-bold tracking-[0.01em] text-fg">
-          pramen <span className="font-normal text-fg-subtle">· cms</span>
-        </span>
-        <span className="flex-1" />
-        <nav className="flex items-center gap-0.5">
+    // Page-level surface so the whole viewport (not just the topbar + cards) flips
+    // under `[data-theme="dark"]` — otherwise the body stays white in dark mode.
+    <div className="min-h-screen bg-surface text-fg">
+      <Topbar className="sticky top-0 z-10 bg-surface px-7">
+        <Topbar.Brand>
+          <span className="text-callout font-bold tracking-[0.01em] text-fg">pramen</span>
+          <span className="text-fg-subtle">· cms</span>
+        </Topbar.Brand>
+        <Topbar.Nav aria-label="Primary">
           {hidePages ? null : (
-            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>Pages</Button>
+            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>
+              Pages
+            </Button>
           )}
           {collections.map((c) => (
             <Button key={c.slug} variant="ghost" size="sm" className={tabCls(`col:${c.slug}`)} onPress={() => navigate("collection", { params: { slug: c.slug } })}>
-              {c.icon ? `${c.icon} ` : ""}{c.pluralLabel}
+              {c.icon ? `${c.icon} ` : ""}
+              {c.pluralLabel}
             </Button>
           ))}
-          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>Media</Button>
+          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>
+            Media
+          </Button>
           {isAdmin ? (
-            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>Users</Button>
+            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>
+              Users
+            </Button>
           ) : null}
-          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={() => navigate("settings")}>Settings</Button>
+          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={() => navigate("settings")}>
+            Settings
+          </Button>
           {extraNav.map((l) => (
             // Companion tools live OUTSIDE this SPA (a separate static page/worker route), so
             // open them in a new tab. A same-tab click would be caught by the client router
@@ -60,19 +80,35 @@ export default function RootLayout() {
               href={l.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="rounded-md px-2.5 py-1.5 text-sm text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg"
+              className="rounded-md px-2.5 py-1.5 text-small text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg"
             >
               {l.label}
             </a>
           ))}
-        </nav>
-        <span className="ml-3 text-fg-subtle">{cfg.tenant}</span>
-        <Button variant="ghost" size="sm" onPress={reconfigure}>sign out</Button>
-      </div>
+        </Topbar.Nav>
+        <Topbar.Actions>
+          <Badge color="grey" label={cfg.tenant} />
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+            onPress={() => setTheme(theme === "dark" ? "light" : "dark")}
+          >
+            {theme === "dark" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
+          </Button>
+          <Button variant="ghost" size="sm" onPress={reconfigure}>
+            sign out
+          </Button>
+        </Topbar.Actions>
+      </Topbar>
       {error ? (
-        <div className="mx-7 mt-2 rounded-lg border border-danger bg-surface-card px-4 py-2.5 text-sm text-danger">{error}</div>
+        <Card variant="outlined" padding="none" className="mx-7 mt-2 border-danger px-4 py-2.5">
+          <Text size="small" className="text-danger">
+            {error}
+          </Text>
+        </Card>
       ) : null}
       <Outlet />
-    </>
+    </div>
   );
 }