svelte-rtf-editor 1.1.0 → 1.3.0

package/dist/rtf-parser.js

@@ -228,8 +228,19 @@ export function rtfToHtml(rtfString) {
     let fontTable = new Map();
     let currentParagraph = '';
     let paragraphs = [];
+    let paragraphAligns = [];
     let paragraphHasText = false;
     let paragraphHasListMarker = false;
+    // Paragraph alignment (reset by \pard, affects cells and paragraphs)
+    let currentAlign = 'left';
+    // Table state
+    let tableRows = [];
+    let currentRowCells = [];
+    let currentRowIsHeader = false;
+    let currentRowCellRights = [];
+    let currentRowCellAligns = [];
+    let inTableCell = false;
+    let pendingBottomBorder = false; // set by \clbrdrb, confirmed by a real border type
     // 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,19 +335,50 @@ 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 align = row.cellAligns[ci] ?? 'left';
+                const alignStyle = align !== 'left' ? `;text-align:${align}` : '';
+                const style = row.isHeader
+                    ? `border-bottom:1px solid;padding:2px 6px;text-align:${align};width:${pct}%`
+                    : `padding:2px 6px;width:${pct}%${alignStyle}`;
+                html += `<${tag} style="${style}">${row.cells[ci] || ''}</${tag}>`;
+            }
+            html += '</tr>';
+        }
+        html += '</table>';
+        paragraphs.push(html);
+        paragraphAligns.push('left');
+        tableRows = [];
+    }
     function flushParagraph() {
+        flushTable();
         const trimmed = currentParagraph.trim();
         if (!trimmed) {
             if (!paragraphHasListMarker) {
                 paragraphs.push(currentParagraph);
+                paragraphAligns.push(currentAlign);
             }
         }
         else {
             paragraphs.push(currentParagraph);
+            paragraphAligns.push(currentAlign);
         }
         currentParagraph = '';
         paragraphHasText = false;
         paragraphHasListMarker = false;
+        currentAlign = 'left';
     }
     let pendingUnicodeSkip = 0;
     function walk(nodes) {
@@ -413,14 +455,81 @@ export function rtfToHtml(rtfString) {
                         if (p != null)
                             state.fontIndex = p;
                         break;
+                    case 'ql':
+                        currentAlign = 'left';
+                        break;
+                    case 'qr':
+                        currentAlign = 'right';
+                        break;
+                    case 'qc':
+                        currentAlign = 'center';
+                        break;
+                    case 'qj':
+                        currentAlign = 'justify';
+                        break;
                     case 'par':
-                        flushParagraph();
+                        if (!inTableCell)
+                            flushParagraph();
+                        break;
+                    case 'trowd':
+                        currentRowCells = [];
+                        currentRowIsHeader = false;
+                        currentRowCellRights = [];
+                        pendingBottomBorder = false;
+                        break;
+                    case 'trgaph':
+                    case 'trkeep':
+                    case 'trleft':
+                    case 'trhdr':
+                    case 'clbrdrr':
+                    case 'clbrdrl':
+                    case 'clbrdrt':
+                        pendingBottomBorder = false;
+                        break; // table formatting, ignored
+                    case 'clbrdrb':
+                        pendingBottomBorder = true;
+                        break;
+                    case 'brdrnone':
+                    case 'brdrnil':
+                        pendingBottomBorder = false;
+                        break;
+                    case 'brdrs':
+                    case 'brdrdb':
+                    case 'brdrth':
+                    case 'brdrdot':
+                    case 'brdrdash':
+                        if (pendingBottomBorder)
+                            currentRowIsHeader = true;
+                        pendingBottomBorder = false;
+                        break;
+                    case 'cellx':
+                        if (p != null)
+                            currentRowCellRights.push(p);
+                        break;
+                    case 'intbl':
+                        inTableCell = true;
+                        break;
+                    case 'cell':
+                        currentRowCells.push(currentParagraph.trim());
+                        currentRowCellAligns.push(currentAlign);
+                        currentParagraph = '';
+                        paragraphHasText = false;
+                        currentAlign = 'left';
+                        break;
+                    case 'row':
+                        tableRows.push({ cells: currentRowCells, isHeader: currentRowIsHeader, cellRights: currentRowCellRights, cellAligns: currentRowCellAligns });
+                        currentRowCells = [];
+                        currentRowIsHeader = false;
+                        currentRowCellRights = [];
+                        currentRowCellAligns = [];
+                        inTableCell = false;
                         break;
                     case 'pard':
                         state.bold = false;
                         state.italic = false;
                         state.underline = false;
                         state.strike = false;
+                        currentAlign = 'left';
                         break;
                     case 'line':
                         currentParagraph += '<br>';
@@ -466,6 +575,7 @@ export function rtfToHtml(rtfString) {
                     case 'page':
                         flushParagraph();
                         paragraphs.push('<hr>');
+                        paragraphAligns.push('left');
                         break;
                     case 'emspace':
                     case 'enspace':
@@ -526,6 +636,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>.
@@ -538,6 +649,7 @@ export function rtfToHtml(rtfString) {
     const isListLine = (text) => /^[-\u2022]/.test(text.replace(/^&emsp;+/g, ''));
     for (let i = 0; i < trimmedParagraphs.length; i++) {
         const trimmed = trimmedParagraphs[i];
+        const align = paragraphAligns[i] ?? 'left';
         const prev = i > 0 ? trimmedParagraphs[i - 1] : '';
         const next = i + 1 < trimmedParagraphs.length ? trimmedParagraphs[i + 1] : '';
         if (!trimmed) {
@@ -555,23 +667,29 @@ 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]);
+            const alignAttr = align !== 'left' ? ` style="text-align:${align}"` : '';
             if (pt >= 24) {
-                rendered.push(`<h1>${stripSizeSpan(trimmed)}</h1>`);
+                rendered.push(`<h1${alignAttr}>${stripSizeSpan(trimmed)}</h1>`);
                 continue;
             }
             if (pt >= 18) {
-                rendered.push(`<h2>${stripSizeSpan(trimmed)}</h2>`);
+                rendered.push(`<h2${alignAttr}>${stripSizeSpan(trimmed)}</h2>`);
                 continue;
             }
             if (pt >= 14) {
-                rendered.push(`<h3>${stripSizeSpan(trimmed)}</h3>`);
+                rendered.push(`<h3${alignAttr}>${stripSizeSpan(trimmed)}</h3>`);
                 continue;
             }
         }
-        rendered.push(`<p>${trimmed}</p>`);
+        const pStyle = align !== 'left' ? ` style="text-align:${align}"` : '';
+        rendered.push(`<p${pStyle}>${trimmed}</p>`);
     }
     const output = rendered.join('\n');
     // fontTable is parsed (for future font rendering) but not yet used in output

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.3.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",