let a = null, v = null, y = null, d = "#ffff00";
const B = [
  "#000000",
  "#ffffff",
  "#808080",
  "#ff0000",
  "#00ff00",
  "#0000ff",
  "#ffff00",
  "#ff00ff",
  "#00ffff",
  "#ffa500",
  "#800080",
  "#ffc0cb"
];
function R() {
  if (document.getElementById("rte-bg-color-picker-styles"))
    return;
  const e = document.createElement("style");
  e.id = "rte-bg-color-picker-styles", e.textContent = `
    /* Background Color Picker Container */
    .rte-bg-color-picker {
      position: absolute;
      background: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding: 16px;
      z-index: 10000;
      width: 220px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Preview Section */
    .rte-bg-color-preview {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .rte-bg-color-preview-label {
      font-weight: 600;
      color: #333;
      font-size: 13px;
    }

    .rte-bg-color-preview-box {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 3px;
      background: #f5f5f5;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }

    .rte-bg-color-preview-swatch {
      width: 24px;
      height: 24px;
      border: 2px solid #ddd;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .rte-bg-color-preview-hex {
      font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
      font-size: 14px;
      font-weight: 600;
      color: #555;
      user-select: all;
    }

    /* Preset Colors Section */
    .rte-bg-color-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .rte-bg-color-section-label {
      font-weight: 600;
      color: #333;
      font-size: 13px;
    }

    .rte-bg-color-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      max-width: 180px;
    }

    .rte-bg-color-swatch {
      width: 100%;
      aspect-ratio: 1;
      border: 1px solid #e0e0e0;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s ease;
      padding: 0;
      background: none;
      position: relative;
      min-height: 20px;
    }

    .rte-bg-color-swatch:hover {
      border-color: #ccc;
      transform: scale(1.05);
    }

    .rte-bg-color-swatch.selected {
      border-color: #1976d2;
      border-width: 2px;
      transform: scale(1.02);
    }

    .rte-bg-color-swatch.selected::after {
      content: '✓';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-weight: bold;
      font-size: 12px;
      text-shadow: 0 0 2px rgba(0,0,0,0.5);
    }

    /* Custom Color Section */
    .rte-bg-color-custom {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .rte-bg-color-input {
      width: 50px;
      height: 26px;
      border: 2px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      padding: 2px;
      background: white;
    }

    .rte-bg-color-input:hover {
      border-color: #999;
    }

    .rte-bg-color-text-input {
      flex: 1;
      height: 24px;
      border: 2px solid #ddd;
      border-radius: 4px;
      padding: 0 12px;
      width: 60px;
      font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
      font-size: 14px;
      transition: border-color 0.2s ease;
    }

    .rte-bg-color-text-input:focus {
      outline: none;
      border-color: #0066cc;
    }

    .rte-bg-color-text-input::placeholder {
      color: #aaa;
    }

    /* Action Buttons */
    .rte-bg-color-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding-top: 8px;
      border-top: 1px solid #e0e0e0;
    }

    .rte-bg-color-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .rte-bg-color-btn-cancel {
      background: #f5f5f5;
      color: #666;
    }

    .rte-bg-color-btn-cancel:hover {
      background: #e0e0e0;
    }

    .rte-bg-color-btn-apply {
      background: #0066cc;
      color: white;
    }

    .rte-bg-color-btn-apply:hover {
      background: #0052a3;
    }

    .rte-bg-color-btn:active {
      transform: scale(0.98);
    }
  `, document.head.appendChild(e);
}
function A() {
  const e = document.createElement("div");
  e.className = "rte-bg-color-picker";
  const r = document.createElement("div");
  r.className = "rte-bg-color-preview";
  const o = document.createElement("div");
  o.className = "rte-bg-color-preview-label", o.textContent = "Current Color";
  const l = document.createElement("div");
  l.className = "rte-bg-color-preview-box";
  const c = document.createElement("div");
  c.className = "rte-bg-color-preview-swatch", c.id = "rte-bg-color-preview-swatch";
  const t = document.createElement("span");
  t.className = "rte-bg-color-preview-hex", t.id = "rte-bg-color-preview-hex", l.appendChild(c), l.appendChild(t), r.appendChild(o), r.appendChild(l);
  const n = document.createElement("div");
  n.className = "rte-bg-color-section";
  const i = document.createElement("div");
  i.className = "rte-bg-color-section-label", i.textContent = "Preset Colors";
  const g = document.createElement("div");
  g.className = "rte-bg-color-grid", g.id = "rte-bg-color-grid", B.forEach((E) => {
    const f = document.createElement("button");
    f.type = "button", f.className = "rte-bg-color-swatch", f.style.backgroundColor = E, f.dataset.color = E, f.title = E, g.appendChild(f);
  }), n.appendChild(i), n.appendChild(g);
  const p = document.createElement("div");
  p.className = "rte-bg-color-section";
  const s = document.createElement("div");
  s.className = "rte-bg-color-section-label", s.textContent = "Custom Color";
  const C = document.createElement("div");
  C.className = "rte-bg-color-custom";
  const b = document.createElement("input");
  b.type = "color", b.className = "rte-bg-color-input", b.id = "rte-bg-color-input", b.value = d;
  const u = document.createElement("input");
  u.type = "text", u.className = "rte-bg-color-text-input", u.id = "rte-bg-color-text-input", u.placeholder = "#FFFF00", u.value = d.toUpperCase(), u.maxLength = 7, C.appendChild(b), C.appendChild(u), p.appendChild(s), p.appendChild(C);
  const k = document.createElement("div");
  k.className = "rte-bg-color-actions";
  const m = document.createElement("button");
  m.type = "button", m.className = "rte-bg-color-btn rte-bg-color-btn-cancel", m.textContent = "Cancel", m.id = "rte-bg-color-cancel";
  const h = document.createElement("button");
  return h.type = "button", h.className = "rte-bg-color-btn rte-bg-color-btn-apply", h.textContent = "Apply", h.id = "rte-bg-color-apply", k.appendChild(m), k.appendChild(h), e.appendChild(r), e.appendChild(n), e.appendChild(p), e;
}
function L() {
  if (!a) return;
  const e = a.querySelector("#rte-bg-color-grid");
  e && e.addEventListener("click", (c) => {
    const t = c.target;
    if (t.classList.contains("rte-bg-color-swatch")) {
      const n = t.dataset.color;
      n && (d = n, w(n), x());
    }
  });
  const r = a.querySelector("#rte-bg-color-input");
  r && (r.addEventListener("change", (c) => {
    const t = c.target.value.toUpperCase();
    d = t, w(t), x();
  }), r.addEventListener("input", (c) => {
    d = c.target.value.toUpperCase(), S(), N();
  }));
  const o = a.querySelector("#rte-bg-color-text-input");
  o && (o.addEventListener("change", (c) => {
    let t = c.target.value.trim();
    t && !t.startsWith("#") && (t = "#" + t), /^#[0-9A-F]{6}$/i.test(t) && (d = t.toUpperCase(), w(d), x());
  }), o.addEventListener("input", (c) => {
    let t = c.target.value.trim();
    t && !t.startsWith("#") && (t = "#" + t, o.value = t), /^#[0-9A-F]{6}$/i.test(t) && (d = t.toUpperCase(), S(), N());
  }));
  const l = (c) => {
    if (a && v) {
      const t = c.target;
      !a.contains(t) && !v.contains(t) && x();
    }
  };
  setTimeout(() => {
    document.addEventListener("click", l);
  }, 100), a._clickOutsideHandler = l;
}
function S() {
  if (!a) return;
  const e = a.querySelector("#rte-bg-color-preview-swatch"), r = a.querySelector("#rte-bg-color-preview-hex"), o = a.querySelector("#rte-bg-color-input"), l = a.querySelector("#rte-bg-color-text-input");
  e && (e.style.backgroundColor = d), r && (r.textContent = d.toUpperCase()), o && (o.value = d), l && (l.value = d.toUpperCase());
}
function N() {
  if (!a) return;
  a.querySelectorAll(".rte-bg-color-swatch").forEach((r) => {
    const o = r.dataset.color;
    (o == null ? void 0 : o.toUpperCase()) === d.toUpperCase() ? r.classList.add("selected") : r.classList.remove("selected");
  });
}
function P() {
  try {
    const e = window.getSelection();
    if (!e || e.rangeCount === 0)
      return "#ffff00";
    const o = e.getRangeAt(0).commonAncestorContainer, l = o.nodeType === 1 ? o : o.parentElement;
    if (l) {
      const c = l.closest('[style*="background-color"]');
      if (c) {
        const t = c.style.backgroundColor;
        if (t)
          return T(t);
      }
    }
    return "#ffff00";
  } catch (e) {
    return "#ffff00";
  }
}
function T(e) {
  if (e.startsWith("#"))
    return e.toUpperCase();
  const r = e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
  if (r) {
    const o = parseInt(r[1]), l = parseInt(r[2]), c = parseInt(r[3]);
    return "#" + [o, l, c].map((t) => {
      const n = t.toString(16);
      return n.length === 1 ? "0" + n : n;
    }).join("").toUpperCase();
  }
  return "#ffff00";
}
function w(e) {
  try {
    if (y) {
      const s = window.getSelection();
      s && (s.removeAllRanges(), s.addRange(y.cloneRange()));
    }
    const r = window.getSelection();
    if (!r || r.rangeCount === 0 || r.isCollapsed)
      return console.warn("[BackgroundColor] No valid selection"), !1;
    const o = r.getRangeAt(0);
    if (o.collapsed)
      return console.warn("[BackgroundColor] Range is collapsed"), !1;
    const l = o.startContainer.nodeType === Node.TEXT_NODE ? o.startContainer.parentElement : o.startContainer, c = o.endContainer.nodeType === Node.TEXT_NODE ? o.endContainer.parentElement : o.endContainer;
    let t = null, n = l;
    for (; n && n !== document.body; ) {
      if (n.classList.contains("rte-bg-color")) {
        const s = document.createRange();
        if (s.selectNodeContents(n), s.compareBoundaryPoints(Range.START_TO_START, o) <= 0 && s.compareBoundaryPoints(Range.END_TO_END, o) >= 0) {
          t = n;
          break;
        }
      }
      n = n.parentElement;
    }
    if (t) {
      t.style.backgroundColor = e;
      const s = t.closest('[contenteditable="true"]') || document.querySelector('[contenteditable="true"]');
      return s && s.dispatchEvent(new Event("input", { bubbles: !0 })), console.log("[BackgroundColor] Updated existing span with color:", e), !0;
    }
    const i = document.createElement("span");
    i.style.backgroundColor = e, i.className = "rte-bg-color";
    const g = o.extractContents();
    i.appendChild(g), o.insertNode(i), o.setStartAfter(i), o.setEndAfter(i), r.removeAllRanges(), r.addRange(o);
    const p = i.closest('[contenteditable="true"]') || document.querySelector('[contenteditable="true"]');
    return p && p.dispatchEvent(new Event("input", { bubbles: !0 })), console.log("[BackgroundColor] Applied color:", e), !0;
  } catch (r) {
    return console.error("[BackgroundColor] Failed to apply background color:", r), !1;
  }
}
function x() {
  if (a) {
    const e = a._clickOutsideHandler;
    e && document.removeEventListener("click", e), a.remove(), a = null;
  }
  v = null, y = null;
}
function U(e, r) {
  const o = e.getBoundingClientRect(), l = 450, c = 280;
  let t = o.bottom + 5, n = o.left;
  if (n + c > window.innerWidth && (n = window.innerWidth - c - 10), t + l > window.innerHeight) {
    const i = o.top - l - 5;
    i < 0 ? t = window.scrollY + 10 : t = i + window.scrollY;
  } else
    t = t + window.scrollY;
  n < 0 && (n = 10), r.style.top = `${t}px`, r.style.left = `${n}px`;
}
function M() {
  if (R(), a)
    return x(), !0;
  const e = document.querySelector('[data-command="openBackgroundColorPicker"]');
  if (!e)
    return !1;
  const r = window.getSelection();
  return !r || r.isCollapsed ? (alert("Please select text to apply background color"), !1) : (r.rangeCount > 0 && (y = r.getRangeAt(0).cloneRange()), d = P(), a = A(), document.body.appendChild(a), v = e, U(e, a), S(), N(), L(), !0);
}
const q = () => ({
  name: "backgroundColor",
  marks: {
    backgroundColor: {
      attrs: {
        color: { default: "#ffffff" }
      },
      parseDOM: [
        {
          tag: 'span[style*="background-color"]',
          getAttrs: (e) => {
            const l = (e.getAttribute("style") || "").match(/background-color:\s*([^;]+)/);
            return l ? { color: l[1] } : null;
          }
        },
        {
          tag: "mark",
          getAttrs: (e) => ({ color: e.style.backgroundColor || "#ffff00" })
        }
      ],
      toDOM: (e) => [
        "span",
        {
          style: `background-color: ${e.attrs.color || "#ffffff"}`,
          class: "rte-bg-color"
        },
        0
      ]
    }
  },
  toolbar: [
    {
      label: "Background Color",
      command: "openBackgroundColorPicker",
      icon: '<svg width="24" height="24" focusable="false"><g fill-rule="evenodd"><path class="tox-icon-highlight-bg-color__color" d="M3 18h18v3H3z" fill="#000000"></path><path fill-rule="nonzero" d="M7.7 16.7H3l3.3-3.3-.7-.8L10.2 8l4 4.1-4 4.2c-.2.2-.6.2-.8 0l-.6-.7-1.1 1.1zm5-7.5L11 7.4l3-2.9a2 2 0 0 1 2.6 0L18 6c.7.7.7 2 0 2.7l-2.9 2.9-1.8-1.8-.5-.6"></path></g></svg>',
      shortcut: "Mod-Shift-h"
    }
  ],
  commands: {
    openBackgroundColorPicker: () => M(),
    setBackgroundColor: (e) => e ? w(e) : !1
  },
  keymap: {
    "Mod-Shift-h": "openBackgroundColorPicker"
  }
});
export {
  q as BackgroundColorPlugin
};
//# sourceMappingURL=BackgroundColorPlugin.native-Dip5uqTg.mjs.map
