@bygghammar/cms-platform 0.75.0 → 0.77.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.77.0
+
+- Global Sections list: preview thumbnails now use the section's first block type
+  and show a text snippet from the saved content (including Rich text `html`),
+  instead of a blank generic placeholder. Multi-block sections show a count badge.
+- Shared thumbnail: text detection reads `html`, `body`, `lead`, `subtitle` and
+  `heading`, with locale fallback and HTML stripped to plain text.
+
+## 0.76.0
+
+- Rich text editor colours: swatches are now derived from the consuming site's
+  design tokens (brand, accent, ink, paper, tint) plus a neutral row, a custom
+  hex field and a per-browser "recent colours" row.
+- Rich text editor: toolbar buttons for a manual line break (Shift+Enter) and
+  "keep words together" (no wrap), so headings break exactly where you want.
+- Sanitizer allows the `white-space` inline property used by the no-wrap mark.
+
 ## 0.75.0
 
 - Countdown: pick the replacement global block from a dropdown instead of typing its key.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.75.0",
+  "version": "0.77.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/backoffice/GlobalSectionsListView.tsx

@@ -27,6 +27,24 @@ export type GlobalSectionsListDeps = {
   previewSrc: (key: string) => string;
 };
 
+/** Saved sections store an array of block instances; shapes may vary by age. */
+function blockList(blocks: unknown): Record<string, unknown>[] {
+  if (!Array.isArray(blocks)) return [];
+  return blocks.filter((b): b is Record<string, unknown> => !!b && typeof b === "object");
+}
+
+function blockCount(blocks: unknown): number {
+  return blockList(blocks).length;
+}
+
+/** Block type of the first block, so the thumbnail can draw its wireframe. */
+function firstBlockType(blocks: unknown): string | undefined {
+  const first = blockList(blocks)[0];
+  const type = first?.["type"];
+  return typeof type === "string" && type ? type : undefined;
+}
+
+
 /**
  * Library screen listing global sections — reusable groups of blocks that update
  * everywhere at once. All data access and navigation is host-supplied.
@@ -98,7 +116,12 @@ export function GlobalSectionsListView({ deps }: { deps: GlobalSectionsListDeps
                       onClick={() => setPreview({ key: g.key, name: g.name })}
                       className="group relative block"
                     >
-                      <DataThumb data={g.blocks} />
+                      <DataThumb data={g.blocks} blockType={firstBlockType(g.blocks)} />
+                      {blockCount(g.blocks) > 1 && (
+                        <span className="absolute bottom-1 right-1 rounded bg-ink/70 px-1 text-[0.55rem] leading-4 text-white">
+                          {blockCount(g.blocks)}
+                        </span>
+                      )}
                       <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
                         <Eye className="size-4" />
                       </span>

package/src/backoffice/RichTextEditor.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { EditorContent, useEditor, type Editor } from "@tiptap/react";
+import { EditorContent, Extension, useEditor, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Image from "@tiptap/extension-image";
 import TextAlign from "@tiptap/extension-text-align";
@@ -26,6 +26,7 @@ import {
   Minus,
   Quote,
   Redo2,
+  WrapText,
   Strikethrough,
   Subscript as SubIcon,
   Superscript as SupIcon,
@@ -33,9 +34,18 @@ import {
   Underline as UnderlineIcon,
   Undo2,
   Unlink,
+  MoveHorizontal,
 } from "lucide-react";
 import { MediaPickerDialog } from "./inspectors/fields";
 import { sanitizeHtml } from "../html/sanitize-html";
+import {
+  NEUTRAL_SWATCHES,
+  normalizeHex,
+  readRecentColors,
+  rememberRecentColor,
+  resolveThemeSwatches,
+  type EditorSwatch,
+} from "./editor-colors";
 
 const FONTS: { label: string; value: string }[] = [
   { label: "Theme (default)", value: "" },
@@ -50,20 +60,28 @@ const FONTS: { label: string; value: string }[] = [
 
 const SIZES = ["", "12px", "14px", "16px", "18px", "20px", "24px", "30px", "36px", "48px", "60px"];
 
-const SWATCHES = [
-  "#0f1720",
-  "#4b5563",
-  "#9ca3af",
-  "#ffffff",
-  "#2ac4ea",
-  "#d8f2fd",
-  "#afafaf",
-  "#0ea5e9",
-  "#16a34a",
-  "#eab308",
-  "#f97316",
-  "#dc2626",
-];
+/**
+ * `white-space` on the textStyle mark, so a selection can be marked
+ * "keep words together" and never wrap mid-phrase.
+ */
+const WhiteSpace = Extension.create({
+  name: "whiteSpaceTextStyle",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["textStyle"],
+        attributes: {
+          whiteSpace: {
+            default: null,
+            parseHTML: (element: HTMLElement) => element.style.whiteSpace || null,
+            renderHTML: (attributes: Record<string, unknown>) =>
+              attributes.whiteSpace ? { style: `white-space: ${String(attributes.whiteSpace)}` } : {},
+          },
+        },
+      },
+    ];
+  },
+});
 
 function Btn({
   on,
@@ -101,6 +119,26 @@ function Divider() {
   return <span className="mx-1 h-5 w-px bg-ink/10" />;
 }
 
+function SwatchButton({
+  swatch,
+  onPick,
+}: {
+  swatch: EditorSwatch;
+  onPick: (hex: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => onPick(swatch.hex)}
+      className="size-5 border border-ink/15"
+      style={{ background: swatch.hex }}
+      title={`${swatch.label} (${swatch.hex})`}
+      aria-label={`${swatch.label} ${swatch.hex}`}
+    />
+  );
+}
+
 function ColorControl({
   label,
   value,
@@ -113,11 +151,36 @@ function ColorControl({
   onClear: () => void;
 }) {
   const [open, setOpen] = useState(false);
+  const [theme, setTheme] = useState<EditorSwatch[]>([]);
+  const [recent, setRecent] = useState<string[]>([]);
+  const [hexDraft, setHexDraft] = useState("");
+  const [hexError, setHexError] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setTheme(resolveThemeSwatches());
+    setRecent(readRecentColors());
+    setHexDraft(normalizeHex(value) ?? "");
+    setHexError(false);
+  }, [open, value]);
+
+  const apply = (hex: string, close = true) => {
+    const normalized = normalizeHex(hex);
+    if (!normalized) {
+      setHexError(true);
+      return;
+    }
+    onPick(normalized);
+    setRecent(rememberRecentColor(normalized));
+    setHexError(false);
+    if (close) setOpen(false);
+  };
+
   return (
     <div className="relative">
       <button
         type="button"
-        title={label}
+        title={label === "A" ? "Text colour" : "Highlight colour"}
         onMouseDown={(e) => e.preventDefault()}
         onClick={() => setOpen((o) => !o)}
         className="flex h-7 items-center gap-1 border border-transparent px-1.5 text-[0.65rem] uppercase tracking-widest text-ink hover:border-ink/20"
@@ -131,29 +194,79 @@ function ColorControl({
       {open ? (
         <>
           <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div className="absolute left-0 top-8 z-50 w-44 border border-ink/15 bg-white p-2 shadow-lg">
+          <div className="absolute left-0 top-8 z-50 w-56 border border-ink/15 bg-white p-2 shadow-lg">
+            {theme.length ? (
+              <>
+                <p className="mb-1 text-[0.6rem] uppercase tracking-widest text-ink/50">
+                  Site colours
+                </p>
+                <div className="grid grid-cols-6 gap-1">
+                  {theme.map((sw) => (
+                    <SwatchButton key={`theme-${sw.label}`} swatch={sw} onPick={apply} />
+                  ))}
+                </div>
+              </>
+            ) : null}
+
+            <p className="mb-1 mt-2 text-[0.6rem] uppercase tracking-widest text-ink/50">
+              Neutral
+            </p>
             <div className="grid grid-cols-6 gap-1">
-              {SWATCHES.map((c) => (
-                <button
-                  key={c}
-                  type="button"
-                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => {
-                    onPick(c);
-                    setOpen(false);
-                  }}
-                  className="size-5 border border-ink/15"
-                  style={{ background: c }}
-                  title={c}
-                />
+              {NEUTRAL_SWATCHES.map((sw) => (
+                <SwatchButton key={sw.hex} swatch={sw} onPick={apply} />
               ))}
             </div>
-            <div className="mt-2 flex items-center gap-2">
+
+            {recent.length ? (
+              <>
+                <p className="mb-1 mt-2 text-[0.6rem] uppercase tracking-widest text-ink/50">
+                  Recent
+                </p>
+                <div className="grid grid-cols-6 gap-1">
+                  {recent.map((hex) => (
+                    <SwatchButton key={`recent-${hex}`} swatch={{ hex, label: "Recent" }} onPick={apply} />
+                  ))}
+                </div>
+              </>
+            ) : null}
+
+            <p className="mb-1 mt-2 text-[0.6rem] uppercase tracking-widest text-ink/50">
+              Custom
+            </p>
+            <div className="flex items-center gap-2">
               <input
                 type="color"
-                value={value || "#000000"}
-                onChange={(e) => onPick(e.target.value)}
+                value={normalizeHex(value) ?? "#000000"}
+                onChange={(e) => {
+                  setHexDraft(e.target.value);
+                  apply(e.target.value, false);
+                }}
                 className="h-6 w-10 border border-ink/15 bg-white"
+                title="Colour picker"
+              />
+              <input
+                type="text"
+                value={hexDraft}
+                placeholder="#fc7aa7"
+                spellCheck={false}
+                onChange={(e) => {
+                  setHexDraft(e.target.value);
+                  setHexError(false);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    apply(hexDraft);
+                  }
+                }}
+                onBlur={() => {
+                  if (hexDraft.trim()) apply(hexDraft, false);
+                }}
+                className={[
+                  "h-6 w-20 border bg-white px-1 text-xs text-ink focus:outline-none",
+                  hexError ? "border-red-500" : "border-ink/15 focus:border-sea",
+                ].join(" ")}
+                aria-label="Custom hex colour"
               />
               <button
                 type="button"
@@ -167,6 +280,9 @@ function ColorControl({
                 Clear
               </button>
             </div>
+            {hexError ? (
+              <p className="mt-1 text-[0.6rem] text-red-600">Enter a hex colour like #fc7aa7.</p>
+            ) : null}
           </div>
         </>
       ) : null}
@@ -335,6 +451,28 @@ function Toolbar({ editor }: { editor: Editor }) {
       />
       <Divider />
 
+      <Btn
+        on={() => editor.chain().focus().setHardBreak().run()}
+        title="Line break (Shift+Enter)"
+      >
+        <WrapText className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => {
+          const active = editor.getAttributes("textStyle").whiteSpace === "nowrap";
+          editor
+            .chain()
+            .focus()
+            .setMark("textStyle", { whiteSpace: active ? null : "nowrap" })
+            .run();
+        }}
+        active={editor.getAttributes("textStyle").whiteSpace === "nowrap"}
+        title="Keep words together (no line wrap)"
+      >
+        <MoveHorizontal className="size-3.5" />
+      </Btn>
+      <Divider />
+
       <Btn
         on={() => editor.chain().focus().setTextAlign("left").run()}
         active={editor.isActive({ textAlign: "left" })}
@@ -531,6 +669,7 @@ export function RichTextEditor({
       FontFamily,
       FontSize,
       LineHeight,
+      WhiteSpace,
       Highlight.configure({ multicolor: true }),
       TextAlign.configure({ types: ["heading", "paragraph"] }),
       Subscript,

package/src/backoffice/SectionThumb.tsx

@@ -64,6 +64,42 @@ function findImage(node: unknown, depth = 0): string | null {
   return null;
 }
 
+const ENTITIES: Record<string, string> = {
+  "&nbsp;": " ",
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&apos;": "'",
+};
+
+/** Plain-text snippet from sanitized editor HTML (no DOM needed, SSR-safe). */
+function htmlToText(html: string): string {
+  const withBreaks = html.replace(/<(br|\/p|\/h[1-6]|\/li|\/div)[^>]*>/gi, " ");
+  const stripped = withBreaks.replace(/<[^>]*>/g, "");
+  const decoded = stripped
+    .replace(/&nbsp;|&amp;|&lt;|&gt;|&quot;|&#39;|&apos;/gi, (m) => ENTITIES[m.toLowerCase()] ?? m)
+    .replace(/&#(\d+);/g, (_, code: string) => String.fromCodePoint(Number(code)));
+  return decoded.replace(/\s+/g, " ").trim();
+}
+
+/** Text keys, in the order a block would show them. */
+const TEXT_KEYS = ["title", "heading", "name", "label", "eyebrow", "html", "body", "lead", "subtitle"];
+
+/** Picks a string out of a plain string or a localized map (active locale first). */
+function localizedString(value: unknown): string | null {
+  if (typeof value === "string") return value.trim() ? value : null;
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const map = value as Record<string, unknown>;
+  const ordered = ["sv", "en", ...Object.keys(map)];
+  for (const locale of ordered) {
+    const candidate = map[locale];
+    if (typeof candidate === "string" && candidate.trim()) return candidate;
+  }
+  return null;
+}
+
 function findText(node: unknown, depth = 0): string | null {
   if (node == null || depth > 4) return null;
   if (Array.isArray(node)) {
@@ -75,13 +111,16 @@ function findText(node: unknown, depth = 0): string | null {
   }
   if (typeof node !== "object") return null;
   const obj = node as Record<string, unknown>;
-  for (const key of ["title", "name", "label", "eyebrow"]) {
-    const value = obj[key];
-    if (typeof value === "string" && value.trim()) return value;
-    if (value && typeof value === "object") {
-      const sv = (value as Record<string, unknown>).sv;
-      if (typeof sv === "string" && sv.trim()) return sv;
-    }
+  const nested = obj["props"];
+  if (nested && typeof nested === "object") {
+    const found = findText(nested, depth + 1);
+    if (found) return found;
+  }
+  for (const key of TEXT_KEYS) {
+    const raw = localizedString(obj[key]);
+    if (!raw) continue;
+    const text = key === "html" || /<[a-z][^>]*>/i.test(raw) ? htmlToText(raw) : raw.trim();
+    if (text) return text.length > 120 ? `${text.slice(0, 120)}…` : text;
   }
   return null;
 }
@@ -372,7 +411,7 @@ export function DataThumb({
 
   return (
     <div className="relative shrink-0 border border-ink/10 bg-white overflow-hidden" style={style}>
-      {text && !blockType ? (
+      {text ? (
         <div className="flex size-full flex-col justify-center gap-1.5 p-2">
           <div className="h-1 w-6 bg-sea/60" />
           <div className="text-[0.5rem] leading-tight text-ink/70 line-clamp-2 font-serif">

package/src/backoffice/editor-colors.ts

@@ -0,0 +1,130 @@
+/**
+ * Colour palette helpers for the rich text editor.
+ *
+ * The editor swatches are derived from the *consuming site's* design tokens, so
+ * every site automatically offers its own brand colours without configuration.
+ * Tokens may be authored in any colour space (oklch, hsl, hex), so values are
+ * resolved through the browser and normalised to hex, which is what the colour
+ * input and the stored inline styles need.
+ */
+
+export type EditorSwatch = { hex: string; label: string };
+
+/** Site design tokens, in the order they should appear in the picker. */
+const THEME_TOKENS: { token: string; label: string; fallback: string }[] = [
+  { token: "--sea", label: "Brand", fallback: "#fc7aa7" },
+  { token: "--brass", label: "Accent", fallback: "#ca6286" },
+  { token: "--ink", label: "Ink", fallback: "#221b26" },
+  { token: "--paper", label: "Paper", fallback: "#fdf7f8" },
+  { token: "--ice", label: "Tint", fallback: "#f8e7ec" },
+];
+
+/** Neutral + status colours that stay available on every site. */
+export const NEUTRAL_SWATCHES: EditorSwatch[] = [
+  { hex: "#000000", label: "Black" },
+  { hex: "#4b5563", label: "Dark grey" },
+  { hex: "#9ca3af", label: "Grey" },
+  { hex: "#e5e7eb", label: "Light grey" },
+  { hex: "#ffffff", label: "White" },
+  { hex: "#16a34a", label: "Green" },
+  { hex: "#eab308", label: "Yellow" },
+  { hex: "#f97316", label: "Orange" },
+  { hex: "#dc2626", label: "Red" },
+  { hex: "#0ea5e9", label: "Blue" },
+];
+
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/** Normalise user input such as `fc7aa7` or `#FFF` to `#rrggbb`. */
+export function normalizeHex(raw: string): string | null {
+  const v = raw.trim().toLowerCase();
+  const withHash = v.startsWith("#") ? v : `#${v}`;
+  if (!HEX_RE.test(withHash)) return null;
+  if (withHash.length === 4) {
+    const [, r, g, b] = withHash;
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  return withHash;
+}
+
+function toHex(cssColor: string): string | null {
+  if (!cssColor) return null;
+  const direct = normalizeHex(cssColor);
+  if (direct) return direct;
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.fillStyle = "#000000";
+    ctx.fillStyle = cssColor;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    const hex = (n: number) => n.toString(16).padStart(2, "0");
+    return `#${hex(r)}${hex(g)}${hex(b)}`;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve the site theme swatches from the live CSS custom properties. */
+export function resolveThemeSwatches(): EditorSwatch[] {
+  if (typeof document === "undefined") {
+    return THEME_TOKENS.map((t) => ({ hex: t.fallback, label: t.label }));
+  }
+  const probe = document.createElement("span");
+  probe.style.position = "absolute";
+  probe.style.opacity = "0";
+  probe.style.pointerEvents = "none";
+  document.body.appendChild(probe);
+  try {
+    return THEME_TOKENS.map((t) => {
+      probe.style.color = "";
+      probe.style.color = `var(${t.token})`;
+      const computed = getComputedStyle(probe).color;
+      return { hex: toHex(computed) ?? t.fallback, label: t.label };
+    });
+  } catch {
+    return THEME_TOKENS.map((t) => ({ hex: t.fallback, label: t.label }));
+  } finally {
+    probe.remove();
+  }
+}
+
+const RECENT_KEY = "cms.rte.recent-colors";
+const RECENT_MAX = 8;
+
+export function readRecentColors(): string[] {
+  if (typeof localStorage === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(RECENT_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((v): v is string => typeof v === "string")
+      .map((v) => normalizeHex(v))
+      .filter((v): v is string => Boolean(v))
+      .slice(0, RECENT_MAX);
+  } catch {
+    return [];
+  }
+}
+
+export function rememberRecentColor(hex: string): string[] {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return readRecentColors();
+  const next = [normalized, ...readRecentColors().filter((c) => c !== normalized)].slice(
+    0,
+    RECENT_MAX,
+  );
+  if (typeof localStorage !== "undefined") {
+    try {
+      localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+    } catch {
+      /* storage unavailable — recents are a convenience only */
+    }
+  }
+  return next;
+}

package/src/html/sanitize-html.ts

@@ -48,6 +48,7 @@ const ALLOWED_CSS = new Set([
   "letter-spacing",
   "text-decoration",
   "text-transform",
+  "white-space",
   "width",
   "height",
   "min-width",