@denarolabs/email-template 1.0.5

package/dist/components/ai-email-editor/preview.js

@@ -0,0 +1,728 @@
+export const AI_IMAGE_HANDLE_ID = "ai-email-image-handle";
+/** Visible size of the corner resize control (must match CSS). */
+export const AI_IMAGE_HANDLE_SIZE = 24;
+const MIN_WIDTH = 96;
+const MAX_WIDTH = 640;
+const DRAG_THRESHOLD = 8;
+const TEXT_HOST_SELECTOR = "[data-edit-id],p,td,th,li,blockquote";
+export const AI_IMAGE_EDITOR_STYLES = `
+  img[data-ai-image] { cursor: grab; touch-action: none; }
+  img[data-ai-image].ai-img-selected { cursor: grab; }
+  img[data-ai-image].ai-img-dragging { cursor: grabbing; opacity: 0.25; }
+  img[data-ai-image].ai-img-selected {
+    outline: 2px solid rgb(6, 182, 212);
+    outline-offset: 2px;
+  }
+  .ai-img-drag-ghost {
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    z-index: 9998;
+    opacity: 0.92;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
+    touch-action: none;
+  }
+  #${AI_IMAGE_HANDLE_ID} {
+    position: fixed;
+    width: ${AI_IMAGE_HANDLE_SIZE}px;
+    height: ${AI_IMAGE_HANDLE_SIZE}px;
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.5 3.5L3.5 12.5' stroke='%2306b6d4' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M12.5 3.5H9' stroke='%2306b6d4' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M12.5 3.5V7' stroke='%2306b6d4' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M3.5 12.5H7' stroke='%2306b6d4' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M3.5 12.5V9' stroke='%2306b6d4' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 16px;
+    border: 2px solid rgb(6, 182, 212);
+    border-radius: 4px;
+    cursor: nwse-resize;
+    z-index: 10000;
+    touch-action: none;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
+  }
+  #${AI_IMAGE_HANDLE_ID}:hover {
+    background-color: rgb(6, 182, 212);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.5 3.5L3.5 12.5' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M12.5 3.5H9' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M12.5 3.5V7' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M3.5 12.5H7' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M3.5 12.5V9' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
+  }
+`;
+/** Tag images and ensure they can be resized in the preview. */
+export function prepareImagesForEditing(doc) {
+    for (const img of doc.querySelectorAll("img")) {
+        img.setAttribute("data-ai-image", "true");
+        if (!img.getAttribute("alt"))
+            img.setAttribute("alt", "");
+        img.addEventListener("error", () => {
+            img.remove();
+        }, { once: true });
+    }
+}
+const PLACEHOLDER_IMAGE_SRC = /placeholder|placehold\.co|dummyimage|via\.placeholder|example\.com|yourdomain|your-logo|logo-placeholder|placeimg|fakeimg|lorempixel|picsum\.photos/i;
+function isPlaceholderImage(img) {
+    const src = (img.getAttribute("src") ?? "").trim();
+    if (!src || src === "#")
+        return true;
+    if (PLACEHOLDER_IMAGE_SRC.test(src))
+        return true;
+    const alt = (img.getAttribute("alt") ?? "").toLowerCase();
+    if (alt.includes("logo") &&
+        (!src.startsWith("http") || PLACEHOLDER_IMAGE_SRC.test(src) || src.includes("example"))) {
+        return true;
+    }
+    return false;
+}
+function stripPlaceholderImages(doc) {
+    for (const img of [...doc.querySelectorAll("img")]) {
+        if (isPlaceholderImage(img)) {
+            img.remove();
+        }
+    }
+}
+export function sanitizeEmailHtml(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    stripPlaceholderImages(doc);
+    return serializeHtmlDocument(doc);
+}
+export function stripImageEditorChrome(doc) {
+    doc.getElementById(AI_IMAGE_HANDLE_ID)?.remove();
+    doc.querySelectorAll(".ai-img-drag-ghost").forEach((node) => node.remove());
+    for (const img of doc.querySelectorAll("img[data-ai-image]")) {
+        img.classList.remove("ai-img-selected", "ai-img-dragging");
+        img.removeAttribute("data-ai-image");
+    }
+}
+function parseWidth(img) {
+    const inline = img.style.width;
+    if (inline.endsWith("px"))
+        return Number.parseFloat(inline);
+    const attr = img.getAttribute("width");
+    if (attr)
+        return Number.parseFloat(attr);
+    return img.getBoundingClientRect().width || 280;
+}
+function clampWidth(width) {
+    return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(width)));
+}
+function applyWidth(img, width) {
+    const next = clampWidth(width);
+    img.style.width = `${next}px`;
+    img.style.maxWidth = "100%";
+    img.style.height = "auto";
+    img.setAttribute("width", String(next));
+    img.removeAttribute("height");
+}
+function applyFloatStyles(img, side) {
+    img.style.display = "block";
+    img.style.height = "auto";
+    img.style.maxWidth = side === "none" ? "100%" : "45%";
+    img.style.border = "0";
+    img.style.outline = "none";
+    if (side === "left") {
+        img.style.cssFloat = "left";
+        img.style.margin = "0 16px 12px 0";
+    }
+    else if (side === "right") {
+        img.style.cssFloat = "right";
+        img.style.margin = "0 0 12px 16px";
+    }
+    else {
+        img.style.cssFloat = "none";
+        img.style.margin = "16px auto";
+        img.style.display = "block";
+    }
+}
+function currentFloatSide(img) {
+    const float = img.style.cssFloat || img.style.float;
+    if (float === "right")
+        return "right";
+    if (float === "left")
+        return "left";
+    return "none";
+}
+/** Pick wrap side from where the image was dropped inside its host block. */
+function inferFloatSide(clientX, host) {
+    const rect = host.getBoundingClientRect();
+    if (rect.width <= 0)
+        return "left";
+    const relativeX = (clientX - rect.left) / rect.width;
+    if (relativeX <= 0.38)
+        return "left";
+    if (relativeX >= 0.62)
+        return "right";
+    return "none";
+}
+/** Unwrap centered-only wrapper divs so text can flow around the image. */
+export function unwrapCenteredImage(img) {
+    const parent = img.parentElement;
+    if (!parent || parent.tagName !== "DIV" || parent.childElementCount !== 1)
+        return;
+    const style = (parent.getAttribute("style") ?? "").replace(/\s/g, "").toLowerCase();
+    if (!style.includes("text-align:center"))
+        return;
+    const width = parseWidth(img);
+    applyFloatStyles(img, "left");
+    applyWidth(img, width);
+    parent.replaceWith(img);
+}
+function findDropHost(doc, clientX, clientY, exclude) {
+    const target = doc.elementFromPoint(clientX, clientY);
+    if (!target)
+        return doc.body;
+    if (target.id === AI_IMAGE_HANDLE_ID ||
+        target.classList.contains("ai-img-drag-ghost")) {
+        return exclude.parentElement ?? doc.body;
+    }
+    const host = target.closest(TEXT_HOST_SELECTOR);
+    if (host && host !== exclude)
+        return host;
+    if (exclude.parentElement)
+        return exclude.parentElement;
+    return doc.body;
+}
+function resolveDirectChild(host, node) {
+    if (node === host)
+        return host.firstChild;
+    let current = node;
+    while (current && current.parentNode !== host) {
+        current = current.parentNode;
+    }
+    return current;
+}
+function safeInsertInHost(host, img, before) {
+    if (before && before.parentNode === host) {
+        host.insertBefore(img, before);
+        return;
+    }
+    host.appendChild(img);
+}
+function insertImageInHost(doc, img, host, clientX, clientY, floatSide) {
+    if (floatSide === "left") {
+        host.insertBefore(img, host.firstChild);
+        return;
+    }
+    if (floatSide === "right") {
+        host.appendChild(img);
+        return;
+    }
+    const range = doc.caretRangeFromPoint?.(clientX, clientY);
+    if (range && host.contains(range.startContainer)) {
+        const node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+            const textNode = node;
+            if (range.startOffset > 0 && range.startOffset < textNode.length) {
+                textNode.splitText(range.startOffset);
+            }
+            safeInsertInHost(host, img, resolveDirectChild(host, textNode));
+            return;
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            safeInsertInHost(host, img, resolveDirectChild(host, node));
+            return;
+        }
+    }
+    host.appendChild(img);
+}
+function repositionImageAtPoint(doc, img, clientX, clientY) {
+    const fallbackParent = img.parentElement ?? doc.body;
+    const fallbackNext = img.nextSibling;
+    try {
+        unwrapCenteredImage(img);
+        const width = parseWidth(img);
+        const host = findDropHost(doc, clientX, clientY, img);
+        const floatSide = inferFloatSide(clientX, host);
+        img.remove();
+        applyFloatStyles(img, floatSide);
+        applyWidth(img, width);
+        insertImageInHost(doc, img, host, clientX, clientY, floatSide);
+    }
+    catch {
+        if (!img.isConnected) {
+            if (fallbackNext && fallbackNext.parentNode === fallbackParent) {
+                fallbackParent.insertBefore(img, fallbackNext);
+            }
+            else {
+                fallbackParent.appendChild(img);
+            }
+        }
+    }
+}
+function ensureHandle(doc) {
+    let handle = doc.getElementById(AI_IMAGE_HANDLE_ID);
+    if (!handle) {
+        handle = doc.createElement("div");
+        handle.id = AI_IMAGE_HANDLE_ID;
+        handle.title = "Drag to resize image";
+        handle.setAttribute("role", "button");
+        handle.setAttribute("aria-label", "Resize image");
+        doc.body.appendChild(handle);
+    }
+    return handle;
+}
+function hideHandle(doc) {
+    doc.getElementById(AI_IMAGE_HANDLE_ID)?.style.setProperty("display", "none");
+}
+function positionHandle(doc, img, handle) {
+    const rect = img.getBoundingClientRect();
+    const offset = AI_IMAGE_HANDLE_SIZE / 2;
+    handle.style.display = "block";
+    handle.style.left = `${rect.right - offset}px`;
+    handle.style.top = `${rect.bottom - offset}px`;
+}
+export function attachImageResize(doc, options) {
+    let selected = null;
+    let raf = 0;
+    let resizeStartX = 0;
+    let resizeStartWidth = 0;
+    let resizeUndoPushed = false;
+    let pointerDownX = 0;
+    let pointerDownY = 0;
+    let dragOffsetX = 0;
+    let dragOffsetY = 0;
+    let dragging = false;
+    let dragGhost = null;
+    let activePointerId = null;
+    const handle = ensureHandle(doc);
+    hideHandle(doc);
+    const deselect = () => {
+        if (selected) {
+            selected.classList.remove("ai-img-selected", "ai-img-dragging");
+        }
+        selected = null;
+        hideHandle(doc);
+    };
+    const refreshSelection = (img) => {
+        selected = img;
+        img.classList.add("ai-img-selected");
+        positionHandle(doc, img, handle);
+    };
+    const select = (img) => {
+        if (selected === img) {
+            positionHandle(doc, img, handle);
+            return;
+        }
+        deselect();
+        unwrapCenteredImage(img);
+        if (currentFloatSide(img) === "none" && !img.style.width) {
+            applyFloatStyles(img, "left");
+            applyWidth(img, Math.min(280, img.naturalWidth || 280));
+        }
+        refreshSelection(img);
+    };
+    const scheduleReposition = () => {
+        if (!selected || dragging)
+            return;
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+            if (selected && !dragging) {
+                positionHandle(doc, selected, handle);
+            }
+        });
+    };
+    const clearDragGhost = () => {
+        dragGhost?.remove();
+        dragGhost = null;
+        if (selected)
+            selected.classList.remove("ai-img-dragging");
+    };
+    const onResizePointerMove = (event) => {
+        if (!selected)
+            return;
+        if (!resizeUndoPushed) {
+            options.onBeforeEdit?.();
+            resizeUndoPushed = true;
+        }
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+            if (!selected)
+                return;
+            const delta = event.clientX - resizeStartX;
+            applyWidth(selected, resizeStartWidth + delta);
+            positionHandle(doc, selected, handle);
+        });
+    };
+    const onResizePointerUp = () => {
+        doc.removeEventListener("pointermove", onResizePointerMove);
+        doc.removeEventListener("pointerup", onResizePointerUp);
+        cancelAnimationFrame(raf);
+        if (selected)
+            options.onResizeEnd();
+    };
+    const onHandlePointerDown = (event) => {
+        if (!selected)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        resizeUndoPushed = false;
+        resizeStartX = event.clientX;
+        resizeStartWidth = parseWidth(selected);
+        doc.addEventListener("pointermove", onResizePointerMove);
+        doc.addEventListener("pointerup", onResizePointerUp);
+    };
+    const onImagePointerMove = (event) => {
+        if (!selected || activePointerId !== event.pointerId)
+            return;
+        const deltaX = event.clientX - pointerDownX;
+        const deltaY = event.clientY - pointerDownY;
+        if (!dragging && Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD)
+            return;
+        if (!dragging) {
+            options.onBeforeEdit?.();
+            dragging = true;
+            hideHandle(doc);
+            selected.classList.add("ai-img-dragging");
+            dragGhost = selected.cloneNode(true);
+            dragGhost.className = "ai-img-drag-ghost";
+            dragGhost.removeAttribute("data-ai-image");
+            dragGhost.style.width = `${parseWidth(selected)}px`;
+            dragGhost.style.height = "auto";
+            doc.body.appendChild(dragGhost);
+        }
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+            if (!dragGhost)
+                return;
+            dragGhost.style.left = `${event.clientX - dragOffsetX}px`;
+            dragGhost.style.top = `${event.clientY - dragOffsetY}px`;
+        });
+    };
+    const onImagePointerUp = (event) => {
+        if (activePointerId !== event.pointerId)
+            return;
+        doc.removeEventListener("pointermove", onImagePointerMove);
+        doc.removeEventListener("pointerup", onImagePointerUp);
+        doc.removeEventListener("pointercancel", onImagePointerUp);
+        cancelAnimationFrame(raf);
+        const didDrag = dragging;
+        dragging = false;
+        activePointerId = null;
+        if (didDrag && selected) {
+            try {
+                repositionImageAtPoint(doc, selected, event.clientX, event.clientY);
+            }
+            finally {
+                selected.classList.remove("ai-img-dragging");
+                selected.style.removeProperty("opacity");
+                clearDragGhost();
+                if (selected.isConnected) {
+                    refreshSelection(selected);
+                }
+                else {
+                    deselect();
+                }
+            }
+            options.onResizeEnd();
+            return;
+        }
+        clearDragGhost();
+    };
+    const onImagePointerDown = (event) => {
+        if (options.isSelectMode())
+            return;
+        const target = event.target;
+        if (target === handle || handle.contains(target)) {
+            return;
+        }
+        const img = target?.closest("img[data-ai-image]");
+        if (!img)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        select(img);
+        activePointerId = event.pointerId;
+        pointerDownX = event.clientX;
+        pointerDownY = event.clientY;
+        const rect = img.getBoundingClientRect();
+        dragOffsetX = event.clientX - rect.left;
+        dragOffsetY = event.clientY - rect.top;
+        doc.addEventListener("pointermove", onImagePointerMove);
+        doc.addEventListener("pointerup", onImagePointerUp);
+        doc.addEventListener("pointercancel", onImagePointerUp);
+    };
+    const onBodyClick = (event) => {
+        if (options.isSelectMode())
+            return;
+        const target = event.target;
+        if (target === handle || handle.contains(target))
+            return;
+        if (target?.closest("img[data-ai-image]"))
+            return;
+        deselect();
+    };
+    const onScroll = () => scheduleReposition();
+    const onResize = () => scheduleReposition();
+    handle.addEventListener("pointerdown", onHandlePointerDown);
+    doc.body.addEventListener("pointerdown", onImagePointerDown, true);
+    doc.body.addEventListener("click", onBodyClick, true);
+    doc.defaultView?.addEventListener("scroll", onScroll, true);
+    doc.defaultView?.addEventListener("resize", onResize);
+    return () => {
+        cancelAnimationFrame(raf);
+        clearDragGhost();
+        deselect();
+        handle.removeEventListener("pointerdown", onHandlePointerDown);
+        doc.body.removeEventListener("pointerdown", onImagePointerDown, true);
+        doc.body.removeEventListener("click", onBodyClick, true);
+        doc.defaultView?.removeEventListener("scroll", onScroll, true);
+        doc.defaultView?.removeEventListener("resize", onResize);
+        handle.remove();
+    };
+}
+/** Float image for inline insert — text wraps in supporting clients and in preview. */
+export function createFloatImage(doc, url, label, width = 280) {
+    const img = doc.createElement("img");
+    img.setAttribute("src", url);
+    img.setAttribute("alt", label || "");
+    img.setAttribute("data-ai-image", "true");
+    applyFloatStyles(img, "left");
+    applyWidth(img, width);
+    return img;
+}
+// --- Preview HTML editing (blocks, inline edit, save-ready serialize) --------
+const TEXT_BLOCK_TAGS = new Set([
+    "P",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6",
+    "TD",
+    "TH",
+    "A",
+    "LI",
+    "BUTTON",
+    "DIV",
+    "SPAN",
+    "STRONG",
+    "EM",
+    "B",
+    "I",
+    "LABEL",
+]);
+export const AI_EDITOR_STYLE_ID = "ai-email-editor-styles";
+export const AI_EDITOR_STYLES = `
+  [data-edit-id] { transition: outline 0.15s ease, background 0.15s ease; }
+  [data-edit-id].ai-selected {
+    outline: 2px solid rgb(6, 182, 212);
+    background: rgba(6, 182, 212, 0.07);
+  }
+  [data-edit-id][contenteditable="true"] {
+    outline: 2px solid rgb(34, 197, 94);
+    outline-offset: 1px;
+    cursor: text;
+  }
+  [data-edit-id][contenteditable="true"]:not(button):not(a) {
+    background: rgba(34, 197, 94, 0.06);
+  }
+  button[data-edit-id][contenteditable="true"],
+  a[data-edit-id][contenteditable="true"] {
+    outline: 2px dashed rgba(34, 197, 94, 0.85);
+    outline-offset: 3px;
+    cursor: text;
+  }
+  [data-edit-id][contenteditable="true"]::selection,
+  [data-edit-id][contenteditable="true"] *::selection {
+    background-color: rgba(6, 182, 212, 0.45);
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+    text-shadow: none;
+  }
+  button[data-edit-id][contenteditable="true"]::selection,
+  button[data-edit-id][contenteditable="true"] *::selection,
+  a[data-edit-id][contenteditable="true"]::selection,
+  a[data-edit-id][contenteditable="true"] *::selection {
+    background-color: rgba(15, 23, 42, 0.82);
+    color: #ffffff;
+    -webkit-text-fill-color: #ffffff;
+    text-shadow: none;
+  }
+  body.ai-select-mode [data-edit-id] { cursor: crosshair; }
+  body.ai-select-mode [data-edit-id].ai-flagged { cursor: text; }
+  body.ai-select-mode [data-edit-id]:hover:not(button):not(a) {
+    outline: 2px dashed rgba(250, 204, 21, 0.85);
+  }
+  body.ai-select-mode button[data-edit-id]:hover,
+  body.ai-select-mode a[data-edit-id]:hover {
+    outline: 2px dashed rgba(250, 204, 21, 0.85);
+    outline-offset: 2px;
+  }
+  body.ai-select-mode [data-edit-id].ai-flagged:not(button):not(a) {
+    outline: 2px solid rgb(250, 204, 21);
+    background: rgba(250, 204, 21, 0.14);
+    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.35);
+  }
+  body.ai-select-mode button[data-edit-id].ai-flagged,
+  body.ai-select-mode a[data-edit-id].ai-flagged {
+    outline: 2px solid rgb(250, 204, 21);
+    outline-offset: 2px;
+  }
+  body.ai-select-mode [data-edit-id].ai-flagged[contenteditable="true"]:not(button):not(a) {
+    outline: 2px solid rgb(34, 197, 94);
+    background: rgba(34, 197, 94, 0.06);
+    box-shadow: none;
+  }
+  body.ai-select-mode button[data-edit-id].ai-flagged[contenteditable="true"],
+  body.ai-select-mode a[data-edit-id].ai-flagged[contenteditable="true"] {
+    outline: 2px dashed rgba(34, 197, 94, 0.85);
+    outline-offset: 3px;
+  }
+`;
+/** Tag text-bearing blocks so the editor can target them for click / AI edits. */
+export function annotateHtmlForEditing(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    stripPlaceholderImages(doc);
+    let counter = 0;
+    for (const el of doc.body.querySelectorAll("*")) {
+        if (el.hasAttribute("data-edit-id"))
+            continue;
+        const text = el.textContent?.trim();
+        if (!text)
+            continue;
+        if (el.querySelector("[data-edit-id]"))
+            continue;
+        const tag = el.tagName;
+        if (!TEXT_BLOCK_TAGS.has(tag))
+            continue;
+        if (tag === "DIV") {
+            const blockChildren = [...el.children].filter((child) => TEXT_BLOCK_TAGS.has(child.tagName) &&
+                !!child.textContent?.trim());
+            if (blockChildren.length > 0)
+                continue;
+        }
+        if (tag === "SPAN" &&
+            el.parentElement?.hasAttribute("data-edit-id")) {
+            continue;
+        }
+        el.setAttribute("data-edit-id", `edit-${counter++}`);
+    }
+    prepareImagesForEditing(doc);
+    injectEditorStyles(doc);
+    return serializeHtmlDocument(doc);
+}
+function injectEditorStyles(doc) {
+    let styleEl = doc.getElementById(AI_EDITOR_STYLE_ID);
+    if (!styleEl) {
+        styleEl = doc.createElement("style");
+        styleEl.id = AI_EDITOR_STYLE_ID;
+        doc.head.appendChild(styleEl);
+    }
+    styleEl.textContent = AI_EDITOR_STYLES + AI_IMAGE_EDITOR_STYLES;
+}
+export function serializeHtmlDocument(doc) {
+    const doctype = doc.doctype
+        ? `<!DOCTYPE ${doc.doctype.name}${doc.doctype.publicId ? ` PUBLIC "${doc.doctype.publicId}"` : ""}${doc.doctype.systemId ? ` "${doc.doctype.systemId}"` : ""}>`
+        : "<!DOCTYPE html>";
+    return `${doctype}\n${doc.documentElement.outerHTML}`;
+}
+export function stripEditorChrome(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    doc.getElementById(AI_EDITOR_STYLE_ID)?.remove();
+    doc.querySelectorAll("[data-edit-id]").forEach((el) => {
+        el.removeAttribute("data-edit-id");
+        el.classList.remove("ai-selected", "ai-flagged");
+        el.removeAttribute("contenteditable");
+    });
+    stripImageEditorChrome(doc);
+    return serializeHtmlDocument(doc);
+}
+/** Click-to-type: focus a block and place the caret where the user clicked. */
+export function focusEditableElementAtPoint(element, clientX, clientY) {
+    element.setAttribute("contenteditable", "true");
+    element.focus();
+    const doc = element.ownerDocument;
+    const selection = doc.getSelection();
+    if (!selection)
+        return;
+    let range = null;
+    if (doc.caretRangeFromPoint) {
+        range = doc.caretRangeFromPoint(clientX, clientY);
+    }
+    else {
+        const caretPositionFromPoint = doc.caretPositionFromPoint;
+        const pos = caretPositionFromPoint?.call(doc, clientX, clientY);
+        if (pos) {
+            range = doc.createRange();
+            range.setStart(pos.offsetNode, pos.offset);
+            range.collapse(true);
+        }
+    }
+    if (range && element.contains(range.startContainer)) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return;
+    }
+    range = doc.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+export function finishInlineEdits(doc, except) {
+    doc.querySelectorAll('[contenteditable="true"]').forEach((node) => {
+        if (node !== except) {
+            node.removeAttribute("contenteditable");
+        }
+    });
+}
+export function syncFlaggedElements(doc, flaggedIds) {
+    const flagged = new Set(flaggedIds);
+    doc.querySelectorAll("[data-edit-id]").forEach((el) => {
+        const id = el.getAttribute("data-edit-id");
+        if (id && flagged.has(id)) {
+            el.classList.add("ai-flagged");
+        }
+        else {
+            el.classList.remove("ai-flagged");
+        }
+    });
+}
+export function getBlockHtmlById(doc, editId) {
+    const el = doc.querySelector(`[data-edit-id="${editId}"]`);
+    return el?.outerHTML ?? null;
+}
+// --- Image assets ---------------------------------------------------------
+/** Builds a centered, responsive image block ready to drop into an email. */
+function buildImageWrapper(doc, url, label) {
+    const wrapper = doc.createElement("div");
+    wrapper.setAttribute("style", "text-align:center;margin:16px 0;");
+    const img = doc.createElement("img");
+    img.setAttribute("src", url);
+    img.setAttribute("alt", label || "");
+    img.setAttribute("data-ai-image", "true");
+    img.setAttribute("style", "max-width:100%;height:auto;display:inline-block;border:0;outline:none;");
+    wrapper.appendChild(img);
+    return wrapper;
+}
+/** Appends an image block to the end of the email's main content. */
+export function insertImageBlock(doc, url, label) {
+    if (!doc.body)
+        return;
+    doc.body.appendChild(buildImageWrapper(doc, url, label));
+}
+/**
+ * Inserts an image block right after the block under the given viewport point.
+ * Falls back to appending at the end when the drop position is unclear.
+ */
+export function insertImageBlockAtPoint(doc, url, label, clientX, clientY) {
+    const target = doc.elementFromPoint(clientX, clientY);
+    let block = target?.closest("[data-edit-id],tr,td,table,p,div,section,header,footer");
+    // Never insert a DIV directly under table row structures.
+    if (block && (block.tagName === "TR" || block.tagName === "TD")) {
+        block = block.closest("table") ?? block;
+    }
+    const textHost = target?.closest("[data-edit-id],p,td,th,li,blockquote");
+    if (textHost) {
+        const img = createFloatImage(doc, url, label);
+        textHost.insertBefore(img, textHost.firstChild);
+        return;
+    }
+    if (!block?.parentElement || block === doc.body) {
+        insertImageBlock(doc, url, label);
+        return;
+    }
+    const wrapper = buildImageWrapper(doc, url, label);
+    block.parentElement.insertBefore(wrapper, block.nextSibling);
+}