svelte-rtf-editor 1.1.0 → 1.2.0

package/dist/rtf-parser.js

@@ -230,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++) {
@@ -324,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) {
@@ -414,7 +445,45 @@ export function rtfToHtml(rtfString) {
                             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;
@@ -526,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>.
@@ -555,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]);

package/dist/rtf-writer.js

@@ -93,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 +
@@ -149,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 ||
@@ -163,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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-rtf-editor",
-	"version": "1.1.0",
+	"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",
@@ -49,6 +49,7 @@
 		"@sveltejs/kit": "^2.53.4",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"happy-dom": "^20.8.3",
 		"publint": "^0.3.18",
 		"svelte": "^5.53.7",
 		"svelte-check": "^4.4.4",