magic-editor-x 1.0.0

package/dist/_chunks/tools-CjnQJ9w2.mjs

@@ -0,0 +1,2155 @@
+import Header from "@editorjs/header";
+import Paragraph from "@editorjs/paragraph";
+import NestedList from "@editorjs/nested-list";
+import Checklist from "@editorjs/checklist";
+import Quote from "@editorjs/quote";
+import Warning from "@editorjs/warning";
+import Code from "@editorjs/code";
+import Delimiter from "@editorjs/delimiter";
+import Table from "@editorjs/table";
+import Embed from "@editorjs/embed";
+import Raw from "@editorjs/raw";
+import Image from "@editorjs/image";
+import SimpleImage from "@editorjs/simple-image";
+import LinkTool from "@editorjs/link";
+import Attaches from "@editorjs/attaches";
+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 { createRoot } from "react-dom/client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+import Marker from "@editorjs/marker";
+import InlineCode from "@editorjs/inline-code";
+import Underline from "@editorjs/underline";
+import Strikethrough from "@sotaproject/strikethrough";
+import Tooltip from "editorjs-tooltip";
+import TextVariantTune from "@editorjs/text-variant-tune";
+import AlignmentTune from "editorjs-text-alignment-blocktune";
+import IndentTune from "editorjs-indent-tune";
+import Undo from "editorjs-undo";
+import DragDrop from "editorjs-drag-drop";
+class ButtonTool {
+  /**
+   * Enable paragraph-like behavior
+   */
+  static get pasteConfig() {
+    return { tags: ["BUTTON", "A"] };
+  }
+  /**
+   * Tool icon in the toolbox
+   */
+  static get toolbox() {
+    return {
+      title: "Button",
+      icon: '<svg width="17" height="15" viewBox="0 0 17 15" xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5C1 1.67157 1.67157 1 2.5 1H14.5C15.3284 1 16 1.67157 16 2.5V12.5C16 13.3284 15.3284 14 14.5 14H2.5C1.67157 14 1 13.3284 1 12.5V2.5ZM3.5 5C3.22386 5 3 5.22386 3 5.5V9.5C3 9.77614 3.22386 10 3.5 10H13.5C13.7761 10 14 9.77614 14 9.5V5.5C14 5.22386 13.7761 5 13.5 5H3.5Z" fill="currentColor"/></svg>'
+    };
+  }
+  /**
+   * Creates an instance of ButtonTool
+   * @param {object} params - Constructor params
+   * @param {object} params.data - Previously saved data
+   * @param {object} params.config - Tool configuration
+   * @param {object} params.api - Editor.js API
+   */
+  constructor({ data, config, api }) {
+    this.api = api;
+    this.config = config || {};
+    this.data = {
+      text: data.text || "",
+      link: data.link || "",
+      style: data.style || "primary",
+      openInNewTab: data.openInNewTab !== false
+    };
+    this.wrapper = null;
+    this.styles = this._getDefaultStyles();
+  }
+  /**
+   * Returns default button styles
+   * @returns {object} Style configuration
+   */
+  _getDefaultStyles() {
+    return {
+      primary: {
+        background: "#3b82f6",
+        color: "#ffffff",
+        border: "none",
+        hoverBackground: "#2563eb"
+      },
+      secondary: {
+        background: "#64748b",
+        color: "#ffffff",
+        border: "none",
+        hoverBackground: "#475569"
+      },
+      outline: {
+        background: "transparent",
+        color: "#3b82f6",
+        border: "2px solid #3b82f6",
+        hoverBackground: "#eff6ff"
+      },
+      success: {
+        background: "#22c55e",
+        color: "#ffffff",
+        border: "none",
+        hoverBackground: "#16a34a"
+      },
+      danger: {
+        background: "#ef4444",
+        color: "#ffffff",
+        border: "none",
+        hoverBackground: "#dc2626"
+      }
+    };
+  }
+  /**
+   * Renders the tool UI
+   * @returns {HTMLElement} The tool wrapper element
+   */
+  render() {
+    this.wrapper = document.createElement("div");
+    this.wrapper.classList.add("cdx-button-tool");
+    this.wrapper.style.cssText = `
+      padding: 12px;
+      background: #f8fafc;
+      border-radius: 8px;
+      margin: 8px 0;
+    `;
+    const preview = document.createElement("div");
+    preview.style.cssText = "text-align: center; margin-bottom: 12px;";
+    const button = this._createButton();
+    preview.appendChild(button);
+    const form = document.createElement("div");
+    form.style.cssText = "display: flex; flex-direction: column; gap: 8px;";
+    const textInput = this._createInput("Button Text", this.data.text, (value) => {
+      this.data.text = value;
+      button.textContent = value || "Click Me";
+    });
+    const linkInput = this._createInput("Link URL", this.data.link, (value) => {
+      this.data.link = value;
+    });
+    const styleSelect = this._createStyleSelect((value) => {
+      this.data.style = value;
+      this._updateButtonStyle(button, value);
+    });
+    const newTabCheckbox = this._createCheckbox("Open in new tab", this.data.openInNewTab, (checked) => {
+      this.data.openInNewTab = checked;
+    });
+    form.appendChild(textInput);
+    form.appendChild(linkInput);
+    form.appendChild(styleSelect);
+    form.appendChild(newTabCheckbox);
+    this.wrapper.appendChild(preview);
+    this.wrapper.appendChild(form);
+    return this.wrapper;
+  }
+  /**
+   * Creates the button element
+   * @returns {HTMLElement} Button element
+   */
+  _createButton() {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = this.data.text || "Click Me";
+    button.style.cssText = `
+      padding: 10px 24px;
+      font-size: 14px;
+      font-weight: 600;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      outline: none;
+    `;
+    this._updateButtonStyle(button, this.data.style);
+    button.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    return button;
+  }
+  /**
+   * Updates button styling
+   * @param {HTMLElement} button - Button element
+   * @param {string} style - Style name
+   */
+  _updateButtonStyle(button, style) {
+    const styleConfig = this.styles[style] || this.styles.primary;
+    button.style.backgroundColor = styleConfig.background;
+    button.style.color = styleConfig.color;
+    button.style.border = styleConfig.border;
+  }
+  /**
+   * Creates an input field with label
+   * @param {string} label - Input label
+   * @param {string} value - Initial value
+   * @param {Function} onChange - Change handler
+   * @returns {HTMLElement} Input container
+   */
+  _createInput(label, value, onChange) {
+    const container = document.createElement("div");
+    container.style.cssText = "display: flex; flex-direction: column; gap: 4px;";
+    const labelEl = document.createElement("label");
+    labelEl.textContent = label;
+    labelEl.style.cssText = "font-size: 12px; color: #64748b; font-weight: 500;";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = value;
+    input.placeholder = label;
+    input.style.cssText = `
+      padding: 8px 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.2s;
+    `;
+    input.addEventListener("focus", () => {
+      input.style.borderColor = "#3b82f6";
+    });
+    input.addEventListener("blur", () => {
+      input.style.borderColor = "#e2e8f0";
+    });
+    input.addEventListener("input", (e) => {
+      onChange(e.target.value);
+    });
+    container.appendChild(labelEl);
+    container.appendChild(input);
+    return container;
+  }
+  /**
+   * Creates style select dropdown
+   * @param {Function} onChange - Change handler
+   * @returns {HTMLElement} Select container
+   */
+  _createStyleSelect(onChange) {
+    const container = document.createElement("div");
+    container.style.cssText = "display: flex; flex-direction: column; gap: 4px;";
+    const label = document.createElement("label");
+    label.textContent = "Button Style";
+    label.style.cssText = "font-size: 12px; color: #64748b; font-weight: 500;";
+    const select = document.createElement("select");
+    select.style.cssText = `
+      padding: 8px 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      font-size: 14px;
+      outline: none;
+      cursor: pointer;
+      background: white;
+    `;
+    const options = [
+      { value: "primary", label: "Primary (Blue)" },
+      { value: "secondary", label: "Secondary (Gray)" },
+      { value: "outline", label: "Outline" },
+      { value: "success", label: "Success (Green)" },
+      { value: "danger", label: "Danger (Red)" }
+    ];
+    options.forEach((opt) => {
+      const option = document.createElement("option");
+      option.value = opt.value;
+      option.textContent = opt.label;
+      option.selected = this.data.style === opt.value;
+      select.appendChild(option);
+    });
+    select.addEventListener("change", (e) => {
+      onChange(e.target.value);
+    });
+    container.appendChild(label);
+    container.appendChild(select);
+    return container;
+  }
+  /**
+   * Creates checkbox with label
+   * @param {string} label - Checkbox label
+   * @param {boolean} checked - Initial state
+   * @param {Function} onChange - Change handler
+   * @returns {HTMLElement} Checkbox container
+   */
+  _createCheckbox(label, checked, onChange) {
+    const container = document.createElement("div");
+    container.style.cssText = "display: flex; align-items: center; gap: 8px; margin-top: 4px;";
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = checked;
+    checkbox.style.cssText = "width: 16px; height: 16px; cursor: pointer;";
+    checkbox.addEventListener("change", (e) => {
+      onChange(e.target.checked);
+    });
+    const labelEl = document.createElement("label");
+    labelEl.textContent = label;
+    labelEl.style.cssText = "font-size: 14px; color: #334155; cursor: pointer;";
+    labelEl.addEventListener("click", () => {
+      checkbox.checked = !checkbox.checked;
+      onChange(checkbox.checked);
+    });
+    container.appendChild(checkbox);
+    container.appendChild(labelEl);
+    return container;
+  }
+  /**
+   * Extracts data from the tool
+   * @returns {object} Saved data
+   */
+  save() {
+    return {
+      text: this.data.text,
+      link: this.data.link,
+      style: this.data.style,
+      openInNewTab: this.data.openInNewTab
+    };
+  }
+  /**
+   * Validates block data
+   * @param {object} savedData - Saved data to validate
+   * @returns {boolean} True if valid
+   */
+  validate(savedData) {
+    return savedData.text && savedData.text.trim().length > 0;
+  }
+}
+class HyperlinkTool {
+  /**
+   * Specifies this is an inline tool
+   */
+  static get isInline() {
+    return true;
+  }
+  /**
+   * CSS class for the tool icon
+   */
+  static get CSS() {
+    return "ce-inline-tool--hyperlink";
+  }
+  /**
+   * Sanitize config for Editor.js
+   */
+  static get sanitize() {
+    return {
+      a: {
+        href: true,
+        target: true,
+        rel: true
+      }
+    };
+  }
+  /**
+   * Creates an instance of HyperlinkTool
+   * @param {object} params - Constructor params
+   * @param {object} params.api - Editor.js API
+   * @param {object} params.config - Tool configuration
+   */
+  constructor({ api, config }) {
+    this.api = api;
+    this.config = config || {};
+    this.defaultTarget = this.config.target || "_blank";
+    this.defaultRel = this.config.rel || "noopener noreferrer";
+    this.availableTargets = this.config.availableTargets || ["_blank", "_self", "_parent", "_top"];
+    this.availableRels = this.config.availableRels || ["nofollow", "noreferrer", "noopener", "sponsored", "ugc"];
+    this.button = null;
+    this.popup = null;
+    this.state = false;
+    this.selectedRange = null;
+    this.existingLink = null;
+  }
+  /**
+   * Renders the toolbar button
+   * @returns {HTMLElement} Button element
+   */
+  render() {
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.classList.add(this.api.styles.inlineToolButton);
+    this.button.classList.add(HyperlinkTool.CSS);
+    this.button.innerHTML = this._getIcon();
+    return this.button;
+  }
+  /**
+   * Returns the link icon SVG
+   * @returns {string} SVG icon
+   */
+  _getIcon() {
+    return `<svg width="14" height="10" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6 1.25H2.75C1.64543 1.25 0.75 2.14543 0.75 3.25V6.75C0.75 7.85457 1.64543 8.75 2.75 8.75H6" stroke="currentColor" stroke-width="1.5" fill="none"/>
+      <path d="M8 8.75H11.25C12.3546 8.75 13.25 7.85457 13.25 6.75V3.25C13.25 2.14543 12.3546 1.25 11.25 1.25H8" stroke="currentColor" stroke-width="1.5" fill="none"/>
+      <path d="M4 5H10" stroke="currentColor" stroke-width="1.5"/>
+    </svg>`;
+  }
+  /**
+   * Handles click/activation of the tool
+   * @param {Range} range - Current selection range
+   */
+  surround(range) {
+    if (this.state) {
+      this._unwrap(range);
+    } else {
+      this._showPopup(range);
+    }
+  }
+  /**
+   * Shows the link input popup
+   * @param {Range} range - Current selection range
+   */
+  _showPopup(range) {
+    this.selectedRange = range;
+    const parentAnchor = this.api.selection.findParentTag("A");
+    this.existingLink = parentAnchor;
+    this.popup = document.createElement("div");
+    this.popup.classList.add("ce-inline-tool-hyperlink-popup");
+    this.popup.style.cssText = `
+      position: absolute;
+      background: white;
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      padding: 12px;
+      z-index: 999999;
+      min-width: 300px;
+    `;
+    const urlContainer = this._createInputContainer("URL", "url", parentAnchor?.href || "");
+    const targetContainer = this._createSelectContainer(
+      "Target",
+      "target",
+      this.availableTargets.map((t) => ({ value: t, label: t })),
+      parentAnchor?.target || this.defaultTarget
+    );
+    const relContainer = this._createRelContainer(parentAnchor?.rel || this.defaultRel);
+    const buttonsContainer = document.createElement("div");
+    buttonsContainer.style.cssText = "display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end;";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.style.cssText = `
+      padding: 6px 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      background: white;
+      cursor: pointer;
+      font-size: 13px;
+    `;
+    cancelBtn.addEventListener("click", () => this._closePopup());
+    const saveBtn = document.createElement("button");
+    saveBtn.type = "button";
+    saveBtn.textContent = parentAnchor ? "Update" : "Add Link";
+    saveBtn.style.cssText = `
+      padding: 6px 12px;
+      border: none;
+      border-radius: 6px;
+      background: #3b82f6;
+      color: white;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+    `;
+    saveBtn.addEventListener("click", () => this._saveLink());
+    if (parentAnchor) {
+      const removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.textContent = "Remove";
+      removeBtn.style.cssText = `
+        padding: 6px 12px;
+        border: 1px solid #ef4444;
+        border-radius: 6px;
+        background: white;
+        color: #ef4444;
+        cursor: pointer;
+        font-size: 13px;
+      `;
+      removeBtn.addEventListener("click", () => {
+        this._unwrap(range);
+        this._closePopup();
+      });
+      buttonsContainer.appendChild(removeBtn);
+    }
+    buttonsContainer.appendChild(cancelBtn);
+    buttonsContainer.appendChild(saveBtn);
+    this.popup.appendChild(urlContainer);
+    this.popup.appendChild(targetContainer);
+    this.popup.appendChild(relContainer);
+    this.popup.appendChild(buttonsContainer);
+    document.body.appendChild(this.popup);
+    this._positionPopup();
+    setTimeout(() => {
+      const urlInput = this.popup.querySelector('input[name="url"]');
+      if (urlInput) urlInput.focus();
+    }, 50);
+    setTimeout(() => {
+      document.addEventListener("click", this._handleOutsideClick);
+    }, 100);
+  }
+  /**
+   * Creates an input container
+   * @param {string} label - Input label
+   * @param {string} name - Input name
+   * @param {string} value - Initial value
+   * @returns {HTMLElement} Input container
+   */
+  _createInputContainer(label, name, value) {
+    const container = document.createElement("div");
+    container.style.cssText = "margin-bottom: 10px;";
+    const labelEl = document.createElement("label");
+    labelEl.textContent = label;
+    labelEl.style.cssText = "display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 500;";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.name = name;
+    input.value = value;
+    input.placeholder = "https://example.com";
+    input.style.cssText = `
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      font-size: 14px;
+      outline: none;
+      box-sizing: border-box;
+    `;
+    input.addEventListener("focus", () => {
+      input.style.borderColor = "#3b82f6";
+    });
+    input.addEventListener("blur", () => {
+      input.style.borderColor = "#e2e8f0";
+    });
+    container.appendChild(labelEl);
+    container.appendChild(input);
+    return container;
+  }
+  /**
+   * Creates a select container
+   * @param {string} label - Select label
+   * @param {string} name - Select name
+   * @param {Array} options - Select options
+   * @param {string} value - Initial value
+   * @returns {HTMLElement} Select container
+   */
+  _createSelectContainer(label, name, options, value) {
+    const container = document.createElement("div");
+    container.style.cssText = "margin-bottom: 10px;";
+    const labelEl = document.createElement("label");
+    labelEl.textContent = label;
+    labelEl.style.cssText = "display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 500;";
+    const select = document.createElement("select");
+    select.name = name;
+    select.style.cssText = `
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      font-size: 14px;
+      outline: none;
+      background: white;
+      cursor: pointer;
+      box-sizing: border-box;
+    `;
+    options.forEach((opt) => {
+      const option = document.createElement("option");
+      option.value = opt.value;
+      option.textContent = opt.label;
+      option.selected = value === opt.value;
+      select.appendChild(option);
+    });
+    container.appendChild(labelEl);
+    container.appendChild(select);
+    return container;
+  }
+  /**
+   * Creates rel attribute checkboxes
+   * @param {string} currentRel - Current rel value
+   * @returns {HTMLElement} Rel container
+   */
+  _createRelContainer(currentRel) {
+    const container = document.createElement("div");
+    container.style.cssText = "margin-bottom: 8px;";
+    const label = document.createElement("label");
+    label.textContent = "Rel Attributes";
+    label.style.cssText = "display: block; font-size: 12px; color: #64748b; margin-bottom: 6px; font-weight: 500;";
+    container.appendChild(label);
+    const checkboxContainer = document.createElement("div");
+    checkboxContainer.style.cssText = "display: flex; flex-wrap: wrap; gap: 12px;";
+    const currentRels = currentRel ? currentRel.split(" ") : [];
+    this.availableRels.forEach((rel) => {
+      const wrapper = document.createElement("label");
+      wrapper.style.cssText = "display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px;";
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.name = "rel";
+      checkbox.value = rel;
+      checkbox.checked = currentRels.includes(rel);
+      checkbox.style.cssText = "cursor: pointer;";
+      wrapper.appendChild(checkbox);
+      wrapper.appendChild(document.createTextNode(rel));
+      checkboxContainer.appendChild(wrapper);
+    });
+    container.appendChild(checkboxContainer);
+    return container;
+  }
+  /**
+   * Positions the popup near the selection
+   */
+  _positionPopup() {
+    if (!this.popup) return;
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const popupRect = this.popup.getBoundingClientRect();
+    let left = rect.left + rect.width / 2 - popupRect.width / 2;
+    let top = rect.bottom + 10 + window.scrollY;
+    if (left < 10) left = 10;
+    if (left + popupRect.width > window.innerWidth - 10) {
+      left = window.innerWidth - popupRect.width - 10;
+    }
+    this.popup.style.left = `${left}px`;
+    this.popup.style.top = `${top}px`;
+  }
+  /**
+   * Saves the link with user-entered values
+   */
+  _saveLink() {
+    if (!this.popup) return;
+    const urlInput = this.popup.querySelector('input[name="url"]');
+    const targetSelect = this.popup.querySelector('select[name="target"]');
+    const relCheckboxes = this.popup.querySelectorAll('input[name="rel"]:checked');
+    const url = urlInput?.value?.trim();
+    if (!url) {
+      urlInput.style.borderColor = "#ef4444";
+      return;
+    }
+    const target = targetSelect?.value || this.defaultTarget;
+    const rel = Array.from(relCheckboxes).map((cb) => cb.value).join(" ") || this.defaultRel;
+    this._closePopup();
+    if (this.selectedRange) {
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(this.selectedRange);
+    }
+    if (this.existingLink) {
+      this.existingLink.href = url;
+      this.existingLink.target = target;
+      this.existingLink.rel = rel;
+    } else {
+      this._wrap(url, target, rel);
+    }
+  }
+  /**
+   * Wraps selection in anchor tag
+   * @param {string} href - Link URL
+   * @param {string} target - Link target
+   * @param {string} rel - Link rel
+   */
+  _wrap(href, target, rel) {
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    const selectedText = range.extractContents();
+    const anchor = document.createElement("a");
+    anchor.href = href;
+    anchor.target = target;
+    anchor.rel = rel;
+    anchor.appendChild(selectedText);
+    range.insertNode(anchor);
+    selection.removeAllRanges();
+    const newRange = document.createRange();
+    newRange.selectNode(anchor);
+    selection.addRange(newRange);
+  }
+  /**
+   * Unwraps anchor tag from selection
+   * @param {Range} range - Selection range
+   */
+  _unwrap(range) {
+    const anchor = this.api.selection.findParentTag("A");
+    if (!anchor) return;
+    const text = anchor.textContent;
+    const textNode = document.createTextNode(text);
+    anchor.parentNode.replaceChild(textNode, anchor);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    const newRange = document.createRange();
+    newRange.selectNode(textNode);
+    selection.addRange(newRange);
+  }
+  /**
+   * Closes the popup
+   */
+  _closePopup() {
+    if (this.popup) {
+      this.popup.remove();
+      this.popup = null;
+    }
+    document.removeEventListener("click", this._handleOutsideClick);
+  }
+  /**
+   * Handles clicks outside the popup
+   * @param {Event} e - Click event
+   */
+  _handleOutsideClick = (e) => {
+    if (this.popup && !this.popup.contains(e.target) && !this.button.contains(e.target)) {
+      this._closePopup();
+    }
+  };
+  /**
+   * Checks if current selection is inside a link
+   * @param {Selection} selection - Current selection
+   * @returns {boolean} True if inside link
+   */
+  checkState(selection) {
+    const anchor = this.api.selection.findParentTag("A");
+    this.state = !!anchor;
+    this.button.classList.toggle(this.api.styles.inlineToolButtonActive, this.state);
+    return this.state;
+  }
+  /**
+   * Shortcut key
+   */
+  get shortcut() {
+    return this.config.shortcut || "CMD+K";
+  }
+  /**
+   * Clean up on destroy
+   */
+  destroy() {
+    this._closePopup();
+  }
+}
+const API_BASE_URL = "https://magicapi.fitlex.me/api/magic-editor";
+class MagicEditorAPI {
+  constructor(licenseKey) {
+    this.licenseKey = licenseKey;
+    this.baseUrl = API_BASE_URL;
+  }
+  async request(endpoint, options = {}) {
+    if (!this.licenseKey) {
+      throw new Error("No license key available");
+    }
+    let url = `${this.baseUrl}${endpoint}`;
+    if (!options.method || options.method === "GET") {
+      const separator = url.includes("?") ? "&" : "?";
+      url = `${url}${separator}licenseKey=${encodeURIComponent(this.licenseKey)}`;
+    }
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers
+      }
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      const error = new Error(data.error?.message || "API request failed");
+      error.code = data.error?.code;
+      error.status = response.status;
+      error.upgrade = data.upgrade;
+      throw error;
+    }
+    return data;
+  }
+  /**
+   * Perform text correction/transformation
+   * All AI actions go through this endpoint with different types
+   * @param {string} text - Text to process
+   * @param {string} type - Type: 'grammar' | 'style' | 'rewrite' | 'expand' | 'summarize' | 'continue' | 'translate'
+   * @param {object} options - Additional options (tone, language, etc.)
+   * @returns {Promise<object>} Result with corrected text
+   */
+  async correct(text, type = "grammar", options = {}) {
+    return this.request("/correct", {
+      method: "POST",
+      body: JSON.stringify({ text, type, options, licenseKey: this.licenseKey })
+    });
+  }
+  async getUsage() {
+    return this.request("/usage");
+  }
+  async getCredits() {
+    return this.request("/credits");
+  }
+  async getModels() {
+    return this.request("/models");
+  }
+  async getLimits() {
+    return this.request("/limits");
+  }
+}
+const ToolbarContainer = styled.div`
+  position: fixed;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  padding: 4px;
+  display: flex;
+  gap: 2px;
+  z-index: 9999;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  animation: slideUp 0.2s ease-out;
+  
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 12px;
+    height: 12px;
+    background: white;
+    border-left: 1px solid #e2e8f0;
+    border-top: 1px solid #e2e8f0;
+    transform: translateX(-50%) rotate(45deg);
+  }
+`;
+const ActionButton = styled.button`
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  position: relative;
+  
+  &:hover:not(:disabled) {
+    background: #f8fafc;
+    color: #7C3AED;
+  }
+  
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+`;
+const Divider = styled.div`
+  width: 1px;
+  height: 24px;
+  background: #e2e8f0;
+  margin: 0 4px;
+  align-self: center;
+`;
+const Submenu = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 4px;
+  min-width: 160px;
+  z-index: 10000;
+  animation: slideDown 0.15s ease-out;
+  
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+const SubmenuItem = styled.button`
+  width: 100%;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #334155;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.1s ease;
+  
+  &:hover {
+    background: #f8fafc;
+    color: #7C3AED;
+  }
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const LoadingSpinner = styled.div`
+  width: 14px;
+  height: 14px;
+  border: 2px solid #e2e8f0;
+  border-top-color: #7C3AED;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;
+const AIInlineToolbar = ({
+  position,
+  onAction,
+  loading = false,
+  disabled = false,
+  onClose
+}) => {
+  const [activeSubmenu, setActiveSubmenu] = useState(null);
+  const toolbarRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (toolbarRef.current && !toolbarRef.current.contains(e.target)) {
+        onClose?.();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  const handleAction = (action, options = {}) => {
+    setActiveSubmenu(null);
+    onAction?.(action, options);
+  };
+  const toggleSubmenu = (menu) => {
+    setActiveSubmenu(activeSubmenu === menu ? null : menu);
+  };
+  return /* @__PURE__ */ jsxs(
+    ToolbarContainer,
+    {
+      ref: toolbarRef,
+      style: {
+        left: `${position.left}px`,
+        top: `${position.top}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          ActionButton,
+          {
+            onClick: () => handleAction("fix"),
+            disabled: disabled || loading,
+            title: "Fix grammar and spelling",
+            children: [
+              loading ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+              /* @__PURE__ */ jsx("span", { children: "Fix" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionButton,
+          {
+            onClick: () => toggleSubmenu("rewrite"),
+            disabled: disabled || loading,
+            title: "Rewrite text with different style",
+            style: { position: "relative" },
+            children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" }) }),
+              /* @__PURE__ */ jsx("span", { children: "Rewrite" }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { width: "12px", height: "12px" }, children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+              activeSubmenu === "rewrite" && /* @__PURE__ */ jsxs(Submenu, { children: [
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("rewrite", { tone: "professional" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "💼" }),
+                  /* @__PURE__ */ jsx("span", { children: "Professional" })
+                ] }),
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("rewrite", { tone: "casual" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "😊" }),
+                  /* @__PURE__ */ jsx("span", { children: "Casual" })
+                ] }),
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("rewrite", { tone: "friendly" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "👋" }),
+                  /* @__PURE__ */ jsx("span", { children: "Friendly" })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          ActionButton,
+          {
+            onClick: () => handleAction("expand"),
+            disabled: disabled || loading,
+            title: "Make text longer and more detailed",
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("polyline", { points: "7 13 12 18 17 13" }),
+                /* @__PURE__ */ jsx("polyline", { points: "7 6 12 11 17 6" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: "Expand" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionButton,
+          {
+            onClick: () => handleAction("summarize"),
+            disabled: disabled || loading,
+            title: "Make text shorter and concise",
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("polyline", { points: "17 11 12 6 7 11" }),
+                /* @__PURE__ */ jsx("polyline", { points: "17 18 12 13 7 18" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: "Shorten" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          ActionButton,
+          {
+            onClick: () => handleAction("continue"),
+            disabled: disabled || loading,
+            title: "Continue writing from here",
+            children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12l7 7 7-7" }) }),
+              /* @__PURE__ */ jsx("span", { children: "Continue" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionButton,
+          {
+            onClick: () => toggleSubmenu("translate"),
+            disabled: disabled || loading,
+            title: "Translate to another language",
+            style: { position: "relative" },
+            children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M5 8l6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14.5 17h6" }) }),
+              /* @__PURE__ */ jsx("span", { children: "Translate" }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { width: "12px", height: "12px" }, children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+              activeSubmenu === "translate" && /* @__PURE__ */ jsxs(Submenu, { children: [
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("translate", { language: "en" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "🇬🇧" }),
+                  /* @__PURE__ */ jsx("span", { children: "English" })
+                ] }),
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("translate", { language: "de" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "🇩🇪" }),
+                  /* @__PURE__ */ jsx("span", { children: "German" })
+                ] }),
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("translate", { language: "fr" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "🇫🇷" }),
+                  /* @__PURE__ */ jsx("span", { children: "French" })
+                ] }),
+                /* @__PURE__ */ jsxs(SubmenuItem, { onClick: () => handleAction("translate", { language: "es" }), children: [
+                  /* @__PURE__ */ jsx("span", { children: "🇪🇸" }),
+                  /* @__PURE__ */ jsx("span", { children: "Spanish" })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+`;
+const ToastContainer = styled.div`
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+`;
+const ToastItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 14px;
+  color: #334155;
+  min-width: 280px;
+  max-width: 400px;
+  pointer-events: auto;
+  animation: ${(props) => props.$closing ? slideOut : slideIn} 0.3s ease-out;
+  
+  &.success {
+    border-left: 3px solid #10b981;
+  }
+  
+  &.error {
+    border-left: 3px solid #ef4444;
+  }
+  
+  &.info {
+    border-left: 3px solid #3b82f6;
+  }
+  
+  &.warning {
+    border-left: 3px solid #f59e0b;
+  }
+`;
+const Icon = styled.div`
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+`;
+const Message = styled.div`
+  flex: 1;
+  line-height: 1.4;
+  
+  strong {
+    font-weight: 600;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  span {
+    font-size: 13px;
+    color: #64748b;
+  }
+`;
+const CloseButton = styled.button`
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  
+  &:hover {
+    background: #f1f5f9;
+    color: #334155;
+  }
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const UndoButton = styled.button`
+  flex-shrink: 0;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #7C3AED;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  &:hover {
+    background: #f5f3ff;
+    border-color: #7C3AED;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+class ToastManager {
+  constructor() {
+    this.toasts = [];
+    this.listeners = [];
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener(this.toasts));
+  }
+  show(options) {
+    const id = Date.now() + Math.random();
+    const toast = {
+      id,
+      type: options.type || "info",
+      icon: options.icon,
+      message: options.message,
+      description: options.description,
+      duration: options.duration || 3e3,
+      onUndo: options.onUndo,
+      closeable: options.closeable !== false
+    };
+    this.toasts.push(toast);
+    this.notify();
+    if (toast.duration > 0) {
+      setTimeout(() => {
+        this.remove(id);
+      }, toast.duration);
+    }
+    return id;
+  }
+  remove(id) {
+    this.toasts = this.toasts.filter((t) => t.id !== id);
+    this.notify();
+  }
+  success(message, options = {}) {
+    return this.show({
+      type: "success",
+      icon: "✓",
+      message,
+      ...options
+    });
+  }
+  error(message, options = {}) {
+    return this.show({
+      type: "error",
+      icon: "✕",
+      message,
+      ...options
+    });
+  }
+  info(message, options = {}) {
+    return this.show({
+      type: "info",
+      icon: "ℹ",
+      message,
+      ...options
+    });
+  }
+  warning(message, options = {}) {
+    return this.show({
+      type: "warning",
+      icon: "⚠",
+      message,
+      ...options
+    });
+  }
+}
+const toastManager = new ToastManager();
+const Toast = ({ toast, onClose }) => {
+  const [closing, setClosing] = useState(false);
+  const handleClose = () => {
+    setClosing(true);
+    setTimeout(() => {
+      onClose();
+    }, 300);
+  };
+  const handleUndo = () => {
+    toast.onUndo?.();
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(ToastItem, { className: toast.type, $closing: closing, children: [
+    toast.icon && /* @__PURE__ */ jsx(Icon, { children: toast.icon }),
+    /* @__PURE__ */ jsx(Message, { children: typeof toast.message === "string" ? toast.message : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("strong", { children: toast.message }),
+      toast.description && /* @__PURE__ */ jsx("span", { children: toast.description })
+    ] }) }),
+    toast.onUndo && /* @__PURE__ */ jsx(UndoButton, { onClick: handleUndo, children: "Undo" }),
+    toast.closeable && /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ] }) })
+  ] });
+};
+const AIToast = () => {
+  const [toasts, setToasts] = useState([]);
+  useEffect(() => {
+    const unsubscribe = toastManager.subscribe(setToasts);
+    return unsubscribe;
+  }, []);
+  if (toasts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ToastContainer, { children: toasts.map((toast) => /* @__PURE__ */ jsx(
+    Toast,
+    {
+      toast,
+      onClose: () => toastManager.remove(toast.id)
+    },
+    toast.id
+  )) });
+};
+class AIAssistantTool {
+  static get isInline() {
+    return true;
+  }
+  static get CSS() {
+    return "ce-inline-tool--ai-assistant";
+  }
+  static get sanitize() {
+    return {
+      span: {
+        class: "ai-suggestion",
+        "data-original": true,
+        "data-corrected": true,
+        "data-type": true
+      }
+    };
+  }
+  static get title() {
+    return "KI-Assistent";
+  }
+  constructor({ api, config }) {
+    this.api = api;
+    this.config = config || {};
+    this.getLicenseKey = this.config.getLicenseKey || (() => window.__MAGIC_EDITOR_LICENSE_KEY__);
+    this.button = null;
+    this.toolbar = null;
+    this.toolbarRoot = null;
+    this.state = false;
+    this.selectedRange = null;
+    this.selectedText = "";
+    this.currentBlockIndex = null;
+    this.apiClient = null;
+    this.isLoading = false;
+    this.lastAction = null;
+  }
+  _initAPIClient() {
+    const licenseKey = this.getLicenseKey();
+    if (licenseKey && !this.apiClient) {
+      this.apiClient = new MagicEditorAPI(licenseKey);
+    }
+    return this.apiClient;
+  }
+  render() {
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.classList.add(this.api.styles.inlineToolButton);
+    this.button.classList.add(AIAssistantTool.CSS);
+    this.button.innerHTML = this._getIcon();
+    this.button.title = "KI-Assistent (⌘+Shift+G)";
+    return this.button;
+  }
+  _getIcon() {
+    return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z"/>
+      <path d="M5 3v4"/>
+      <path d="M3 5h4"/>
+      <path d="M19 17v4"/>
+      <path d="M17 19h4"/>
+    </svg>`;
+  }
+  surround(range) {
+    const selection = window.getSelection();
+    let text = "";
+    if (selection.rangeCount > 0) {
+      this.selectedRange = selection.getRangeAt(0).cloneRange();
+      text = selection.toString().trim();
+    }
+    if (!text) {
+      const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
+      const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
+      if (currentBlock) {
+        this.currentBlockIndex = currentBlockIndex;
+        const blockElement = currentBlock.holder?.querySelector("[contenteditable]") || currentBlock.holder?.querySelector(".ce-paragraph") || currentBlock.holder?.querySelector(".ce-header");
+        if (blockElement) {
+          text = blockElement.textContent?.trim() || "";
+          if (text) {
+            const range2 = document.createRange();
+            range2.selectNodeContents(blockElement);
+            selection.removeAllRanges();
+            selection.addRange(range2);
+            this.selectedRange = range2.cloneRange();
+          }
+        }
+      }
+    }
+    this.selectedText = text;
+    if (!text) {
+      toastManager.warning("Bitte Text auswählen");
+      return;
+    }
+    this._showInlineToolbar();
+  }
+  async _showInlineToolbar() {
+    if (!this._initAPIClient()) {
+      toastManager.error("Keine Lizenz verfügbar");
+      return;
+    }
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return;
+    const rect = selection.getRangeAt(0).getBoundingClientRect();
+    const position = {
+      left: rect.left + rect.width / 2 - 200,
+      // Center toolbar (approximate width)
+      top: rect.bottom + 8
+    };
+    if (position.left < 10) position.left = 10;
+    if (position.left + 400 > window.innerWidth - 10) {
+      position.left = window.innerWidth - 410;
+    }
+    this.toolbar = document.createElement("div");
+    this.toolbar.classList.add("ai-inline-toolbar-container");
+    document.body.appendChild(this.toolbar);
+    this.toolbarRoot = createRoot(this.toolbar);
+    this.toolbarRoot.render(
+      React__default.createElement(AIInlineToolbar, {
+        position,
+        onAction: this._handleAction.bind(this),
+        loading: this.isLoading,
+        onClose: this._closeToolbar.bind(this)
+      })
+    );
+  }
+  async _handleAction(action, options = {}) {
+    if (!this.apiClient || !this.selectedText) return;
+    this.isLoading = true;
+    this._updateToolbar();
+    try {
+      let result;
+      let originalText = this.selectedText;
+      switch (action) {
+        case "fix":
+          result = await this.apiClient.correct(this.selectedText, "grammar");
+          if (result.data.hasChanges) {
+            this._replaceText(result.data.corrected);
+            toastManager.success(`✓ ${result.data.changes.length} Korrekturen angewendet`, {
+              description: `${result.usage?.remaining || 0} Credits übrig`,
+              onUndo: () => this._replaceText(originalText),
+              duration: 5e3
+            });
+          } else {
+            toastManager.info("Text ist bereits korrekt");
+          }
+          break;
+        case "rewrite":
+          result = await this.apiClient.rewrite(this.selectedText, options);
+          if (result.data.rewritten) {
+            this._replaceText(result.data.rewritten);
+            toastManager.success(`✨ Text umgeschrieben (${options.tone || "standard"})`, {
+              onUndo: () => this._replaceText(originalText),
+              duration: 5e3
+            });
+          }
+          break;
+        case "expand":
+          result = await this.apiClient.expand(this.selectedText);
+          if (result.data.expanded) {
+            this._replaceText(result.data.expanded);
+            toastManager.success("📈 Text erweitert", {
+              onUndo: () => this._replaceText(originalText),
+              duration: 5e3
+            });
+          }
+          break;
+        case "summarize":
+          result = await this.apiClient.summarize(this.selectedText);
+          if (result.data.summary) {
+            this._replaceText(result.data.summary);
+            toastManager.success("📉 Text zusammengefasst", {
+              onUndo: () => this._replaceText(originalText),
+              duration: 5e3
+            });
+          }
+          break;
+        case "continue":
+          result = await this.apiClient.continueWriting(this.selectedText);
+          if (result.data.continuation) {
+            this._appendText(" " + result.data.continuation);
+            toastManager.success("✍️ Text fortgesetzt", {
+              onUndo: () => this._replaceText(originalText),
+              duration: 5e3
+            });
+          }
+          break;
+        case "translate":
+          const langNames = { en: "Englisch", de: "Deutsch", fr: "Französisch", es: "Spanisch" };
+          result = await this.apiClient.translate(this.selectedText, options.language);
+          if (result.data.translated) {
+            this._replaceText(result.data.translated);
+            toastManager.success(`🌍 Übersetzt zu ${langNames[options.language] || options.language}`, {
+              onUndo: () => this._replaceText(originalText),
+              duration: 5e3
+            });
+          }
+          break;
+        default:
+          console.warn("Unknown action:", action);
+      }
+      this._closeToolbar();
+    } catch (err) {
+      console.error("[AI Assistant] Action failed:", err);
+      const isLimitError = err.code === "DAILY_LIMIT_EXCEEDED" || err.code === "MONTHLY_LIMIT_EXCEEDED";
+      if (isLimitError) {
+        toastManager.warning("Limit erreicht", {
+          description: err.message,
+          duration: 5e3
+        });
+      } else {
+        toastManager.error("Fehler", {
+          description: err.message || "Aktion fehlgeschlagen",
+          duration: 4e3
+        });
+      }
+    } finally {
+      this.isLoading = false;
+      this._updateToolbar();
+    }
+  }
+  _replaceText(newText) {
+    if (!this.selectedRange) return;
+    try {
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(this.selectedRange);
+      document.execCommand("insertText", false, newText);
+      this.api.blocks.getBlockByIndex(this.api.blocks.getCurrentBlockIndex())?.dispatchChange?.();
+    } catch (err) {
+      console.error("[AI Assistant] Failed to replace text:", err);
+    }
+  }
+  _appendText(additionalText) {
+    if (!this.selectedRange) return;
+    try {
+      const selection = window.getSelection();
+      const range = this.selectedRange.cloneRange();
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      document.execCommand("insertText", false, additionalText);
+      this.api.blocks.getBlockByIndex(this.api.blocks.getCurrentBlockIndex())?.dispatchChange?.();
+    } catch (err) {
+      console.error("[AI Assistant] Failed to append text:", err);
+    }
+  }
+  _updateToolbar() {
+    if (this.toolbarRoot && this.toolbar) {
+      const selection = window.getSelection();
+      const rect = selection.rangeCount > 0 ? selection.getRangeAt(0).getBoundingClientRect() : { left: 0, bottom: 0, width: 0 };
+      const position = {
+        left: rect.left + rect.width / 2 - 200,
+        top: rect.bottom + 8
+      };
+      this.toolbarRoot.render(
+        React__default.createElement(AIInlineToolbar, {
+          position,
+          onAction: this._handleAction.bind(this),
+          loading: this.isLoading,
+          onClose: this._closeToolbar.bind(this)
+        })
+      );
+    }
+  }
+  _closeToolbar() {
+    if (this.toolbarRoot) {
+      this.toolbarRoot.unmount();
+      this.toolbarRoot = null;
+    }
+    if (this.toolbar) {
+      this.toolbar.remove();
+      this.toolbar = null;
+    }
+    this.isLoading = false;
+    this.selectedRange = null;
+    this.selectedText = "";
+    this.currentBlockIndex = null;
+  }
+  checkState(selection) {
+    this.state = selection && !selection.isCollapsed;
+    return this.state;
+  }
+  get shortcut() {
+    return "CMD+SHIFT+G";
+  }
+  destroy() {
+    this._closeToolbar();
+  }
+}
+class MediaLibAdapter {
+  // Track if we're currently opening from user action vs restore
+  static _isUserAction = false;
+  /**
+   * Toolbox configuration
+   */
+  static get toolbox() {
+    return {
+      title: "Image (Media Library)",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="15" viewBox="0 0 336 276">
+        <path d="M291 150.242V79c0-18.778-15.222-34-34-34H79c-18.778 0-34 15.222-34 34v42.264l67.179-44.192 80.398 71.614 56.686-29.14L291 150.242zm-.345 51.622l-42.3-30.246-56.3 29.884-80.773-66.925L45 174.187V197c0 18.778 15.222 34 34 34h178c17.126 0 31.295-12.663 33.655-29.136zM79 0h178c43.63 0 79 35.37 79 79v118c0 43.63-35.37 79-79 79H79c-43.63 0-79-35.37-79-79V79C0 35.37 35.37 0 79 0z"/>
+      </svg>`
+    };
+  }
+  /**
+   * Tool is not inline
+   */
+  static get isInline() {
+    return false;
+  }
+  /**
+   * Constructor
+   * @param {object} params - Tool parameters
+   * @param {object} params.api - EditorJS API
+   * @param {object} params.config - Tool config
+   * @param {object} params.data - Block data (when restoring from saved state)
+   */
+  constructor({ api, config, data }) {
+    this.api = api;
+    this.config = config || {};
+    this.data = data || {};
+    this._isRestore = !!(data && data.type === "mediaLibraryStrapi");
+  }
+  /**
+   * Render tool
+   * Opens Media Library dialog only when user clicks the toolbox
+   */
+  render() {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("media-lib-placeholder");
+    if (!this._isRestore) {
+      const currentIndex = this.api.blocks.getCurrentBlockIndex();
+      if (this.config.mediaLibToggleFunc) {
+        setTimeout(() => {
+          this.config.mediaLibToggleFunc(currentIndex);
+        }, 50);
+      }
+      wrapper.innerHTML = '<p style="color: #7C3AED; text-align: center; padding: 20px; font-size: 14px;">📷 Media Library wird geöffnet...</p>';
+    } else {
+      wrapper.innerHTML = '<p style="color: #999; text-align: center; padding: 10px; font-size: 12px;">⚠️ Ungültiger Block wird entfernt...</p>';
+      setTimeout(() => {
+        try {
+          const currentIndex = this.api.blocks.getCurrentBlockIndex();
+          this.api.blocks.delete(currentIndex);
+        } catch (e) {
+          console.warn("[Magic Editor X] Could not auto-delete mediaLib block:", e);
+        }
+      }, 100);
+    }
+    return wrapper;
+  }
+  /**
+   * Save data
+   * Returns undefined to prevent saving this placeholder block
+   */
+  save() {
+    return void 0;
+  }
+  /**
+   * Validate saved data
+   * Always return false so this block type is never persisted
+   */
+  validate(savedData) {
+    return false;
+  }
+  /**
+   * Sanitizer config
+   */
+  static get sanitize() {
+    return {
+      type: false
+    };
+  }
+}
+const 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) {
+    console.warn("[Magic Editor X] Could not get auth token:", e);
+    return null;
+  }
+};
+const getTools = ({ mediaLibToggleFunc, pluginId }) => {
+  const token = getAuthToken();
+  const authHeader = token ? `Bearer ${token}` : "";
+  return {
+    // ============================================
+    // OFFICIAL BLOCK TOOLS (16 Tools)
+    // ============================================
+    /**
+     * Header Tool
+     * @see https://github.com/editor-js/header
+     */
+    header: {
+      class: Header,
+      inlineToolbar: true,
+      tunes: ["alignmentTune"],
+      config: {
+        placeholder: "Enter a heading",
+        levels: [1, 2, 3, 4, 5, 6],
+        defaultLevel: 2
+      },
+      shortcut: "CMD+SHIFT+H"
+    },
+    /**
+     * Paragraph Tool (default)
+     * @see https://github.com/editor-js/paragraph
+     */
+    paragraph: {
+      class: Paragraph,
+      inlineToolbar: true,
+      tunes: ["alignmentTune", "indentTune"],
+      config: {
+        placeholder: "Start writing or press Tab to add a block...",
+        preserveBlank: true
+      }
+    },
+    /**
+     * Nested List Tool
+     * @see https://github.com/editor-js/nested-list
+     */
+    list: {
+      class: NestedList,
+      inlineToolbar: true,
+      tunes: ["indentTune"],
+      config: {
+        defaultStyle: "unordered"
+      },
+      shortcut: "CMD+SHIFT+L"
+    },
+    /**
+     * Checklist Tool
+     * @see https://github.com/editor-js/checklist
+     */
+    checklist: {
+      class: Checklist,
+      inlineToolbar: true,
+      shortcut: "CMD+SHIFT+C"
+    },
+    /**
+     * Quote Tool
+     * @see https://github.com/editor-js/quote
+     */
+    quote: {
+      class: Quote,
+      inlineToolbar: true,
+      tunes: ["alignmentTune"],
+      config: {
+        quotePlaceholder: "Enter a quote",
+        captionPlaceholder: "Quote author"
+      },
+      shortcut: "CMD+SHIFT+Q"
+    },
+    /**
+     * Warning Tool
+     * @see https://github.com/editor-js/warning
+     */
+    warning: {
+      class: Warning,
+      inlineToolbar: true,
+      config: {
+        titlePlaceholder: "Warning title",
+        messagePlaceholder: "Warning message"
+      },
+      shortcut: "CMD+SHIFT+W"
+    },
+    /**
+     * Code Tool (basic)
+     * @see https://github.com/editor-js/code
+     */
+    code: {
+      class: Code,
+      config: {
+        placeholder: "Enter code here..."
+      },
+      shortcut: "CMD+SHIFT+P"
+    },
+    /**
+     * Delimiter Tool
+     * @see https://github.com/editor-js/delimiter
+     */
+    delimiter: {
+      class: Delimiter,
+      shortcut: "CMD+SHIFT+D"
+    },
+    /**
+     * Table Tool
+     * @see https://github.com/editor-js/table
+     */
+    table: {
+      class: Table,
+      inlineToolbar: true,
+      config: {
+        rows: 2,
+        cols: 3,
+        withHeadings: true
+      },
+      shortcut: "CMD+SHIFT+T"
+    },
+    /**
+     * Embed Tool
+     * @see https://github.com/editor-js/embed
+     */
+    embed: {
+      class: Embed,
+      config: {
+        services: {
+          youtube: true,
+          vimeo: true,
+          twitter: true,
+          instagram: true,
+          codepen: true,
+          codesandbox: true,
+          github: true,
+          gfycat: true,
+          imgur: true,
+          pinterest: true,
+          twitch: true,
+          miro: true,
+          figma: true,
+          aparat: true,
+          facebook: true
+        }
+      }
+    },
+    /**
+     * Raw HTML Tool
+     * @see https://github.com/editor-js/raw
+     */
+    raw: {
+      class: Raw,
+      config: {
+        placeholder: "Enter raw HTML..."
+      }
+    },
+    /**
+     * Link Tool
+     * @see https://github.com/editor-js/link
+     */
+    linkTool: {
+      class: LinkTool,
+      config: {
+        endpoint: `/api/${pluginId}/link`,
+        headers: {
+          Authorization: authHeader
+        }
+      }
+    },
+    /**
+     * Image Tool (with Upload)
+     * @see https://github.com/editor-js/image
+     */
+    image: {
+      class: Image,
+      config: {
+        field: "files.image",
+        additionalRequestData: {
+          data: JSON.stringify({})
+        },
+        additionalRequestHeaders: {
+          Authorization: authHeader
+        },
+        endpoints: {
+          byUrl: `/api/${pluginId}/image/byUrl`
+        },
+        uploader: {
+          async uploadByFile(file) {
+            const formData = new FormData();
+            formData.append("data", JSON.stringify({}));
+            formData.append("files.image", file);
+            try {
+              const response = await fetch(`/api/${pluginId}/image/byFile`, {
+                method: "POST",
+                headers: {
+                  Authorization: authHeader
+                },
+                body: formData
+              });
+              return await response.json();
+            } catch (error) {
+              console.error("[Magic Editor X] Upload error:", error);
+              return { success: 0, message: error.message };
+            }
+          }
+        },
+        captionPlaceholder: "Image caption",
+        buttonContent: "Select image"
+      }
+    },
+    /**
+     * Simple Image Tool (URL only)
+     * @see https://github.com/editor-js/simple-image
+     */
+    simpleImage: {
+      class: SimpleImage
+    },
+    /**
+     * Attaches Tool
+     * @see https://github.com/editor-js/attaches
+     */
+    attaches: {
+      class: Attaches,
+      config: {
+        endpoint: `/api/${pluginId}/file/upload`,
+        field: "file",
+        types: "*",
+        buttonText: "Select file to upload",
+        errorMessage: "File upload failed",
+        additionalRequestHeaders: {
+          Authorization: authHeader
+        }
+      }
+    },
+    /**
+     * Personality Tool
+     * @see https://github.com/editor-js/personality
+     */
+    personality: {
+      class: Personality,
+      config: {
+        endpoint: `/api/${pluginId}/image/byFile`,
+        field: "files.image",
+        additionalRequestHeaders: {
+          Authorization: authHeader
+        },
+        namePlaceholder: "Name",
+        descriptionPlaceholder: "Description / Title",
+        linkPlaceholder: "Link (optional)"
+      }
+    },
+    /**
+     * Media Library Tool (Custom)
+     * Strapi Media Library integration
+     */
+    mediaLib: {
+      class: MediaLibAdapter,
+      config: {
+        mediaLibToggleFunc
+      }
+    },
+    // ============================================
+    // COMMUNITY BLOCK TOOLS (4 Tools)
+    // ============================================
+    /**
+     * Alert Tool
+     * @see https://github.com/vishaltelangre/editorjs-alert
+     * Colorful alert boxes (info, success, warning, danger)
+     */
+    alert: {
+      class: Alert,
+      inlineToolbar: true,
+      config: {
+        defaultType: "info",
+        messagePlaceholder: "Enter your message..."
+      },
+      shortcut: "CMD+SHIFT+A"
+    },
+    /**
+     * Toggle Block Tool
+     * @see https://github.com/kommitters/editorjs-toggle-block
+     * Collapsible/expandable content blocks (FAQ, Accordions)
+     */
+    toggle: {
+      class: ToggleBlock,
+      inlineToolbar: true,
+      config: {
+        placeholder: "Toggle title",
+        defaultContent: "Toggle content..."
+      }
+    },
+    /**
+     * CodeFlask Tool (with Syntax Highlighting)
+     * @see https://github.com/calumk/editorjs-codeflask
+     * Code blocks with syntax highlighting
+     */
+    codeFlask: {
+      class: CodeFlask,
+      config: {
+        language: "javascript"
+      }
+    },
+    /**
+     * Button Tool (Custom Implementation)
+     * CTA buttons with customizable text, link, and style
+     * Secure implementation without eval()
+     */
+    button: {
+      class: ButtonTool,
+      inlineToolbar: false
+    },
+    // ============================================
+    // OFFICIAL INLINE TOOLS (3 Tools)
+    // ============================================
+    /**
+     * Marker (Highlight) Tool
+     * @see https://github.com/editor-js/marker
+     */
+    marker: {
+      class: Marker,
+      shortcut: "CMD+SHIFT+M"
+    },
+    /**
+     * Inline Code Tool
+     * @see https://github.com/editor-js/inline-code
+     */
+    inlineCode: {
+      class: InlineCode,
+      shortcut: "CMD+SHIFT+I"
+    },
+    /**
+     * Underline Tool
+     * @see https://github.com/editor-js/underline
+     */
+    underline: {
+      class: Underline,
+      shortcut: "CMD+U"
+    },
+    // ============================================
+    // COMMUNITY INLINE TOOLS (3 Tools)
+    // ============================================
+    /**
+     * Strikethrough Tool
+     * @see https://github.com/nicosrm/strikethrough
+     */
+    strikethrough: {
+      class: Strikethrough,
+      shortcut: "CMD+SHIFT+S"
+    },
+    /**
+     * Tooltip Tool
+     * @see https://github.com/kommitters/editorjs-tooltip
+     * Add tooltips to text
+     */
+    tooltip: {
+      class: Tooltip,
+      config: {
+        location: "top",
+        highlightColor: "#FFEFD5",
+        underline: true,
+        backgroundColor: "#1e293b",
+        textColor: "#ffffff"
+      }
+    },
+    /**
+     * Hyperlink Tool (Custom Implementation)
+     * Links with target and rel attributes
+     * Secure implementation without eval()
+     */
+    hyperlink: {
+      class: HyperlinkTool,
+      config: {
+        shortcut: "CMD+K",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        availableTargets: ["_blank", "_self", "_parent", "_top"],
+        availableRels: ["nofollow", "noreferrer", "noopener", "sponsored", "ugc"]
+      }
+    },
+    /**
+     * AI Assistant Tool (Custom Implementation)
+     * AI-powered text corrections (grammar, style, rewrite)
+     */
+    aiAssistant: {
+      class: AIAssistantTool,
+      config: {
+        apiBaseUrl: "https://magicapi.fitlex.me/api/magic-editor",
+        getLicenseKey: () => window.__MAGIC_EDITOR_LICENSE_KEY__
+      },
+      shortcut: "CMD+SHIFT+G"
+    },
+    // ============================================
+    // TUNES (3 Tunes)
+    // ============================================
+    /**
+     * Text Variant Tune
+     * @see https://github.com/editor-js/text-variant-tune
+     */
+    textVariant: TextVariantTune,
+    /**
+     * Alignment Tune
+     * @see https://github.com/kaaaaaaaaaaai/editorjs-alignment-blocktune
+     * Text alignment (left, center, right, justify)
+     */
+    alignmentTune: {
+      class: AlignmentTune,
+      config: {
+        default: "left",
+        blocks: {
+          header: "center"
+        }
+      }
+    },
+    /**
+     * Indent Tune
+     * @see https://github.com/kommitters/editorjs-indent-tune
+     * Block indentation
+     */
+    indentTune: {
+      class: IndentTune,
+      config: {
+        maxIndent: 5,
+        indentSize: 30,
+        multiblock: true,
+        tuneName: "indentTune"
+      }
+    }
+  };
+};
+const initUndoRedo = (editor) => {
+  return new Undo({ editor });
+};
+const initDragDrop = (editor) => {
+  return new DragDrop(editor);
+};
+export {
+  AIToast as A,
+  MagicEditorAPI as M,
+  initDragDrop as a,
+  AIInlineToolbar as b,
+  getTools as g,
+  initUndoRedo as i,
+  toastManager as t
+};