@bygghammar/cms-platform 0.76.0 → 0.77.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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

package/package.json

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