svelte-rtf-editor 1.5.2 → 1.5.3

package/README.md

@@ -163,7 +163,7 @@ 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';
 ```
 
@@ -172,6 +172,7 @@ import {
 | `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        |

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();
 
@@ -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,7 +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-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 +
@@ -470,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': {
@@ -529,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}';
@@ -538,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;
             }
@@ -557,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;
@@ -567,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;
             }
@@ -616,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;
             }
@@ -635,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:
@@ -678,33 +804,63 @@ function besideBlock(node) {
     const next = node.nextSibling;
     return isBlock(prev) || isBlock(next) || (!prev && !next && isBlock(node.parentNode));
 }
-function getColorPrefix(el, ctx) {
+/** 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.2",
+	"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",