@scrider/formatter 1.3.2 → 1.3.4

package/README.md

@@ -77,6 +77,23 @@ deltaToHtml(delta, { registry })           // Delta → HTML string
 htmlToDelta(html, { registry })            // HTML string → Delta
 ```
 
+**Simple Table presentation (v1.3.4+)** — inline borders/shades for clipboard and Office paste (Delta structure unchanged):
+
+```typescript
+import { deltaToHtml, type TablePresentation } from '@scrider/formatter';
+
+const tablePresentation: TablePresentation = {
+  grid: true,
+  borderColor: '#e7e7e7',
+  headerBold: true,
+  headerCenter: true,
+};
+
+deltaToHtml(delta, { tablePresentation });
+```
+
+See scrider-editor `docs/simple-tables.md` §8 for the full contract (`grid` / `line`, `headerShade`, `zebraRows`, `defaultCellAlign`, …).
+
 ### Markdown Conversion
 
 ```typescript

package/dist/index.cjs

@@ -82,6 +82,7 @@ __export(index_exports, {
   isTextNode: () => isTextNode,
   isValidColor: () => isValidColor,
   isValidHexColor: () => isValidHexColor,
+  isZebraBodyRow: () => isZebraBodyRow,
   italicFormat: () => italicFormat,
   kbdFormat: () => kbdFormat,
   linkFormat: () => linkFormat,
@@ -92,6 +93,7 @@ __export(index_exports, {
   nodeAdapter: () => nodeAdapter,
   normalizeDelta: () => normalizeDelta,
   preloadRemark: () => preloadRemark,
+  resolveTablePresentation: () => resolveTablePresentation,
   sanitizeDelta: () => sanitizeDelta,
   sizeFormat: () => sizeFormat,
   slugify: () => slugify,
@@ -2599,6 +2601,68 @@ function slugifyWithDedup(text, usedSlugs) {
   return `${base}-${count}`;
 }
 
+// src/conversion/html/table-presentation.ts
+var DEFAULT_BORDER_COLOR = "#e7e7e7";
+var DEFAULT_HEADER_BG = "#f5f5f5";
+var DEFAULT_ZEBRA_BG = "#fafafa";
+var CELL_PADDING = "6px 13px";
+function resolveTablePresentation(presentation) {
+  return {
+    grid: presentation?.grid === true,
+    line: presentation?.line === true && presentation?.grid !== true,
+    borderColor: presentation?.borderColor ?? DEFAULT_BORDER_COLOR,
+    headerShade: presentation?.headerShade === true,
+    zebraRows: presentation?.zebraRows === true,
+    headerBold: presentation?.headerBold === true,
+    headerCenter: presentation?.headerCenter === true,
+    defaultCellAlign: presentation?.defaultCellAlign ?? "left"
+  };
+}
+function isZebraBodyRow(headerRowCount, bodyRowIndex) {
+  return (headerRowCount + bodyRowIndex + 1) % 2 === 0;
+}
+function isTableCellAlign(value) {
+  return value === "left" || value === "center" || value === "right";
+}
+function tableOpenTag(presentation) {
+  if (!presentation.grid && !presentation.line) {
+    return "<table>";
+  }
+  return `<table style="border-collapse: collapse">`;
+}
+function buildTableCellStyleAttr(params) {
+  const { presentation, cellTag, colAlign, headerRowCount, bodyRowIndex } = params;
+  const parts = [];
+  parts.push(`padding: ${CELL_PADDING}`);
+  const color = presentation.borderColor;
+  if (presentation.grid) {
+    parts.push(`border: 1px solid ${color}`);
+  } else if (presentation.line) {
+    const width = cellTag === "th" ? "1px" : "0.5px";
+    parts.push(`border-bottom: ${width} solid ${color}`);
+  }
+  let textAlign;
+  if (cellTag === "th" && presentation.headerCenter) {
+    textAlign = "center";
+  } else if (isTableCellAlign(colAlign)) {
+    textAlign = colAlign;
+  } else if (colAlign == null || colAlign === "left") {
+    textAlign = presentation.defaultCellAlign;
+  }
+  if (textAlign && textAlign !== "left") {
+    parts.push(`text-align: ${textAlign}`);
+  }
+  if (cellTag === "th" && presentation.headerBold) {
+    parts.push("font-weight: bold");
+  }
+  if (cellTag === "th" && presentation.headerShade) {
+    parts.push(`background-color: ${DEFAULT_HEADER_BG}`);
+  } else if (cellTag === "td" && presentation.zebraRows && bodyRowIndex !== void 0 && isZebraBodyRow(headerRowCount, bodyRowIndex)) {
+    parts.push(`background-color: ${DEFAULT_ZEBRA_BG}`);
+  }
+  return ` style="${parts.join("; ")}"`;
+}
+
 // src/conversion/html/delta-to-html.ts
 function deltaToHtml(delta, options = {}) {
   const lines = splitIntoLines(delta);
@@ -2782,7 +2846,10 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
   const bodyRows = sortedRows.filter(([, r]) => !r.isHeader);
   const indent = pretty ? "  " : "";
   const nl = pretty ? "\n" : "";
-  let html = `<table>${nl}`;
+  const usePresentation = options?.tablePresentation !== void 0;
+  const presentation = usePresentation ? resolveTablePresentation(options.tablePresentation) : null;
+  const headerRowCount = headerRows.length;
+  let html = usePresentation && presentation ? `${tableOpenTag(presentation)}${nl}` : `<table>${nl}`;
   if (headerRows.length > 0) {
     html += `${indent}<thead>${nl}`;
     for (const [, row] of headerRows) {
@@ -2794,13 +2861,16 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
         pretty,
         2,
         blockHandlers,
-        options
+        options,
+        presentation,
+        headerRowCount
       );
     }
     html += `${indent}</thead>${nl}`;
   }
   if (bodyRows.length > 0) {
     html += `${indent}<tbody>${nl}`;
+    let bodyRowIndex = 0;
     for (const [, row] of bodyRows) {
       html += renderTableRow(
         row.cells,
@@ -2810,8 +2880,12 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
         pretty,
         2,
         blockHandlers,
-        options
+        options,
+        presentation,
+        headerRowCount,
+        bodyRowIndex
       );
+      bodyRowIndex += 1;
     }
     html += `${indent}</tbody>${nl}`;
   }
@@ -2819,7 +2893,7 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
   if (pretty) html += "\n";
   return html;
 }
-function renderTableRow(cells, maxCol, cellTag, embedRenderers, pretty, depth, blockHandlers, options) {
+function renderTableRow(cells, maxCol, cellTag, embedRenderers, pretty, depth, blockHandlers, options, presentation, headerRowCount = 0, bodyRowIndex) {
   const indent = pretty ? "  ".repeat(depth) : "";
   const cellIndent = pretty ? "  ".repeat(depth + 1) : "";
   const nl = pretty ? "\n" : "";
@@ -2827,8 +2901,19 @@ function renderTableRow(cells, maxCol, cellTag, embedRenderers, pretty, depth, b
   for (let col = 0; col <= maxCol; col++) {
     const cell = cells.get(col);
     const content = cell ? renderLineContent(cell.ops, embedRenderers, blockHandlers, options) : "";
-    const alignStyle = cell?.colAlign && cell.colAlign !== "left" ? ` style="text-align: ${cell.colAlign}"` : "";
-    html += `${cellIndent}<${cellTag}${alignStyle}>${content}</${cellTag}>${nl}`;
+    let styleAttr = "";
+    if (presentation) {
+      styleAttr = buildTableCellStyleAttr({
+        presentation,
+        cellTag,
+        colAlign: cell?.colAlign,
+        headerRowCount,
+        bodyRowIndex: cellTag === "td" ? bodyRowIndex : void 0
+      });
+    } else {
+      styleAttr = cell?.colAlign && cell.colAlign !== "left" ? ` style="text-align: ${cell.colAlign}"` : "";
+    }
+    html += `${cellIndent}<${cellTag}${styleAttr}>${content}</${cellTag}>${nl}`;
   }
   html += `${indent}</tr>${nl}`;
   return html;
@@ -3226,7 +3311,14 @@ function htmlToDelta(html, options = {}) {
     }
     if (tagName === "br") {
       const hasMarker = node.hasAttribute("data-scrider-embed");
-      if (hasMarker || hasMeaningfulPrevSibling(node)) {
+      if (hasMarker) {
+        context.pushEmbed({ softBreak: true });
+        return;
+      }
+      if (isBrowserEmptyLineFiller(node)) {
+        return;
+      }
+      if (hasMeaningfulPrevSibling(node)) {
         context.pushEmbed({ softBreak: true });
       } else {
         context.pushNewline();
@@ -3681,6 +3773,39 @@ function hasMeaningfulPrevSibling(brNode) {
   }
   return false;
 }
+function isBrowserEmptyLineFiller(brNode) {
+  const parent = brNode.parentNode;
+  if (!parent) return false;
+  const children = parent.childNodes;
+  let prevElement = null;
+  let foundCurrent = false;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (!child) continue;
+    if (child === brNode) {
+      foundCurrent = true;
+      continue;
+    }
+    if (!foundCurrent) {
+      if (child.nodeType === NODE_TYPE.TEXT_NODE) {
+        const text = (child.textContent ?? "").replace(/[\s\u200B]/g, "");
+        if (text.length > 0) prevElement = null;
+      } else if (isElement(child)) {
+        prevElement = child;
+      }
+    } else {
+      if (child.nodeType === NODE_TYPE.TEXT_NODE) {
+        const text = (child.textContent ?? "").replace(/[\s\u200B]/g, "");
+        if (text.length > 0) return false;
+      } else if (isElement(child)) {
+        const tag = child.tagName?.toLowerCase();
+        if (tag !== "br") return false;
+      }
+    }
+  }
+  if (!prevElement) return false;
+  return prevElement.tagName?.toLowerCase() === "br";
+}
 function findTagHandler(handlers, element, tagName) {
   const className = element.getAttribute("class");
   if (className) {
@@ -5115,6 +5240,7 @@ function extractTableRegion(ops, hintOpIdx) {
   isTextNode,
   isValidColor,
   isValidHexColor,
+  isZebraBodyRow,
   italicFormat,
   kbdFormat,
   linkFormat,
@@ -5125,6 +5251,7 @@ function extractTableRegion(ops, hintOpIdx) {
   nodeAdapter,
   normalizeDelta,
   preloadRemark,
+  resolveTablePresentation,
   sanitizeDelta,
   sizeFormat,
   slugify,