@pramen/cms-editor 0.0.48 → 0.0.50

package/src/fields.tsx

@@ -3,13 +3,19 @@
 
 import { Button, Heading, Input, ModalDialog, ModalOverlay, ModalSurface, Text, Textarea } from "@podoba/react";
 import { BlockEditor } from "@podoba/react/editor";
+import { generateHTML, generateJSON } from "@tiptap/core";
+import Highlight from "@tiptap/extension-highlight";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import StarterKit from "@tiptap/starter-kit";
 import { useEffect, useRef, useState, type DragEvent, type ReactNode } from "react";
 import type { Api } from "./api";
-import type { FieldDefinition, Media } from "./types";
+import { isRichTextDoc, richTextToPlainText } from "./rich-text";
+import type { FieldDefinition, FieldValue, FieldValues, Media, RichTextDoc } from "./types";
 
 // Tokenized bare control (podoba's filled-field skin) for the native inputs that
 // don't map cleanly onto a podoba primitive (number/date/select/file).
-const CONTROL = "h-10 w-full rounded-lg border border-border bg-surface-card px-4 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus:border-brand-green";
+export const CONTROL = "h-10 w-full rounded-lg border border-border bg-surface-card px-4 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus:border-brand-green";
 
 function FieldShell({ label, children }: { label: ReactNode; children: ReactNode }) {
   return (
@@ -33,7 +39,7 @@ function FieldShell({ label, children }: { label: ReactNode; children: ReactNode
  * Returns "" for anything Date can't parse — a legacy or hand-written column value must
  * not reach the input as `NaN-NaN-NaNTNaN:NaN`, which the browser silently discards.
  */
-function toLocalInput(value: string): string {
+export function toLocalInput(value: string): string {
   const d = new Date(value);
   if (Number.isNaN(d.getTime())) return "";
   const pad = (n: number) => String(n).padStart(2, "0");
@@ -41,12 +47,12 @@ function toLocalInput(value: string): string {
 }
 
 /** A `datetime-local` string (local wall clock) -> the UTC ISO instant we store. */
-function fromLocalInput(local: string): string | null {
+export function fromLocalInput(local: string): string | null {
   const at = new Date(local);
   return Number.isNaN(at.getTime()) ? null : at.toISOString();
 }
 
-function formatWhen(value: string): string {
+export function formatWhen(value: string): string {
   const at = new Date(value);
   return Number.isNaN(at.getTime()) ? value : at.toLocaleString();
 }
@@ -147,8 +153,8 @@ function PublishControl({ value, onChange }: { value: string; onChange: (v: stri
   );
 }
 
-export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefinition[]; value: Record<string, unknown>; onChange: (v: Record<string, unknown>) => void; api: Api }) {
-  const set = (name: string, v: unknown) => onChange({ ...value, [name]: v });
+export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefinition[]; value: FieldValues; onChange: (v: FieldValues) => void; api: Api }) {
+  const set = (name: string, v: FieldValue) => onChange({ ...value, [name]: v });
   return (
     <div className="flex flex-col gap-4">
       {schema.map((def) => (
@@ -171,13 +177,13 @@ export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefin
  * accessible-name computation via `aria-labelledby`. Those three go through the bare
  * `CONTROL` skin instead, the same way `number`/`date` already do.
  */
-function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api; hideLabelAs?: string; siblings?: Record<string, unknown> }) {
+function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def: FieldDefinition; value: FieldValue; onChange: (v: FieldValue) => void; api: Api; hideLabelAs?: string; siblings?: FieldValues }) {
   const label: ReactNode = hideLabelAs !== undefined ? undefined : (
     <>
       {def.label ?? def.name} {def.required ? <span className="text-danger">*</span> : null}
     </>
   );
-  const asText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
+  const asText = (v: FieldValue) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
   switch (def.type) {
     case "text":
     case "url": {
@@ -195,11 +201,11 @@ function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def:
         <Textarea label={label} value={asText(value)} onChange={onChange} />
       );
     case "richtext":
-      // A rich-text value is an HTML string (round-trips with the site's set:html
-      // renderers). A legacy object value isn't editable here — fall back to raw text.
+      // A rich-text value is a document tree. A legacy HTML string still opens (it seeds
+      // the editor as-is) and is upgraded to a doc by the first save.
       return (
         <FieldShell label={label}>
-          <RichText value={typeof value === "string" ? value : ""} onChange={onChange as (v: string) => void} />
+          <RichText value={value as RichTextDoc | string | null} onChange={onChange as (v: RichTextDoc) => void} />
         </FieldShell>
       );
     case "number":
@@ -258,12 +264,12 @@ function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def:
       return (
         <FieldShell label={label}>
           <div className="rounded-lg border border-border bg-surface-muted p-3.5">
-            <FieldForm schema={def.fields ?? []} value={(value as Record<string, unknown>) ?? {}} onChange={onChange as (v: Record<string, unknown>) => void} api={api} />
+            <FieldForm schema={def.fields ?? []} value={(value as FieldValues) ?? {}} onChange={onChange as (v: FieldValues) => void} api={api} />
           </div>
         </FieldShell>
       );
     case "repeater":
-      return <Repeater def={def} value={(value as Record<string, unknown>[]) ?? []} onChange={onChange as (v: unknown[]) => void} api={api} label={label} />;
+      return <Repeater def={def} value={(value as FieldValues[]) ?? []} onChange={onChange as (v: FieldValues[]) => void} api={api} label={label} />;
     default:
       return null;
   }
@@ -271,13 +277,90 @@ function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def:
 
 // --- rich text (WYSIWYG) --------------------------------------------------------------
 // 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.
+// block conversion, inline bubble toolbar.
+//
+// The STORED value is a document tree (`RichTextDoc`), never HTML. BlockEditor's own
+// value contract is an HTML string — its docs call that presentation-only — so the
+// conversion happens here, at the boundary, and the HTML never leaves this component:
+// seeded from the stored doc on mount, converted back to a doc on every change.
+//
+// The extension set MUST match BlockEditor's, or a round-trip silently drops whatever
+// only its schema knows (task lists, highlights). Kept beside it here for that reason.
+const RT_EXTENSIONS = [
+  StarterKit.configure({ heading: { levels: [1, 2, 3] }, link: { openOnClick: false, autolink: true } }),
+  Highlight,
+  TaskList,
+  TaskItem.configure({ nested: true }),
+];
+
+/** Parse editor HTML into a document. Never throws: a parse failure yields an empty
+ * document rather than taking the render down (this runs on every keystroke). */
+function htmlToDoc(html: string): RichTextDoc {
+  try {
+    return generateJSON(html, RT_EXTENSIONS) as RichTextDoc;
+  } catch (e) {
+    console.error("pramen/cms-editor: could not parse editor HTML", e);
+    return { type: "doc", content: [] };
+  }
+}
+
+/** Seed HTML for the editor. A legacy HTML string passes through untouched — that is the
+ * migration ramp (see `RichText`, which upgrades it on mount).
+ *
+ * `generateHTML` throws a RangeError for any node or mark outside RT_EXTENSIONS, and this
+ * runs in a useState initializer with no ErrorBoundary above it — so an un-normalized
+ * document (a custom `richTextSchema`, an import, a bootstrap seed, `ctx.db.exec`) would
+ * throw during render and blank the whole SPA, not just this field. Fail to an empty
+ * editor and say so instead. */
+function docToEditorHtml(value: RichTextDoc | string | null | undefined): string {
+  if (typeof value === "string") return value;
+  if (!isRichTextDoc(value)) return "";
+  try {
+    return generateHTML(value, RT_EXTENSIONS);
+  } catch (e) {
+    console.error("pramen/cms-editor: rich-text document uses nodes this editor cannot render", e);
+    return "";
+  }
+}
+
+export function RichText({ value, onChange }: { value: RichTextDoc | string | null; onChange: (v: RichTextDoc) => void }) {
+  // BlockEditor requires its own HTML echoed back VERBATIM — normalising in render would
+  // re-seed the document on every keystroke and throw the caret back to the start. So the
+  // HTML lives in local state and the doc goes upward.
+  const [html, setHtml] = useState(() => docToEditorHtml(value));
+  const emitted = useRef<RichTextDoc | null>(null);
+
+  // Upgrade a legacy HTML value to a document AS SOON AS IT OPENS, not on first edit of
+  // this field. The server only tolerates a legacy string that is byte-identical to what
+  // is stored, and both renderers emit nothing for a string — so a value that is never
+  // upgraded stays invisible on the site forever. Converting on mount means any ordinary
+  // save (even of a sibling field) writes it back as a document.
+  const upgraded = useRef(false);
+  useEffect(() => {
+    if (upgraded.current || typeof value !== "string" || value === "") return;
+    upgraded.current = true;
+    const doc = htmlToDoc(value);
+    emitted.current = doc;
+    onChange(doc);
+  }, [value, onChange]);
+
+  // Re-seed only when the parent hands us a doc that is not the one we last emitted —
+  // i.e. the form switched to a different block, not our own change coming back around.
+  useEffect(() => {
+    if (value !== null && value === emitted.current) return;
+    setHtml(docToEditorHtml(value));
+    // Only the incoming value should re-seed; `html` is this effect's output, not its input.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const handleChange = (nextHtml: string) => {
+    setHtml(nextHtml);
+    const doc = htmlToDoc(nextHtml);
+    emitted.current = doc;
+    onChange(doc);
+  };
 
-export function RichText({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  return <BlockEditor value={value} onChange={onChange} minHeight={180} placeholder="Write, or press '/' for blocks…" />;
+  return <BlockEditor value={html} onChange={handleChange} minHeight={180} placeholder="Write, or press '/' for blocks…" />;
 }
 
 /**
@@ -292,7 +375,7 @@ export function RichText({ value, onChange }: { value: string; onChange: (v: str
  * Reordering is drag-and-drop from the ⠿ handle, mirroring the block canvas. ↑/↓ stay,
  * because dragging is unavailable to keyboard users and awkward on touch.
  */
-function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: ReactNode }) {
+function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: FieldValues[]; onChange: (v: FieldValues[]) => void; api: Api; label: ReactNode }) {
   const items = Array.isArray(value) ? value : [];
   const fields = def.fields ?? [];
   // One field, and not itself a tall control — the case where the card is pure overhead.
@@ -300,7 +383,7 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
 
   const [drag, setDrag] = useState<{ from: number; over: number } | null>(null);
 
-  const upd = (i: number, v: Record<string, unknown>) => onChange(items.map((it, j) => (j === i ? v : it)));
+  const upd = (i: number, v: FieldValues) => onChange(items.map((it, j) => (j === i ? v : it)));
   const add = () => onChange([...items, {}]);
   const del = (i: number) => onChange(items.filter((_, j) => j !== i));
   const moveTo = (from: number, to: number) => {
@@ -322,12 +405,16 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
    * instead titled every slide with the uuid of its image, which is worse than no summary
    * at all — the point is to tell two rows apart at a glance.
    */
-  const summarise = (it: Record<string, unknown>): string => {
+  const summarise = (it: FieldValues): string => {
     const readable = ["text", "textarea", "richtext", "select", "url"];
     for (const f of fields) {
       if (!readable.includes(f.type)) continue;
       const v = it[f.name];
-      if (typeof v === "string" && v.trim()) return v.replace(/<[^>]+>/g, " ").trim().slice(0, 80);
+      // A `richtext` value is a document tree, so a string check alone would skip the one
+      // prose field an item has — exactly the row this summary exists to distinguish.
+      const text = isRichTextDoc(v) ? richTextToPlainText(v) : typeof v === "string" ? v.replace(/<[^>]+>/g, " ") : "";
+      const trimmed = text.replace(/\s+/g, " ").trim();
+      if (trimmed) return trimmed.slice(0, 80);
     }
     return "";
   };
@@ -545,7 +632,7 @@ function SlugField({ def, label, value, source, onChange }: { def: FieldDefiniti
 // A `select` field. Static `options` render as-is; when `optionsFrom` is set, the options are
 // fetched once from that query handler (returns `{ value, label }[]`) — e.g. a live list of
 // campaigns — so the editor never has to hardcode or copy identifiers by hand.
-function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: unknown) => void; api: Api; ariaLabel?: string }) {
+function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: FieldValue) => void; api: Api; ariaLabel?: string }) {
   const [dyn, setDyn] = useState<{ value: string; label: string }[] | null>(null);
   const from = def.optionsFrom;
   useEffect(() => {

package/src/rich-text.ts

@@ -0,0 +1,30 @@
+// Rich-text helpers for the editor. Local mirrors of the @pramen/cms functions, kept here
+// because the editor is a self-contained browser app with no server-package dependency —
+// it speaks to the CMS purely over HTTP (see types.ts).
+
+import type { RichTextDoc, RichTextNode } from "./types";
+
+/** Is this value a rich-text document (rather than a legacy HTML string or a plain bag)? */
+export function isRichTextDoc(v: unknown): v is RichTextDoc {
+  return typeof v === "object" && v !== null && !Array.isArray(v) && (v as RichTextDoc).type === "doc";
+}
+
+/** The block-level node types that end a line when flattening to plain text. */
+const BLOCK_TYPES = new Set(["paragraph", "heading", "listItem", "taskItem", "blockquote", "codeBlock", "horizontalRule"]);
+
+/** Flatten a rich-text document to plain text — for list cells and collapsed-block
+ * previews, which want the words without the structure. Mirrors `richTextToPlainText`
+ * in @pramen/cms. */
+export function richTextToPlainText(value: RichTextDoc | null | undefined): string {
+  const parts: string[] = [];
+  const walk = (nodes: readonly RichTextNode[]): void => {
+    for (const node of nodes) {
+      if (node.type === "text") parts.push(node.text ?? "");
+      else if (node.type === "hardBreak") parts.push("\n");
+      if (node.content) walk(node.content);
+      if (BLOCK_TYPES.has(node.type)) parts.push("\n");
+    }
+  };
+  walk(value?.content ?? []);
+  return parts.join("").replace(/\n{2,}/g, "\n").trim();
+}

package/src/types.ts

@@ -2,6 +2,47 @@
 // @pramen/cms) so the editor stays a self-contained browser app with no server-package
 // dependency — it speaks to the CMS purely over HTTP.
 
+/** Any JSON value — the wire form of everything the CMS stores. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+
+/** A rich-text document — the editor's structured JSON. Mirrors `RichTextDoc` in
+ * @pramen/cms; a `richtext` field is this tree, never an HTML string. */
+export interface RichTextDoc {
+  type: "doc";
+  content?: RichTextNode[];
+}
+
+/** One node in a {@link RichTextDoc}. */
+export interface RichTextNode {
+  type: string;
+  content?: RichTextNode[];
+  text?: string;
+  marks?: RichTextMark[];
+  attrs?: Record<string, JsonValue>;
+}
+
+/** An inline mark on a text node. */
+export interface RichTextMark {
+  type: string;
+  attrs?: Record<string, JsonValue>;
+}
+
+/** One authored field value. Mirrors `FieldValue` in @pramen/cms: a `"media"` field
+ * arrives resolved to a `Media`, a `"richtext"` field is a `RichTextDoc`, and
+ * `group`/`repeater` fields nest further bags. */
+export type FieldValue = JsonValue | Media | RichTextDoc | FieldValues | FieldValue[];
+
+/** A block / collection / page `fields` bag — field name -> authored value. */
+export interface FieldValues {
+  [field: string]: FieldValue;
+}
+
+/** The JSON body of an editor RPC call: an object of values, any of which may be
+ * omitted (an absent key is simply not sent). */
+export interface RpcInput {
+  [key: string]: FieldValue | undefined;
+}
+
 export type FieldType =
   | "text"
   | "textarea"
@@ -25,7 +66,7 @@ export interface FieldDefinition {
   label?: string;
   type: FieldType;
   required?: boolean;
-  default?: unknown;
+  default?: FieldValue;
   fields?: FieldDefinition[];
   min?: number;
   max?: number;
@@ -47,7 +88,7 @@ export interface RegionDefinition {
 export interface DefaultBlockDefinition {
   region: string;
   blockTypeSlug: string;
-  fields?: Record<string, unknown>;
+  fields?: FieldValues;
 }
 
 export interface BlockType {
@@ -85,8 +126,17 @@ export interface CollectionMeta {
    * from this to open/save/delete it. */
   idField: string;
   orderBy?: { column: string; dir?: "asc" | "desc" };
+  /** The workflow features the collection opted into server-side (`supports`), e.g.
+   * `["drafts", "scheduling"]`. Carried here so this mirror stays faithful to
+   * `CollectionMeta`. The editor renders the matching affordances (publish/unpublish, a
+   * schedule picker, a preview link, a revision list) in `CollectionWorkflow`; an empty
+   * list renders none of them. */
+  supports?: CollectionFeature[];
 }
 
+/** Mirror of @pramen/cms `CollectionFeature`. */
+export type CollectionFeature = "drafts" | "scheduling" | "revisions" | "preview";
+
 export interface Page {
   id: string;
   typeId: string;
@@ -94,7 +144,7 @@ export interface Page {
   slug: string;
   status: string;
   locale: string;
-  fields?: Record<string, unknown> | null; // content-type-level structured data (fieldsSchema)
+  fields?: FieldValues | null; // content-type-level structured data (fieldsSchema)
   translationGroupId?: string | null;
   metaTitle?: string | null;
   metaDescription?: string | null;
@@ -122,13 +172,13 @@ export interface RenderedBlock {
   block_id: string; // block instance id (edit)
   block_type: string;
   title: string | null;
-  fields: Record<string, unknown>;
+  fields: FieldValues;
   is_shared: boolean;
   pending?: boolean; // optimistic placeholder — not yet persisted (temp ids, no getBlock)
 }
 
 export interface AssembledPage {
-  page: Page & { translations?: { locale: string; slug: string }[]; seo?: Record<string, unknown> };
+  page: Page & { translations?: { locale: string; slug: string }[]; seo?: FieldValues };
   regions: Record<string, RenderedBlock[]>;
 }