svelte-rtf-editor 1.2.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,15 +351,28 @@ export function rtfToHtml(rtfString) {
     let colorTable = [''];
     let fontTable = new Map();
     let currentParagraph = '';
-    let paragraphs = [];
+    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
     let tableRows = [];
     let currentRowCells = [];
     let currentRowIsHeader = false;
     let currentRowCellRights = [];
+    let currentRowCellAligns = [];
     let inTableCell = false;
+    let pendingBottomBorder = false; // set by \clbrdrb, confirmed by a real border type
     // First pass: extract color table and font table from the root group
     const rootGroup = tree.children[0]?.type === 'group' ? tree.children[0] : tree;
     for (let i = 0; i < rootGroup.children.length; i++) {
@@ -325,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'
@@ -343,31 +482,30 @@ export function rtfToHtml(rtfString) {
                 const right = row.cellRights[ci] ?? total;
                 const pct = ((right - prevRight) / total * 100).toFixed(1);
                 prevRight = right;
+                const align = row.cellAligns[ci] ?? 'left';
+                const alignStyle = align !== 'left' ? `;text-align:${align}` : '';
                 const style = row.isHeader
-                    ? `border-bottom:1px solid;padding:2px 6px;text-align:left;width:${pct}%`
-                    : `padding:2px 6px;width:${pct}%`;
+                    ? `border-bottom:1px solid;padding:2px 6px;text-align:${align};width:${pct}%`
+                    : `padding:2px 6px;width:${pct}%${alignStyle}`;
                 html += `<${tag} style="${style}">${row.cells[ci] || ''}</${tag}>`;
             }
             html += '</tr>';
         }
         html += '</table>';
-        paragraphs.push(html);
+        pushParagraph(html, 'left');
         tableRows = [];
     }
     function flushParagraph() {
         flushTable();
         const trimmed = currentParagraph.trim();
-        if (!trimmed) {
-            if (!paragraphHasListMarker) {
-                paragraphs.push(currentParagraph);
-            }
-        }
-        else {
-            paragraphs.push(currentParagraph);
+        if (trimmed || !paragraphHasListMarker) {
+            pushParagraph(currentParagraph, currentAlign, paragraphIsCaption);
         }
         currentParagraph = '';
         paragraphHasText = false;
         paragraphHasListMarker = false;
+        paragraphIsCaption = false;
+        currentAlign = 'left';
     }
     let pendingUnicodeSkip = 0;
     function walk(nodes) {
@@ -384,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());
@@ -444,6 +602,18 @@ export function rtfToHtml(rtfString) {
                         if (p != null)
                             state.fontIndex = p;
                         break;
+                    case 'ql':
+                        currentAlign = 'left';
+                        break;
+                    case 'qr':
+                        currentAlign = 'right';
+                        break;
+                    case 'qc':
+                        currentAlign = 'center';
+                        break;
+                    case 'qj':
+                        currentAlign = 'justify';
+                        break;
                     case 'par':
                         if (!inTableCell)
                             flushParagraph();
@@ -452,19 +622,32 @@ export function rtfToHtml(rtfString) {
                         currentRowCells = [];
                         currentRowIsHeader = false;
                         currentRowCellRights = [];
+                        pendingBottomBorder = false;
                         break;
                     case 'trgaph':
                     case 'trkeep':
                     case 'trleft':
                     case 'trhdr':
-                    case 'brdrs':
-                    case 'brdrnil':
                     case 'clbrdrr':
                     case 'clbrdrl':
                     case 'clbrdrt':
+                        pendingBottomBorder = false;
                         break; // table formatting, ignored
                     case 'clbrdrb':
-                        currentRowIsHeader = true;
+                        pendingBottomBorder = true;
+                        break;
+                    case 'brdrnone':
+                    case 'brdrnil':
+                        pendingBottomBorder = false;
+                        break;
+                    case 'brdrs':
+                    case 'brdrdb':
+                    case 'brdrth':
+                    case 'brdrdot':
+                    case 'brdrdash':
+                        if (pendingBottomBorder)
+                            currentRowIsHeader = true;
+                        pendingBottomBorder = false;
                         break;
                     case 'cellx':
                         if (p != null)
@@ -475,14 +658,17 @@ export function rtfToHtml(rtfString) {
                         break;
                     case 'cell':
                         currentRowCells.push(currentParagraph.trim());
+                        currentRowCellAligns.push(currentAlign);
                         currentParagraph = '';
                         paragraphHasText = false;
+                        currentAlign = 'left';
                         break;
                     case 'row':
-                        tableRows.push({ cells: currentRowCells, isHeader: currentRowIsHeader, cellRights: currentRowCellRights });
+                        tableRows.push({ cells: currentRowCells, isHeader: currentRowIsHeader, cellRights: currentRowCellRights, cellAligns: currentRowCellAligns });
                         currentRowCells = [];
                         currentRowIsHeader = false;
                         currentRowCellRights = [];
+                        currentRowCellAligns = [];
                         inTableCell = false;
                         break;
                     case 'pard':
@@ -490,6 +676,7 @@ export function rtfToHtml(rtfString) {
                         state.italic = false;
                         state.underline = false;
                         state.strike = false;
+                        currentAlign = 'left';
                         break;
                     case 'line':
                         currentParagraph += '<br>';
@@ -534,7 +721,7 @@ export function rtfToHtml(rtfString) {
                         break;
                     case 'page':
                         flushParagraph();
-                        paragraphs.push('<hr>');
+                        pushParagraph('<hr>', 'left');
                         break;
                     case 'emspace':
                     case 'enspace':
@@ -608,6 +795,7 @@ export function rtfToHtml(rtfString) {
     const isListLine = (text) => /^[-\u2022]/.test(text.replace(/^&emsp;+/g, ''));
     for (let i = 0; i < trimmedParagraphs.length; i++) {
         const trimmed = trimmedParagraphs[i];
+        const align = paragraphAligns[i] ?? 'left';
         const prev = i > 0 ? trimmedParagraphs[i - 1] : '';
         const next = i + 1 < trimmedParagraphs.length ? trimmedParagraphs[i + 1] : '';
         if (!trimmed) {
@@ -629,23 +817,40 @@ 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]);
+            const alignAttr = align !== 'left' ? ` style="text-align:${align}"` : '';
             if (pt >= 24) {
-                rendered.push(`<h1>${stripSizeSpan(trimmed)}</h1>`);
+                rendered.push(`<h1${alignAttr}>${stripSizeSpan(trimmed)}</h1>`);
                 continue;
             }
             if (pt >= 18) {
-                rendered.push(`<h2>${stripSizeSpan(trimmed)}</h2>`);
+                rendered.push(`<h2${alignAttr}>${stripSizeSpan(trimmed)}</h2>`);
                 continue;
             }
             if (pt >= 14) {
-                rendered.push(`<h3>${stripSizeSpan(trimmed)}</h3>`);
+                rendered.push(`<h3${alignAttr}>${stripSizeSpan(trimmed)}</h3>`);
                 continue;
             }
         }
-        rendered.push(`<p>${trimmed}</p>`);
+        const pStyle = align !== 'left' ? ` style="text-align:${align}"` : '';
+        rendered.push(`<p${pStyle}>${trimmed}</p>`);
     }
     const output = rendered.join('\n');
     // fontTable is parsed (for future font rendering) but not yet used in output
@@ -655,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;