magic-editor-x 1.4.0 → 1.5.1

package/dist/_chunks/{index-DzixAi6O.js → index-DDFAuQNT.js}

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const getTranslation = require("./getTranslation-DOJ3x1SL.js");
+const m = require("react");
+const getTranslation = require("./getTranslation-BADoesEn.js");
 const styled = require("styled-components");
 const outline = require("@heroicons/react/24/outline");
 const EditorJS = require("@editorjs/editorjs");
-const tools = require("./tools-BSMn5LLQ.js");
+const tools = require("./tools-Q0uwDS9E.js");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-C5DuaTDl.js");
+const index = require("./index-BXBnwuRw.js");
 const socket_ioClient = require("socket.io-client");
 const Y = require("yjs");
 const yIndexeddb = require("y-indexeddb");
@@ -31,7 +31,7 @@ function _interopNamespace(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const React__default = /* @__PURE__ */ _interopDefault(React);
+const m__default = /* @__PURE__ */ _interopDefault(m);
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const EditorJS__default = /* @__PURE__ */ _interopDefault(EditorJS);
 const Y__namespace = /* @__PURE__ */ _interopNamespace(Y);
@@ -780,11 +780,11 @@ const MediaLibComponent = ({
   allowedTypes = ["images", "files", "videos", "audios"],
   multiple = true
 }) => {
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [retryCount, setRetryCount] = React.useState(0);
+  const [isLoading, setIsLoading] = m.useState(true);
+  const [retryCount, setRetryCount] = m.useState(0);
   const components = admin.useStrapiApp("MediaLibComponent", (state) => state.components);
   const MediaLibraryDialog = components?.["media-library"];
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (isOpen && !MediaLibraryDialog && retryCount < 5) {
       const timer = setTimeout(() => {
         setRetryCount((prev) => prev + 1);
@@ -793,13 +793,13 @@ const MediaLibComponent = ({
     }
     setIsLoading(false);
   }, [isOpen, MediaLibraryDialog, retryCount]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!isOpen) {
       setRetryCount(0);
       setIsLoading(true);
     }
   }, [isOpen]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (isOpen) {
       console.log("[Magic Editor X] MediaLib opened");
       console.log("[Magic Editor X] Available components:", Object.keys(components || {}));
@@ -807,7 +807,7 @@ const MediaLibComponent = ({
       console.log("[Magic Editor X] Retry count:", retryCount);
     }
   }, [isOpen, components, MediaLibraryDialog, retryCount]);
-  const handleSelectAssets = React.useCallback((files) => {
+  const handleSelectAssets = m.useCallback((files) => {
     console.log("[Magic Editor X] Selected assets:", files);
     if (!files || files.length === 0) {
       onToggle();
@@ -829,7 +829,7 @@ const MediaLibComponent = ({
     console.log("[Magic Editor X] Formatted files:", formattedFiles);
     onChange(formattedFiles);
   }, [onChange, onToggle]);
-  const handleClose = React.useCallback(() => {
+  const handleClose = m.useCallback(() => {
     console.log("[Magic Editor X] MediaLib closing");
     onToggle();
   }, [onToggle]);
@@ -994,7 +994,7 @@ const MediaLibComponent = ({
     }
   ) });
 };
-class MediaLibErrorBoundary extends React__default.default.Component {
+class MediaLibErrorBoundary extends m__default.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -1268,20 +1268,20 @@ const useMagicCollaboration = ({
   const { get, post } = admin.useFetchClient();
   const authContext = admin.useAuth("useMagicCollaboration", (state) => state);
   const user = authContext?.user || null;
-  const [status, setStatus] = React.useState(enabled ? "idle" : "disabled");
-  const [error, setError] = React.useState(null);
-  const [peers, setPeers] = React.useState([]);
-  const [awareness, setAwareness] = React.useState({});
-  const [collabRole, setCollabRole] = React.useState(null);
-  const [canEdit, setCanEdit] = React.useState(null);
-  const socketRef = React.useRef(null);
-  const persistenceRef = React.useRef(null);
-  const bootstrappedRef = React.useRef(false);
-  const onRemoteUpdateRef = React.useRef(onRemoteUpdate);
-  React.useEffect(() => {
+  const [status, setStatus] = m.useState(enabled ? "idle" : "disabled");
+  const [error, setError] = m.useState(null);
+  const [peers, setPeers] = m.useState([]);
+  const [awareness, setAwareness] = m.useState({});
+  const [collabRole, setCollabRole] = m.useState(null);
+  const [canEdit, setCanEdit] = m.useState(null);
+  const socketRef = m.useRef(null);
+  const persistenceRef = m.useRef(null);
+  const bootstrappedRef = m.useRef(false);
+  const onRemoteUpdateRef = m.useRef(onRemoteUpdate);
+  m.useEffect(() => {
     onRemoteUpdateRef.current = onRemoteUpdate;
   }, [onRemoteUpdate]);
-  const { doc, blocksMap, textMap, metaMap } = React.useMemo(() => {
+  const { doc, blocksMap, textMap, metaMap } = m.useMemo(() => {
     const yDoc = new Y__namespace.Doc();
     return {
       doc: yDoc,
@@ -1293,7 +1293,7 @@ const useMagicCollaboration = ({
       // Document metadata (time, blockOrder)
     };
   }, [roomId]);
-  const getBlockText = React.useCallback((blockId) => {
+  const getBlockText = m.useCallback((blockId) => {
     if (!blockId) return null;
     let ytext = textMap.get(blockId);
     if (!ytext) {
@@ -1302,7 +1302,7 @@ const useMagicCollaboration = ({
     }
     return ytext;
   }, [textMap]);
-  const setBlockText = React.useCallback((blockId, html) => {
+  const setBlockText = m.useCallback((blockId, html) => {
     if (!blockId) return;
     const ytext = getBlockText(blockId);
     if (!ytext) return;
@@ -1316,18 +1316,18 @@ const useMagicCollaboration = ({
       }
     }, "local");
   }, [doc, getBlockText]);
-  const getBlockTextHtml = React.useCallback((blockId) => {
+  const getBlockTextHtml = m.useCallback((blockId) => {
     if (!blockId) return "";
     const ytext = textMap.get(blockId);
     if (!ytext) return "";
     return deltaToHtml(ytext.toDelta());
   }, [textMap]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     return () => {
       doc.destroy();
     };
   }, [doc]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     bootstrappedRef.current = false;
     setPeers([]);
     setAwareness({});
@@ -1342,7 +1342,7 @@ const useMagicCollaboration = ({
       }
     };
   }, [roomId]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!enabled) return void 0;
     const cleanupInterval = setInterval(() => {
       const now = Date.now();
@@ -1361,14 +1361,14 @@ const useMagicCollaboration = ({
     }, 1e4);
     return () => clearInterval(cleanupInterval);
   }, [enabled]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!enabled) {
       setStatus("disabled");
     } else if (status === "disabled") {
       setStatus("idle");
     }
   }, [enabled, status]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!enabled || !roomId) {
       return void 0;
     }
@@ -1376,7 +1376,7 @@ const useMagicCollaboration = ({
     console.log("[Magic Collab] [READY] Client ready, waiting for server sync...");
     return void 0;
   }, [enabled, roomId]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!enabled || !roomId || !doc) {
       return void 0;
     }
@@ -1402,11 +1402,11 @@ const useMagicCollaboration = ({
       }
     };
   }, [enabled, roomId, doc]);
-  const initialValueRef = React.useRef(initialValue);
-  React.useEffect(() => {
+  const initialValueRef = m.useRef(initialValue);
+  m.useEffect(() => {
     initialValueRef.current = initialValue;
   }, [initialValue]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!enabled || !roomId || !user) {
       return void 0;
     }
@@ -1583,7 +1583,7 @@ const useMagicCollaboration = ({
       setPeers([]);
     };
   }, [enabled, post, fieldName, roomId, user]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!enabled) {
       console.log("[Magic Collab] [SKIP] Update handler not registered (disabled)");
       return void 0;
@@ -1611,12 +1611,12 @@ const useMagicCollaboration = ({
       doc.off("update", handler);
     };
   }, [doc, enabled]);
-  const emitAwareness = React.useCallback((payload) => {
+  const emitAwareness = m.useCallback((payload) => {
     if (socketRef.current?.connected) {
       socketRef.current.emit("collab:awareness", payload);
     }
   }, []);
-  const localUserColor = React.useMemo(() => {
+  const localUserColor = m.useMemo(() => {
     return user ? getUserColor(user.id) : CURSOR_COLORS[0];
   }, [user]);
   return {
@@ -1658,15 +1658,15 @@ const useMagicCollaboration = ({
 };
 const useLicense = () => {
   const { get } = admin.useFetchClient();
-  const [isPremium, setIsPremium] = React.useState(false);
-  const [isAdvanced, setIsAdvanced] = React.useState(false);
-  const [isEnterprise, setIsEnterprise] = React.useState(false);
-  const [tier, setTier] = React.useState("free");
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const [licenseData, setLicenseData] = React.useState(null);
-  const [limits, setLimits] = React.useState(null);
-  React.useEffect(() => {
+  const [isPremium, setIsPremium] = m.useState(false);
+  const [isAdvanced, setIsAdvanced] = m.useState(false);
+  const [isEnterprise, setIsEnterprise] = m.useState(false);
+  const [tier, setTier] = m.useState("free");
+  const [loading, setLoading] = m.useState(true);
+  const [error, setError] = m.useState(null);
+  const [licenseData, setLicenseData] = m.useState(null);
+  const [limits, setLimits] = m.useState(null);
+  m.useEffect(() => {
     let mounted = true;
     const fetchLicense = async () => {
       if (mounted) {
@@ -1787,13 +1787,13 @@ const useLicense = () => {
   };
 };
 const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) => {
-  const apiClientRef = React__default.default.useRef(null);
-  React__default.default.useEffect(() => {
+  const apiClientRef = m__default.default.useRef(null);
+  m__default.default.useEffect(() => {
     if (licenseKey && !apiClientRef.current) {
       apiClientRef.current = new tools.MagicEditorAPI(licenseKey);
     }
   }, [licenseKey]);
-  const replaceText = React.useCallback((range, newText) => {
+  const replaceText = m.useCallback((range, newText) => {
     if (!range) return false;
     try {
       const selection = window.getSelection();
@@ -1812,7 +1812,7 @@ const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) =
       return false;
     }
   }, [editorInstanceRef, isReady]);
-  const appendText = React.useCallback((range, additionalText) => {
+  const appendText = m.useCallback((range, additionalText) => {
     if (!range) return false;
     try {
       const selection = window.getSelection();
@@ -1833,7 +1833,7 @@ const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) =
       return false;
     }
   }, [editorInstanceRef, isReady]);
-  const handleAIAction = React.useCallback(async (action, options, { text, range }) => {
+  const handleAIAction = m.useCallback(async (action, options, { text, range }) => {
     if (!apiClientRef.current || !text) return;
     const originalText = text;
     const langNames = { en: "Englisch", de: "Deutsch", fr: "Französisch", es: "Spanisch" };
@@ -1943,14 +1943,14 @@ const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) =
 };
 const useWebtoolsLinks = () => {
   const getPlugin = admin.useStrapiApp("WebtoolsLinks", (state) => state.getPlugin);
-  const linksPlugin = React.useMemo(() => {
+  const linksPlugin = m.useMemo(() => {
     try {
       return getPlugin?.("webtools-addon-links");
     } catch (e) {
       return null;
     }
   }, [getPlugin]);
-  const isAvailable = React.useMemo(() => {
+  const isAvailable = m.useMemo(() => {
     const available = !!linksPlugin?.apis?.openLinkPicker;
     if (typeof window !== "undefined" && !window.__WEBTOOLS_LINKS_CHECKED__) {
       window.__WEBTOOLS_LINKS_CHECKED__ = true;
@@ -1962,7 +1962,7 @@ const useWebtoolsLinks = () => {
     }
     return available;
   }, [linksPlugin]);
-  const openLinkPicker = React.useCallback(async ({ initialHref = "", initialText = "" } = {}) => {
+  const openLinkPicker = m.useCallback(async ({ initialHref = "", initialText = "" } = {}) => {
     if (!linksPlugin?.apis?.openLinkPicker) {
       console.warn("[Magic Editor X] Webtools Link Picker not available");
       return null;
@@ -2002,10 +2002,10 @@ 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(
+  const [snapshots, setSnapshots] = m.useState([]);
+  const [loading, setLoading] = m.useState(false);
+  const [error, setError] = m.useState(null);
+  const fetchSnapshots = m.useCallback(
     async (roomId) => {
       if (!roomId) return;
       setLoading(true);
@@ -2021,7 +2021,7 @@ const useVersionHistory = () => {
     },
     [get]
   );
-  const restoreSnapshot = React.useCallback(
+  const restoreSnapshot = m.useCallback(
     async (documentId, roomId) => {
       if (!documentId) return;
       setLoading(true);
@@ -2038,7 +2038,7 @@ const useVersionHistory = () => {
     },
     [get]
   );
-  const createSnapshot = React.useCallback(
+  const createSnapshot = m.useCallback(
     async ({ roomId, contentType, entryId, fieldName, content }) => {
       if (!roomId || !contentType || !entryId || !fieldName) return;
       setLoading(true);
@@ -2343,6 +2343,9 @@ function createSimpleBlock(config) {
             this.data[field.name] = input.value;
           });
           break;
+        case "image":
+          input = this._createImageField(field);
+          break;
         default:
           input = document.createElement("input");
           input.type = field.type || "text";
@@ -2365,6 +2368,146 @@ function createSimpleBlock(config) {
       container.appendChild(input);
       return container;
     }
+    /**
+     * Create image field with Media Library integration
+     * @param {object} field - Field configuration
+     * @returns {HTMLElement}
+     */
+    _createImageField(field) {
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText = `
+        border: 2px dashed #e2e8f0;
+        border-radius: 8px;
+        padding: 16px;
+        text-align: center;
+        background: #fafbfc;
+        transition: all 0.2s ease;
+      `;
+      const preview = document.createElement("div");
+      preview.className = "image-preview";
+      preview.style.cssText = `
+        margin-bottom: 12px;
+        min-height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      `;
+      const img = document.createElement("img");
+      img.style.cssText = `
+        max-width: 100%;
+        max-height: 150px;
+        border-radius: 6px;
+        display: none;
+      `;
+      const placeholder = document.createElement("div");
+      placeholder.innerHTML = `
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/>
+          <path d="M21 15l-5-5L5 21"/>
+        </svg>
+        <p style="margin: 8px 0 0; color: #94a3b8; font-size: 13px;">No image selected</p>
+      `;
+      placeholder.style.cssText = "text-align: center;";
+      preview.appendChild(img);
+      preview.appendChild(placeholder);
+      const updatePreview = (url) => {
+        if (url) {
+          img.src = url;
+          img.style.display = "block";
+          placeholder.style.display = "none";
+          wrapper.style.borderStyle = "solid";
+          wrapper.style.borderColor = "#c4b5fd";
+        } else {
+          img.style.display = "none";
+          placeholder.style.display = "block";
+          wrapper.style.borderStyle = "dashed";
+          wrapper.style.borderColor = "#e2e8f0";
+        }
+      };
+      const currentValue = this.data[field.name];
+      if (currentValue && typeof currentValue === "object") {
+        updatePreview(currentValue.url);
+      } else if (typeof currentValue === "string" && currentValue) {
+        updatePreview(currentValue);
+      }
+      const buttons = document.createElement("div");
+      buttons.style.cssText = "display: flex; gap: 8px; justify-content: center;";
+      const selectBtn = document.createElement("button");
+      selectBtn.type = "button";
+      selectBtn.textContent = "Select Image";
+      selectBtn.style.cssText = `
+        padding: 8px 16px;
+        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      `;
+      selectBtn.addEventListener("mouseenter", () => {
+        selectBtn.style.transform = "translateY(-1px)";
+        selectBtn.style.boxShadow = "0 4px 12px rgba(124, 58, 237, 0.35)";
+      });
+      selectBtn.addEventListener("mouseleave", () => {
+        selectBtn.style.transform = "translateY(0)";
+        selectBtn.style.boxShadow = "none";
+      });
+      const removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.textContent = "Remove";
+      removeBtn.style.cssText = `
+        padding: 8px 16px;
+        background: transparent;
+        color: #ef4444;
+        border: 1px solid #fecaca;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: ${this.data[field.name] ? "inline-block" : "none"};
+      `;
+      removeBtn.addEventListener("click", () => {
+        this.data[field.name] = null;
+        updatePreview(null);
+        removeBtn.style.display = "none";
+      });
+      selectBtn.addEventListener("click", () => {
+        if (this.readOnly) return;
+        const callbackId = `image_field_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        window.__MAGIC_EDITOR_IMAGE_CALLBACKS__ = window.__MAGIC_EDITOR_IMAGE_CALLBACKS__ || {};
+        window.__MAGIC_EDITOR_IMAGE_CALLBACKS__[callbackId] = (files) => {
+          if (files && files.length > 0) {
+            const file = files[0];
+            const imageData = {
+              url: file.url,
+              alt: file.alt || file.name || "",
+              width: file.width,
+              height: file.height,
+              id: file.id,
+              documentId: file.documentId
+            };
+            this.data[field.name] = imageData;
+            updatePreview(imageData.url);
+            removeBtn.style.display = "inline-block";
+          }
+          delete window.__MAGIC_EDITOR_IMAGE_CALLBACKS__[callbackId];
+        };
+        window.dispatchEvent(new CustomEvent("magic-editor-open-media-lib", {
+          detail: { callbackId, fieldName: field.name, allowedTypes: ["images"] }
+        }));
+      });
+      buttons.appendChild(selectBtn);
+      buttons.appendChild(removeBtn);
+      wrapper.appendChild(preview);
+      if (!this.readOnly) {
+        wrapper.appendChild(buttons);
+      }
+      return wrapper;
+    }
     /**
      * Escape HTML special characters
      * @param {string} text - Text to escape
@@ -2418,11 +2561,11 @@ function createBlockClasses(blockConfigs) {
 }
 function useCustomBlocks() {
   const { get } = admin.useFetchClient();
-  const [customBlocks, setCustomBlocks] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const [lastFetched, setLastFetched] = React.useState(null);
-  const fetchCustomBlocks = React.useCallback(async () => {
+  const [customBlocks, setCustomBlocks] = m.useState([]);
+  const [isLoading, setIsLoading] = m.useState(true);
+  const [error, setError] = m.useState(null);
+  const [lastFetched, setLastFetched] = m.useState(null);
+  const fetchCustomBlocks = m.useCallback(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -2441,10 +2584,10 @@ function useCustomBlocks() {
       setIsLoading(false);
     }
   }, [get]);
-  const refresh = React.useCallback(() => {
+  const refresh = m.useCallback(() => {
     return fetchCustomBlocks();
   }, [fetchCustomBlocks]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     fetchCustomBlocks();
   }, [fetchCustomBlocks]);
   return {
@@ -2696,14 +2839,14 @@ const SparklesIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24",
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 19h4" })
 ] });
 const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
-  const [activeType, setActiveType] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [result, setResult] = React.useState(null);
-  const [error, setError] = React.useState(null);
-  const [credits, setCredits] = React.useState(0);
-  const [usage, setUsage] = React.useState(null);
-  const [apiClient, setApiClient] = React.useState(null);
-  React.useEffect(() => {
+  const [activeType, setActiveType] = m.useState(null);
+  const [isLoading, setIsLoading] = m.useState(false);
+  const [result, setResult] = m.useState(null);
+  const [error, setError] = m.useState(null);
+  const [credits, setCredits] = m.useState(0);
+  const [usage, setUsage] = m.useState(null);
+  const [apiClient, setApiClient] = m.useState(null);
+  m.useEffect(() => {
     if (licenseKey) {
       const client = new tools.MagicEditorAPI(licenseKey);
       setApiClient(client);
@@ -2715,7 +2858,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
       });
     }
   }, [licenseKey]);
-  const handleCorrection = React.useCallback(async (type) => {
+  const handleCorrection = m.useCallback(async (type) => {
     if (!apiClient || !selectedText) return;
     setActiveType(type);
     setIsLoading(true);
@@ -2745,7 +2888,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
       setIsLoading(false);
     }
   }, [apiClient, selectedText]);
-  const handleApply = React.useCallback(() => {
+  const handleApply = m.useCallback(() => {
     if (result?.corrected) {
       onApply(result.corrected);
     }
@@ -2755,7 +2898,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
       onClose();
     }
   };
-  React.useEffect(() => {
+  m.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -2864,7 +3007,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
     ] })
   ] }) });
 };
-const PanelWrapper = styled__default.default(getTranslation.Box)`
+const PanelWrapper = styled__default.default(getTranslation.R)`
   width: 320px;
   background: ${({ theme }) => theme.colors.neutral0};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -2874,25 +3017,25 @@ const PanelWrapper = styled__default.default(getTranslation.Box)`
   flex-direction: column;
   max-height: 70vh;
 `;
-const Header$1 = styled__default.default(getTranslation.Flex)`
+const Header$1 = styled__default.default(getTranslation.T)`
   padding: 12px 16px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const Content$1 = styled__default.default(getTranslation.Box)`
+const Content$1 = styled__default.default(getTranslation.R)`
   padding: 12px 16px;
   overflow-y: auto;
 `;
-const Item = styled__default.default(getTranslation.Box)`
+const Item = styled__default.default(getTranslation.R)`
   padding: 10px 12px;
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
   border-radius: 6px;
   margin-bottom: 10px;
 `;
-const Meta = styled__default.default(getTranslation.Typography)`
+const Meta = styled__default.default(getTranslation.I)`
   color: ${({ theme }) => theme.colors.neutral500};
   font-size: 12px;
 `;
-const PremiumBadge = styled__default.default(getTranslation.Box)`
+const PremiumBadge = styled__default.default(getTranslation.R)`
   background: ${({ theme }) => theme.colors.primary100};
   color: ${({ theme }) => theme.colors.primary600};
   border-radius: 6px;
@@ -2941,33 +3084,33 @@ const VersionHistoryPanel = ({
   );
   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.jsxs(getTranslation.T, { 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.I, { 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.jsx(getTranslation.zn, { 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 && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { children: t("versionHistory.loading", "Loading versions...") }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { textColor: "danger600", children: error }),
+      !loading && !error && snapshots.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { 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: [
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.T, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.I, { fontWeight: "bold", children: [
             t("versionHistory.version", "Version"),
             " ",
             snap.version
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "pi", children: formatDate(snap.createdAt) })
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { 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,
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.bl, { marginTop: 2, marginBottom: 2 }),
+        canRestore ? /* @__PURE__ */ jsxRuntime.jsx(getTranslation.T, { gap: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+          getTranslation.zn,
           {
             size: "S",
             variant: "secondary",
@@ -2979,9 +3122,9 @@ const VersionHistoryPanel = ({
           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.jsx(getTranslation.bl, { marginTop: 4, marginBottom: 4 }),
+      canRestore ? /* @__PURE__ */ jsxRuntime.jsx(getTranslation.zn, { size: "S", fullWidth: true, variant: "default", onClick: onCreate, disabled: loading, children: t("versionHistory.create", "Create Snapshot") }) : /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.R, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.zn, { 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")
@@ -5170,7 +5313,7 @@ const getPeerName = (user = {}) => {
   }
   return user.email?.split("@")[0] || "Anonymous";
 };
-const Editor = React.forwardRef(({
+const Editor = m.forwardRef(({
   name,
   value,
   onChange,
@@ -5189,14 +5332,14 @@ const Editor = React.forwardRef(({
   const { licenseData, tier: licenseTier } = useLicense();
   const { isAvailable: isWebtoolsAvailable, openLinkPicker: webtoolsOpenLinkPicker } = useWebtoolsLinks();
   const { customBlocks, isLoading: isLoadingCustomBlocks } = useCustomBlocks();
-  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);
-  const [creditsUpgradeInfo, setCreditsUpgradeInfo] = React.useState(null);
+  const editorRef = m.useRef(null);
+  const editorInstanceRef = m.useRef(null);
+  const containerRef = m.useRef(null);
+  const webtoolsSelectionRef = m.useRef({ text: "", range: null, blockIndex: -1, existingAnchor: null, existingHref: "" });
+  const isReadyRef = m.useRef(false);
+  const [isReady, setIsReady] = m.useState(false);
+  const [showCreditsModal, setShowCreditsModal] = m.useState(false);
+  const [creditsUpgradeInfo, setCreditsUpgradeInfo] = m.useState(null);
   const { handleAIAction } = useAIActions({
     licenseKey: licenseData?.licenseKey,
     editorInstanceRef,
@@ -5206,7 +5349,7 @@ const Editor = React.forwardRef(({
       setShowCreditsModal(true);
     }
   });
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (licenseData?.licenseKey) {
       window.__MAGIC_EDITOR_LICENSE_KEY__ = licenseData.licenseKey;
     }
@@ -5214,22 +5357,22 @@ const Editor = React.forwardRef(({
       delete window.__MAGIC_EDITOR_LICENSE_KEY__;
     };
   }, [licenseData?.licenseKey]);
-  const [blocksCount, setBlocksCount] = React.useState(0);
-  const [wordCount, setWordCount] = React.useState(0);
-  const [charCount, setCharCount] = React.useState(0);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isFullscreen, setIsFullscreen] = React.useState(false);
-  const [editorHeight, setEditorHeight] = React.useState(400);
-  const [mediaLibBlockIndex, setMediaLibBlockIndex] = React.useState(-1);
-  const [isMediaLibOpen, setIsMediaLibOpen] = React.useState(false);
-  const [showAIPopup, setShowAIPopup] = React.useState(false);
-  const [showAIToolbar, setShowAIToolbar] = React.useState(false);
-  const [aiToolbarPosition, setAIToolbarPosition] = React.useState({ top: 0, left: 0 });
-  const [aiSelectedText, setAISelectedText] = React.useState("");
-  const aiSelectionRangeRef = React.useRef(null);
-  const [aiLoading, setAILoading] = React.useState(false);
-  const [showVersionHistory, setShowVersionHistory] = React.useState(false);
-  React.useEffect(() => {
+  const [blocksCount, setBlocksCount] = m.useState(0);
+  const [wordCount, setWordCount] = m.useState(0);
+  const [charCount, setCharCount] = m.useState(0);
+  const [isFocused, setIsFocused] = m.useState(false);
+  const [isFullscreen, setIsFullscreen] = m.useState(false);
+  const [editorHeight, setEditorHeight] = m.useState(400);
+  const [mediaLibBlockIndex, setMediaLibBlockIndex] = m.useState(-1);
+  const [isMediaLibOpen, setIsMediaLibOpen] = m.useState(false);
+  const [showAIPopup, setShowAIPopup] = m.useState(false);
+  const [showAIToolbar, setShowAIToolbar] = m.useState(false);
+  const [aiToolbarPosition, setAIToolbarPosition] = m.useState({ top: 0, left: 0 });
+  const [aiSelectedText, setAISelectedText] = m.useState("");
+  const aiSelectionRangeRef = m.useRef(null);
+  const [aiLoading, setAILoading] = m.useState(false);
+  const [showVersionHistory, setShowVersionHistory] = m.useState(false);
+  m.useEffect(() => {
     if (!isWebtoolsAvailable || !editorRef.current) return;
     const updateWebtoolsSelection = () => {
       const selection = window.getSelection();
@@ -5273,13 +5416,13 @@ const Editor = React.forwardRef(({
       document.removeEventListener("selectionchange", updateWebtoolsSelection);
     };
   }, [isWebtoolsAvailable, isReady]);
-  const serializedInitialValue = React.useMemo(() => {
+  const serializedInitialValue = m.useMemo(() => {
     if (!value) {
       return "";
     }
     return typeof value === "string" ? value : JSON.stringify(value);
   }, [value]);
-  const serializeForCompare = React.useCallback((payload) => {
+  const serializeForCompare = m.useCallback((payload) => {
     if (!payload) return "";
     try {
       const dataObj = typeof payload === "string" ? JSON.parse(payload) : payload;
@@ -5294,9 +5437,9 @@ const Editor = React.forwardRef(({
       return "";
     }
   }, []);
-  const collabRoomId = React.useMemo(() => buildRoomId(name), [name]);
+  const collabRoomId = m.useMemo(() => buildRoomId(name), [name]);
   const collabEnabled = (attribute?.options?.collaboration?.enabled ?? true) && !disabled;
-  const renderFromYDocRef = React.useRef(null);
+  const renderFromYDocRef = m.useRef(null);
   const {
     doc: yDoc,
     blocksMap: yBlocksMap,
@@ -5333,8 +5476,8 @@ const Editor = React.forwardRef(({
       }
     }
   });
-  const yTextBindingsRef = React.useRef(/* @__PURE__ */ new Map());
-  const bindBlockToYText = React.useCallback((blockId, element) => {
+  const yTextBindingsRef = m.useRef(/* @__PURE__ */ new Map());
+  const bindBlockToYText = m.useCallback((blockId, element) => {
     if (!collabEnabled || !blockId || !element || !yTextMap) return;
     if (yTextBindingsRef.current.has(blockId)) {
       const existing = yTextBindingsRef.current.get(blockId);
@@ -5409,7 +5552,7 @@ const Editor = React.forwardRef(({
     });
     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 unbindBlockFromYText = m.useCallback((blockId) => {
     const binding = yTextBindingsRef.current.get(blockId);
     if (!binding) return;
     binding.ytext.unobserve(binding.ytextObserver);
@@ -5417,7 +5560,7 @@ const Editor = React.forwardRef(({
     yTextBindingsRef.current.delete(blockId);
     console.log("[Magic Editor X] [CHAR-SYNC] Unbound block from Y.Text:", blockId);
   }, []);
-  const bindAllBlocksToYText = React.useCallback(() => {
+  const bindAllBlocksToYText = m.useCallback(() => {
     if (!collabEnabled || !editorInstanceRef.current || !yTextMap) return;
     const editor = editorInstanceRef.current;
     if (!editor.blocks || typeof editor.blocks.getBlocksCount !== "function") return;
@@ -5445,8 +5588,8 @@ const Editor = React.forwardRef(({
       }
     }
   }, [collabEnabled, yTextMap, getBlockText, setBlockText, bindBlockToYText]);
-  const blockObserverRef = React.useRef(null);
-  React.useEffect(() => {
+  const blockObserverRef = m.useRef(null);
+  m.useEffect(() => {
     if (!collabEnabled || !editorRef.current || !yTextMap) return;
     const observer = new MutationObserver((mutations) => {
       let hasNewBlocks = false;
@@ -5477,7 +5620,7 @@ const Editor = React.forwardRef(({
       blockObserverRef.current = null;
     };
   }, [collabEnabled, yTextMap, bindAllBlocksToYText]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     return () => {
       yTextBindingsRef.current.forEach((binding, blockId) => {
         binding.ytext.unobserve(binding.ytextObserver);
@@ -5494,12 +5637,12 @@ const Editor = React.forwardRef(({
     restoreSnapshot,
     createSnapshot
   } = useVersionHistory();
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (showVersionHistory && collabRoomId) {
       fetchSnapshots(collabRoomId);
     }
   }, [showVersionHistory, collabRoomId, fetchSnapshots]);
-  React.useMemo(() => {
+  m.useMemo(() => {
     switch (collabRole) {
       case "viewer":
         return { icon: "V", text: "Viewer", color: "#3b82f6" };
@@ -5511,7 +5654,7 @@ const Editor = React.forwardRef(({
         return null;
     }
   }, [collabRole]);
-  React.useMemo(() => {
+  m.useMemo(() => {
     switch (collabStatus) {
       case "connected":
         if (collabRole === "viewer") {
@@ -5535,15 +5678,15 @@ const Editor = React.forwardRef(({
         return "Bereit";
     }
   }, [collabStatus, collabRole]);
-  React.useMemo(() => collabPeers.slice(0, 3), [collabPeers]);
-  const activeEditors = React.useMemo(() => {
+  m.useMemo(() => collabPeers.slice(0, 3), [collabPeers]);
+  const activeEditors = m.useMemo(() => {
     return Object.values(collabAwareness || {}).filter(
       (entry) => entry?.user && Date.now() - entry.lastUpdate < 3e4
     );
   }, [collabAwareness]);
-  const lastCursorUpdateRef = React.useRef(0);
-  const lastEmittedPositionRef = React.useRef(null);
-  const getAbsoluteOffset = React.useCallback((container, node, offset) => {
+  const lastCursorUpdateRef = m.useRef(0);
+  const lastEmittedPositionRef = m.useRef(null);
+  const getAbsoluteOffset = m.useCallback((container, node, offset) => {
     if (!container || !node) return 0;
     let absoluteOffset = 0;
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
@@ -5557,7 +5700,7 @@ const Editor = React.forwardRef(({
     }
     return absoluteOffset + offset;
   }, []);
-  const emitCursorPosition = React.useCallback(() => {
+  const emitCursorPosition = m.useCallback(() => {
     if (!collabEnabled || !emitAwareness || collabStatus !== "connected") {
       return;
     }
@@ -5607,7 +5750,7 @@ const Editor = React.forwardRef(({
     } catch (err) {
     }
   }, [collabEnabled, emitAwareness, collabStatus, getAbsoluteOffset]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (!collabEnabled || !editorRef.current) {
       return void 0;
     }
@@ -5647,7 +5790,7 @@ const Editor = React.forwardRef(({
       }
     };
   }, [collabEnabled, emitCursorPosition]);
-  const findTextPosition = React.useCallback((container, targetOffset) => {
+  const findTextPosition = m.useCallback((container, targetOffset) => {
     if (!container || targetOffset === null || targetOffset === void 0) {
       return null;
     }
@@ -5677,8 +5820,8 @@ const Editor = React.forwardRef(({
     }
     return null;
   }, []);
-  React.useRef(null);
-  React.useEffect(() => {
+  m.useRef(null);
+  m.useEffect(() => {
     if (!collabEnabled || !editorRef.current || !isReady) {
       return void 0;
     }
@@ -5788,7 +5931,7 @@ const Editor = React.forwardRef(({
       cursors?.forEach((el) => el.remove());
     };
   }, [collabEnabled, activeEditors, isReady, findTextPosition]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     const state = {
       status: collabStatus,
       peers: collabPeers,
@@ -5805,13 +5948,13 @@ const Editor = React.forwardRef(({
       }));
     };
   }, [collabStatus, collabPeers, collabError]);
-  const isApplyingRemoteRef = React.useRef(false);
-  const pendingRenderRef = React.useRef(null);
-  const lastSerializedValueRef = React.useRef(serializeForCompare(serializedInitialValue || null));
-  React.useEffect(() => {
+  const isApplyingRemoteRef = m.useRef(false);
+  const pendingRenderRef = m.useRef(null);
+  const lastSerializedValueRef = m.useRef(serializeForCompare(serializedInitialValue || null));
+  m.useEffect(() => {
     lastSerializedValueRef.current = serializeForCompare(serializedInitialValue || null);
   }, [serializedInitialValue, serializeForCompare]);
-  const calculateStats = React.useCallback((data) => {
+  const calculateStats = m.useCallback((data) => {
     if (!data?.blocks) {
       setWordCount(0);
       setCharCount(0);
@@ -5831,7 +5974,7 @@ const Editor = React.forwardRef(({
     setCharCount(plainText.length);
     setWordCount(plainText.split(/\s+/).filter((w) => w.length > 0).length);
   }, []);
-  const renderFromYDoc = React.useCallback(async () => {
+  const renderFromYDoc = m.useCallback(async () => {
     if (!collabEnabled || !yBlocksMap || !yDoc) {
       return;
     }
@@ -5946,10 +6089,10 @@ const Editor = React.forwardRef(({
       isApplyingRemoteRef.current = false;
     }
   }, [collabEnabled, yBlocksMap, yDoc, yMetaMap]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     renderFromYDocRef.current = renderFromYDoc;
   }, [renderFromYDoc]);
-  const pushLocalToCollab = React.useCallback((payload) => {
+  const pushLocalToCollab = m.useCallback((payload) => {
     console.log("[Magic Editor X] [PUSH] pushLocalToCollab called, enabled:", collabEnabled, "yDoc:", !!yDoc, "yBlocksMap:", !!yBlocksMap);
     if (!collabEnabled || !yDoc || !yBlocksMap) {
       console.log("[Magic Editor X] [SKIP] Skipping push - not enabled or missing yDoc/yBlocksMap");
@@ -5994,20 +6137,20 @@ const Editor = React.forwardRef(({
       console.error("[Magic Editor X] Failed to push local update", error2);
     }
   }, [collabEnabled, yDoc, yBlocksMap, yMetaMap]);
-  const pushLocalToCollabRef = React.useRef(pushLocalToCollab);
-  React.useEffect(() => {
+  const pushLocalToCollabRef = m.useRef(pushLocalToCollab);
+  m.useEffect(() => {
     pushLocalToCollabRef.current = pushLocalToCollab;
   }, [pushLocalToCollab]);
   const customPlaceholder = attribute?.options?.placeholder || placeholder || "Start writing your amazing content...";
   attribute?.options?.minHeight || 400;
-  const mediaLibToggleFunc = React.useCallback(
+  const mediaLibToggleFunc = m.useCallback(
     getToggleFunc({
       openStateSetter: setIsMediaLibOpen,
       indexStateSetter: setMediaLibBlockIndex
     }),
     []
   );
-  const handleMediaLibChange = React.useCallback(
+  const handleMediaLibChange = m.useCallback(
     (data) => {
       changeFunc({
         indexStateSetter: setMediaLibBlockIndex,
@@ -6019,7 +6162,38 @@ const Editor = React.forwardRef(({
     },
     [mediaLibBlockIndex, mediaLibToggleFunc]
   );
-  const toggleFullscreen = React.useCallback(() => {
+  const [customBlockImageCallback, setCustomBlockImageCallback] = m.useState(null);
+  const handleCustomBlockMediaLibChange = m.useCallback((data) => {
+    if (customBlockImageCallback && window.__MAGIC_EDITOR_IMAGE_CALLBACKS__) {
+      const callback = window.__MAGIC_EDITOR_IMAGE_CALLBACKS__[customBlockImageCallback];
+      if (callback) {
+        const formattedData = data.map((file) => ({
+          url: file.url,
+          alt: file.alt || file.name || "",
+          width: file.width,
+          height: file.height,
+          id: file.id,
+          documentId: file.documentId,
+          name: file.name
+        }));
+        callback(formattedData);
+      }
+    }
+    setCustomBlockImageCallback(null);
+    setIsMediaLibOpen(false);
+  }, [customBlockImageCallback]);
+  m.useEffect(() => {
+    const handleOpenMediaLib = (event) => {
+      const { callbackId, allowedTypes } = event.detail || {};
+      if (callbackId) {
+        setCustomBlockImageCallback(callbackId);
+        setIsMediaLibOpen(true);
+      }
+    };
+    window.addEventListener("magic-editor-open-media-lib", handleOpenMediaLib);
+    return () => window.removeEventListener("magic-editor-open-media-lib", handleOpenMediaLib);
+  }, []);
+  const toggleFullscreen = m.useCallback(() => {
     setIsFullscreen((prev) => {
       if (!prev) {
         document.body.classList.add("editor-fullscreen");
@@ -6029,7 +6203,7 @@ const Editor = React.forwardRef(({
       return !prev;
     });
   }, []);
-  React.useEffect(() => {
+  m.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && isFullscreen) {
         toggleFullscreen();
@@ -6041,7 +6215,7 @@ const Editor = React.forwardRef(({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isFullscreen, toggleFullscreen]);
-  const handleAIAssistant = React.useCallback(() => {
+  const handleAIAssistant = m.useCallback(() => {
     const selection = window.getSelection();
     let text = selection?.toString().trim();
     if (!text && editorInstanceRef.current && isReady) {
@@ -6082,7 +6256,7 @@ const Editor = React.forwardRef(({
     setAISelectedText(text);
     setShowAIToolbar(true);
   }, [isReady]);
-  const handleInsertBlock = React.useCallback((blockType) => {
+  const handleInsertBlock = m.useCallback((blockType) => {
     if (!editorInstanceRef.current || !isReady) return;
     if (blockType === "mediaLib") {
       if (collabEnabled && collabCanEdit === false) {
@@ -6102,7 +6276,7 @@ const Editor = React.forwardRef(({
     editor.blocks.insert(blockType, {}, {}, lastIndex, true);
     editor.caret.setToBlock(lastIndex);
   }, [isReady, collabEnabled, collabCanEdit]);
-  const handleClear = React.useCallback(async () => {
+  const handleClear = m.useCallback(async () => {
     if (!editorInstanceRef.current || !isReady) return;
     if (window.confirm("Clear all content? This cannot be undone.")) {
       await editorInstanceRef.current.clear();
@@ -6115,12 +6289,12 @@ const Editor = React.forwardRef(({
       setCharCount(0);
     }
   }, [isReady, name, onChange, pushLocalToCollab]);
-  const handleCopy = React.useCallback(async () => {
+  const handleCopy = m.useCallback(async () => {
     if (!editorInstanceRef.current || !isReady) return;
     const data = await editorInstanceRef.current.save();
     await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
   }, [isReady]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     if (isLoadingCustomBlocks) {
       console.log("[Magic Editor X] Waiting for custom blocks to load...");
       return;
@@ -6317,7 +6491,7 @@ const Editor = React.forwardRef(({
       document.body.classList.remove("editor-fullscreen");
     };
   }, [isLoadingCustomBlocks, customBlocks]);
-  React.useEffect(() => {
+  m.useEffect(() => {
     const editor = editorInstanceRef.current;
     if (!editor || !isReady) return;
     const shouldBeReadOnly = disabled || collabEnabled && collabCanEdit === false;
@@ -6355,11 +6529,11 @@ const Editor = React.forwardRef(({
     { icon: outline.ExclamationTriangleIcon, label: "Warning", block: "warning" },
     { icon: outline.MinusIcon, label: "Divider", block: "delimiter" }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Field.Root, { name, id: name, error, required, hint, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Hm.Root, { name, id: name, error, required, hint, children: [
     /* @__PURE__ */ jsxRuntime.jsx(FullscreenGlobalStyle, {}),
     /* @__PURE__ */ jsxRuntime.jsx(EditorJSGlobalStyles, {}),
     /* @__PURE__ */ jsxRuntime.jsx(tools.AIToast, {}),
-    label && !isFullscreen && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Field.Label, { action: labelAction, children: label }),
+    label && !isFullscreen && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Hm.Label, { action: labelAction, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorContainer,
       {
@@ -6573,7 +6747,7 @@ const Editor = React.forwardRef(({
                   onBlur: () => setIsFocused(false),
                   children: [
                     !isReady && /* @__PURE__ */ jsxRuntime.jsxs(LoadingOverlay, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Loader, { small: true }),
+                      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Vd, { small: true }),
                       /* @__PURE__ */ jsxRuntime.jsx(LoadingText, { children: "Initializing editor..." })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6658,15 +6832,21 @@ const Editor = React.forwardRef(({
       }
     ),
     !isFullscreen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Field.Hint, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Field.Error, {})
+      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Hm.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Hm.Error, {})
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       MediaLibComponent,
       {
         isOpen: isMediaLibOpen,
-        onChange: handleMediaLibChange,
-        onToggle: mediaLibToggleFunc
+        onChange: customBlockImageCallback ? handleCustomBlockMediaLibChange : handleMediaLibChange,
+        onToggle: () => {
+          if (customBlockImageCallback) {
+            setCustomBlockImageCallback(null);
+          }
+          mediaLibToggleFunc();
+        },
+        multiple: !customBlockImageCallback
       }
     ),
     showAIToolbar && /* @__PURE__ */ jsxRuntime.jsx(