magic-editor-x 1.4.0 → 1.5.1

package/dist/_chunks/{index-zOiCW1bZ.mjs → index-DEi6nwfM.mjs}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { useState, useEffect, useCallback, useRef, useMemo, forwardRef } from "react";
-import { u as useIntl, F as Flex, T as Typography, B as Button$2, D as Divider, a as Box, g as getTranslation, b as Field, L as Loader } from "./getTranslation-Bk8tKbUs.mjs";
+import m__default, { useState, useEffect, useCallback, useRef, useMemo, forwardRef } from "react";
+import { u as useIntl, T, I, z as zn, b as bl, R, g as getTranslation, H as Hm, V as Vd } from "./getTranslation-D3h3Z3gU.mjs";
 import styled, { createGlobalStyle, css } from "styled-components";
 import { ClockIcon, ExclamationTriangleIcon, SparklesIcon as SparklesIcon$1, Bars3BottomLeftIcon, ListBulletIcon, CheckCircleIcon, PhotoIcon, LinkIcon, CodeBracketIcon, TableCellsIcon, ChatBubbleBottomCenterTextIcon, MinusIcon, DocumentDuplicateIcon, TrashIcon, ArrowsPointingInIcon, ArrowsPointingOutIcon, EyeIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
 import EditorJS from "@editorjs/editorjs";
-import { M as MagicEditorAPI, t as toastManager, g as getTools, i as initUndoRedo, a as initDragDrop, A as AIToast, b as AIInlineToolbar } from "./tools-uudZx91W.mjs";
+import { M as MagicEditorAPI, t as toastManager, g as getTools, i as initUndoRedo, a as initDragDrop, A as AIToast, b as AIInlineToolbar } from "./tools-BXzd0lx5.mjs";
 import { useStrapiApp, useFetchClient, useAuth } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-DkpTkVe7.mjs";
+import { P as PLUGIN_ID } from "./index-BvEdg518.mjs";
 import { io } from "socket.io-client";
 import * as Y from "yjs";
 import { IndexeddbPersistence } from "y-indexeddb";
@@ -970,7 +970,7 @@ const MediaLibComponent = ({
     }
   ) });
 };
-class MediaLibErrorBoundary extends React__default.Component {
+class MediaLibErrorBoundary extends m__default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -1763,8 +1763,8 @@ const useLicense = () => {
   };
 };
 const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) => {
-  const apiClientRef = React__default.useRef(null);
-  React__default.useEffect(() => {
+  const apiClientRef = m__default.useRef(null);
+  m__default.useEffect(() => {
     if (licenseKey && !apiClientRef.current) {
       apiClientRef.current = new MagicEditorAPI(licenseKey);
     }
@@ -2319,6 +2319,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";
@@ -2341,6 +2344,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
@@ -2840,7 +2983,7 @@ const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
     ] })
   ] }) });
 };
-const PanelWrapper = styled(Box)`
+const PanelWrapper = styled(R)`
   width: 320px;
   background: ${({ theme }) => theme.colors.neutral0};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -2850,25 +2993,25 @@ const PanelWrapper = styled(Box)`
   flex-direction: column;
   max-height: 70vh;
 `;
-const Header$1 = styled(Flex)`
+const Header$1 = styled(T)`
   padding: 12px 16px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const Content$1 = styled(Box)`
+const Content$1 = styled(R)`
   padding: 12px 16px;
   overflow-y: auto;
 `;
-const Item = styled(Box)`
+const Item = styled(R)`
   padding: 10px 12px;
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
   border-radius: 6px;
   margin-bottom: 10px;
 `;
-const Meta = styled(Typography)`
+const Meta = styled(I)`
   color: ${({ theme }) => theme.colors.neutral500};
   font-size: 12px;
 `;
-const PremiumBadge = styled(Box)`
+const PremiumBadge = styled(R)`
   background: ${({ theme }) => theme.colors.primary100};
   color: ${({ theme }) => theme.colors.primary600};
   border-radius: 6px;
@@ -2917,33 +3060,33 @@ const VersionHistoryPanel = ({
   );
   return /* @__PURE__ */ jsxs(PanelWrapper, { "data-testid": "version-history-panel", children: [
     /* @__PURE__ */ jsxs(Header$1, { justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ jsxs(Flex, { gap: 8, alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(T, { gap: 8, alignItems: "center", children: [
         /* @__PURE__ */ jsx(ClockIcon, { width: 18 }),
-        /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: t("versionHistory.title", "Version History") })
+        /* @__PURE__ */ jsx(I, { fontWeight: "bold", children: t("versionHistory.title", "Version History") })
       ] }),
-      /* @__PURE__ */ jsx(Button$2, { size: "S", variant: "tertiary", onClick: onClose, children: t("versionHistory.close", "Close") })
+      /* @__PURE__ */ jsx(zn, { size: "S", variant: "tertiary", onClick: onClose, children: t("versionHistory.close", "Close") })
     ] }),
     /* @__PURE__ */ jsxs(Content$1, { children: [
-      loading && /* @__PURE__ */ jsx(Typography, { children: t("versionHistory.loading", "Loading versions...") }),
-      error && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: error }),
-      !loading && !error && snapshots.length === 0 && /* @__PURE__ */ jsx(Typography, { children: t("versionHistory.noSnapshots", "No versions saved yet") }),
+      loading && /* @__PURE__ */ jsx(I, { children: t("versionHistory.loading", "Loading versions...") }),
+      error && /* @__PURE__ */ jsx(I, { textColor: "danger600", children: error }),
+      !loading && !error && snapshots.length === 0 && /* @__PURE__ */ jsx(I, { children: t("versionHistory.noSnapshots", "No versions saved yet") }),
       !loading && !error && snapshots.map((snap) => /* @__PURE__ */ jsxs(Item, { children: [
-        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ jsxs(Typography, { fontWeight: "bold", children: [
+        /* @__PURE__ */ jsxs(T, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(I, { fontWeight: "bold", children: [
             t("versionHistory.version", "Version"),
             " ",
             snap.version
           ] }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: formatDate(snap.createdAt) })
+          /* @__PURE__ */ jsx(I, { variant: "pi", children: formatDate(snap.createdAt) })
         ] }),
         /* @__PURE__ */ jsxs(Meta, { children: [
           t("versionHistory.createdBy", "By"),
           " ",
           snap.createdBy?.firstname ? `${snap.createdBy.firstname} ${snap.createdBy.lastname || ""}`.trim() : "—"
         ] }),
-        /* @__PURE__ */ jsx(Divider, { marginTop: 2, marginBottom: 2 }),
-        canRestore ? /* @__PURE__ */ jsx(Flex, { gap: 8, children: /* @__PURE__ */ jsx(
-          Button$2,
+        /* @__PURE__ */ jsx(bl, { marginTop: 2, marginBottom: 2 }),
+        canRestore ? /* @__PURE__ */ jsx(T, { gap: 8, children: /* @__PURE__ */ jsx(
+          zn,
           {
             size: "S",
             variant: "secondary",
@@ -2955,9 +3098,9 @@ const VersionHistoryPanel = ({
           t("versionHistory.premiumOnly", "Premium feature")
         ] })
       ] }, snap.documentId || snap.id)),
-      /* @__PURE__ */ jsx(Divider, { marginTop: 4, marginBottom: 4 }),
-      canRestore ? /* @__PURE__ */ jsx(Button$2, { size: "S", fullWidth: true, variant: "default", onClick: onCreate, disabled: loading, children: t("versionHistory.create", "Create Snapshot") }) : /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Button$2, { size: "S", fullWidth: true, variant: "default", disabled: true, children: t("versionHistory.create", "Create Snapshot") }),
+      /* @__PURE__ */ jsx(bl, { marginTop: 4, marginBottom: 4 }),
+      canRestore ? /* @__PURE__ */ jsx(zn, { size: "S", fullWidth: true, variant: "default", onClick: onCreate, disabled: loading, children: t("versionHistory.create", "Create Snapshot") }) : /* @__PURE__ */ jsxs(R, { children: [
+        /* @__PURE__ */ jsx(zn, { size: "S", fullWidth: true, variant: "default", disabled: true, children: t("versionHistory.create", "Create Snapshot") }),
         /* @__PURE__ */ jsxs(PremiumBadge, { style: { marginTop: "8px", width: "100%", justifyContent: "center" }, children: [
           /* @__PURE__ */ jsx(ExclamationTriangleIcon, { width: 16 }),
           t("versionHistory.premiumOnly", "Premium feature")
@@ -5995,6 +6138,37 @@ const Editor = forwardRef(({
     },
     [mediaLibBlockIndex, mediaLibToggleFunc]
   );
+  const [customBlockImageCallback, setCustomBlockImageCallback] = useState(null);
+  const handleCustomBlockMediaLibChange = 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]);
+  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 = useCallback(() => {
     setIsFullscreen((prev) => {
       if (!prev) {
@@ -6331,11 +6505,11 @@ const Editor = forwardRef(({
     { icon: ExclamationTriangleIcon, label: "Warning", block: "warning" },
     { icon: MinusIcon, label: "Divider", block: "delimiter" }
   ];
-  return /* @__PURE__ */ jsxs(Field.Root, { name, id: name, error, required, hint, children: [
+  return /* @__PURE__ */ jsxs(Hm.Root, { name, id: name, error, required, hint, children: [
     /* @__PURE__ */ jsx(FullscreenGlobalStyle, {}),
     /* @__PURE__ */ jsx(EditorJSGlobalStyles, {}),
     /* @__PURE__ */ jsx(AIToast, {}),
-    label && !isFullscreen && /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+    label && !isFullscreen && /* @__PURE__ */ jsx(Hm.Label, { action: labelAction, children: label }),
     /* @__PURE__ */ jsx(
       EditorContainer,
       {
@@ -6549,7 +6723,7 @@ const Editor = forwardRef(({
                   onBlur: () => setIsFocused(false),
                   children: [
                     !isReady && /* @__PURE__ */ jsxs(LoadingOverlay, { children: [
-                      /* @__PURE__ */ jsx(Loader, { small: true }),
+                      /* @__PURE__ */ jsx(Vd, { small: true }),
                       /* @__PURE__ */ jsx(LoadingText, { children: "Initializing editor..." })
                     ] }),
                     /* @__PURE__ */ jsx(
@@ -6634,15 +6808,21 @@ const Editor = forwardRef(({
       }
     ),
     !isFullscreen && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Field.Hint, {}),
-      /* @__PURE__ */ jsx(Field.Error, {})
+      /* @__PURE__ */ jsx(Hm.Hint, {}),
+      /* @__PURE__ */ jsx(Hm.Error, {})
     ] }),
     /* @__PURE__ */ jsx(
       MediaLibComponent,
       {
         isOpen: isMediaLibOpen,
-        onChange: handleMediaLibChange,
-        onToggle: mediaLibToggleFunc
+        onChange: customBlockImageCallback ? handleCustomBlockMediaLibChange : handleMediaLibChange,
+        onToggle: () => {
+          if (customBlockImageCallback) {
+            setCustomBlockImageCallback(null);
+          }
+          mediaLibToggleFunc();
+        },
+        multiple: !customBlockImageCallback
       }
     ),
     showAIToolbar && /* @__PURE__ */ jsx(

package/dist/_chunks/{tools-uudZx91W.mjs → tools-BXzd0lx5.mjs}

@@ -17,7 +17,7 @@ import Personality from "@editorjs/personality";
 import Alert from "editorjs-alert";
 import ToggleBlock from "editorjs-toggle-block";
 import CodeFlask from "@calumk/editorjs-codeflask";
-import React__default, { useState, useRef, useEffect } from "react";
+import m__default, { useState, useRef, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import styled, { keyframes } from "styled-components";
@@ -1436,7 +1436,7 @@ class AIAssistantTool {
     document.body.appendChild(this.toolbar);
     this.toolbarRoot = createRoot(this.toolbar);
     this.toolbarRoot.render(
-      React__default.createElement(AIInlineToolbar, {
+      m__default.createElement(AIInlineToolbar, {
         position,
         onAction: this._handleAction.bind(this),
         loading: this.isLoading,
@@ -1574,7 +1574,7 @@ class AIAssistantTool {
         top: rect.bottom + 8
       };
       this.toolbarRoot.render(
-        React__default.createElement(AIInlineToolbar, {
+        m__default.createElement(AIInlineToolbar, {
           position,
           onAction: this._handleAction.bind(this),
           loading: this.isLoading,

package/dist/_chunks/{tools-BSMn5LLQ.js → tools-Q0uwDS9E.js}

@@ -18,7 +18,7 @@ const Personality = require("@editorjs/personality");
 const Alert = require("editorjs-alert");
 const ToggleBlock = require("editorjs-toggle-block");
 const CodeFlask = require("@calumk/editorjs-codeflask");
-const React = require("react");
+const m = require("react");
 const client = require("react-dom/client");
 const jsxRuntime = require("react/jsx-runtime");
 const styled = require("styled-components");
@@ -52,7 +52,7 @@ const Personality__default = /* @__PURE__ */ _interopDefault(Personality);
 const Alert__default = /* @__PURE__ */ _interopDefault(Alert);
 const ToggleBlock__default = /* @__PURE__ */ _interopDefault(ToggleBlock);
 const CodeFlask__default = /* @__PURE__ */ _interopDefault(CodeFlask);
-const React__default = /* @__PURE__ */ _interopDefault(React);
+const m__default = /* @__PURE__ */ _interopDefault(m);
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const Marker__default = /* @__PURE__ */ _interopDefault(Marker);
 const InlineCode__default = /* @__PURE__ */ _interopDefault(InlineCode);
@@ -948,9 +948,9 @@ const AIInlineToolbar = ({
   disabled = false,
   onClose
 }) => {
-  const [activeSubmenu, setActiveSubmenu] = React.useState(null);
-  const toolbarRef = React.useRef(null);
-  React.useEffect(() => {
+  const [activeSubmenu, setActiveSubmenu] = m.useState(null);
+  const toolbarRef = m.useRef(null);
+  m.useEffect(() => {
     const handleClickOutside = (e) => {
       if (toolbarRef.current && !toolbarRef.current.contains(e.target)) {
         onClose?.();
@@ -1310,7 +1310,7 @@ class ToastManager {
 }
 const toastManager = new ToastManager();
 const Toast = ({ toast, onClose }) => {
-  const [closing, setClosing] = React.useState(false);
+  const [closing, setClosing] = m.useState(false);
   const handleClose = () => {
     setClosing(true);
     setTimeout(() => {
@@ -1335,8 +1335,8 @@ const Toast = ({ toast, onClose }) => {
   ] });
 };
 const AIToast = () => {
-  const [toasts, setToasts] = React.useState([]);
-  React.useEffect(() => {
+  const [toasts, setToasts] = m.useState([]);
+  m.useEffect(() => {
     const unsubscribe = toastManager.subscribe(setToasts);
     return unsubscribe;
   }, []);
@@ -1469,7 +1469,7 @@ class AIAssistantTool {
     document.body.appendChild(this.toolbar);
     this.toolbarRoot = client.createRoot(this.toolbar);
     this.toolbarRoot.render(
-      React__default.default.createElement(AIInlineToolbar, {
+      m__default.default.createElement(AIInlineToolbar, {
         position,
         onAction: this._handleAction.bind(this),
         loading: this.isLoading,
@@ -1607,7 +1607,7 @@ class AIAssistantTool {
         top: rect.bottom + 8
       };
       this.toolbarRoot.render(
-        React__default.default.createElement(AIInlineToolbar, {
+        m__default.default.createElement(AIInlineToolbar, {
           position,
           onAction: this._handleAction.bind(this),
           loading: this.isLoading,

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-C5DuaTDl.js");
+const index = require("../_chunks/index-BXBnwuRw.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { q } from "../_chunks/index-DkpTkVe7.mjs";
+import { i } from "../_chunks/index-BvEdg518.mjs";
 export {
-  q as default
+  i as default
 };