react-markdown-table-ts 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import 'prismjs/components/prism-markdown';
3
- import 'prismjs/plugins/line-numbers/prism-line-numbers';
4
- import { MarkdownTableProps } from './types';
2
+ import "prismjs/components/prism-markdown";
3
+ import "prismjs/plugins/line-numbers/prism-line-numbers";
4
+ import { MarkdownTableProps } from "./types";
5
5
  export declare const MarkdownTable: React.FC<MarkdownTableProps>;
package/dist/index.esm.js CHANGED
@@ -4061,62 +4061,55 @@ var Prism$1 = /*@__PURE__*/getDefaultExportFromCjs(prismExports);
4061
4061
  }());
4062
4062
 
4063
4063
  /**
4064
- * Formats cell content with markdown syntax based on CellData formatting options
4064
+ * @fileoverview Utilities for formatting and generating markdown tables with support
4065
+ * for cell formatting, alignment, and width calculations.
4065
4066
  */
4066
- function formatCellContent(cell) {
4067
- if (typeof cell === 'string') {
4068
- return cell;
4069
- }
4070
- var content = cell.content;
4071
- // Apply code formatting first (if present) as it should override other formatting
4072
- if (cell.code) {
4073
- content = "`".concat(content, "`");
4074
- return content; // Code formatting should not be combined with other formatting
4075
- }
4076
- // Apply bold formatting
4077
- if (cell.bold) {
4078
- content = "**".concat(content, "**");
4079
- }
4080
- // Apply italic formatting
4081
- if (cell.italic) {
4082
- content = "*".concat(content, "*");
4083
- }
4084
- // Apply link formatting last
4085
- if (cell.link) {
4086
- content = "[".concat(content, "](").concat(cell.link, ")");
4087
- }
4088
- return content;
4089
- }
4090
- /**
4091
- * Gets the alignment for a cell, prioritizing cell-specific alignment over column alignment
4092
- */
4093
- function getCellAlignment(cell, columnAlignment) {
4094
- if (typeof cell === 'string') {
4095
- return columnAlignment || 'none';
4096
- }
4097
- return cell.alignment || columnAlignment || 'none';
4098
- }
4099
-
4100
4067
  var CellFormatter = /** @class */ (function () {
4101
4068
  function CellFormatter(config) {
4102
4069
  this.config = config;
4103
- this.padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
4070
+ this.padding = this.config.useTabs
4071
+ ? "\t"
4072
+ : this.config.hasPadding
4073
+ ? " "
4074
+ : "";
4104
4075
  }
4105
- CellFormatter.prototype.formatCell = function (cell, alignment, width) {
4106
- var content = formatCellContent(cell);
4107
- var cellAlignment = getCellAlignment(cell, alignment);
4108
- var totalWidth = width;
4109
- switch (cellAlignment) {
4110
- case 'right':
4111
- return "".concat(this.padding).concat(content.padStart(totalWidth)).concat(this.padding);
4112
- case 'center': {
4113
- var totalPadding = totalWidth - content.length;
4114
- var paddingLeft = Math.floor(totalPadding / 2);
4115
- var paddingRight = totalPadding - paddingLeft;
4116
- return "".concat(this.padding).concat(' '.repeat(paddingLeft)).concat(content).concat(' '.repeat(paddingRight)).concat(this.padding);
4076
+ CellFormatter.prototype.formatCellContent = function (cell) {
4077
+ var content = cell.content;
4078
+ if (cell.code) {
4079
+ content = "`".concat(content, "`");
4080
+ }
4081
+ if (cell.bold) {
4082
+ content = "**".concat(content, "**");
4083
+ }
4084
+ if (cell.italic) {
4085
+ content = "*".concat(content, "*");
4086
+ }
4087
+ if (cell.link) {
4088
+ content = "[".concat(content, "](").concat(cell.link, ")");
4089
+ }
4090
+ return content;
4091
+ };
4092
+ CellFormatter.prototype.formatCell = function (cell, width) {
4093
+ var content = this.formatCellContent(cell);
4094
+ var alignment = cell.alignment || "inherit";
4095
+ var effectiveAlignment = alignment === "inherit" ? "none" : alignment;
4096
+ var paddedContent = "".concat(this.padding).concat(content).concat(this.padding);
4097
+ var spacesToAdd = width - content.length;
4098
+ if (spacesToAdd <= 0)
4099
+ return paddedContent;
4100
+ switch (effectiveAlignment) {
4101
+ case "right":
4102
+ return " ".repeat(spacesToAdd) + paddedContent;
4103
+ case "center": {
4104
+ var leftPad = Math.floor(spacesToAdd / 2);
4105
+ var rightPad = spacesToAdd - leftPad;
4106
+ return " ".repeat(leftPad) + paddedContent + " ".repeat(rightPad);
4117
4107
  }
4118
- default: // left or none
4119
- return "".concat(this.padding).concat(content.padEnd(totalWidth)).concat(this.padding);
4108
+ case "justify":
4109
+ case "left":
4110
+ case "none":
4111
+ default:
4112
+ return paddedContent + " ".repeat(spacesToAdd);
4120
4113
  }
4121
4114
  };
4122
4115
  return CellFormatter;
@@ -4128,11 +4121,11 @@ var AlignmentFormatter = /** @class */ (function () {
4128
4121
  return this.indicators[alignment](width);
4129
4122
  };
4130
4123
  AlignmentFormatter.indicators = {
4131
- left: function (width) { return ":".concat('-'.repeat(width - 1)); },
4132
- right: function (width) { return "".concat('-'.repeat(width - 1), ":"); },
4133
- center: function (width) { return ":".concat('-'.repeat(width - 2), ":"); },
4134
- none: function (width) { return '-'.repeat(width); },
4135
- justify: function (width) { return '-'.repeat(width); }
4124
+ left: function (width) { return ":".concat("-".repeat(width - 1)); },
4125
+ right: function (width) { return "".concat("-".repeat(width - 1), ":"); },
4126
+ center: function (width) { return ":".concat("-".repeat(width - 2), ":"); },
4127
+ none: function (width) { return "-".repeat(width); },
4128
+ justify: function (width) { return "-".repeat(width); },
4136
4129
  };
4137
4130
  return AlignmentFormatter;
4138
4131
  }());
@@ -4143,9 +4136,9 @@ var TableFormatter = /** @class */ (function () {
4143
4136
  this.adjustedAlignments = this.getAdjustedAlignments();
4144
4137
  }
4145
4138
  TableFormatter.prototype.getAdjustedAlignments = function () {
4146
- var defaultAlignment = 'none';
4139
+ var defaultAlignment = "none";
4147
4140
  var sanitizeAlignment = function (alignment) {
4148
- return alignment === 'justify' ? 'none' : alignment;
4141
+ return alignment === "justify" ? "none" : alignment;
4149
4142
  };
4150
4143
  return this.config.columnAlignments.length < this.config.columnCount
4151
4144
  ? __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);
@@ -4153,81 +4146,77 @@ var TableFormatter = /** @class */ (function () {
4153
4146
  TableFormatter.prototype.formatRow = function (row) {
4154
4147
  var _this = this;
4155
4148
  var formattedCells = Array.from({ length: this.config.columnCount }, function (_, i) {
4156
- var _a;
4157
- var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
4158
- if (_this.config.replaceNewlines) {
4159
- cell = replaceNewlinesInCell(cell);
4160
- }
4161
- var alignment = _this.adjustedAlignments[i];
4162
- var width = _this.config.columnWidths ? _this.config.columnWidths[i] : formatCellContent(cell).length;
4163
- return _this.cellFormatter.formatCell(cell, alignment, width);
4149
+ var _a, _b, _c;
4150
+ var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : { content: "" };
4151
+ var width = (_c = (_b = _this.config.columnWidths) === null || _b === void 0 ? void 0 : _b[i]) !== null && _c !== void 0 ? _c : cell.content.length;
4152
+ return _this.cellFormatter.formatCell(cell, width);
4164
4153
  });
4165
- return "|".concat(formattedCells.join('|'), "|");
4154
+ return "|".concat(formattedCells.join("|"), "|");
4166
4155
  };
4167
4156
  TableFormatter.prototype.formatAlignmentRow = function () {
4168
4157
  var _this = this;
4169
- var padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
4158
+ var padding = this.config.useTabs
4159
+ ? "\t"
4160
+ : this.config.hasPadding
4161
+ ? " "
4162
+ : "";
4170
4163
  var formattedColumns = Array.from({ length: this.config.columnCount }, function (_, i) {
4164
+ var _a, _b;
4171
4165
  var alignment = _this.adjustedAlignments[i];
4172
- var width = _this.config.columnWidths ? _this.config.columnWidths[i] : 3;
4166
+ var width = (_b = (_a = _this.config.columnWidths) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 3;
4173
4167
  var indicator = AlignmentFormatter.formatIndicator(alignment, width);
4174
4168
  return "".concat(padding).concat(indicator).concat(padding);
4175
4169
  });
4176
- return "|".concat(formattedColumns.join('|'), "|");
4170
+ return "|".concat(formattedColumns.join("|"), "|");
4177
4171
  };
4178
4172
  return TableFormatter;
4179
4173
  }());
4180
- function calculateColumnWidths(tableRows, maxColumnCount) {
4174
+ function calculateColumnWidths(tableRows, maxColumnCount, config) {
4181
4175
  var widths = new Array(maxColumnCount).fill(3);
4176
+ var cellFormatter = new CellFormatter(config);
4182
4177
  tableRows.forEach(function (row) {
4183
- var _a;
4184
4178
  for (var i = 0; i < maxColumnCount; i++) {
4185
- var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
4186
- var content = formatCellContent(cell);
4187
- widths[i] = Math.max(widths[i], content.length);
4179
+ var cell = row[i];
4180
+ if (cell) {
4181
+ var formattedContent = cellFormatter["formatCellContent"](cell);
4182
+ widths[i] = Math.max(widths[i], formattedContent.length);
4183
+ }
4188
4184
  }
4189
4185
  });
4190
4186
  return widths;
4191
4187
  }
4192
- function calculateMaxColumnCount(inputData) {
4193
- var headerColumnCount = inputData.inputDataHeader.length;
4194
- var bodyColumnCounts = inputData.inputDataBody.map(function (row) { return row.length; });
4195
- return Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
4196
- }
4197
- function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
4198
- return canAdjustColumnWidths
4199
- ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
4200
- : undefined;
4201
- }
4202
4188
  function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
4203
4189
  if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
4204
4190
  if (useTabs === void 0) { useTabs = false; }
4205
4191
  if (replaceNewlines === void 0) { replaceNewlines = false; }
4206
4192
  if (hasPadding === void 0) { hasPadding = true; }
4207
- var maxColumnCount = calculateMaxColumnCount(inputData);
4208
- var columnWidths = getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths);
4193
+ var maxColumnCount = Math.max.apply(Math, __spreadArray([inputData.inputDataHeader.length], inputData.inputDataBody.map(function (row) { return row.length; }), false));
4209
4194
  var config = {
4210
4195
  columnCount: maxColumnCount,
4211
4196
  columnAlignments: columnAlignments,
4212
- columnWidths: columnWidths,
4197
+ columnWidths: canAdjustColumnWidths
4198
+ ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount, {
4199
+ columnCount: maxColumnCount,
4200
+ columnAlignments: columnAlignments,
4201
+ useTabs: useTabs,
4202
+ replaceNewlines: replaceNewlines,
4203
+ hasPadding: hasPadding,
4204
+ })
4205
+ : undefined,
4213
4206
  useTabs: useTabs,
4214
4207
  replaceNewlines: replaceNewlines,
4215
- hasPadding: hasPadding
4208
+ hasPadding: hasPadding,
4216
4209
  };
4217
4210
  var tableFormatter = new TableFormatter(config);
4218
4211
  var headerRow = tableFormatter.formatRow(inputData.inputDataHeader);
4219
4212
  var alignmentRow = tableFormatter.formatAlignmentRow();
4220
4213
  var bodyRows = inputData.inputDataBody
4221
4214
  .map(function (row) { return tableFormatter.formatRow(row); })
4222
- .join('\n');
4215
+ .join("\n");
4223
4216
  return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows).trimEnd();
4224
4217
  }
4225
- function replaceNewlinesInCell(cell) {
4226
- var content = typeof cell === 'string' ? cell : cell.content;
4227
- return content.replace(/\n/g, '<br>');
4228
- }
4229
4218
  function getColumnName(index) {
4230
- var columnName = '';
4219
+ var columnName = "";
4231
4220
  var currentIndex = index;
4232
4221
  while (currentIndex >= 0) {
4233
4222
  columnName = String.fromCharCode((currentIndex % 26) + 65) + columnName;
@@ -4247,7 +4236,7 @@ var MarkdownTableError = /** @class */ (function (_super) {
4247
4236
  __extends(MarkdownTableError, _super);
4248
4237
  function MarkdownTableError(message) {
4249
4238
  var _this = _super.call(this, message) || this;
4250
- _this.name = 'MarkdownTableError';
4239
+ _this.name = "MarkdownTableError";
4251
4240
  Object.setPrototypeOf(_this, MarkdownTableError.prototype);
4252
4241
  return _this;
4253
4242
  }
@@ -4260,10 +4249,10 @@ var MarkdownTableError = /** @class */ (function (_super) {
4260
4249
  */
4261
4250
  function validateInputData(inputData) {
4262
4251
  if (inputData === null || !Array.isArray(inputData)) {
4263
- throw new MarkdownTableError('The \'data\' prop must be a two-dimensional array.');
4252
+ throw new MarkdownTableError("The 'data' prop must be a two-dimensional array.");
4264
4253
  }
4265
4254
  if (inputData.length === 0) {
4266
- throw new MarkdownTableError('The \'data\' array must contain at least one row.');
4255
+ throw new MarkdownTableError("The 'data' array must contain at least one row.");
4267
4256
  }
4268
4257
  }
4269
4258
 
@@ -4273,7 +4262,10 @@ var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8
4273
4262
  var getTableData = function (inputData, hasHeader) {
4274
4263
  return hasHeader
4275
4264
  ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
4276
- : { inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }), inputDataBody: inputData };
4265
+ : {
4266
+ inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }),
4267
+ inputDataBody: inputData,
4268
+ };
4277
4269
  };
4278
4270
  var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding) {
4279
4271
  try {
@@ -4291,7 +4283,7 @@ var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adju
4291
4283
  var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
4292
4284
  useEffect(function () {
4293
4285
  var _a;
4294
- var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('code');
4286
+ var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("code");
4295
4287
  if (codeElement && markdownTableSyntax) {
4296
4288
  requestAnimationFrame(function () {
4297
4289
  Prism$1.highlightElement(codeElement);
@@ -4300,10 +4292,12 @@ var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
4300
4292
  }, [markdownTableSyntax]);
4301
4293
  };
4302
4294
  var MarkdownTable = function (_a) {
4303
- 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;
4295
+ 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;
4304
4296
  var adjustColumnWidths = !isCompact;
4305
4297
  var preElementRef = useRef(null);
4306
- var markdownTableSyntax = useMemo(function () { return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding); }, [
4298
+ var markdownTableSyntax = useMemo(function () {
4299
+ return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding);
4300
+ }, [
4307
4301
  inputData,
4308
4302
  hasHeader,
4309
4303
  columnAlignments,
@@ -4318,11 +4312,11 @@ var MarkdownTable = function (_a) {
4318
4312
  }
4319
4313
  }, [markdownTableSyntax, onGenerate]);
4320
4314
  applySyntaxHighlighting(preElementRef, markdownTableSyntax);
4321
- 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: {
4322
- position: 'relative',
4323
- isolation: 'isolate',
4324
- display: 'inline-block'
4325
- }, 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 }) }) })] }));
4315
+ 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: {
4316
+ position: "relative",
4317
+ isolation: "isolate",
4318
+ display: "inline-block",
4319
+ }, 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 }) }) })] }));
4326
4320
  };
4327
4321
 
4328
4322
  export { MarkdownTable };