@xiwebdesign/xicms-core 7.8.0 → 7.9.0

package/dist/admin/visual/VisualEditor.js

@@ -21,6 +21,7 @@ import { StyleEditor } from "../blockEditors/StyleEditor.js";
 import { siteLocales, parseLocaleSlugs, localizeBlocks } from "../../i18n/overlay.js";
 import { useEditor } from "../../editor/EditorProvider.js";
 import { AdminModes } from "../../components/EditBar.js";
+import { useBalkOffset } from "../../components/barOffset.js";
 import { aantalWijzigingen, bepaalWijzigingen, GEEN_WIJZIGINGEN } from "./wijzigingen.js";
 import { TranslationPanel } from "./TranslationPanel.js";
 import { PatternInserter } from "../patterns/PatternInserter.js";
@@ -108,6 +109,7 @@ function VisualEditorInner({ onClose }) {
   const canvasRef = useRef(null);
   const [conflict, setConflict] = useState(false);
   const [liveBlocks, setLiveBlocks] = useState(void 0);
+  useBalkOffset(true);
   const { vars: themeVars, darkAuto } = useThemeVars();
   const nestedDialogOpen = useNestedDialogOpen();
   const { containerRef, focusFirst } = useFocusTrap({ isActive: !nestedDialogOpen });
@@ -280,7 +282,13 @@ function VisualEditorInner({ onClose }) {
     [blocks, liveBlocks]
   );
   nietLiveRef.current = wijzigingen.iets;
-  const { publishDraft } = useEditor();
+  const { publishDraft, zetFotoVervanger } = useEditor();
+  useEffect(() => {
+    zetFotoVervanger((field, blockKey) => {
+      if (blockKey) setImgPicker({ key: blockKey, field });
+    });
+    return () => zetFotoVervanger(null);
+  }, [zetFotoVervanger]);
   const laatstGepubliceerd = useRef("");
   useEffect(() => {
     if (!draft) return;
@@ -363,8 +371,12 @@ function VisualEditorInner({ onClose }) {
       setBlokknoppen((v) => v.length === 0 ? v : []);
       return;
     }
+    let veilig = veiligeBovenkant();
+    const herijk = () => {
+      veilig = veiligeBovenkant();
+      meet();
+    };
     const meet = () => {
-      const veilig = veiligeBovenkant();
       const gevonden = [];
       for (const el of Array.from(document.querySelectorAll("[data-xicms-block]"))) {
         const key = el.dataset.xicmsBlock;
@@ -375,6 +387,7 @@ function VisualEditorInner({ onClose }) {
         const type = el.dataset.xicmsBlockType ?? "";
         gevonden.push({
           key,
+          type,
           top: Math.max(r.top + 8, veilig + 8),
           left: Math.max(r.right - 62, 8),
           label: registryRef.current.get(type)?.label ?? type
@@ -387,12 +400,18 @@ function VisualEditorInner({ onClose }) {
         return gevonden;
       });
     };
+    let frame = 0;
+    const meetGepland = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(meet);
+    };
     meet();
-    window.addEventListener("scroll", meet, true);
-    window.addEventListener("resize", meet);
+    window.addEventListener("scroll", meetGepland, { capture: true, passive: true });
+    window.addEventListener("resize", herijk);
     return () => {
-      window.removeEventListener("scroll", meet, true);
-      window.removeEventListener("resize", meet);
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", meetGepland, { capture: true });
+      window.removeEventListener("resize", herijk);
     };
   }, [draft, displayBlocks, registryRef]);
   const [productKnop, setProductKnop] = useState(null);
@@ -806,7 +825,7 @@ function VisualEditorInner({ onClose }) {
     }
     setConflict(false);
   }, [siteId, path, mutateDraft]);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "xicms-ve__shell", role: "group", "aria-label": `Pagina bewerken: ${path}`, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "xicms-ve__shell", "data-xicms-tooling": "", role: "group", "aria-label": `Pagina bewerken: ${path}`, children: [
     /* @__PURE__ */ jsxs("header", { className: "xicms-ve__bar", role: "toolbar", "aria-label": "Beheer", children: [
       /* @__PURE__ */ jsx("span", { className: "xicms-editbar__brand", children: isDemoActive() ? "XiCMS \xB7 demo" : "XiCMS" }),
       /* @__PURE__ */ jsx(
@@ -968,46 +987,120 @@ function VisualEditorInner({ onClose }) {
         }
       }
     ),
-    blokknoppen.map((b) => /* @__PURE__ */ jsxs("div", { className: "xicms-ve-blokknoppen", style: { top: b.top, left: b.left }, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `xicms-ve-blokknop${b.key === selectedKey ? " is-on" : ""}`,
-          title: `Tekst van ${b.label} bewerken`,
-          "aria-label": `Tekst van ${b.label} bewerken`,
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => {
-            wilInlineRef.current = true;
-            setSelectedProduct(null);
-            setSelectedKey(b.key);
-          },
-          children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx("path", { d: "M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" }),
-            /* @__PURE__ */ jsx("path", { d: "M14.5 6.5l3 3" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `xicms-ve-blokknop${b.key === selectedKey && panelOpen ? " is-on" : ""}`,
-          title: `Instellingen van ${b.label}`,
-          "aria-label": `Instellingen van ${b.label}`,
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => {
-            setSelectedProduct(null);
-            setSelectedKey(b.key);
-            setPanelOpen(true);
-          },
-          children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-            /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
-          ] })
-        }
-      )
-    ] }, b.key)),
+    blokknoppen.map((b) => {
+      const i = blocks.findIndex((blok) => blok._key === b.key);
+      const isSymbool = b.type === "symbolRef";
+      return /* @__PURE__ */ jsxs("div", { className: "xicms-ve-blokknoppen", style: { top: b.top, left: b.left }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `xicms-ve-blokknop${b.key === selectedKey ? " is-on" : ""}`,
+            title: `Tekst van ${b.label} bewerken`,
+            "aria-label": `Tekst van ${b.label} bewerken`,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => {
+              wilInlineRef.current = true;
+              setSelectedProduct(null);
+              setSelectedKey(b.key);
+            },
+            children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("path", { d: "M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" }),
+              /* @__PURE__ */ jsx("path", { d: "M14.5 6.5l3 3" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `xicms-ve-blokknop${b.key === selectedKey && panelOpen ? " is-on" : ""}`,
+            title: `Instellingen van ${b.label}`,
+            "aria-label": `Instellingen van ${b.label}`,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => {
+              setSelectedProduct(null);
+              setSelectedKey(b.key);
+              setPanelOpen(true);
+            },
+            children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+              /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+            ] })
+          }
+        ),
+        i >= 0 && /* @__PURE__ */ jsxs("span", { className: "xicms-ve-blokknoppen__meer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-ve-blokknop",
+              title: "Blok omhoog",
+              "aria-label": `${b.label} omhoog`,
+              disabled: i === 0,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => move(i, -1),
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-ve-blokknop",
+              title: "Blok omlaag",
+              "aria-label": `${b.label} omlaag`,
+              disabled: i === blocks.length - 1,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => move(i, 1),
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-ve-blokknop",
+              title: "Blok dupliceren",
+              "aria-label": `${b.label} dupliceren`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => duplicate(i),
+              children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+              ] })
+            }
+          ),
+          isSymbool && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-ve-blokknop",
+              title: "Symbool loskoppelen (wordt een losse kopie)",
+              "aria-label": `${b.label} loskoppelen`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => void detachSymbol(i),
+              children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("path", { d: "M9 12h6M8 7a4 4 0 0 0 0 8M16 7a4 4 0 0 1 0 8" }),
+                /* @__PURE__ */ jsx("path", { d: "M3 3l18 18" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-ve-blokknop xicms-ve-blokknop--gevaar",
+              title: "Blok verwijderen",
+              "aria-label": `${b.label} verwijderen`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => void remove(i),
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M6 6l1 14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-14" }) })
+            }
+          )
+        ] })
+      ] }, b.key);
+    }),
     spots.map((s, i) => /* @__PURE__ */ jsx(
       "button",
       {