@xiwebdesign/xicms-core 7.12.1 → 7.14.0

package/dist/admin/visual/VisualEditor.js

@@ -1,5 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { registerBuiltinSchemas } from "../../blocks/builtinSchemas.js";
+import { useModules } from "../../modules/context.js";
+registerBuiltinSchemas();
 import "@xiwebdesign/xicms-core/admin.css";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSiteConfig } from "../../config.js";
@@ -130,6 +133,27 @@ function VisualEditorInner({ onClose }) {
     draftRef.current = draft;
   }, [draft]);
   const historyRef = useRef({ past: [], future: [], lastPush: 0 });
+  const undoOpslagSleutel = useCallback((id) => `xicms-undo:${siteId}:${id}`, [siteId]);
+  const bewaarHistory = useCallback(() => {
+    try {
+      const id = draftRef.current?.id;
+      if (!id) return;
+      sessionStorage.setItem(undoOpslagSleutel(id), JSON.stringify(historyRef.current.past.slice(-25)));
+    } catch {
+    }
+  }, [undoOpslagSleutel]);
+  const herstelHistory = useCallback((id) => {
+    try {
+      const raw = sessionStorage.getItem(undoOpslagSleutel(id));
+      if (!raw || historyRef.current.past.length > 0) return;
+      const past = JSON.parse(raw);
+      if (Array.isArray(past) && past.length) {
+        historyRef.current.past = past;
+        setHistVersion((v) => v + 1);
+      }
+    } catch {
+    }
+  }, [undoOpslagSleutel]);
   const [, setHistVersion] = useState(0);
   const pushHistory = useCallback((prev, coalesce) => {
     const h = historyRef.current;
@@ -203,6 +227,20 @@ function VisualEditorInner({ onClose }) {
   const handleClose = useCallback(() => {
     void flushSave().finally(() => onClose());
   }, [flushSave, onClose]);
+  const [toonStartHint, setToonStartHint] = useState(false);
+  useEffect(() => {
+    try {
+      if (!localStorage.getItem("xicms-hint-bewerken-v1")) setToonStartHint(true);
+    } catch {
+    }
+  }, []);
+  const sluitStartHint = useCallback(() => {
+    setToonStartHint(false);
+    try {
+      localStorage.setItem("xicms-hint-bewerken-v1", "1");
+    } catch {
+    }
+  }, []);
   useEffect(() => {
     let active = true;
     getDraftByPath(siteId, path).then((d) => {
@@ -210,6 +248,7 @@ function VisualEditorInner({ onClose }) {
       if (d) {
         setDraft(d);
         lastSavedRef.current = stableStringify(draftPayload(d));
+        herstelHistory(d.id);
         setStatus("idle");
       } else {
         setStatus("none");
@@ -279,6 +318,13 @@ function VisualEditorInner({ onClose }) {
   );
   nietLiveRef.current = wijzigingen.iets;
   const { publishDraft, zetFotoVervanger } = useEditor();
+  const actieveModules = useModules();
+  useEffect(() => {
+    for (const m of actieveModules.defs) {
+      if (actieveModules.activeIds.has(m.id)) void m.loadSchemas?.().catch(() => {
+      });
+    }
+  }, [actieveModules]);
   useEffect(() => {
     zetFotoVervanger((field, blockKey) => {
       if (blockKey) setImgPicker({ key: blockKey, field });
@@ -711,10 +757,14 @@ function VisualEditorInner({ onClose }) {
         e.preventDefault();
         e.returnValue = "";
       }
+      bewaarHistory();
     };
     const onVisibility = () => {
-      if (document.visibilityState === "hidden") void flushSave().catch(() => {
-      });
+      if (document.visibilityState === "hidden") {
+        void flushSave().catch(() => {
+        });
+        bewaarHistory();
+      }
     };
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -749,7 +799,7 @@ function VisualEditorInner({ onClose }) {
         );
       }
     };
-  }, [siteId, handleClose, flushSave, undo, redo]);
+  }, [siteId, handleClose, flushSave, undo, redo, bewaarHistory]);
   function setBlocks(next, opts) {
     mutateDraft((d) => ({ ...d, blocks: next }), opts);
   }
@@ -856,8 +906,10 @@ function VisualEditorInner({ onClose }) {
       setLiveBlocks(structuredClone(d.blocks));
       toast({
         title: "Gepubliceerd",
-        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"
+        description: demo ? "In deze demo blijft de wijziging in je browser staan." : "Binnen enkele seconden zichtbaar voor iedereen.",
+        tone: "success",
+        // Sluit de mentale lus "staat het er nu echt?": één klik en je kijkt als bezoeker.
+        action: { label: "Bekijk als bezoeker \u2192", onClick: handleClose }
       });
     } catch (e) {
       toast({ title: "Publiceren mislukt", description: e.message, tone: "error" });
@@ -881,6 +933,18 @@ function VisualEditorInner({ onClose }) {
     setConflict(false);
   }, [siteId, path, mutateDraft]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "xicms-ve__shell", "data-xicms-tooling": "", role: "group", "aria-label": `Pagina bewerken: ${path}`, children: [
+    toonStartHint && /* @__PURE__ */ jsxs("div", { className: "xicms-ve-starthint", role: "status", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "\u270F\uFE0F Klik het ",
+        /* @__PURE__ */ jsx("strong", { children: "potlood" }),
+        " naast een tekst om die op de pagina zelf te bewerken; foto's wissel je met ",
+        /* @__PURE__ */ jsx("strong", { children: "\u{1F4F7} Foto wijzigen" }),
+        ". Klaar? ",
+        /* @__PURE__ */ jsx("strong", { children: "Publiceren" }),
+        " staat rechtsonder."
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: sluitStartHint, children: "Begrepen" })
+    ] }),
     /* @__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(