svelte-rtf-editor 1.3.0 → 1.4.0

package/dist/rtf-parser.js

@@ -4,7 +4,8 @@
  * Parses RTF control words and groups into an HTML string.
  * Supports: bold, italic, underline, strikethrough, super/subscript,
  * font size, foreground color (\cf), highlight background color (\highlight),
- * color table, font table, paragraphs, bullet/numbered lists,
+ * color table, font table, paragraphs, bullet/numbered lists, tables,
+ * embedded pictures (\pict PNG/JPEG blips, with captions),
  * Unicode characters, hex escapes, and nested groups.
  *
  * \cb (character background) is silently ignored on import.
@@ -28,6 +29,125 @@ const HIGHLIGHT_COLORS = {
     15: '#808080', // Dark Gray
     16: '#c0c0c0', // Light Gray
 };
+// ── Picture helpers ──
+const B64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+/** 1 px at 96 dpi = 15 twips. */
+const TWIPS_PER_PX = 15;
+/** A paragraph made up of nothing but pictures is rendered as a <figure>. */
+const IMAGE_ONLY_PARAGRAPH = /^(?:<img\b[^>]*>\s*)+$/;
+/** Nibble value of each hex digit's char code; -1 for anything else. */
+const HEX_NIBBLE = (() => {
+    const table = new Int8Array(128).fill(-1);
+    for (let i = 0; i < 10; i++)
+        table[48 + i] = i; // '0'–'9'
+    for (let i = 0; i < 6; i++) {
+        table[97 + i] = 10 + i; // 'a'–'f'
+        table[65 + i] = 10 + i; // 'A'–'F'
+    }
+    return table;
+})();
+/** Hex picture data → base64, without depending on btoa/Buffer. */
+function hexToBase64(hex) {
+    const byteCount = hex.length >> 1;
+    // A multi-MB picture runs to millions of digits, so this reads char codes
+    // against a lookup table rather than slicing and parsing per byte, and
+    // collects into an array rather than concatenating per output character.
+    const out = new Array(Math.ceil(byteCount / 3) * 4);
+    let written = 0;
+    let buffer = 0;
+    let bits = 0;
+    for (let i = 0; i < byteCount; i++) {
+        const hi = HEX_NIBBLE[hex.charCodeAt(i * 2)] ?? -1;
+        const lo = HEX_NIBBLE[hex.charCodeAt(i * 2 + 1)] ?? -1;
+        if (hi < 0 || lo < 0)
+            return '';
+        buffer = (buffer << 8) | ((hi << 4) | lo);
+        bits += 8;
+        while (bits >= 6) {
+            bits -= 6;
+            out[written++] = B64_ALPHABET[(buffer >> bits) & 0x3f];
+        }
+    }
+    if (bits > 0) {
+        out[written++] = B64_ALPHABET[(buffer << (6 - bits)) & 0x3f];
+    }
+    while (written % 4 !== 0)
+        out[written++] = '=';
+    out.length = written;
+    return out.join('');
+}
+/**
+ * Render a {\pict …} group as an <img> with a data URL. Returns '' for picture
+ * formats a browser cannot display (metafiles, device-dependent bitmaps).
+ *
+ * Only hexadecimal picture data is read. RTF also allows \binN, where the next
+ * N bytes are raw binary — rare outside of Word's own output, and it cannot
+ * survive readRtfFile() reading the document as text anyway. Such a picture is
+ * skipped rather than mis-decoded: \bin is not a recognised control word here,
+ * so its bytes fall through the tokenizer and the hex filter discards them.
+ */
+function renderPicture(group) {
+    let mime = '';
+    let picw = 0, pich = 0, wgoal = 0, hgoal = 0;
+    let scaleX = 100, scaleY = 100;
+    const hexParts = [];
+    for (const node of group.children) {
+        if (node.type === 'control') {
+            switch (node.word) {
+                case 'pngblip':
+                    mime = 'image/png';
+                    break;
+                case 'jpegblip':
+                    mime = 'image/jpeg';
+                    break;
+                case 'picw':
+                    picw = node.param ?? 0;
+                    break;
+                case 'pich':
+                    pich = node.param ?? 0;
+                    break;
+                case 'picwgoal':
+                    wgoal = node.param ?? 0;
+                    break;
+                case 'pichgoal':
+                    hgoal = node.param ?? 0;
+                    break;
+                case 'picscalex':
+                    scaleX = node.param ?? 100;
+                    break;
+                case 'picscaley':
+                    scaleY = node.param ?? 100;
+                    break;
+                default: break;
+            }
+        }
+        else if (node.type === 'text') {
+            hexParts.push(node.value);
+        }
+        // Nested groups such as {\*\blipuid …} carry no picture data.
+    }
+    if (!mime)
+        return '';
+    const hex = hexParts.join('').replace(/[^0-9a-fA-F]/g, '');
+    if (hex.length < 8)
+        return '';
+    const base64 = hexToBase64(hex);
+    if (!base64)
+        return '';
+    const widthPx = wgoal
+        ? Math.round(wgoal / TWIPS_PER_PX)
+        : Math.round((picw * scaleX) / 100);
+    const heightPx = hgoal
+        ? Math.round(hgoal / TWIPS_PER_PX)
+        : Math.round((pich * scaleY) / 100);
+    const styles = [];
+    if (widthPx > 0)
+        styles.push(`width:${widthPx}px`);
+    if (widthPx > 0 && heightPx > 0)
+        styles.push('height:auto');
+    const style = styles.length ? ` style="${styles.join(';')}"` : '';
+    return `<img src="data:${mime};base64,${base64}"${style} alt="">`;
+}
 // ── Tokenizer ──
 function tokenize(rtf) {
     const tokens = [];
@@ -119,14 +239,18 @@ function tokenize(rtf) {
             i++;
         }
         else {
-            // Plain text - gather until next special char
-            let text = '';
-            while (i < len && rtf[i] !== '\\' && rtf[i] !== '{' && rtf[i] !== '}' && rtf[i] !== '\r' && rtf[i] !== '\n') {
-                text += rtf[i];
+            // Plain text — slice up to the next special char. Slicing rather than
+            // appending char-by-char keeps embedded picture data (which arrives as
+            // one very long text run) from being quadratic.
+            const start = i;
+            while (i < len) {
+                const c = rtf[i];
+                if (c === '\\' || c === '{' || c === '}' || c === '\r' || c === '\n')
+                    break;
                 i++;
             }
-            if (text) {
-                tokens.push({ type: 'text', value: text });
+            if (i > start) {
+                tokens.push({ type: 'text', value: rtf.substring(start, i) });
             }
         }
     }
@@ -227,10 +351,18 @@ export function rtfToHtml(rtfString) {
     let colorTable = [''];
     let fontTable = new Map();
     let currentParagraph = '';
-    let paragraphs = [];
-    let paragraphAligns = [];
+    const paragraphs = [];
+    const paragraphAligns = [];
+    const paragraphCaptions = [];
     let paragraphHasText = false;
     let paragraphHasListMarker = false;
+    let paragraphIsCaption = false;
+    /** Append a finished paragraph, keeping the parallel metadata arrays in sync. */
+    function pushParagraph(html, align, isCaption = false) {
+        paragraphs.push(html);
+        paragraphAligns.push(align);
+        paragraphCaptions.push(isCaption);
+    }
     // Paragraph alignment (reset by \pard, affects cells and paragraphs)
     let currentAlign = 'left';
     // Table state
@@ -330,7 +462,9 @@ export function rtfToHtml(rtfString) {
     const destinationWords = new Set([
         'fonttbl', 'colortbl', 'stylesheet', 'info', 'header', 'footer',
         'headerl', 'headerr', 'headerf', 'footerl', 'footerr', 'footerf',
-        'pict', 'object', 'fldinst', 'xmlnstbl', 'listtable', 'listoverridetable',
+        // \nonshppict duplicates the picture already carried by \*\shppict
+        'nonshppict',
+        'object', 'fldinst', 'xmlnstbl', 'listtable', 'listoverridetable',
         'rsidtbl', 'generator', 'datafield', 'themedata', 'colorschememapping',
         'latentstyles', 'datastore', 'mmathPr', 'author', 'operator',
         'title', 'subject', 'doccomm', 'company', 'category', 'keywords'
@@ -358,26 +492,19 @@ export function rtfToHtml(rtfString) {
             html += '</tr>';
         }
         html += '</table>';
-        paragraphs.push(html);
-        paragraphAligns.push('left');
+        pushParagraph(html, 'left');
         tableRows = [];
     }
     function flushParagraph() {
         flushTable();
         const trimmed = currentParagraph.trim();
-        if (!trimmed) {
-            if (!paragraphHasListMarker) {
-                paragraphs.push(currentParagraph);
-                paragraphAligns.push(currentAlign);
-            }
-        }
-        else {
-            paragraphs.push(currentParagraph);
-            paragraphAligns.push(currentAlign);
+        if (trimmed || !paragraphHasListMarker) {
+            pushParagraph(currentParagraph, currentAlign, paragraphIsCaption);
         }
         currentParagraph = '';
         paragraphHasText = false;
         paragraphHasListMarker = false;
+        paragraphIsCaption = false;
         currentAlign = 'left';
     }
     let pendingUnicodeSkip = 0;
@@ -395,12 +522,32 @@ export function rtfToHtml(rtfString) {
                     continue;
                 }
                 const firstCtrl = node.children.find((n) => n.type === 'control');
+                if (firstCtrl?.word === 'pict') {
+                    const img = renderPicture(node);
+                    if (img) {
+                        currentParagraph += img;
+                        paragraphHasText = true;
+                    }
+                    continue;
+                }
                 if (firstCtrl && destinationWords.has(firstCtrl.word)) {
                     continue;
                 }
                 const hasStarDest = node.children.length >= 2 &&
                     node.children[0].type === 'control' && node.children[0].word === '*';
                 if (hasStarDest) {
+                    const dest = node.children.find((n) => n.type === 'control' && n.word !== '*');
+                    // Word wraps pictures in {\*\shppict{\pict …}} — descend into it
+                    // rather than dropping the picture with the rest of the ignorables.
+                    if (dest?.word === 'shppict') {
+                        stateStack.push(cloneState());
+                        walk(node.children);
+                        stateStack.pop();
+                    }
+                    else if (dest?.word === 'inkcap') {
+                        // Marks the paragraph that follows as a picture caption.
+                        paragraphIsCaption = true;
+                    }
                     continue;
                 }
                 stateStack.push(cloneState());
@@ -574,8 +721,7 @@ export function rtfToHtml(rtfString) {
                         break;
                     case 'page':
                         flushParagraph();
-                        paragraphs.push('<hr>');
-                        paragraphAligns.push('left');
+                        pushParagraph('<hr>', 'left');
                         break;
                     case 'emspace':
                     case 'enspace':
@@ -671,6 +817,21 @@ export function rtfToHtml(rtfString) {
             rendered.push(trimmed);
             continue;
         }
+        // A paragraph tagged by {\*\inkcap} is the description of the figure above it.
+        if (paragraphCaptions[i]) {
+            const last = rendered.length - 1;
+            if (last >= 0 && rendered[last].startsWith('<figure') && !rendered[last].includes('<figcaption')) {
+                rendered[last] = rendered[last].replace('</figure>', `<figcaption>${stripWrappingEm(trimmed)}</figcaption></figure>`);
+                continue;
+            }
+        }
+        // A paragraph holding nothing but pictures becomes a figure, so it can carry
+        // a caption and be aligned/resized as a unit in the editor.
+        if (IMAGE_ONLY_PARAGRAPH.test(trimmed)) {
+            const alignAttr = align !== 'left' ? ` style="text-align:${align}"` : '';
+            rendered.push(`<figure${alignAttr}>${trimmed}</figure>`);
+            continue;
+        }
         const sizeMatch = trimmed.match(/font-size:\s*([\d.]+)pt/);
         if (sizeMatch) {
             const pt = parseFloat(sizeMatch[1]);
@@ -699,6 +860,10 @@ export function rtfToHtml(rtfString) {
 function stripSizeSpan(html) {
     return html.replace(/^<span style="[^"]*font-size:[^"]*">([\s\S]*)<\/span>$/, '$1');
 }
+/** Captions are written as italic text; <figcaption> supplies its own styling. */
+function stripWrappingEm(html) {
+    return html.replace(/^<em>([\s\S]*)<\/em>$/, '$1');
+}
 export function readRtfFile(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();

package/dist/rtf-writer.d.ts

@@ -4,10 +4,24 @@
  * Walks a contenteditable DOM tree and produces a valid RTF 1.x string.
  * Supports: bold, italic, underline, strikethrough, font sizes (h1–h3),
  * foreground colors (\cf), paragraphs, bullet/numbered lists, blockquotes,
- * code blocks, hyperlinks, images (as alt-text placeholders), horizontal
- * rules, line breaks, and Unicode characters.
+ * code blocks, hyperlinks, images (embedded as \pict picture groups with
+ * their captions), horizontal rules, line breaks, and Unicode characters.
  *
  * Background color is intentionally not written — RTF highlight support
  * is inconsistent across viewers (TextEdit uses \AppleHighlight, not \highlight).
  */
+/**
+ * Size htmlToRtf would produce, without doing the conversion.
+ *
+ * Useful for a live indicator — the exact figure requires hex-encoding every
+ * picture, which is too much work to repeat on each keystroke.
+ *
+ * Picture data, which dominates any document that has one, is counted exactly:
+ * two characters per byte. Everything else is approximated per element, which
+ * puts the error at a bounded number of bytes rather than a proportion — so it
+ * is negligible precisely when the number matters, and never more than a few
+ * hundred bytes even when it does not. The output is ASCII, so bytes and
+ * characters are the same number.
+ */
+export declare function estimateRtfBytes(editorEl: HTMLElement): number;
 export declare function htmlToRtf(editorEl: HTMLElement): string;