@bygghammar/cms-platform 0.74.0 → 0.76.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 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.
+
 # Changelog
 
 ## 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.74.0",
+  "version": "0.76.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/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/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/backoffice/inspectors/blocks.tsx

@@ -2413,7 +2413,11 @@ export {
 };
 
 /* ---------------- Countdown ---------------- */
-export function CountdownInspector({ block, patch }: BlockPatchProps) {
+export function CountdownInspector({
+  block,
+  patch,
+  globalSections = [],
+}: BlockPatchProps & { globalSections?: { key: string; name: string }[] }) {
   const p = (block.props ?? {}) as CountdownProps;
   const update = (next: CountdownProps) => patch(next as unknown as BlockProps);
 
@@ -2711,11 +2715,37 @@ export function CountdownInspector({ block, patch }: BlockPatchProps) {
           (v) => update({ ...p, onExpire: v as CountdownProps["onExpire"] }),
         )}
         {p.onExpire === "replace" ? (
-          <TextField
-            label="Global block key to show instead"
-            value={p.expiredSectionKey ?? ""}
-            onChange={(v) => update({ ...p, expiredSectionKey: v })}
-          />
+          globalSections.length ? (
+            <label className="block space-y-1.5">
+              <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+                Global block to show instead
+              </span>
+              <select
+                value={p.expiredSectionKey ?? ""}
+                onChange={(e) => update({ ...p, expiredSectionKey: e.target.value })}
+                className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:border-sea focus:outline-none"
+              >
+                <option value="">— none —</option>
+                {globalSections.map((g) => (
+                  <option key={g.key} value={g.key}>
+                    {g.name} ({g.key})
+                  </option>
+                ))}
+                {p.expiredSectionKey &&
+                !globalSections.some((g) => g.key === p.expiredSectionKey) ? (
+                  <option value={p.expiredSectionKey}>
+                    {p.expiredSectionKey} (missing)
+                  </option>
+                ) : null}
+              </select>
+            </label>
+          ) : (
+            <TextField
+              label="Global block key to show instead"
+              value={p.expiredSectionKey ?? ""}
+              onChange={(v) => update({ ...p, expiredSectionKey: v })}
+            />
+          )
         ) : null}
         {p.onExpire === "revealPage" ? (
           <>

package/src/backoffice/inspectors/index.tsx

@@ -750,7 +750,7 @@ export function BlockInspector({
     case "courseList":
       return <TripListInspector block={block} patch={patch} />;
     case "countdown":
-      return <CountdownInspector block={block} patch={patch} />;
+      return <CountdownInspector block={block} patch={patch} globalSections={globalSections} />;
     case "ctaBanner":
       return <CtaBannerInspector block={block} patch={patch} />;
     case "mediaSplit":

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",