@standhigher/puck-page-builder 0.12.6 → 0.12.7

package/dist/index.d.ts

@@ -195,7 +195,7 @@ type EditorContextValue = {
     confirmDeleteBlock(): void;
     deleteBlock(id: string): void;
     moveBlock(id: string, direction: -1 | 1): void;
-    reorderBlock(id: string, beforeId: string): void;
+    reorderBlock(id: string, beforeId?: string): void;
     updateBlockProps(id: string, props: Record<string, JsonValue>): void;
     updateBlockPresentation(id: string, presentation: Pick<BlockNode, "variant" | "style">): void;
     undo(): void;

package/dist/index.js

@@ -759,11 +759,17 @@ function EditorProvider({ initialDocument, registry, policy, loadState = "ready"
       reorderBlock: (id, beforeId) => {
         if (!editable || id === beforeId) return;
         const source = history.document.blocks.find((block) => block.id === id);
+        if (!source || !canDragBlock(source, registry?.getBlock(source.type), policy)) return;
         const withoutSource = history.document.blocks.filter((block) => block.id !== id);
-        const targetIndex = withoutSource.findIndex((block) => block.id === beforeId);
-        if (!source || targetIndex < 0 || !canDragBlock(source, registry?.getBlock(source.type), policy)) return;
         const blocks = [...withoutSource];
-        blocks.splice(targetIndex, 0, source);
+        if (beforeId) {
+          const targetIndex = withoutSource.findIndex((block) => block.id === beforeId);
+          if (targetIndex < 0) return;
+          blocks.splice(targetIndex, 0, source);
+        } else {
+          blocks.push(source);
+        }
+        if (blocks.every((block, index) => block.id === history.document.blocks[index]?.id)) return;
         replace({ ...history.document, blocks }, id);
       },
       updateBlockProps,
@@ -966,6 +972,29 @@ import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } fro
 function nearestBlockIdAtY(blocks, y) {
   return blocks.find((block) => y < block.top + block.height / 2)?.id;
 }
+function libraryTypesInDocumentOrder(blockTypes, blocks) {
+  const allowed = new Set(blockTypes);
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = [];
+  for (const block of blocks) {
+    if (!allowed.has(block.type) || seen.has(block.type)) continue;
+    ordered.push(block.type);
+    seen.add(block.type);
+  }
+  for (const type of blockTypes) {
+    if (!seen.has(type)) ordered.push(type);
+  }
+  return ordered;
+}
+function dropPlacement(clientY, top, height) {
+  if (height <= 0) return "before";
+  return clientY < top + height / 2 ? "before" : "after";
+}
+function beforeIdAfterPlacement(blockIds, targetId, placement) {
+  if (placement === "before") return targetId;
+  const index = blockIds.indexOf(targetId);
+  return index < 0 ? targetId : blockIds[index + 1];
+}
 
 // src/editor/shell/CanvasLibraryDropTarget.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1221,6 +1250,9 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   const [leftRailOpen, setLeftRailOpen] = useState4(true);
   const [rightPanelOpen, setRightPanelOpen] = useState4(true);
   const [draggingLibraryType, setDraggingLibraryType] = useState4(null);
+  const [draggingBlockId, setDraggingBlockId] = useState4(null);
+  const draggingBlockIdRef = useRef5(null);
+  const [dropTarget, setDropTarget] = useState4(null);
   const canvasFrameRef = useRef5(null);
   const [canvasMutationVersion, setCanvasMutationVersion] = useState4(0);
   const [canvasResetVersion, setCanvasResetVersion] = useState4(0);
@@ -1313,14 +1345,27 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   if (editor.sessionState !== "active") return /* @__PURE__ */ jsx9(EditorSessionStatus, { state: editor.sessionState, message: editor.sessionMessage });
   const allBlockTypes = ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []];
   const blockTypes = availableBlockTypes ? allBlockTypes.filter((type) => availableBlockTypes.includes(type)) : allBlockTypes;
+  const orderedBlockTypes = libraryTypesInDocumentOrder(blockTypes, editor.document.blocks);
   const addFromLibrary = (type, beforeId) => {
     const id = editor.addBlock(type, beforeId);
     if (id) editor.requestCanvasSelection(id);
   };
+  const clearLibraryDrag = () => {
+    draggingBlockIdRef.current = null;
+    setDraggingLibraryType(null);
+    setDraggingBlockId(null);
+    setDropTarget(null);
+  };
   const cancelLibraryDrop = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    setDraggingLibraryType(null);
+    clearLibraryDrag();
+  };
+  const applyListReorder = (sourceId, targetId, edge) => {
+    const beforeId = beforeIdAfterPlacement(editorRef.current.document.blocks.map((block) => block.id), targetId, edge);
+    editorRef.current.reorderBlock(sourceId, beforeId);
+    editorRef.current.requestCanvasSelection(sourceId);
+    scrollCanvasBlockIntoView(sourceId, canvasFrameRef.current);
   };
   const saveBadgeTone = resolvedSaveState === "failed" ? "critical" : resolvedSaveState === "offline" || resolvedSaveState === "dirty" ? "attention" : "success";
   const saveBadgeLabel = resolvedSaveState === "saving" ? i18n.t("saving") : resolvedSaveState === "failed" ? i18n.t("saveFailed") : resolvedSaveState === "offline" ? i18n.t("offline") : resolvedSaveState === "dirty" ? i18n.t("unsaved") : i18n.t("saved");
@@ -1381,26 +1426,57 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
               /* @__PURE__ */ jsx9(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
               /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
             ] }),
-            blockView === "blocks" ? /* @__PURE__ */ jsx9("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: blockTypes.map((type) => /* @__PURE__ */ jsxs7("div", { className: `pb-document-block-row pb-document-block-row--library ${editor.selectedBlock?.type === type ? "pb-document-block-row--selected" : ""}`, "data-block-type": type, "data-selected": editor.selectedBlock?.type === type, role: "listitem", draggable: editor.canAddBlock(type), "aria-disabled": !editor.canAddBlock(type), "aria-label": `${blockTypeLabel(type, registry)}\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0${editor.selectedBlock?.type === type ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onClick: () => {
-              const block = editor.document.blocks.find((item) => item.type === type);
-              if (!block) return;
-              editor.requestCanvasSelection(block.id);
-              scrollCanvasBlockIntoView(block.id, canvasFrameRef.current);
-            }, onDragStart: (event) => {
-              if (!editor.canAddBlock(type)) {
+            blockView === "blocks" ? /* @__PURE__ */ jsx9("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: orderedBlockTypes.map((type) => {
+              const instance = editor.document.blocks.find((item) => item.type === type);
+              const canAdd = editor.canAddBlock(type);
+              const canReorder = Boolean(instance && editor.canDragBlock(instance.id));
+              const draggable = canAdd || canReorder;
+              const selected = editor.selectedBlock?.type === type;
+              const dropEdge = draggingBlockId && instance && dropTarget?.id === instance.id ? dropTarget.edge : void 0;
+              const actionHint = canReorder && canAdd ? "\uFF0C\u62D6\u62FD\u6392\u5E8F\uFF0C\u6216\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0" : canReorder ? "\uFF0C\u62D6\u62FD\u6392\u5E8F" : canAdd ? "\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0" : "";
+              return /* @__PURE__ */ jsxs7("div", { className: `pb-document-block-row pb-document-block-row--library${selected ? " pb-document-block-row--selected" : ""}${draggingBlockId === instance?.id ? " pb-document-block-row--dragging" : ""}${dropEdge === "before" ? " pb-document-block-row--drop-before" : ""}${dropEdge === "after" ? " pb-document-block-row--drop-after" : ""}`, "data-block-type": type, "data-selected": selected, "data-drop-edge": dropEdge, role: "listitem", draggable, "aria-disabled": !draggable, "aria-label": `${blockTypeLabel(type, registry)}${actionHint}${selected ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onClick: () => {
+                if (!instance) return;
+                editor.requestCanvasSelection(instance.id);
+                scrollCanvasBlockIntoView(instance.id, canvasFrameRef.current);
+              }, onDragStart: (event) => {
+                if (!draggable) {
+                  event.preventDefault();
+                  return;
+                }
+                event.dataTransfer.setData("application/x-page-document-block", type);
+                if (instance && canReorder) {
+                  event.dataTransfer.setData("application/x-page-document-block-id", instance.id);
+                  event.dataTransfer.effectAllowed = canAdd ? "copyMove" : "move";
+                  draggingBlockIdRef.current = instance.id;
+                  setDraggingBlockId(instance.id);
+                } else event.dataTransfer.effectAllowed = "copy";
+                if (canAdd) setDraggingLibraryType(type);
+              }, onDragOver: (event) => {
+                const sourceId = draggingBlockIdRef.current;
+                if (!sourceId || !instance || sourceId === instance.id) return;
+                event.preventDefault();
+                event.stopPropagation();
+                event.dataTransfer.dropEffect = "move";
+                const rect = event.currentTarget.getBoundingClientRect();
+                setDropTarget({ id: instance.id, edge: dropPlacement(event.clientY, rect.top, rect.height) });
+              }, onDragLeave: (event) => {
+                if (instance && !event.currentTarget.contains(event.relatedTarget)) setDropTarget((current) => current?.id === instance.id ? null : current);
+              }, onDrop: (event) => {
+                const sourceId = draggingBlockIdRef.current;
+                if (!sourceId || !instance || sourceId === instance.id) return;
                 event.preventDefault();
-                return;
-              }
-              event.dataTransfer.setData("application/x-page-document-block", type);
-              event.dataTransfer.effectAllowed = "copy";
-              setDraggingLibraryType(type);
-            }, onDragEnd: () => setDraggingLibraryType(null), children: [
-              /* @__PURE__ */ jsxs7("span", { className: "pb-library-block-title", children: [
-                /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
-                /* @__PURE__ */ jsx9("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(DragHandleIcon2, {}) })
-              ] }),
-              /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: type })
-            ] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx9(Text3, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx9("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs7("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => {
+                event.stopPropagation();
+                const rect = event.currentTarget.getBoundingClientRect();
+                applyListReorder(sourceId, instance.id, dropPlacement(event.clientY, rect.top, rect.height));
+                clearLibraryDrag();
+              }, onDragEnd: clearLibraryDrag, children: [
+                /* @__PURE__ */ jsxs7("span", { className: "pb-library-block-title", children: [
+                  /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
+                  /* @__PURE__ */ jsx9("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(DragHandleIcon2, {}) })
+                ] }),
+                /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: type })
+              ] }, type);
+            }) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx9(Text3, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx9("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs7("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => {
               editor.requestCanvasSelection(block.id);
               scrollCanvasBlockIntoView(block.id, canvasFrameRef.current);
             }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/puck-page-builder",
-  "version": "0.12.6",
+  "version": "0.12.7",
   "description": "React PageDocument editor, extension registry, and web renderer for BestTrack page experiences.",
   "type": "module",
   "repository": {

package/src/styles.css

@@ -127,6 +127,9 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-document-block-row--library { width: 100%; flex-direction: column; align-items: flex-start; text-align: left; color: var(--builder-text); font: inherit; cursor: grab; }
 .pb-document-block-row--library:active { cursor: grabbing; }
 .pb-document-block-row--library[aria-disabled="true"] { cursor: default; }
+.pb-document-block-row--dragging { opacity: 0.55; }
+.pb-document-block-row--drop-before { box-shadow: inset 0 3px 0 0 var(--builder-accent); }
+.pb-document-block-row--drop-after { box-shadow: inset 0 -3px 0 0 var(--builder-accent); }
 .pb-document-block-row--library[type="button"] { cursor: pointer; }
 .pb-library-block-title { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--builder-space-2); }
 .pb-library-block-drag-hint { display: inline-flex; color: var(--builder-text-muted); pointer-events: none; }