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
