svelte-rtf-editor 1.0.3 → 1.2.0

package/dist/components/ColorPicker.svelte

@@ -5,24 +5,22 @@
 		onchange?: (color: string) => void;
 	}
 
-	let { value = '#2C2520', title = 'Color', onchange }: Props = $props();
-
-	let currentColor = $state(value);
+	let { value = $bindable('#2C2520'), title = 'Color', onchange }: Props = $props();
 
 	function handleChange(e: Event) {
-		currentColor = (e.target as HTMLInputElement).value;
-		onchange?.(currentColor);
+		value = (e.target as HTMLInputElement).value;
+		onchange?.(value);
 	}
 </script>
 
 <div class="color-picker-wrap">
 	<button class="color-swatch" {title} type="button">
-		<div class="color-swatch-inner" style="background: {currentColor};"></div>
+		<div class="color-swatch-inner" style="background: {value};"></div>
 	</button>
 	<input
 		type="color"
 		class="color-input"
-		value={currentColor}
+		value={value}
 		onchange={handleChange}
 		{title}
 	/>

package/dist/components/ColorPicker.svelte.d.ts

@@ -3,6 +3,6 @@ interface Props {
     title?: string;
     onchange?: (color: string) => void;
 }
-declare const ColorPicker: import("svelte").Component<Props, {}, "">;
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/components/InkEditor.svelte

@@ -187,6 +187,13 @@
 	function exec(cmd: string, value: string | null = null): void {
 		restoreSelection();
 		editorEl?.focus();
+		// Color commands require an actual text selection — a collapsed cursor
+		// would silently apply the color to nothing (or to subsequently typed
+		// text), which causes accidental color spans to appear in the RTF output.
+		if (cmd === 'foreColor' || cmd === 'hiliteColor') {
+			const sel = window.getSelection();
+			if (!sel || sel.isCollapsed) return;
+		}
 		document.execCommand(cmd, false, value ?? undefined);
 		updateToolbarState();
 	}

package/dist/components/Toolbar.svelte

@@ -65,7 +65,6 @@
 	<!-- Colors -->
 	<div class="toolbar-group">
 		<ColorPicker value="#2C2520" title="Text color" onchange={(c) => exec('foreColor', c)} />
-		<ColorPicker value="#FFFBCC" title="Highlight" onchange={(c) => exec('hiliteColor', c)} />
 	</div>
 
 	<div class="toolbar-divider"></div>

package/dist/rtf-parser.d.ts

@@ -3,8 +3,11 @@
  *
  * Parses RTF control words and groups into an HTML string.
  * Supports: bold, italic, underline, strikethrough, super/subscript,
- * font size, foreground color, color table, font table, paragraphs,
- * bullet/numbered lists, Unicode characters, hex escapes, and nested groups.
+ * font size, foreground color (\cf), highlight background color (\highlight),
+ * color table, font table, paragraphs, bullet/numbered lists,
+ * Unicode characters, hex escapes, and nested groups.
+ *
+ * \cb (character background) is silently ignored on import.
  */
 export declare function rtfToHtml(rtfString: string): string;
 export declare function readRtfFile(file: File): Promise<string>;

package/dist/rtf-parser.js

@@ -3,9 +3,31 @@
  *
  * Parses RTF control words and groups into an HTML string.
  * Supports: bold, italic, underline, strikethrough, super/subscript,
- * font size, foreground color, color table, font table, paragraphs,
- * bullet/numbered lists, Unicode characters, hex escapes, and nested groups.
+ * font size, foreground color (\cf), highlight background color (\highlight),
+ * color table, font table, paragraphs, bullet/numbered lists,
+ * Unicode characters, hex escapes, and nested groups.
+ *
+ * \cb (character background) is silently ignored on import.
  */
+// ── Highlight palette (RTF \highlight 1-16) ──
+const HIGHLIGHT_COLORS = {
+    1: '#000000', // Black
+    2: '#0000ff', // Blue
+    3: '#00ffff', // Cyan
+    4: '#00ff00', // Green
+    5: '#ff00ff', // Magenta
+    6: '#ff0000', // Red
+    7: '#ffff00', // Yellow
+    8: '#ffffff', // White
+    9: '#000080', // Dark Blue
+    10: '#008080', // Dark Cyan
+    11: '#008000', // Dark Green
+    12: '#800080', // Dark Magenta
+    13: '#800000', // Dark Red
+    14: '#808000', // Dark Yellow
+    15: '#808080', // Dark Gray
+    16: '#c0c0c0', // Light Gray
+};
 // ── Tokenizer ──
 function tokenize(rtf) {
     const tokens = [];
@@ -136,25 +158,40 @@ function buildTree(tokens) {
 }
 // ── Color table parser ──
 function parseColorTable(group) {
-    const colors = ['']; // index 0 = auto/default (black)
+    const colors = ['']; // index 0 = auto/default
     let r = 0, g = 0, b = 0;
+    let hasComponents = false;
+    function finalizeEntry() {
+        // In standard RTF, a leading ";" represents the auto color (index 0).
+        // We already reserve colors[0] for auto, so do not append another entry.
+        if (colors.length === 1 && !hasComponents)
+            return;
+        colors.push(`rgb(${r},${g},${b})`);
+    }
     for (const node of group.children) {
         if (node.type === 'control') {
-            if (node.word === 'red')
+            if (node.word === 'red') {
                 r = node.param ?? 0;
-            else if (node.word === 'green')
+                hasComponents = true;
+            }
+            else if (node.word === 'green') {
                 g = node.param ?? 0;
-            else if (node.word === 'blue')
+                hasComponents = true;
+            }
+            else if (node.word === 'blue') {
                 b = node.param ?? 0;
+                hasComponents = true;
+            }
         }
         else if (node.type === 'text' && node.value.includes(';')) {
             // Each ';' terminates one color entry
             const semiCount = (node.value.match(/;/g) || []).length;
             for (let i = 0; i < semiCount; i++) {
-                colors.push(`rgb(${r},${g},${b})`);
+                finalizeEntry();
                 r = 0;
                 g = 0;
                 b = 0;
+                hasComponents = false;
             }
         }
     }
@@ -193,6 +230,12 @@ export function rtfToHtml(rtfString) {
     let paragraphs = [];
     let paragraphHasText = false;
     let paragraphHasListMarker = false;
+    // Table state
+    let tableRows = [];
+    let currentRowCells = [];
+    let currentRowIsHeader = false;
+    let currentRowCellRights = [];
+    let inTableCell = false;
     // First pass: extract color table and font table from the root group
     const rootGroup = tree.children[0]?.type === 'group' ? tree.children[0] : tree;
     for (let i = 0; i < rootGroup.children.length; i++) {
@@ -218,10 +261,10 @@ export function rtfToHtml(rtfString) {
             sub: false,
             fontSize: 24, // 12pt default
             colorIndex: 0,
+            highlightIndex: 0,
             fontIndex: 0,
             ucSkip: 1,
             inList: false,
-            listType: null
         };
     }
     const stateStack = [defaultState()];
@@ -239,6 +282,11 @@ export function rtfToHtml(rtfString) {
                 styles.push(`color:${color}`);
             }
         }
+        if (state.highlightIndex > 0) {
+            const bg = HIGHLIGHT_COLORS[state.highlightIndex];
+            if (bg)
+                styles.push(`background-color:${bg}`);
+        }
         const ptSize = state.fontSize / 2;
         if (ptSize && ptSize !== 12) {
             styles.push(`font-size:${ptSize}pt`);
@@ -282,7 +330,32 @@ export function rtfToHtml(rtfString) {
         'latentstyles', 'datastore', 'mmathPr', 'author', 'operator',
         'title', 'subject', 'doccomm', 'company', 'category', 'keywords'
     ]);
+    function flushTable() {
+        if (tableRows.length === 0)
+            return;
+        let html = '<table style="border-collapse:collapse;width:100%;margin:4px 0">';
+        for (const row of tableRows) {
+            html += '<tr>';
+            const tag = row.isHeader ? 'th' : 'td';
+            const total = row.cellRights[row.cellRights.length - 1] || 1;
+            let prevRight = 0;
+            for (let ci = 0; ci < row.cells.length; ci++) {
+                const right = row.cellRights[ci] ?? total;
+                const pct = ((right - prevRight) / total * 100).toFixed(1);
+                prevRight = right;
+                const style = row.isHeader
+                    ? `border-bottom:1px solid;padding:2px 6px;text-align:left;width:${pct}%`
+                    : `padding:2px 6px;width:${pct}%`;
+                html += `<${tag} style="${style}">${row.cells[ci] || ''}</${tag}>`;
+            }
+            html += '</tr>';
+        }
+        html += '</table>';
+        paragraphs.push(html);
+        tableRows = [];
+    }
     function flushParagraph() {
+        flushTable();
         const trimmed = currentParagraph.trim();
         if (!trimmed) {
             if (!paragraphHasListMarker) {
@@ -361,12 +434,56 @@ export function rtfToHtml(rtfString) {
                         if (p != null)
                             state.colorIndex = p;
                         break;
+                    case 'cb':
+                        break; // \cb not rendered on import
+                    case 'highlight':
+                        if (p != null)
+                            state.highlightIndex = p;
+                        break;
                     case 'f':
                         if (p != null)
                             state.fontIndex = p;
                         break;
                     case 'par':
-                        flushParagraph();
+                        if (!inTableCell)
+                            flushParagraph();
+                        break;
+                    case 'trowd':
+                        currentRowCells = [];
+                        currentRowIsHeader = false;
+                        currentRowCellRights = [];
+                        break;
+                    case 'trgaph':
+                    case 'trkeep':
+                    case 'trleft':
+                    case 'trhdr':
+                    case 'brdrs':
+                    case 'brdrnil':
+                    case 'clbrdrr':
+                    case 'clbrdrl':
+                    case 'clbrdrt':
+                        break; // table formatting, ignored
+                    case 'clbrdrb':
+                        currentRowIsHeader = true;
+                        break;
+                    case 'cellx':
+                        if (p != null)
+                            currentRowCellRights.push(p);
+                        break;
+                    case 'intbl':
+                        inTableCell = true;
+                        break;
+                    case 'cell':
+                        currentRowCells.push(currentParagraph.trim());
+                        currentParagraph = '';
+                        paragraphHasText = false;
+                        break;
+                    case 'row':
+                        tableRows.push({ cells: currentRowCells, isHeader: currentRowIsHeader, cellRights: currentRowCellRights });
+                        currentRowCells = [];
+                        currentRowIsHeader = false;
+                        currentRowCellRights = [];
+                        inTableCell = false;
                         break;
                     case 'pard':
                         state.bold = false;
@@ -412,6 +529,8 @@ export function rtfToHtml(rtfString) {
                         state.sub = false;
                         state.fontSize = 24;
                         state.colorIndex = 0;
+                        state.highlightIndex = 0;
+                        state.fontIndex = 0;
                         break;
                     case 'page':
                         flushParagraph();
@@ -476,6 +595,7 @@ export function rtfToHtml(rtfString) {
         }
     }
     walk(rootGroup.children);
+    flushTable(); // flush any trailing table rows
     // Only flush if there's actually pending content — the final \par in most RTF
     // files already flushed the last paragraph, so an unconditional call here
     // would push a spurious empty paragraph that becomes a trailing <p><br></p>.
@@ -505,6 +625,10 @@ export function rtfToHtml(rtfString) {
             rendered.push('<hr>');
             continue;
         }
+        if (trimmed.startsWith('<table')) {
+            rendered.push(trimmed);
+            continue;
+        }
         const sizeMatch = trimmed.match(/font-size:\s*([\d.]+)pt/);
         if (sizeMatch) {
             const pt = parseFloat(sizeMatch[1]);
@@ -524,9 +648,8 @@ export function rtfToHtml(rtfString) {
         rendered.push(`<p>${trimmed}</p>`);
     }
     const output = rendered.join('\n');
-    // Suppress unused variable warnings
+    // fontTable is parsed (for future font rendering) but not yet used in output
     void fontTable;
-    void paragraphHasText;
     return output || '<p></p>';
 }
 function stripSizeSpan(html) {

package/dist/rtf-writer.d.ts

@@ -2,8 +2,12 @@
  * HTML to RTF converter
  *
  * Walks a contenteditable DOM tree and produces a valid RTF 1.x string.
- * Supports: bold, italic, underline, strikethrough, font sizes (headings),
- * foreground colors, paragraphs, bullet lists, numbered lists, blockquotes,
- * code blocks, links, horizontal rules, line breaks, and inline styles.
+ * Supports: bold, italic, underline, strikethrough, font sizes (h1–h3),
+ * foreground colors (\cf), paragraphs, bullet/numbered lists, blockquotes,
+ * code blocks, hyperlinks, images (as alt-text placeholders), horizontal
+ * rules, line breaks, and Unicode characters.
+ *
+ * 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;

package/dist/rtf-writer.js

@@ -2,9 +2,13 @@
  * HTML to RTF converter
  *
  * Walks a contenteditable DOM tree and produces a valid RTF 1.x string.
- * Supports: bold, italic, underline, strikethrough, font sizes (headings),
- * foreground colors, paragraphs, bullet lists, numbered lists, blockquotes,
- * code blocks, links, horizontal rules, line breaks, and inline styles.
+ * Supports: bold, italic, underline, strikethrough, font sizes (h1–h3),
+ * foreground colors (\cf), paragraphs, bullet/numbered lists, blockquotes,
+ * code blocks, hyperlinks, images (as alt-text placeholders), horizontal
+ * rules, line breaks, and Unicode characters.
+ *
+ * Background color is intentionally not written — RTF highlight support
+ * is inconsistent across viewers (TextEdit uses \AppleHighlight, not \highlight).
  */
 // ── Color helpers ──
 function parseColor(colorStr) {
@@ -77,7 +81,9 @@ export function htmlToRtf(editorEl) {
     colors.forEach((c, i) => {
         colorIndex.set(colorKey(c), i + 1);
     });
-    let colorTable = '{\\colortbl ;';
+    // Emit a leading auto/default color entry for broad RTF compatibility:
+    // \cf0 = auto, first explicit color starts at \cf1.
+    let colorTable = '{\\colortbl;';
     for (const c of colors) {
         colorTable += `\\red${c.r}\\green${c.g}\\blue${c.b};`;
     }
@@ -87,7 +93,7 @@ export function htmlToRtf(editorEl) {
         '{\\f1\\froman\\fcharset0 Georgia;}' +
         '{\\f2\\fmodern\\fcharset0 Courier New;}' +
         '}';
-    const body = walkChildren(editorEl, { colorIndex, inPre: false, listCounter: 0 });
+    const body = walkChildren(editorEl, { colorIndex, inPre: false, listCounter: 0, inTableCell: false });
     const rtf = '{\\rtf1\\ansi\\ansicpg1252\\deff0' +
         fontTable +
         colorTable +
@@ -97,20 +103,20 @@ export function htmlToRtf(editorEl) {
         '}';
     return rtf;
 }
+function addColor(colorStr, colorMap) {
+    if (!colorStr)
+        return;
+    const c = parseColor(colorStr);
+    if (c)
+        colorMap.set(colorKey(c), c);
+}
 function collectColors(el, colorMap) {
-    if (el.style?.color) {
-        const c = parseColor(el.style.color);
-        if (c)
-            colorMap.set(colorKey(c), c);
-    }
-    if (el.style?.backgroundColor) {
-        const c = parseColor(el.style.backgroundColor);
-        if (c)
-            colorMap.set(colorKey(c), c);
-    }
-    for (const child of el.children) {
+    addColor(el.style?.color, colorMap);
+    // <font color="..."> is produced by execCommand('foreColor')
+    if (el.tagName?.toLowerCase() === 'font')
+        addColor(el.getAttribute('color'), colorMap);
+    for (const child of el.children)
         collectColors(child, colorMap);
-    }
 }
 function walkChildren(parent, ctx) {
     let rtf = '';
@@ -143,6 +149,11 @@ function walkChildren(parent, ctx) {
                 break;
             case 'p':
             case 'div': {
+                // Inside a table cell \pard is already declared; just emit inline content.
+                if (ctx.inTableCell) {
+                    rtf += walkChildren(el, ctx);
+                    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 ||
@@ -157,6 +168,43 @@ function walkChildren(parent, ctx) {
                 rtf += `\\pard ${colorPrefix}${inlineRtf}${colorSuffix}\\par\n`;
                 break;
             }
+            case 'table': {
+                const PAGE_WIDTH = 8640; // twips ≈ 6 in (standard letter body width)
+                const rows = Array.from(el.querySelectorAll(':scope > tr, :scope > thead > tr, :scope > tbody > tr, :scope > tfoot > tr'));
+                for (const row of rows) {
+                    const cells = Array.from(row.querySelectorAll(':scope > td, :scope > th'));
+                    if (cells.length === 0)
+                        continue;
+                    const isHeader = cells.some(c => c.tagName.toLowerCase() === 'th');
+                    // Derive right-edge twip positions from the width:X% style set by the parser.
+                    // Fall back to equal column widths if the style is absent.
+                    const cellRights = [];
+                    let cumTwips = 0;
+                    for (const cell of cells) {
+                        const pct = parseFloat(cell.style.width) || (100 / cells.length);
+                        cumTwips += Math.round((pct / 100) * PAGE_WIDTH);
+                        cellRights.push(cumTwips);
+                    }
+                    cellRights[cellRights.length - 1] = PAGE_WIDTH; // snap last edge to avoid rounding drift
+                    // Row definition
+                    let rowRtf = '{\n\\trowd \\trgaph120\n';
+                    for (let ci = 0; ci < cells.length; ci++) {
+                        if (isHeader)
+                            rowRtf += `\\clbrdrb\\brdrs`;
+                        rowRtf += `\\cellx${cellRights[ci]}`;
+                    }
+                    rowRtf += '\n\\trkeep\\intbl\n{';
+                    // Cell bodies
+                    const cellCtx = { ...ctx, inTableCell: true };
+                    for (const cell of cells) {
+                        const content = walkChildren(cell, cellCtx);
+                        rowRtf += `{\\pard\\intbl \\f0 \\sa0 \\li0 \\fi0 ${content}\\par}\n\\cell`;
+                    }
+                    rowRtf += '}\n\\intbl\\row}\n';
+                    rtf += rowRtf;
+                }
+                break;
+            }
             case 'blockquote':
                 rtf += `\\pard\\li720\\i ${walkChildren(el, ctx)}\\i0\\par\n`;
                 break;
@@ -244,6 +292,13 @@ function walkChildren(parent, ctx) {
                 rtf += `${colorPfx}${sizePfx}${walkChildren(el, ctx)}${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}`;
+                break;
+            }
             default:
                 rtf += walkChildren(el, ctx);
                 break;
@@ -252,7 +307,9 @@ function walkChildren(parent, ctx) {
     return rtf;
 }
 function getColorPrefix(el, ctx) {
-    const color = el.style?.color;
+    // 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 '';
     const c = parseColor(color);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-rtf-editor",
-	"version": "1.0.3",
+	"version": "1.2.0",
 	"description": "RTF viewer and rich-text editor components for Svelte 5",
 	"license": "MIT",
 	"homepage": "https://github.com/jcelano/svelte-rtf-editor#readme",
@@ -45,13 +45,14 @@
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.30.0",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.53.4",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"publint": "^0.3.17",
-		"svelte": "^5.51.0",
-		"svelte-check": "^4.4.2",
+		"happy-dom": "^20.8.3",
+		"publint": "^0.3.18",
+		"svelte": "^5.53.7",
+		"svelte-check": "^4.4.4",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
 		"vitest": "^4.0.18"