svelte-rtf-editor 1.5.0 → 1.5.2

package/README.md

@@ -169,7 +169,7 @@ import {
 
 | Function                              | Description                                        |
 |---------------------------------------|----------------------------------------------------|
-| `rtfToHtml(rtf: string): string`      | Parse an RTF string and return an HTML string      |
+| `rtfToHtml(rtf: string, options?: { fontSize? }): string` | Parse an RTF string and return an HTML string. `fontSize` is the size of the screen it will be shown on (default 12) |
 | `htmlToRtf(el: HTMLElement, options?: { fontFamily?, fontSize? }): string` | Convert a DOM element's content to RTF, in Arial 12 pt unless told otherwise |
 | `estimateRtfBytes(el: HTMLElement): number` | Approximate RTF size of a DOM element without converting it |
 | `readRtfFile(file: File): Promise<string>` | Read a `.rtf` File object and return HTML     |
@@ -195,7 +195,7 @@ htmlToRtf(el, { fontFamily: 'Calibri', fontSize: 11 });
 - If you call `htmlToRtf` yourself on the editor's content, pass the same options you gave the editor, or the two produce different RTF.
 - `fontFamily` names one font. Given a CSS list such as `'Arial, sans-serif'`, only the first family is used.
 - `fontSize` is rounded to the nearest half-point, which is what RTF measures in, and kept between 1 and 1638 pt.
-- `rtfToHtml` recognizes headings relative to the document's own body size, so a document written at any size reads back with the same headings.
+- If you show RTF in an editor or viewer set to another size, pass the same `fontSize` to `rtfToHtml`. Text at that size then carries no size of its own, text at any other size keeps it, and headings are recognized by the same ratios the writer uses. `InkEditor`'s RTF import and `RtfViewer` do this themselves. At another size than 12 pt, a heading must also be bold, as every heading the writer emits is.
 
 The font has to be installed on the machine that displays the document. The RTF names it, and a reader without it substitutes one of its own.
 

package/dist/RtfViewer.svelte

@@ -19,7 +19,7 @@
     const screenFontFamily = $derived(cssFontFamily(fontFamily));
     const screenFontSize = $derived(normalizeFontSize(fontSize));
 
-    const htmlContent = $derived(rtfToHtml(content));
+    const htmlContent = $derived(rtfToHtml(content, { fontSize }));
 
     let copied = $state(false);
 

package/dist/components/InkEditor.svelte

@@ -694,7 +694,7 @@
 		importing = true;
 
 		try {
-			const html = await readRtfFile(file);
+			const html = await readRtfFile(file, { fontSize });
 			if (editorEl) {
 				selectedImage = null;
 				editorEl.innerHTML = html;

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { default as InkEditor } from './components/InkEditor.svelte';
 export { rtfToHtml, readRtfFile } from './rtf-parser.js';
 export { htmlToRtf, estimateRtfBytes, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from './rtf-writer.js';
 export type { RtfWriteOptions } from './rtf-writer.js';
+export type { RtfReadOptions } from './rtf-parser.js';
 export { htmlToMarkdown, downloadFile } from './utils.js';

package/dist/rtf-parser.d.ts

@@ -10,5 +10,16 @@
  *
  * \cb (character background) is silently ignored on import.
  */
-export declare function rtfToHtml(rtfString: string): string;
-export declare function readRtfFile(file: File): Promise<string>;
+/** Options for rtfToHtml. */
+export interface RtfReadOptions {
+    /**
+     * The body text size of the screen the HTML will be shown on, in points:
+     * the editor's or viewer's fontSize. Text at this size carries no size of
+     * its own, text at any other size keeps its font-size, and headings are
+     * recognized by their ratio to it (HEADING_SCALE). Default: 12, which reads
+     * a document exactly as 1.4.0 did.
+     */
+    fontSize?: number;
+}
+export declare function rtfToHtml(rtfString: string, options?: RtfReadOptions): string;
+export declare function readRtfFile(file: File, options?: RtfReadOptions): Promise<string>;

package/dist/rtf-parser.js

@@ -10,7 +10,7 @@
  *
  * \cb (character background) is silently ignored on import.
  */
-import { HEADING_SCALE } from './rtf-writer.js';
+import { HEADING_SCALE, normalizeFontSize } from './rtf-writer.js';
 // ── Highlight palette (RTF \highlight 1-16) ──
 const HIGHLIGHT_COLORS = {
     1: '#000000', // Black
@@ -357,52 +357,7 @@ const destinationWords = new Set([
     '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) {
+export function rtfToHtml(rtfString, options = {}) {
     const tokens = tokenize(rtfString);
     const tree = buildTree(tokens);
     let colorTable = [''];
@@ -444,9 +399,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);
+    // The screen's body size, in half-points. It is given, not guessed from the
+    // document: guessing misread short documents and ones set below 12 pt.
+    const bodySize = normalizeFontSize(options.fontSize) * 2;
     // State stack for nested groups
     function defaultState() {
         return {
@@ -471,7 +426,7 @@ export function rtfToHtml(rtfString) {
     function cloneState() {
         return { ...currentState() };
     }
-    function buildSpanOpen(state) {
+    function buildSpanOpen(state, withSize = true) {
         const styles = [];
         if (state.colorIndex > 0 && state.colorIndex < colorTable.length) {
             const color = colorTable[state.colorIndex];
@@ -484,7 +439,7 @@ export function rtfToHtml(rtfString) {
             if (bg)
                 styles.push(`background-color:${bg}`);
         }
-        if (state.fontSize && state.fontSize !== bodySize) {
+        if (withSize && state.fontSize && state.fontSize !== bodySize) {
             styles.push(`font-size:${state.fontSize / 2}pt`);
         }
         if (styles.length === 0)
@@ -494,12 +449,16 @@ export function rtfToHtml(rtfString) {
     function wrapText(text, state) {
         if (!text)
             return '';
+        // A size on spaces alone is not shown and would be read as the
+        // paragraph's size, so it is dropped. Underline, strikethrough and
+        // highlight are kept: an underlined blank is a signature line.
+        const onlySpaces = /^[ \t\r\n\f]*$/.test(text);
         let result = text
             .replace(/&/g, '&amp;')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;');
         // Apply span styles
-        const spanOpen = buildSpanOpen(state);
+        const spanOpen = buildSpanOpen(state, !onlySpaces);
         if (spanOpen) {
             result = `${spanOpen}${result}</span>`;
         }
@@ -888,15 +847,19 @@ export function rtfToHtml(rtfString) {
             const halfPoints = Math.round(parseFloat(sizeMatch[1]) * 2);
             const alignAttr = align !== 'left' ? ` style="text-align:${align}"` : '';
             const atLeast = (scale) => halfPoints >= Math.round(bodySize * scale);
-            if (atLeast(HEADING_SCALE.h1)) {
+            // At the default 12 pt, size alone makes a heading, as it always has. At
+            // another screen size, ordinary 12 pt text can be a step above the body,
+            // so a heading must also be bold, as every heading the writer emits is.
+            const looksLikeHeading = bodySize === 24 || /^<strong>/.test(trimmed);
+            if (looksLikeHeading && atLeast(HEADING_SCALE.h1)) {
                 rendered.push(`<h1${alignAttr}>${stripSizeSpan(trimmed)}</h1>`);
                 continue;
             }
-            if (atLeast(HEADING_SCALE.h2)) {
+            if (looksLikeHeading && atLeast(HEADING_SCALE.h2)) {
                 rendered.push(`<h2${alignAttr}>${stripSizeSpan(trimmed)}</h2>`);
                 continue;
             }
-            if (atLeast(HEADING_SCALE.h3)) {
+            if (looksLikeHeading && atLeast(HEADING_SCALE.h3)) {
                 rendered.push(`<h3${alignAttr}>${stripSizeSpan(trimmed)}</h3>`);
                 continue;
             }
@@ -916,13 +879,13 @@ function stripSizeSpan(html) {
 function stripWrappingEm(html) {
     return html.replace(/^<em>([\s\S]*)<\/em>$/, '$1');
 }
-export function readRtfFile(file) {
+export function readRtfFile(file, options = {}) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => {
             try {
                 const text = reader.result;
-                const html = rtfToHtml(text);
+                const html = rtfToHtml(text, options);
                 resolve(html);
             }
             catch (err) {

package/dist/rtf-writer.js

@@ -448,6 +448,11 @@ function walkChildren(parent, ctx) {
         const node = children[i];
         if (node.nodeType === Node.TEXT_NODE) {
             const text = node.textContent || '';
+            // Whitespace between two blocks (the newline in "</p>\n<p>") shows as
+            // nothing in a browser. Written out, it became a space at the start of
+            // the next paragraph.
+            if (!ctx.inPre && COLLAPSIBLE_WHITESPACE.test(text) && besideBlock(node))
+                continue;
             if (ctx.inPre) {
                 // Split before escaping — escapeRtf collapses newlines, so the
                 // line structure a <pre> block depends on has to become \line
@@ -655,6 +660,24 @@ function walkChildren(parent, ctx) {
 function scaled(ctx, ratio) {
     return Math.round(ctx.bodySize * ratio);
 }
+/**
+ * Whitespace a browser collapses: spaces, tabs and line breaks, but not a
+ * non-breaking space, which is there on purpose.
+ */
+const COLLAPSIBLE_WHITESPACE = /^[ \t\r\n\f]*$/;
+const BLOCK_TAGS = new Set([
+    'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'table', 'thead',
+    'tbody', 'tfoot', 'tr', 'td', 'th', 'blockquote', 'pre', 'hr', 'figure', 'figcaption'
+]);
+function isBlock(node) {
+    return node?.nodeType === Node.ELEMENT_NODE && BLOCK_TAGS.has(node.tagName.toLowerCase());
+}
+/** A text node with a block element on either side, or at the edge of one. */
+function besideBlock(node) {
+    const prev = node.previousSibling;
+    const next = node.nextSibling;
+    return isBlock(prev) || isBlock(next) || (!prev && !next && isBlock(node.parentNode));
+}
 function getColorPrefix(el, ctx) {
     // Support both inline style.color (spans) and the color attribute (<font>)
     const color = el.style?.color ||

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-rtf-editor",
-	"version": "1.5.0",
+	"version": "1.5.2",
 	"description": "RTF viewer and rich-text editor components for Svelte 5",
 	"license": "MIT",
 	"homepage": "https://github.com/jcelano/svelte-rtf-editor#readme",