react-markdown-table-ts 1.1.9 → 1.2.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import 'prismjs/components/prism-markdown';
-import 'prismjs/plugins/line-numbers/prism-line-numbers';
-import { MarkdownTableProps } from './types';
+import "prismjs/components/prism-markdown";
+import "prismjs/plugins/line-numbers/prism-line-numbers";
+import { MarkdownTableProps } from "./types";
 export declare const MarkdownTable: React.FC<MarkdownTableProps>;

package/dist/index.esm.js

@@ -4060,24 +4060,56 @@ var Prism$1 = /*@__PURE__*/getDefaultExportFromCjs(prismExports);
 
 }());
 
+/**
+ * @fileoverview Utilities for formatting and generating markdown tables with support
+ * for cell formatting, alignment, and width calculations.
+ */
 var CellFormatter = /** @class */ (function () {
     function CellFormatter(config) {
         this.config = config;
-        this.padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
+        this.padding = this.config.useTabs
+            ? "\t"
+            : this.config.hasPadding
+                ? " "
+                : "";
     }
-    CellFormatter.prototype.formatCell = function (content, alignment, width) {
-        var totalWidth = width;
-        switch (alignment) {
-            case 'right':
-                return "".concat(this.padding).concat(content.padStart(totalWidth)).concat(this.padding);
-            case 'center': {
-                var totalPadding = totalWidth - content.length;
-                var paddingLeft = Math.floor(totalPadding / 2);
-                var paddingRight = totalPadding - paddingLeft;
-                return "".concat(this.padding).concat(' '.repeat(paddingLeft)).concat(content).concat(' '.repeat(paddingRight)).concat(this.padding);
+    CellFormatter.prototype.formatCellContent = function (cell) {
+        var content = cell.content;
+        if (cell.code) {
+            content = "`".concat(content, "`");
+        }
+        if (cell.bold) {
+            content = "**".concat(content, "**");
+        }
+        if (cell.italic) {
+            content = "*".concat(content, "*");
+        }
+        if (cell.link) {
+            content = "[".concat(content, "](").concat(cell.link, ")");
+        }
+        return content;
+    };
+    CellFormatter.prototype.formatCell = function (cell, width) {
+        var content = this.formatCellContent(cell);
+        var alignment = cell.alignment || "inherit";
+        var effectiveAlignment = alignment === "inherit" ? "none" : alignment;
+        var paddedContent = "".concat(this.padding).concat(content).concat(this.padding);
+        var spacesToAdd = width - content.length;
+        if (spacesToAdd <= 0)
+            return paddedContent;
+        switch (effectiveAlignment) {
+            case "right":
+                return " ".repeat(spacesToAdd) + paddedContent;
+            case "center": {
+                var leftPad = Math.floor(spacesToAdd / 2);
+                var rightPad = spacesToAdd - leftPad;
+                return " ".repeat(leftPad) + paddedContent + " ".repeat(rightPad);
             }
-            default: // left or none
-                return "".concat(this.padding).concat(content.padEnd(totalWidth)).concat(this.padding);
+            case "justify":
+            case "left":
+            case "none":
+            default:
+                return paddedContent + " ".repeat(spacesToAdd);
         }
     };
     return CellFormatter;
@@ -4089,11 +4121,11 @@ var AlignmentFormatter = /** @class */ (function () {
         return this.indicators[alignment](width);
     };
     AlignmentFormatter.indicators = {
-        left: function (width) { return ":".concat('-'.repeat(width - 1)); },
-        right: function (width) { return "".concat('-'.repeat(width - 1), ":"); },
-        center: function (width) { return ":".concat('-'.repeat(width - 2), ":"); },
-        none: function (width) { return '-'.repeat(width); },
-        justify: function (width) { return '-'.repeat(width); }
+        left: function (width) { return ":".concat("-".repeat(width - 1)); },
+        right: function (width) { return "".concat("-".repeat(width - 1), ":"); },
+        center: function (width) { return ":".concat("-".repeat(width - 2), ":"); },
+        none: function (width) { return "-".repeat(width); },
+        justify: function (width) { return "-".repeat(width); },
     };
     return AlignmentFormatter;
 }());
@@ -4104,9 +4136,9 @@ var TableFormatter = /** @class */ (function () {
         this.adjustedAlignments = this.getAdjustedAlignments();
     }
     TableFormatter.prototype.getAdjustedAlignments = function () {
-        var defaultAlignment = 'none';
+        var defaultAlignment = "none";
         var sanitizeAlignment = function (alignment) {
-            return alignment === 'justify' ? 'none' : alignment;
+            return alignment === "justify" ? "none" : alignment;
         };
         return this.config.columnAlignments.length < this.config.columnCount
             ? __spreadArray(__spreadArray([], Array.from(this.config.columnAlignments).map(sanitizeAlignment), true), Array(this.config.columnCount - this.config.columnAlignments.length).fill(defaultAlignment), true) : Array.from(this.config.columnAlignments).map(sanitizeAlignment);
@@ -4114,79 +4146,77 @@ var TableFormatter = /** @class */ (function () {
     TableFormatter.prototype.formatRow = function (row) {
         var _this = this;
         var formattedCells = Array.from({ length: this.config.columnCount }, function (_, i) {
-            var _a;
-            var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
-            if (_this.config.replaceNewlines) {
-                cell = replaceNewlinesInCell(cell);
-            }
-            var alignment = _this.adjustedAlignments[i];
-            var width = _this.config.columnWidths ? _this.config.columnWidths[i] : cell.length;
-            return _this.cellFormatter.formatCell(cell, alignment, width);
+            var _a, _b, _c;
+            var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : { content: "" };
+            var width = (_c = (_b = _this.config.columnWidths) === null || _b === void 0 ? void 0 : _b[i]) !== null && _c !== void 0 ? _c : cell.content.length;
+            return _this.cellFormatter.formatCell(cell, width);
         });
-        return "|".concat(formattedCells.join('|'), "|");
+        return "|".concat(formattedCells.join("|"), "|");
     };
     TableFormatter.prototype.formatAlignmentRow = function () {
         var _this = this;
-        var padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
+        var padding = this.config.useTabs
+            ? "\t"
+            : this.config.hasPadding
+                ? " "
+                : "";
         var formattedColumns = Array.from({ length: this.config.columnCount }, function (_, i) {
+            var _a, _b;
             var alignment = _this.adjustedAlignments[i];
-            var width = _this.config.columnWidths ? _this.config.columnWidths[i] : 3;
+            var width = (_b = (_a = _this.config.columnWidths) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 3;
             var indicator = AlignmentFormatter.formatIndicator(alignment, width);
             return "".concat(padding).concat(indicator).concat(padding);
         });
-        return "|".concat(formattedColumns.join('|'), "|");
+        return "|".concat(formattedColumns.join("|"), "|");
     };
     return TableFormatter;
 }());
-function calculateColumnWidths(tableRows, maxColumnCount) {
+function calculateColumnWidths(tableRows, maxColumnCount, config) {
     var widths = new Array(maxColumnCount).fill(3);
+    var cellFormatter = new CellFormatter(config);
     tableRows.forEach(function (row) {
-        var _a;
         for (var i = 0; i < maxColumnCount; i++) {
-            var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
-            widths[i] = Math.max(widths[i], cell.length);
+            var cell = row[i];
+            if (cell) {
+                var formattedContent = cellFormatter["formatCellContent"](cell);
+                widths[i] = Math.max(widths[i], formattedContent.length);
+            }
         }
     });
     return widths;
 }
-function calculateMaxColumnCount(inputData) {
-    var headerColumnCount = inputData.inputDataHeader.length;
-    var bodyColumnCounts = inputData.inputDataBody.map(function (row) { return row.length; });
-    return Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
-}
-function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
-    return canAdjustColumnWidths
-        ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
-        : undefined;
-}
 function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
     if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
     if (useTabs === void 0) { useTabs = false; }
     if (replaceNewlines === void 0) { replaceNewlines = false; }
     if (hasPadding === void 0) { hasPadding = true; }
-    var maxColumnCount = calculateMaxColumnCount(inputData);
-    var columnWidths = getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths);
+    var maxColumnCount = Math.max.apply(Math, __spreadArray([inputData.inputDataHeader.length], inputData.inputDataBody.map(function (row) { return row.length; }), false));
     var config = {
         columnCount: maxColumnCount,
         columnAlignments: columnAlignments,
-        columnWidths: columnWidths,
+        columnWidths: canAdjustColumnWidths
+            ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount, {
+                columnCount: maxColumnCount,
+                columnAlignments: columnAlignments,
+                useTabs: useTabs,
+                replaceNewlines: replaceNewlines,
+                hasPadding: hasPadding,
+            })
+            : undefined,
         useTabs: useTabs,
         replaceNewlines: replaceNewlines,
-        hasPadding: hasPadding
+        hasPadding: hasPadding,
     };
     var tableFormatter = new TableFormatter(config);
     var headerRow = tableFormatter.formatRow(inputData.inputDataHeader);
     var alignmentRow = tableFormatter.formatAlignmentRow();
     var bodyRows = inputData.inputDataBody
         .map(function (row) { return tableFormatter.formatRow(row); })
-        .join('\n');
+        .join("\n");
     return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows).trimEnd();
 }
-function replaceNewlinesInCell(cell) {
-    return cell.replace(/\n/g, '<br>');
-}
 function getColumnName(index) {
-    var columnName = '';
+    var columnName = "";
     var currentIndex = index;
     while (currentIndex >= 0) {
         columnName = String.fromCharCode((currentIndex % 26) + 65) + columnName;
@@ -4206,7 +4236,7 @@ var MarkdownTableError = /** @class */ (function (_super) {
     __extends(MarkdownTableError, _super);
     function MarkdownTableError(message) {
         var _this = _super.call(this, message) || this;
-        _this.name = 'MarkdownTableError';
+        _this.name = "MarkdownTableError";
         Object.setPrototypeOf(_this, MarkdownTableError.prototype);
         return _this;
     }
@@ -4232,7 +4262,10 @@ var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8
 var getTableData = function (inputData, hasHeader) {
     return hasHeader
         ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
-        : { inputDataHeader: generateAlphabetHeaders(inputData[0].length), inputDataBody: inputData };
+        : {
+            inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }),
+            inputDataBody: inputData,
+        };
 };
 var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding) {
     try {
@@ -4250,7 +4283,7 @@ var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adju
 var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
     useEffect(function () {
         var _a;
-        var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('code');
+        var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("code");
         if (codeElement && markdownTableSyntax) {
             requestAnimationFrame(function () {
                 Prism$1.highlightElement(codeElement);
@@ -4259,10 +4292,12 @@ var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
     }, [markdownTableSyntax]);
 };
 var MarkdownTable = function (_a) {
-    var _b = _a.inputData, inputData = _b === void 0 ? null : _b, _c = _a.hasHeader, hasHeader = _c === void 0 ? true : _c, _d = _a.columnAlignments, columnAlignments = _d === void 0 ? [] : _d, _e = _a.isCompact, isCompact = _e === void 0 ? false : _e, _f = _a.hasTabs, hasTabs = _f === void 0 ? false : _f, _g = _a.hasPadding, hasPadding = _g === void 0 ? true : _g, _h = _a.convertLineBreaks, convertLineBreaks = _h === void 0 ? false : _h, className = _a.className, onGenerate = _a.onGenerate, _j = _a.theme, theme = _j === void 0 ? 'light' : _j, preStyle = _a.preStyle, _k = _a.topPadding, topPadding = _k === void 0 ? 16 : _k, minWidth = _a.minWidth;
+    var _b = _a.inputData, inputData = _b === void 0 ? null : _b, _c = _a.hasHeader, hasHeader = _c === void 0 ? true : _c, _d = _a.columnAlignments, columnAlignments = _d === void 0 ? [] : _d, _e = _a.isCompact, isCompact = _e === void 0 ? false : _e, _f = _a.hasTabs, hasTabs = _f === void 0 ? false : _f, _g = _a.hasPadding, hasPadding = _g === void 0 ? true : _g, _h = _a.convertLineBreaks, convertLineBreaks = _h === void 0 ? false : _h, className = _a.className, onGenerate = _a.onGenerate, _j = _a.theme, theme = _j === void 0 ? "light" : _j, preStyle = _a.preStyle, _k = _a.topPadding, topPadding = _k === void 0 ? 16 : _k, minWidth = _a.minWidth;
     var adjustColumnWidths = !isCompact;
     var preElementRef = useRef(null);
-    var markdownTableSyntax = useMemo(function () { return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding); }, [
+    var markdownTableSyntax = useMemo(function () {
+        return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding);
+    }, [
         inputData,
         hasHeader,
         columnAlignments,
@@ -4277,11 +4312,11 @@ var MarkdownTable = function (_a) {
         }
     }, [markdownTableSyntax, onGenerate]);
     applySyntaxHighlighting(preElementRef, markdownTableSyntax);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS, "\n          pre {\n            position: relative;\n            padding-top: ".concat(topPadding, "px !important;\n          }\n          pre::before {\n            position: absolute;\n            top: 8px;\n            left: 12px;\n            color: ").concat(theme === 'light' ? '#666' : '#999', ";\n            letter-spacing: 2px;\n            font-size: 12px;\n          }\n        ")] }), jsxRuntimeExports.jsx("div", { id: "MarkdownTable", style: {
-                    position: 'relative',
-                    isolation: 'isolate',
-                    display: 'inline-block'
-                }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: __assign({ width: 'fit-content', minWidth: minWidth ? "".concat(minWidth, "px") : 'min-content', margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme === "light" ? LIGHT_THEME_CSS : DARK_THEME_CSS, "\n          pre {\n            position: relative;\n            padding-top: ".concat(topPadding, "px !important;\n          }\n          pre::before {\n            position: absolute;\n            top: 8px;\n            left: 12px;\n            color: ").concat(theme === "light" ? "#666" : "#999", ";\n            letter-spacing: 2px;\n            font-size: 12px;\n          }\n        ")] }), jsxRuntimeExports.jsx("div", { id: "MarkdownTable", style: {
+                    position: "relative",
+                    isolation: "isolate",
+                    display: "inline-block",
+                }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === "dark" ? "dark-theme" : ""), style: __assign({ width: "fit-content", minWidth: minWidth ? "".concat(minWidth, "px") : "min-content", margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
 };
 
 export { MarkdownTable };