fable-editor 1.2.7 → 1.3.0

package/dist/angular/fesm2022/fable-editor.mjs

@@ -1290,6 +1290,195 @@ function normalizeTextPaste(raw) {
     return esc(txt);
 }
 
+/* Recovers the pictures that desktop Word leaves out of the HTML clipboard flavor.
+   Word writes <img src="file:///…/msohtmlclip1/01/clip_image001.png"> — a local temp
+   file the browser cannot read — but the same paste also carries a text/rtf flavor
+   with every picture embedded as hex inside a {\pict} group. Pairing the two is how
+   TinyMCE PowerPaste implements powerpaste_allow_local_images.
+
+   This runs on the RAW html string BEFORE cleanPastedHTML() sees it: the paste engine
+   already allows data: URIs, so it needs no change and its behaviour is unaffected.
+   Anything this module cannot recover is left exactly as it was, and still ends up on
+   the engine's existing "[local image — paste it separately]" placeholder. */
+/** Total decoded bytes we are willing to inline from one paste. A Word document full
+ *  of full-page screenshots can run to tens of MB; past this we leave the placeholders
+ *  rather than freeze the editor building base64 strings. */
+const MAX_TOTAL_BYTES = 10 * 1024 * 1024;
+const USABLE_SRC = /^(https?:|data:image\/|blob:)/i;
+/** Scans for `{\keyword …}` groups, tracking brace depth so nested groups such as
+ *  `{\*\picprop …}` inside a picture do not terminate the match early (a lazy
+ *  `/\{\\pict[\s\S]*?\}/` regex gets this wrong and truncates the hex payload). */
+function findGroups(rtf, keyword) {
+    const out = [];
+    const needle = '{\\' + keyword;
+    let i = 0;
+    while ((i = rtf.indexOf(needle, i)) !== -1) {
+        /* the char after the control word must be a delimiter, so \pict does not also
+           match \pictscalex and friends */
+        const after = rtf[i + needle.length];
+        if (after && /[a-z0-9]/i.test(after)) {
+            i += needle.length;
+            continue;
+        }
+        let depth = 0;
+        let j = i;
+        for (; j < rtf.length; j++) {
+            const c = rtf[j];
+            if (c === '\\') {
+                j++;
+                continue;
+            }
+            if (c === '{')
+                depth++;
+            else if (c === '}') {
+                depth--;
+                if (!depth)
+                    break;
+            }
+        }
+        out.push({ start: i, end: j + 1, body: rtf.slice(i + needle.length, j) });
+        i = j + 1;
+    }
+    return out;
+}
+function hexToBytes(hex) {
+    const bytes = new Uint8Array(hex.length / 2);
+    for (let i = 0; i < bytes.length; i++)
+        bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
+    return bytes;
+}
+function toBase64$1(bytes) {
+    let bin = '';
+    for (let i = 0; i < bytes.length; i++)
+        bin += String.fromCharCode(bytes[i]);
+    return btoa(bin);
+}
+function indexOfSig(bytes, sig) {
+    outer: for (let i = 0; i + sig.length <= bytes.length; i++) {
+        for (let j = 0; j < sig.length; j++)
+            if (bytes[i + j] !== sig[j])
+                continue outer;
+        return i;
+    }
+    return -1;
+}
+const PNG_SIG = [0x89, 0x50, 0x4e, 0x47];
+const JPG_SIG = [0xff, 0xd8, 0xff];
+function decodePict(body) {
+    let kind = null;
+    if (/\\pngblip/.test(body))
+        kind = 'image/png';
+    else if (/\\jpegblip/.test(body))
+        kind = 'image/jpeg';
+    else if (/\\wmetafile\d*/.test(body) || /\\emfblip/.test(body))
+        kind = 'metafile';
+    if (!kind)
+        return null;
+    let hex = body
+        .replace(/\{[^{}]*\}/g, '') // nested property groups
+        .replace(/\\[a-z]+-?\d*\s?/gi, '') // control words
+        .replace(/[^0-9a-fA-F]/g, '');
+    if (hex.length % 2)
+        hex = hex.slice(0, -1);
+    if (!hex)
+        return null;
+    const bytes = hexToBytes(hex);
+    if (kind === 'metafile') {
+        /* Word wraps a bitmap in a metafile for compatibility; when there is a real
+           PNG/JPEG inside we can use it. A genuine vector metafile we cannot render. */
+        const png = indexOfSig(bytes, PNG_SIG);
+        if (png >= 0)
+            return 'data:image/png;base64,' + toBase64$1(bytes.slice(png));
+        const jpg = indexOfSig(bytes, JPG_SIG);
+        if (jpg >= 0)
+            return 'data:image/jpeg;base64,' + toBase64$1(bytes.slice(jpg));
+        return null;
+    }
+    return 'data:' + kind + ';base64,' + toBase64$1(bytes);
+}
+/** Every picture in the RTF flavor, in document order. */
+function extractRtfImages(rtf) {
+    if (!rtf || rtf.indexOf('\\pict') === -1)
+        return [];
+    /* Word emits {\*\shppict{\pict …}}{\nonshppict{\pict …}} — the second group is a
+       legacy duplicate of the first. Dropping it keeps picture order aligned with the
+       <img> tags in the HTML flavor. */
+    let cleaned = rtf;
+    findGroups(rtf, 'nonshppict')
+        .reverse()
+        .forEach((g) => {
+        cleaned = cleaned.slice(0, g.start) + cleaned.slice(g.end);
+    });
+    let budget = MAX_TOTAL_BYTES;
+    return findGroups(cleaned, 'pict').map((g) => {
+        if (budget <= 0)
+            return null;
+        const data = decodePict(g.body);
+        if (data)
+            budget -= data.length * 0.75; // base64 -> approximate byte count
+        return data;
+    });
+}
+/** Rewrites unusable <img src> values in raw pasted HTML with the pictures given, in
+ *  document order. Images that already have a usable src are left alone and do not
+ *  consume a slot, so a mixed paste (webmail image + Word image) stays aligned.
+ *  Anything without a matching picture keeps its original tag. */
+function injectImages(html, imgs) {
+    if (!html || !imgs.length)
+        return { html, injected: [] };
+    const injected = [];
+    let next = 0;
+    const out = html.replace(/<img\b[^>]*>/gi, (tag) => {
+        const src = (tag.match(/\ssrc\s*=\s*["']?([^"'\s>]+)/i) || [])[1] || '';
+        if (USABLE_SRC.test(src))
+            return tag;
+        const data = imgs[next++];
+        if (!data)
+            return tag;
+        injected.push(data);
+        return /\ssrc\s*=\s*["']/i.test(tag)
+            ? tag.replace(/(\ssrc\s*=\s*)(["'])[^"']*\2/i, '$1"' + data + '"')
+            : tag.replace(/(\ssrc\s*=\s*)[^\s>]+/i, '$1"' + data + '"');
+    });
+    return { html: out, injected };
+}
+/** Pairs the HTML flavor of a Word paste with the pictures in its RTF flavor. */
+function injectRtfImages(html, rtf) {
+    if (!html || !rtf)
+        return { html, injected: [] };
+    return injectImages(html, extractRtfImages(rtf));
+}
+/** True when the cleaned HTML still holds images the engine could not resolve — used
+ *  to decide whether a bitmap sitting in the clipboard is worth falling back to. */
+function countUnresolvedImages(html) {
+    const tags = html.match(/<img\b[^>]*>/gi);
+    if (!tags)
+        return 0;
+    return tags.filter((tag) => {
+        const src = (tag.match(/\ssrc\s*=\s*["']?([^"'\s>]+)/i) || [])[1] || '';
+        return !USABLE_SRC.test(src);
+    }).length;
+}
+/** data: URI -> File, so recovered pictures can go through the host's
+ *  imageUploadHandler exactly like a picked file does. `baseName` gets the extension
+ *  that matches the URI's MIME type. */
+function dataUrlToFile(dataUrl, baseName) {
+    const m = dataUrl.match(/^data:([^;,]+);base64,(.*)$/);
+    if (!m)
+        return null;
+    const ext = (m[1].split('/')[1] || 'png').replace(/[^a-z0-9]/gi, '') || 'png';
+    try {
+        const bin = atob(m[2]);
+        const bytes = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++)
+            bytes[i] = bin.charCodeAt(i);
+        return new File([bytes], baseName + '.' + (ext === 'jpeg' ? 'jpg' : ext), { type: m[1] });
+    }
+    catch (e) {
+        return null;
+    }
+}
+
 /* Minimal .docx → HTML converter with no dependencies.
    Parses the ZIP container manually and inflates entries with the browser's
    DecompressionStream, then maps WordprocessingML to editor-friendly HTML:
@@ -1828,7 +2017,12 @@ class FableEditor {
     foreColor = '#000000';
     backColor = '#FACC15';
     openPop = null;
-    openSubEl = null;
+    /** Stack of currently-open flyout submenus, shallowest first (e.g. for
+     *  Table > Cell > Cell background: [Cell flyout, Cell background flyout]).
+     *  A single slot isn't enough past one level deep - opening a 2nd-level
+     *  flyout would remove the 1st-level one still needed to bridge visually
+     *  back to the top-level popup, leaving a gap. */
+    subStack = [];
     popAnchor = null;
     dlgOvl = null;
     tblActive = null;
@@ -1902,6 +2096,7 @@ class FableEditor {
         this.bindEvents();
         this.initUI();
         this.recordRevision();
+        this.stampExistingImages();
         this.options.onReady(this);
     }
     t(key) {
@@ -2018,7 +2213,7 @@ class FableEditor {
             if (this.openPop &&
                 !this.openPop.contains(e.target) &&
                 !this.popAnchor.contains(e.target) &&
-                !(this.openSubEl && this.openSubEl.contains(e.target))) {
+                !this.subContains(e.target)) {
                 this.closePop();
             }
         });
@@ -2175,8 +2370,17 @@ class FableEditor {
             this.positionVidCtx();
             this.positionCodeCtx();
         });
-        this.onWin('scroll', () => {
-            this.closePop();
+        this.onWin('scroll', (e) => {
+            /* this fires for ANY scroll in the document (capture:true is what
+               lets it catch a scrollable ancestor, not just the window) -
+               including the popup's own overflow:auto scrolling through a long
+               menu. Only close it for a scroll that happened outside the open
+               menu/flyouts; otherwise scrolling a long dropdown would close it
+               on the very first scroll tick instead of scrolling its content. */
+            const t = e.target;
+            const withinOpenMenu = t instanceof Node && ((this.openPop?.contains(t) ?? false) || this.subContains(t));
+            if (!withinOpenMenu)
+                this.closePop();
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
@@ -2217,7 +2421,7 @@ class FableEditor {
             const fr = new FileReader();
             fr.onload = () => {
                 this.restoreSel();
-                document.execCommand('insertHTML', false, `<img src="${fr.result}" title="${file.name.replace(/"/g, '')}" alt="">`);
+                this.insertImageHTML(fr.result, file.name.replace(/"/g, ''));
                 this.onChange();
             };
             fr.readAsDataURL(file);
@@ -2260,7 +2464,7 @@ class FableEditor {
                 (this.vidCtx && this.vidCtx.contains(e.target)) ||
                 (this.codeCtx && this.codeCtx.contains(e.target)) ||
                 (this.openPop && this.openPop.contains(e.target)) ||
-                (this.openSubEl && this.openSubEl.contains(e.target)))
+                this.subContains(e.target))
                 return;
             this.clearTableHandles();
             this.clearImageHandles();
@@ -2332,6 +2536,29 @@ class FableEditor {
             const hasAlign = /text-align\s*:/i.test(el.getAttribute('style') || '');
             setStyle(el, hasAlign ? `direction:${d}` : `direction:${d};text-align:${d === 'rtl' ? 'right' : 'left'}`);
         });
+        /* Images: an email has none of the editor's CSS, so an image with no explicit
+           size renders at its raw pixel size in the mail client. Take the size it
+           actually has on screen from the live editor (index-matched — the clone was
+           built from the same HTML) and make it explicit. The width attribute is what
+           Outlook desktop follows; max-width keeps it inside narrow mobile clients.
+           Documents saved before this existed are fixed here too, without rewriting
+           anything the host has stored. */
+        const liveImgs = this.ed.querySelectorAll('img');
+        box.querySelectorAll('img').forEach((img, i) => {
+            if (img.closest('.tpl-media'))
+                return;
+            const live = liveImgs[i];
+            const w = Math.round(live?.getBoundingClientRect().width || 0);
+            if (w > 0 && !img.getAttribute('width'))
+                img.setAttribute('width', String(w));
+            const style = img.getAttribute('style') || '';
+            if (w > 0 && !/(^|;)\s*width\s*:/i.test(style))
+                setStyle(img, `width:${w}px`);
+            if (!/max-width\s*:/i.test(img.getAttribute('style') || ''))
+                setStyle(img, 'max-width:100%');
+            if (!/(^|;)\s*height\s*:/i.test(img.getAttribute('style') || ''))
+                setStyle(img, 'height:auto');
+        });
         const dir = found || this.ed.getAttribute('dir') || this.dir();
         box.querySelectorAll('table:not([dir])').forEach((tbl) => {
             tbl.setAttribute('dir', dir);
@@ -2353,6 +2580,7 @@ class FableEditor {
         this.clearCodeSel();
         this.clearSelToolbar();
         this.onChange();
+        this.stampExistingImages();
     }
     insertContent(html) {
         this.restoreSel();
@@ -2601,8 +2829,28 @@ class FableEditor {
     }
     /* ---------------------------------------------------------- popups / menus */
     closeSub() {
-        this.openSubEl?.remove();
-        this.openSubEl = null;
+        this.closeSubFrom(0);
+    }
+    /** Removes stacked flyouts from `level` (0 = shallowest) onward, keeping
+     *  anything shallower - e.g. hovering a sibling item inside the "Cell"
+     *  flyout should drop a deeper "Cell background" flyout but keep "Cell"
+     *  itself and the top-level popup it bridges to. */
+    closeSubFrom(level) {
+        while (this.subStack.length > level)
+            this.subStack.pop().remove();
+    }
+    /** True if `node` is inside any currently-open flyout submenu (any depth). */
+    subContains(node) {
+        return this.subStack.some((el) => el.contains(node));
+    }
+    /** 0 for the top-level popup itself; otherwise this container's depth in
+     *  the flyout stack + 1. Used to know how many deeper flyouts to close
+     *  when opening or hovering within `container`. */
+    subLevelOf(container) {
+        if (container === this.openPop)
+            return 0;
+        const idx = this.subStack.indexOf(container);
+        return idx === -1 ? this.subStack.length : idx + 1;
     }
     closePop() {
         this.closeSub();
@@ -2617,7 +2865,17 @@ class FableEditor {
         }
     }
     openSubFor(item, anchor) {
-        this.closeSub();
+        /* captured before truncating the stack - for a flyout nested inside
+           another flyout (e.g. Table > Cell > Cell background), anchor is itself
+           a descendant of the currently-open sub-popup; measuring after removing
+           it would read a detached, zeroed-out rect and land the new flyout at
+           the top-left corner of the screen */
+        const r = anchor.getBoundingClientRect();
+        /* only close flyouts deeper than the one anchor lives in - closing
+           everything (the old behavior) would also remove that same containing
+           flyout, leaving a visual gap back to the top-level popup */
+        const parentPop = anchor.closest('.pop');
+        this.closeSubFrom(parentPop ? this.subLevelOf(parentPop) : 0);
         const sub = document.createElement('div');
         sub.className = 'pop sub';
         sub.dir = this.dir();
@@ -2630,7 +2888,6 @@ class FableEditor {
                 e.preventDefault();
         });
         document.body.appendChild(sub);
-        const r = anchor.getBoundingClientRect();
         const isRtl = this.dir() === 'rtl';
         // overlap the parent item slightly so the pointer can travel into the flyout
         let x = isRtl ? r.left - sub.offsetWidth + 2 : r.right - 2;
@@ -2639,7 +2896,7 @@ class FableEditor {
         y = Math.max(8 + scrollY, Math.min(y, scrollY + innerHeight - sub.offsetHeight - 8));
         sub.style.left = x + 'px';
         sub.style.top = y + 'px';
-        this.openSubEl = sub;
+        this.subStack.push(sub);
     }
     popup(anchor, build, cls) {
         if (this.openPop && this.popAnchor === anchor) {
@@ -2655,7 +2912,11 @@ class FableEditor {
         const r = anchor.getBoundingClientRect();
         // align the menu with its control: at least as wide as the anchor
         el.style.minWidth = Math.max(160, Math.round(r.width)) + 'px';
-        el.style.top = r.bottom + scrollY + 2 + 'px';
+        // clamp so a long menu (its own max-height/overflow makes it scrollable)
+        // stays fully on-screen instead of running off the bottom of the viewport
+        let y = r.bottom + scrollY + 2;
+        y = Math.max(8 + scrollY, Math.min(y, scrollY + innerHeight - el.offsetHeight - 8));
+        el.style.top = y + 'px';
         const isRtl = this.dir() === 'rtl';
         let x = isRtl ? r.right - el.offsetWidth : r.left;
         x = Math.max(8, Math.min(x + scrollX, scrollX + innerWidth - el.offsetWidth - 8));
@@ -2687,8 +2948,11 @@ class FableEditor {
             b.addEventListener('mouseenter', () => {
                 if (hasSub)
                     this.openSubFor(it, b);
-                else if (this.openSubEl && el !== this.openSubEl)
-                    this.closeSub();
+                /* hovering a no-submenu item drops whatever deeper flyout was open
+                   from a previously-hovered sibling, but keeps el itself and any
+                   shallower ancestors intact */
+                else
+                    this.closeSubFrom(this.subLevelOf(el));
                 it.hover?.(true);
             });
             b.addEventListener('mouseleave', () => it.hover?.(false));
@@ -3274,8 +3538,8 @@ class FableEditor {
     buildToolbarRegistry() {
         const tableBtn = this.tbtn(IC.tableic, this.t('quicktable'), () => this.tableGrid(tableBtn));
         const registry = {
-            undo: () => this.tbtn(IC.undo, this.t('undo'), () => this.exec('undo')),
-            redo: () => this.tbtn(IC.redo, this.t('redo'), () => this.exec('redo')),
+            undo: () => this.tbtn(IC.undo, this.t('undo'), () => this.exec('undo'), 'undo'),
+            redo: () => this.tbtn(IC.redo, this.t('redo'), () => this.exec('redo'), 'redo'),
             preview: () => this.tbtn(IC.prevw, this.t('preview'), () => this.previewDlg()),
             print: () => this.tbtn(IC.printic, this.t('print'), () => this.printDoc()),
             importword: () => this.tbtn(IC.wordic, this.t('importword'), () => this.pickWordDoc()),
@@ -4111,9 +4375,18 @@ class FableEditor {
     }
     previewDlg() {
         this.dialog(this.t('previewttl'), (body) => {
+            /* The preview renders the document at the editor's own column width, so an
+               image is exactly the size the user left it at — a narrower preview pane
+               would silently shrink it and misreport what will be sent. The dialog gets
+               a wider cap to make that width reachable; on a viewport too small for it
+               the image's max-width:100% scales things down rather than clipping. */
+            body.closest('.dlg')?.classList.add('dlg-preview');
             const box = document.createElement('div');
+            box.className = 'pv-box';
+            const w = this.contentWidth();
             box.style.cssText =
-                'width:640px;max-width:78vw;max-height:52vh;overflow:auto;border:1px solid #e3e3e3;border-radius:6px;padding:14px;font-family:Helvetica,Arial,sans-serif;font-size:14px';
+                `width:${w > 0 ? Math.round(w) : 640}px;max-width:100%;max-height:52vh;overflow:auto;` +
+                    'border:1px solid #e3e3e3;border-radius:6px;padding:14px;font-family:Helvetica,Arial,sans-serif;font-size:14px';
             box.innerHTML = this.ed.innerHTML;
             body.appendChild(box);
         });
@@ -4357,11 +4630,91 @@ class FableEditor {
         if (title)
             img.title = title;
         ph.replaceWith(img);
+        this.stampImageSize(img);
         if (this.phActive === ph)
             this.clearImgPlaceholderSel();
         this.refreshState();
         this.onChange();
     }
+    /** Width of the editor's text column — the width `.earea img { max-width:100% }`
+     *  clamps an oversized image to. */
+    contentWidth() {
+        const cs = getComputedStyle(this.ed);
+        const pad = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+        return Math.max(0, this.ed.clientWidth - pad);
+    }
+    /** Inserts an <img> through execCommand and stamps its size once it has decoded.
+     *  A throwaway id is the only way to get a handle on what insertHTML created. */
+    insertImageHTML(src, title) {
+        const id = 'fable-img-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+        document.execCommand('insertHTML', false, `<img id="${id}" src="${src}"${title ? ` title="${title}"` : ''} alt="">`);
+        const img = this.ed.querySelector('#' + id);
+        if (!img)
+            return;
+        img.removeAttribute('id');
+        this.stampImageSize(img);
+    }
+    /** Gives a newly inserted image an explicit size so it renders the same in the
+     *  editor, in Preview and in a sent email. Without it the image only looks right
+     *  inside `.earea`, whose `max-width:100%` rule exists nowhere else — which is why
+     *  the same picture came out at a different size once the mail was sent.
+     *  Leaves alone: images inside a template media slot (deliberately fluid) and any
+     *  image that already carries a size from its source. */
+    stampImageSize(img, onSettled) {
+        const finish = (stamped) => {
+            if (onSettled)
+                onSettled(stamped);
+            else if (stamped)
+                this.onChange();
+        };
+        const apply = () => {
+            if (!this.ed.contains(img))
+                return finish(false);
+            if (img.closest('.tpl-media'))
+                return finish(false);
+            if (img.getAttribute('width') || img.getAttribute('height'))
+                return finish(false);
+            if (img.style.width || img.style.height)
+                return finish(false);
+            const natural = img.naturalWidth;
+            if (!natural)
+                return finish(false); /* not decoded (or jsdom) — nothing reliable to stamp */
+            const max = this.contentWidth();
+            const w = Math.round(max > 0 ? Math.min(natural, max) : natural);
+            img.setAttribute('width', String(w));
+            img.style.width = w + 'px';
+            img.style.height = 'auto';
+            finish(true);
+        };
+        /* `complete` is also true for an image that failed or has not decoded yet, so
+           wait for load unless there are real pixel dimensions to read */
+        if (img.complete && img.naturalWidth)
+            apply();
+        else {
+            img.addEventListener('load', apply, { once: true });
+            img.addEventListener('error', () => finish(false), { once: true });
+        }
+    }
+    /** Sizes images in content that arrived from outside the editor — a document saved
+     *  before the editor started recording image sizes. Without this such a document
+     *  keeps rendering at one size here and another in a sent mail. Images that already
+     *  carry a size, and template slots, are left alone, so content written by a
+     *  current version passes through untouched. Emits one change after the images have
+     *  settled rather than one per image, and none at all if nothing needed stamping. */
+    stampExistingImages() {
+        const imgs = Array.from(this.ed.querySelectorAll('img'));
+        if (!imgs.length)
+            return;
+        let waiting = imgs.length;
+        let changed = false;
+        const settle = (stamped) => {
+            if (stamped)
+                changed = true;
+            if (--waiting === 0 && changed)
+                this.onChange();
+        };
+        imgs.forEach((img) => this.stampImageSize(img, settle));
+    }
     positionImgPhCtx() {
         if (this.phActive && !document.body.contains(this.phActive)) {
             this.clearImgPlaceholderSel();
@@ -5673,6 +6026,14 @@ class FableEditor {
                 window.removeEventListener('mousemove', mv);
                 window.removeEventListener('mouseup', up);
                 restore();
+                /* mirror the final size onto the width attribute: Outlook desktop
+                   follows the attribute rather than the CSS, so without this a resized
+                   image still goes out at its original size */
+                const w = parseInt(img.style.width, 10);
+                if (w > 0 && !img.closest('.tpl-media')) {
+                    img.setAttribute('width', String(w));
+                    img.removeAttribute('height');
+                }
                 this.onChange();
             };
             window.addEventListener('mousemove', mv);
@@ -5858,7 +6219,7 @@ class FableEditor {
         if (imgItem && !html) {
             const fr = new FileReader();
             fr.onload = () => {
-                document.execCommand('insertHTML', false, `<img src="${fr.result}" alt="">`);
+                this.insertImageHTML(fr.result);
                 this.onChange();
             };
             fr.readAsDataURL(imgItem.getAsFile());
@@ -5877,11 +6238,84 @@ class FableEditor {
             }
         }
         if (html) {
-            document.execCommand('insertHTML', false, cleanPastedHTML(html, this.dir()));
+            this.pasteRichHTML(html, cd, imgItem);
         }
         else {
             document.execCommand('insertHTML', false, normalizeTextPaste(cd.getData('text/plain')));
+            this.onChange();
         }
+    }
+    /** Rich-HTML paste. Before the (untouched) paste engine runs, pictures Word left
+     *  behind as unreadable file:// refs are pulled out of the clipboard's RTF flavor
+     *  and inlined — the same pairing TinyMCE PowerPaste does for
+     *  powerpaste_allow_local_images. Everything the engine already handled is
+     *  unaffected: with no RTF, or no recoverable picture, the HTML reaches it
+     *  byte-identical to before. */
+    pasteRichHTML(html, cd, imgItem) {
+        let injected = [];
+        const rtf = cd.getData('text/rtf');
+        if (rtf) {
+            const res = injectRtfImages(html, rtf);
+            html = res.html;
+            injected = res.injected;
+        }
+        /* Word always supplies text/html, so the bitmap-only branch in handlePaste
+           never fires for a Word paste. When exactly one image is still unresolved and
+           the clipboard carries that bitmap, use it instead of the placeholder. */
+        if (imgItem && countUnresolvedImages(html) === 1) {
+            const blob = imgItem.getAsFile();
+            if (blob) {
+                const pending = html;
+                this.saveSel();
+                const fr = new FileReader();
+                fr.onload = () => {
+                    const res = injectImages(pending, [fr.result]);
+                    this.finishRichPaste(res.html, injected.concat(res.injected), true);
+                };
+                fr.onerror = () => this.finishRichPaste(pending, injected, true);
+                fr.readAsDataURL(blob);
+                return;
+            }
+        }
+        this.finishRichPaste(html, injected);
+    }
+    /** Hands recovered pictures to the host's imageUploadHandler when one is
+     *  configured (PowerPaste's automatic_uploads equivalent), then inserts. Without a
+     *  handler they stay inline base64, which is what PowerPaste does by default. */
+    finishRichPaste(html, injected, deferred = false) {
+        if (!this.imageUploadHandler || !injected.length) {
+            this.insertPastedHTML(html, deferred);
+            return;
+        }
+        const handler = this.imageUploadHandler;
+        const unique = injected.filter((src, i) => injected.indexOf(src) === i);
+        if (!deferred)
+            this.saveSel();
+        Promise.all(unique.map((src, i) => {
+            const file = dataUrlToFile(src, 'pasted-image-' + (i + 1));
+            if (!file)
+                return Promise.resolve(src);
+            return handler(file).catch((err) => {
+                this.onImageUploadError?.(err, file);
+                return src; /* keep the inline copy so the picture is never lost */
+            });
+        })).then((urls) => {
+            let out = html;
+            unique.forEach((src, i) => {
+                if (urls[i] !== src)
+                    out = out.split(src).join(urls[i]);
+            });
+            this.insertPastedHTML(out, true);
+        });
+    }
+    /** `deferred` means the insert is happening after an async hop, so the caret the
+     *  paste started from has to be put back first. */
+    insertPastedHTML(html, deferred = false) {
+        if (deferred)
+            this.restoreSel();
+        document.execCommand('insertHTML', false, cleanPastedHTML(html, this.dir()));
+        if (deferred)
+            this.saveSel();
         this.onChange();
     }
     /* ---------------------------------------------------------- init */