@editora/plugins 1.0.2 → 1.0.5

package/dist/media-manager.esm.js

@@ -0,0 +1,994 @@
+import "./shared-config.esm.js";
+let T = null, s = null, d = null, R = [], A = !1, M = null, U = 0, V = 0, z = 0, $ = 0, _ = 1, I = null;
+const j = '[data-theme="dark"], .dark, .editora-theme-dark', G = () => {
+  if (typeof document > "u" || document.getElementById("rte-media-dialog-styles")) return;
+  const e = document.createElement("style");
+  e.id = "rte-media-dialog-styles", e.textContent = `
+    .rte-media-overlay {
+      --rte-media-overlay-bg: rgba(15, 23, 36, 0.56);
+      --rte-media-bg: #ffffff;
+      --rte-media-text: #101828;
+      --rte-media-muted: #5f6b7d;
+      --rte-media-border: #d6dbe4;
+      --rte-media-surface: #f7f9fc;
+      --rte-media-surface-hover: #eef2f7;
+      --rte-media-accent: #1f75fe;
+      --rte-media-accent-hover: #165fd6;
+      --rte-media-danger: #dc3545;
+      --rte-media-danger-hover: #b92735;
+      --rte-media-ring: rgba(31, 117, 254, 0.18);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--rte-media-overlay-bg);
+      backdrop-filter: blur(2px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 99999;
+      padding: 16px;
+      box-sizing: border-box;
+    }
+
+    .rte-media-overlay.rte-ui-theme-dark {
+      --rte-media-overlay-bg: rgba(2, 8, 20, 0.72);
+      --rte-media-bg: #202938;
+      --rte-media-text: #e8effc;
+      --rte-media-muted: #a5b1c5;
+      --rte-media-border: #49566c;
+      --rte-media-surface: #2a3444;
+      --rte-media-surface-hover: #344256;
+      --rte-media-accent: #58a6ff;
+      --rte-media-accent-hover: #4598f4;
+      --rte-media-danger: #ff7b72;
+      --rte-media-danger-hover: #ff645b;
+      --rte-media-ring: rgba(88, 166, 255, 0.22);
+    }
+
+    .rte-media-dialog {
+      width: min(92vw, 640px);
+      max-height: 90vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--rte-media-bg);
+      color: var(--rte-media-text);
+      border: 1px solid var(--rte-media-border);
+      border-radius: 12px;
+      box-shadow: 0 24px 48px rgba(10, 15, 24, 0.28);
+    }
+
+    .rte-media-dialog.rte-media-dialog-compact {
+      width: min(92vw, 520px);
+    }
+
+    .rte-media-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--rte-media-border);
+      background: linear-gradient(180deg, rgba(127, 154, 195, 0.08) 0%, rgba(127, 154, 195, 0) 100%);
+    }
+
+    .rte-media-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--rte-media-text);
+    }
+
+    .rte-media-close-btn {
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--rte-media-muted);
+      font-size: 24px;
+      line-height: 1;
+      cursor: pointer;
+      transition: background-color 0.16s ease, color 0.16s ease;
+    }
+
+    .rte-media-close-btn:hover {
+      background: var(--rte-media-surface-hover);
+      color: var(--rte-media-text);
+    }
+
+    .rte-media-tabs {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      border-bottom: 1px solid var(--rte-media-border);
+      gap: 0;
+    }
+
+    .rte-media-tab {
+      border: none;
+      border-right: 1px solid var(--rte-media-border);
+      padding: 12px 14px;
+      background: var(--rte-media-surface);
+      color: var(--rte-media-muted);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.16s ease, color 0.16s ease;
+    }
+
+    .rte-media-tab:last-child {
+      border-right: none;
+    }
+
+    .rte-media-tab:hover {
+      background: var(--rte-media-surface-hover);
+      color: var(--rte-media-text);
+    }
+
+    .rte-media-tab.active {
+      background: var(--rte-media-accent);
+      color: #fff;
+    }
+
+    .rte-media-body {
+      padding: 20px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .rte-media-field {
+      margin-bottom: 16px;
+    }
+
+    .rte-media-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .rte-media-label {
+      display: block;
+      margin-bottom: 8px;
+      color: var(--rte-media-text);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .rte-media-input,
+    .rte-media-textarea {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 12px;
+      border: 1px solid var(--rte-media-border);
+      border-radius: 8px;
+      background: var(--rte-media-surface);
+      color: var(--rte-media-text);
+      font-size: 14px;
+      transition: border-color 0.16s ease, box-shadow 0.16s ease;
+    }
+
+    .rte-media-input::placeholder,
+    .rte-media-textarea::placeholder {
+      color: var(--rte-media-muted);
+    }
+
+    .rte-media-input:focus,
+    .rte-media-textarea:focus {
+      outline: none;
+      border-color: var(--rte-media-accent);
+      box-shadow: 0 0 0 3px var(--rte-media-ring);
+    }
+
+    .rte-media-textarea {
+      min-height: 92px;
+      resize: vertical;
+      font-family: inherit;
+    }
+
+    .rte-media-dropzone {
+      border: 2px dashed var(--rte-media-border);
+      border-radius: 12px;
+      padding: 36px 18px;
+      text-align: center;
+      cursor: pointer;
+      background: var(--rte-media-surface);
+      transition: border-color 0.16s ease, background-color 0.16s ease;
+    }
+
+    .rte-media-dropzone:hover,
+    .rte-media-dropzone.is-dragover {
+      border-color: var(--rte-media-accent);
+      background: var(--rte-media-surface-hover);
+    }
+
+    .rte-media-dropzone-icon {
+      font-size: 40px;
+      margin-bottom: 10px;
+      line-height: 1;
+    }
+
+    .rte-media-dropzone-title {
+      margin: 0 0 8px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--rte-media-text);
+    }
+
+    .rte-media-muted {
+      margin: 0 0 8px 0;
+      color: var(--rte-media-muted);
+      font-size: 14px;
+    }
+
+    .rte-media-hint {
+      margin: 0;
+      color: var(--rte-media-muted);
+      font-size: 12px;
+    }
+
+    .rte-media-progress {
+      margin-top: 16px;
+    }
+
+    .rte-media-progress-track {
+      height: 8px;
+      border-radius: 999px;
+      background: var(--rte-media-surface);
+      overflow: hidden;
+      border: 1px solid var(--rte-media-border);
+    }
+
+    .rte-media-progress-bar {
+      height: 100%;
+      width: 0;
+      background: var(--rte-media-accent);
+      transition: width 0.3s ease;
+    }
+
+    .rte-media-progress-text {
+      margin-top: 8px;
+      text-align: center;
+      color: var(--rte-media-muted);
+      font-size: 13px;
+    }
+
+    .rte-media-preview {
+      border: 1px solid var(--rte-media-border);
+      border-radius: 10px;
+      padding: 10px;
+      text-align: center;
+      background: var(--rte-media-surface);
+    }
+
+    .rte-media-preview img,
+    .rte-media-preview video {
+      max-width: 100%;
+      max-height: 240px;
+    }
+
+    .rte-media-helper {
+      margin-top: 8px;
+      margin-bottom: 0;
+      font-size: 12px;
+      color: var(--rte-media-muted);
+      line-height: 1.5;
+    }
+
+    .rte-media-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      padding: 16px 20px;
+      border-top: 1px solid var(--rte-media-border);
+      background: var(--rte-media-surface);
+    }
+
+    .rte-media-footer.rte-media-footer-spread {
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .rte-media-btn {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 10px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
+    }
+
+    .rte-media-btn-secondary {
+      background: var(--rte-media-bg);
+      border-color: var(--rte-media-border);
+      color: var(--rte-media-text);
+    }
+
+    .rte-media-btn-secondary:hover {
+      background: var(--rte-media-surface-hover);
+    }
+
+    .rte-media-btn-primary {
+      background: var(--rte-media-accent);
+      color: #fff;
+    }
+
+    .rte-media-btn-primary:hover {
+      background: var(--rte-media-accent-hover);
+    }
+
+    .rte-media-btn-primary:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    .rte-media-btn-danger {
+      background: var(--rte-media-danger);
+      color: #fff;
+    }
+
+    .rte-media-btn-danger:hover {
+      background: var(--rte-media-danger-hover);
+    }
+
+    .rte-media-checkbox-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--rte-media-text);
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    .rte-media-checkbox-label input {
+      accent-color: var(--rte-media-accent);
+    }
+
+    .rte-media-actions {
+      display: flex;
+      gap: 10px;
+    }
+
+    .rte-media-spacer {
+      flex: 1;
+    }
+
+    .media-floating-toolbar {
+      --rte-media-toolbar-bg: #ffffff;
+      --rte-media-toolbar-border: #d6dbe4;
+      --rte-media-toolbar-text: #344054;
+      --rte-media-toolbar-hover-bg: #f3f6fb;
+      --rte-media-toolbar-hover-text: #101828;
+      --rte-media-toolbar-active-bg: #e6edf7;
+      --rte-media-toolbar-separator: #d9e1eb;
+      --rte-media-toolbar-danger-hover-bg: #fee2e2;
+      --rte-media-toolbar-danger-hover-text: #b42318;
+      position: absolute;
+      display: none;
+      align-items: center;
+      gap: 2px;
+      padding: 4px;
+      border: 1px solid var(--rte-media-toolbar-border);
+      border-radius: 8px;
+      background: var(--rte-media-toolbar-bg);
+      color: var(--rte-media-toolbar-text);
+      box-shadow: 0 10px 24px rgba(15, 23, 36, 0.18);
+      z-index: 10000;
+      pointer-events: auto;
+      backdrop-filter: blur(6px);
+    }
+
+    .media-floating-toolbar.rte-ui-theme-dark,
+    ${j} .media-floating-toolbar {
+      --rte-media-toolbar-bg: #24303f;
+      --rte-media-toolbar-border: #4a5a71;
+      --rte-media-toolbar-text: #d9e6fb;
+      --rte-media-toolbar-hover-bg: #33445a;
+      --rte-media-toolbar-hover-text: #f4f8ff;
+      --rte-media-toolbar-active-bg: #415875;
+      --rte-media-toolbar-separator: #566884;
+      --rte-media-toolbar-danger-hover-bg: #5f2a32;
+      --rte-media-toolbar-danger-hover-text: #ffd7d5;
+      box-shadow: 0 16px 30px rgba(2, 8, 20, 0.42);
+    }
+
+    .media-floating-toolbar-btn {
+      width: 30px;
+      height: 30px;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
+    }
+
+    .media-floating-toolbar-btn:hover {
+      background: var(--rte-media-toolbar-hover-bg);
+      color: var(--rte-media-toolbar-hover-text);
+    }
+
+    .media-floating-toolbar-btn:active {
+      background: var(--rte-media-toolbar-active-bg);
+      transform: scale(0.96);
+    }
+
+    .media-floating-toolbar-btn.btn-remove:hover {
+      background: var(--rte-media-toolbar-danger-hover-bg);
+      color: var(--rte-media-toolbar-danger-hover-text);
+    }
+
+    .media-floating-toolbar-separator {
+      width: 1px;
+      height: 20px;
+      margin: 0 2px;
+      background: var(--rte-media-toolbar-separator);
+    }
+  `, document.head.appendChild(e);
+}, O = () => {
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const t = e.anchorNode;
+  return (t instanceof HTMLElement ? t : t?.parentElement)?.closest(".rte-content, .editora-content") || null;
+}, X = (e) => {
+  if (e) return e;
+  const t = O();
+  if (t) return t;
+  if (I) return I;
+  const r = document.activeElement;
+  return r ? r.closest(".rte-content, .editora-content") || r : null;
+}, F = (e) => {
+  const t = X(e);
+  return t ? !!t.closest(j) : !1;
+}, D = (e) => {
+  G();
+  const t = document.createElement("div");
+  return t.className = "rte-media-overlay", F(e) && t.classList.add("rte-ui-theme-dark"), t;
+}, B = (e = !1) => {
+  const t = document.createElement("div");
+  return t.className = e ? "rte-media-dialog rte-media-dialog-compact" : "rte-media-dialog", t.setAttribute("role", "dialog"), t.setAttribute("aria-modal", "true"), t;
+}, P = (e, t) => {
+  const r = window.getSelection();
+  r && r.rangeCount > 0 && (T = r.getRangeAt(0).cloneRange());
+  const i = D(t), a = B();
+  let o = "upload", n = "", c = "", m = "", b = "";
+  const v = () => {
+    a.innerHTML = `
+      <div class="rte-media-header">
+        <h2 class="rte-media-title">Insert ${e === "image" ? "Image" : "Video"}</h2>
+        <button class="close-btn rte-media-close-btn" type="button" aria-label="Close">×</button>
+      </div>
+
+      <div class="rte-media-tabs">
+        <button class="tab-upload rte-media-tab ${o === "upload" ? "active" : ""}" type="button">Upload</button>
+        <button class="tab-url rte-media-tab ${o === "url" ? "active" : ""}" type="button">URL</button>
+      </div>
+
+      <div class="rte-media-body">
+        ${o === "upload" ? `
+          <div id="upload-section">
+            <div class="dropzone rte-media-dropzone">
+              <div class="rte-media-dropzone-icon">📁</div>
+              <p class="rte-media-dropzone-title">Drag and drop your ${e} here</p>
+              <p class="rte-media-muted">or click to browse</p>
+              <p class="rte-media-hint">Max file size: 50MB</p>
+            </div>
+            <input type="file" id="file-input" accept="${e === "image" ? "image/*" : "video/*"}" style="display: none;">
+            <div id="upload-progress" class="rte-media-progress" style="display: none;">
+              <div class="rte-media-progress-track">
+                <div id="progress-bar" class="rte-media-progress-bar"></div>
+              </div>
+              <p id="progress-text" class="rte-media-progress-text">Uploading...</p>
+            </div>
+          </div>
+        ` : `
+          <div id="url-section">
+            <div class="rte-media-field">
+              <label class="rte-media-label">URL</label>
+              <input type="text" id="url-input" class="rte-media-input" placeholder="https://example.com/${e}.${e === "image" ? "jpg" : "mp4"}" value="${n}">
+            </div>
+            ${e === "image" ? `
+              <div class="rte-media-field">
+                <label class="rte-media-label">Alt Text (for accessibility)</label>
+                <input type="text" id="alt-input" class="rte-media-input" placeholder="Describe the image" value="${b}">
+              </div>
+            ` : ""}
+            <div class="rte-media-grid">
+              <div class="rte-media-field">
+                <label class="rte-media-label">Width (px)</label>
+                <input type="number" id="width-input" class="rte-media-input" placeholder="Auto" value="${c}">
+              </div>
+              <div class="rte-media-field">
+                <label class="rte-media-label">Height (px)</label>
+                <input type="number" id="height-input" class="rte-media-input" placeholder="Auto" value="${m}">
+              </div>
+            </div>
+            ${n ? `
+              <div class="rte-media-field">
+                <label class="rte-media-label">Preview</label>
+                <div class="rte-media-preview">
+                  ${e === "image" ? `<img src="${n}" alt="Preview">` : `<video src="${n}" controls></video>`}
+                </div>
+              </div>
+            ` : ""}
+          </div>
+        `}
+      </div>
+
+      <div class="rte-media-footer">
+        <button class="cancel-btn rte-media-btn rte-media-btn-secondary" type="button">Cancel</button>
+        <button id="insert-btn" class="rte-media-btn rte-media-btn-primary" type="button" ${!n && o === "url" ? "disabled" : ""}>Insert</button>
+      </div>
+    `;
+  };
+  v(), i.appendChild(a), document.body.appendChild(i);
+  const h = () => {
+    i.parentNode && i.parentNode.removeChild(i);
+  }, E = () => {
+    if (!n) return;
+    const l = e === "image" ? document.createElement("img") : document.createElement("video");
+    l.src = n, l.setAttribute("data-media-type", e), e === "image" && b && (l.alt = b), c && (l.style.width = `${c}px`, l.setAttribute("width", c)), m && (l.style.height = `${m}px`, l.setAttribute("height", m)), e === "video" && (l.controls = !0), !c && !m ? l.style.cssText = "max-width: 100%; height: auto; display: block; margin: 1em 0; cursor: pointer;" : l.style.cssText = `display: block; margin: 1em 0; cursor: pointer; ${c ? `width: ${c}px;` : "max-width: 100%;"} ${m ? `height: ${m}px;` : "height: auto;"}`, T && (T.deleteContents(), T.insertNode(l)), h();
+  }, y = async (l) => {
+    const g = a.querySelector("#upload-progress"), p = a.querySelector("#progress-bar"), x = a.querySelector("#progress-text");
+    if (g && p && x) {
+      g.style.display = "block";
+      let q = 0;
+      const f = setInterval(() => {
+        q += Math.random() * 30, q > 90 && (q = 90), p.style.width = `${q}%`;
+      }, 200);
+      try {
+        const k = new FileReader();
+        k.onload = () => {
+          clearInterval(f), p.style.width = "100%", x.textContent = "Upload complete", setTimeout(() => {
+            n = k.result, o = "url", v(), u();
+          }, 500);
+        }, k.readAsDataURL(l);
+      } catch {
+        clearInterval(f), x.textContent = "Upload failed";
+      }
+    }
+  }, u = () => {
+    const l = a.querySelector(".close-btn"), g = a.querySelector(".cancel-btn"), p = a.querySelector("#insert-btn"), x = a.querySelector(".tab-upload"), q = a.querySelector(".tab-url");
+    if (l?.addEventListener("click", h), g?.addEventListener("click", h), p?.addEventListener("click", E), x?.addEventListener("click", () => {
+      o = "upload", v(), u();
+    }), q?.addEventListener("click", () => {
+      o = "url", v(), u();
+    }), o === "upload") {
+      const f = a.querySelector(".dropzone"), k = a.querySelector("#file-input");
+      f?.addEventListener("click", () => k?.click()), f?.addEventListener("dragover", (L) => {
+        L.preventDefault(), f.classList.add("is-dragover");
+      }), f?.addEventListener("dragleave", () => {
+        f.classList.remove("is-dragover");
+      }), f?.addEventListener("drop", (L) => {
+        L.preventDefault(), f.classList.remove("is-dragover");
+        const S = L.dataTransfer?.files[0];
+        S && y(S);
+      }), k?.addEventListener("change", (L) => {
+        const S = L.target.files?.[0];
+        S && y(S);
+      });
+    }
+    if (o === "url") {
+      const f = a.querySelector("#url-input"), k = a.querySelector("#alt-input"), L = a.querySelector("#width-input"), S = a.querySelector("#height-input");
+      f?.addEventListener("input", () => {
+        n = f.value, v(), u();
+      }), k?.addEventListener("input", () => {
+        b = k.value;
+      }), L?.addEventListener("input", () => {
+        c = L.value;
+      }), S?.addEventListener("input", () => {
+        m = S.value;
+      });
+    }
+  };
+  u(), i.addEventListener("click", (l) => {
+    l.target === i && h();
+  });
+}, Y = () => {
+  ["nw", "ne", "sw", "se"].forEach((t) => {
+    const r = document.createElement("div");
+    r.className = `media-resize-handle-${t}`, r.style.cssText = `
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      background: #007bff;
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: ${t}-resize;
+      z-index: 10001;
+      display: none;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    `, r.setAttribute("data-position", t), document.body.appendChild(r), R.push(r);
+  });
+}, C = () => {
+  if (!s) {
+    R.forEach((r) => r.style.display = "none");
+    return;
+  }
+  const e = s.getBoundingClientRect(), t = {
+    nw: { x: e.left - 5, y: e.top - 5 },
+    ne: { x: e.right - 5, y: e.top - 5 },
+    sw: { x: e.left - 5, y: e.bottom - 5 },
+    se: { x: e.right - 5, y: e.bottom - 5 }
+  };
+  R.forEach((r) => {
+    const i = r.getAttribute("data-position"), a = t[i];
+    r.style.left = `${a.x}px`, r.style.top = `${a.y}px`, r.style.display = "block";
+  });
+}, Z = (e) => {
+  const t = D(e), r = B(!0);
+  r.innerHTML = `
+    <div class="rte-media-header">
+      <h2 class="rte-media-title">Edit Alt Text</h2>
+      <button class="close-btn rte-media-close-btn" type="button" aria-label="Close">×</button>
+    </div>
+    <div class="rte-media-body">
+      <label class="rte-media-label">Alternative Text (for accessibility)</label>
+      <textarea id="alt-text-input" class="rte-media-textarea" placeholder="Describe the image for screen readers...">${e.alt || ""}</textarea>
+      <p class="rte-media-helper">Good alt text is descriptive and concise. It helps users with visual impairments understand your content.</p>
+    </div>
+    <div class="rte-media-footer">
+      <button class="cancel-btn rte-media-btn rte-media-btn-secondary" type="button">Cancel</button>
+      <button class="save-btn rte-media-btn rte-media-btn-primary" type="button">Save</button>
+    </div>
+  `, t.appendChild(r), document.body.appendChild(t);
+  const i = r.querySelector("#alt-text-input"), a = r.querySelector(".close-btn"), o = r.querySelector(".cancel-btn"), n = r.querySelector(".save-btn"), c = () => {
+    t.parentNode && t.parentNode.removeChild(t);
+  };
+  a.addEventListener("click", c), o.addEventListener("click", c), t.addEventListener("click", (m) => {
+    m.target === t && c();
+  }), n.addEventListener("click", () => {
+    e.alt = i.value, c();
+  }), i.focus(), i.select();
+}, K = (e) => {
+  const t = e.closest("a"), r = t?.getAttribute("href") || "", i = t?.getAttribute("target") || "_self", a = t?.getAttribute("title") || "", o = D(e), n = B(!0);
+  n.innerHTML = `
+    <div class="rte-media-header">
+      <h2 class="rte-media-title">${t ? "Edit Link" : "Add Link"}</h2>
+      <button class="close-btn rte-media-close-btn" type="button" aria-label="Close">×</button>
+    </div>
+    <div class="rte-media-body">
+      <div class="rte-media-field">
+        <label class="rte-media-label">URL</label>
+        <input id="link-url" type="url" class="rte-media-input" value="${r}" placeholder="https://example.com" />
+      </div>
+      <div class="rte-media-field">
+        <label class="rte-media-label">Title (tooltip)</label>
+        <input id="link-title" type="text" class="rte-media-input" value="${a}" placeholder="Optional tooltip text" />
+      </div>
+      <label class="rte-media-checkbox-label">
+        <input id="link-target" type="checkbox" ${i === "_blank" ? "checked" : ""} />
+        Open in new window/tab
+      </label>
+    </div>
+    <div class="rte-media-footer rte-media-footer-spread">
+      ${t ? '<button class="remove-link-btn rte-media-btn rte-media-btn-danger" type="button">Remove Link</button>' : '<span class="rte-media-spacer"></span>'}
+      <div class="rte-media-actions">
+        <button class="cancel-btn rte-media-btn rte-media-btn-secondary" type="button">Cancel</button>
+        <button class="save-btn rte-media-btn rte-media-btn-primary" type="button">Save</button>
+      </div>
+    </div>
+  `, o.appendChild(n), document.body.appendChild(o);
+  const c = n.querySelector("#link-url"), m = n.querySelector("#link-title"), b = n.querySelector("#link-target"), v = n.querySelector(".close-btn"), h = n.querySelector(".cancel-btn"), E = n.querySelector(".save-btn"), y = n.querySelector(".remove-link-btn"), u = () => {
+    o.parentNode && o.parentNode.removeChild(o);
+  };
+  v.addEventListener("click", u), h.addEventListener("click", u), o.addEventListener("click", (l) => {
+    l.target === o && u();
+  }), E.addEventListener("click", () => {
+    const l = c.value.trim();
+    if (l) {
+      const g = l.startsWith("http") ? l : `https://${l}`;
+      if (t)
+        t.setAttribute("href", g), t.setAttribute("target", b.checked ? "_blank" : "_self"), b.checked ? t.setAttribute("rel", "noopener noreferrer") : t.removeAttribute("rel"), m.value.trim() ? t.setAttribute("title", m.value.trim()) : t.removeAttribute("title");
+      else {
+        const p = document.createElement("a");
+        p.href = g, p.target = b.checked ? "_blank" : "_self", b.checked && (p.rel = "noopener noreferrer"), m.value.trim() && (p.title = m.value.trim()), e.replaceWith(p), p.appendChild(e);
+      }
+      u(), d && s && H(s);
+    }
+  }), y?.addEventListener("click", () => {
+    t && confirm("Remove link from this media?") && (t.replaceWith(e), u(), d && s && H(s));
+  }), c.focus();
+}, J = (e) => {
+  const t = D(e), r = B();
+  let i = "url", a = e.src;
+  const o = () => {
+    r.innerHTML = `
+      <div class="rte-media-header">
+        <h2 class="rte-media-title">Replace Image</h2>
+        <button class="close-btn rte-media-close-btn" type="button" aria-label="Close">×</button>
+      </div>
+
+      <div class="rte-media-tabs">
+        <button class="tab-upload rte-media-tab ${i === "upload" ? "active" : ""}" type="button">Upload</button>
+        <button class="tab-url rte-media-tab ${i === "url" ? "active" : ""}" type="button">URL</button>
+      </div>
+
+      <div class="rte-media-body">
+        ${i === "upload" ? `
+          <div id="upload-section">
+            <div class="dropzone rte-media-dropzone">
+              <div class="rte-media-dropzone-icon">📁</div>
+              <p class="rte-media-dropzone-title">Drag and drop your image here</p>
+              <p class="rte-media-muted">or click to browse</p>
+            </div>
+            <input type="file" id="file-input" accept="image/*" style="display: none;">
+            <div id="upload-progress" class="rte-media-progress" style="display: none;">
+              <div class="rte-media-progress-track">
+                <div id="progress-bar" class="rte-media-progress-bar"></div>
+              </div>
+              <p id="progress-text" class="rte-media-progress-text">Uploading...</p>
+            </div>
+          </div>
+        ` : `
+          <div id="url-section">
+            <div class="rte-media-field">
+              <label class="rte-media-label">Image URL</label>
+              <input type="text" id="url-input" class="rte-media-input" placeholder="https://example.com/image.jpg" value="${a}">
+            </div>
+            ${a ? `
+              <div class="rte-media-field">
+                <label class="rte-media-label">Preview</label>
+                <div class="rte-media-preview">
+                  <img src="${a}" alt="Preview" onerror="this.parentElement.innerHTML='<p class=&quot;rte-media-muted&quot;>Failed to load image</p>'">
+                </div>
+              </div>
+            ` : ""}
+          </div>
+        `}
+      </div>
+
+      <div class="rte-media-footer">
+        <button class="cancel-btn rte-media-btn rte-media-btn-secondary" type="button">Cancel</button>
+        <button id="replace-btn" class="rte-media-btn rte-media-btn-primary" type="button" ${!a && i === "url" ? "disabled" : ""}>Replace</button>
+      </div>
+    `;
+  };
+  o(), t.appendChild(r), document.body.appendChild(t);
+  const n = () => {
+    t.parentNode && t.parentNode.removeChild(t);
+  }, c = () => {
+    a && (e.src = a, n());
+  }, m = async (v) => {
+    const h = r.querySelector("#upload-progress"), E = r.querySelector("#progress-bar"), y = r.querySelector("#progress-text");
+    if (h && E && y) {
+      h.style.display = "block";
+      let u = 0;
+      const l = setInterval(() => {
+        u += Math.random() * 30, u > 90 && (u = 90), E.style.width = `${u}%`;
+      }, 200);
+      try {
+        const g = new FileReader();
+        g.onload = () => {
+          clearInterval(l), E.style.width = "100%", y.textContent = "Upload complete", setTimeout(() => {
+            a = g.result, i = "url", o(), b();
+          }, 500);
+        }, g.readAsDataURL(v);
+      } catch {
+        clearInterval(l), y.textContent = "Upload failed";
+      }
+    }
+  }, b = () => {
+    const v = r.querySelector(".close-btn"), h = r.querySelector(".cancel-btn"), E = r.querySelector("#replace-btn"), y = r.querySelector(".tab-upload"), u = r.querySelector(".tab-url");
+    if (v?.addEventListener("click", n), h?.addEventListener("click", n), E?.addEventListener("click", c), y?.addEventListener("click", () => {
+      i = "upload", o(), b();
+    }), u?.addEventListener("click", () => {
+      i = "url", o(), b();
+    }), i === "upload") {
+      const l = r.querySelector(".dropzone"), g = r.querySelector("#file-input");
+      l?.addEventListener("click", () => g?.click()), l?.addEventListener("dragover", (p) => {
+        p.preventDefault(), l.classList.add("is-dragover");
+      }), l?.addEventListener("dragleave", () => {
+        l.classList.remove("is-dragover");
+      }), l?.addEventListener("drop", (p) => {
+        p.preventDefault(), l.classList.remove("is-dragover");
+        const x = p.dataTransfer?.files[0];
+        x && m(x);
+      }), g?.addEventListener("change", (p) => {
+        const x = p.target.files?.[0];
+        x && m(x);
+      });
+    }
+    if (i === "url") {
+      const l = r.querySelector("#url-input");
+      l?.addEventListener("input", () => {
+        a = l.value, o(), b();
+      });
+    }
+  };
+  b(), t.addEventListener("click", (v) => {
+    v.target === t && n();
+  });
+}, w = () => {
+  if (!d || !s) return;
+  const e = d.offsetHeight || 40, t = s.offsetTop, r = s.offsetLeft, i = s.offsetWidth, a = t - e - 8, o = r + i / 2 - (d.offsetWidth || 120) / 2;
+  d.style.top = `${a}px`, d.style.left = `${o}px`, setTimeout(() => {
+    d && (d.style.display = "flex");
+  }, 100);
+}, H = (e) => {
+  d && (d._cleanup && d._cleanup(), d.remove());
+  const t = e.parentElement;
+  if (t) {
+    const n = t.style.position;
+    (!n || n === "static") && (t.style.position = "relative", t._originalPosition = n), d = document.createElement("div"), d.className = "media-floating-toolbar", F(e) && d.classList.add("rte-ui-theme-dark"), t.insertBefore(d, t.firstChild), w();
+  }
+  const r = e.tagName === "IMG", i = e.closest("a");
+  d.innerHTML = `
+    <button class="media-floating-toolbar-btn btn-align-left" title="Align Left" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
+    </button>
+    <button class="media-floating-toolbar-btn btn-align-center" title="Align Center" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
+    </button>
+    <button class="media-floating-toolbar-btn btn-align-right" title="Align Right" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>
+    </button>
+    <div class="media-floating-toolbar-separator" aria-hidden="true"></div>
+    ${r ? `
+    <button class="media-floating-toolbar-btn btn-alt" title="Edit Alt Text" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
+    </button>` : ""}
+    <button class="media-floating-toolbar-btn btn-link" title="${i ? "Edit/Remove Link" : "Add Link"}" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+    </button>
+    ${r ? `
+    <button class="media-floating-toolbar-btn btn-replace" title="Replace Image" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+    </button>` : ""}
+    <div class="media-floating-toolbar-separator" aria-hidden="true"></div>
+    <button class="media-floating-toolbar-btn btn-remove" title="Remove" type="button">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+    </button>
+  `, setTimeout(() => {
+    w();
+  }, 0);
+  const a = () => w();
+  let o = s.parentElement;
+  for (; o; )
+    o.addEventListener("scroll", a), o = o.parentElement;
+  window.addEventListener("scroll", a), window.addEventListener("resize", a), d._cleanup = () => {
+    let n = s?.parentElement;
+    for (; n; )
+      n.removeEventListener("scroll", a), n = n.parentElement;
+    window.removeEventListener("scroll", a), window.removeEventListener("resize", a);
+  }, d.querySelector(".btn-align-left")?.addEventListener("click", () => {
+    e.style.display = "block", e.style.marginLeft = "0", e.style.marginRight = "auto", w();
+  }), d.querySelector(".btn-align-center")?.addEventListener("click", () => {
+    e.style.display = "block", e.style.marginLeft = "auto", e.style.marginRight = "auto", w();
+  }), d.querySelector(".btn-align-right")?.addEventListener("click", () => {
+    e.style.display = "block", e.style.marginLeft = "auto", e.style.marginRight = "0", w();
+  }), d.querySelector(".btn-alt")?.addEventListener("click", () => {
+    e.tagName === "IMG" && Z(e);
+  }), d.querySelector(".btn-link")?.addEventListener("click", () => {
+    K(e);
+  }), d.querySelector(".btn-replace")?.addEventListener("click", () => {
+    e.tagName === "IMG" && J(e);
+  }), d.querySelector(".btn-resize")?.addEventListener("click", () => {
+    const n = prompt("Enter width in pixels:", String(e.width || e.offsetWidth));
+    if (n && !isNaN(parseInt(n))) {
+      const c = parseInt(n);
+      e.style.width = `${c}px`, e.setAttribute("width", String(c)), C(), w();
+    }
+  }), d.querySelector(".btn-remove")?.addEventListener("click", () => {
+    confirm("Remove this media?") && (e.remove(), d && (d._cleanup && d._cleanup(), d.remove(), d = null), s = null, C());
+  }), d._cleanup = () => {
+    window.removeEventListener("scroll", w), window.removeEventListener("resize", w);
+  };
+}, W = (e) => {
+  I = e || null, Y(), document.addEventListener("click", (t) => {
+    const r = t.target;
+    if (r.tagName === "IMG" || r.tagName === "VIDEO") {
+      const i = r;
+      let a = !1;
+      if (I ? a = I.contains(i) : a = !!i.closest('[contenteditable="true"]'), a) {
+        t.preventDefault(), t.stopPropagation(), s = i, s.style.display = "block", H(i), C();
+        return;
+      }
+    }
+    if (!r.closest(".btn-link, .btn-resize, .btn-remove") && d && !r.closest("button")) {
+      if (d._cleanup && d._cleanup(), d.remove(), d = null, s && s.parentElement) {
+        const i = s.parentElement;
+        i._originalPosition !== void 0 && (i.style.position = i._originalPosition, delete i._originalPosition);
+      }
+      s = null, C();
+    }
+  }), R.forEach((t) => {
+    t.addEventListener("mousedown", (r) => {
+      if (!s) return;
+      r.preventDefault(), r.stopPropagation(), A = !0, M = t.getAttribute("data-position"), U = r.clientX, V = r.clientY;
+      const i = s.getBoundingClientRect();
+      z = i.width, $ = i.height, _ = z / $, document.body.style.userSelect = "none", document.body.style.cursor = `${M}-resize`;
+    });
+  }), document.addEventListener("mousemove", (t) => {
+    if (!A || !s || !M) return;
+    const r = t.clientX - U, i = t.clientY - V;
+    let a = z, o = $;
+    switch (M) {
+      case "se":
+        a = z + r, o = $ + i;
+        break;
+      case "sw":
+        a = z - r, o = $ + i;
+        break;
+      case "ne":
+        a = z + r, o = $ - i;
+        break;
+      case "nw":
+        a = z - r, o = $ - i;
+        break;
+    }
+    Math.abs(r) > Math.abs(i) ? o = a / _ : a = o * _, a = Math.max(50, a), o = Math.max(50, o), s.style.width = `${a}px`, s.style.height = `${o}px`, s.setAttribute("width", String(Math.round(a))), s.setAttribute("height", String(Math.round(o))), C(), w();
+  }), document.addEventListener("mouseup", () => {
+    A && (A = !1, M = null, document.body.style.userSelect = "", document.body.style.cursor = "");
+  }), window.addEventListener("scroll", C), window.addEventListener("resize", C);
+};
+typeof window < "u" && !window.__mediaManagerInitialized && (window.__mediaManagerInitialized = !0, W());
+const te = () => ({
+  name: "image",
+  initialize: (e) => {
+    const t = e?.editorElement;
+    W(t);
+  },
+  toolbar: [
+    {
+      label: "Image",
+      command: "insertImage",
+      icon: '<svg width="24px" height="24px" viewBox="0 0 32 32" enable-background="new 0 0 32 32"><g><rect fill="none" height="22" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" width="30" x="1" y="5"></rect><polygon fill="none" points="31,27 21,17 11,27" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></polygon><polygon fill="none" points="18,20 9,11 1,19 1,27 11,27" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></polygon><circle cx="19" cy="11" fill="none" r="2" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></circle></g></svg>'
+    },
+    {
+      label: "Video",
+      command: "insertVideo",
+      icon: '<svg width="24" height="24" focusable="false"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5H5Zm4.8 2.6 5.6 4a.5.5 0 0 1 0 .8l-5.6 4A.5.5 0 0 1 9 16V8a.5.5 0 0 1 .8-.4Z" fill-rule="nonzero"></path></svg>'
+    }
+  ],
+  commands: {
+    insertImage: (e, t) => {
+      const r = t?.contentElement instanceof HTMLElement ? t.contentElement : void 0;
+      return P("image", r), !0;
+    },
+    insertVideo: (e, t) => {
+      const r = t?.contentElement instanceof HTMLElement ? t.contentElement : void 0;
+      return P("video", r), !0;
+    }
+  },
+  keymap: {
+    "Mod-Shift-i": "insertImage"
+  }
+}), Q = {
+  apiEndpoints: {
+    upload: "/media/upload",
+    library: "/media/library",
+    delete: "/media/library"
+  },
+  maxFileSize: 10 * 1024 * 1024,
+  // 10MB
+  allowedTypes: [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "video/mp4",
+    "video/webm"
+  ],
+  headers: {
+    // Add default headers if needed (e.g., API key)
+    // 'Authorization': 'Bearer YOUR_API_KEY',
+    // 'X-API-Key': 'YOUR_API_KEY'
+  }
+};
+let N = { ...Q };
+function re(e) {
+  N = { ...N, ...e };
+}
+function ae() {
+  return { ...N };
+}
+export {
+  te as MediaManagerPlugin,
+  ae as getMediaManagerConfig,
+  re as setMediaManagerConfig
+};