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/README.md +56 -90
- package/dist/index.cjs.js +100 -106
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.esm.js +100 -106
- package/dist/index.esm.js.map +1 -1
- package/dist/types.d.ts +18 -19
- package/dist/utils.d.ts +7 -5
- package/dist/validation.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import
|
3
|
-
import
|
4
|
-
import { MarkdownTableProps } from
|
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
|
-
*
|
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
|
4070
|
+
this.padding = this.config.useTabs
|
4071
|
+
? "\t"
|
4072
|
+
: this.config.hasPadding
|
4073
|
+
? " "
|
4074
|
+
: "";
|
4104
4075
|
}
|
4105
|
-
CellFormatter.prototype.
|
4106
|
-
var content =
|
4107
|
-
|
4108
|
-
|
4109
|
-
|
4110
|
-
|
4111
|
-
|
4112
|
-
|
4113
|
-
|
4114
|
-
|
4115
|
-
|
4116
|
-
|
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
|
-
|
4119
|
-
|
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(
|
4132
|
-
right: function (width) { return "".concat(
|
4133
|
-
center: function (width) { return ":".concat(
|
4134
|
-
none: function (width) { return
|
4135
|
-
justify: function (width) { return
|
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 =
|
4139
|
+
var defaultAlignment = "none";
|
4147
4140
|
var sanitizeAlignment = function (alignment) {
|
4148
|
-
return 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
|
-
|
4159
|
-
|
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
|
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 ?
|
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 =
|
4186
|
-
|
4187
|
-
|
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 =
|
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:
|
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(
|
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 =
|
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(
|
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(
|
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
|
-
: {
|
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(
|
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 ?
|
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 () {
|
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 ===
|
4322
|
-
position:
|
4323
|
-
isolation:
|
4324
|
-
display:
|
4325
|
-
}, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme ===
|
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 };
|