fable-editor 1.2.8 → 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:
@@ -1907,6 +2096,7 @@ class FableEditor {
         this.bindEvents();
         this.initUI();
         this.recordRevision();
+        this.stampExistingImages();
         this.options.onReady(this);
     }
     t(key) {
@@ -2231,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);
@@ -2346,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);
@@ -2367,6 +2580,7 @@ class FableEditor {
         this.clearCodeSel();
         this.clearSelToolbar();
         this.onChange();
+        this.stampExistingImages();
     }
     insertContent(html) {
         this.restoreSel();
@@ -4161,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);
         });
@@ -4407,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();
@@ -5723,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);
@@ -5908,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());
@@ -5927,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 */