@xiwebdesign/xicms-core 7.8.1 → 7.9.1

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,24 +387,35 @@ 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),
+          // Vanaf de RECHTERkant verankerd: het palet klapt uit en moet die ruimte naar LINKS
+          // pakken — een full-width blok eindigt op de viewportrand, rechts is daar per definitie
+          // geen plek. Met een left-anker schoof het uitgeklapte deel het scherm af en leek de
+          // hele uitbreiding gewoon niet te bestaan.
+          right: Math.max(window.innerWidth - r.right + 8, 8),
           label: registryRef.current.get(type)?.label ?? type
         });
       }
       setBlokknoppen((vorige) => {
-        if (vorige.length === gevonden.length && vorige.every((v, i) => v.key === gevonden[i].key && v.top === gevonden[i].top && v.left === gevonden[i].left)) {
+        if (vorige.length === gevonden.length && vorige.every((v, i) => v.key === gevonden[i].key && v.top === gevonden[i].top && v.right === gevonden[i].right)) {
           return vorige;
         }
         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);
@@ -410,9 +431,9 @@ function VisualEditorInner({ onClose }) {
       const id = doel.dataset.xicmsProduct;
       if (!id) return;
       const r = doel.getBoundingClientRect();
-      setProductKnop(
-        (v) => v && v.id === id && v.top === Math.max(r.top + 8, 44) && v.left === Math.max(r.right - 62, 8) ? v : { id, top: Math.max(r.top + 8, 44), left: Math.max(r.right - 62, 8) }
-      );
+      const top = Math.max(r.top + 8, 44);
+      const right = Math.max(window.innerWidth - r.right + 8, 8);
+      setProductKnop((v) => v && v.id === id && v.top === top && v.right === right ? v : { id, top, right });
     };
     document.addEventListener("mouseover", onOver, true);
     return () => document.removeEventListener("mouseover", onOver, true);
@@ -776,15 +797,21 @@ function VisualEditorInner({ onClose }) {
       toast({ title: "Los eerst het conflict op", description: "Kies 'Nieuwste versie laden' of 'Mijn versie behouden' in de gele balk.", tone: "error" });
       return;
     }
-    const ok = await confirm({ title: "Pagina publiceren?", description: `De live site wordt bijgewerkt (${d.path}).`, confirmLabel: "Publiceren" });
+    const demo = isDemoActive();
+    const ok = await confirm({
+      title: "Pagina publiceren?",
+      description: demo ? "In deze demo blijft alles in je eigen browser \u2014 er gaat niets echt online." : `De live site wordt bijgewerkt (${d.path}).`,
+      confirmLabel: "Publiceren"
+    });
     if (!ok) return;
     setPublishing(true);
     try {
       await saveDraft(siteId, d.id, draftPayload(d));
       await publishPage(siteId, d.id);
+      setLiveBlocks(structuredClone(d.blocks));
       toast({
         title: "Gepubliceerd",
-        description: "Zelf zie je de nieuwe tekst meteen. Voor overige bezoekers duurt het nog ongeveer 15 minuten.",
+        description: demo ? "In deze demo blijft de wijziging in je browser staan." : "Zelf zie je de nieuwe tekst meteen. Voor overige bezoekers duurt het nog ongeveer 15 minuten.",
         tone: "success"
       });
     } catch (e) {
@@ -817,9 +844,11 @@ function VisualEditorInner({ onClose }) {
           actief: "bewerken",
           voorSwitch: (m) => {
             if (m === "live" && nietLiveRef.current) {
+              const n = aantalWijzigingen(wijzigingen);
               toast({
                 title: "Nog niet gepubliceerd",
-                description: `${aantalWijzigingen(wijzigingen)} blijft bewaard als werkversie. Je ziet ze weer zodra je terug naar Bewerken gaat.`
+                // Enkelvoud/meervoud netjes: "1 wijziging blijft", "14 wijzigingen blijven".
+                description: `${n} ${n.startsWith("1 ") ? "blijft" : "blijven"} bewaard als werkversie. Je ziet ze terug zodra je weer naar Bewerken gaat.`
               });
             }
           }
@@ -970,46 +999,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${b.key === selectedKey ? " is-open" : ""}`, style: { top: b.top, right: b.right }, 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__ */ jsx("span", { className: "xicms-ve-blokknoppen__meer", children: /* @__PURE__ */ jsxs("span", { className: "xicms-ve-blokknoppen__meer-in", 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",
       {
@@ -1033,7 +1136,7 @@ function VisualEditorInner({ onClose }) {
       "div",
       {
         className: "xicms-ve-blokknoppen is-product",
-        style: { top: productKnop.top, left: productKnop.left },
+        style: { top: productKnop.top, right: productKnop.right },
         children: [
           /* @__PURE__ */ jsx(
             "button",