magic-editor-x 1.1.0 → 1.2.2

package/dist/_chunks/{index-CQx7-dFP.js → index-DGRg45vZ.js}

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const getTranslation = require("./getTranslation-D35vbDap.js");
+const getTranslation = require("./getTranslation-DxG1pB5q.js");
 const styled = require("styled-components");
 const outline = require("@heroicons/react/24/outline");
 const EditorJS = require("@editorjs/editorjs");
-const tools = require("./tools-DNt2tioN.js");
+const tools = require("./tools-Dn4jPdJs.js");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-BiLy_f7C.js");
+const index = require("./index-C_SiBh7v.js");
 const socket_ioClient = require("socket.io-client");
 const Y = require("yjs");
 const yIndexeddb = require("y-indexeddb");
@@ -448,6 +448,89 @@ const getUserColor = (userId) => {
   const hash = String(userId).split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
   return CURSOR_COLORS[hash % CURSOR_COLORS.length];
 };
+const htmlToDelta = (html) => {
+  if (!html || html === "<br>" || html === "<br/>") return [];
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(`<div>${html}</div>`, "text/html");
+  const delta = [];
+  function processNode(node, attributes = {}) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent;
+      if (text) {
+        const attrs = Object.keys(attributes).length > 0 ? { ...attributes } : void 0;
+        delta.push({ insert: text, attributes: attrs });
+      }
+      return;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const newAttrs = { ...attributes };
+      const tagName = node.tagName.toLowerCase();
+      switch (tagName) {
+        case "b":
+        case "strong":
+          newAttrs.bold = true;
+          break;
+        case "i":
+        case "em":
+          newAttrs.italic = true;
+          break;
+        case "u":
+          newAttrs.underline = true;
+          break;
+        case "code":
+          newAttrs.code = true;
+          break;
+        case "a":
+          newAttrs.a = {
+            href: node.getAttribute("href") || "",
+            target: node.getAttribute("target") || "_blank",
+            rel: node.getAttribute("rel") || "noopener noreferrer"
+          };
+          break;
+        case "mark":
+          newAttrs.mark = true;
+          break;
+        case "br":
+          delta.push({ insert: "\n" });
+          return;
+      }
+      for (const child of node.childNodes) {
+        processNode(child, newAttrs);
+      }
+    }
+  }
+  const wrapper = doc.body.firstChild;
+  if (wrapper) {
+    for (const child of wrapper.childNodes) {
+      processNode(child);
+    }
+  }
+  return delta;
+};
+const deltaToHtml = (delta) => {
+  if (!delta || delta.length === 0) return "";
+  let html = "";
+  for (const op of delta) {
+    if (typeof op.insert !== "string") continue;
+    let text = op.insert;
+    text = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
+    const attrs = op.attributes || {};
+    let result = text;
+    if (attrs.code) result = `<code>${result}</code>`;
+    if (attrs.italic) result = `<i>${result}</i>`;
+    if (attrs.bold) result = `<b>${result}</b>`;
+    if (attrs.underline) result = `<u>${result}</u>`;
+    if (attrs.mark) result = `<mark>${result}</mark>`;
+    if (attrs.a) {
+      const href = attrs.a.href || "";
+      const target = attrs.a.target || "_blank";
+      const rel = attrs.a.rel || "noopener noreferrer";
+      result = `<a href="${href}" target="${target}" rel="${rel}">${result}</a>`;
+    }
+    html += result;
+  }
+  return html;
+};
 const useMagicCollaboration = ({
   enabled,
   roomId,
@@ -472,16 +555,47 @@ const useMagicCollaboration = ({
   React.useEffect(() => {
     onRemoteUpdateRef.current = onRemoteUpdate;
   }, [onRemoteUpdate]);
-  const { doc, blocksMap, metaMap } = React.useMemo(() => {
+  const { doc, blocksMap, textMap, metaMap } = React.useMemo(() => {
     const yDoc = new Y__namespace.Doc();
     return {
       doc: yDoc,
       blocksMap: yDoc.getMap("blocks"),
-      // Each block stored by ID
+      // Block metadata (type, tunes)
+      textMap: yDoc.getMap("text"),
+      // Y.Text per block (character-level sync!)
       metaMap: yDoc.getMap("meta")
-      // Metadata (time, blockOrder, etc.)
+      // Document metadata (time, blockOrder)
     };
   }, [roomId]);
+  const getBlockText = React.useCallback((blockId) => {
+    if (!blockId) return null;
+    let ytext = textMap.get(blockId);
+    if (!ytext) {
+      ytext = new Y__namespace.Text();
+      textMap.set(blockId, ytext);
+    }
+    return ytext;
+  }, [textMap]);
+  const setBlockText = React.useCallback((blockId, html) => {
+    if (!blockId) return;
+    const ytext = getBlockText(blockId);
+    if (!ytext) return;
+    doc.transact(() => {
+      if (ytext.length > 0) {
+        ytext.delete(0, ytext.length);
+      }
+      const delta = htmlToDelta(html);
+      if (delta.length > 0) {
+        ytext.applyDelta(delta);
+      }
+    }, "local");
+  }, [doc, getBlockText]);
+  const getBlockTextHtml = React.useCallback((blockId) => {
+    if (!blockId) return "";
+    const ytext = textMap.get(blockId);
+    if (!ytext) return "";
+    return deltaToHtml(ytext.toDelta());
+  }, [textMap]);
   React.useEffect(() => {
     return () => {
       doc.destroy();
@@ -546,9 +660,6 @@ const useMagicCollaboration = ({
       persistenceRef.current = persistence;
       persistence.on("synced", () => {
         console.log("[Magic Collab] [CACHE] IndexedDB synced for room:", roomId);
-        const blockOrder = metaMap.get("blockOrder");
-        fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:indexeddb:synced", message: "IndexedDB synced - loaded local state", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder, roomId, persistenceKey }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "H" }) }).catch(() => {
-        });
       });
       console.log("[Magic Collab] [CACHE] IndexedDB persistence initialized:", persistenceKey);
     } catch (e) {
@@ -635,17 +746,11 @@ const useMagicCollaboration = ({
           if (update) {
             console.log("[Magic Collab] [SYNC] Syncing initial state, update size:", update.length, "bytes");
             try {
-              const blockOrderBefore = metaMap.get("blockOrder");
-              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:sync:before", message: "BEFORE applying server sync", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: blockOrderBefore, roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "F" }) }).catch(() => {
-              });
               const beforeBlockCount = blocksMap.size;
               console.log("[Magic Collab] [DATA] Y.Map BEFORE sync - block count:", beforeBlockCount);
               Y__namespace.applyUpdate(doc, new Uint8Array(update), "remote");
               const afterBlockCount = blocksMap.size;
               console.log("[Magic Collab] [DATA] Y.Map AFTER sync - block count:", afterBlockCount);
-              const blockOrderAfter = metaMap.get("blockOrder");
-              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:sync:after", message: "AFTER applying server sync", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: blockOrderAfter, roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "F" }) }).catch(() => {
-              });
               if (onRemoteUpdateRef.current) {
                 console.log("[Magic Collab] [CALLBACK] Calling onRemoteUpdate callback after sync");
                 setTimeout(() => {
@@ -661,15 +766,11 @@ const useMagicCollaboration = ({
           if (update) {
             console.log("[Magic Collab] [UPDATE] Received remote update:", update.length, "bytes");
             try {
-              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:update:before", message: "BEFORE applying remote update", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: metaMap.get("blockOrder"), updateSize: update.length, roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "G" }) }).catch(() => {
-              });
               const beforeBlockCount = blocksMap.size;
               console.log("[Magic Collab] [DATA] Y.Map BEFORE update - blocks:", beforeBlockCount);
               Y__namespace.applyUpdate(doc, new Uint8Array(update), "remote");
               const afterBlockCount = blocksMap.size;
               console.log("[Magic Collab] [DATA] Y.Map AFTER update - blocks:", afterBlockCount);
-              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:update:after", message: "AFTER applying remote update", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: metaMap.get("blockOrder"), roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "G" }) }).catch(() => {
-              });
               if (onRemoteUpdateRef.current) {
                 console.log("[Magic Collab] [CALLBACK] Calling onRemoteUpdate callback");
                 setTimeout(() => {
@@ -793,13 +894,30 @@ const useMagicCollaboration = ({
     return user ? getUserColor(user.id) : CURSOR_COLORS[0];
   }, [user]);
   return {
+    // Y.js Document & Maps
     doc,
     blocksMap,
-    // Y.Map for block-level sync (replaces Y.Text)
+    // Y.Map for block metadata (type, tunes)
+    textMap,
+    // Y.Map<blockId, Y.Text> for character-level text sync
     metaMap,
-    // Y.Map for metadata (includes blockOrder as JSON string)
+    // Y.Map for document metadata (time, blockOrder)
+    // Character-level text helpers
+    getBlockText,
+    // Get Y.Text for a block (creates if not exists)
+    setBlockText,
+    // Set block text from HTML
+    getBlockTextHtml,
+    // Get block text as HTML
+    // Utility functions
+    htmlToDelta,
+    // Convert HTML to delta
+    deltaToHtml,
+    // Convert delta to HTML
+    // Connection status
     status,
     error,
+    // Collaboration
     peers,
     awareness,
     emitAwareness,
@@ -1097,6 +1215,136 @@ const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) =
   }, [replaceText, appendText, onNoCredits]);
   return { handleAIAction };
 };
+const useWebtoolsLinks = () => {
+  const getPlugin = admin.useStrapiApp("WebtoolsLinks", (state) => state.getPlugin);
+  const linksPlugin = React.useMemo(() => {
+    try {
+      return getPlugin?.("webtools-addon-links");
+    } catch (e) {
+      return null;
+    }
+  }, [getPlugin]);
+  const isAvailable = React.useMemo(() => {
+    const available = !!linksPlugin?.apis?.openLinkPicker;
+    if (typeof window !== "undefined" && !window.__WEBTOOLS_LINKS_CHECKED__) {
+      window.__WEBTOOLS_LINKS_CHECKED__ = true;
+      if (available) {
+        console.log("[Magic Editor X] [SUCCESS] Webtools Links addon detected - Link Picker enabled");
+      } else {
+        console.log("[Magic Editor X] [INFO] Webtools Links addon not installed - Link Picker disabled");
+      }
+    }
+    return available;
+  }, [linksPlugin]);
+  const openLinkPicker = React.useCallback(async ({ initialHref = "", initialText = "" } = {}) => {
+    if (!linksPlugin?.apis?.openLinkPicker) {
+      console.warn("[Magic Editor X] Webtools Link Picker not available");
+      return null;
+    }
+    console.log("[Magic Editor X] Opening Webtools Link Picker with:", {
+      linkType: "both",
+      initialHref: initialHref || "(empty)",
+      initialText: initialText || "(empty)"
+    });
+    try {
+      const result = await linksPlugin.apis.openLinkPicker({
+        linkType: "both",
+        // Allow both internal and external links
+        initialHref: initialHref || "",
+        initialText: initialText || ""
+      });
+      console.log("[Magic Editor X] Webtools picker result:", result);
+      if (result && result.href) {
+        console.log("[Magic Editor X] Webtools link selected:", result);
+        return {
+          href: result.href,
+          label: result.label || initialText || ""
+        };
+      }
+      return null;
+    } catch (error) {
+      console.error("[Magic Editor X] Error opening Webtools Link Picker:", error);
+      return null;
+    }
+  }, [linksPlugin]);
+  return {
+    isAvailable,
+    openLinkPicker
+  };
+};
+const apiBase = "/magic-editor-x";
+const useVersionHistory = () => {
+  const { get, post } = admin.useFetchClient();
+  const { tier } = useLicense();
+  const [snapshots, setSnapshots] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const fetchSnapshots = React.useCallback(
+    async (roomId) => {
+      if (!roomId) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const { data } = await get(`${apiBase}/snapshots/${roomId}`);
+        setSnapshots(data?.data || []);
+      } catch (err) {
+        setError(err?.message || "Failed to load snapshots");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [get]
+  );
+  const restoreSnapshot = React.useCallback(
+    async (documentId, roomId) => {
+      if (!documentId) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const { data } = await post(`${apiBase}/snapshots/restore/${documentId}`, { roomId });
+        return data?.data;
+      } catch (err) {
+        setError(err?.message || "Failed to restore snapshot");
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [get]
+  );
+  const createSnapshot = React.useCallback(
+    async ({ roomId, contentType, entryId, fieldName, content }) => {
+      if (!roomId || !contentType || !entryId || !fieldName) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const { data } = await post(`${apiBase}/snapshots/${roomId}`, {
+          contentType,
+          entryId,
+          fieldName,
+          content
+          // Include editor content as fallback
+        });
+        return data?.data;
+      } catch (err) {
+        setError(err?.message || "Failed to create snapshot");
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [post]
+  );
+  return {
+    snapshots,
+    loading,
+    error,
+    tier,
+    fetchSnapshots,
+    restoreSnapshot,
+    createSnapshot
+  };
+};
 const Overlay$1 = styled__default.default.div`
   position: fixed;
   top: 0;
@@ -1120,7 +1368,7 @@ const PopupContainer = styled__default.default.div`
   display: flex;
   flex-direction: column;
 `;
-const Header$1 = styled__default.default.div`
+const Header$2 = styled__default.default.div`
   background: linear-gradient(135deg, #7C3AED 0%, #a855f7 100%);
   padding: 20px 24px;
   color: white;
@@ -1142,7 +1390,7 @@ const CreditsBadge = styled__default.default.div`
   font-size: 13px;
   font-weight: 500;
 `;
-const Content$1 = styled__default.default.div`
+const Content$2 = styled__default.default.div`
   padding: 24px;
   overflow-y: auto;
   flex: 1;
@@ -1407,7 +1655,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx(Overlay$1, { onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header$1, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header$2, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HeaderTitle, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SparklesIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "KI-Assistent" })
@@ -1419,7 +1667,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
         !usage?.tier && "Wird geladen..."
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Content$1, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Content$2, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TextPreview, { children: selectedText.length > 300 ? selectedText.substring(0, 300) + "..." : selectedText }),
       /* @__PURE__ */ jsxRuntime.jsxs(TypeButtons, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1506,6 +1754,132 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
     ] })
   ] }) });
 };
+const PanelWrapper = styled__default.default(getTranslation.Box)`
+  width: 320px;
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  display: flex;
+  flex-direction: column;
+  max-height: 70vh;
+`;
+const Header$1 = styled__default.default(getTranslation.Flex)`
+  padding: 12px 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Content$1 = styled__default.default(getTranslation.Box)`
+  padding: 12px 16px;
+  overflow-y: auto;
+`;
+const Item = styled__default.default(getTranslation.Box)`
+  padding: 10px 12px;
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: 6px;
+  margin-bottom: 10px;
+`;
+const Meta = styled__default.default(getTranslation.Typography)`
+  color: ${({ theme }) => theme.colors.neutral500};
+  font-size: 12px;
+`;
+const PremiumBadge = styled__default.default(getTranslation.Box)`
+  background: ${({ theme }) => theme.colors.primary100};
+  color: ${({ theme }) => theme.colors.primary600};
+  border-radius: 6px;
+  padding: 8px 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  margin-top: 8px;
+`;
+const safeDateFrom = (value) => {
+  if (!value) return null;
+  if (value instanceof Date) {
+    return isNaN(value.getTime()) ? null : value;
+  }
+  try {
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  } catch {
+    return null;
+  }
+};
+const formatDate = (dateValue) => {
+  const date = safeDateFrom(dateValue);
+  if (!date) return "—";
+  try {
+    return date.toLocaleString();
+  } catch {
+    return "—";
+  }
+};
+const VersionHistoryPanel = ({
+  snapshots,
+  loading,
+  error,
+  onRestore,
+  onCreate,
+  tier,
+  onClose
+}) => {
+  const { formatMessage } = getTranslation.useIntl();
+  const canRestore = tier !== "free";
+  const t = (id, defaultMessage) => formatMessage(
+    { id: getTranslation.getTranslation(id), defaultMessage },
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(PanelWrapper, { "data-testid": "version-history-panel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header$1, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 8, alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { width: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { fontWeight: "bold", children: t("versionHistory.title", "Version History") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Button, { size: "S", variant: "tertiary", onClick: onClose, children: t("versionHistory.close", "Close") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content$1, { children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { children: t("versionHistory.loading", "Loading versions...") }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { textColor: "danger600", children: error }),
+      !loading && !error && snapshots.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { children: t("versionHistory.noSnapshots", "No versions saved yet") }),
+      !loading && !error && snapshots.map((snap) => /* @__PURE__ */ jsxRuntime.jsxs(Item, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { fontWeight: "bold", children: [
+            t("versionHistory.version", "Version"),
+            " ",
+            snap.version
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "pi", children: formatDate(snap.createdAt) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Meta, { children: [
+          t("versionHistory.createdBy", "By"),
+          " ",
+          snap.createdBy?.firstname ? `${snap.createdBy.firstname} ${snap.createdBy.lastname || ""}`.trim() : "—"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Divider, { marginTop: 2, marginBottom: 2 }),
+        canRestore ? /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Flex, { gap: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+          getTranslation.Button,
+          {
+            size: "S",
+            variant: "secondary",
+            onClick: () => onRestore?.(snap),
+            children: t("versionHistory.restore", "Restore")
+          }
+        ) }) : /* @__PURE__ */ jsxRuntime.jsxs(PremiumBadge, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { width: 16 }),
+          t("versionHistory.premiumOnly", "Premium feature")
+        ] })
+      ] }, snap.documentId || snap.id)),
+      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Divider, { marginTop: 4, marginBottom: 4 }),
+      canRestore ? /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Button, { size: "S", fullWidth: true, variant: "default", onClick: onCreate, disabled: loading, children: t("versionHistory.create", "Create Snapshot") }) : /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Button, { size: "S", fullWidth: true, variant: "default", disabled: true, children: t("versionHistory.create", "Create Snapshot") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PremiumBadge, { style: { marginTop: "8px", width: "100%", justifyContent: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { width: 16 }),
+          t("versionHistory.premiumOnly", "Premium feature")
+        ] })
+      ] })
+    ] })
+  ] });
+};
 const Overlay = styled__default.default.div`
   position: fixed;
   top: 0;
@@ -1820,11 +2194,14 @@ const EditorJSGlobalStyles = styled.createGlobalStyle`
   
   /* ============================================
      STRAPI MEDIA LIBRARY - Higher z-index for fullscreen
+     Must be higher than fullscreen z-index (9999)
      ============================================ */
   [data-react-portal],
   .ReactModalPortal,
   [role="dialog"],
   [data-strapi-modal="true"],
+  [class*="Dialog"],
+  [class*="Modal"],
   .upload-dialog,
   [class*="Modal"],
   [class*="modal"],
@@ -2473,15 +2850,36 @@ const EditorContent = styled__default.default.div`
   flex: 1;
   overflow: visible; /* Allow toolbars/popovers to escape */
   position: relative;
-  padding: 24px 24px 24px 16px; /* Less left padding since toolbar has its own space */
+  padding: 24px;
   min-height: 200px;
   
   ${(props) => props.$isFullscreen && styled.css`
-    padding: clamp(32px, 4vw, 60px);
+    padding: clamp(24px, 3vw, 48px);
     width: 100%;
     max-width: 100%;
     margin: 0;
     align-self: stretch;
+    
+    /* Make blocks stretch full width in fullscreen */
+    .codex-editor {
+      width: 100%;
+    }
+    
+    .ce-block__content,
+    .ce-toolbar__content {
+      max-width: 100% !important;
+      padding: 0 !important;
+    }
+    
+    .ce-toolbar {
+      max-width: 100% !important;
+      left: 0 !important;
+      transform: none !important;
+    }
+    
+    .ce-toolbar__actions {
+      right: 0 !important;
+    }
   `}
 `;
 const EditorWrapper = styled__default.default.div`
@@ -2556,18 +2954,19 @@ const EditorWrapper = styled__default.default.div`
      TOOLBAR INSIDE EDITOR - Position Fix
      ============================================ */
   
-  /* Make the redactor (content area) have left padding for toolbar */
+  /* Centered content area */
   .codex-editor__redactor {
     padding-bottom: 100px !important;
-    padding-left: 50px !important; /* Space for toolbar */
-    margin-left: 0 !important;
+    padding-left: 0 !important;
+    margin: 0 auto !important;
+    max-width: 800px !important;
   }
   
-  /* Content blocks - full width within padded area */
+  /* Content blocks - centered */
   .ce-block__content {
     max-width: 100%;
-    margin-left: 0;
-    margin-right: 0;
+    margin: 0 auto;
+    padding: 0 16px;
   }
   
   /* ============================================
@@ -2616,24 +3015,27 @@ const EditorWrapper = styled__default.default.div`
     border-radius: 6px;
   }
   
-  /* Toolbar positioning - inside the editor */
+  /* Toolbar positioning - centered with content */
   .ce-toolbar__content {
-    max-width: 100%;
-    margin-left: 0;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 16px;
   }
   
   .ce-toolbar {
-    left: 0 !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    width: 100% !important;
+    max-width: 832px !important;
   }
   
   .ce-toolbar__plus {
-    left: 0 !important;
     position: relative !important;
   }
   
   .ce-toolbar__actions {
-    right: 0 !important;
     position: absolute !important;
+    right: 16px !important;
   }
   
   /* Settings button (⋮⋮) */
@@ -3119,6 +3521,35 @@ const FooterButton = styled__default.default.button`
     }
   }
 `;
+const WebtoolsPromoLink = styled__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: 6px;
+  font-size: 11px;
+  color: #6366f1;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+  
+  &:hover {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
+    border-color: rgba(99, 102, 241, 0.4);
+    transform: translateY(-1px);
+  }
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
 const LoadingOverlay = styled__default.default.div`
   position: absolute;
   top: 0;
@@ -3133,6 +3564,18 @@ const LoadingOverlay = styled__default.default.div`
   gap: 12px;
   z-index: 10;
 `;
+const VersionHistoryOverlay = styled__default.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+`;
 const LoadingText = styled__default.default.span`
   font-size: 13px;
   color: #64748b;
@@ -3348,10 +3791,12 @@ const Editor = React.forwardRef(({
 }, ref) => {
   const { formatMessage } = getTranslation.useIntl();
   const t = (id, defaultMessage) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage });
-  const { licenseData } = useLicense();
+  const { licenseData, tier: licenseTier } = useLicense();
+  const { isAvailable: isWebtoolsAvailable, openLinkPicker: webtoolsOpenLinkPicker } = useWebtoolsLinks();
   const editorRef = React.useRef(null);
   const editorInstanceRef = React.useRef(null);
   const containerRef = React.useRef(null);
+  const webtoolsSelectionRef = React.useRef({ text: "", range: null, blockIndex: -1, existingAnchor: null, existingHref: "" });
   const isReadyRef = React.useRef(false);
   const [isReady, setIsReady] = React.useState(false);
   const [showCreditsModal, setShowCreditsModal] = React.useState(false);
@@ -3387,6 +3832,51 @@ const Editor = React.forwardRef(({
   const [aiSelectedText, setAISelectedText] = React.useState("");
   const aiSelectionRangeRef = React.useRef(null);
   const [aiLoading, setAILoading] = React.useState(false);
+  const [showVersionHistory, setShowVersionHistory] = React.useState(false);
+  React.useEffect(() => {
+    if (!isWebtoolsAvailable || !editorRef.current) return;
+    const updateWebtoolsSelection = () => {
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const range = selection.getRangeAt(0);
+      if (!editorRef.current.contains(range.commonAncestorContainer)) return;
+      const selectedText = selection.toString().trim();
+      let existingAnchor = null;
+      let existingHref = "";
+      let node = range.commonAncestorContainer;
+      while (node && node !== editorRef.current) {
+        if (node.nodeName === "A") {
+          existingAnchor = node;
+          existingHref = node.href || "";
+          break;
+        }
+        node = node.parentNode;
+      }
+      if (!existingAnchor) {
+        node = range.startContainer;
+        while (node && node !== editorRef.current) {
+          if (node.nodeName === "A") {
+            existingAnchor = node;
+            existingHref = node.href || "";
+            break;
+          }
+          node = node.parentNode;
+        }
+      }
+      const blockIndex = editorInstanceRef.current?.blocks?.getCurrentBlockIndex?.() ?? -1;
+      webtoolsSelectionRef.current = {
+        text: existingAnchor ? existingAnchor.textContent : selectedText,
+        range: range.cloneRange(),
+        blockIndex,
+        existingAnchor,
+        existingHref
+      };
+    };
+    document.addEventListener("selectionchange", updateWebtoolsSelection);
+    return () => {
+      document.removeEventListener("selectionchange", updateWebtoolsSelection);
+    };
+  }, [isWebtoolsAvailable, isReady]);
   const serializedInitialValue = React.useMemo(() => {
     if (!value) {
       return "";
@@ -3414,12 +3904,25 @@ const Editor = React.forwardRef(({
   const {
     doc: yDoc,
     blocksMap: yBlocksMap,
+    textMap: yTextMap,
+    // NEW: Y.Map<blockId, Y.Text> for character-level sync
     metaMap: yMetaMap,
+    // Character-level text helpers
+    getBlockText,
+    // NEW: Get Y.Text for a block
+    setBlockText,
+    // NEW: Get block text as HTML
+    // Utility functions
+    htmlToDelta: collabHtmlToDelta,
+    deltaToHtml: collabDeltaToHtml,
+    // Connection status
     status: collabStatus,
     error: collabError,
+    // Collaboration
     peers: collabPeers,
     awareness: collabAwareness,
     emitAwareness,
+    // Role-based access control
     collabRole,
     canEdit: collabCanEdit
   } = useMagicCollaboration({
@@ -3434,6 +3937,171 @@ const Editor = React.forwardRef(({
       }
     }
   });
+  const yTextBindingsRef = React.useRef(/* @__PURE__ */ new Map());
+  const bindBlockToYText = React.useCallback((blockId, element) => {
+    if (!collabEnabled || !blockId || !element || !yTextMap) return;
+    if (yTextBindingsRef.current.has(blockId)) {
+      const existing = yTextBindingsRef.current.get(blockId);
+      if (existing.element === element) return;
+      unbindBlockFromYText(blockId);
+    }
+    const ytext = getBlockText(blockId);
+    if (!ytext) return;
+    let isUpdating = false;
+    const ytextObserver = (event) => {
+      if (isUpdating) return;
+      if (event.transaction.local) return;
+      isUpdating = true;
+      try {
+        const selection = window.getSelection();
+        let cursorOffset = 0;
+        if (selection && selection.rangeCount > 0 && element.contains(selection.anchorNode)) {
+          const range = selection.getRangeAt(0);
+          const preCaretRange = document.createRange();
+          preCaretRange.selectNodeContents(element);
+          preCaretRange.setEnd(range.startContainer, range.startOffset);
+          cursorOffset = preCaretRange.toString().length;
+        }
+        const html = collabDeltaToHtml(ytext.toDelta());
+        if (element.innerHTML !== html) {
+          element.innerHTML = html || "";
+        }
+        if (document.activeElement === element && cursorOffset > 0) {
+          try {
+            const textNode = element.firstChild;
+            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+              const newRange = document.createRange();
+              const pos = Math.min(cursorOffset, textNode.length);
+              newRange.setStart(textNode, pos);
+              newRange.setEnd(textNode, pos);
+              selection.removeAllRanges();
+              selection.addRange(newRange);
+            }
+          } catch (e) {
+          }
+        }
+      } finally {
+        isUpdating = false;
+      }
+    };
+    const inputHandler = () => {
+      if (isUpdating) return;
+      isUpdating = true;
+      try {
+        const html = element.innerHTML;
+        const newDelta = collabHtmlToDelta(html);
+        const currentDelta = ytext.toDelta();
+        yDoc.transact(() => {
+          if (ytext.length > 0) {
+            ytext.delete(0, ytext.length);
+          }
+          if (newDelta.length > 0) {
+            ytext.applyDelta(newDelta);
+          }
+        }, "local");
+      } finally {
+        isUpdating = false;
+      }
+    };
+    ytext.observe(ytextObserver);
+    element.addEventListener("input", inputHandler);
+    yTextBindingsRef.current.set(blockId, {
+      ytext,
+      element,
+      ytextObserver,
+      inputHandler
+    });
+    console.log("[Magic Editor X] [CHAR-SYNC] Bound block to Y.Text:", blockId);
+  }, [collabEnabled, yTextMap, yDoc, getBlockText, collabHtmlToDelta, collabDeltaToHtml]);
+  const unbindBlockFromYText = React.useCallback((blockId) => {
+    const binding = yTextBindingsRef.current.get(blockId);
+    if (!binding) return;
+    binding.ytext.unobserve(binding.ytextObserver);
+    binding.element.removeEventListener("input", binding.inputHandler);
+    yTextBindingsRef.current.delete(blockId);
+    console.log("[Magic Editor X] [CHAR-SYNC] Unbound block from Y.Text:", blockId);
+  }, []);
+  const bindAllBlocksToYText = React.useCallback(() => {
+    if (!collabEnabled || !editorInstanceRef.current || !yTextMap) return;
+    const editor = editorInstanceRef.current;
+    const blockCount = editor.blocks.getBlocksCount();
+    console.log("[Magic Editor X] [CHAR-SYNC] Binding", blockCount, "blocks to Y.Text");
+    for (let i = 0; i < blockCount; i++) {
+      try {
+        const block = editor.blocks.getBlockByIndex(i);
+        if (!block || !block.id) continue;
+        const blockHolder = block.holder;
+        if (!blockHolder) continue;
+        const contentEditable = blockHolder.querySelector('[contenteditable="true"]');
+        if (contentEditable) {
+          const ytext = getBlockText(block.id);
+          if (ytext && ytext.length === 0) {
+            const currentHtml = contentEditable.innerHTML;
+            if (currentHtml && currentHtml !== "<br>") {
+              setBlockText(block.id, currentHtml);
+            }
+          }
+          bindBlockToYText(block.id, contentEditable);
+        }
+      } catch (e) {
+        console.warn("[Magic Editor X] [CHAR-SYNC] Error binding block:", e);
+      }
+    }
+  }, [collabEnabled, yTextMap, getBlockText, setBlockText, bindBlockToYText]);
+  const blockObserverRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!collabEnabled || !editorRef.current || !yTextMap) return;
+    const observer = new MutationObserver((mutations) => {
+      let hasNewBlocks = false;
+      for (const mutation of mutations) {
+        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE && (node.classList?.contains("ce-block") || node.querySelector?.(".ce-block"))) {
+              hasNewBlocks = true;
+              break;
+            }
+          }
+        }
+        if (hasNewBlocks) break;
+      }
+      if (hasNewBlocks) {
+        setTimeout(() => {
+          bindAllBlocksToYText();
+        }, 50);
+      }
+    });
+    observer.observe(editorRef.current, {
+      childList: true,
+      subtree: true
+    });
+    blockObserverRef.current = observer;
+    return () => {
+      observer.disconnect();
+      blockObserverRef.current = null;
+    };
+  }, [collabEnabled, yTextMap, bindAllBlocksToYText]);
+  React.useEffect(() => {
+    return () => {
+      yTextBindingsRef.current.forEach((binding, blockId) => {
+        binding.ytext.unobserve(binding.ytextObserver);
+        binding.element.removeEventListener("input", binding.inputHandler);
+      });
+      yTextBindingsRef.current.clear();
+    };
+  }, []);
+  const {
+    snapshots,
+    loading: versionHistoryLoading,
+    error: versionHistoryError,
+    fetchSnapshots,
+    restoreSnapshot,
+    createSnapshot
+  } = useVersionHistory();
+  React.useEffect(() => {
+    if (showVersionHistory && collabRoomId) {
+      fetchSnapshots(collabRoomId);
+    }
+  }, [showVersionHistory, collabRoomId, fetchSnapshots]);
   React.useMemo(() => {
     switch (collabRole) {
       case "viewer":
@@ -3767,23 +4435,15 @@ const Editor = React.forwardRef(({
     setWordCount(plainText.split(/\s+/).filter((w) => w.length > 0).length);
   }, []);
   const renderFromYDoc = React.useCallback(async () => {
-    fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:entry", message: "renderFromYDoc called", data: { collabEnabled, hasYBlocksMap: !!yBlocksMap, hasYDoc: !!yDoc, hasYMetaMap: !!yMetaMap }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "A" }) }).catch(() => {
-    });
     if (!collabEnabled || !yBlocksMap || !yDoc) {
-      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:guard1", message: "EARLY EXIT: missing collab deps", data: { collabEnabled, hasYBlocksMap: !!yBlocksMap, hasYDoc: !!yDoc }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "A" }) }).catch(() => {
-      });
       return;
     }
     const editor = editorInstanceRef.current;
     if (!editor || !isReadyRef.current) {
-      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:guard2", message: "EARLY EXIT: editor not ready", data: { hasEditor: !!editor, isReady: isReadyRef.current }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "D" }) }).catch(() => {
-      });
       pendingRenderRef.current = pendingRenderRef.current || true;
       return;
     }
     if (isApplyingRemoteRef.current) {
-      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:guard3", message: "EARLY EXIT: isApplyingRemote is true (race condition)", data: { isApplyingRemote: true }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "B" }) }).catch(() => {
-      });
       return;
     }
     isApplyingRemoteRef.current = true;
@@ -3801,29 +4461,35 @@ const Editor = React.forwardRef(({
         yOrder = Array.from(yBlocksMap.keys());
       }
       const yBlocks = [];
-      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:yState", message: "Y.js state before parsing", data: { blockOrderFromMeta: !!blockOrderJson, yBlocksMapSize: yBlocksMap?.size, yOrder, yBlocksMapKeys: Array.from(yBlocksMap?.keys() || []) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "C" }) }).catch(() => {
-      });
       yOrder.forEach((id) => {
         const json = yBlocksMap.get(id);
         if (json) {
           try {
-            const block = JSON.parse(json);
-            yBlocks.push(block);
+            const blockData = JSON.parse(json);
+            if (blockData.type && !blockData.data) {
+              const ytext = yTextMap?.get(id);
+              const textContent = ytext ? collabDeltaToHtml(ytext.toDelta()) : "";
+              yBlocks.push({
+                id,
+                type: blockData.type,
+                data: { text: textContent },
+                tunes: blockData.tunes || {}
+              });
+            } else if (blockData.type && blockData.data) {
+              yBlocks.push({
+                id,
+                ...blockData
+              });
+            }
           } catch (e) {
             console.warn("[Magic Editor X] Invalid block JSON:", id);
           }
         }
       });
-      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:parsed", message: "Parsed yBlocks from Y.Map", data: { yBlocksCount: yBlocks.length, yBlockIds: yBlocks.map((b) => b.id), yBlockTypes: yBlocks.map((b) => b.type) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "A" }) }).catch(() => {
-      });
       const parsed = { blocks: yBlocks };
       const normalizedParsed = serializeForCompare(parsed);
       const renderFull = async () => {
-        fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFull:start", message: "FULL RENDER triggered", data: { blocksToRender: yBlocks.length, blockIds: yBlocks.map((b) => b.id) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "E" }) }).catch(() => {
-        });
         await editor.render(parsed);
-        fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFull:done", message: "FULL RENDER completed", data: { newBlockCount: editor.blocks.getBlocksCount() }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "E" }) }).catch(() => {
-        });
         lastSerializedValueRef.current = normalizedParsed;
         setBlocksCount(yBlocks.length);
         calculateStats(parsed);
@@ -3836,8 +4502,6 @@ const Editor = React.forwardRef(({
           currentBlocks.push({ id: block.id, index: i });
         }
       }
-      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:comparison", message: "Comparing editor vs Y.js state", data: { editorBlockCount: blockCount, yBlocksCount: yBlocks.length, editorBlockIds: currentBlocks.map((b) => b.id), yBlockIds: yBlocks.map((b) => b.id) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "E" }) }).catch(() => {
-      });
       if (blockCount !== yBlocks.length) {
         console.log("[Magic Editor X] [SYNC] Structural change detected (count mismatch). Falling back to full render.");
         await renderFull();
@@ -4042,7 +4706,7 @@ const Editor = React.forwardRef(({
       const emptyPayload = JSON.stringify({ blocks: [] });
       lastSerializedValueRef.current = emptyPayload;
       pushLocalToCollab(emptyPayload);
-      onChange({ target: { name, value: null, type: "text" } });
+      onChange({ target: { name, value: null, type: "json" } });
       setBlocksCount(0);
       setWordCount(0);
       setCharCount(0);
@@ -4055,7 +4719,11 @@ const Editor = React.forwardRef(({
   }, [isReady]);
   React.useEffect(() => {
     if (editorRef.current && !editorInstanceRef.current) {
-      const tools$1 = tools.getTools({ mediaLibToggleFunc, pluginId: index.PLUGIN_ID });
+      const tools$1 = tools.getTools({
+        mediaLibToggleFunc,
+        pluginId: index.PLUGIN_ID,
+        openLinkPicker: isWebtoolsAvailable ? webtoolsOpenLinkPicker : null
+      });
       let initialData = void 0;
       if (value) {
         try {
@@ -4121,6 +4789,11 @@ const Editor = React.forwardRef(({
             }
             pendingRenderRef.current = null;
           }
+          if (collabEnabled && yTextMap) {
+            setTimeout(() => {
+              bindAllBlocksToYText();
+            }, 100);
+          }
         },
         onChange: async (api) => {
           try {
@@ -4140,9 +4813,9 @@ const Editor = React.forwardRef(({
             pushLocalToCollabRef.current?.(docPayload);
             lastSerializedValueRef.current = normalized;
             if (count === 0) {
-              onChange({ target: { name, value: null, type: "text" } });
+              onChange({ target: { name, value: null, type: "json" } });
             } else {
-              onChange({ target: { name, value: serialized, type: "text" } });
+              onChange({ target: { name, value: outputData, type: "json" } });
             }
           } catch (error2) {
             console.error("[Magic Editor X] Error in onChange:", error2);
@@ -4265,6 +4938,96 @@ const Editor = React.forwardRef(({
                       children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {})
                     }
                   ),
+                  isWebtoolsAvailable && /* @__PURE__ */ jsxRuntime.jsx(
+                    ToolButton,
+                    {
+                      type: "button",
+                      "data-tooltip": "Webtools Link Picker",
+                      onClick: async () => {
+                        if (!editorInstanceRef.current || !isReady) {
+                          console.warn("[Magic Editor X] Editor not ready");
+                          return;
+                        }
+                        const editor = editorInstanceRef.current;
+                        const {
+                          text: selectedText,
+                          range: savedRange,
+                          blockIndex,
+                          existingAnchor,
+                          existingHref
+                        } = webtoolsSelectionRef.current;
+                        console.log("[Magic Editor X] Webtools button clicked with stored selection:", {
+                          text: selectedText || "(none)",
+                          existingHref: existingHref || "(new link)",
+                          hasRange: !!savedRange,
+                          blockIndex
+                        });
+                        const currentBlockIndex = blockIndex >= 0 ? blockIndex : editor.blocks.getCurrentBlockIndex();
+                        const result = await webtoolsOpenLinkPicker({
+                          initialText: selectedText || "",
+                          initialHref: existingHref || ""
+                        });
+                        if (result && result.href) {
+                          const linkText = result.label || selectedText || result.href;
+                          const linkHtml = `<a href="${result.href}" target="_blank" rel="noopener noreferrer">${linkText}</a>`;
+                          if (existingAnchor && existingAnchor.parentNode) {
+                            try {
+                              existingAnchor.href = result.href;
+                              existingAnchor.textContent = linkText;
+                              const contentEditable = existingAnchor.closest('[contenteditable="true"]');
+                              if (contentEditable) {
+                                contentEditable.dispatchEvent(new Event("input", { bubbles: true }));
+                              }
+                              console.log("[Magic Editor X] Webtools link UPDATED:", {
+                                oldHref: existingHref,
+                                newHref: result.href,
+                                text: linkText
+                              });
+                            } catch (e) {
+                              console.error("[Magic Editor X] Failed to update link:", e);
+                            }
+                          } else if (savedRange && selectedText && currentBlockIndex >= 0) {
+                            try {
+                              const blockHolder = editor.blocks.getBlockByIndex(currentBlockIndex)?.holder;
+                              const contentEditable = blockHolder?.querySelector('[contenteditable="true"]');
+                              if (contentEditable) {
+                                const selection = window.getSelection();
+                                selection.removeAllRanges();
+                                selection.addRange(savedRange);
+                                document.execCommand("insertHTML", false, linkHtml);
+                                contentEditable.dispatchEvent(new Event("input", { bubbles: true }));
+                                console.log("[Magic Editor X] Webtools link CREATED:", {
+                                  text: linkText,
+                                  href: result.href
+                                });
+                              } else {
+                                editor.blocks.insert("paragraph", { text: linkHtml }, {}, currentBlockIndex + 1, true);
+                              }
+                            } catch (e) {
+                              console.error("[Magic Editor X] Failed to insert link:", e);
+                              editor.blocks.insert("paragraph", { text: linkHtml }, {}, currentBlockIndex + 1, true);
+                            }
+                          } else if (currentBlockIndex >= 0) {
+                            editor.blocks.insert("paragraph", {
+                              text: linkHtml
+                            }, {}, currentBlockIndex + 1, true);
+                            editor.caret.setToBlock(currentBlockIndex + 1);
+                            console.log("[Magic Editor X] Webtools link inserted (no selection):", result);
+                          } else {
+                            editor.blocks.insert("paragraph", { text: linkHtml });
+                          }
+                        }
+                        webtoolsSelectionRef.current = { text: "", range: null, blockIndex: -1, existingAnchor: null, existingHref: "" };
+                      },
+                      disabled: collabEnabled && collabCanEdit === false,
+                      style: {
+                        background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+                        color: "white",
+                        ...collabEnabled && collabCanEdit === false ? { opacity: 0.4, cursor: "not-allowed" } : {}
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, {})
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     ToolButton,
@@ -4380,9 +5143,26 @@ const Editor = React.forwardRef(({
                     /* @__PURE__ */ jsxRuntime.jsx("strong", { children: charCount }),
                     " ",
                     t("editor.characters", "Zeichen")
-                  ] })
+                  ] }),
+                  !isWebtoolsAvailable && /* @__PURE__ */ jsxRuntime.jsxs(
+                    WebtoolsPromoLink,
+                    {
+                      href: "https://www.pluginpal.io/plugin/webtools",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      title: "Get Webtools Links addon for internal link management",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, {}),
+                        "Internal Links? Get Webtools"
+                      ]
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(FooterRight, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(FooterButton, { type: "button", onClick: () => setShowVersionHistory(true), children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, {}),
+                    t("editor.versionHistory", "History")
+                  ] }),
                   !(collabEnabled && collabCanEdit === false) && /* @__PURE__ */ jsxRuntime.jsxs(FooterButton, { type: "button", onClick: () => handleInsertBlock("mediaLib"), children: [
                     /* @__PURE__ */ jsxRuntime.jsx(outline.PhotoIcon, {}),
                     t("editor.mediaLibrary", "Media Library")
@@ -4455,6 +5235,51 @@ const Editor = React.forwardRef(({
         }
       }
     ),
+    showVersionHistory && /* @__PURE__ */ jsxRuntime.jsx(VersionHistoryOverlay, { onClick: () => setShowVersionHistory(false), children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+      VersionHistoryPanel,
+      {
+        snapshots,
+        loading: versionHistoryLoading,
+        error: versionHistoryError,
+        tier: licenseTier,
+        onClose: () => setShowVersionHistory(false),
+        onRestore: async (snapshot) => {
+          if (snapshot.documentId && editorInstanceRef.current && isReady) {
+            try {
+              const result = await restoreSnapshot(snapshot.documentId, collabRoomId);
+              const contentToRestore = result?.jsonContent || snapshot.jsonContent;
+              if (contentToRestore && editorInstanceRef.current) {
+                await editorInstanceRef.current.render(contentToRestore);
+                setShowVersionHistory(false);
+                onChange({ target: { name, value: contentToRestore, type: "json" } });
+              }
+            } catch (err) {
+              console.error("[Magic Editor X] Failed to restore snapshot:", err?.message);
+            }
+          }
+        },
+        onCreate: async () => {
+          if (collabRoomId && editorInstanceRef.current && isReady) {
+            const [contentType, entryId, fieldName] = collabRoomId.split("|");
+            if (contentType && entryId && fieldName) {
+              try {
+                const editorContent = await editorInstanceRef.current.save();
+                await createSnapshot({
+                  roomId: collabRoomId,
+                  contentType,
+                  entryId,
+                  fieldName,
+                  content: editorContent
+                });
+                fetchSnapshots(collabRoomId);
+              } catch (err) {
+                console.error("[Magic Editor X] Failed to create snapshot:", err?.message);
+              }
+            }
+          }
+        }
+      }
+    ) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       CreditsModal,
       {