svelte-rtf-editor 1.3.0 → 1.5.0

package/dist/rtf-parser.js

@@ -4,11 +4,13 @@
  * 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.
  */
+import { HEADING_SCALE } from './rtf-writer.js';
 // ── Highlight palette (RTF \highlight 1-16) ──
 const HIGHLIGHT_COLORS = {
     1: '#000000', // Black
@@ -28,6 +30,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 +240,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) });
             }
         }
     }
@@ -220,6 +345,62 @@ function parseFontTable(group) {
     }
     return fonts;
 }
+// ── Body size ──
+/** Groups whose content is not document text. */
+const destinationWords = new Set([
+    'fonttbl', 'colortbl', 'stylesheet', 'info', 'header', 'footer',
+    'headerl', 'headerr', 'headerf', 'footerl', 'footerr', 'footerf',
+    // \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'
+]);
+/** Default RTF font size: 12 pt, in half-points. */
+const DEFAULT_HALF_POINTS = 24;
+/**
+ * The document's body text size, in half-points: the size most of its text is
+ * set in. Headings are recognized relative to it, so a document written at
+ * 10 or 14 pt keeps its paragraphs and headings apart instead of being judged
+ * against a fixed 12 pt.
+ */
+function bodyHalfPoints(root) {
+    const chars = new Map();
+    function visit(nodes, size) {
+        for (const node of nodes) {
+            if (node.type === 'group') {
+                const first = node.children.find((n) => n.type === 'control');
+                const starred = node.children[0]?.type === 'control' && node.children[0].word === '*';
+                if (starred || (first && (first.word === 'pict' || destinationWords.has(first.word))))
+                    continue;
+                visit(node.children, size);
+            }
+            else if (node.type === 'control') {
+                if (node.word === 'fs' && node.param != null && node.param > 0)
+                    size = node.param;
+                else if (node.word === 'plain')
+                    size = DEFAULT_HALF_POINTS;
+            }
+            else {
+                const n = node.value.trim().length;
+                if (n)
+                    chars.set(size, (chars.get(size) ?? 0) + n);
+            }
+        }
+        return size;
+    }
+    visit(root.children, DEFAULT_HALF_POINTS);
+    let best = DEFAULT_HALF_POINTS;
+    let most = 0;
+    for (const [size, n] of chars) {
+        if (n > most) {
+            best = size;
+            most = n;
+        }
+    }
+    return best;
+}
 // ── Renderer ──
 export function rtfToHtml(rtfString) {
     const tokens = tokenize(rtfString);
@@ -227,10 +408,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
@@ -255,6 +444,9 @@ export function rtfToHtml(rtfString) {
             }
         }
     }
+    // Sizes are shown relative to the body: body text carries no size of its
+    // own, and headings are recognized by their ratio to it.
+    const bodySize = bodyHalfPoints(rootGroup);
     // State stack for nested groups
     function defaultState() {
         return {
@@ -292,9 +484,8 @@ export function rtfToHtml(rtfString) {
             if (bg)
                 styles.push(`background-color:${bg}`);
         }
-        const ptSize = state.fontSize / 2;
-        if (ptSize && ptSize !== 12) {
-            styles.push(`font-size:${ptSize}pt`);
+        if (state.fontSize && state.fontSize !== bodySize) {
+            styles.push(`font-size:${state.fontSize / 2}pt`);
         }
         if (styles.length === 0)
             return '';
@@ -327,14 +518,6 @@ export function rtfToHtml(rtfString) {
         return result;
     }
     let skipDepth = 0;
-    const destinationWords = new Set([
-        'fonttbl', 'colortbl', 'stylesheet', 'info', 'header', 'footer',
-        'headerl', 'headerr', 'headerf', 'footerl', 'footerr', 'footerf',
-        'pict', 'object', 'fldinst', 'xmlnstbl', 'listtable', 'listoverridetable',
-        'rsidtbl', 'generator', 'datafield', 'themedata', 'colorschememapping',
-        'latentstyles', 'datastore', 'mmathPr', 'author', 'operator',
-        'title', 'subject', 'doccomm', 'company', 'category', 'keywords'
-    ]);
     function flushTable() {
         if (tableRows.length === 0)
             return;
@@ -358,26 +541,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 +571,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 +770,7 @@ export function rtfToHtml(rtfString) {
                         break;
                     case 'page':
                         flushParagraph();
-                        paragraphs.push('<hr>');
-                        paragraphAligns.push('left');
+                        pushParagraph('<hr>', 'left');
                         break;
                     case 'emspace':
                     case 'enspace':
@@ -671,19 +866,37 @@ 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]);
+            // Compared in half-points, rounded the way the writer rounds them, so
+            // a heading written at any body size is read back as the same level.
+            const halfPoints = Math.round(parseFloat(sizeMatch[1]) * 2);
             const alignAttr = align !== 'left' ? ` style="text-align:${align}"` : '';
-            if (pt >= 24) {
+            const atLeast = (scale) => halfPoints >= Math.round(bodySize * scale);
+            if (atLeast(HEADING_SCALE.h1)) {
                 rendered.push(`<h1${alignAttr}>${stripSizeSpan(trimmed)}</h1>`);
                 continue;
             }
-            if (pt >= 18) {
+            if (atLeast(HEADING_SCALE.h2)) {
                 rendered.push(`<h2${alignAttr}>${stripSizeSpan(trimmed)}</h2>`);
                 continue;
             }
-            if (pt >= 14) {
+            if (atLeast(HEADING_SCALE.h3)) {
                 rendered.push(`<h3${alignAttr}>${stripSizeSpan(trimmed)}</h3>`);
                 continue;
             }
@@ -699,6 +912,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

@@ -2,12 +2,64 @@
  * HTML to RTF converter
  *
  * Walks a contenteditable DOM tree and produces a valid RTF 1.x string.
- * Supports: bold, italic, underline, strikethrough, font sizes (h1–h3),
+ * Supports: a document font and body size (Arial 12 pt by default, set with
+ * RtfWriteOptions), 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).
  */
-export declare function htmlToRtf(editorEl: HTMLElement): string;
+/** Options for htmlToRtf. */
+export interface RtfWriteOptions {
+    /**
+     * Font for the whole document: body text, headings, lists and tables.
+     * Code keeps a monospace font. Default: Arial.
+     */
+    fontFamily?: string;
+    /**
+     * Body text size in points. Headings scale from it. Default: 12.
+     */
+    fontSize?: number;
+}
+/** Font used when no fontFamily is given. */
+export declare const DEFAULT_FONT_FAMILY = "Arial";
+/** Body text size, in points, used when no fontSize is given. */
+export declare const DEFAULT_FONT_SIZE = 12;
+/**
+ * Heading sizes as a multiple of the body size: at 12 pt, h1 is 24 pt, h2 18 pt
+ * and h3 14 pt. The parser reads headings back with the same ratios.
+ */
+export declare const HEADING_SCALE: {
+    readonly h1: 2;
+    readonly h2: 1.5;
+    readonly h3: number;
+};
+/**
+ * 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;
+/**
+ * CSS font-family value for a font name, with the generic fallback that
+ * matches it, e.g. "Arial", sans-serif.
+ */
+export declare function cssFontFamily(name: string | undefined): string;
+/**
+ * A body size in points, as the RTF will carry it: rounded to the half-point
+ * RTF measures in, kept within what readers accept, and the default for
+ * missing or nonsense input. The editor and viewer show this same size, so
+ * the screen and the RTF agree.
+ */
+export declare function normalizeFontSize(fontSize: number | undefined): number;
+export declare function htmlToRtf(editorEl: HTMLElement, options?: RtfWriteOptions): string;