@editora/core 1.0.1 → 1.0.2

package/dist/MediaManagerPlugin.native-DaYFDzNM.mjs

@@ -0,0 +1,533 @@
+let A = null, p = null, s = null, R = [], M = !1, T = null, I = 0, j = 0, $ = 0, S = 0, D = 1, _ = null;
+const V = (i) => {
+  const t = window.getSelection();
+  t && t.rangeCount > 0 && (A = t.getRangeAt(0).cloneRange());
+  const e = document.createElement("div");
+  e.style.cssText = "position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 99999;";
+  const o = document.createElement("div");
+  o.style.cssText = "background: white; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);";
+  let r = "upload", l = "", c = "", b = "", y = "";
+  const f = () => {
+    o.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e1e5e9; background: #f8f9fa;">
+        <h2 style="margin: 0; font-size: 18px; font-weight: 600;">Insert ${i === "image" ? "Image" : "Video"}</h2>
+        <button class="close-btn" style="background: none; border: none; font-size: 28px; cursor: pointer; color: #6c757d; padding: 0; width: 30px; height: 30px; line-height: 1;">×</button>
+      </div>
+
+      <div class="tabs" style="display: flex; border-bottom: 1px solid #e1e5e9;">
+        <button class="tab-upload" style="flex: 1; padding: 12px; border: none; background: ${r === "upload" ? "#007bff" : "#f8f9fa"}; color: ${r === "upload" ? "white" : "#495057"}; cursor: pointer; font-weight: 500;">📤 Upload</button>
+        <button class="tab-url" style="flex: 1; padding: 12px; border: none; background: ${r === "url" ? "#007bff" : "#f8f9fa"}; color: ${r === "url" ? "white" : "#495057"}; cursor: pointer; font-weight: 500;">🔗 URL</button>
+      </div>
+
+      <div style="padding: 20px; overflow-y: auto; flex: 1;">
+        ${r === "upload" ? `
+          <div id="upload-section">
+            <div class="dropzone" style="border: 2px dashed #ced4da; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s;">
+              <div style="font-size: 48px; margin-bottom: 10px;">📁</div>
+              <p style="margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Drag and drop your ${i} here</p>
+              <p style="margin: 0 0 8px 0; color: #6c757d; font-size: 14px;">or click to browse</p>
+              <p style="margin: 0; color: #6c757d; font-size: 12px;">Max file size: 50MB</p>
+            </div>
+            <input type="file" id="file-input" accept="${i === "image" ? "image/*" : "video/*"}" style="display: none;">
+            <div id="upload-progress" style="display: none; margin-top: 20px;">
+              <div style="background: #e9ecef; border-radius: 4px; height: 8px; overflow: hidden;">
+                <div id="progress-bar" style="background: #007bff; height: 100%; width: 0%; transition: width 0.3s;"></div>
+              </div>
+              <p id="progress-text" style="margin-top: 8px; text-align: center; color: #6c757d; font-size: 14px;">Uploading...</p>
+            </div>
+          </div>
+        ` : `
+          <div id="url-section">
+            <div style="margin-bottom: 20px;">
+              <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">URL:</label>
+              <input type="text" id="url-input" placeholder="https://example.com/${i}.${i === "image" ? "jpg" : "mp4"}" value="${l}" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;">
+            </div>
+            ${i === "image" ? `
+              <div style="margin-bottom: 20px;">
+                <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">Alt Text (for accessibility):</label>
+                <input type="text" id="alt-input" placeholder="Describe the image" value="${y}" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;">
+              </div>
+            ` : ""}
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;">
+              <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">Width (px):</label>
+                <input type="number" id="width-input" placeholder="Auto" value="${c}" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;">
+              </div>
+              <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">Height (px):</label>
+                <input type="number" id="height-input" placeholder="Auto" value="${b}" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;">
+              </div>
+            </div>
+            ${l ? `
+              <div style="margin-bottom: 20px;">
+                <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">Preview:</label>
+                <div style="border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; background: #f8f9fa; text-align: center;">
+                  ${i === "image" ? `<img src="${l}" alt="Preview" style="max-width: 100%; max-height: 200px;">` : `<video src="${l}" controls style="max-width: 100%; max-height: 200px;"></video>`}
+                </div>
+              </div>
+            ` : ""}
+          </div>
+        `}
+      </div>
+
+      <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #e1e5e9; background: #f8f9fa;">
+        <button class="cancel-btn" style="padding: 10px 20px; background: #fff; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer; font-size: 14px;">Cancel</button>
+        <button id="insert-btn" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;" ${!l && r === "url" ? "disabled" : ""}>Insert</button>
+      </div>
+    `;
+  };
+  f(), e.appendChild(o), document.body.appendChild(e);
+  const h = () => document.body.removeChild(e), k = () => {
+    if (!l) return;
+    const d = i === "image" ? document.createElement("img") : document.createElement("video");
+    d.src = l, d.setAttribute("data-media-type", i), i === "image" && y && (d.alt = y), c && (d.style.width = `${c}px`, d.setAttribute("width", c)), b && (d.style.height = `${b}px`, d.setAttribute("height", b)), i === "video" && (d.controls = !0), !c && !b ? d.style.cssText = "max-width: 100%; height: auto; display: block; margin: 1em 0; cursor: pointer;" : d.style.cssText = `display: block; margin: 1em 0; cursor: pointer; ${c ? `width: ${c}px;` : "max-width: 100%;"} ${b ? `height: ${b}px;` : "height: auto;"}`, A && (A.deleteContents(), A.insertNode(d)), h();
+  }, m = async (d) => {
+    const n = o.querySelector("#upload-progress"), u = o.querySelector("#progress-bar"), g = o.querySelector("#progress-text");
+    if (n && u && g) {
+      n.style.display = "block";
+      let w = 0;
+      const a = setInterval(() => {
+        w += Math.random() * 30, w > 90 && (w = 90), u.style.width = `${w}%`;
+      }, 200);
+      try {
+        const v = new FileReader();
+        v.onload = () => {
+          clearInterval(a), u.style.width = "100%", g.textContent = "✅ Upload complete", setTimeout(() => {
+            l = v.result, r = "url", f(), x();
+          }, 500);
+        }, v.readAsDataURL(d);
+      } catch (v) {
+        clearInterval(a), g.textContent = "❌ Upload failed";
+      }
+    }
+  }, x = () => {
+    const d = o.querySelector(".close-btn"), n = o.querySelector(".cancel-btn"), u = o.querySelector("#insert-btn"), g = o.querySelector(".tab-upload"), w = o.querySelector(".tab-url");
+    if (d == null || d.addEventListener("click", h), n == null || n.addEventListener("click", h), u == null || u.addEventListener("click", k), g == null || g.addEventListener("click", () => {
+      r = "upload", f(), x();
+    }), w == null || w.addEventListener("click", () => {
+      r = "url", f(), x();
+    }), r === "upload") {
+      const a = o.querySelector(".dropzone"), v = o.querySelector("#file-input");
+      a == null || a.addEventListener("click", () => v == null ? void 0 : v.click()), a == null || a.addEventListener("dragover", (E) => {
+        E.preventDefault(), a.style.borderColor = "#007bff", a.style.background = "#f0f8ff";
+      }), a == null || a.addEventListener("dragleave", () => {
+        a.style.borderColor = "#ced4da", a.style.background = "transparent";
+      }), a == null || a.addEventListener("drop", (E) => {
+        var C;
+        E.preventDefault(), a.style.borderColor = "#ced4da", a.style.background = "transparent";
+        const L = (C = E.dataTransfer) == null ? void 0 : C.files[0];
+        L && m(L);
+      }), v == null || v.addEventListener("change", (E) => {
+        var C;
+        const L = (C = E.target.files) == null ? void 0 : C[0];
+        L && m(L);
+      });
+    }
+    if (r === "url") {
+      const a = o.querySelector("#url-input"), v = o.querySelector("#alt-input"), E = o.querySelector("#width-input"), L = o.querySelector("#height-input");
+      a == null || a.addEventListener("input", () => {
+        l = a.value, f(), x();
+      }), v == null || v.addEventListener("input", () => {
+        y = v.value;
+      }), E == null || E.addEventListener("input", () => {
+        c = E.value;
+      }), L == null || L.addEventListener("input", () => {
+        b = L.value;
+      });
+    }
+  };
+  x(), e.addEventListener("click", (d) => {
+    d.target === e && h();
+  });
+}, B = () => {
+  ["nw", "ne", "sw", "se"].forEach((t) => {
+    const e = document.createElement("div");
+    e.className = `media-resize-handle-${t}`, e.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);
+    `, e.setAttribute("data-position", t), document.body.appendChild(e), R.push(e);
+  });
+}, q = () => {
+  if (!p) {
+    R.forEach((e) => e.style.display = "none");
+    return;
+  }
+  const i = p.getBoundingClientRect(), t = {
+    nw: { x: i.left - 5, y: i.top - 5 },
+    ne: { x: i.right - 5, y: i.top - 5 },
+    sw: { x: i.left - 5, y: i.bottom - 5 },
+    se: { x: i.right - 5, y: i.bottom - 5 }
+  };
+  R.forEach((e) => {
+    const o = e.getAttribute("data-position"), r = t[o];
+    e.style.left = `${r.x}px`, e.style.top = `${r.y}px`, e.style.display = "block";
+  });
+}, U = (i) => {
+  const t = document.createElement("div");
+  t.style.cssText = "position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10001;";
+  const e = document.createElement("div");
+  e.style.cssText = "background: white; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);", e.innerHTML = `
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e1e5e9; background: #f8f9fa;">
+      <h2 style="margin: 0; font-size: 18px; font-weight: 600;">Edit Alt Text</h2>
+      <button class="close-btn" style="background: none; border: none; font-size: 28px; cursor: pointer; color: #6c757d; padding: 0; width: 30px; height: 30px; line-height: 1;">×</button>
+    </div>
+    <div style="padding: 20px;">
+      <label style="display: block; margin-bottom: 8px; font-weight: 500;">Alternative Text (for accessibility):</label>
+      <textarea id="alt-text-input" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; min-height: 80px; font-family: inherit; resize: vertical;" placeholder="Describe the image for screen readers...">${i.alt || ""}</textarea>
+      <p style="margin-top: 8px; margin-bottom: 0; font-size: 12px; color: #6c757d;">Good alt text is descriptive and concise. It helps users with visual impairments understand your content.</p>
+    </div>
+    <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #e1e5e9; background: #f8f9fa;">
+      <button class="cancel-btn" style="padding: 10px 20px; background: #fff; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer; font-size: 14px;">Cancel</button>
+      <button class="save-btn" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">Save</button>
+    </div>
+  `, t.appendChild(e), document.body.appendChild(t);
+  const o = e.querySelector("#alt-text-input"), r = e.querySelector(".close-btn"), l = e.querySelector(".cancel-btn"), c = e.querySelector(".save-btn"), b = () => document.body.removeChild(t);
+  r.addEventListener("click", b), l.addEventListener("click", b), t.addEventListener("click", (y) => {
+    y.target === t && b();
+  }), c.addEventListener("click", () => {
+    i.alt = o.value, b();
+  }), o.focus(), o.select();
+}, N = (i) => {
+  const t = i.closest("a"), e = (t == null ? void 0 : t.getAttribute("href")) || "", o = (t == null ? void 0 : t.getAttribute("target")) || "_self", r = (t == null ? void 0 : t.getAttribute("title")) || "", l = document.createElement("div");
+  l.style.cssText = "position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10001;";
+  const c = document.createElement("div");
+  c.style.cssText = "background: white; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);", c.innerHTML = `
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e1e5e9; background: #f8f9fa;">
+      <h2 style="margin: 0; font-size: 18px; font-weight: 600;">${t ? "Edit Link" : "Add Link"}</h2>
+      <button class="close-btn" style="background: none; border: none; font-size: 28px; cursor: pointer; color: #6c757d; padding: 0; width: 30px; height: 30px; line-height: 1;">×</button>
+    </div>
+    <div style="padding: 20px;">
+      <div style="margin-bottom: 16px;">
+        <label style="display: block; margin-bottom: 6px; font-weight: 500;">URL:</label>
+        <input id="link-url" type="url" value="${e}" placeholder="https://example.com" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;" />
+      </div>
+      <div style="margin-bottom: 16px;">
+        <label style="display: block; margin-bottom: 6px; font-weight: 500;">Title (tooltip):</label>
+        <input id="link-title" type="text" value="${r}" placeholder="Optional tooltip text" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;" />
+      </div>
+      <div>
+        <label style="display: flex; align-items: center; cursor: pointer;">
+          <input id="link-target" type="checkbox" ${o === "_blank" ? "checked" : ""} style="margin-right: 8px;" />
+          Open in new window/tab
+        </label>
+      </div>
+    </div>
+    <div style="display: flex; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #e1e5e9; background: #f8f9fa;">
+      ${t ? '<button class="remove-link-btn" style="padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">Remove Link</button>' : "<span></span>"}
+      <div style="display: flex; gap: 10px;">
+        <button class="cancel-btn" style="padding: 10px 20px; background: #fff; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer; font-size: 14px;">Cancel</button>
+        <button class="save-btn" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">Save</button>
+      </div>
+    </div>
+  `, l.appendChild(c), document.body.appendChild(l);
+  const b = c.querySelector("#link-url"), y = c.querySelector("#link-title"), f = c.querySelector("#link-target"), h = c.querySelector(".close-btn"), k = c.querySelector(".cancel-btn"), m = c.querySelector(".save-btn"), x = c.querySelector(".remove-link-btn"), d = () => document.body.removeChild(l);
+  h.addEventListener("click", d), k.addEventListener("click", d), l.addEventListener("click", (n) => {
+    n.target === l && d();
+  }), m.addEventListener("click", () => {
+    const n = b.value.trim();
+    if (n) {
+      const u = n.startsWith("http") ? n : `https://${n}`;
+      if (t)
+        t.setAttribute("href", u), t.setAttribute("target", f.checked ? "_blank" : "_self"), f.checked ? t.setAttribute("rel", "noopener noreferrer") : t.removeAttribute("rel"), y.value.trim() ? t.setAttribute("title", y.value.trim()) : t.removeAttribute("title");
+      else {
+        const g = document.createElement("a");
+        g.href = u, g.target = f.checked ? "_blank" : "_self", f.checked && (g.rel = "noopener noreferrer"), y.value.trim() && (g.title = y.value.trim()), i.replaceWith(g), g.appendChild(i);
+      }
+      d(), s && p && H(p);
+    }
+  }), x == null || x.addEventListener("click", () => {
+    t && confirm("Remove link from this media?") && (t.replaceWith(i), d(), s && p && H(p));
+  }), b.focus();
+}, W = (i) => {
+  const t = document.createElement("div");
+  t.style.cssText = "position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10001;";
+  const e = document.createElement("div");
+  e.style.cssText = "background: white; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);";
+  let o = "url", r = i.src;
+  const l = () => {
+    e.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e1e5e9; background: #f8f9fa;">
+        <h2 style="margin: 0; font-size: 18px; font-weight: 600;">Replace Image</h2>
+        <button class="close-btn" style="background: none; border: none; font-size: 28px; cursor: pointer; color: #6c757d; padding: 0; width: 30px; height: 30px; line-height: 1;">×</button>
+      </div>
+
+      <div class="tabs" style="display: flex; border-bottom: 1px solid #e1e5e9;">
+        <button class="tab-upload" style="flex: 1; padding: 12px; border: none; background: ${o === "upload" ? "#007bff" : "#f8f9fa"}; color: ${o === "upload" ? "white" : "#495057"}; cursor: pointer; font-weight: 500;">📤 Upload</button>
+        <button class="tab-url" style="flex: 1; padding: 12px; border: none; background: ${o === "url" ? "#007bff" : "#f8f9fa"}; color: ${o === "url" ? "white" : "#495057"}; cursor: pointer; font-weight: 500;">🔗 URL</button>
+      </div>
+
+      <div style="padding: 20px; overflow-y: auto; flex: 1;">
+        ${o === "upload" ? `
+          <div id="upload-section">
+            <div class="dropzone" style="border: 2px dashed #ced4da; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s;">
+              <div style="font-size: 48px; margin-bottom: 10px;">📁</div>
+              <p style="margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Drag and drop your image here</p>
+              <p style="margin: 0 0 8px 0; color: #6c757d; font-size: 14px;">or click to browse</p>
+            </div>
+            <input type="file" id="file-input" accept="image/*" style="display: none;">
+            <div id="upload-progress" style="display: none; margin-top: 20px;">
+              <div style="background: #e9ecef; border-radius: 4px; height: 8px; overflow: hidden;">
+                <div id="progress-bar" style="background: #007bff; height: 100%; width: 0%; transition: width 0.3s;"></div>
+              </div>
+              <p id="progress-text" style="margin-top: 8px; text-align: center; color: #6c757d; font-size: 14px;">Uploading...</p>
+            </div>
+          </div>
+        ` : `
+          <div id="url-section">
+            <div style="margin-bottom: 20px;">
+              <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">Image URL:</label>
+              <input type="text" id="url-input" placeholder="https://example.com/image.jpg" value="${r}" style="width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;">
+            </div>
+            ${r ? `
+              <div style="margin-bottom: 20px;">
+                <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;">Preview:</label>
+                <div style="border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; background: #f8f9fa; text-align: center;">
+                  <img src="${r}" alt="Preview" style="max-width: 100%; max-height: 300px;" onerror="this.parentElement.innerHTML='<p style=&quot;color: #dc3545;&quot;>Failed to load image</p>'">
+                </div>
+              </div>
+            ` : ""}
+          </div>
+        `}
+      </div>
+
+      <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #e1e5e9; background: #f8f9fa;">
+        <button class="cancel-btn" style="padding: 10px 20px; background: #fff; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer; font-size: 14px;">Cancel</button>
+        <button id="replace-btn" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;" ${!r && o === "url" ? "disabled" : ""}>Replace</button>
+      </div>
+    `;
+  };
+  l(), t.appendChild(e), document.body.appendChild(t);
+  const c = () => document.body.removeChild(t), b = () => {
+    r && (i.src = r, c());
+  }, y = async (h) => {
+    const k = e.querySelector("#upload-progress"), m = e.querySelector("#progress-bar"), x = e.querySelector("#progress-text");
+    if (k && m && x) {
+      k.style.display = "block";
+      let d = 0;
+      const n = setInterval(() => {
+        d += Math.random() * 30, d > 90 && (d = 90), m.style.width = `${d}%`;
+      }, 200);
+      try {
+        const u = new FileReader();
+        u.onload = () => {
+          clearInterval(n), m.style.width = "100%", x.textContent = "✅ Upload complete", setTimeout(() => {
+            r = u.result, o = "url", l(), f();
+          }, 500);
+        }, u.readAsDataURL(h);
+      } catch (u) {
+        clearInterval(n), x.textContent = "❌ Upload failed";
+      }
+    }
+  }, f = () => {
+    const h = e.querySelector(".close-btn"), k = e.querySelector(".cancel-btn"), m = e.querySelector("#replace-btn"), x = e.querySelector(".tab-upload"), d = e.querySelector(".tab-url");
+    if (h == null || h.addEventListener("click", c), k == null || k.addEventListener("click", c), m == null || m.addEventListener("click", b), x == null || x.addEventListener("click", () => {
+      o = "upload", l(), f();
+    }), d == null || d.addEventListener("click", () => {
+      o = "url", l(), f();
+    }), o === "upload") {
+      const n = e.querySelector(".dropzone"), u = e.querySelector("#file-input");
+      n == null || n.addEventListener("click", () => u == null ? void 0 : u.click()), n == null || n.addEventListener("dragover", (g) => {
+        g.preventDefault(), n.style.borderColor = "#007bff", n.style.background = "#f0f8ff";
+      }), n == null || n.addEventListener("dragleave", () => {
+        n.style.borderColor = "#ced4da", n.style.background = "transparent";
+      }), n == null || n.addEventListener("drop", (g) => {
+        var a;
+        g.preventDefault(), n.style.borderColor = "#ced4da", n.style.background = "transparent";
+        const w = (a = g.dataTransfer) == null ? void 0 : a.files[0];
+        w && y(w);
+      }), u == null || u.addEventListener("change", (g) => {
+        var a;
+        const w = (a = g.target.files) == null ? void 0 : a[0];
+        w && y(w);
+      });
+    }
+    if (o === "url") {
+      const n = e.querySelector("#url-input");
+      n == null || n.addEventListener("input", () => {
+        r = n.value, l(), f();
+      });
+    }
+  };
+  f(), t.addEventListener("click", (h) => {
+    h.target === t && c();
+  });
+}, z = () => {
+  if (!s || !p) return;
+  const i = s.offsetHeight || 40, t = p.offsetTop, e = p.offsetLeft, o = p.offsetWidth, r = t - i - 8, l = e + o / 2 - (s.offsetWidth || 120) / 2;
+  s.style.top = `${r}px`, s.style.left = `${l}px`, setTimeout(() => {
+    s && (s.style.display = "flex");
+  }, 100);
+}, H = (i) => {
+  var b, y, f, h, k, m, x, d;
+  s && (s._cleanup && s._cleanup(), s.remove());
+  const t = i.parentElement;
+  if (t) {
+    const n = t.style.position;
+    (!n || n === "static") && (t.style.position = "relative", t._originalPosition = n), s = document.createElement("div"), s.className = "media-floating-toolbar", s.style.cssText = `
+      position: absolute;
+      background: white;
+      border: 1px solid #ced4da;
+      border-radius: 6px;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+      gap: 2px;
+      padding: 4px;
+      z-index: 10000;
+      pointer-events: auto;
+      display: none;
+    `, t.insertBefore(s, t.firstChild), z();
+  }
+  const e = "padding: 6px 8px; border: none; background: white; cursor: pointer; border-radius: 4px; transition: background 0.2s; display: flex; align-items: center; justify-content: center;", o = i.tagName === "IMG", r = i.closest("a");
+  s.innerHTML = `
+    <button class="btn-align-left" title="Align Left" style="${e}">
+      <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="btn-align-center" title="Align Center" style="${e}">
+      <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="btn-align-right" title="Align Right" style="${e}">
+      <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 style="width: 1px; height: 20px; background: #dee2e6; margin: 0 2px;"></div>
+    ${o ? `
+    <button class="btn-alt" title="Edit Alt Text" style="${e}">
+      <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="btn-link" title="${r ? "Edit/Remove Link" : "Add Link"}" style="${e}">
+      <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>
+    ${o ? `
+    <button class="btn-replace" title="Replace Image" style="${e}">
+      <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 style="width: 1px; height: 20px; background: #dee2e6; margin: 0 2px;"></div>
+    <button class="btn-remove" title="Remove" style="${e}">
+      <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(() => {
+    z();
+  }, 0);
+  const l = () => z();
+  let c = p.parentElement;
+  for (; c; )
+    c.addEventListener("scroll", l), c = c.parentElement;
+  window.addEventListener("scroll", l), window.addEventListener("resize", l), s._cleanup = () => {
+    let n = p == null ? void 0 : p.parentElement;
+    for (; n; )
+      n.removeEventListener("scroll", l), n = n.parentElement;
+    window.removeEventListener("scroll", l), window.removeEventListener("resize", l);
+  }, s.querySelectorAll("button").forEach((n) => {
+    n.addEventListener("mouseenter", () => {
+      n.style.background = "#f8f9fa";
+    }), n.addEventListener("mouseleave", () => {
+      n.style.background = "white";
+    });
+  }), (b = s.querySelector(".btn-align-left")) == null || b.addEventListener("click", () => {
+    i.style.display = "block", i.style.marginLeft = "0", i.style.marginRight = "auto", z();
+  }), (y = s.querySelector(".btn-align-center")) == null || y.addEventListener("click", () => {
+    i.style.display = "block", i.style.marginLeft = "auto", i.style.marginRight = "auto", z();
+  }), (f = s.querySelector(".btn-align-right")) == null || f.addEventListener("click", () => {
+    i.style.display = "block", i.style.marginLeft = "auto", i.style.marginRight = "0", z();
+  }), (h = s.querySelector(".btn-alt")) == null || h.addEventListener("click", () => {
+    i.tagName === "IMG" && U(i);
+  }), (k = s.querySelector(".btn-link")) == null || k.addEventListener("click", () => {
+    N(i);
+  }), (m = s.querySelector(".btn-replace")) == null || m.addEventListener("click", () => {
+    i.tagName === "IMG" && W(i);
+  }), (x = s.querySelector(".btn-resize")) == null || x.addEventListener("click", () => {
+    const n = prompt("Enter width in pixels:", String(i.width || i.offsetWidth));
+    if (n && !isNaN(parseInt(n))) {
+      const u = parseInt(n);
+      i.style.width = `${u}px`, i.setAttribute("width", String(u)), q(), z();
+    }
+  }), (d = s.querySelector(".btn-remove")) == null || d.addEventListener("click", () => {
+    confirm("Remove this media?") && (i.remove(), s && (s._cleanup && s._cleanup(), s.remove(), s = null), p = null, q());
+  }), s._cleanup = () => {
+    window.removeEventListener("scroll", z), window.removeEventListener("resize", z);
+  };
+}, P = (i) => {
+  _ = i || null, B(), document.addEventListener("click", (t) => {
+    const e = t.target;
+    if (e.tagName === "IMG" || e.tagName === "VIDEO") {
+      const o = e;
+      let r = !1;
+      if (_ ? r = _.contains(o) : r = !!o.closest('[contenteditable="true"]'), r) {
+        t.preventDefault(), t.stopPropagation(), p = o, p.style.display = "block", H(o), q();
+        return;
+      }
+    }
+    if (!e.closest(".btn-link, .btn-resize, .btn-remove") && s && !e.closest("button")) {
+      if (s._cleanup && s._cleanup(), s.remove(), s = null, p && p.parentElement) {
+        const o = p.parentElement;
+        o._originalPosition !== void 0 && (o.style.position = o._originalPosition, delete o._originalPosition);
+      }
+      p = null, q();
+    }
+  }), R.forEach((t) => {
+    t.addEventListener("mousedown", (e) => {
+      if (!p) return;
+      e.preventDefault(), e.stopPropagation(), M = !0, T = t.getAttribute("data-position"), I = e.clientX, j = e.clientY;
+      const o = p.getBoundingClientRect();
+      $ = o.width, S = o.height, D = $ / S, document.body.style.userSelect = "none", document.body.style.cursor = `${T}-resize`;
+    });
+  }), document.addEventListener("mousemove", (t) => {
+    if (!M || !p || !T) return;
+    const e = t.clientX - I, o = t.clientY - j;
+    let r = $, l = S;
+    switch (T) {
+      case "se":
+        r = $ + e, l = S + o;
+        break;
+      case "sw":
+        r = $ - e, l = S + o;
+        break;
+      case "ne":
+        r = $ + e, l = S - o;
+        break;
+      case "nw":
+        r = $ - e, l = S - o;
+        break;
+    }
+    Math.abs(e) > Math.abs(o) ? l = r / D : r = l * D, r = Math.max(50, r), l = Math.max(50, l), p.style.width = `${r}px`, p.style.height = `${l}px`, p.setAttribute("width", String(Math.round(r))), p.setAttribute("height", String(Math.round(l))), q(), z();
+  }), document.addEventListener("mouseup", () => {
+    M && (M = !1, T = null, document.body.style.userSelect = "", document.body.style.cursor = "");
+  }), window.addEventListener("scroll", q), window.addEventListener("resize", q);
+};
+typeof window != "undefined" && !window.__mediaManagerInitialized && (window.__mediaManagerInitialized = !0, P());
+const F = () => ({
+  name: "image",
+  initialize: (i) => {
+    const t = i == null ? void 0 : i.editorElement;
+    P(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: () => (V("image"), !0),
+    insertVideo: () => (V("video"), !0)
+  },
+  keymap: {
+    "Mod-Shift-i": "insertImage"
+  }
+});
+export {
+  F as MediaManagerPlugin
+};
+//# sourceMappingURL=MediaManagerPlugin.native-DaYFDzNM.mjs.map