@xiwebdesign/xicms-core 7.8.1 → 7.9.0

package/dist/admin/visual/VisualEditor.js

@@ -282,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;
@@ -365,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;
@@ -377,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
@@ -389,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);
@@ -970,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",
       {