@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/editors/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/editors/RichTextEditor.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport Link from \"@tiptap/extension-link\";\nimport Image from \"@tiptap/extension-image\";\nimport DOMPurify from \"dompurify\";\nimport { useCallback, useEffect, type ReactNode } from \"react\";\nimport { cn } from \"../ui/cn\";\nimport { MediaPickerButton } from \"../media/MediaPicker\";\nimport { FontSize, FONT_SIZES } from \"./fontSizeExtension\";\n\n/**\n * WYSIWYG-editor (TipTap) met opmaak én afbeeldingen. Output wordt client-side met DOMPurify\n * gesanitized voor preview/opslag; de server sanitized nogmaals bij publiceren (server/sanitize.ts)\n * — nooit op de client vertrouwen. Geef `siteId` mee om afbeeldingen te kunnen uploaden/invoegen.\n */\nexport function RichTextEditor({\n  value,\n  onChange,\n  siteId,\n}: {\n  value: string;\n  onChange: (html: string) => void;\n  siteId?: string;\n}) {\n\n  const editor = useEditor({\n    immediatelyRender: false,\n    extensions: [\n      // Tiptap 3 bundelt Link en Underline IN StarterKit. Los toevoegen geeft dubbele\n      // extensienamen (en stille gedragsfouten), dus: Underline komt uit StarterKit, en zijn Link\n      // zetten we uit omdat we die hieronder zelf configureren (geen open-on-click, eigen rel).\n      StarterKit.configure({ heading: { levels: [2, 3, 4] }, link: false }),\n      FontSize,\n      // Zonder deze extensie gooit TipTap een <table> bij het inladen weg (onbekende node) — een\n      // tabel uit de seed of een import overleefde dan geen enkele bewerking van dat blok.\n      TableKit.configure({ table: { resizable: false } }),\n      Link.configure({ openOnClick: false, autolink: true, HTMLAttributes: { rel: \"noopener noreferrer nofollow\" } }),\n      Image.configure({ inline: false, allowBase64: false, HTMLAttributes: { loading: \"lazy\", decoding: \"async\" } }),\n    ],\n    content: value || \"<p></p>\",\n    onUpdate: ({ editor }) => onChange(DOMPurify.sanitize(editor.getHTML())),\n    editorProps: {\n      attributes: { class: \"min-h-[8rem] rounded-b-lg border border-t-0 border-slate-300 bg-white p-3 text-sm\" },\n    },\n  });\n\n  // Externe waarde-wijzigingen (undo/redo in de VisualEditor, taal-wissel in het vertaalpaneel)\n  // in de editor doorvoeren: TipTap leest `content` alleen bij init. Zonder deze sync blijft de\n  // zichtbare HTML stale terwijl de opgeslagen waarde al veranderd is — data-integriteitsval.\n  // Niet syncen terwijl de gebruiker zelf typt (editor.isFocused) — dan is de editor de bron.\n  useEffect(() => {\n    if (!editor || editor.isFocused) return;\n    const current = editor.getHTML();\n    const next = value || \"<p></p>\";\n    // Tiptap 3: de tweede parameter is een options-object i.p.v. een boolean.\n    if (current !== next) editor.commands.setContent(next, { emitUpdate: false });\n  }, [value, editor]);\n\n  const setLink = useCallback(() => {\n    if (!editor) return;\n    const prev = editor.getAttributes(\"link\").href as string | undefined;\n    const url = window.prompt(\"Link-URL (leeg = verwijderen)\", prev ?? \"https://\");\n    if (url === null) return;\n    if (url === \"\") editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n    else editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n  }, [editor]);\n\n  const insertImageByUrl = useCallback(() => {\n    if (!editor) return;\n    const url = window.prompt(\"Afbeeldings-URL (https)\");\n    if (!url) return;\n    const alt = window.prompt(\"Beschrijving (alt-tekst, voor toegankelijkheid)\") ?? \"\";\n    editor.chain().focus().setImage({ src: url, alt }).run();\n  }, [editor]);\n\n  const setFontSize = useCallback(\n    (value: string) => {\n      if (!editor) return;\n      editor.chain().focus().setMark(\"textStyle\", { fontSize: value || null }).run();\n    },\n    [editor],\n  );\n\n  if (!editor) return null;\n\n  const Btn = ({ on, active, label, title }: { on: () => void; active?: boolean; label: ReactNode; title?: string }) => (\n    <button\n      type=\"button\"\n      title={title}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={on}\n      className={cn(\n        \"h-8 min-w-8 rounded px-2 text-sm hover:bg-slate-100\",\n        active && \"bg-slate-200 font-semibold\",\n      )}\n    >\n      {label}\n    </button>\n  );\n\n  return (\n    <div>\n      <div className=\"flex flex-wrap gap-1 rounded-t-lg border border-slate-300 bg-slate-50 p-1\">\n        <Btn on={() => editor.chain().focus().toggleBold().run()} active={editor.isActive(\"bold\")} label=\"B\" title=\"Vet\" />\n        <Btn on={() => editor.chain().focus().toggleItalic().run()} active={editor.isActive(\"italic\")} label=\"I\" title=\"Cursief\" />\n        <Btn on={() => editor.chain().focus().toggleUnderline().run()} active={editor.isActive(\"underline\")} label={<span style={{ textDecoration: \"underline\" }}>U</span>} title=\"Onderstrepen\" />\n        <Btn on={() => editor.chain().focus().toggleStrike().run()} active={editor.isActive(\"strike\")} label={<span style={{ textDecoration: \"line-through\" }}>S</span>} title=\"Doorstrepen\" />\n        <select\n          className=\"h-8 rounded border border-slate-300 bg-white px-1 text-sm\"\n          value={(editor.getAttributes(\"textStyle\").fontSize as string | undefined) ?? \"\"}\n          onChange={(e) => setFontSize(e.target.value)}\n          title=\"Lettergrootte\"\n          aria-label=\"Lettergrootte\"\n        >\n          {FONT_SIZES.map((s) => (\n            <option key={s.label} value={s.value}>\n              {s.label}\n            </option>\n          ))}\n        </select>\n        <Btn on={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} active={editor.isActive(\"heading\", { level: 2 })} label=\"H2\" title=\"Kop\" />\n        <Btn on={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} active={editor.isActive(\"heading\", { level: 3 })} label=\"H3\" title=\"Subkop\" />\n        <Btn on={() => editor.chain().focus().toggleBulletList().run()} active={editor.isActive(\"bulletList\")} label=\"• Lijst\" title=\"Opsomming\" />\n        <Btn on={() => editor.chain().focus().toggleOrderedList().run()} active={editor.isActive(\"orderedList\")} label=\"1. Lijst\" title=\"Genummerde lijst\" />\n        <Btn on={() => editor.chain().focus().toggleBlockquote().run()} active={editor.isActive(\"blockquote\")} label=\"❝\" title=\"Citaat\" />\n        <Btn on={setLink} active={editor.isActive(\"link\")} label=\"🔗\" title=\"Link\" />\n        {siteId && (\n          <MediaPickerButton\n            siteId={siteId}\n            label=\"🖼 Afbeelding\"\n            variant=\"ghost\"\n            onSelect={(m) => editor.chain().focus().setImage({ src: m.url, alt: m.alt ?? \"\" }).run()}\n          />\n        )}\n        <Btn on={insertImageByUrl} label=\"🖼 URL\" title=\"Externe afbeelding via URL invoegen\" />\n      </div>\n      <EditorContent editor={editor} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["editor","value"]}
+{"version":3,"sources":["../../../src/admin/editors/RichTextEditor.tsx"],"sourcesContent":["\"use client\";\n\nimport { EditorContent } from \"@tiptap/react\";\nimport { useCallback, useEffect } from \"react\";\nimport { MediaPickerButton } from \"../media/MediaPicker\";\nimport { FONT_SIZES } from \"./fontSizeExtension\";\nimport { RteKnop as Btn, useRijkeTekst, zonderLegeStaart } from \"./useRijkeTekst\";\n\n/**\n * WYSIWYG-editor (TipTap) met opmaak én afbeeldingen — de jas voor het beheer, met vaste werkbalk.\n * De kern (extensies, slash-menu, selectie-werkbalk, foto's plakken/slepen, dialogen) zit in\n * `useRijkeTekst` en is dezelfde als bij bewerken op de site (`InlineRijkeTekst`).\n * Geef `siteId` mee om afbeeldingen te kunnen uploaden/invoegen.\n */\nexport function RichTextEditor({\n  value,\n  onChange,\n  siteId,\n}: {\n  value: string;\n  onChange: (html: string) => void;\n  siteId?: string;\n}) {\n  const { editor, overlays, openLink: setLink } = useRijkeTekst({\n    value,\n    onChange,\n    siteId,\n    editorClass: \"xicms-richtext-editor min-h-[8rem] rounded-b-lg border border-t-0 border-slate-300 bg-white p-3 text-sm\",\n  });\n\n  // Externe waarde-wijzigingen (undo/redo in de VisualEditor, taal-wissel in het vertaalpaneel)\n  // in de editor doorvoeren: TipTap leest `content` alleen bij init. Zonder deze sync blijft de\n  // zichtbare HTML stale terwijl de opgeslagen waarde al veranderd is — data-integriteitsval.\n  // Niet syncen terwijl de gebruiker zelf typt (editor.isFocused) — dan is de editor de bron.\n  useEffect(() => {\n    if (!editor || editor.isFocused) return;\n    // Vergelijk zonder de lege staart-alinea van TipTap, anders lijkt alles altijd anders.\n    const current = zonderLegeStaart(editor.getHTML()) || \"<p></p>\";\n    const next = value || \"<p></p>\";\n    // Tiptap 3: de tweede parameter is een options-object i.p.v. een boolean.\n    if (current !== next) editor.commands.setContent(next, { emitUpdate: false });\n  }, [value, editor]);\n\n  const setFontSize = useCallback(\n    (value: string) => {\n      if (!editor) return;\n      editor.chain().focus().setMark(\"textStyle\", { fontSize: value || null }).run();\n    },\n    [editor],\n  );\n\n  if (!editor) return null;\n\n  return (\n    <div>\n      <div className=\"flex flex-wrap gap-1 rounded-t-lg border border-slate-300 bg-slate-50 p-1\">\n        <Btn on={() => editor.chain().focus().toggleBold().run()} active={editor.isActive(\"bold\")} label=\"B\" title=\"Vet\" />\n        <Btn on={() => editor.chain().focus().toggleItalic().run()} active={editor.isActive(\"italic\")} label=\"I\" title=\"Cursief\" />\n        <Btn on={() => editor.chain().focus().toggleUnderline().run()} active={editor.isActive(\"underline\")} label={<span style={{ textDecoration: \"underline\" }}>U</span>} title=\"Onderstrepen\" />\n        <Btn on={() => editor.chain().focus().toggleStrike().run()} active={editor.isActive(\"strike\")} label={<span style={{ textDecoration: \"line-through\" }}>S</span>} title=\"Doorstrepen\" />\n        <select\n          className=\"h-8 rounded border border-slate-300 bg-white px-1 text-sm\"\n          value={(editor.getAttributes(\"textStyle\").fontSize as string | undefined) ?? \"\"}\n          onChange={(e) => setFontSize(e.target.value)}\n          title=\"Lettergrootte\"\n          aria-label=\"Lettergrootte\"\n        >\n          {FONT_SIZES.map((s) => (\n            <option key={s.label} value={s.value}>\n              {s.label}\n            </option>\n          ))}\n        </select>\n        <Btn on={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} active={editor.isActive(\"heading\", { level: 2 })} label=\"H2\" title=\"Kop\" />\n        <Btn on={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} active={editor.isActive(\"heading\", { level: 3 })} label=\"H3\" title=\"Subkop\" />\n        <Btn on={() => editor.chain().focus().toggleBulletList().run()} active={editor.isActive(\"bulletList\")} label=\"• Lijst\" title=\"Opsomming\" />\n        <Btn on={() => editor.chain().focus().toggleOrderedList().run()} active={editor.isActive(\"orderedList\")} label=\"1. Lijst\" title=\"Genummerde lijst\" />\n        <Btn on={() => editor.chain().focus().toggleBlockquote().run()} active={editor.isActive(\"blockquote\")} label=\"❝\" title=\"Citaat\" />\n        <Btn on={setLink} active={editor.isActive(\"link\")} label=\"🔗\" title=\"Link\" />\n        {siteId && (\n          <MediaPickerButton\n            siteId={siteId}\n            label=\"🖼 Afbeelding\"\n            variant=\"ghost\"\n            onSelect={(m) => editor.chain().focus().setImage({ src: m.url, alt: m.alt ?? \"\" }).run()}\n          />\n        )}\n      </div>\n      <EditorContent editor={editor} />\n      <p className=\"mt-1 text-xs text-slate-500\">Tip: typ <kbd className=\"rounded border border-slate-300 px-1\">/</kbd> voor koppen, lijsten, tabellen{siteId ? \" en foto's — of sleep een foto erin\" : \"\"}.</p>\n      {overlays}\n    </div>\n  );\n}\n"],"mappings":"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","names":["value"]}

package/dist/admin/editors/fontSizeExtension.js

@@ -11,7 +11,13 @@ const FontSize = TextStyle.extend({
       ...this.parent?.(),
       fontSize: {
         default: null,
-        parseHTML: (element) => element.style.fontSize || null,
+        // 8.10: alleen de presets. Geplakt uit Word/Docs ("11pt", "36px") bleef anders in de
+        // werkversie staan, terwijl de server het bij publiceren weghaalt — de editor toonde dan
+        // iets anders dan wat live kwam, en de klant dacht dat publiceren de opmaak "sloopte".
+        parseHTML: (element) => {
+          const v = element.style.fontSize;
+          return FONT_SIZES.some((f) => f.value && f.value === v) ? v : null;
+        },
         renderHTML: (attributes) => {
           if (!attributes.fontSize) return {};
           return { style: `font-size: ${attributes.fontSize}` };

package/dist/admin/editors/fontSizeExtension.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/editors/fontSizeExtension.ts"],"sourcesContent":["// Tiptap 3: extension-text-style exporteert geen default meer.\nimport { TextStyle } from \"@tiptap/extension-text-style\";\n\n/**\n * Vaste, veilige preset-set — geen vrij invoerveld. `sanitizeRichText` (server/sanitize.ts en de\n * spiegel-kopie in functions/src/lib/sanitize.ts) staat via `allowedStyles` UITSLUITEND exact deze\n * `font-size`-waarden toe; een los tekstveld voor lettergrootte zou een CSS-allowlist met een brede\n * regex vergen (groter injectie-oppervlak) voor weinig extra waarde t.o.v. een paar consistente maten.\n */\nexport const FONT_SIZES = [\n  { label: \"Klein\", value: \"0.85rem\" },\n  { label: \"Normaal\", value: \"\" },\n  { label: \"Groot\", value: \"1.25rem\" },\n  { label: \"Extra groot\", value: \"1.5rem\" },\n] as const;\n\n/** `textStyle`-mark (Tiptap) uitgebreid met een `fontSize`-attribuut → `<span style=\"font-size:...\">`. */\nexport const FontSize = TextStyle.extend({\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      fontSize: {\n        default: null,\n        parseHTML: (element: HTMLElement) => element.style.fontSize || null,\n        renderHTML: (attributes: Record<string, unknown>) => {\n          if (!attributes.fontSize) return {};\n          return { style: `font-size: ${attributes.fontSize}` };\n        },\n      },\n    };\n  },\n});\n"],"mappings":"AACA,SAAS,iBAAiB;AAQnB,MAAM,aAAa;AAAA,EACxB,EAAE,OAAO,SAAS,OAAO,UAAU;AAAA,EACnC,EAAE,OAAO,WAAW,OAAO,GAAG;AAAA,EAC9B,EAAE,OAAO,SAAS,OAAO,UAAU;AAAA,EACnC,EAAE,OAAO,eAAe,OAAO,SAAS;AAC1C;AAGO,MAAM,WAAW,UAAU,OAAO;AAAA,EACvC,gBAAgB;AACd,WAAO;AAAA,MACL,GAAG,KAAK,SAAS;AAAA,MACjB,UAAU;AAAA,QACR,SAAS;AAAA,QACT,WAAW,CAAC,YAAyB,QAAQ,MAAM,YAAY;AAAA,QAC/D,YAAY,CAAC,eAAwC;AACnD,cAAI,CAAC,WAAW,SAAU,QAAO,CAAC;AAClC,iBAAO,EAAE,OAAO,cAAc,WAAW,QAAQ,GAAG;AAAA,QACtD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/admin/editors/fontSizeExtension.ts"],"sourcesContent":["// Tiptap 3: extension-text-style exporteert geen default meer.\nimport { TextStyle } from \"@tiptap/extension-text-style\";\n\n/**\n * Vaste, veilige preset-set — geen vrij invoerveld. `sanitizeRichText` (server/sanitize.ts en de\n * spiegel-kopie in functions/src/lib/sanitize.ts) staat via `allowedStyles` UITSLUITEND exact deze\n * `font-size`-waarden toe; een los tekstveld voor lettergrootte zou een CSS-allowlist met een brede\n * regex vergen (groter injectie-oppervlak) voor weinig extra waarde t.o.v. een paar consistente maten.\n */\nexport const FONT_SIZES = [\n  { label: \"Klein\", value: \"0.85rem\" },\n  { label: \"Normaal\", value: \"\" },\n  { label: \"Groot\", value: \"1.25rem\" },\n  { label: \"Extra groot\", value: \"1.5rem\" },\n] as const;\n\n/** `textStyle`-mark (Tiptap) uitgebreid met een `fontSize`-attribuut → `<span style=\"font-size:...\">`. */\nexport const FontSize = TextStyle.extend({\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      fontSize: {\n        default: null,\n        // 8.10: alleen de presets. Geplakt uit Word/Docs (\"11pt\", \"36px\") bleef anders in de\n        // werkversie staan, terwijl de server het bij publiceren weghaalt — de editor toonde dan\n        // iets anders dan wat live kwam, en de klant dacht dat publiceren de opmaak \"sloopte\".\n        parseHTML: (element: HTMLElement) => {\n          const v = element.style.fontSize;\n          return FONT_SIZES.some((f) => f.value && f.value === v) ? v : null;\n        },\n        renderHTML: (attributes: Record<string, unknown>) => {\n          if (!attributes.fontSize) return {};\n          return { style: `font-size: ${attributes.fontSize}` };\n        },\n      },\n    };\n  },\n});\n"],"mappings":"AACA,SAAS,iBAAiB;AAQnB,MAAM,aAAa;AAAA,EACxB,EAAE,OAAO,SAAS,OAAO,UAAU;AAAA,EACnC,EAAE,OAAO,WAAW,OAAO,GAAG;AAAA,EAC9B,EAAE,OAAO,SAAS,OAAO,UAAU;AAAA,EACnC,EAAE,OAAO,eAAe,OAAO,SAAS;AAC1C;AAGO,MAAM,WAAW,UAAU,OAAO;AAAA,EACvC,gBAAgB;AACd,WAAO;AAAA,MACL,GAAG,KAAK,SAAS;AAAA,MACjB,UAAU;AAAA,QACR,SAAS;AAAA;AAAA;AAAA;AAAA,QAIT,WAAW,CAAC,YAAyB;AACnC,gBAAM,IAAI,QAAQ,MAAM;AACxB,iBAAO,WAAW,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,IAAI;AAAA,QAChE;AAAA,QACA,YAAY,CAAC,eAAwC;AACnD,cAAI,CAAC,WAAW,SAAU,QAAO,CAAC;AAClC,iBAAO,EAAE,OAAO,cAAc,WAAW,QAAQ,GAAG;AAAA,QACtD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/admin/editors/slashMenu.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Het "/"-menu van de teksteditor (8.5) — het idee komt uit AstraCMS (Novel): typ "/" en kies een
+ * kop, lijst, citaat, foto of tabel, met zoekwoorden als ingang. Eigen, kleine implementatie op
+ * TipTap (zonder @tiptap/suggestion): detectie en filtering zijn puur en getest; het menu zelf
+ * rendert de editor.
+ */
+export interface SlashItem {
+    id: "tekst" | "kop" | "subkop" | "kleineKop" | "lijst" | "nummers" | "citaat" | "lijn" | "tabel" | "foto" | "link";
+    titel: string;
+    uitleg: string;
+    icoon: string;
+    zoekwoorden: string[];
+}
+export declare const SLASH_ITEMS: SlashItem[];
+/** Staat er "/zoekterm" vlak vóór de cursor (aan het begin of na een spatie)? Geeft de zoekterm. */
+export declare function slashZoekterm(tekstVoorCursor: string): string | null;
+/** Items die bij de zoekterm passen; begint-met eerst. */
+export declare function filterSlash(items: SlashItem[], term: string): SlashItem[];

package/dist/admin/editors/slashMenu.js

@@ -0,0 +1,34 @@
+const SLASH_ITEMS = [
+  { id: "tekst", titel: "Tekst", uitleg: "Gewone alinea", icoon: "\xB6", zoekwoorden: ["alinea", "paragraaf", "normaal", "p"] },
+  { id: "kop", titel: "Kop", uitleg: "Grote tussenkop", icoon: "H2", zoekwoorden: ["titel", "heading", "h2", "kop"] },
+  { id: "subkop", titel: "Subkop", uitleg: "Kleinere tussenkop", icoon: "H3", zoekwoorden: ["h3", "subtitel", "kop"] },
+  { id: "kleineKop", titel: "Kleine kop", uitleg: "Kopje boven een alinea", icoon: "H4", zoekwoorden: ["h4", "kopje"] },
+  { id: "lijst", titel: "Opsomming", uitleg: "Lijst met bolletjes", icoon: "\u2022", zoekwoorden: ["lijst", "bullets", "punten", "ul"] },
+  { id: "nummers", titel: "Genummerde lijst", uitleg: "1, 2, 3 \u2026", icoon: "1.", zoekwoorden: ["lijst", "nummers", "stappen", "ol"] },
+  { id: "citaat", titel: "Citaat", uitleg: "Uitgelichte tekst of quote", icoon: "\u275D", zoekwoorden: ["quote", "aanhaling"] },
+  { id: "lijn", titel: "Scheidingslijn", uitleg: "Horizontale lijn", icoon: "\u2014", zoekwoorden: ["lijn", "streep", "hr", "scheiding"] },
+  { id: "tabel", titel: "Tabel", uitleg: "Tabel van 3 \xD7 3", icoon: "\u25A6", zoekwoorden: ["tabel", "table", "prijzen", "schema"] },
+  { id: "foto", titel: "Foto", uitleg: "Uit de mediabibliotheek of uploaden", icoon: "\u{1F5BC}", zoekwoorden: ["afbeelding", "beeld", "plaatje", "image", "foto"] },
+  { id: "link", titel: "Link", uitleg: "Naar een pagina of website", icoon: "\u{1F517}", zoekwoorden: ["url", "koppeling", "adres"] }
+];
+function slashZoekterm(tekstVoorCursor) {
+  const m = /(?:^|\s)\/([\p{L}\d]{0,24})$/u.exec(tekstVoorCursor);
+  return m ? m[1] : null;
+}
+function filterSlash(items, term) {
+  const q = term.trim().toLowerCase();
+  if (!q) return items;
+  const score = (it) => {
+    const velden = [it.titel.toLowerCase(), ...it.zoekwoorden];
+    if (velden.some((v) => v.startsWith(q))) return 2;
+    if (velden.some((v) => v.includes(q))) return 1;
+    return 0;
+  };
+  return items.map((it) => ({ it, s: score(it) })).filter((x) => x.s > 0).sort((a, b) => b.s - a.s).map((x) => x.it);
+}
+export {
+  SLASH_ITEMS,
+  filterSlash,
+  slashZoekterm
+};
+//# sourceMappingURL=slashMenu.js.map

package/dist/admin/editors/slashMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/editors/slashMenu.ts"],"sourcesContent":["/**\n * Het \"/\"-menu van de teksteditor (8.5) — het idee komt uit AstraCMS (Novel): typ \"/\" en kies een\n * kop, lijst, citaat, foto of tabel, met zoekwoorden als ingang. Eigen, kleine implementatie op\n * TipTap (zonder @tiptap/suggestion): detectie en filtering zijn puur en getest; het menu zelf\n * rendert de editor.\n */\nexport interface SlashItem {\n  id: \"tekst\" | \"kop\" | \"subkop\" | \"kleineKop\" | \"lijst\" | \"nummers\" | \"citaat\" | \"lijn\" | \"tabel\" | \"foto\" | \"link\";\n  titel: string;\n  uitleg: string;\n  icoon: string;\n  zoekwoorden: string[];\n}\n\nexport const SLASH_ITEMS: SlashItem[] = [\n  { id: \"tekst\", titel: \"Tekst\", uitleg: \"Gewone alinea\", icoon: \"¶\", zoekwoorden: [\"alinea\", \"paragraaf\", \"normaal\", \"p\"] },\n  { id: \"kop\", titel: \"Kop\", uitleg: \"Grote tussenkop\", icoon: \"H2\", zoekwoorden: [\"titel\", \"heading\", \"h2\", \"kop\"] },\n  { id: \"subkop\", titel: \"Subkop\", uitleg: \"Kleinere tussenkop\", icoon: \"H3\", zoekwoorden: [\"h3\", \"subtitel\", \"kop\"] },\n  { id: \"kleineKop\", titel: \"Kleine kop\", uitleg: \"Kopje boven een alinea\", icoon: \"H4\", zoekwoorden: [\"h4\", \"kopje\"] },\n  { id: \"lijst\", titel: \"Opsomming\", uitleg: \"Lijst met bolletjes\", icoon: \"•\", zoekwoorden: [\"lijst\", \"bullets\", \"punten\", \"ul\"] },\n  { id: \"nummers\", titel: \"Genummerde lijst\", uitleg: \"1, 2, 3 …\", icoon: \"1.\", zoekwoorden: [\"lijst\", \"nummers\", \"stappen\", \"ol\"] },\n  { id: \"citaat\", titel: \"Citaat\", uitleg: \"Uitgelichte tekst of quote\", icoon: \"❝\", zoekwoorden: [\"quote\", \"aanhaling\"] },\n  { id: \"lijn\", titel: \"Scheidingslijn\", uitleg: \"Horizontale lijn\", icoon: \"—\", zoekwoorden: [\"lijn\", \"streep\", \"hr\", \"scheiding\"] },\n  { id: \"tabel\", titel: \"Tabel\", uitleg: \"Tabel van 3 × 3\", icoon: \"▦\", zoekwoorden: [\"tabel\", \"table\", \"prijzen\", \"schema\"] },\n  { id: \"foto\", titel: \"Foto\", uitleg: \"Uit de mediabibliotheek of uploaden\", icoon: \"🖼\", zoekwoorden: [\"afbeelding\", \"beeld\", \"plaatje\", \"image\", \"foto\"] },\n  { id: \"link\", titel: \"Link\", uitleg: \"Naar een pagina of website\", icoon: \"🔗\", zoekwoorden: [\"url\", \"koppeling\", \"adres\"] },\n];\n\n/** Staat er \"/zoekterm\" vlak vóór de cursor (aan het begin of na een spatie)? Geeft de zoekterm. */\nexport function slashZoekterm(tekstVoorCursor: string): string | null {\n  const m = /(?:^|\\s)\\/([\\p{L}\\d]{0,24})$/u.exec(tekstVoorCursor);\n  return m ? m[1] : null;\n}\n\n/** Items die bij de zoekterm passen; begint-met eerst. */\nexport function filterSlash(items: SlashItem[], term: string): SlashItem[] {\n  const q = term.trim().toLowerCase();\n  if (!q) return items;\n  const score = (it: SlashItem) => {\n    const velden = [it.titel.toLowerCase(), ...it.zoekwoorden];\n    if (velden.some((v) => v.startsWith(q))) return 2;\n    if (velden.some((v) => v.includes(q))) return 1;\n    return 0;\n  };\n  return items\n    .map((it) => ({ it, s: score(it) }))\n    .filter((x) => x.s > 0)\n    .sort((a, b) => b.s - a.s)\n    .map((x) => x.it);\n}\n"],"mappings":"AAcO,MAAM,cAA2B;AAAA,EACtC,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,iBAAiB,OAAO,QAAK,aAAa,CAAC,UAAU,aAAa,WAAW,GAAG,EAAE;AAAA,EACzH,EAAE,IAAI,OAAO,OAAO,OAAO,QAAQ,mBAAmB,OAAO,MAAM,aAAa,CAAC,SAAS,WAAW,MAAM,KAAK,EAAE;AAAA,EAClH,EAAE,IAAI,UAAU,OAAO,UAAU,QAAQ,sBAAsB,OAAO,MAAM,aAAa,CAAC,MAAM,YAAY,KAAK,EAAE;AAAA,EACnH,EAAE,IAAI,aAAa,OAAO,cAAc,QAAQ,0BAA0B,OAAO,MAAM,aAAa,CAAC,MAAM,OAAO,EAAE;AAAA,EACpH,EAAE,IAAI,SAAS,OAAO,aAAa,QAAQ,uBAAuB,OAAO,UAAK,aAAa,CAAC,SAAS,WAAW,UAAU,IAAI,EAAE;AAAA,EAChI,EAAE,IAAI,WAAW,OAAO,oBAAoB,QAAQ,kBAAa,OAAO,MAAM,aAAa,CAAC,SAAS,WAAW,WAAW,IAAI,EAAE;AAAA,EACjI,EAAE,IAAI,UAAU,OAAO,UAAU,QAAQ,8BAA8B,OAAO,UAAK,aAAa,CAAC,SAAS,WAAW,EAAE;AAAA,EACvH,EAAE,IAAI,QAAQ,OAAO,kBAAkB,QAAQ,oBAAoB,OAAO,UAAK,aAAa,CAAC,QAAQ,UAAU,MAAM,WAAW,EAAE;AAAA,EAClI,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,sBAAmB,OAAO,UAAK,aAAa,CAAC,SAAS,SAAS,WAAW,QAAQ,EAAE;AAAA,EAC3H,EAAE,IAAI,QAAQ,OAAO,QAAQ,QAAQ,uCAAuC,OAAO,aAAM,aAAa,CAAC,cAAc,SAAS,WAAW,SAAS,MAAM,EAAE;AAAA,EAC1J,EAAE,IAAI,QAAQ,OAAO,QAAQ,QAAQ,8BAA8B,OAAO,aAAM,aAAa,CAAC,OAAO,aAAa,OAAO,EAAE;AAC7H;AAGO,SAAS,cAAc,iBAAwC;AACpE,QAAM,IAAI,gCAAgC,KAAK,eAAe;AAC9D,SAAO,IAAI,EAAE,CAAC,IAAI;AACpB;AAGO,SAAS,YAAY,OAAoB,MAA2B;AACzE,QAAM,IAAI,KAAK,KAAK,EAAE,YAAY;AAClC,MAAI,CAAC,EAAG,QAAO;AACf,QAAM,QAAQ,CAAC,OAAkB;AAC/B,UAAM,SAAS,CAAC,GAAG,MAAM,YAAY,GAAG,GAAG,GAAG,WAAW;AACzD,QAAI,OAAO,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,EAAG,QAAO;AAChD,QAAI,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAG,QAAO;AAC9C,WAAO;AAAA,EACT;AACA,SAAO,MACJ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,EAAE,EAAE,EAAE,EAClC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,EACrB,KAAK,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,EACxB,IAAI,CAAC,MAAM,EAAE,EAAE;AACpB;","names":[]}

package/dist/admin/editors/useRijkeTekst.d.ts

@@ -0,0 +1,48 @@
+import { type Editor } from "@tiptap/react";
+import { type ReactNode } from "react";
+/**
+ * De kern van de rich-text-editor (8.6), gedeeld door het beheer (`RichTextEditor`, vaste
+ * werkbalk) en het bewerken op de site zelf (`InlineRijkeTekst`, zwevende werkbalk). Tot 8.5 had
+ * de site een eigen, kalere editor (contentEditable + execCommand): geen slash-menu, geen foto's,
+ * geen tabellen. Nu is het één editor met twee jassen.
+ *
+ * Output wordt client-side met DOMPurify gesanitized; de server sanitized nogmaals bij publiceren
+ * (server/sanitize.ts) — nooit op de client vertrouwen.
+ */
+export declare function useRijkeTekst({ value, onChange, siteId, editorClass, autofocus, onEscape, alleenVensterScroll, }: {
+    value: string;
+    onChange: (html: string) => void;
+    /** Nodig voor foto's (uploaden, plakken, kiezen). */
+    siteId?: string;
+    /** Klassen op het bewerkbare oppervlak (de ProseMirror-root). */
+    editorClass?: string;
+    autofocus?: boolean;
+    /** Escape buiten een open slash-menu (inline: klaar met bewerken). */
+    onEscape?: () => void;
+    /**
+     * Alleen het venster scrollen om de cursor in beeld te houden (inline op de site). ProseMirror
+     * loopt anders alle ouders langs en zet `scrollTop` op containers van de site; met
+     * `scroll-behavior: smooth` gleed de pagina dan bij elke Enter naar beneden.
+     */
+    alleenVensterScroll?: boolean;
+}): {
+    editor: Editor | null;
+    overlays: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+    openLink: () => void;
+    openFoto: () => void;
+    ietsOpen: boolean;
+};
+/**
+ * TipTap 3 (StarterKit `trailingNode`) houdt altijd een lege alinea achteraan, zodat je na een
+ * lijst of tabel verder kunt typen. Prima in de editor, maar niet in de opgeslagen tekst: daar werd
+ * het extra witruimte onder elk blok.
+ */
+export declare function zonderLegeStaart(html: string): string;
+/** Werkbalkknop die de selectie in de editor laat staan (mousedown neemt geen focus). */
+export declare function RteKnop({ on, active, label, title, className }: {
+    on: () => void;
+    active?: boolean;
+    label: ReactNode;
+    title?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/admin/editors/useRijkeTekst.js

@@ -0,0 +1,310 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import StarterKit from "@tiptap/starter-kit";
+import { TableKit } from "@tiptap/extension-table";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import DOMPurify from "dompurify";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../ui/cn.js";
+import { MediaPickerDialog } from "../media/MediaPicker.js";
+import { useToast } from "../ui/toast.js";
+import { uploadImage } from "../lib/upload.js";
+import { filterSlash, SLASH_ITEMS, slashZoekterm } from "./slashMenu.js";
+import { LinkDialog } from "../ui/LinkDialog.js";
+import { FontSize } from "./fontSizeExtension.js";
+function useRijkeTekst({
+  value,
+  onChange,
+  siteId,
+  editorClass,
+  autofocus = false,
+  onEscape,
+  alleenVensterScroll = false
+}) {
+  const { toast } = useToast();
+  const [slash, setSlash] = useState(null);
+  const [slashIndex, setSlashIndex] = useState(0);
+  const slashRef = useRef({
+    open: false,
+    items: [],
+    index: 0,
+    kies: () => {
+    },
+    sluit: () => {
+    }
+  });
+  const afgewezenRef = useRef(null);
+  const [fotoKiezer, setFotoKiezer] = useState(false);
+  const plaatsFotosRef = useRef(() => {
+  });
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  const bepaalSlash = useCallback((ed) => {
+    const { selection } = ed.state;
+    const { $from, empty } = selection;
+    if (!empty || !$from.parent.isTextblock || $from.parent.type.name === "codeBlock") return setSlash(null);
+    const term = slashZoekterm($from.parent.textBetween(0, $from.parentOffset, void 0, "\uFFFC"));
+    if (term === null) {
+      afgewezenRef.current = null;
+      return setSlash(null);
+    }
+    const van = $from.pos - term.length - 1;
+    if (afgewezenRef.current === van) return setSlash(null);
+    const c = ed.view.coordsAtPos($from.pos);
+    setSlash({ van, tot: $from.pos, term, x: c.left, y: c.bottom, boven: c.top });
+  }, []);
+  const editor = useEditor({
+    immediatelyRender: false,
+    autofocus: autofocus ? "end" : false,
+    extensions: [
+      // Tiptap 3 bundelt Link en Underline IN StarterKit. Los toevoegen geeft dubbele
+      // extensienamen (en stille gedragsfouten), dus: Underline komt uit StarterKit, en zijn Link
+      // zetten we uit omdat we die hieronder zelf configureren (geen open-on-click, eigen rel).
+      StarterKit.configure({ heading: { levels: [2, 3, 4] }, link: false }),
+      FontSize,
+      // Zonder deze extensie gooit TipTap een <table> bij het inladen weg (onbekende node) — een
+      // tabel uit de seed of een import overleefde dan geen enkele bewerking van dat blok.
+      TableKit.configure({ table: { resizable: false } }),
+      Link.configure({ openOnClick: false, autolink: true, HTMLAttributes: { rel: "noopener noreferrer nofollow" } }),
+      Image.configure({ inline: false, allowBase64: false, HTMLAttributes: { loading: "lazy", decoding: "async" } })
+    ],
+    content: value || "<p></p>",
+    onUpdate: ({ editor: editor2 }) => {
+      onChangeRef.current(zonderLegeStaart(DOMPurify.sanitize(editor2.getHTML())));
+      bepaalSlash(editor2);
+    },
+    onSelectionUpdate: ({ editor: editor2 }) => bepaalSlash(editor2),
+    onBlur: () => setSlash(null),
+    editorProps: {
+      handleKeyDown: (view, e) => {
+        if (alleenVensterScroll && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          if (e.key === "End" && view.endOfTextblock("forward")) return true;
+          if (e.key === "Home" && view.endOfTextblock("backward")) return true;
+        }
+        const s = slashRef.current;
+        if (!s.open) {
+          if (e.key === "Escape" && onEscapeRef.current) {
+            onEscapeRef.current();
+            return true;
+          }
+          return false;
+        }
+        if (e.key === "Escape") {
+          s.sluit();
+          return true;
+        }
+        if (s.items.length === 0) return false;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          const n = s.items.length;
+          setSlashIndex((i) => e.key === "ArrowDown" ? (i + 1) % n : (i - 1 + n) % n);
+          return true;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          s.kies(s.items[Math.min(s.index, s.items.length - 1)]);
+          return true;
+        }
+        return false;
+      },
+      // 8.5: foto's plakken of erin slepen — upload naar de mediabibliotheek en plaats ze meteen.
+      handlePaste: (_view, e) => {
+        const files = [...e.clipboardData?.files ?? []].filter((f) => f.type.startsWith("image/"));
+        if (!siteId || files.length === 0) return false;
+        e.preventDefault();
+        plaatsFotosRef.current(files);
+        return true;
+      },
+      handleDrop: (view, e, _slice, verplaatst) => {
+        if (verplaatst) return false;
+        const files = [...e.dataTransfer?.files ?? []].filter((f) => f.type.startsWith("image/"));
+        if (!siteId || files.length === 0) return false;
+        e.preventDefault();
+        plaatsFotosRef.current(files, view.posAtCoords({ left: e.clientX, top: e.clientY })?.pos);
+        return true;
+      },
+      handleScrollToSelection: alleenVensterScroll ? (view) => {
+        const c = view.coordsAtPos(view.state.selection.head);
+        const onder = 170;
+        const boven = 110;
+        if (c.bottom > window.innerHeight - onder) window.scrollBy({ top: c.bottom - window.innerHeight + onder, behavior: "instant" });
+        else if (c.top < boven) window.scrollBy({ top: c.top - boven, behavior: "instant" });
+        return true;
+      } : void 0,
+      attributes: { class: editorClass ?? "", spellcheck: "true" }
+    }
+  });
+  const [linkOpen, setLinkOpen] = useState(false);
+  const openLink = useCallback(() => setLinkOpen(true), []);
+  const openFoto = useCallback(() => setFotoKiezer(true), []);
+  const zetLink = useCallback(
+    (href, opties) => {
+      if (!editor) return;
+      if (href === null) editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      else editor.chain().focus().extendMarkRange("link").setLink({ href, target: opties?.nieuwTabblad ? "_blank" : null }).run();
+    },
+    [editor]
+  );
+  const zichtbareItems = slash ? filterSlash(SLASH_ITEMS.filter((it) => it.id !== "foto" || siteId), slash.term) : [];
+  useEffect(() => setSlashIndex(0), [slash?.term, slash?.van]);
+  const kiesSlash = useCallback(
+    (it) => {
+      if (!editor || !slash) return;
+      const c = editor.chain().focus().deleteRange({ from: slash.van, to: slash.tot });
+      setSlash(null);
+      switch (it.id) {
+        case "tekst":
+          return c.setParagraph().run();
+        case "kop":
+          return c.setHeading({ level: 2 }).run();
+        case "subkop":
+          return c.setHeading({ level: 3 }).run();
+        case "kleineKop":
+          return c.setHeading({ level: 4 }).run();
+        case "lijst":
+          return c.toggleBulletList().run();
+        case "nummers":
+          return c.toggleOrderedList().run();
+        case "citaat":
+          return c.toggleBlockquote().run();
+        case "lijn":
+          return c.setHorizontalRule().run();
+        case "tabel":
+          return c.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+        case "foto":
+          c.run();
+          return setFotoKiezer(true);
+        case "link":
+          c.run();
+          return setLinkOpen(true);
+      }
+    },
+    [editor, slash]
+  );
+  slashRef.current = {
+    open: Boolean(slash),
+    items: zichtbareItems,
+    index: slashIndex,
+    kies: kiesSlash,
+    sluit: () => {
+      afgewezenRef.current = slash?.van ?? null;
+      setSlash(null);
+    }
+  };
+  plaatsFotosRef.current = (files, pos) => {
+    if (!editor || !siteId) return;
+    for (const file of files) {
+      if (file.type === "image/svg+xml") {
+        toast({ title: "SVG kan hier niet", description: "Gebruik een foto (jpg, png, webp).", tone: "error" });
+        continue;
+      }
+      toast({ title: `Foto uploaden\u2026`, description: file.name });
+      void uploadImage(siteId, file).then(({ url }) => {
+        const img = new window.Image();
+        img.src = url;
+        const plaats = () => {
+          const chain = editor.chain().focus();
+          (pos !== void 0 ? chain.insertContentAt(pos, { type: "image", attrs: { src: url, alt: "" } }) : chain.setImage({ src: url, alt: "" })).run();
+          toast({ title: "Foto geplaatst", description: "Geef hem in Media een korte beschrijving (alt-tekst); die verschijnt dan vanzelf bij deze foto, voor slechtzienden en Google.", tone: "success" });
+        };
+        img.onload = plaats;
+        img.onerror = plaats;
+      }).catch((e) => toast({ title: "Uploaden mislukt", description: e.message, tone: "error" }));
+    }
+  };
+  const overlays = editor ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(BubbleMenu, { editor, className: "xicms-bubbel", options: { placement: "top" }, children: [
+      /* @__PURE__ */ jsx(RteKnop, { on: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), label: "B", title: "Vet" }),
+      /* @__PURE__ */ jsx(RteKnop, { on: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), label: "I", title: "Cursief" }),
+      /* @__PURE__ */ jsx(RteKnop, { on: () => editor.chain().focus().toggleUnderline().run(), active: editor.isActive("underline"), label: /* @__PURE__ */ jsx("span", { style: { textDecoration: "underline" }, children: "U" }), title: "Onderstrepen" }),
+      /* @__PURE__ */ jsx(RteKnop, { on: openLink, active: editor.isActive("link"), label: "\u{1F517}", title: "Link" }),
+      /* @__PURE__ */ jsx(RteKnop, { on: () => editor.chain().focus().unsetAllMarks().run(), label: "\u2A2F", title: "Opmaak weghalen" })
+    ] }),
+    slash && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Invoegen",
+        className: "xicms-slash",
+        style: {
+          left: Math.min(slash.x, (typeof window !== "undefined" ? window.innerWidth : 1200) - 280),
+          // Te weinig ruimte onder de cursor (onderaan het scherm): klap omhoog open.
+          ...typeof window !== "undefined" && slash.y + 330 > window.innerHeight ? { bottom: window.innerHeight - slash.boven + 6 } : { top: slash.y + 6 }
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: zichtbareItems.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "xicms-slash__leeg", children: [
+          "Niets gevonden voor \u201C",
+          slash.term,
+          "\u201D"
+        ] }) : zichtbareItems.map((it, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": i === slashIndex,
+            className: "xicms-slash__item",
+            onMouseEnter: () => setSlashIndex(i),
+            onClick: () => kiesSlash(it),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "xicms-slash__icoon", "aria-hidden": true, children: it.icoon }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("span", { className: "xicms-slash__titel", children: it.titel }),
+                /* @__PURE__ */ jsx("span", { className: "xicms-slash__uitleg", children: it.uitleg })
+              ] })
+            ]
+          },
+          it.id
+        ))
+      }
+    ),
+    siteId && /* @__PURE__ */ jsx(
+      MediaPickerDialog,
+      {
+        siteId,
+        open: fotoKiezer,
+        onOpenChange: setFotoKiezer,
+        onSelect: (m) => editor.chain().focus().setImage({ src: m.url, alt: m.alt ?? "" }).run()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LinkDialog,
+      {
+        open: linkOpen,
+        onOpenChange: setLinkOpen,
+        siteId,
+        huidig: editor.getAttributes("link").href ?? void 0,
+        huidigNieuwTabblad: editor.isActive("link") ? editor.getAttributes("link").target === "_blank" : void 0,
+        onKlaar: zetLink
+      }
+    )
+  ] }) : null;
+  const ietsOpen = Boolean(slash) || linkOpen || fotoKiezer;
+  return { editor, overlays, openLink, openFoto, ietsOpen };
+}
+function zonderLegeStaart(html) {
+  return html.replace(/(?:<p><\/p>|<p><br\s*\/?><\/p>)+$/i, "");
+}
+function RteKnop({ on, active, label, title, className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      "aria-pressed": active ? true : void 0,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: on,
+      className: cn(className ?? "xicms-admin-btn h-8 min-w-8 rounded px-2 text-sm hover:bg-slate-100", active && (className ? "is-actief" : "bg-slate-200 font-semibold")),
+      children: label
+    }
+  );
+}
+export {
+  RteKnop,
+  useRijkeTekst,
+  zonderLegeStaart
+};
+//# sourceMappingURL=useRijkeTekst.js.map

package/dist/admin/editors/useRijkeTekst.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/editors/useRijkeTekst.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEditor, type Editor } from \"@tiptap/react\";\nimport { BubbleMenu } from \"@tiptap/react/menus\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport Link from \"@tiptap/extension-link\";\nimport Image from \"@tiptap/extension-image\";\nimport DOMPurify from \"dompurify\";\nimport { useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../ui/cn\";\nimport { MediaPickerDialog } from \"../media/MediaPicker\";\nimport { useToast } from \"../ui/toast\";\nimport { uploadImage } from \"../lib/upload\";\nimport { filterSlash, SLASH_ITEMS, slashZoekterm, type SlashItem } from \"./slashMenu\";\nimport { LinkDialog } from \"../ui/LinkDialog\";\nimport { FontSize } from \"./fontSizeExtension\";\n\n/**\n * De kern van de rich-text-editor (8.6), gedeeld door het beheer (`RichTextEditor`, vaste\n * werkbalk) en het bewerken op de site zelf (`InlineRijkeTekst`, zwevende werkbalk). Tot 8.5 had\n * de site een eigen, kalere editor (contentEditable + execCommand): geen slash-menu, geen foto's,\n * geen tabellen. Nu is het één editor met twee jassen.\n *\n * Output wordt client-side met DOMPurify gesanitized; de server sanitized nogmaals bij publiceren\n * (server/sanitize.ts) — nooit op de client vertrouwen.\n */\nexport function useRijkeTekst({\n  value,\n  onChange,\n  siteId,\n  editorClass,\n  autofocus = false,\n  onEscape,\n  alleenVensterScroll = false,\n}: {\n  value: string;\n  onChange: (html: string) => void;\n  /** Nodig voor foto's (uploaden, plakken, kiezen). */\n  siteId?: string;\n  /** Klassen op het bewerkbare oppervlak (de ProseMirror-root). */\n  editorClass?: string;\n  autofocus?: boolean;\n  /** Escape buiten een open slash-menu (inline: klaar met bewerken). */\n  onEscape?: () => void;\n  /**\n   * Alleen het venster scrollen om de cursor in beeld te houden (inline op de site). ProseMirror\n   * loopt anders alle ouders langs en zet `scrollTop` op containers van de site; met\n   * `scroll-behavior: smooth` gleed de pagina dan bij elke Enter naar beneden.\n   */\n  alleenVensterScroll?: boolean;\n}) {\n  const { toast } = useToast();\n  /**\n   * \"/\"-menu (8.5). Staat in een ref zodat de TipTap-keyhandler (één keer gemaakt) altijd de\n   * actuele toestand leest.\n   */\n  const [slash, setSlash] = useState<{ van: number; tot: number; term: string; x: number; y: number; boven: number } | null>(null);\n  const [slashIndex, setSlashIndex] = useState(0);\n  const slashRef = useRef<{ open: boolean; items: SlashItem[]; index: number; kies: (it: SlashItem) => void; sluit: () => void }>({\n    open: false,\n    items: [],\n    index: 0,\n    kies: () => {},\n    sluit: () => {},\n  });\n  const afgewezenRef = useRef<number | null>(null);\n  const [fotoKiezer, setFotoKiezer] = useState(false);\n  const plaatsFotosRef = useRef<(files: File[], pos?: number) => void>(() => {});\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  const bepaalSlash = useCallback((ed: Editor) => {\n    const { selection } = ed.state;\n    const { $from, empty } = selection;\n    if (!empty || !$from.parent.isTextblock || $from.parent.type.name === \"codeBlock\") return setSlash(null);\n    const term = slashZoekterm($from.parent.textBetween(0, $from.parentOffset, undefined, \"\"));\n    if (term === null) {\n      afgewezenRef.current = null;\n      return setSlash(null);\n    }\n    const van = $from.pos - term.length - 1;\n    if (afgewezenRef.current === van) return setSlash(null);\n    const c = ed.view.coordsAtPos($from.pos);\n    setSlash({ van, tot: $from.pos, term, x: c.left, y: c.bottom, boven: c.top });\n  }, []);\n\n  const editor = useEditor({\n    immediatelyRender: false,\n    autofocus: autofocus ? \"end\" : false,\n    extensions: [\n      // Tiptap 3 bundelt Link en Underline IN StarterKit. Los toevoegen geeft dubbele\n      // extensienamen (en stille gedragsfouten), dus: Underline komt uit StarterKit, en zijn Link\n      // zetten we uit omdat we die hieronder zelf configureren (geen open-on-click, eigen rel).\n      StarterKit.configure({ heading: { levels: [2, 3, 4] }, link: false }),\n      FontSize,\n      // Zonder deze extensie gooit TipTap een <table> bij het inladen weg (onbekende node) — een\n      // tabel uit de seed of een import overleefde dan geen enkele bewerking van dat blok.\n      TableKit.configure({ table: { resizable: false } }),\n      Link.configure({ openOnClick: false, autolink: true, HTMLAttributes: { rel: \"noopener noreferrer nofollow\" } }),\n      Image.configure({ inline: false, allowBase64: false, HTMLAttributes: { loading: \"lazy\", decoding: \"async\" } }),\n    ],\n    content: value || \"<p></p>\",\n    onUpdate: ({ editor }) => {\n      onChangeRef.current(zonderLegeStaart(DOMPurify.sanitize(editor.getHTML())));\n      bepaalSlash(editor);\n    },\n    onSelectionUpdate: ({ editor }) => bepaalSlash(editor),\n    onBlur: () => setSlash(null),\n    editorProps: {\n      handleKeyDown: (view, e) => {\n        // Inline op de site: End/Home met de cursor al aan het eind/begin liet Chrome de hele\n        // pagina naar onder/boven scrollen (de toets \"viel door\" naar het document).\n        if (alleenVensterScroll && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {\n          if (e.key === \"End\" && view.endOfTextblock(\"forward\")) return true;\n          if (e.key === \"Home\" && view.endOfTextblock(\"backward\")) return true;\n        }\n        const s = slashRef.current;\n        if (!s.open) {\n          if (e.key === \"Escape\" && onEscapeRef.current) {\n            onEscapeRef.current();\n            return true;\n          }\n          return false;\n        }\n        if (e.key === \"Escape\") {\n          s.sluit();\n          return true;\n        }\n        if (s.items.length === 0) return false;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          const n = s.items.length;\n          setSlashIndex((i) => (e.key === \"ArrowDown\" ? (i + 1) % n : (i - 1 + n) % n));\n          return true;\n        }\n        if (e.key === \"Enter\" || e.key === \"Tab\") {\n          s.kies(s.items[Math.min(s.index, s.items.length - 1)]);\n          return true;\n        }\n        return false;\n      },\n      // 8.5: foto's plakken of erin slepen — upload naar de mediabibliotheek en plaats ze meteen.\n      handlePaste: (_view, e) => {\n        const files = [...(e.clipboardData?.files ?? [])].filter((f) => f.type.startsWith(\"image/\"));\n        if (!siteId || files.length === 0) return false;\n        e.preventDefault();\n        plaatsFotosRef.current(files);\n        return true;\n      },\n      handleDrop: (view, e, _slice, verplaatst) => {\n        if (verplaatst) return false;\n        const files = [...(e.dataTransfer?.files ?? [])].filter((f) => f.type.startsWith(\"image/\"));\n        if (!siteId || files.length === 0) return false;\n        e.preventDefault();\n        plaatsFotosRef.current(files, view.posAtCoords({ left: e.clientX, top: e.clientY })?.pos);\n        return true;\n      },\n      handleScrollToSelection: alleenVensterScroll\n        ? (view) => {\n            const c = view.coordsAtPos(view.state.selection.head);\n            // Onder: ruimte voor de editorbalk en het slash-menu; boven: de werkbalk boven het veld.\n            const onder = 170;\n            const boven = 110;\n            if (c.bottom > window.innerHeight - onder) window.scrollBy({ top: c.bottom - window.innerHeight + onder, behavior: \"instant\" });\n            else if (c.top < boven) window.scrollBy({ top: c.top - boven, behavior: \"instant\" });\n            return true;\n          }\n        : undefined,\n      attributes: { class: editorClass ?? \"\", spellcheck: \"true\" },\n    },\n  });\n\n  // 8.2: een eigen dialoog (pagina kiezen of adres typen) i.p.v. window.prompt.\n  const [linkOpen, setLinkOpen] = useState(false);\n  const openLink = useCallback(() => setLinkOpen(true), []);\n  const openFoto = useCallback(() => setFotoKiezer(true), []);\n  const zetLink = useCallback(\n    (href: string | null, opties?: { nieuwTabblad: boolean }) => {\n      if (!editor) return;\n      if (href === null) editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n      else editor.chain().focus().extendMarkRange(\"link\").setLink({ href, target: opties?.nieuwTabblad ? \"_blank\" : null }).run();\n    },\n    [editor],\n  );\n\n  const zichtbareItems = slash ? filterSlash(SLASH_ITEMS.filter((it) => it.id !== \"foto\" || siteId), slash.term) : [];\n  useEffect(() => setSlashIndex(0), [slash?.term, slash?.van]);\n\n  const kiesSlash = useCallback(\n    (it: SlashItem) => {\n      if (!editor || !slash) return;\n      const c = editor.chain().focus().deleteRange({ from: slash.van, to: slash.tot });\n      setSlash(null);\n      switch (it.id) {\n        case \"tekst\": return c.setParagraph().run();\n        case \"kop\": return c.setHeading({ level: 2 }).run();\n        case \"subkop\": return c.setHeading({ level: 3 }).run();\n        case \"kleineKop\": return c.setHeading({ level: 4 }).run();\n        case \"lijst\": return c.toggleBulletList().run();\n        case \"nummers\": return c.toggleOrderedList().run();\n        case \"citaat\": return c.toggleBlockquote().run();\n        case \"lijn\": return c.setHorizontalRule().run();\n        case \"tabel\": return c.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();\n        case \"foto\":\n          c.run();\n          return setFotoKiezer(true);\n        case \"link\":\n          c.run();\n          return setLinkOpen(true);\n      }\n    },\n    [editor, slash],\n  );\n  slashRef.current = {\n    open: Boolean(slash),\n    items: zichtbareItems,\n    index: slashIndex,\n    kies: kiesSlash,\n    sluit: () => {\n      afgewezenRef.current = slash?.van ?? null;\n      setSlash(null);\n    },\n  };\n\n  plaatsFotosRef.current = (files: File[], pos?: number) => {\n    if (!editor || !siteId) return;\n    for (const file of files) {\n      if (file.type === \"image/svg+xml\") {\n        toast({ title: \"SVG kan hier niet\", description: \"Gebruik een foto (jpg, png, webp).\", tone: \"error\" });\n        continue;\n      }\n      toast({ title: `Foto uploaden…`, description: file.name });\n      void uploadImage(siteId, file)\n        .then(({ url }) => {\n          // Vooraf laden (idee uit AstraCMS): de foto verschijnt in één keer i.p.v. regel voor regel.\n          const img = new window.Image();\n          img.src = url;\n          const plaats = () => {\n            const chain = editor.chain().focus();\n            (pos !== undefined ? chain.insertContentAt(pos, { type: \"image\", attrs: { src: url, alt: \"\" } }) : chain.setImage({ src: url, alt: \"\" })).run();\n            toast({ title: \"Foto geplaatst\", description: \"Geef hem in Media een korte beschrijving (alt-tekst); die verschijnt dan vanzelf bij deze foto, voor slechtzienden en Google.\", tone: \"success\" });\n          };\n          img.onload = plaats;\n          img.onerror = plaats;\n        })\n        .catch((e: Error) => toast({ title: \"Uploaden mislukt\", description: e.message, tone: \"error\" }));\n    }\n  };\n\n  /** Selectie-werkbalk, slash-menu en de dialogen — hetzelfde in beide jassen. */\n  const overlays: ReactNode = editor ? (\n    <>\n      {/* Selectie-werkbalk (8.5): de meest gebruikte opmaak zweeft boven geselecteerde tekst. */}\n      <BubbleMenu editor={editor} className=\"xicms-bubbel\" options={{ placement: \"top\" }}>\n        <RteKnop on={() => editor.chain().focus().toggleBold().run()} active={editor.isActive(\"bold\")} label=\"B\" title=\"Vet\" />\n        <RteKnop on={() => editor.chain().focus().toggleItalic().run()} active={editor.isActive(\"italic\")} label=\"I\" title=\"Cursief\" />\n        <RteKnop on={() => editor.chain().focus().toggleUnderline().run()} active={editor.isActive(\"underline\")} label={<span style={{ textDecoration: \"underline\" }}>U</span>} title=\"Onderstrepen\" />\n        <RteKnop on={openLink} active={editor.isActive(\"link\")} label=\"🔗\" title=\"Link\" />\n        <RteKnop on={() => editor.chain().focus().unsetAllMarks().run()} label=\"⨯\" title=\"Opmaak weghalen\" />\n      </BubbleMenu>\n      {slash && (\n        <div\n          role=\"listbox\"\n          aria-label=\"Invoegen\"\n          className=\"xicms-slash\"\n          style={{\n            left: Math.min(slash.x, (typeof window !== \"undefined\" ? window.innerWidth : 1200) - 280),\n            // Te weinig ruimte onder de cursor (onderaan het scherm): klap omhoog open.\n            ...(typeof window !== \"undefined\" && slash.y + 330 > window.innerHeight\n              ? { bottom: window.innerHeight - slash.boven + 6 }\n              : { top: slash.y + 6 }),\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n        >\n          {zichtbareItems.length === 0 ? (\n            <p className=\"xicms-slash__leeg\">Niets gevonden voor &ldquo;{slash.term}&rdquo;</p>\n          ) : (\n            zichtbareItems.map((it, i) => (\n              <button\n                key={it.id}\n                type=\"button\"\n                role=\"option\"\n                aria-selected={i === slashIndex}\n                className=\"xicms-slash__item\"\n                onMouseEnter={() => setSlashIndex(i)}\n                onClick={() => kiesSlash(it)}\n              >\n                <span className=\"xicms-slash__icoon\" aria-hidden>{it.icoon}</span>\n                <span>\n                  <span className=\"xicms-slash__titel\">{it.titel}</span>\n                  <span className=\"xicms-slash__uitleg\">{it.uitleg}</span>\n                </span>\n              </button>\n            ))\n          )}\n        </div>\n      )}\n      {siteId && (\n        <MediaPickerDialog\n          siteId={siteId}\n          open={fotoKiezer}\n          onOpenChange={setFotoKiezer}\n          onSelect={(m) => editor.chain().focus().setImage({ src: m.url, alt: m.alt ?? \"\" }).run()}\n        />\n      )}\n      <LinkDialog\n        open={linkOpen}\n        onOpenChange={setLinkOpen}\n        siteId={siteId}\n        huidig={(editor.getAttributes(\"link\").href as string | undefined) ?? undefined}\n        huidigNieuwTabblad={editor.isActive(\"link\") ? editor.getAttributes(\"link\").target === \"_blank\" : undefined}\n        onKlaar={zetLink}\n      />\n    </>\n  ) : null;\n\n  /** Staat er een menu of dialoog van deze editor open? (Inline: dan niet \"klaar\" bij een klik.) */\n  const ietsOpen = Boolean(slash) || linkOpen || fotoKiezer;\n\n  return { editor, overlays, openLink, openFoto, ietsOpen };\n}\n\n/**\n * TipTap 3 (StarterKit `trailingNode`) houdt altijd een lege alinea achteraan, zodat je na een\n * lijst of tabel verder kunt typen. Prima in de editor, maar niet in de opgeslagen tekst: daar werd\n * het extra witruimte onder elk blok.\n */\nexport function zonderLegeStaart(html: string): string {\n  return html.replace(/(?:<p><\\/p>|<p><br\\s*\\/?><\\/p>)+$/i, \"\");\n}\n\n/** Werkbalkknop die de selectie in de editor laat staan (mousedown neemt geen focus). */\nexport function RteKnop({ on, active, label, title, className }: { on: () => void; active?: boolean; label: ReactNode; title?: string; className?: string }) {\n  return (\n    <button\n      type=\"button\"\n      title={title}\n      aria-label={title}\n      aria-pressed={active ? true : undefined}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={on}\n      // Met eigen className (de donkere werkbalk op de site) alleen `is-actief`; die jas kleurt zelf.\n      className={cn(className ?? \"xicms-admin-btn h-8 min-w-8 rounded px-2 text-sm hover:bg-slate-100\", active && (className ? \"is-actief\" : \"bg-slate-200 font-semibold\"))}\n    >\n      {label}\n    </button>\n  );\n}\n"],"mappings":"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","names":["editor"]}

package/dist/admin/forms/FormsPanel.d.ts

@@ -2,11 +2,20 @@ import type { Timestamp } from "firebase/firestore";
 export declare function FormsPanel({ siteId }: {
     siteId: string;
 }): import("react").JSX.Element;
+/** "E-mailadres" → "emailadres"; uniek gemaakt met een volgnummer. Voldoet aan /^[a-zA-Z][a-zA-Z0-9_]*$/. */
+export declare function sleutelUitLabel(label: string, bezet: Set<string>): string;
 type Inzending = {
     id: string;
     values: Record<string, unknown>;
     createdAt?: Timestamp;
 };
-/** CSV met Excel-vriendelijke opmaak: BOM, puntkomma, alles gequoot. Kolommen = de velden van het formulier. */
-export declare function inzendingenCsv(velden: string[], subs: Inzending[]): string;
+type Kolom = string | {
+    name: string;
+    label: string;
+};
+/**
+ * CSV met Excel-vriendelijke opmaak: BOM, puntkomma, alles gequoot. Kolommen = de velden van het
+ * formulier, met hun LABEL als kop (8.2; was de technische sleutel, bv. "naam_1").
+ */
+export declare function inzendingenCsv(velden: Kolom[], subs: Inzending[]): string;
 export {};