@pramen/cms-editor 0.0.49 → 0.0.51

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/routes/_layout.tsx

@@ -6,6 +6,7 @@ import { Outlet, useNavigate, useRoute } from "@buzola/router";
 import { Button, Card, MoonIcon, SunIcon, Text, Topbar } from "@podoba/react";
 import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
+import { BRAND } from "../brand";
 
 const THEME_KEY = "pramen.cms.theme";
 
@@ -57,11 +58,11 @@ export default function RootLayout() {
           <button
             type="button"
             onClick={guarded(() => navigate("home"))}
-            aria-label="pramen cms — home"
+            aria-label={`${BRAND.spoken} — home`}
             className="flex items-baseline gap-1 rounded-md px-1 py-0.5 transition-colors hover:bg-surface-muted"
           >
-            <span className="text-callout font-bold tracking-[0.01em] text-fg">pramen</span>
-            <span className="text-fg-subtle">· cms</span>
+            <span className="text-callout font-bold tracking-[0.01em] text-fg">{BRAND.name}</span>
+            {BRAND.suffix ? <span className="text-fg-subtle">· {BRAND.suffix}</span> : null}
           </button>
         </Topbar.Brand>
         <Topbar.Nav aria-label="Primary">
@@ -89,8 +90,14 @@ export default function RootLayout() {
           </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
-            // (Navigation API) and fall to the in-app 404, since the path isn't an SPA route.
+            // open them in a new tab. NOT a style choice, and `target: "_self"` alone would not
+            // fix it: `_404.tsx` registers the catch-all `/:__notFound+`, so buzola matches
+            // EVERY same-origin path and intercepts it — a same-tab click and `location.assign`
+            // both land on the in-app 404 (verified). Only a cross-origin url escapes on its own.
+            //
+            // The supported same-tab route is `router.leaveApp(href)` (@buzola/router >= 0.0.16),
+            // which releases one navigation to the browser. This package still pins ^0.0.12, so
+            // adopting it is a version bump plus a `target` option on the config item.
             <a
               key={l.href}
               href={l.href}

package/src/routes/page.tsx

@@ -6,14 +6,14 @@ import { createPage, useNavigate } from "@buzola/router";
 import { Button } from "@podoba/react";
 import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
-import { INSPECTOR_TABS, PageEditor, errMsg, type InspectorTab } from "../components";
+import { PageEditor, errMsg, visibleTabs, type InspectorTab } from "../components";
 import type { BlockType, Page } from "../types";
 
 export default createPage()
   .params({ pageId: "string", tab: "?string" })
   .route("/pages/:pageId")
   .render(function PageEditorRoute({ params }) {
-    const { api, setError, setNavGuard } = useApp();
+    const { api, cms, setError, setNavGuard } = useApp();
     const navigate = useNavigate();
     const [page, setPage] = useState<Page | null>(null);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
@@ -35,8 +35,17 @@ export default createPage()
       return () => { live = false; };
     }, [api, params.pageId, setError]);
 
-    const tab: InspectorTab = INSPECTOR_TABS.includes(params.tab as InspectorTab) ? (params.tab as InspectorTab) : "settings";
+    // The visible set comes from the server (`visibleTabs`), so a deep link to `?tab=i18n`
+    // on a single-locale deployment falls back to settings — and the URL is REWRITTEN to
+    // match. Rendering one tab under another tab's address means a refresh, a Back, or a
+    // shared link all disagree with what is on screen; `setTab` already replaces without
+    // adding a history entry, so reconciling costs nothing.
+    const shown = visibleTabs(cms.multilingual);
+    const tab: InspectorTab = shown.includes(params.tab as InspectorTab) ? (params.tab as InspectorTab) : "settings";
     const setTab = (t: InspectorTab) => navigate("page", { params: { pageId: params.pageId, tab: t }, replace: true });
+    useEffect(() => {
+      if (params.tab !== undefined && params.tab !== tab) setTab(tab);
+    }, [params.tab, tab]);
 
     if (missing) {
       return (

package/src/types.ts

@@ -5,9 +5,32 @@
 /** 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`, and `group`/`repeater` fields nest further bags. */
-export type FieldValue = JsonValue | Media | FieldValues | FieldValue[];
+ * 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 {
@@ -103,8 +126,36 @@ 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[];
+}
+
+/** What the server says this deployment supports (mirror of `listCmsCapabilities`).
+ *
+ * Server-declared, like a collection's `supports: [...]`: the editor asks what exists
+ * rather than being configured to hide things locally, so the chrome and the data cannot
+ * disagree. `multilingual` is the derived answer to the question the UI actually asks. */
+export interface CmsCapabilities {
+  /** Declared locales, most-preferred first. */
+  locales: string[];
+  /** The locale a page gets when created without one — `locales[0]`. */
+  defaultLocale: string;
+  /** More than one declared locale. Gates the whole i18n surface. */
+  multilingual: boolean;
 }
 
+/** Used until `listCmsCapabilities` answers, and when it cannot (an older server). Assumes
+ * MONOLINGUAL: a hidden i18n surface on a multilingual site is recoverable by reloading,
+ * where a half-rendered one on a single-locale site is what this replaced. */
+export const DEFAULT_CAPABILITIES: CmsCapabilities = { locales: ["en"], defaultLocale: "en", multilingual: false };
+
+/** Mirror of @pramen/cms `CollectionFeature`. */
+export type CollectionFeature = "drafts" | "scheduling" | "revisions" | "preview";
+
 export interface Page {
   id: string;
   typeId: string;