@xiwebdesign/xicms-core 7.23.0 → 7.25.0

package/dist/admin/visual/VisualEditor.js

@@ -9,7 +9,9 @@ import { useSiteConfig } from "../../config.js";
 import { useRegistry } from "../../blocks/context.js";
 import { introspectToFields } from "../lib/zodFields.js";
 import { BlockErrorBoundary } from "../../blocks/BlockErrorBoundary.js";
-import { MediaPickerDialog } from "../media/MediaPicker.js";
+import { MediaPickerDialog, MediaPickerButton } from "../media/MediaPicker.js";
+import { Switch } from "../ui/switch.js";
+import { titelMeter, omschrijvingMeter } from "../lib/seoHulp.js";
 import { useThemeVars } from "../../XiCMSProvider.js";
 import { buildBlockAddOptions } from "../../blocks/registry.js";
 import DOMPurify from "dompurify";
@@ -787,6 +789,10 @@ function VisualEditorInner({ onClose }) {
         if (e.key.toLowerCase() === "y" || e.shiftKey) redo();
         else undo();
       }
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        void flushSave().catch(() => setStatus("error"));
+      }
     };
     window.addEventListener("beforeunload", beforeUnload);
     document.addEventListener("visibilitychange", onVisibility);
@@ -1093,7 +1099,7 @@ function VisualEditorInner({ onClose }) {
         /* @__PURE__ */ jsx(PageTranslationSettings, { draft, locale, onTranslate: setTranslation })
       ] }) : draft ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
         /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Klik op een blok om het te bewerken." }),
-        /* @__PURE__ */ jsx(PageSettings, { draft, onChange: (part) => mutateDraft((d) => ({ ...d, ...part }), { coalesce: true }) }),
+        /* @__PURE__ */ jsx(PageSettings, { draft, siteId, onChange: (part) => mutateDraft((d) => ({ ...d, ...part }), { coalesce: true }) }),
         !isDemoActive() && /* @__PURE__ */ jsx(
           VersionsPanel,
           {
@@ -1199,6 +1205,22 @@ function VisualEditorInner({ onClose }) {
               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 invoegen na dit blok",
+              "aria-label": `Blok invoegen na ${b.label}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setSelectedProduct(null);
+                setSelectedKey(b.key);
+                setPanelOpen(true);
+              },
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) })
+            }
+          ),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -1403,17 +1425,71 @@ function FmtBtn({ label, title, onRun }) {
     }
   );
 }
+function MeterRegel({ m }) {
+  const kleur = m.toon === "goed" ? "text-emerald-700" : m.toon === "lang" || m.toon === "leeg" ? "text-amber-700" : "text-slate-500";
+  return /* @__PURE__ */ jsx("p", { className: `mt-1 text-xs ${kleur}`, children: m.tekst });
+}
 function PageSettings({
   draft,
+  siteId,
   onChange
 }) {
   const seo = draft.seo ?? {};
+  const { toast } = useToast();
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [bezig, setBezig] = useState(false);
+  async function maakPreviewLink() {
+    const { getFirebaseApp } = await import("../../firebase/client.js");
+    const { callable } = await import("../../firebase/functionsClient.js");
+    const app = getFirebaseApp();
+    if (!app) return;
+    setBezig(true);
+    try {
+      const res = await callable(app, "createPreviewLink")({ siteId, path: draft.path });
+      setPreviewUrl(res.data.url);
+      try {
+        await navigator.clipboard?.writeText(res.data.url);
+        toast({ title: "Preview-link gekopieerd", description: "Zeven dagen geldig; wie hem opent ziet de nieuwste stand, ook wat nog niet live is.", tone: "success" });
+      } catch {
+        toast({ title: "Preview-link gemaakt", tone: "success" });
+      }
+    } catch (e) {
+      toast({ title: "Preview-link mislukt", description: e.message, tone: "error" });
+    } finally {
+      setBezig(false);
+    }
+  }
   return /* @__PURE__ */ jsxs("details", { className: "xicms-ve__section", open: true, children: [
     /* @__PURE__ */ jsx("summary", { className: "text-sm font-semibold", children: "Pagina-instellingen" }),
     /* @__PURE__ */ jsxs("div", { className: "mt-2 grid gap-3", children: [
       /* @__PURE__ */ jsx(Field, { label: "Paginatitel", children: /* @__PURE__ */ jsx(Input, { value: draft.title ?? "", onChange: (e) => onChange({ title: e.target.value }) }) }),
-      /* @__PURE__ */ jsx(Field, { label: "SEO-titel", hint: "Leeg = paginatitel", children: /* @__PURE__ */ jsx(Input, { value: seo.title ?? "", onChange: (e) => onChange({ seo: { ...seo, title: e.target.value } }) }) }),
-      /* @__PURE__ */ jsx(Field, { label: "SEO-omschrijving", hint: "Wordt getoond in zoekresultaten", children: /* @__PURE__ */ jsx(Textarea, { rows: 3, value: seo.description ?? "", onChange: (e) => onChange({ seo: { ...seo, description: e.target.value } }) }) })
+      /* @__PURE__ */ jsxs(Field, { label: "Titel in zoekresultaten", hint: "Leeg = paginatitel", children: [
+        /* @__PURE__ */ jsx(Input, { value: seo.title ?? "", onChange: (e) => onChange({ seo: { ...seo, title: e.target.value } }) }),
+        /* @__PURE__ */ jsx(MeterRegel, { m: titelMeter(seo.title, draft.title) })
+      ] }),
+      /* @__PURE__ */ jsxs(Field, { label: "Omschrijving voor Google", hint: "E\xE9n of twee zinnen die uitnodigen om te klikken", children: [
+        /* @__PURE__ */ jsx(Textarea, { rows: 3, value: seo.description ?? "", onChange: (e) => onChange({ seo: { ...seo, description: e.target.value } }) }),
+        /* @__PURE__ */ jsx(MeterRegel, { m: omschrijvingMeter(seo.description) })
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Afbeelding bij het delen", hint: "Voorbeeld op social media/WhatsApp. Leeg = standaardafbeelding van de site.", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        seo.ogImage && // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx("img", { src: seo.ogImage, alt: "", className: "h-12 w-20 rounded-md border border-slate-200 object-cover" }),
+        /* @__PURE__ */ jsx(MediaPickerButton, { siteId, label: seo.ogImage ? "Andere kiezen" : "Kies / upload", onSelect: (m) => onChange({ seo: { ...seo, ogImage: m.url } }) }),
+        seo.ogImage && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange({ seo: { ...seo, ogImage: void 0 } }), children: "Weghalen" })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: Boolean(seo.noindex),
+          onCheckedChange: (v) => onChange({ seo: { ...seo, noindex: v || void 0 } }),
+          label: "Niet opnemen in Google"
+        }
+      ),
+      !isDemoActive() && /* @__PURE__ */ jsxs("div", { className: "grid gap-1 border-t border-slate-200 pt-3", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: bezig, onClick: () => void maakPreviewLink(), children: bezig ? "Bezig\u2026" : "\u{1F517} Preview-link delen" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Laat iemand zonder inlog meekijken naar de werkversie. Zeven dagen geldig, geen toegang tot het beheer." }),
+        previewUrl && /* @__PURE__ */ jsx(Input, { readOnly: true, value: previewUrl, className: "text-xs", onFocus: (e) => e.currentTarget.select() })
+      ] })
     ] })
   ] });
 }