@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/PageEditorView.tsx

@@ -10,7 +10,6 @@ import {
 } from "@dnd-kit/core";
 import {
   SortableContext,
-  arrayMove,
   sortableKeyboardCoordinates,
   useSortable,
   verticalListSortingStrategy,
@@ -34,8 +33,28 @@ import {
   Globe,
   Pencil,
   Check,
+  Columns3,
+  CornerLeftUp,
+  Plus,
 } from "lucide-react";
 import type { BlockInstance, BlockProps } from "../blocks/types";
+import {
+  ROOT_TARGET,
+  blockColumns,
+  cloneBlockDeep,
+  countBlocksDeep,
+  findBlockDeep,
+  findBlockPath,
+  insertBlockIntoTree,
+  isLayoutBlock,
+  moveBlockInTree,
+  patchBlockInTree,
+  removeBlockFromTree,
+  walkBlockTree,
+  type DropTarget,
+  type MoveRefusal,
+  type InsertRefusal,
+} from "../blocks/block-tree";
 import { subscribeSharedDrafts } from "../cms/shared-draft-store";
 import { SaveGlobalDialog, type SaveGlobalResult } from "./SaveGlobalDialog";
 
@@ -127,6 +146,8 @@ function OutlineRow({
   globalSections,
   labelForType,
   singleBlock = false,
+  depth = 0,
+  onMoveOut,
 }: {
   block: BlockInstance;
   selected: boolean;
@@ -138,6 +159,10 @@ function OutlineRow({
   globalSections: GlobalSectionOption[];
   labelForType: (type: string) => string;
   singleBlock?: boolean;
+  /** Nesting level; 0 at the top of the page. */
+  depth?: number;
+  /** Present when the block sits inside a column. */
+  onMoveOut?: () => void;
 }) {
   const isGlobalRef = block.type === "globalRef";
   const sectionKey = isGlobalRef
@@ -156,6 +181,7 @@ function OutlineRow({
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.5 : 1,
+    marginLeft: depth * 14,
   };
 
   return (
@@ -223,9 +249,26 @@ function OutlineRow({
           {isGlobalRef && (
             <Globe className="size-3 text-ink/40 shrink-0" aria-label="Global block" />
           )}
+          {isLayoutBlock(block) && (
+            <Columns3 className="size-3 text-ink/40 shrink-0" aria-label="Columns container" />
+          )}
         </span>
       )}
 
+      {onMoveOut && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onMoveOut();
+          }}
+          className="text-ink/40 hover:text-ink"
+          title="Move out of the column"
+          aria-label={`Move ${displayName} out of its column`}
+        >
+          <CornerLeftUp className="size-3.5" />
+        </button>
+      )}
+
       <button
         onClick={(e) => {
           e.stopPropagation();
@@ -279,6 +322,127 @@ function OutlineRow({
   );
 }
 
+/* ---------------- Column drop row ---------------- */
+
+/**
+ * One column of a container block, in the outline.
+ *
+ * It is a drop target rather than a draggable: dropping a block here puts it
+ * at the end of that column, which is how a block gets *into* a layout. It is
+ * always shown, empty or not, so the columns a container has are visible
+ * without opening the preview.
+ */
+function ColumnRow({
+  id,
+  index,
+  count,
+  depth,
+  onAdd,
+  adding,
+}: {
+  id: string;
+  index: number;
+  count: number;
+  depth: number;
+  onAdd: () => void;
+  adding: boolean;
+}) {
+  const { setNodeRef, isOver } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ marginLeft: depth * 14 }}
+      className={`flex items-center gap-1.5 border border-dashed px-2 py-1 text-[0.65rem] uppercase tracking-[0.16em] ${
+        isOver ? "border-sea bg-ice/50 text-ink" : "border-ink/15 bg-ice/20 text-ink/45"
+      }`}
+    >
+      <Columns3 className="size-3 shrink-0" />
+      <span className="flex-1 truncate">
+        {`Column ${index + 1}`}
+        <span className="ml-2 normal-case tracking-normal text-ink/35">
+          {count === 0 ? "empty — drop a block here" : `${count} block${count === 1 ? "" : "s"}`}
+        </span>
+      </span>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onAdd();
+        }}
+        className="text-ink/40 hover:text-ink"
+        title={`Add a block to column ${index + 1}`}
+        aria-expanded={adding}
+      >
+        <Plus className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+/* ---------------- Outline model ---------------- */
+
+const COLUMN_ROW_PREFIX = "cms-column:";
+
+type OutlineEntry =
+  | { kind: "block"; id: string; block: BlockInstance; depth: number; target: DropTarget }
+  | {
+      kind: "column";
+      id: string;
+      parentId: string;
+      column: number;
+      count: number;
+      depth: number;
+      target: DropTarget;
+    };
+
+/**
+ * The block tree as one flat list of outline rows.
+ *
+ * Drag and drop works on a single flat sortable list — which is what makes
+ * root-to-column, column-to-column and column-to-root the same gesture — while
+ * `depth` and the column rows keep the nesting readable. Each row carries the
+ * drop target it represents, so nothing has to be parsed back out of an id.
+ */
+function outlineEntries(blocks: BlockInstance[]): OutlineEntry[] {
+  const rows: OutlineEntry[] = [];
+  const visit = (list: BlockInstance[], parentId: string | null, column: number, depth: number) => {
+    list.forEach((block, index) => {
+      rows.push({
+        kind: "block",
+        id: block.id,
+        block,
+        depth,
+        target: { parentId, column, index },
+      });
+      blockColumns(block).forEach((children, columnIndex) => {
+        rows.push({
+          kind: "column",
+          id: `${COLUMN_ROW_PREFIX}${block.id}:${columnIndex}`,
+          parentId: block.id,
+          column: columnIndex,
+          count: children.length,
+          depth: depth + 1,
+          target: { parentId: block.id, column: columnIndex, index: children.length },
+        });
+        visit(children, block.id, columnIndex, depth + 2);
+      });
+    });
+  };
+  visit(blocks, null, 0, 0);
+  return rows;
+}
+
+const MOVE_REFUSED: Record<MoveRefusal, string> = {
+  self: "A container cannot be placed inside itself.",
+  descendant: "A container cannot be placed inside one of its own columns.",
+  "too-deep": "That would nest columns too deeply. Move it somewhere shallower.",
+  missing: "That block is no longer on the page.",
+};
+
+const INSERT_REFUSED: Record<InsertRefusal, string> = {
+  "missing-parent": "That column is no longer on the page.",
+  "too-deep": "That would nest columns too deeply. Add it somewhere shallower.",
+};
+
 /* ---------------- PageEditorView ---------------- */
 
 export function PageEditorView({
@@ -455,7 +619,7 @@ export function PageEditorView({
       if (d?.source !== "lovable-preview") return;
       if (d.type === "ready") setPreviewReady(true);
       if (d.type === "select" && d.blockId) {
-        if (currentBlocks.some((b) => b.id === d.blockId)) setSelectedId(d.blockId);
+        if (findBlockDeep(currentBlocks, d.blockId)) setSelectedId(d.blockId);
       }
     };
     window.addEventListener("message", onMsg);
@@ -471,61 +635,93 @@ export function PageEditorView({
     el?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [selectedId]);
 
-  // Mutations
-  const addBlock = (b: BlockInstance) => {
-    commit([...blocks, b]);
+  // Mutations. Every one of them works on the whole tree, so a block inside a
+  // column behaves exactly like a block at the top of the page.
+  const addBlockAt = (b: BlockInstance, target: DropTarget) => {
+    const result = insertBlockIntoTree(blocks, b, target);
+    if (!result.ok) {
+      notify?.error?.(INSERT_REFUSED[result.reason]);
+      return;
+    }
+    commit(result.blocks);
     setSelectedId(b.id);
   };
+  const addBlock = (b: BlockInstance) => addBlockAt(b, ROOT_TARGET(blocks.length));
   const patchBlock = (id: string, props: BlockProps) => {
-    commit(blocks.map((b) => (b.id === id ? { ...b, props } : b)));
+    commit(patchBlockInTree(blocks, id, (b) => ({ ...b, props })));
   };
   const removeBlock = (id: string) => {
-    commit(blocks.filter((b) => b.id !== id));
+    commit(removeBlockFromTree(blocks, id).blocks);
     if (selectedId === id) setSelectedId(null);
   };
   const duplicateBlock = (id: string) => {
-    const i = blocks.findIndex((b) => b.id === id);
-    if (i < 0) return;
-    const src = blocks[i];
-    const clone: BlockInstance = {
-      ...src,
-      id: uid(src.type),
-      props: structuredClone(src.props ?? {}),
-    };
-    const next = blocks.slice();
-    next.splice(i + 1, 0, clone);
-    commit(next);
+    const path = findBlockPath(blocks, id);
+    const src = findBlockDeep(blocks, id);
+    if (!path || !src) return;
+    // A deep copy: nested blocks get fresh ids too, or the two containers would
+    // share children.
+    const clone = cloneBlockDeep(src);
+    const result = insertBlockIntoTree(blocks, clone, { ...path, index: path.index + 1 });
+    if (!result.ok) {
+      notify?.error?.(INSERT_REFUSED[result.reason]);
+      return;
+    }
+    commit(result.blocks);
     setSelectedId(clone.id);
   };
   const renameBlock = (id: string, name: string) => {
     commit(
-      blocks.map((b) => (b.id === id ? { ...b, ...(name ? { name } : { name: undefined }) } : b)),
+      patchBlockInTree(blocks, id, (b) => ({ ...b, ...(name ? { name } : { name: undefined }) })),
     );
   };
   const toggleVisible = (id: string) => {
     commit(
-      blocks.map((b) => (b.id === id ? { ...b, visible: b.visible === false ? true : false } : b)),
+      patchBlockInTree(blocks, id, (b) => ({ ...b, visible: b.visible === false ? true : false })),
     );
   };
 
+  /** Move a nested block up to sit just after the container it was inside. */
+  const moveOutOfColumn = (id: string) => {
+    const path = findBlockPath(blocks, id);
+    if (!path?.parentId) return;
+    const parentPath = findBlockPath(blocks, path.parentId);
+    if (!parentPath) return;
+    const result = moveBlockInTree(blocks, id, { ...parentPath, index: parentPath.index + 1 });
+    if (!result.ok) {
+      notify?.error?.(MOVE_REFUSED[result.reason]);
+      return;
+    }
+    commit(result.blocks);
+  };
+
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
 
+  const entries = useMemo(() => outlineEntries(blocks), [blocks]);
+
   const onDragEnd = (e: DragEndEvent) => {
     const { active, over } = e;
     if (!over || active.id === over.id) return;
-    const oi = blocks.findIndex((b) => b.id === active.id);
-    const ni = blocks.findIndex((b) => b.id === over.id);
-    if (oi < 0 || ni < 0) return;
-    commit(arrayMove(blocks, oi, ni));
+    const target = entries.find((row) => row.id === String(over.id))?.target;
+    if (!target) return;
+    const result = moveBlockInTree(blocks, String(active.id), target);
+    if (!result.ok) {
+      notify?.error?.(MOVE_REFUSED[result.reason]);
+      return;
+    }
+    commit(result.blocks);
   };
 
-  const selected = useMemo(
-    () => blocks.find((b) => b.id === selectedId) ?? null,
-    [blocks, selectedId],
-  );
+  /** The column a newly picked block should go into, if any. */
+  const [addTarget, setAddTarget] = useState<{ rowId: string; target: DropTarget } | null>(null);
+  useEffect(() => {
+    // The column may have gone away (undo, deletion); do not keep a stale form.
+    if (addTarget && !entries.some((row) => row.id === addTarget.rowId)) setAddTarget(null);
+  }, [entries, addTarget]);
+
+  const selected = useMemo(() => findBlockDeep(blocks, selectedId ?? ""), [blocks, selectedId]);
   const selectedLabel = useMemo(() => {
     if (!selected) return "Nothing selected";
     if (selected.name?.trim()) return selected.name.trim();
@@ -605,17 +801,13 @@ export function PageEditorView({
           });
           // Replace the block on this page with a reference to the new global entry.
           commit(
-            currentBlocks.map((b) =>
-              b.id === selected.id
-                ? {
-                    id: b.id,
-                    type: "globalRef",
-                    name: result.name,
-                    props: { sectionKey: result.key },
-                    visible: b.visible,
-                  }
-                : b,
-            ),
+            patchBlockInTree(currentBlocks, selected.id, (b) => ({
+              id: b.id,
+              type: "globalRef",
+              name: result.name,
+              props: { sectionKey: result.key },
+              visible: b.visible,
+            })),
           );
           notify?.success?.(
             result.kind === "section"
@@ -817,7 +1009,7 @@ export function PageEditorView({
                 <ChevronDown className="size-3" /> {singleBlock ? "Block" : "Page outline"}
               </div>
               <div className="text-[0.65rem] text-ink/40">
-                {singleBlock ? "one block only" : `${blocks.length} blocks`}
+                {singleBlock ? "one block only" : `${countBlocksDeep(blocks)} blocks`}
               </div>
             </div>
             {(!singleBlock || blocks.length === 0) && (
@@ -830,27 +1022,71 @@ export function PageEditorView({
               />
             )}
 
-            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={onDragEnd}
+              accessibility={{
+                screenReaderInstructions: {
+                  draggable:
+                    "Press space to pick up a block. Use the arrow keys to move it — a row labelled Column is a drop target inside a container. Press space to drop, or escape to cancel.",
+                },
+              }}
+            >
               <SortableContext
-                items={blocks.map((b) => b.id)}
+                items={entries.map((row) => row.id)}
                 strategy={verticalListSortingStrategy}
               >
                 <div className="space-y-1">
-                  {blocks.map((b) => (
-                    <OutlineRow
-                      key={b.id}
-                      block={b}
-                      selected={selectedId === b.id}
-                      onSelect={() => selectAndReveal(b.id)}
-                      onDuplicate={() => duplicateBlock(b.id)}
-                      onDelete={() => removeBlock(b.id)}
-                      onToggleVisible={() => toggleVisible(b.id)}
-                      onRename={(name) => renameBlock(b.id, name)}
-                      globalSections={globalSections}
-                      labelForType={labelForType}
-                      singleBlock={singleBlock}
-                    />
-                  ))}
+                  {entries.map((row) =>
+                    row.kind === "block" ? (
+                      <OutlineRow
+                        key={row.id}
+                        block={row.block}
+                        depth={row.depth}
+                        selected={selectedId === row.id}
+                        onSelect={() => selectAndReveal(row.id)}
+                        onDuplicate={() => duplicateBlock(row.id)}
+                        onDelete={() => removeBlock(row.id)}
+                        onToggleVisible={() => toggleVisible(row.id)}
+                        onRename={(name) => renameBlock(row.id, name)}
+                        onMoveOut={
+                          row.target.parentId ? () => moveOutOfColumn(row.id) : undefined
+                        }
+                        globalSections={globalSections}
+                        labelForType={labelForType}
+                        singleBlock={singleBlock}
+                      />
+                    ) : (
+                      <div key={row.id} className="space-y-1">
+                        <ColumnRow
+                          id={row.id}
+                          index={row.column}
+                          count={row.count}
+                          depth={row.depth}
+                          adding={addTarget?.rowId === row.id}
+                          onAdd={() =>
+                            setAddTarget((cur) =>
+                              cur?.rowId === row.id ? null : { rowId: row.id, target: row.target },
+                            )
+                          }
+                        />
+                        {addTarget?.rowId === row.id ? (
+                          <div style={{ marginLeft: row.depth * 14 }}>
+                            <BlockPickerComponent
+                              onAdd={(b) => {
+                                addBlockAt(b, addTarget.target);
+                                setAddTarget(null);
+                              }}
+                              globalSections={globalSections}
+                              templates={templates}
+                              onDeleteTemplate={onDeleteTemplate}
+                            />
+                          </div>
+                        ) : null}
+                      </div>
+                    ),
+                  )}
                 </div>
               </SortableContext>
             </DndContext>