magic-editor-x 1.3.7 → 1.4.0

package/dist/_chunks/{index-Czk5HVLJ.js → index-DzixAi6O.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-D21ValYk.js");
+const getTranslation = require("./getTranslation-DOJ3x1SL.js");
 const styled = require("styled-components");
 const outline = require("@heroicons/react/24/outline");
 const EditorJS = require("@editorjs/editorjs");
-const tools = require("./tools-D4Y_iEui.js");
+const tools = require("./tools-BSMn5LLQ.js");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-BnTvuHf2.js");
+const index = require("./index-C5DuaTDl.js");
 const socket_ioClient = require("socket.io-client");
 const Y = require("yjs");
 const yIndexeddb = require("y-indexeddb");
@@ -35,6 +35,732 @@ const React__default = /* @__PURE__ */ _interopDefault(React);
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const EditorJS__default = /* @__PURE__ */ _interopDefault(EditorJS);
 const Y__namespace = /* @__PURE__ */ _interopNamespace(Y);
+const ICONS = {
+  toolbox: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  linked: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  unlink: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 00-.12-7.07 5.006 5.006 0 00-6.95 0l-1.72 1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.17 11.75l-1.71 1.71a5.004 5.004 0 00.12 7.07 5.006 5.006 0 006.95 0l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2v3M2 8h3M16 22v-3M19 16h3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  refresh: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 20v-6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+};
+const STYLES = `
+  .embedded-entry-block {
+    border: 2px dashed #e2e8f0;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 8px 0;
+    background: #f8fafc;
+    transition: all 0.2s ease;
+  }
+  
+  .embedded-entry-block:hover {
+    border-color: #4945FF;
+    background: #f1f5f9;
+  }
+  
+  .embedded-entry-block--selected {
+    border-color: #4945FF;
+    border-style: solid;
+    background: #eef2ff;
+  }
+  
+  .embedded-entry-block__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100px;
+    cursor: pointer;
+    color: #64748b;
+  }
+  
+  .embedded-entry-block__placeholder:hover {
+    color: #4945FF;
+  }
+  
+  .embedded-entry-block__placeholder-icon {
+    margin-bottom: 8px;
+    opacity: 0.7;
+  }
+  
+  .embedded-entry-block__placeholder-text {
+    font-size: 14px;
+    font-weight: 500;
+  }
+  
+  .embedded-entry-block__placeholder-hint {
+    font-size: 12px;
+    margin-top: 4px;
+    opacity: 0.7;
+  }
+  
+  .embedded-entry-block__preview {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .embedded-entry-block__preview-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #4945FF;
+    color: white;
+    border-radius: 8px;
+  }
+  
+  .embedded-entry-block__preview-content {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  .embedded-entry-block__preview-type {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #4945FF;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  }
+  
+  .embedded-entry-block__preview-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .embedded-entry-block__preview-fields {
+    font-size: 13px;
+    color: #64748b;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  
+  .embedded-entry-block__preview-field {
+    background: #e2e8f0;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+  
+  .embedded-entry-block__preview-field-label {
+    font-weight: 600;
+    margin-right: 4px;
+  }
+  
+  .embedded-entry-block__actions {
+    display: flex;
+    gap: 4px;
+    margin-left: 12px;
+  }
+  
+  .embedded-entry-block__action {
+    padding: 6px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #64748b;
+    transition: all 0.15s ease;
+  }
+  
+  .embedded-entry-block__action:hover {
+    background: #f1f5f9;
+    color: #4945FF;
+    border-color: #4945FF;
+  }
+  
+  .embedded-entry-block__action--danger:hover {
+    color: #ef4444;
+    border-color: #ef4444;
+    background: #fef2f2;
+  }
+  
+  /* Picker Modal Styles */
+  .embedded-entry-picker {
+    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: 999999;
+  }
+  
+  .embedded-entry-picker__modal {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  
+  .embedded-entry-picker__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .embedded-entry-picker__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+  
+  .embedded-entry-picker__close {
+    padding: 4px;
+    cursor: pointer;
+    color: #64748b;
+    background: none;
+    border: none;
+    font-size: 24px;
+    line-height: 1;
+  }
+  
+  .embedded-entry-picker__search {
+    padding: 12px 20px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+  
+  .embedded-entry-picker__search-input {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 14px;
+    outline: none;
+  }
+  
+  .embedded-entry-picker__search-input:focus {
+    border-color: #4945FF;
+    box-shadow: 0 0 0 3px rgba(73, 69, 255, 0.1);
+  }
+  
+  .embedded-entry-picker__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+  }
+  
+  .embedded-entry-picker__item {
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    transition: background 0.15s ease;
+  }
+  
+  .embedded-entry-picker__item:hover {
+    background: #f1f5f9;
+  }
+  
+  .embedded-entry-picker__item-icon {
+    width: 36px;
+    height: 36px;
+    background: #4945FF;
+    color: white;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  
+  .embedded-entry-picker__item-content {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  .embedded-entry-picker__item-title {
+    font-weight: 500;
+    color: #1e293b;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .embedded-entry-picker__item-meta {
+    font-size: 12px;
+    color: #64748b;
+  }
+  
+  .embedded-entry-picker__empty {
+    padding: 40px 20px;
+    text-align: center;
+    color: #64748b;
+  }
+  
+  .embedded-entry-picker__loading {
+    padding: 40px 20px;
+    text-align: center;
+    color: #64748b;
+  }
+  
+  .embedded-entry-picker__error {
+    padding: 20px;
+    text-align: center;
+    color: #ef4444;
+    background: #fef2f2;
+    margin: 8px;
+    border-radius: 8px;
+  }
+`;
+class EmbeddedEntryTool {
+  /**
+   * Toolbox configuration
+   */
+  static get toolbox() {
+    return {
+      title: "Embedded Entry",
+      icon: ICONS.toolbox
+    };
+  }
+  /**
+   * Enable read-only mode support
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+  /**
+   * Paste configuration (disabled)
+   */
+  static get pasteConfig() {
+    return false;
+  }
+  /**
+   * Constructor
+   * @param {object} params - Editor.js tool params
+   * @param {object} params.data - Saved block data
+   * @param {object} params.api - Editor.js API
+   * @param {object} params.config - Tool configuration
+   * @param {boolean} params.readOnly - Read-only mode flag
+   */
+  constructor({ data, api, config, readOnly }) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this.config = config || {};
+    this.contentType = this.config.contentType || null;
+    this.displayFields = this.config.displayFields || ["id", "title", "name"];
+    this.allowedTypes = this.config.allowedTypes || null;
+    this.titleField = this.config.titleField || "title";
+    this.previewFields = this.config.previewFields || [];
+    this.data = {
+      entry: data?.entry || null,
+      contentType: data?.contentType || this.contentType,
+      displayMode: data?.displayMode || "card"
+      // card, inline, minimal
+    };
+    this.wrapper = null;
+    this.picker = null;
+    this._injectStyles();
+  }
+  /**
+   * Inject CSS styles into document
+   */
+  _injectStyles() {
+    const styleId = "embedded-entry-tool-styles";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = STYLES;
+      document.head.appendChild(style);
+    }
+  }
+  /**
+   * Render the block
+   * @returns {HTMLElement}
+   */
+  render() {
+    this.wrapper = document.createElement("div");
+    this.wrapper.classList.add("embedded-entry-block");
+    if (this.data.entry) {
+      this._renderPreview();
+    } else {
+      this._renderPlaceholder();
+    }
+    return this.wrapper;
+  }
+  /**
+   * Render placeholder (no entry selected)
+   */
+  _renderPlaceholder() {
+    if (this.readOnly) {
+      this.wrapper.innerHTML = `
+        <div class="embedded-entry-block__placeholder">
+          <span class="embedded-entry-block__placeholder-text">No entry selected</span>
+        </div>
+      `;
+      return;
+    }
+    const placeholder = document.createElement("div");
+    placeholder.classList.add("embedded-entry-block__placeholder");
+    placeholder.innerHTML = `
+      <div class="embedded-entry-block__placeholder-icon">${ICONS.toolbox}</div>
+      <span class="embedded-entry-block__placeholder-text">Click to embed an entry</span>
+      <span class="embedded-entry-block__placeholder-hint">${this.contentType ? this.contentType : "Select any content type"}</span>
+    `;
+    placeholder.addEventListener("click", () => this._openPicker());
+    this.wrapper.innerHTML = "";
+    this.wrapper.appendChild(placeholder);
+  }
+  /**
+   * Render entry preview
+   */
+  _renderPreview() {
+    const entry = this.data.entry;
+    const typeDisplay = this._formatContentType(this.data.contentType || entry.contentType);
+    const title = entry[this.titleField] || entry.title || entry.name || `Entry #${entry.id}`;
+    let fieldsHtml = "";
+    const fieldsToShow = this.previewFields.length > 0 ? this.previewFields : this.displayFields;
+    fieldsToShow.forEach((field) => {
+      if (entry[field] !== void 0 && field !== this.titleField) {
+        const value = typeof entry[field] === "object" ? JSON.stringify(entry[field]).substring(0, 50) : String(entry[field]).substring(0, 100);
+        fieldsHtml += `
+          <span class="embedded-entry-block__preview-field">
+            <span class="embedded-entry-block__preview-field-label">${field}:</span>
+            ${value}
+          </span>
+        `;
+      }
+    });
+    const actionsHtml = this.readOnly ? "" : `
+      <div class="embedded-entry-block__actions">
+        <button class="embedded-entry-block__action" data-action="change" title="Change entry">
+          ${ICONS.refresh}
+        </button>
+        <button class="embedded-entry-block__action embedded-entry-block__action--danger" data-action="remove" title="Remove entry">
+          ${ICONS.unlink}
+        </button>
+      </div>
+    `;
+    this.wrapper.innerHTML = `
+      <div class="embedded-entry-block__preview">
+        <div class="embedded-entry-block__preview-icon">
+          ${ICONS.linked}
+        </div>
+        <div class="embedded-entry-block__preview-content">
+          <div class="embedded-entry-block__preview-type">${typeDisplay}</div>
+          <div class="embedded-entry-block__preview-title">${this._escapeHtml(title)}</div>
+          ${fieldsHtml ? `<div class="embedded-entry-block__preview-fields">${fieldsHtml}</div>` : ""}
+        </div>
+        ${actionsHtml}
+      </div>
+    `;
+    if (!this.readOnly) {
+      const changeBtn = this.wrapper.querySelector('[data-action="change"]');
+      const removeBtn = this.wrapper.querySelector('[data-action="remove"]');
+      if (changeBtn) {
+        changeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this._openPicker();
+        });
+      }
+      if (removeBtn) {
+        removeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this._removeEntry();
+        });
+      }
+    }
+    this.wrapper.classList.add("embedded-entry-block--selected");
+  }
+  /**
+   * Open the entry picker modal
+   */
+  async _openPicker() {
+    if (this.readOnly) return;
+    this.picker = document.createElement("div");
+    this.picker.classList.add("embedded-entry-picker");
+    this.picker.innerHTML = `
+      <div class="embedded-entry-picker__modal">
+        <div class="embedded-entry-picker__header">
+          <span class="embedded-entry-picker__title">Select Entry</span>
+          <button class="embedded-entry-picker__close">&times;</button>
+        </div>
+        <div class="embedded-entry-picker__search">
+          <input type="text" class="embedded-entry-picker__search-input" placeholder="Search entries...">
+        </div>
+        <div class="embedded-entry-picker__list">
+          <div class="embedded-entry-picker__loading">Loading entries...</div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(this.picker);
+    const closeBtn = this.picker.querySelector(".embedded-entry-picker__close");
+    const searchInput = this.picker.querySelector(".embedded-entry-picker__search-input");
+    closeBtn.addEventListener("click", () => this._closePicker());
+    this.picker.addEventListener("click", (e) => {
+      if (e.target === this.picker) this._closePicker();
+    });
+    let searchTimeout;
+    searchInput.addEventListener("input", () => {
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => {
+        this._loadEntries(searchInput.value);
+      }, 300);
+    });
+    setTimeout(() => searchInput.focus(), 100);
+    await this._loadEntries();
+  }
+  /**
+   * Close the picker modal
+   */
+  _closePicker() {
+    if (this.picker) {
+      this.picker.remove();
+      this.picker = null;
+    }
+  }
+  /**
+   * Load entries from Strapi API
+   * @param {string} search - Search query
+   */
+  async _loadEntries(search = "") {
+    const listContainer = this.picker?.querySelector(".embedded-entry-picker__list");
+    if (!listContainer) return;
+    listContainer.innerHTML = '<div class="embedded-entry-picker__loading">Loading entries...</div>';
+    try {
+      const token = this._getAuthToken();
+      if (!token) {
+        throw new Error("Not authenticated");
+      }
+      let entries = [];
+      if (this.contentType) {
+        entries = await this._fetchContentTypeEntries(this.contentType, search, token);
+      } else {
+        const contentTypes = await this._fetchContentTypes(token);
+        for (const ct of contentTypes) {
+          if (this.allowedTypes && !this.allowedTypes.includes(ct.uid)) continue;
+          const ctEntries = await this._fetchContentTypeEntries(ct.uid, search, token, 5);
+          entries = entries.concat(ctEntries.map((e) => ({ ...e, contentType: ct.uid })));
+        }
+      }
+      if (entries.length === 0) {
+        listContainer.innerHTML = '<div class="embedded-entry-picker__empty">No entries found</div>';
+        return;
+      }
+      listContainer.innerHTML = "";
+      entries.forEach((entry) => {
+        const item = this._createEntryItem(entry);
+        listContainer.appendChild(item);
+      });
+    } catch (error) {
+      console.error("[EmbeddedEntryTool] Error loading entries:", error);
+      listContainer.innerHTML = `<div class="embedded-entry-picker__error">Error: ${error.message}</div>`;
+    }
+  }
+  /**
+   * Fetch content types from Strapi
+   * @param {string} token - Auth token
+   * @returns {Array}
+   */
+  async _fetchContentTypes(token) {
+    try {
+      const response = await fetch("/api/magic-editor-x/content-types", {
+        headers: {
+          "Authorization": `Bearer ${token}`
+        }
+      });
+      if (!response.ok) throw new Error("Failed to fetch content types");
+      const data = await response.json();
+      return data.contentTypes || [];
+    } catch (error) {
+      console.error("[EmbeddedEntryTool] Error fetching content types:", error);
+      return [];
+    }
+  }
+  /**
+   * Fetch entries from a specific content type
+   * @param {string} contentType - Content type UID
+   * @param {string} search - Search query
+   * @param {string} token - Auth token
+   * @param {number} limit - Max entries to fetch
+   * @returns {Array}
+   */
+  async _fetchContentTypeEntries(contentType, search, token, limit = 20) {
+    try {
+      const params = new URLSearchParams({
+        "pagination[pageSize]": limit.toString()
+      });
+      if (search) {
+        params.append("filters[$or][0][title][$containsi]", search);
+        params.append("filters[$or][1][name][$containsi]", search);
+      }
+      const apiPath = this._contentTypeToApiPath(contentType);
+      const response = await fetch(`/api/${apiPath}?${params.toString()}`, {
+        headers: {
+          "Authorization": `Bearer ${token}`
+        }
+      });
+      if (!response.ok) {
+        return [];
+      }
+      const data = await response.json();
+      let entries = [];
+      if (Array.isArray(data)) {
+        entries = data;
+      } else if (data.data) {
+        entries = Array.isArray(data.data) ? data.data : [data.data];
+      }
+      return entries.map((entry) => ({
+        ...entry,
+        contentType
+      }));
+    } catch (error) {
+      console.error(`[EmbeddedEntryTool] Error fetching ${contentType}:`, error);
+      return [];
+    }
+  }
+  /**
+   * Convert content type UID to API path
+   * @param {string} uid - Content type UID (e.g., api::article.article)
+   * @returns {string} API path (e.g., articles)
+   */
+  _contentTypeToApiPath(uid) {
+    const parts = uid.split("::");
+    if (parts.length > 1) {
+      const name = parts[1].split(".")[0];
+      return name.endsWith("s") ? name : `${name}s`;
+    }
+    return uid;
+  }
+  /**
+   * Create entry list item element
+   * @param {object} entry - Entry data
+   * @returns {HTMLElement}
+   */
+  _createEntryItem(entry) {
+    const item = document.createElement("div");
+    item.classList.add("embedded-entry-picker__item");
+    const title = entry.title || entry.name || entry.label || `Entry #${entry.id}`;
+    const type = this._formatContentType(entry.contentType);
+    item.innerHTML = `
+      <div class="embedded-entry-picker__item-icon">${ICONS.linked}</div>
+      <div class="embedded-entry-picker__item-content">
+        <div class="embedded-entry-picker__item-title">${this._escapeHtml(title)}</div>
+        <div class="embedded-entry-picker__item-meta">${type} · ID: ${entry.documentId || entry.id}</div>
+      </div>
+    `;
+    item.addEventListener("click", () => {
+      this._selectEntry(entry);
+    });
+    return item;
+  }
+  /**
+   * Select an entry
+   * @param {object} entry - Entry data
+   */
+  _selectEntry(entry) {
+    this.data.entry = entry;
+    this.data.contentType = entry.contentType;
+    this._closePicker();
+    this._renderPreview();
+    this.api.blocks.update(this.api.blocks.getCurrentBlockIndex(), this.data);
+  }
+  /**
+   * Remove selected entry
+   */
+  _removeEntry() {
+    this.data.entry = null;
+    this.wrapper.classList.remove("embedded-entry-block--selected");
+    this._renderPlaceholder();
+  }
+  /**
+   * Format content type UID to display name
+   * @param {string} uid - Content type UID
+   * @returns {string}
+   */
+  _formatContentType(uid) {
+    if (!uid) return "Unknown Type";
+    const parts = uid.split("::");
+    if (parts.length > 1) {
+      const name = parts[1].split(".")[0];
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+    return uid;
+  }
+  /**
+   * Escape HTML special characters
+   * @param {string} text - Text to escape
+   * @returns {string}
+   */
+  _escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+  /**
+   * Get authentication token from storage
+   * @returns {string|null}
+   */
+  _getAuthToken() {
+    try {
+      const token = sessionStorage.getItem("jwtToken");
+      if (token) return JSON.parse(token);
+      const localToken = localStorage.getItem("jwtToken");
+      if (localToken) return JSON.parse(localToken);
+      return null;
+    } catch (e) {
+      return null;
+    }
+  }
+  /**
+   * Save block data
+   * @returns {object}
+   */
+  save() {
+    return {
+      entry: this.data.entry ? {
+        id: this.data.entry.id,
+        documentId: this.data.entry.documentId,
+        title: this.data.entry.title || this.data.entry.name,
+        ...this._extractDisplayFields(this.data.entry)
+      } : null,
+      contentType: this.data.contentType,
+      displayMode: this.data.displayMode
+    };
+  }
+  /**
+   * Extract configured display fields from entry
+   * @param {object} entry - Entry data
+   * @returns {object}
+   */
+  _extractDisplayFields(entry) {
+    const result = {};
+    this.displayFields.forEach((field) => {
+      if (entry[field] !== void 0) {
+        result[field] = entry[field];
+      }
+    });
+    return result;
+  }
+  /**
+   * Validate saved data
+   * @param {object} savedData - Data to validate
+   * @returns {boolean}
+   */
+  validate(savedData) {
+    return true;
+  }
+}
 const getBackendUrl = () => {
   return window.location.origin;
 };
@@ -1345,6 +2071,390 @@ const useVersionHistory = () => {
     createSnapshot
   };
 };
+const DEFAULT_ICONS = {
+  simple: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/><path d="M7 8h10M7 12h6M7 16h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+  "embedded-entry": '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+};
+function createBlockClass(blockConfig) {
+  if (!blockConfig || !blockConfig.name) {
+    console.warn("[BlockFactory] Invalid block configuration:", blockConfig);
+    return null;
+  }
+  switch (blockConfig.blockType) {
+    case "embedded-entry":
+      return createEmbeddedEntryBlock(blockConfig);
+    case "simple":
+    default:
+      return createSimpleBlock(blockConfig);
+  }
+}
+function createEmbeddedEntryBlock(config) {
+  class CustomEmbeddedEntryTool extends EmbeddedEntryTool {
+    static get toolbox() {
+      return {
+        title: config.label || config.name,
+        icon: config.icon || DEFAULT_ICONS["embedded-entry"]
+      };
+    }
+  }
+  return {
+    name: config.name,
+    class: CustomEmbeddedEntryTool,
+    config: {
+      contentType: config.contentType,
+      displayFields: config.displayFields || ["title", "name", "id"],
+      titleField: config.titleField || "title",
+      previewFields: config.previewFields || [],
+      allowedTypes: config.allowedTypes || null
+    },
+    inlineToolbar: false,
+    tunes: config.tunes || [],
+    shortcut: config.shortcut || null
+  };
+}
+function createSimpleBlock(config) {
+  class SimpleBlockTool {
+    /**
+     * Toolbox configuration
+     */
+    static get toolbox() {
+      return {
+        title: config.label || config.name,
+        icon: config.icon || DEFAULT_ICONS.simple
+      };
+    }
+    /**
+     * Enable read-only mode
+     */
+    static get isReadOnlySupported() {
+      return true;
+    }
+    /**
+     * Constructor
+     * @param {object} params - Editor.js tool params
+     */
+    constructor({ data, api, readOnly }) {
+      this.api = api;
+      this.readOnly = readOnly;
+      this.config = config;
+      this.data = {
+        content: data?.content || "",
+        ...this._getDefaultFieldValues(),
+        ...data
+      };
+      this.wrapper = null;
+    }
+    /**
+     * Get default values for configured fields
+     * @returns {object}
+     */
+    _getDefaultFieldValues() {
+      const defaults = {};
+      if (config.fields) {
+        config.fields.forEach((field) => {
+          if (field.default !== void 0) {
+            defaults[field.name] = field.default;
+          }
+        });
+      }
+      return defaults;
+    }
+    /**
+     * Render the block
+     * @returns {HTMLElement}
+     */
+    render() {
+      this.wrapper = document.createElement("div");
+      this.wrapper.classList.add("simple-block", `simple-block--${config.name}`);
+      if (config.styles) {
+        Object.assign(this.wrapper.style, config.styles);
+      }
+      if (config.template) {
+        this._renderFromTemplate();
+      } else {
+        this._renderDefault();
+      }
+      return this.wrapper;
+    }
+    /**
+     * Render from HTML template
+     */
+    _renderFromTemplate() {
+      let html = config.template;
+      Object.keys(this.data).forEach((key) => {
+        const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+        html = html.replace(regex, this._escapeHtml(String(this.data[key])));
+      });
+      this.wrapper.innerHTML = html;
+      if (!this.readOnly && config.fields) {
+        config.fields.forEach((field) => {
+          const el = this.wrapper.querySelector(`[data-field="${field.name}"]`);
+          if (el && field.editable !== false) {
+            el.contentEditable = true;
+            el.addEventListener("blur", () => {
+              this.data[field.name] = el.textContent;
+            });
+          }
+        });
+      }
+    }
+    /**
+     * Render default layout
+     */
+    _renderDefault() {
+      this.wrapper.style.cssText = `
+        border: 2px dashed #e2e8f0;
+        border-radius: 8px;
+        padding: 16px;
+        margin: 8px 0;
+        background: #f8fafc;
+      `;
+      const header = document.createElement("div");
+      header.style.cssText = `
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: #4945FF;
+        margin-bottom: 8px;
+        letter-spacing: 0.5px;
+      `;
+      header.textContent = config.label || config.name;
+      this.wrapper.appendChild(header);
+      const content = document.createElement("div");
+      content.className = "simple-block__content";
+      content.contentEditable = !this.readOnly;
+      content.style.cssText = `
+        min-height: 40px;
+        outline: none;
+        font-size: 14px;
+        color: #1e293b;
+      `;
+      content.textContent = this.data.content || "";
+      content.dataset.placeholder = config.placeholder || "Enter content...";
+      if (!this.data.content) {
+        content.style.color = "#94a3b8";
+        content.textContent = config.placeholder || "Enter content...";
+      }
+      content.addEventListener("focus", () => {
+        if (!this.data.content) {
+          content.textContent = "";
+          content.style.color = "#1e293b";
+        }
+      });
+      content.addEventListener("blur", () => {
+        this.data.content = content.textContent;
+        if (!this.data.content) {
+          content.style.color = "#94a3b8";
+          content.textContent = config.placeholder || "Enter content...";
+        }
+      });
+      this.wrapper.appendChild(content);
+      if (config.fields) {
+        config.fields.forEach((field) => {
+          this.wrapper.appendChild(this._createFieldInput(field));
+        });
+      }
+    }
+    /**
+     * Create input for a field
+     * @param {object} field - Field configuration
+     * @returns {HTMLElement}
+     */
+    _createFieldInput(field) {
+      const container = document.createElement("div");
+      container.style.cssText = "margin-top: 12px;";
+      const label = document.createElement("label");
+      label.style.cssText = `
+        display: block;
+        font-size: 12px;
+        font-weight: 500;
+        color: #64748b;
+        margin-bottom: 4px;
+      `;
+      label.textContent = field.label || field.name;
+      container.appendChild(label);
+      let input;
+      switch (field.type) {
+        case "select":
+          input = document.createElement("select");
+          input.style.cssText = `
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            font-size: 14px;
+            background: white;
+          `;
+          (field.options || []).forEach((opt) => {
+            const option = document.createElement("option");
+            option.value = typeof opt === "object" ? opt.value : opt;
+            option.textContent = typeof opt === "object" ? opt.label : opt;
+            if (option.value === this.data[field.name]) {
+              option.selected = true;
+            }
+            input.appendChild(option);
+          });
+          input.addEventListener("change", () => {
+            this.data[field.name] = input.value;
+          });
+          break;
+        case "color":
+          input = document.createElement("input");
+          input.type = "color";
+          input.value = this.data[field.name] || "#4945FF";
+          input.style.cssText = `
+            width: 100%;
+            height: 40px;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            cursor: pointer;
+          `;
+          input.addEventListener("change", () => {
+            this.data[field.name] = input.value;
+          });
+          break;
+        case "checkbox":
+          input = document.createElement("input");
+          input.type = "checkbox";
+          input.checked = this.data[field.name] || false;
+          input.style.cssText = `
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+          `;
+          input.addEventListener("change", () => {
+            this.data[field.name] = input.checked;
+          });
+          break;
+        case "textarea":
+          input = document.createElement("textarea");
+          input.value = this.data[field.name] || "";
+          input.rows = 3;
+          input.style.cssText = `
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            font-size: 14px;
+            resize: vertical;
+            font-family: inherit;
+          `;
+          input.addEventListener("blur", () => {
+            this.data[field.name] = input.value;
+          });
+          break;
+        default:
+          input = document.createElement("input");
+          input.type = field.type || "text";
+          input.value = this.data[field.name] || "";
+          input.placeholder = field.placeholder || "";
+          input.style.cssText = `
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            font-size: 14px;
+          `;
+          input.addEventListener("blur", () => {
+            this.data[field.name] = input.value;
+          });
+      }
+      if (this.readOnly && input) {
+        input.disabled = true;
+      }
+      container.appendChild(input);
+      return container;
+    }
+    /**
+     * Escape HTML special characters
+     * @param {string} text - Text to escape
+     * @returns {string}
+     */
+    _escapeHtml(text) {
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    /**
+     * Save block data
+     * @returns {object}
+     */
+    save() {
+      return {
+        ...this.data,
+        blockType: "simple",
+        blockName: config.name
+      };
+    }
+    /**
+     * Validate block data
+     * @returns {boolean}
+     */
+    validate() {
+      if (config.fields) {
+        for (const field of config.fields) {
+          if (field.required && !this.data[field.name]) {
+            return false;
+          }
+        }
+      }
+      return true;
+    }
+  }
+  return {
+    name: config.name,
+    class: SimpleBlockTool,
+    config: {},
+    inlineToolbar: config.inlineToolbar !== false,
+    tunes: config.tunes || [],
+    shortcut: config.shortcut || null
+  };
+}
+function createBlockClasses(blockConfigs) {
+  if (!Array.isArray(blockConfigs)) {
+    return [];
+  }
+  return blockConfigs.map(createBlockClass).filter(Boolean);
+}
+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 () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const response = await get(`/${index.PLUGIN_ID}/custom-blocks?enabledOnly=true`);
+      const blocksData = response.data?.data || [];
+      const blockClasses = createBlockClasses(blocksData);
+      console.log(`[useCustomBlocks] Loaded ${blockClasses.length} custom blocks`);
+      setCustomBlocks(blockClasses);
+      setLastFetched(/* @__PURE__ */ new Date());
+      return blockClasses;
+    } catch (err) {
+      console.error("[useCustomBlocks] Error loading custom blocks:", err);
+      setError(err.message || "Failed to load custom blocks");
+      return [];
+    } finally {
+      setIsLoading(false);
+    }
+  }, [get]);
+  const refresh = React.useCallback(() => {
+    return fetchCustomBlocks();
+  }, [fetchCustomBlocks]);
+  React.useEffect(() => {
+    fetchCustomBlocks();
+  }, [fetchCustomBlocks]);
+  return {
+    customBlocks,
+    isLoading,
+    error,
+    lastFetched,
+    refresh
+  };
+}
 const Overlay$1 = styled__default.default.div`
   position: fixed;
   top: 0;
@@ -2291,44 +3401,62 @@ const EditorJSGlobalStyles = styled.createGlobalStyle`
     z-index: 99999 !important;
   }
   
+  /* ============================================
+     NESTED POPOVER FIX - Remove min-width constraint
+     ============================================ */
+  .ce-popover--inline .ce-popover--nested .ce-popover__container,
+  .ce-popover--inline .ce-popover--nested.ce-popover--nested-level-1 .ce-popover__container {
+    min-width: 0 !important;
+  }
+  
   /* ============================================
      TOOLBOX POPOVER (Plus Button) - CRITICAL FIX
      Make sure items are visible and properly displayed
      ============================================ */
   
   .ce-popover:not(.ce-popover--inline) {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column !important;
     visibility: visible !important;
     opacity: 1 !important;
     z-index: 99999 !important;
   }
   
   .ce-popover--opened {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
   
   .ce-popover__container {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column !important;
     visibility: visible !important;
     opacity: 1 !important;
+    flex: 1 !important;
+    overflow: hidden !important;
   }
   
   .ce-popover__items {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
-    max-height: 400px !important;
+    flex: 1 !important;
     overflow-y: auto !important;
   }
   
+  /* Popover items - don't force display, let EditorJS control visibility for search */
   .ce-popover-item {
-    display: flex !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
   
+  /* Only show flex when not hidden by search */
+  .ce-popover-item:not([hidden]) {
+    display: flex !important;
+  }
+  
   .ce-popover-item__icon {
     display: flex !important;
     visibility: visible !important;
@@ -2341,16 +3469,48 @@ const EditorJSGlobalStyles = styled.createGlobalStyle`
     opacity: 1 !important;
   }
   
-  /* Hide empty/nothing-found message for main toolbox */
+  /* Nothing found message - EditorJS controls visibility */
   .ce-popover:not(.ce-popover--inline) .ce-popover__nothing-found-message {
-    display: none !important;
+    padding: 16px !important;
+    text-align: center !important;
+    color: #64748b !important;
+    font-size: 14px !important;
   }
   
-  /* Make sure search is visible */
+  /* Search styling - let EditorJS control visibility */
   .ce-popover__search {
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
+    padding: 12px !important;
+    margin: 0 !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+    background: white !important;
+  }
+  
+  /* Hide the search icon */
+  .ce-popover__search-icon {
+    display: none !important;
+  }
+  
+  .ce-popover__search-input {
+    width: 100% !important;
+    padding: 10px 14px !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 10px !important;
+    background: #f8fafc !important;
+    font-size: 14px !important;
+    color: #334155 !important;
+    outline: none !important;
+    transition: all 0.15s ease !important;
+    box-sizing: border-box !important;
+  }
+  
+  .ce-popover__search-input:focus {
+    border-color: #7C3AED !important;
+    background: white !important;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
+  }
+  
+  .ce-popover__search-input::placeholder {
+    color: #94a3b8 !important;
   }
   
   /* ============================================
@@ -4028,6 +5188,7 @@ const Editor = React.forwardRef(({
   const t = (id, defaultMessage) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage });
   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);
@@ -4960,12 +6121,18 @@ const Editor = React.forwardRef(({
     await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
   }, [isReady]);
   React.useEffect(() => {
+    if (isLoadingCustomBlocks) {
+      console.log("[Magic Editor X] Waiting for custom blocks to load...");
+      return;
+    }
     if (editorRef.current && !editorInstanceRef.current) {
       const tools$1 = tools.getTools({
         mediaLibToggleFunc,
         pluginId: index.PLUGIN_ID,
-        openLinkPicker: isWebtoolsAvailable ? webtoolsOpenLinkPicker : null
+        openLinkPicker: isWebtoolsAvailable ? webtoolsOpenLinkPicker : null,
+        customBlocks: customBlocks || []
       });
+      console.log("[Magic Editor X] Custom blocks loaded:", customBlocks?.length || 0);
       let initialData = void 0;
       if (value) {
         try {
@@ -5149,7 +6316,7 @@ const Editor = React.forwardRef(({
       }
       document.body.classList.remove("editor-fullscreen");
     };
-  }, []);
+  }, [isLoadingCustomBlocks, customBlocks]);
   React.useEffect(() => {
     const editor = editorInstanceRef.current;
     if (!editor || !isReady) return;