svelte-rtf-editor 1.0.2 → 1.1.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,27 +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(';')) {
-            // Semicolons delimit color entries; there may be multiple in one text node
-            const parts = node.value.split(';');
-            for (let i = 0; i < parts.length; i++) {
-                if (i < parts.length - 1 || node.value.endsWith(';')) {
-                    colors.push(`rgb(${r},${g},${b})`);
-                    r = 0;
-                    g = 0;
-                    b = 0;
-                }
+            // Each ';' terminates one color entry
+            const semiCount = (node.value.match(/;/g) || []).length;
+            for (let i = 0; i < semiCount; i++) {
+                finalizeEntry();
+                r = 0;
+                g = 0;
+                b = 0;
+                hasComponents = false;
             }
         }
     }
@@ -220,10 +255,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()];
@@ -241,6 +276,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`);
@@ -363,6 +403,12 @@ 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;
@@ -414,6 +460,8 @@ export function rtfToHtml(rtfString) {
                         state.sub = false;
                         state.fontSize = 24;
                         state.colorIndex = 0;
+                        state.highlightIndex = 0;
+                        state.fontIndex = 0;
                         break;
                     case 'page':
                         flushParagraph();
@@ -526,9 +574,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};`;
     }
@@ -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 = '';
@@ -244,6 +250,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 +265,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.2",
+	"version": "1.1.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,13 @@
 	},
 	"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",
+		"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"