svelte-rtf-editor 1.5.1 → 1.5.3

package/README.md

@@ -163,15 +163,16 @@ editor.importRtf()        // → void    — open the file picker to import .rtf
 ```ts
 import {
   rtfToHtml, htmlToRtf, estimateRtfBytes, readRtfFile, htmlToMarkdown, downloadFile,
-  DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE
+  DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, isSafeLinkUrl
 } from 'svelte-rtf-editor';
 ```
 
 | 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 |
+| `isSafeLinkUrl(url: string): boolean` | Whether a link address is a web, mail or phone address; `htmlToRtf` writes any other link as its text alone |
 | `readRtfFile(file: File): Promise<string>` | Read a `.rtf` File object and return HTML     |
 | `htmlToMarkdown(el: HTMLElement): string` | Convert a DOM element's content to Markdown   |
 | `downloadFile(name, content, mime): void` | Trigger a file download in the browser        |
@@ -195,7 +196,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

@@ -56,6 +56,7 @@
 	import {
 		htmlToRtf,
 		estimateRtfBytes,
+		isSafeLinkUrl,
 		cssFontFamily,
 		normalizeFontSize,
 		DEFAULT_FONT_FAMILY,
@@ -148,6 +149,7 @@
 	let linkModalOpen: boolean = $state(false);
 	let imageModalOpen: boolean = $state(false);
 	let linkUrl: string = $state('');
+	let linkError: string = $state('');
 	let linkText: string = $state('');
 	let imageUrl: string = $state('');
 	let imageAlt: string = $state('');
@@ -363,11 +365,20 @@
 		saveSelection();
 		linkUrl = '';
 		linkText = '';
+		linkError = '';
 		linkModalOpen = true;
 	}
 
 	function applyLink(): void {
 		if (!linkUrl) { linkModalOpen = false; return; }
+		// Only a web, mail or phone address becomes a link; a javascript: address would
+		// run when clicked in the editor and in any viewer of the stored HTML. The dialog
+		// stays open and says why, rather than closing as if the link had been added.
+		if (!isSafeLinkUrl(linkUrl)) {
+			linkError = 'Enter a web address (https://…), an email address (mailto:…) or a phone number (tel:…).';
+			return;
+		}
+		linkError = '';
 		restoreSelection();
 		editorEl?.focus();
 
@@ -694,7 +705,7 @@
 		importing = true;
 
 		try {
-			const html = await readRtfFile(file);
+			const html = await readRtfFile(file, { fontSize });
 			if (editorEl) {
 				selectedImage = null;
 				editorEl.innerHTML = html;
@@ -875,7 +886,12 @@
 		placeholder="https://example.com"
 		bind:value={linkUrl}
 		onkeydown={(e) => e.key === 'Enter' && applyLink()}
+		aria-invalid={linkError ? 'true' : undefined}
+		aria-describedby={linkError ? 'ink-link-error' : undefined}
 	/>
+	{#if linkError}
+		<p class="ink-modal-error" id="ink-link-error" role="alert">{linkError}</p>
+	{/if}
 	{#snippet actions()}
 		<button class="ink-btn-ghost" onclick={() => (linkModalOpen = false)}>Cancel</button>
 		<button class="ink-btn-primary" onclick={applyLink}>Insert</button>
@@ -1178,6 +1194,12 @@
 		color: var(--text-muted, #8a7e72);
 	}
 
+	.ink-modal-error {
+		margin: 0 0 12px;
+		font-size: 12px;
+		color: var(--danger, #b42318);
+	}
+
 	.ink-modal-or {
 		display: flex;
 		align-items: center;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as RtfViewer } from './RtfViewer.svelte';
 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 { htmlToRtf, estimateRtfBytes, isSafeLinkUrl, 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/index.js

@@ -3,5 +3,5 @@ export { default as RtfViewer } from './RtfViewer.svelte';
 export { default as InkEditor } from './components/InkEditor.svelte';
 // RTF utilities
 export { rtfToHtml, readRtfFile } from './rtf-parser.js';
-export { htmlToRtf, estimateRtfBytes, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from './rtf-writer.js';
+export { htmlToRtf, estimateRtfBytes, isSafeLinkUrl, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from './rtf-writer.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,10 +399,9 @@ export function rtfToHtml(rtfString) {
             }
         }
     }
-    // Headings are recognized by their ratio to the body size. Text keeps its
-    // own size, though: anything other than 12 pt carries a font-size, so a
-    // document written at 9 pt still shows at 9 pt.
-    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 {
@@ -472,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];
@@ -485,7 +439,7 @@ export function rtfToHtml(rtfString) {
             if (bg)
                 styles.push(`background-color:${bg}`);
         }
-        if (state.fontSize && state.fontSize !== DEFAULT_HALF_POINTS) {
+        if (withSize && state.fontSize && state.fontSize !== bodySize) {
             styles.push(`font-size:${state.fontSize / 2}pt`);
         }
         if (styles.length === 0)
@@ -495,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>`;
         }
@@ -889,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;
             }
@@ -917,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.d.ts

@@ -50,6 +50,19 @@ export declare const HEADING_SCALE: {
  * characters are the same number.
  */
 export declare function estimateRtfBytes(editorEl: HTMLElement): number;
+/**
+ * The address a link should carry in the RTF, or null if it should not be a link.
+ *
+ * Only an absolute web, mail or phone address qualifies. A relative path, a UNC path
+ * (\\server\share) or a javascript:, data:, file: or vbscript: address is refused: the
+ * receiving system opens a link in its own context, where a relative or UNC path names
+ * a file on the reader's network. The address returned is the parsed one, which
+ * percent-encodes characters such as a quote that would otherwise end the field's
+ * address and add switches of its own.
+ */
+export declare function linkTarget(url: string): string | null;
+/** Whether a link address is an absolute web, mail or phone address (see linkTarget). */
+export declare function isSafeLinkUrl(url: string): boolean;
 /**
  * CSS font-family value for a font name, with the generic fallback that
  * matches it, e.g. "Arial", sans-serif.

package/dist/rtf-writer.js

@@ -86,7 +86,10 @@ function escapeRtf(text) {
         else if (ch === '}')
             out += '\\}';
         else if (code > 127) {
-            out += `\\u${code}\\'3f`;
+            // RTF's \uN is a SIGNED 16-bit number: from U+8000 up, and for each half of
+            // an emoji's surrogate pair, it is written as N - 65536. Written unsigned,
+            // Word and Epic read it as a different character.
+            out += `\\u${code > 32767 ? code - 65536 : code}\\'3f`;
         }
         else {
             out += ch;
@@ -301,8 +304,28 @@ const BLOCK_OVERHEAD_BYTES = {
     figcaption: 29,
     tr: 45,
     td: 55,
-    th: 69 // a header cell also carries \clbrdrb\brdrs
+    th: 69, // a header cell also carries \clbrdrb\brdrs
+    // Inline formatting: the control words on either side of the text.
+    b: 7, // "\b " + "\b0 "
+    strong: 7,
+    i: 7,
+    em: 7,
+    u: 12, // "\ul " + "\ulnone "
+    s: 17, // "\strike " + "\strike0 "
+    strike: 17,
+    del: 17,
+    sup: 19, // "\super " + "\nosupersub "
+    sub: 17,
+    code: 8, // "\f1 " + "\f0 "
+    br: 6, // "\line "
+    hr: 154, // "\pard\qc " + 20 x "\emdash" + "\par "
+    ul: 0,
+    ol: 0
 };
+/** Elements that write a paragraph of their own, which inside a table cell carries \intbl. */
+const CELL_PARAGRAPH_TAGS = new Set(['p', 'div', 'h1', 'h2', 'h3', 'li', 'blockquote', 'pre', 'hr', 'figure', 'figcaption']);
+/** The field wrapper around a link, apart from its address. */
+const LINK_OVERHEAD_BYTES = '{\\field{\\*\\fldinst HYPERLINK ""}{\\fldrslt\\ul\\cf1 \\cf0\\ulnone }}'.length;
 /**
  * Size htmlToRtf would produce, without doing the conversion.
  *
@@ -321,17 +344,75 @@ export function estimateRtfBytes(editorEl) {
     for (const img of Array.from(editorEl.querySelectorAll('img'))) {
         const src = img.getAttribute('src') || '';
         const comma = src.indexOf(',');
-        // A picture that cannot be embedded costs only its placeholder text.
-        if (!src.startsWith('data:image/') || comma < 0)
+        if (!src.startsWith('data:image/') || comma < 0) {
+            // A picture that cannot be embedded costs its placeholder text.
+            total += `\\i [Image: ]\\i0 `.length + escapeRtf(img.getAttribute('alt') || src || 'image').length;
             continue;
+        }
         total += base64ByteLength(src.slice(comma + 1)) * 2 + PICTURE_OVERHEAD_BYTES;
     }
-    total += (editorEl.textContent || '').length;
+    // Text at its escaped length: a character outside ASCII costs its \uN\'3f escape,
+    // six to nine bytes rather than one.
+    total += escapeRtf(editorEl.textContent || '').length;
     for (const el of Array.from(editorEl.querySelectorAll('*'))) {
-        total += BLOCK_OVERHEAD_BYTES[el.tagName.toLowerCase()] ?? 0;
+        const tag = el.tagName.toLowerCase();
+        total += BLOCK_OVERHEAD_BYTES[tag] ?? 0;
+        if (tag === 'a') {
+            const target = linkTarget(el.getAttribute('href') || '');
+            if (target)
+                total += LINK_OVERHEAD_BYTES + escapeRtf(target).length;
+        }
+        // Each line break in a code block is written as "\line " (6) and counted as 1.
+        if (tag === 'pre')
+            total += ((el.textContent || '').match(/\r\n|\r|\n/g)?.length ?? 0) * 5;
+        // A paragraph a block writes inside a table cell also carries \intbl (6). A list
+        // writes one paragraph per item, so the item is counted, not the list.
+        if (CELL_PARAGRAPH_TAGS.has(tag) && el.closest('td, th'))
+            total += 6;
+        // Every cell in a row with a header cell carries \clbrdrb\brdrs.
+        if (tag === 'td' && el.parentElement?.querySelector(':scope > th'))
+            total += 14;
+        // A figure with a caption and no picture writes its caption twice.
+        if (tag === 'figure' && !el.querySelector('img'))
+            total += escapeRtf(el.textContent || '').length;
+        // A color costs "\cfN " on and off and, the first time, its color-table entry (at most
+        // 22 bytes, "\red255\green255\blue255;"); a size costs "\fsNN " on and off.
+        if (el.style?.color || (tag === 'font' && el.hasAttribute('color')))
+            total += 10 + 22;
+        if (el.style?.fontSize)
+            total += 14; // "\fsNNN " on and off, for sizes up to 499 pt
     }
     return total;
 }
+// ── Link helpers ──
+/**
+ * The address a link should carry in the RTF, or null if it should not be a link.
+ *
+ * Only an absolute web, mail or phone address qualifies. A relative path, a UNC path
+ * (\\server\share) or a javascript:, data:, file: or vbscript: address is refused: the
+ * receiving system opens a link in its own context, where a relative or UNC path names
+ * a file on the reader's network. The address returned is the parsed one, which
+ * percent-encodes characters such as a quote that would otherwise end the field's
+ * address and add switches of its own.
+ */
+export function linkTarget(url) {
+    const value = url.trim();
+    if (!/^(https?:\/\/|mailto:|tel:)/i.test(value) || value.includes('\\'))
+        return null;
+    try {
+        const parsed = new URL(value);
+        if (!['http:', 'https:', 'mailto:', 'tel:'].includes(parsed.protocol))
+            return null;
+        return parsed.href.replace(/"/g, '%22');
+    }
+    catch {
+        return null;
+    }
+}
+/** Whether a link address is an absolute web, mail or phone address (see linkTarget). */
+export function isSafeLinkUrl(url) {
+    return linkTarget(url) !== null;
+}
 // ── Font helpers ──
 /**
  * A single font name, safe for the font table. A CSS list such as
@@ -411,7 +492,15 @@ export function htmlToRtf(editorEl, options = {}) {
         inPre: false,
         listCounter: 0,
         inTableCell: false,
-        root: editorEl
+        root: editorEl,
+        bold: false,
+        italic: false,
+        underline: false,
+        strike: false,
+        size: bodySize,
+        color: 0,
+        script: null,
+        mono: false
     });
     const rtf = '{\\rtf1\\ansi\\ansicpg1252\\deff0' +
         fontTable +
@@ -448,6 +537,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
@@ -465,34 +559,57 @@ function walkChildren(parent, ctx) {
         const tag = el.tagName.toLowerCase();
         switch (tag) {
             // Heading sizes keep their ratio to the body (HEADING_SCALE).
-            case 'h1':
-                rtf += `\\pard\\f0\\fs${scaled(ctx, HEADING_SCALE.h1)}\\b ${walkChildren(el, ctx)}\\b0\\fs${ctx.bodySize}\\par `;
+            case 'h1': {
+                const size = scaled(ctx, HEADING_SCALE.h1);
+                rtf += `\\pard${inCell(ctx)}\\f0\\fs${size}\\b ${walkChildren(el, { ...ctx, bold: true, size })}${ctx.bold ? '' : '\\b0'}\\fs${ctx.size}\\par `;
                 break;
-            case 'h2':
-                rtf += `\\pard\\f0\\fs${scaled(ctx, HEADING_SCALE.h2)}\\b ${walkChildren(el, ctx)}\\b0\\fs${ctx.bodySize}\\par `;
+            }
+            case 'h2': {
+                const size = scaled(ctx, HEADING_SCALE.h2);
+                rtf += `\\pard${inCell(ctx)}\\f0\\fs${size}\\b ${walkChildren(el, { ...ctx, bold: true, size })}${ctx.bold ? '' : '\\b0'}\\fs${ctx.size}\\par `;
                 break;
-            case 'h3':
-                rtf += `\\pard\\f0\\fs${scaled(ctx, HEADING_SCALE.h3)}\\b ${walkChildren(el, ctx)}\\b0\\fs${ctx.bodySize}\\par `;
+            }
+            case 'h3': {
+                const size = scaled(ctx, HEADING_SCALE.h3);
+                rtf += `\\pard${inCell(ctx)}\\f0\\fs${size}\\b ${walkChildren(el, { ...ctx, bold: true, size })}${ctx.bold ? '' : '\\b0'}\\fs${ctx.size}\\par `;
                 break;
+            }
             case 'p':
             case 'div': {
-                // Inside a table cell \pard is already declared; just emit inline content.
+                // Inside a table cell the cell has already declared \pard\intbl. Each paragraph
+                // ends with \par, so two paragraphs in one cell stay two (the cell drops the last
+                // one's); one that follows a list or heading in the cell restates \pard\intbl,
+                // so it does not inherit that block's indent.
+                // Text typed straight into the parent before this block ("abc<div>def</div>",
+                // the shape Chrome makes on Enter) has no paragraph of its own: end it here, or
+                // the two lines run together.
+                const afterLooseText = followsInlineContent(el);
                 if (ctx.inTableCell) {
-                    rtf += walkChildren(el, ctx);
+                    const restate = afterLooseText
+                        ? '\\par \\pard\\intbl '
+                        : el.previousElementSibling ? '\\pard\\intbl ' : '';
+                    if (isBlankLine(el)) {
+                        rtf += `${restate}\\par `;
+                        break;
+                    }
+                    const colorIdx = colorIndexOf(el, ctx);
+                    const inner = walkChildren(el, colorIdx != null ? { ...ctx, color: colorIdx } : ctx);
+                    rtf += colorIdx != null
+                        ? `${restate}\\cf${colorIdx} ${inner}\\cf${ctx.color} \\par `
+                        : `${restate}${inner}\\par `;
                     break;
                 }
                 // A <p> with no children or only a single <br> is a blank line —
                 // emit a bare \par rather than \pard \line\par, which adds an extra line.
-                const isBlankLine = el.childNodes.length === 0 ||
-                    (el.childNodes.length === 1 && el.childNodes[0].nodeName === 'BR');
-                if (isBlankLine) {
-                    rtf += '\\par ';
+                if (isBlankLine(el)) {
+                    rtf += afterLooseText ? '\\par \\par ' : '\\par ';
                     break;
                 }
-                const inlineRtf = walkChildren(el, ctx);
-                const colorPrefix = getColorPrefix(el, ctx);
-                const colorSuffix = colorPrefix ? '\\cf0 ' : '';
-                rtf += `\\pard ${colorPrefix}${inlineRtf}${colorSuffix}\\par `;
+                const colorIdx = colorIndexOf(el, ctx);
+                const inlineRtf = walkChildren(el, colorIdx != null ? { ...ctx, color: colorIdx } : ctx);
+                const colorPrefix = colorIdx != null ? `\\cf${colorIdx} ` : '';
+                const colorSuffix = colorIdx != null ? `\\cf${ctx.color} ` : '';
+                rtf += `${afterLooseText ? '\\par ' : ''}\\pard ${colorPrefix}${inlineRtf}${colorSuffix}\\par `;
                 break;
             }
             case 'table': {
@@ -524,7 +641,7 @@ function walkChildren(parent, ctx) {
                     // Cell bodies
                     const cellCtx = { ...ctx, inTableCell: true };
                     for (const cell of cells) {
-                        const content = walkChildren(cell, cellCtx);
+                        const content = withoutTrailingPar(walkChildren(cell, cellCtx));
                         rowRtf += `{\\pard\\intbl \\f0 \\sa0 \\li0 \\fi0 ${content}\\par}\\cell`;
                     }
                     rowRtf += '}\\intbl\\row}';
@@ -533,18 +650,20 @@ function walkChildren(parent, ctx) {
                 break;
             }
             case 'blockquote':
-                rtf += `\\pard\\li720\\i ${walkChildren(el, ctx)}\\i0\\par `;
+                rtf += `\\pard${inCell(ctx)}\\li720\\i ${walkChildren(el, { ...ctx, italic: true })}${ctx.italic ? '' : '\\i0'}\\par `;
                 break;
-            case 'pre':
-                rtf += `\\pard\\f1\\fs${scaled(ctx, PRE_SCALE)} ${walkChildren(el, { ...ctx, inPre: true })}\\f0\\fs${ctx.bodySize}\\par `;
+            case 'pre': {
+                const size = scaled(ctx, PRE_SCALE);
+                rtf += `\\pard${inCell(ctx)}\\f1\\fs${size} ${walkChildren(el, { ...ctx, inPre: true, size })}\\f0\\fs${ctx.size}\\par `;
                 break;
+            }
             case 'hr':
-                rtf += `\\pard\\qc \\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\par `;
+                rtf += `\\pard${inCell(ctx)}\\qc \\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\par `;
                 break;
             case 'ul': {
                 const items = el.querySelectorAll(':scope > li');
                 items.forEach((li) => {
-                    rtf += `\\pard\\li720\\fi-360\\bullet\\tab ${walkChildren(li, ctx)}\\par `;
+                    rtf += `\\pard${inCell(ctx)}\\li720\\fi-360\\bullet\\tab ${walkChildren(li, ctx)}\\par `;
                 });
                 break;
             }
@@ -552,7 +671,7 @@ function walkChildren(parent, ctx) {
                 let counter = 1;
                 const items = el.querySelectorAll(':scope > li');
                 items.forEach((li) => {
-                    rtf += `\\pard\\li720\\fi-360 ${counter}.\\tab ${walkChildren(li, ctx)}\\par `;
+                    rtf += `\\pard${inCell(ctx)}\\li720\\fi-360 ${counter}.\\tab ${walkChildren(li, ctx)}\\par `;
                     counter++;
                 });
                 break;
@@ -562,42 +681,50 @@ function walkChildren(parent, ctx) {
                 break;
             case 'strong':
             case 'b':
-                rtf += `\\b ${walkChildren(el, ctx)}\\b0 `;
+                rtf += ctx.bold ? walkChildren(el, ctx) : `\\b ${walkChildren(el, { ...ctx, bold: true })}\\b0 `;
                 break;
             case 'em':
             case 'i':
-                rtf += `\\i ${walkChildren(el, ctx)}\\i0 `;
+                rtf += ctx.italic ? walkChildren(el, ctx) : `\\i ${walkChildren(el, { ...ctx, italic: true })}\\i0 `;
                 break;
             case 'u':
-                rtf += `\\ul ${walkChildren(el, ctx)}\\ulnone `;
+                rtf += ctx.underline ? walkChildren(el, ctx) : `\\ul ${walkChildren(el, { ...ctx, underline: true })}\\ulnone `;
                 break;
             case 's':
             case 'strike':
             case 'del':
-                rtf += `\\strike ${walkChildren(el, ctx)}\\strike0 `;
+                rtf += ctx.strike ? walkChildren(el, ctx) : `\\strike ${walkChildren(el, { ...ctx, strike: true })}\\strike0 `;
                 break;
             case 'sup':
-                rtf += `\\super ${walkChildren(el, ctx)}\\nosupersub `;
-                break;
-            case 'sub':
-                rtf += `\\sub ${walkChildren(el, ctx)}\\nosupersub `;
+            case 'sub': {
+                const script = tag === 'sup' ? 'super' : 'sub';
+                if (ctx.script === script) {
+                    rtf += walkChildren(el, ctx);
+                    break;
+                }
+                const restore = ctx.script ? `\\${ctx.script} ` : '\\nosupersub ';
+                rtf += `\\${script} ${walkChildren(el, { ...ctx, script })}${restore}`;
                 break;
+            }
             case 'code':
-                if (!ctx.inPre) {
-                    rtf += `\\f1 ${walkChildren(el, ctx)}\\f0 `;
+                if (!ctx.inPre && !ctx.mono) {
+                    rtf += `\\f1 ${walkChildren(el, { ...ctx, mono: true })}\\f0 `;
                 }
                 else {
                     rtf += walkChildren(el, ctx);
                 }
                 break;
             case 'a': {
-                const href = el.getAttribute('href') || '';
-                const inner = walkChildren(el, ctx);
-                if (href) {
-                    rtf += `{\\field{\\*\\fldinst HYPERLINK "${escapeRtf(href)}"}{\\fldrslt\\ul\\cf1 ${inner}\\cf0\\ulnone }}`;
+                // A link is written only for an absolute web, mail or phone address; anything
+                // else (a relative or UNC path, javascript:, data:, file:) as its text alone.
+                const target = linkTarget(el.getAttribute('href') || '');
+                if (target) {
+                    const inner = walkChildren(el, { ...ctx, underline: true, color: 1 });
+                    const underlineOff = ctx.underline ? '' : '\\ulnone';
+                    rtf += `{\\field{\\*\\fldinst HYPERLINK "${escapeRtf(target)}"}{\\fldrslt\\ul\\cf1 ${inner}\\cf${ctx.color}${underlineOff} }}`;
                 }
                 else {
-                    rtf += inner;
+                    rtf += walkChildren(el, ctx);
                 }
                 break;
             }
@@ -611,11 +738,11 @@ function walkChildren(parent, ctx) {
                 const caption = (el.querySelector('figcaption')?.textContent || '').trim();
                 const align = alignControl(el);
                 if (img)
-                    rtf += `\\pard${align} ${imageBody(img)}\\par `;
+                    rtf += `\\pard${inCell(ctx)}${align} ${imageBody(img)}\\par `;
                 else
                     rtf += walkChildren(el, ctx);
                 if (caption) {
-                    rtf += `{\\*\\inkcap}\\pard${align}\\i ${escapeRtf(caption)}\\i0\\par `;
+                    rtf += `{\\*\\inkcap}\\pard${inCell(ctx)}${align}\\i ${escapeRtf(caption)}${ctx.italic ? '' : '\\i0'}\\par `;
                 }
                 break;
             }
@@ -630,18 +757,22 @@ function walkChildren(parent, ctx) {
                 rtf += '\\line ';
                 break;
             case 'span': {
-                const colorPfx = getColorPrefix(el, ctx);
-                const sizePfx = getSizePrefix(el);
-                const sizesfx = sizePfx ? `\\fs${ctx.bodySize} ` : '';
-                const colorSfx = colorPfx ? '\\cf0 ' : '';
-                rtf += `${colorPfx}${sizePfx}${walkChildren(el, ctx)}${sizesfx}${colorSfx}`;
+                const colorIdx = colorIndexOf(el, ctx);
+                const size = sizeOf(el);
+                const colorPfx = colorIdx != null ? `\\cf${colorIdx} ` : '';
+                const sizePfx = size != null ? `\\fs${size} ` : '';
+                const sizeSfx = size != null ? `\\fs${ctx.size} ` : '';
+                const colorSfx = colorIdx != null ? `\\cf${ctx.color} ` : '';
+                const inner = walkChildren(el, { ...ctx, color: colorIdx ?? ctx.color, size: size ?? ctx.size });
+                rtf += `${colorPfx}${sizePfx}${inner}${sizeSfx}${colorSfx}`;
                 break;
             }
             // <font color="..."> is produced by execCommand('foreColor') in contenteditable
             case 'font': {
-                const colorPfx = getColorPrefix(el, ctx);
-                const colorSfx = colorPfx ? '\\cf0 ' : '';
-                rtf += `${colorPfx}${walkChildren(el, ctx)}${colorSfx}`;
+                const colorIdx = colorIndexOf(el, ctx);
+                const colorPfx = colorIdx != null ? `\\cf${colorIdx} ` : '';
+                const colorSfx = colorIdx != null ? `\\cf${ctx.color} ` : '';
+                rtf += `${colorPfx}${walkChildren(el, { ...ctx, color: colorIdx ?? ctx.color })}${colorSfx}`;
                 break;
             }
             default:
@@ -655,33 +786,81 @@ function walkChildren(parent, ctx) {
 function scaled(ctx, ratio) {
     return Math.round(ctx.bodySize * ratio);
 }
-function getColorPrefix(el, ctx) {
+/**
+ * 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));
+}
+/** A <p> or <div> with no content, or only a <br>: a blank line. */
+function isBlankLine(el) {
+    return el.childNodes.length === 0 || (el.childNodes.length === 1 && el.childNodes[0].nodeName === 'BR');
+}
+/**
+ * Whether the nearest sibling before this element, skipping collapsible whitespace, is
+ * text or an inline element: content with no paragraph of its own.
+ */
+function followsInlineContent(el) {
+    let prev = el.previousSibling;
+    while (prev && prev.nodeType === Node.TEXT_NODE && COLLAPSIBLE_WHITESPACE.test(prev.textContent || '')) {
+        prev = prev.previousSibling;
+    }
+    if (!prev)
+        return false;
+    if (prev.nodeType === Node.TEXT_NODE)
+        return true;
+    return prev.nodeType === Node.ELEMENT_NODE && !isBlock(prev);
+}
+/**
+ * The cell's own \par ends its last paragraph, so that paragraph's mark is dropped. Only a
+ * real control word: "\par " preceded by an odd run of backslashes is escaped text.
+ */
+function withoutTrailingPar(content) {
+    if (!content.endsWith('\\par '))
+        return content;
+    let slashes = 0;
+    for (let i = content.length - 6; i >= 0 && content[i] === '\\'; i--)
+        slashes++;
+    return slashes % 2 === 0 ? content.slice(0, -5) : content;
+}
+/** \intbl for a paragraph a block writes inside a table cell, so it stays in the cell. */
+function inCell(ctx) {
+    return ctx.inTableCell ? '\\intbl' : '';
+}
+/** Color-table index of the element's own color, or null when it sets none. */
+function colorIndexOf(el, ctx) {
     // Support both inline style.color (spans) and the color attribute (<font>)
     const color = el.style?.color ||
         (el.tagName.toLowerCase() === 'font' ? (el.getAttribute('color') ?? '') : '');
     if (!color)
-        return '';
+        return null;
     const c = parseColor(color);
     if (!c)
-        return '';
-    const idx = ctx.colorIndex.get(colorKey(c));
-    if (idx != null)
-        return `\\cf${idx} `;
-    return '';
+        return null;
+    return ctx.colorIndex.get(colorKey(c)) ?? null;
 }
-function getSizePrefix(el) {
+/** The element's own font size in half-points, or null when it sets none. */
+function sizeOf(el) {
     const fs = el.style?.fontSize;
     if (!fs)
-        return '';
+        return null;
     const ptMatch = fs.match(/([\d.]+)\s*pt/);
-    if (ptMatch) {
-        const halfPoints = Math.round(parseFloat(ptMatch[1]) * 2);
-        return `\\fs${halfPoints} `;
-    }
+    if (ptMatch)
+        return Math.round(parseFloat(ptMatch[1]) * 2);
     const pxMatch = fs.match(/([\d.]+)\s*px/);
-    if (pxMatch) {
-        const halfPoints = Math.round(parseFloat(pxMatch[1]) * 0.75 * 2);
-        return `\\fs${halfPoints} `;
-    }
-    return '';
+    if (pxMatch)
+        return Math.round(parseFloat(pxMatch[1]) * 0.75 * 2);
+    return null;
 }

package/package.json

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