rich-html-editor 0.2.1

package/dist/index.mjs

@@ -0,0 +1,1439 @@
+import {
+  ACTIVE_OUTLINE,
+  BUTTON_ACTIVE_BG,
+  BUTTON_BG,
+  BUTTON_BORDER,
+  BUTTON_COLOR,
+  CLASS_ACTIVE,
+  CLASS_EDITABLE,
+  FONT_OPTIONS,
+  FORMAT_OPTIONS,
+  HOVER_OUTLINE,
+  INFO_COLOR,
+  LABEL_ALIGN_CENTER,
+  LABEL_ALIGN_LEFT,
+  LABEL_ALIGN_RIGHT,
+  LABEL_BOLD,
+  LABEL_ITALIC,
+  LABEL_LINK,
+  LABEL_REDO,
+  LABEL_STRIKETHROUGH,
+  LABEL_UNDERLINE,
+  LABEL_UNDO,
+  SIZE_OPTIONS,
+  STYLE_ID,
+  TOOLBAR_BG,
+  TOOLBAR_BORDER,
+  TOOLBAR_ID,
+  _getCurrentEditable,
+  _getDoc,
+  _getRedoStack,
+  _getUndoStack,
+  _setCurrentEditable,
+  _setDoc,
+  _setRedoStack,
+  _setUndoStack,
+  editorEventEmitter,
+  getEditorEventEmitter,
+  pushStandaloneSnapshot,
+  sanitizeHtml
+} from "./chunk-ZDGUOGND.mjs";
+
+// src/dom/styles.ts
+function injectStyles(doc) {
+  const styleId = STYLE_ID;
+  let styleEl = doc.getElementById(styleId);
+  const css = `
+.${CLASS_EDITABLE}{outline:2px dashed ${HOVER_OUTLINE};cursor:text}
+.${CLASS_ACTIVE}{outline:2px solid ${ACTIVE_OUTLINE};cursor:text}
+#${TOOLBAR_ID}{
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: ${TOOLBAR_BG};
+  border-bottom: 1px solid ${TOOLBAR_BORDER};
+  font-family: inherit;
+  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
+  backdrop-filter: blur(6px);
+  /* Allow toolbar items to wrap onto multiple lines on narrow screens */
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+#${TOOLBAR_ID} button{
+  padding: 6px 8px;
+  border: 1px solid ${BUTTON_BORDER};
+  background: ${BUTTON_BG};
+  color: ${BUTTON_COLOR};
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
+  outline: none;
+  margin-right: 2px;
+}
+#${TOOLBAR_ID} button[aria-pressed="true"]{
+  background: ${BUTTON_ACTIVE_BG};
+  font-weight: 600;
+  box-shadow: 0 6px 12px rgba(99,102,241,0.12);
+}
+#${TOOLBAR_ID} button:hover:not(:disabled){
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(2,6,23,0.08);
+}
+#${TOOLBAR_ID} select{
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 1px solid ${BUTTON_BORDER};
+  background: #fff;
+  font-family: inherit;
+}
+#${TOOLBAR_ID} input[type="color"]{
+  border-radius: 8px;
+  border: 1px solid ${BUTTON_BORDER};
+  background: #fff;
+  font-family: inherit;
+}
+#${TOOLBAR_ID} .color-input-label{
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+/* Labeled color inputs (e.g. "Text Color <input type=color>") */
+#${TOOLBAR_ID} .color-label{
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+#${TOOLBAR_ID} .color-input-label .color-icon{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+#${TOOLBAR_ID} .text-color-icon{
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-bottom: 2px;
+  border-bottom: 3px solid currentColor;
+  transform-origin: center;
+}
+#${TOOLBAR_ID} .highlight-icon{
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
+#${TOOLBAR_ID} .color-icon svg{
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+/* Text color wrapper: A with a small swatch on the right */
+#${TOOLBAR_ID} .text-color-wrapper{
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+#${TOOLBAR_ID} .text-color-wrapper .text-A{
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+}
+#${TOOLBAR_ID} .text-color-wrapper .color-swatch{
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  border: 1px solid rgba(0,0,0,0.12);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
+  background: currentColor;
+}
+
+/* Highlight wrapper: small colored bar under/behind the A to mimic highlighter */
+#${TOOLBAR_ID} .highlight-wrapper{
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+}
+#${TOOLBAR_ID} .highlight-wrapper .highlight-bar{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 2px;
+  height: 8px;
+  border-radius: 3px;
+  background: #ffeb3b; /* default yellow */
+  z-index: 0;
+}
+#${TOOLBAR_ID} .highlight-wrapper .text-A{
+  position: relative;
+  z-index: 1;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 4px;
+}
+#${TOOLBAR_ID} span{
+  color: ${INFO_COLOR};
+  font-size: 90%;
+}
+
+/* Grouping and separators */
+#${TOOLBAR_ID} .toolbar-group{
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+#${TOOLBAR_ID} .toolbar-group{
+  /* groups may wrap internally to avoid overflow on narrow screens */
+  flex-wrap: wrap;
+}
+/* Overflow button + menu styling */
+#${TOOLBAR_ID} .toolbar-overflow-btn{
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 1px solid ${BUTTON_BORDER};
+  background: ${BUTTON_BG};
+  color: ${BUTTON_COLOR};
+  font-weight: 600;
+}
+#${TOOLBAR_ID} .toolbar-overflow-menu{
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 12px;
+  min-width: 160px;
+  background: #fff;
+  border: 1px solid rgba(15,23,42,0.06);
+  border-radius: 8px;
+  padding: 8px;
+  box-shadow: 0 12px 40px rgba(2,6,23,0.12);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  z-index: 10000;
+}
+#${TOOLBAR_ID} .toolbar-overflow-menu[hidden]{
+  display: none;
+}
+#${TOOLBAR_ID} .toolbar-sep{
+  width: 1px;
+  height: 28px;
+  background: rgba(15,23,42,0.06);
+  margin: 0 8px;
+  border-radius: 1px;
+}
+#${TOOLBAR_ID} .toolbar-spacer{
+  flex: 1 1 auto;
+}
+#${TOOLBAR_ID} button svg{
+  width: 16px;
+  height: 16px;
+  display: block;
+  /* Default icon appearance */
+  fill: none;
+}
+
+/* Active/pressed: switch to filled appearance */
+#${TOOLBAR_ID} button[aria-pressed="true"] svg{
+  fill: currentColor;
+}
+
+/* Focus and accessibility */
+#${TOOLBAR_ID} button:focus{
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
+}
+
+/* Disabled state */
+#${TOOLBAR_ID} button:disabled{
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+/* Responsive tweaks: reduce spacing and allow horizontal scroll on very small screens */
+@media (max-width: 720px){
+  #${TOOLBAR_ID}{
+    padding: 6px 8px;
+    gap: 6px;
+  }
+  #${TOOLBAR_ID} button,
+  #${TOOLBAR_ID} select,
+  #${TOOLBAR_ID} input[type="color"]{
+    padding: 4px 6px;
+    border-radius: 6px;
+  }
+  /* Hide visual separators to save horizontal space */
+  #${TOOLBAR_ID} .toolbar-sep{
+    display: none;
+  }
+  /* Collapse labeled color text visually but preserve accessibility on the input */
+  #${TOOLBAR_ID} .color-label{
+    font-size: 0;
+  }
+  #${TOOLBAR_ID} .color-label input{
+    font-size: initial;
+  }
+}
+@media (max-width: 420px){
+  /* On very small screens prefer a single-line scrollable toolbar */
+  #${TOOLBAR_ID}{
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  #${TOOLBAR_ID} .toolbar-group{
+    flex: 0 0 auto;
+  }
+  #${TOOLBAR_ID} button{ margin-right: 6px; }
+  /* Show overflow button and hide the groups marked for collapse */
+  #${TOOLBAR_ID} .toolbar-overflow-btn{
+    display: inline-flex;
+  }
+  #${TOOLBAR_ID} .collapse-on-small{
+    display: none;
+  }
+}
+`;
+  if (!styleEl) {
+    styleEl = doc.createElement("style");
+    styleEl.id = styleId;
+    doc.head.appendChild(styleEl);
+  }
+  styleEl.textContent = css;
+}
+
+// src/toolbar/toolbar.ts
+function injectToolbar(doc, options) {
+  const existing = doc.getElementById(TOOLBAR_ID);
+  if (existing) existing.remove();
+  const toolbar = doc.createElement("div");
+  toolbar.id = TOOLBAR_ID;
+  toolbar.setAttribute("role", "toolbar");
+  toolbar.setAttribute("aria-label", "Rich text editor toolbar");
+  function makeButton(label, title, command, value, isActive, disabled) {
+    const btn = doc.createElement("button");
+    btn.type = "button";
+    if (label && label.trim().startsWith("<")) {
+      btn.innerHTML = label;
+    } else {
+      btn.textContent = label;
+    }
+    btn.title = title;
+    btn.setAttribute("aria-label", title);
+    if (typeof isActive !== "undefined")
+      btn.setAttribute("aria-pressed", String(!!isActive));
+    btn.tabIndex = 0;
+    if (disabled) btn.disabled = true;
+    btn.onclick = () => options.onCommand(command, value);
+    btn.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        btn.click();
+      }
+    });
+    return btn;
+  }
+  function makeSelect(title, command, optionsList, initialValue) {
+    const select = doc.createElement("select");
+    select.title = title;
+    select.setAttribute("aria-label", title);
+    select.appendChild(new Option(title, "", true, true));
+    for (const opt of optionsList) {
+      select.appendChild(new Option(opt.label, opt.value));
+    }
+    try {
+      if (initialValue) select.value = initialValue;
+    } catch (e) {
+    }
+    select.onchange = (e) => {
+      const val = e.target.value;
+      options.onCommand(command, val);
+      select.selectedIndex = 0;
+    };
+    return select;
+  }
+  function makeColorInput(title, command, initialColor) {
+    const input = doc.createElement("input");
+    input.type = "color";
+    input.className = "toolbar-color-input";
+    const wrapper = doc.createElement("label");
+    wrapper.className = "color-label";
+    wrapper.appendChild(doc.createTextNode(title + " "));
+    wrapper.appendChild(input);
+    let savedRange = null;
+    input.addEventListener("pointerdown", () => {
+      const s = doc.getSelection();
+      if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange();
+    });
+    input.onchange = (e) => {
+      try {
+        const s = doc.getSelection();
+        if (savedRange && s) {
+          s.removeAllRanges();
+          s.addRange(savedRange);
+        }
+      } catch (err) {
+      }
+      options.onCommand(command, e.target.value);
+      savedRange = null;
+    };
+    function rgbToHex(input2) {
+      if (!input2) return null;
+      const v = input2.trim();
+      if (v.startsWith("#")) {
+        if (v.length === 4) {
+          return ("#" + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]).toLowerCase();
+        }
+        return v.toLowerCase();
+      }
+      const rgbMatch = v.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+      if (rgbMatch) {
+        const r = Number(rgbMatch[1]);
+        const g = Number(rgbMatch[2]);
+        const b = Number(rgbMatch[3]);
+        const hex = "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("").toLowerCase();
+        return hex;
+      }
+      return null;
+    }
+    const setColor = (val) => {
+      if (!val) return;
+      const hex = rgbToHex(val) || val;
+      try {
+        if (hex && hex.startsWith("#") && input.value !== hex) {
+          input.value = hex;
+        }
+      } catch (e) {
+      }
+    };
+    if (initialColor) setColor(initialColor);
+    input.addEventListener("input", (e) => {
+      const val = e.target.value;
+      setColor(val);
+    });
+    input.title = title;
+    input.setAttribute("aria-label", title);
+    return wrapper;
+  }
+  const format = options.getFormatState();
+  function makeGroup() {
+    const g = doc.createElement("div");
+    g.className = "toolbar-group";
+    return g;
+  }
+  function makeSep() {
+    const s = doc.createElement("div");
+    s.className = "toolbar-sep";
+    return s;
+  }
+  const undoBtn = makeButton(
+    LABEL_UNDO,
+    "Undo",
+    "undo",
+    void 0,
+    false,
+    !options.canUndo()
+  );
+  undoBtn.onclick = () => options.onUndo();
+  const redoBtn = makeButton(
+    LABEL_REDO,
+    "Redo",
+    "redo",
+    void 0,
+    false,
+    !options.canRedo()
+  );
+  redoBtn.onclick = () => options.onRedo();
+  const grp1 = makeGroup();
+  grp1.appendChild(undoBtn);
+  grp1.appendChild(redoBtn);
+  toolbar.appendChild(grp1);
+  toolbar.appendChild(makeSep());
+  const grp2 = makeGroup();
+  grp2.className = "toolbar-group collapse-on-small";
+  grp2.appendChild(
+    makeSelect(
+      "Format",
+      "formatBlock",
+      FORMAT_OPTIONS,
+      format.formatBlock
+    )
+  );
+  grp2.appendChild(
+    makeSelect("Font", "fontName", FONT_OPTIONS, format.fontName)
+  );
+  grp2.appendChild(
+    makeSelect("Size", "fontSize", SIZE_OPTIONS, format.fontSize)
+  );
+  toolbar.appendChild(grp2);
+  toolbar.appendChild(makeSep());
+  const grp3 = makeGroup();
+  grp3.appendChild(
+    makeButton(LABEL_BOLD, "Bold", "bold", void 0, format.bold)
+  );
+  grp3.appendChild(
+    makeButton(LABEL_ITALIC, "Italic", "italic", void 0, format.italic)
+  );
+  grp3.appendChild(
+    makeButton(
+      LABEL_UNDERLINE,
+      "Underline",
+      "underline",
+      void 0,
+      format.underline
+    )
+  );
+  grp3.appendChild(makeButton(LABEL_STRIKETHROUGH, "Strikethrough", "strike"));
+  toolbar.appendChild(grp3);
+  toolbar.appendChild(makeSep());
+  const grp4 = makeGroup();
+  grp4.appendChild(makeButton(LABEL_ALIGN_LEFT, "Align left", "align", "left"));
+  grp4.appendChild(
+    makeButton(LABEL_ALIGN_CENTER, "Align center", "align", "center")
+  );
+  grp4.appendChild(
+    makeButton(LABEL_ALIGN_RIGHT, "Align right", "align", "right")
+  );
+  toolbar.appendChild(grp4);
+  toolbar.appendChild(makeSep());
+  const grp5 = makeGroup();
+  grp5.className = "toolbar-group collapse-on-small";
+  grp5.appendChild(
+    makeColorInput("Text color", "foreColor", format.foreColor)
+  );
+  grp5.appendChild(
+    makeColorInput(
+      "Highlight color",
+      "hiliteColor",
+      format.hiliteColor
+    )
+  );
+  toolbar.appendChild(grp5);
+  toolbar.appendChild(makeSep());
+  const grp6 = makeGroup();
+  grp6.className = "toolbar-group collapse-on-small";
+  grp6.appendChild(makeButton(LABEL_LINK, "Insert link", "link"));
+  toolbar.appendChild(grp6);
+  const overflowBtn = doc.createElement("button");
+  overflowBtn.type = "button";
+  overflowBtn.className = "toolbar-overflow-btn";
+  overflowBtn.title = "More";
+  overflowBtn.setAttribute("aria-label", "More toolbar actions");
+  overflowBtn.setAttribute("aria-haspopup", "true");
+  overflowBtn.setAttribute("aria-expanded", "false");
+  overflowBtn.tabIndex = 0;
+  overflowBtn.innerHTML = "\u22EF";
+  const overflowMenu = doc.createElement("div");
+  overflowMenu.className = "toolbar-overflow-menu";
+  overflowMenu.setAttribute("role", "menu");
+  overflowMenu.hidden = true;
+  function openOverflow() {
+    overflowMenu.hidden = false;
+    overflowBtn.setAttribute("aria-expanded", "true");
+    const first = overflowMenu.querySelector(
+      "button, select, input"
+    );
+    first == null ? void 0 : first.focus();
+  }
+  function closeOverflow() {
+    overflowMenu.hidden = true;
+    overflowBtn.setAttribute("aria-expanded", "false");
+    overflowBtn.focus();
+  }
+  overflowBtn.addEventListener("click", (e) => {
+    if (overflowMenu.hidden) openOverflow();
+    else closeOverflow();
+  });
+  overflowBtn.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (overflowMenu.hidden) openOverflow();
+      else closeOverflow();
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (overflowMenu.hidden) openOverflow();
+    }
+  });
+  overflowMenu.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeOverflow();
+    }
+  });
+  doc.addEventListener("pointerdown", (ev) => {
+    if (!overflowMenu.hidden && !overflowMenu.contains(ev.target) && ev.target !== overflowBtn) {
+      closeOverflow();
+    }
+  });
+  overflowMenu.appendChild(
+    makeSelect(
+      "Format",
+      "formatBlock",
+      FORMAT_OPTIONS,
+      format.formatBlock
+    )
+  );
+  overflowMenu.appendChild(
+    makeSelect("Font", "fontName", FONT_OPTIONS, format.fontName)
+  );
+  overflowMenu.appendChild(
+    makeSelect("Size", "fontSize", SIZE_OPTIONS, format.fontSize)
+  );
+  overflowMenu.appendChild(
+    makeColorInput("Text color", "foreColor", format.foreColor)
+  );
+  overflowMenu.appendChild(
+    makeColorInput(
+      "Highlight color",
+      "hiliteColor",
+      format.hiliteColor
+    )
+  );
+  overflowMenu.appendChild(makeButton(LABEL_LINK, "Insert link", "link"));
+  const overflowWrap = makeGroup();
+  overflowWrap.className = "toolbar-group toolbar-overflow-wrap";
+  overflowWrap.appendChild(overflowBtn);
+  overflowWrap.appendChild(overflowMenu);
+  toolbar.appendChild(overflowWrap);
+  toolbar.addEventListener("keydown", (e) => {
+    const focusable = Array.from(
+      toolbar.querySelectorAll("button, select, input, [tabindex]")
+    ).filter((el) => !el.hasAttribute("disabled"));
+    if (!focusable.length) return;
+    const idx = focusable.indexOf(document.activeElement);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = focusable[Math.min(focusable.length - 1, Math.max(0, idx + 1))];
+      next == null ? void 0 : next.focus();
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prev = focusable[Math.max(0, idx - 1)] || focusable[0];
+      prev == null ? void 0 : prev.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusable[0].focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focusable[focusable.length - 1].focus();
+    }
+  });
+  doc.body.insertBefore(toolbar, doc.body.firstChild);
+}
+
+// src/dom/candidates.ts
+function isEditableCandidate(el) {
+  if (!el) return false;
+  const tag = el.tagName;
+  const DISALLOWED = [
+    "HTML",
+    "HEAD",
+    "BODY",
+    "SCRIPT",
+    "STYLE",
+    "LINK",
+    "META",
+    "NOSCRIPT"
+  ];
+  if (DISALLOWED.includes(tag)) return false;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return false;
+  return true;
+}
+
+// src/dom/format.ts
+function computeFormatState(doc) {
+  var _a, _b;
+  try {
+    const s = doc.getSelection();
+    let el = null;
+    if (s && s.anchorNode)
+      el = s.anchorNode.nodeType === Node.ELEMENT_NODE ? s.anchorNode : s.anchorNode.parentElement;
+    if (!el)
+      return {
+        bold: false,
+        italic: false,
+        underline: false,
+        foreColor: null,
+        hiliteColor: null,
+        fontName: null,
+        fontSize: null,
+        formatBlock: null
+      };
+    const computed = (_a = doc.defaultView) == null ? void 0 : _a.getComputedStyle(el);
+    const bold = !!(el.closest("strong, b") || computed && (computed.fontWeight === "700" || Number(computed.fontWeight) >= 700));
+    const italic = !!(el.closest("em, i") || computed && computed.fontStyle === "italic");
+    const underline = !!(el.closest("u") || computed && (computed.textDecorationLine || "").includes("underline"));
+    const foreColor = ((_b = el.closest("font[color]")) == null ? void 0 : _b.getAttribute(
+      "color"
+    )) || computed && computed.color || null;
+    const mark = el.closest("mark");
+    const hiliteColor = mark && (mark.getAttribute("style") || "") || (computed && computed.backgroundColor && computed.backgroundColor !== "rgba(0, 0, 0, 0)" ? computed.backgroundColor : null);
+    const fontName = computed && computed.fontFamily || null;
+    const fontSize = computed && computed.fontSize || null;
+    let blockEl = el;
+    while (blockEl && blockEl.parentElement) {
+      const tag = blockEl.tagName;
+      if ([
+        "P",
+        "DIV",
+        "SECTION",
+        "ARTICLE",
+        "LI",
+        "TD",
+        "BLOCKQUOTE",
+        "H1",
+        "H2",
+        "H3",
+        "H4",
+        "H5",
+        "H6"
+      ].includes(tag)) {
+        break;
+      }
+      blockEl = blockEl.parentElement;
+    }
+    const formatBlock = blockEl ? blockEl.tagName.toLowerCase() : null;
+    return {
+      bold,
+      italic,
+      underline,
+      foreColor,
+      hiliteColor,
+      fontName,
+      fontSize,
+      formatBlock
+    };
+  } catch (err) {
+    return {
+      bold: false,
+      italic: false,
+      underline: false,
+      foreColor: null,
+      hiliteColor: null,
+      fontName: null,
+      fontSize: null,
+      formatBlock: null
+    };
+  }
+}
+function getElementLabel(el) {
+  if (!el) return null;
+  const id = el.id ? `#${el.id}` : "";
+  const cls = el.className ? `.${String(el.className).split(" ")[0]}` : "";
+  const tag = el.tagName.toLowerCase();
+  return `${tag}${id}${cls}`;
+}
+
+// src/core/sanitizeURL.ts
+function sanitizeURL(url) {
+  if (!url) return "";
+  const trimmed = url.trim();
+  if (!trimmed) return "";
+  if (trimmed.toLowerCase().startsWith("javascript:") || trimmed.toLowerCase().startsWith("data:")) {
+    console.warn("Blocked potentially dangerous URL protocol");
+    return "";
+  }
+  if (!trimmed.startsWith("http") && !trimmed.startsWith("#")) {
+    return "https://" + trimmed;
+  }
+  return trimmed;
+}
+
+// src/core/history.ts
+function handleUndo() {
+  try {
+    const doc = _getDoc();
+    if (!doc) {
+      console.warn(
+        "[rich-html-editor] handleUndo called before initialization"
+      );
+      return;
+    }
+    if (_getUndoStack().length < 2) return;
+    const undoStack = _getUndoStack();
+    const redoStack = _getRedoStack();
+    const current = undoStack.pop();
+    redoStack.push(current);
+    const prev = undoStack[undoStack.length - 1];
+    if (!doc.documentElement) {
+      throw new Error("Document is missing documentElement");
+    }
+    const safe = sanitizeHtml(prev.replace(/^<!doctype html>\n?/i, ""), doc);
+    try {
+      const parser = new DOMParser();
+      const parsed = parser.parseFromString(safe, "text/html");
+      if (parsed && parsed.body && doc.body) {
+        const parsedEls = parsed.body.querySelectorAll("[data-rhe-id]");
+        if (parsedEls && parsedEls.length) {
+          const loadPromises = [];
+          parsedEls.forEach((pe) => {
+            const id = pe.getAttribute("data-rhe-id");
+            if (!id) return;
+            const local = doc.body.querySelector(`[data-rhe-id="${id}"]`);
+            if (!local) return;
+            try {
+              Array.from(local.attributes).forEach((a) => {
+                if (a.name !== "data-rhe-id") local.removeAttribute(a.name);
+              });
+              Array.from(pe.attributes).forEach((a) => {
+                if (a.name !== "data-rhe-id")
+                  local.setAttribute(a.name, a.value);
+              });
+            } catch (err) {
+            }
+            try {
+              local.innerHTML = pe.innerHTML;
+            } catch (err) {
+            }
+            try {
+              const placeholders = pe.querySelectorAll("[data-rhe-script]");
+              placeholders.forEach((ph) => {
+                const encoded = ph.getAttribute("data-rhe-script") || "";
+                let code = "";
+                try {
+                  code = typeof atob !== "undefined" ? decodeURIComponent(escape(atob(encoded))) : decodeURIComponent(encoded);
+                } catch (e) {
+                  try {
+                    code = decodeURIComponent(encoded);
+                  } catch (er) {
+                    code = "";
+                  }
+                }
+                const attrsRaw = ph.getAttribute("data-rhe-script-attrs");
+                let attrs = {};
+                if (attrsRaw) {
+                  try {
+                    attrs = JSON.parse(decodeURIComponent(attrsRaw));
+                  } catch (e) {
+                    attrs = {};
+                  }
+                }
+                const parentId = ph.getAttribute("data-rhe-script-parent");
+                try {
+                  const s = doc.createElement("script");
+                  try {
+                    s.type = "text/javascript";
+                    s.async = false;
+                  } catch (err) {
+                  }
+                  Object.keys(attrs).forEach(
+                    (k) => s.setAttribute(k, attrs[k])
+                  );
+                  if (attrs.src) {
+                    const p = new Promise((resolve) => {
+                      s.addEventListener("load", () => resolve());
+                      s.addEventListener("error", () => resolve());
+                    });
+                    loadPromises.push(p);
+                    s.src = attrs.src;
+                  } else {
+                    s.textContent = code;
+                  }
+                  if (parentId === "head") {
+                    doc.head.appendChild(s);
+                  } else {
+                    const target = doc.body.querySelector(
+                      `[data-rhe-id="${parentId}"]`
+                    );
+                    if (target) target.appendChild(s);
+                    else doc.body.appendChild(s);
+                  }
+                } catch (e) {
+                }
+              });
+            } catch (e) {
+            }
+          });
+          try {
+            if (loadPromises.length) {
+              const waiter = Promise.allSettled ? Promise.allSettled(loadPromises) : Promise.all(
+                loadPromises.map((p) => p.catch(() => void 0))
+              );
+              waiter.then(() => {
+                try {
+                  doc.dispatchEvent(new Event("rhe:scripts-restored"));
+                } catch (e) {
+                }
+              });
+            } else {
+              try {
+                doc.dispatchEvent(new Event("rhe:scripts-restored"));
+              } catch (e) {
+              }
+            }
+          } catch (e) {
+          }
+        } else {
+          doc.body.innerHTML = parsed.body.innerHTML;
+        }
+      } else {
+        doc.documentElement.innerHTML = safe;
+      }
+    } catch (err) {
+      doc.documentElement.innerHTML = safe;
+    }
+    injectStyles(doc);
+    try {
+      doc.dispatchEvent(new Event("selectionchange"));
+    } catch (err) {
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[rich-html-editor] Undo failed:", message);
+  }
+}
+function handleRedo() {
+  try {
+    const doc = _getDoc();
+    if (!doc) {
+      console.warn(
+        "[rich-html-editor] handleRedo called before initialization"
+      );
+      return;
+    }
+    if (!_getRedoStack().length) return;
+    const undoStack = _getUndoStack();
+    const redoStack = _getRedoStack();
+    const next = redoStack.pop();
+    undoStack.push(next);
+    if (!doc.documentElement) {
+      throw new Error("Document is missing documentElement");
+    }
+    const safeNext = sanitizeHtml(
+      next.replace(/^<!doctype html>\n?/i, ""),
+      doc
+    );
+    try {
+      const parser = new DOMParser();
+      const parsed = parser.parseFromString(safeNext, "text/html");
+      if (parsed && parsed.body && doc.body) {
+        const parsedEls = parsed.body.querySelectorAll("[data-rhe-id]");
+        if (parsedEls && parsedEls.length) {
+          const loadPromises = [];
+          parsedEls.forEach((pe) => {
+            const id = pe.getAttribute("data-rhe-id");
+            if (!id) return;
+            const local = doc.body.querySelector(`[data-rhe-id="${id}"]`);
+            if (!local) return;
+            try {
+              Array.from(local.attributes).forEach((a) => {
+                if (a.name !== "data-rhe-id") local.removeAttribute(a.name);
+              });
+              Array.from(pe.attributes).forEach((a) => {
+                if (a.name !== "data-rhe-id")
+                  local.setAttribute(a.name, a.value);
+              });
+            } catch (err) {
+            }
+            try {
+              local.innerHTML = pe.innerHTML;
+            } catch (err) {
+            }
+            try {
+              const placeholders = pe.querySelectorAll("[data-rhe-script]");
+              placeholders.forEach((ph) => {
+                const encoded = ph.getAttribute("data-rhe-script") || "";
+                let code = "";
+                try {
+                  code = typeof atob !== "undefined" ? decodeURIComponent(escape(atob(encoded))) : decodeURIComponent(encoded);
+                } catch (e) {
+                  try {
+                    code = decodeURIComponent(encoded);
+                  } catch (er) {
+                    code = "";
+                  }
+                }
+                const attrsRaw = ph.getAttribute("data-rhe-script-attrs");
+                let attrs = {};
+                if (attrsRaw) {
+                  try {
+                    attrs = JSON.parse(decodeURIComponent(attrsRaw));
+                  } catch (e) {
+                    attrs = {};
+                  }
+                }
+                const parentId = ph.getAttribute("data-rhe-script-parent");
+                try {
+                  const s = doc.createElement("script");
+                  try {
+                    s.type = "text/javascript";
+                    s.async = false;
+                  } catch (err) {
+                  }
+                  Object.keys(attrs).forEach(
+                    (k) => s.setAttribute(k, attrs[k])
+                  );
+                  if (attrs.src) {
+                    const p = new Promise((resolve) => {
+                      s.addEventListener("load", () => resolve());
+                      s.addEventListener("error", () => resolve());
+                    });
+                    loadPromises.push(p);
+                    s.src = attrs.src;
+                  } else {
+                    s.textContent = code;
+                  }
+                  if (parentId === "head") {
+                    doc.head.appendChild(s);
+                  } else {
+                    const target = doc.body.querySelector(
+                      `[data-rhe-id="${parentId}"]`
+                    );
+                    if (target) target.appendChild(s);
+                    else doc.body.appendChild(s);
+                  }
+                } catch (e) {
+                }
+              });
+            } catch (e) {
+            }
+          });
+          try {
+            if (loadPromises.length) {
+              const waiter = Promise.allSettled ? Promise.allSettled(loadPromises) : Promise.all(
+                loadPromises.map((p) => p.catch(() => void 0))
+              );
+              waiter.then(() => {
+                try {
+                  doc.dispatchEvent(new Event("rhe:scripts-restored"));
+                } catch (e) {
+                }
+              });
+            } else {
+              try {
+                doc.dispatchEvent(new Event("rhe:scripts-restored"));
+              } catch (e) {
+              }
+            }
+          } catch (e) {
+          }
+        } else {
+          doc.body.innerHTML = parsed.body.innerHTML;
+        }
+      } else {
+        doc.documentElement.innerHTML = safeNext;
+      }
+    } catch (err) {
+      doc.documentElement.innerHTML = safeNext;
+    }
+    injectStyles(doc);
+    try {
+      doc.dispatchEvent(new Event("selectionchange"));
+    } catch (err) {
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[rich-html-editor] Redo failed:", message);
+  }
+}
+
+// src/core/formatActions.ts
+function handleToolbarCommand(command, value) {
+  try {
+    const doc = _getDoc();
+    if (!doc) {
+      console.warn(
+        "[rich-html-editor] handleToolbarCommand called before initialization"
+      );
+      return;
+    }
+    if (command === "undo") return;
+    if (command === "redo") return;
+    if (command === "link") {
+      const url = window.prompt("Enter URL (https://...):", "https://");
+      if (url) {
+        const sanitized = sanitizeURL(url);
+        if (sanitized) applyStandaloneCommand("link", sanitized);
+      }
+      return;
+    }
+    applyStandaloneCommand(command, value);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[rich-html-editor] Command handler failed:", message);
+  }
+}
+function applyStandaloneCommand(command, value) {
+  try {
+    const doc = _getDoc();
+    if (!doc) {
+      console.warn(
+        "[rich-html-editor] applyStandaloneCommand called before initialization"
+      );
+      return;
+    }
+    if (command === "bold") wrapSelectionWithElement(doc, "strong");
+    else if (command === "italic") wrapSelectionWithElement(doc, "em");
+    else if (command === "underline") wrapSelectionWithElement(doc, "u");
+    else if (command === "strike") wrapSelectionWithElement(doc, "s");
+    else if (command === "fontName")
+      wrapSelectionWithElement(doc, "span", { fontFamily: value });
+    else if (command === "fontSize") {
+      const raw = value || "14";
+      const n = parseInt(raw, 10);
+      const sz = Number.isFinite(n) ? `${n}px` : raw;
+      wrapSelectionWithElement(doc, "span", { fontSize: sz });
+    } else if (command === "link") {
+      const sel = doc.getSelection();
+      if (!sel || !sel.rangeCount) return;
+      const range = sel.getRangeAt(0);
+      const content = range.extractContents();
+      const a = doc.createElement("a");
+      a.href = sanitizeURL(value || "#");
+      a.appendChild(content);
+      range.insertNode(a);
+    } else if (command === "foreColor")
+      wrapSelectionWithElement(doc, "span", { color: value });
+    else if (command === "hiliteColor")
+      wrapSelectionWithElement(doc, "span", { backgroundColor: value });
+    else if (command === "align") {
+      const sel = doc.getSelection();
+      const node = (sel == null ? void 0 : sel.anchorNode) || null;
+      const block = findBlockAncestor(node);
+      if (block) block.style.textAlign = value || "left";
+      else wrapSelectionWithElement(doc, "div", { textAlign: value });
+    } else if (command === "formatBlock") {
+      const sel = doc.getSelection();
+      const node = (sel == null ? void 0 : sel.anchorNode) || null;
+      const block = findBlockAncestor(node);
+      const tag = (value || "p").toLowerCase();
+      if (block && block.parentElement) {
+        const newEl = doc.createElement(tag);
+        newEl.className = block.className || "";
+        while (block.firstChild) newEl.appendChild(block.firstChild);
+        block.parentElement.replaceChild(newEl, block);
+      } else {
+        wrapSelectionWithElement(doc, tag);
+      }
+    }
+    pushStandaloneSnapshot();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[rich-html-editor] Apply command failed:", message);
+  }
+}
+function wrapSelectionWithElement(doc, tagName, style) {
+  const sel = doc.getSelection();
+  if (!sel) return;
+  if (!sel.rangeCount) return;
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) {
+    const el = doc.createElement(tagName);
+    if (style) Object.assign(el.style, style);
+    const zw = doc.createTextNode("\u200B");
+    el.appendChild(zw);
+    range.insertNode(el);
+    const newRange2 = doc.createRange();
+    newRange2.setStart(zw, 1);
+    newRange2.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange2);
+    return;
+  }
+  const content = range.extractContents();
+  const wrapper = doc.createElement(tagName);
+  if (style) Object.assign(wrapper.style, style);
+  wrapper.appendChild(content);
+  range.insertNode(wrapper);
+  sel.removeAllRanges();
+  const newRange = doc.createRange();
+  newRange.selectNodeContents(wrapper);
+  sel.addRange(newRange);
+}
+function findBlockAncestor(node) {
+  let n = node;
+  const BLOCKS = [
+    "P",
+    "DIV",
+    "SECTION",
+    "ARTICLE",
+    "LI",
+    "TD",
+    "BLOCKQUOTE",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6"
+  ];
+  while (n) {
+    if (n.nodeType === Node.ELEMENT_NODE) {
+      const el = n;
+      if (BLOCKS.includes(el.tagName)) return el;
+    }
+    n = n.parentNode;
+  }
+  return null;
+}
+
+// src/dom/handlers.ts
+function attachStandaloneHandlers(doc) {
+  try {
+    const selector = [
+      "p",
+      "div",
+      "section",
+      "article",
+      "header",
+      "footer",
+      "aside",
+      "nav",
+      "span",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "li",
+      "figure",
+      "figcaption",
+      "blockquote",
+      "pre",
+      "code"
+    ].join(",");
+    const candidates = Array.from(
+      doc.querySelectorAll(selector)
+    ).filter((el) => isEditableCandidate(el));
+    candidates.forEach((target) => {
+      if (!target.hasAttribute("data-rhe-id")) {
+        const uid = `rhe-init-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+        try {
+          target.setAttribute("data-rhe-id", uid);
+        } catch (err) {
+        }
+      }
+    });
+  } catch (err) {
+  }
+  doc.addEventListener(
+    "click",
+    (e) => {
+      var _a, _b;
+      const target = e.target;
+      if (!isEditableCandidate(target)) return;
+      if (_getCurrentEditable() && _getCurrentEditable() !== target) {
+        (_a = _getCurrentEditable()) == null ? void 0 : _a.removeAttribute("contenteditable");
+        (_b = _getCurrentEditable()) == null ? void 0 : _b.classList.remove(CLASS_ACTIVE);
+      }
+      if (!target.hasAttribute("data-rhe-id")) {
+        const uid = `rhe-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+        try {
+          target.setAttribute("data-rhe-id", uid);
+        } catch (err) {
+        }
+      }
+      _setCurrentEditable(target);
+      target.classList.add(CLASS_ACTIVE);
+      target.setAttribute("contenteditable", "true");
+      target.focus();
+    },
+    true
+  );
+  doc.addEventListener("selectionchange", () => {
+    injectToolbar(doc, {
+      onCommand: handleToolbarCommand,
+      canUndo: () => _getUndoStack().length > 1,
+      canRedo: () => _getRedoStack().length > 0,
+      onUndo: handleUndo,
+      onRedo: handleRedo,
+      getFormatState: () => computeFormatState(doc),
+      getSelectedElementInfo: () => getElementLabel(_getCurrentEditable())
+    });
+  });
+  doc.addEventListener("input", () => pushStandaloneSnapshot(), true);
+  doc.addEventListener(
+    "keydown",
+    (e) => {
+      const meta = e.ctrlKey || e.metaKey;
+      if (!meta) return;
+      const key = e.key.toLowerCase();
+      if (key === "b") {
+        e.preventDefault();
+        handleToolbarCommand("bold");
+        return;
+      }
+      if (key === "i") {
+        e.preventDefault();
+        handleToolbarCommand("italic");
+        return;
+      }
+      if (key === "u") {
+        e.preventDefault();
+        handleToolbarCommand("underline");
+        return;
+      }
+      if (key === "z") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          handleRedo();
+        } else {
+          handleUndo();
+        }
+        return;
+      }
+      if (key === "y") {
+        e.preventDefault();
+        handleRedo();
+        return;
+      }
+    },
+    true
+  );
+}
+
+// src/core/editor.ts
+function initRichEditor(iframe, config) {
+  try {
+    if (!iframe || !(iframe instanceof HTMLIFrameElement)) {
+      throw new Error("Invalid iframe element provided to initRichEditor");
+    }
+    const doc = iframe.contentDocument;
+    if (!doc) {
+      throw new Error(
+        "Unable to access iframe contentDocument. Ensure iframe src is same-origin."
+      );
+    }
+    _setDoc(doc);
+    injectStyles(doc);
+    _setUndoStack([]);
+    _setRedoStack([]);
+    _setCurrentEditable(null);
+    if (config == null ? void 0 : config.maxStackSize) {
+      import("./state-CZIMHTJ3.mjs").then((m) => m.setMaxStackSize(config.maxStackSize)).catch(() => {
+      });
+    }
+    attachStandaloneHandlers(doc);
+    pushStandaloneSnapshot();
+    injectToolbar(doc, {
+      onCommand: handleToolbarCommand,
+      canUndo: () => _getUndoStack().length > 1,
+      canRedo: () => _getRedoStack().length > 0,
+      onUndo: handleUndo,
+      onRedo: handleRedo,
+      getFormatState: () => computeFormatState(doc),
+      getSelectedElementInfo: () => getElementLabel(_getCurrentEditable())
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[rich-html-editor] Failed to initialize editor:", message);
+    throw error;
+  }
+}
+function getCleanHTML() {
+  try {
+    const doc = _getDoc();
+    if (!doc) {
+      console.warn(
+        "[rich-html-editor] getCleanHTML called before editor initialization"
+      );
+      return "";
+    }
+    if (!doc.documentElement) {
+      throw new Error("Document is missing documentElement");
+    }
+    const clone = doc.documentElement.cloneNode(true);
+    const toolbarNode = clone.querySelector(`#${TOOLBAR_ID}`);
+    if (toolbarNode && toolbarNode.parentNode)
+      toolbarNode.parentNode.removeChild(toolbarNode);
+    const styleNode = clone.querySelector(`#${STYLE_ID}`);
+    if (styleNode && styleNode.parentNode)
+      styleNode.parentNode.removeChild(styleNode);
+    try {
+      const cleanElement = (el) => {
+        try {
+          if (el.hasAttribute("contenteditable"))
+            el.removeAttribute("contenteditable");
+          if (el.hasAttribute("tabindex")) el.removeAttribute("tabindex");
+        } catch (e) {
+        }
+        try {
+          const attrs = Array.from(el.attributes || []);
+          attrs.forEach((a) => {
+            const rawName = a.name;
+            const name = rawName.toLowerCase();
+            if (name.startsWith("on")) {
+              try {
+                el.removeAttribute(rawName);
+              } catch (e) {
+              }
+              return;
+            }
+            if (name === "data-rhe-id" || name.startsWith("data-rhe-") || name === "data-rhe") {
+              try {
+                el.removeAttribute(rawName);
+              } catch (e) {
+              }
+              return;
+            }
+          });
+        } catch (e) {
+        }
+        try {
+          if (el.id) {
+            const id = el.id;
+            if (id === TOOLBAR_ID || id === STYLE_ID || id.startsWith("editor-") || id.startsWith("rhe-")) {
+              el.removeAttribute("id");
+            }
+          }
+        } catch (e) {
+        }
+        try {
+          const cls = Array.from(el.classList || []);
+          cls.forEach((c) => {
+            if (c === CLASS_EDITABLE || c === CLASS_ACTIVE || c.startsWith("editor-") || c.startsWith("rhe-")) {
+              try {
+                el.classList.remove(c);
+              } catch (e) {
+              }
+            }
+          });
+          if (el.hasAttribute("class") && (el.getAttribute("class") || "").trim() === "") {
+            try {
+              el.removeAttribute("class");
+            } catch (e) {
+            }
+          }
+        } catch (e) {
+        }
+        try {
+          const children = Array.from(el.children || []);
+          children.forEach((child) => cleanElement(child));
+        } catch (e) {
+        }
+      };
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        cleanElement(clone);
+      }
+    } catch (e) {
+    }
+    return "<!doctype html>\n" + clone.outerHTML;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[rich-html-editor] Failed to get clean HTML:", message);
+    throw error;
+  }
+}
+export {
+  editorEventEmitter,
+  getCleanHTML,
+  getEditorEventEmitter,
+  initRichEditor
+};
+//# sourceMappingURL=index.mjs.map