@xiwebdesign/xicms-core 7.2.0 → 7.3.0

package/dist/admin/visual/VisualEditor.js

@@ -38,10 +38,14 @@ const GLOBAL_INLINE = [
   { selector: "[data-xicms-edit]", field: "", html: false, fromData: true }
 ];
 const inlineCoverageWarned = /* @__PURE__ */ new Set();
-function warnInlineCoverage(type, def, host) {
+function warnInlineCoverage(type, def, host, values) {
   if (process.env.NODE_ENV === "production" || !def || inlineCoverageWarned.has(type)) return;
   inlineCoverageWarned.add(type);
-  const missing = introspectToFields(def.schema, def.fields).filter((f) => f.type === "text" || f.type === "textarea").map((f) => f.key).filter((key) => !host.querySelector(`[data-xicms-edit="${key}"], [data-xicms-edit$=".${key}"]`));
+  const zichtbaar = host.textContent ?? "";
+  const missing = introspectToFields(def.schema, def.fields).filter((f) => f.type === "text" || f.type === "textarea").filter((f) => {
+    const waarde = getPath(values, f.key);
+    return typeof waarde === "string" && waarde.trim().length > 1 && zichtbaar.includes(waarde.trim());
+  }).map((f) => f.key).filter((key) => !host.querySelector(`[data-xicms-edit="${key}"], [data-xicms-edit$=".${key}"]`));
   if (missing.length > 0) {
     console.warn(
       `[xicms] blok "${type}": tekstveld(en) zonder inline-haak: ${missing.join(", ")} \u2014 voeg data-xicms-edit="<veld>" toe aan de Render zodat ze direct op de pagina bewerkbaar zijn.`
@@ -93,6 +97,7 @@ function VisualEditorInner({ onClose }) {
   const [locale, setLocale] = useState(urlLocale);
   const isTranslating = locale !== localeCfg.defaultLocale;
   const [draft, setDraft] = useState(null);
+  const [panelOpen, setPanelOpen] = useState(false);
   const [status, setStatus] = useState("loading");
   const [selectedKey, setSelectedKey] = useState(null);
   const [publishing, setPublishing] = useState(false);
@@ -245,6 +250,8 @@ function VisualEditorInner({ onClose }) {
     });
   }, [siteId, draftId]);
   const blocks = draft?.blocks ?? [];
+  const blocksRef = useRef(blocks);
+  blocksRef.current = blocks;
   const overlay = draft?.translations?.[locale];
   const displayBlocks = useMemo(
     () => isTranslating ? localizeBlocks(blocks, overlay) : blocks,
@@ -305,21 +312,59 @@ function VisualEditorInner({ onClose }) {
     },
     [isTranslating, setTranslation, commitInline]
   );
+  const [spots, setSpots] = useState([]);
+  const targetsRef = useRef([]);
+  const editingRef = useRef(null);
+  const stopInline = useCallback((el) => {
+    el.removeAttribute("contenteditable");
+    el.classList.remove("is-editing");
+    if (editingRef.current === el) editingRef.current = null;
+  }, []);
+  const startInline = useCallback((index) => {
+    const target = targetsRef.current[index];
+    if (!target) return;
+    const { el } = target;
+    if (editingRef.current && editingRef.current !== el) editingRef.current.blur();
+    el.setAttribute("contenteditable", "true");
+    el.setAttribute("spellcheck", "true");
+    el.classList.add("is-editing");
+    editingRef.current = el;
+    el.focus();
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }, []);
   useEffect(() => {
-    if (!selectedKey) return;
+    if (!selectedKey) {
+      targetsRef.current = [];
+      setSpots([]);
+      return;
+    }
     const host = canvasRef.current?.querySelector(`[data-ve-content="${selectedKey}"]`);
     if (!host) return;
-    const type = blocks.find((b) => b._key === selectedKey)?._type ?? "";
-    const specs = [...GLOBAL_INLINE];
-    warnInlineCoverage(String(type), registry.get(String(type)), host);
+    const geselecteerd = blocksRef.current.find((b) => b._key === selectedKey);
+    const type = geselecteerd?._type ?? "";
+    const def = registry.get(String(type));
+    warnInlineCoverage(String(type), def, host, geselecteerd ?? {});
+    const labels = /* @__PURE__ */ new Map();
+    if (def) {
+      try {
+        for (const f of introspectToFields(def.schema, def.fields)) labels.set(f.key, f.label);
+      } catch {
+      }
+    }
     const bound = /* @__PURE__ */ new Set();
     const bind = (el, field, html) => {
       if (el.dataset.veInline === "1") return;
       el.dataset.veInline = "1";
-      el.setAttribute("contenteditable", "true");
-      el.setAttribute("spellcheck", "true");
       el.classList.add("xicms-ve-inline");
-      el.addEventListener("blur", () => commitText(selectedKey, field, html ? DOMPurify.sanitize(el.innerHTML) : el.textContent ?? ""));
+      el.addEventListener("blur", () => {
+        commitText(selectedKey, field, html ? DOMPurify.sanitize(el.innerHTML) : el.textContent ?? "");
+        stopInline(el);
+      });
       if (html) {
         el.addEventListener("focus", () => {
           fmtElRef.current = el;
@@ -339,30 +384,57 @@ function VisualEditorInner({ onClose }) {
       });
       bound.add(el);
     };
+    const measure = () => {
+      const next = targetsRef.current.map(({ el, field }) => {
+        const r = el.getBoundingClientRect();
+        return {
+          top: Math.min(window.innerHeight - 22, Math.max(4, r.top + r.height / 2 - 9)),
+          left: Math.min(window.innerWidth - 22, Math.max(4, r.right + 6)),
+          title: `Bewerk: ${labels.get(field) ?? field}`
+        };
+      });
+      setSpots(
+        (prev) => prev.length === next.length && prev.every((p, i) => p.top === next[i].top && p.left === next[i].left && p.title === next[i].title) ? prev : next
+      );
+    };
     const apply = () => {
-      for (const m of specs) {
-        host.querySelectorAll(m.selector).forEach(
-          (el) => (
-            // Een expliciete `data-xicms-edit` wint altijd; anders het veld van de matcher.
-            bind(el, el.dataset.xicmsEdit ?? m.field, !!m.html)
-          )
-        );
+      const found = [];
+      for (const m of GLOBAL_INLINE) {
+        host.querySelectorAll(m.selector).forEach((el) => {
+          const field = el.dataset.xicmsEdit ?? m.field;
+          bind(el, field, !!m.html);
+          found.push({ el, field, html: !!m.html });
+        });
       }
+      targetsRef.current = found;
+      measure();
     };
     apply();
     const obs = new MutationObserver(() => {
       if (!draggingRef.current) apply();
     });
     obs.observe(host, { childList: true, subtree: true });
+    let frame = 0;
+    const onMove = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    window.addEventListener("scroll", onMove, { capture: true, passive: true });
+    window.addEventListener("resize", onMove, { passive: true });
     return () => {
       obs.disconnect();
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", onMove, { capture: true });
+      window.removeEventListener("resize", onMove);
       bound.forEach((el) => {
-        el.removeAttribute("contenteditable");
+        stopInline(el);
         el.classList.remove("xicms-ve-inline");
         delete el.dataset.veInline;
       });
+      targetsRef.current = [];
+      setSpots([]);
     };
-  }, [selectedKey, blocks, commitText, positionFmtBar]);
+  }, [selectedKey, commitText, positionFmtBar, stopInline]);
   const dirtySinceRef = useRef(null);
   useEffect(() => {
     if (!draft) return;
@@ -544,11 +616,33 @@ function VisualEditorInner({ onClose }) {
           Select,
           {
             value: locale,
-            onValueChange: setLocale,
+            onValueChange: (l) => {
+              setLocale(l);
+              if (l !== localeCfg.defaultLocale) setPanelOpen(true);
+            },
             options: localeCfg.locales.map((l) => ({ value: l, label: l === localeCfg.defaultLocale ? `${l} (standaard)` : l }))
           }
         )
       ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `xicms-ve__histbtn${panelOpen && !selectedKey ? " is-on" : ""}`,
+          onClick: () => {
+            if (panelOpen && !selectedKey) {
+              setPanelOpen(false);
+            } else {
+              setSelectedKey(null);
+              setPanelOpen(true);
+            }
+          },
+          title: "Pagina-instellingen (titel, SEO, versies)",
+          "aria-label": "Pagina-instellingen",
+          "aria-pressed": panelOpen && !selectedKey,
+          children: "\u2699"
+        }
+      ),
       /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve__histbtn", disabled: !canUndo, onClick: undo, title: "Ongedaan maken (Ctrl+Z)", "aria-label": "Ongedaan maken (Ctrl+Z)", children: "\u21B6" }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve__histbtn", disabled: !canRedo, onClick: redo, title: "Opnieuw (Ctrl+Shift+Z)", "aria-label": "Opnieuw (Ctrl+Shift+Z)", children: "\u21B7" }),
       /* @__PURE__ */ jsx("span", { className: "xicms-ve__status", "aria-live": "polite", children: status === "saving" ? "Opslaan\u2026" : status === "saved" ? "\u2713 Opgeslagen" : status === "error" ? "\u26A0 Niet opgeslagen" : "" }),
@@ -563,7 +657,7 @@ function VisualEditorInner({ onClose }) {
       /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => void reloadRemote(), children: "Nieuwste versie laden" }),
       /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConflict(false), children: "Mijn versie behouden" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "xicms-ve__body", children: [
+    /* @__PURE__ */ jsxs("div", { className: `xicms-ve__body${panelOpen ? " is-panel-open" : ""}`, children: [
       /* @__PURE__ */ jsxs("main", { className: "xicms-ve__canvas xicms-root", "data-dark": darkAuto ? "auto" : void 0, style: themeVars, children: [
         status === "loading" && /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Laden\u2026" }),
         status === "none" && /* @__PURE__ */ jsxs("div", { className: "xicms-ve__empty", children: [
@@ -575,87 +669,110 @@ function VisualEditorInner({ onClose }) {
               description: `Voor deze pagina (${path}) bestaat nog geen werkversie. Maak hem hier direct aan, of ga naar /beheer \u2192 Pagina's.`
             }
           ),
-          /* @__PURE__ */ jsx("p", { style: { textAlign: "center", marginTop: "1rem" }, children: /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-btn", onClick: () => void handleCreatePage(), children: "+ Deze pagina aanmaken" }) })
+          /* @__PURE__ */ jsx("p", { style: { textAlign: "center", marginTop: "1rem" }, children: /* @__PURE__ */ jsx(Button, { onClick: () => void handleCreatePage(), children: "+ Deze pagina aanmaken" }) })
         ] }),
-        draft && /* @__PURE__ */ jsxs("div", { className: "container", ref: canvasRef, children: [
-          blocks.length === 0 && /* @__PURE__ */ jsx(EmptyState, { icon: "\u{1F9F1}", title: "Nog geen blokken", description: "Voeg hieronder je eerste blok toe." }),
-          displayBlocks.map((b, i) => {
-            const def = registry.get(b._type);
-            const Render = def?.Render;
-            const safe = (() => {
-              const parsed = def?.schema ? safeParse(def.schema, b) : void 0;
-              return parsed?.success ? parsed.data : b;
-            })();
-            const dropClass = dropIndex === i ? " is-drop-before" : dropIndex === i + 1 ? " is-drop-after" : "";
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: `xicms-ve-block${b._key === selectedKey ? " is-selected" : ""}${dragIndex === i ? " is-dragging" : ""}${dropClass}`,
-                onDragOver: (e) => {
-                  if (dragIndex === null) return;
-                  e.preventDefault();
-                  e.dataTransfer.dropEffect = "move";
-                  const rect = e.currentTarget.getBoundingClientRect();
-                  setDropIndex(e.clientY < rect.top + rect.height / 2 ? i : i + 1);
-                },
-                onDrop: (e) => {
-                  if (dragIndex === null || dropIndex === null) return;
-                  e.preventDefault();
-                  setBlocks(reorderBlocks(blocks, dragIndex, dropIndex));
-                  endDrag();
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "xicms-ve-block__toolbar", children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: "xicms-ve-block__drag",
-                        draggable: true,
-                        onDragStart: (e) => {
-                          draggingRef.current = true;
-                          setDragIndex(i);
-                          e.dataTransfer.effectAllowed = "move";
-                          e.dataTransfer.setData("text/plain", String(i));
-                          const blockEl = e.currentTarget.closest(".xicms-ve-block");
-                          if (blockEl) e.dataTransfer.setDragImage(blockEl, 24, 24);
-                        },
-                        onDragEnd: endDrag,
-                        "aria-label": `Versleep ${def?.label ?? b._type}`,
-                        title: "Slepen om te verplaatsen",
-                        children: "\u22EE\u22EE"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "xicms-ve-block__label", children: def?.label ?? b._type }),
-                    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setSelectedKey(b._key), "aria-label": `Bewerk ${def?.label ?? b._type}`, title: "Bewerken", children: "\u270F\uFE0F" }),
-                    /* @__PURE__ */ jsx("button", { type: "button", disabled: i === 0, onClick: () => move(i, -1), "aria-label": "Omhoog", children: "\u2191" }),
-                    /* @__PURE__ */ jsx("button", { type: "button", disabled: i === blocks.length - 1, onClick: () => move(i, 1), "aria-label": "Omlaag", children: "\u2193" }),
-                    b._type === "symbolRef" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void detachSymbol(i), "aria-label": "Symbool loskoppelen", title: "Loskoppelen (losse kopie)", children: "\u{1F517}\u2702" }),
-                    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => duplicate(i), "aria-label": "Dupliceren", children: "\u2398" }),
-                    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void remove(i), "aria-label": "Verwijderen", children: "\u{1F5D1}" })
-                  ] }),
-                  /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve-block__select", "aria-label": `Selecteer ${def?.label ?? b._type}`, onClick: () => setSelectedKey(b._key) }),
-                  /* @__PURE__ */ jsx("div", { className: "xicms-ve-block__content", "data-ve-content": b._key, children: Render ? /* @__PURE__ */ jsx(BlockErrorBoundary, { mode: "preview", type: b._type, blockKey: b._key, children: /* @__PURE__ */ jsx(InlineImageEditProvider, { onReplace: b._key === selectedKey ? (field) => setImgPicker({ key: b._key, field }) : null, children: /* @__PURE__ */ jsx(Render, { block: safe, siteId, mode: "preview" }) }) }) : /* @__PURE__ */ jsxs("p", { className: "xicms-ve__hint", children: [
-                    "Onbekend blok: ",
-                    b._type
-                  ] }) })
-                ]
-              },
-              b._key
-            );
-          }),
-          /* @__PURE__ */ jsxs("div", { className: "xicms-ve__inserter", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Toevoegen",
-              selected ? " (na selectie)" : "",
-              ":"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "xicms-ve__inserter-select", children: /* @__PURE__ */ jsx(Select, { value: "", placeholder: "Kies een blok\u2026", onValueChange: (v) => v && addBlock(v), options: addOptions }) }),
-            /* @__PURE__ */ jsx(PatternInserter, { onInsert: insertAfterSelected })
-          ] })
-        ] })
+        draft && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "container",
+            ref: canvasRef,
+            onClickCapture: (e) => {
+              const el = e.target;
+              if (el?.closest?.("a[href]")) e.preventDefault();
+            },
+            children: [
+              blocks.length === 0 && /* @__PURE__ */ jsx(EmptyState, { icon: "\u{1F9F1}", title: "Nog geen blokken", description: "Voeg hieronder je eerste blok toe." }),
+              displayBlocks.map((b, i) => {
+                const def = registry.get(b._type);
+                const Render = def?.Render;
+                const safe = (() => {
+                  const parsed = def?.schema ? safeParse(def.schema, b) : void 0;
+                  return parsed?.success ? parsed.data : b;
+                })();
+                const dropClass = dropIndex === i ? " is-drop-before" : dropIndex === i + 1 ? " is-drop-after" : "";
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `xicms-ve-block${b._key === selectedKey ? " is-selected" : ""}${dragIndex === i ? " is-dragging" : ""}${dropClass}`,
+                    onDragOver: (e) => {
+                      if (dragIndex === null) return;
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "move";
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      setDropIndex(e.clientY < rect.top + rect.height / 2 ? i : i + 1);
+                    },
+                    onDrop: (e) => {
+                      if (dragIndex === null || dropIndex === null) return;
+                      e.preventDefault();
+                      setBlocks(reorderBlocks(blocks, dragIndex, dropIndex));
+                      endDrag();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "xicms-ve-block__toolbar", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "xicms-ve-block__drag",
+                            draggable: true,
+                            onDragStart: (e) => {
+                              draggingRef.current = true;
+                              setDragIndex(i);
+                              e.dataTransfer.effectAllowed = "move";
+                              e.dataTransfer.setData("text/plain", String(i));
+                              const blockEl = e.currentTarget.closest(".xicms-ve-block");
+                              if (blockEl) e.dataTransfer.setDragImage(blockEl, 24, 24);
+                            },
+                            onDragEnd: endDrag,
+                            "aria-label": `Versleep ${def?.label ?? b._type}`,
+                            title: "Slepen om te verplaatsen",
+                            children: "\u22EE\u22EE"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "xicms-ve-block__label", children: def?.label ?? b._type }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => {
+                              setSelectedKey(b._key);
+                              setPanelOpen(true);
+                            },
+                            "aria-label": `Instellingen van ${def?.label ?? b._type}`,
+                            title: "Instellingen (link, kleur, opties)",
+                            children: "\u2699"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("button", { type: "button", disabled: i === 0, onClick: () => move(i, -1), "aria-label": "Omhoog", children: "\u2191" }),
+                        /* @__PURE__ */ jsx("button", { type: "button", disabled: i === blocks.length - 1, onClick: () => move(i, 1), "aria-label": "Omlaag", children: "\u2193" }),
+                        b._type === "symbolRef" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void detachSymbol(i), "aria-label": "Symbool loskoppelen", title: "Loskoppelen (losse kopie)", children: "\u{1F517}\u2702" }),
+                        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => duplicate(i), "aria-label": "Dupliceren", children: "\u2398" }),
+                        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void remove(i), "aria-label": "Verwijderen", children: "\u{1F5D1}" })
+                      ] }),
+                      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve-block__select", "aria-label": `Selecteer ${def?.label ?? b._type}`, onClick: () => setSelectedKey(b._key) }),
+                      /* @__PURE__ */ jsx("div", { className: "xicms-ve-block__content", "data-ve-content": b._key, children: Render ? /* @__PURE__ */ jsx(BlockErrorBoundary, { mode: "preview", type: b._type, blockKey: b._key, children: /* @__PURE__ */ jsx(InlineImageEditProvider, { onReplace: b._key === selectedKey ? (field) => setImgPicker({ key: b._key, field }) : null, children: /* @__PURE__ */ jsx(Render, { block: safe, siteId, mode: "preview" }) }) }) : /* @__PURE__ */ jsxs("p", { className: "xicms-ve__hint", children: [
+                        "Onbekend blok: ",
+                        b._type
+                      ] }) })
+                    ]
+                  },
+                  b._key
+                );
+              }),
+              /* @__PURE__ */ jsxs("div", { className: "xicms-ve__inserter", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Toevoegen",
+                  selected ? " (na selectie)" : "",
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "xicms-ve__inserter-select", children: /* @__PURE__ */ jsx(Select, { value: "", placeholder: "Kies een blok\u2026", onValueChange: (v) => v && addBlock(v), options: addOptions }) }),
+                /* @__PURE__ */ jsx(PatternInserter, { onInsert: insertAfterSelected })
+              ] })
+            ]
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx("aside", { className: "xicms-ve__panel", children: selected && isTranslating ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+      panelOpen && /* @__PURE__ */ jsx("aside", { className: "xicms-ve__panel", children: selected && isTranslating ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
         /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold", children: [
           registry.get(selected._type)?.label ?? selected._type,
           " \u2014 vertaling (",
@@ -677,15 +794,15 @@ function VisualEditorInner({ onClose }) {
       ] }) : selected ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "xicms-ve__panel-head", children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
-              type: "button",
-              className: `xicms-btn${status === "saving" || status === "error" ? "" : " xicms-btn--ghost"}`,
+              size: "sm",
+              variant: status === "saving" || status === "error" ? "primary" : "ghost",
               onClick: () => void flushSave().catch(() => setStatus("error")),
               children: status === "saving" ? "Opslaan\u2026" : status === "error" ? "\u26A0 Opnieuw opslaan" : "\u2713 Opgeslagen"
             }
           ),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-btn xicms-btn--ghost", onClick: () => setSelectedKey(null), children: "\u2715 Sluiten" })
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setPanelOpen(false), children: "\u2715 Sluiten" })
         ] }),
         /* @__PURE__ */ jsx(SelectedEditor, { block: selected, siteId, registry, onChange: (next) => updateByKey(selected._key, next) }, selected._key)
       ] }) : draft && isTranslating ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
@@ -729,6 +846,25 @@ function VisualEditorInner({ onClose }) {
         }
       }
     ),
+    spots.map((s, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "xicms-ve-pencil",
+        style: { top: s.top, left: s.left },
+        title: s.title,
+        "aria-label": s.title,
+        onMouseDown: (e) => e.preventDefault(),
+        onMouseEnter: () => targetsRef.current[i]?.el.classList.add("is-hover"),
+        onMouseLeave: () => targetsRef.current[i]?.el.classList.remove("is-hover"),
+        onClick: () => startInline(i),
+        children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "12", height: "12", 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" })
+        ] })
+      },
+      i
+    )),
     fmtBar && /* @__PURE__ */ jsxs("div", { className: "xicms-ve-fmtbar", style: { top: fmtBar.top, left: fmtBar.left }, role: "toolbar", "aria-label": "Tekstopmaak", children: [
       /* @__PURE__ */ jsx(FmtBtn, { label: /* @__PURE__ */ jsx("b", { children: "B" }), title: "Vet (Ctrl/Cmd+B)", onRun: () => document.execCommand("bold") }),
       /* @__PURE__ */ jsx(FmtBtn, { label: /* @__PURE__ */ jsx("i", { children: "I" }), title: "Cursief (Ctrl/Cmd+I)", onRun: () => document.execCommand("italic") }),