react-markdown-table-ts 1.1.9 → 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/cellFormatter.d.ts +9 -0
- package/dist/index.cjs.js +100 -65
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.esm.js +100 -65
- package/dist/index.esm.js.map +1 -1
- package/dist/types.d.ts +18 -7
- package/dist/utils.d.ts +7 -5
- package/dist/validation.d.ts +1 -1
- package/package.json +1 -1
- package/dist/MarkdownTable.stories.d.ts +0 -156
- package/dist/jest.setup.d.ts +0 -2
- package/dist/jest.setup.js +0 -3
- package/dist/jest.setup.js.map +0 -1
- package/dist/src/MarkdownTable.stories.d.ts +0 -156
- package/dist/src/MarkdownTable.stories.js +0 -172
- package/dist/src/MarkdownTable.stories.js.map +0 -1
- package/dist/src/index.d.ts +0 -5
- package/dist/src/index.js +0 -78
- package/dist/src/index.js.map +0 -1
- package/dist/src/types.d.ts +0 -123
- package/dist/src/types.js +0 -3
- package/dist/src/types.js.map +0 -1
- package/dist/src/utils.d.ts +0 -8
- package/dist/src/utils.js +0 -176
- package/dist/src/utils.js.map +0 -1
- package/dist/src/validation.d.ts +0 -19
- package/dist/src/validation.js +0 -106
- package/dist/src/validation.js.map +0 -1
- package/dist/stories/Button.d.ts +0 -15
- package/dist/stories/Button.stories.d.ts +0 -23
- package/dist/stories/Header.d.ts +0 -12
- package/dist/stories/Header.stories.d.ts +0 -18
- package/dist/stories/Page.d.ts +0 -3
- package/dist/stories/Page.stories.d.ts +0 -13
- package/dist/test/MarkdownTable.test.d.ts +0 -1
- package/dist/test/MarkdownTable.test.js +0 -91
- package/dist/test/MarkdownTable.test.js.map +0 -1
- package/dist/test/utils.test.d.ts +0 -1
- package/dist/test/utils.test.js +0 -234
- package/dist/test/utils.test.js.map +0 -1
- package/dist/test/validation.test.d.ts +0 -1
- package/dist/test/validation.test.js +0 -86
- package/dist/test/validation.test.js.map +0 -1
@@ -0,0 +1,9 @@
|
|
1
|
+
import { CellData } from './types';
|
2
|
+
/**
|
3
|
+
* Formats cell content with markdown syntax based on CellData formatting options
|
4
|
+
*/
|
5
|
+
export declare function formatCellContent(cell: string | CellData): string;
|
6
|
+
/**
|
7
|
+
* Gets the alignment for a cell, prioritizing cell-specific alignment over column alignment
|
8
|
+
*/
|
9
|
+
export declare function getCellAlignment(cell: string | CellData, columnAlignment?: string): string;
|
package/dist/index.cjs.js
CHANGED
@@ -4068,24 +4068,56 @@ var Prism$1 = /*@__PURE__*/getDefaultExportFromCjs(prismExports);
|
|
4068
4068
|
|
4069
4069
|
}());
|
4070
4070
|
|
4071
|
+
/**
|
4072
|
+
* @fileoverview Utilities for formatting and generating markdown tables with support
|
4073
|
+
* for cell formatting, alignment, and width calculations.
|
4074
|
+
*/
|
4071
4075
|
var CellFormatter = /** @class */ (function () {
|
4072
4076
|
function CellFormatter(config) {
|
4073
4077
|
this.config = config;
|
4074
|
-
this.padding = this.config.useTabs
|
4078
|
+
this.padding = this.config.useTabs
|
4079
|
+
? "\t"
|
4080
|
+
: this.config.hasPadding
|
4081
|
+
? " "
|
4082
|
+
: "";
|
4075
4083
|
}
|
4076
|
-
CellFormatter.prototype.
|
4077
|
-
var
|
4078
|
-
|
4079
|
-
|
4080
|
-
|
4081
|
-
|
4082
|
-
|
4083
|
-
|
4084
|
-
|
4085
|
-
|
4084
|
+
CellFormatter.prototype.formatCellContent = function (cell) {
|
4085
|
+
var content = cell.content;
|
4086
|
+
if (cell.code) {
|
4087
|
+
content = "`".concat(content, "`");
|
4088
|
+
}
|
4089
|
+
if (cell.bold) {
|
4090
|
+
content = "**".concat(content, "**");
|
4091
|
+
}
|
4092
|
+
if (cell.italic) {
|
4093
|
+
content = "*".concat(content, "*");
|
4094
|
+
}
|
4095
|
+
if (cell.link) {
|
4096
|
+
content = "[".concat(content, "](").concat(cell.link, ")");
|
4097
|
+
}
|
4098
|
+
return content;
|
4099
|
+
};
|
4100
|
+
CellFormatter.prototype.formatCell = function (cell, width) {
|
4101
|
+
var content = this.formatCellContent(cell);
|
4102
|
+
var alignment = cell.alignment || "inherit";
|
4103
|
+
var effectiveAlignment = alignment === "inherit" ? "none" : alignment;
|
4104
|
+
var paddedContent = "".concat(this.padding).concat(content).concat(this.padding);
|
4105
|
+
var spacesToAdd = width - content.length;
|
4106
|
+
if (spacesToAdd <= 0)
|
4107
|
+
return paddedContent;
|
4108
|
+
switch (effectiveAlignment) {
|
4109
|
+
case "right":
|
4110
|
+
return " ".repeat(spacesToAdd) + paddedContent;
|
4111
|
+
case "center": {
|
4112
|
+
var leftPad = Math.floor(spacesToAdd / 2);
|
4113
|
+
var rightPad = spacesToAdd - leftPad;
|
4114
|
+
return " ".repeat(leftPad) + paddedContent + " ".repeat(rightPad);
|
4086
4115
|
}
|
4087
|
-
|
4088
|
-
|
4116
|
+
case "justify":
|
4117
|
+
case "left":
|
4118
|
+
case "none":
|
4119
|
+
default:
|
4120
|
+
return paddedContent + " ".repeat(spacesToAdd);
|
4089
4121
|
}
|
4090
4122
|
};
|
4091
4123
|
return CellFormatter;
|
@@ -4097,11 +4129,11 @@ var AlignmentFormatter = /** @class */ (function () {
|
|
4097
4129
|
return this.indicators[alignment](width);
|
4098
4130
|
};
|
4099
4131
|
AlignmentFormatter.indicators = {
|
4100
|
-
left: function (width) { return ":".concat(
|
4101
|
-
right: function (width) { return "".concat(
|
4102
|
-
center: function (width) { return ":".concat(
|
4103
|
-
none: function (width) { return
|
4104
|
-
justify: function (width) { return
|
4132
|
+
left: function (width) { return ":".concat("-".repeat(width - 1)); },
|
4133
|
+
right: function (width) { return "".concat("-".repeat(width - 1), ":"); },
|
4134
|
+
center: function (width) { return ":".concat("-".repeat(width - 2), ":"); },
|
4135
|
+
none: function (width) { return "-".repeat(width); },
|
4136
|
+
justify: function (width) { return "-".repeat(width); },
|
4105
4137
|
};
|
4106
4138
|
return AlignmentFormatter;
|
4107
4139
|
}());
|
@@ -4112,9 +4144,9 @@ var TableFormatter = /** @class */ (function () {
|
|
4112
4144
|
this.adjustedAlignments = this.getAdjustedAlignments();
|
4113
4145
|
}
|
4114
4146
|
TableFormatter.prototype.getAdjustedAlignments = function () {
|
4115
|
-
var defaultAlignment =
|
4147
|
+
var defaultAlignment = "none";
|
4116
4148
|
var sanitizeAlignment = function (alignment) {
|
4117
|
-
return alignment ===
|
4149
|
+
return alignment === "justify" ? "none" : alignment;
|
4118
4150
|
};
|
4119
4151
|
return this.config.columnAlignments.length < this.config.columnCount
|
4120
4152
|
? __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);
|
@@ -4122,79 +4154,77 @@ var TableFormatter = /** @class */ (function () {
|
|
4122
4154
|
TableFormatter.prototype.formatRow = function (row) {
|
4123
4155
|
var _this = this;
|
4124
4156
|
var formattedCells = Array.from({ length: this.config.columnCount }, function (_, i) {
|
4125
|
-
var _a;
|
4126
|
-
var cell = (_a = row[i]) !== null && _a !== void 0 ? _a :
|
4127
|
-
|
4128
|
-
|
4129
|
-
}
|
4130
|
-
var alignment = _this.adjustedAlignments[i];
|
4131
|
-
var width = _this.config.columnWidths ? _this.config.columnWidths[i] : cell.length;
|
4132
|
-
return _this.cellFormatter.formatCell(cell, alignment, width);
|
4157
|
+
var _a, _b, _c;
|
4158
|
+
var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : { content: "" };
|
4159
|
+
var width = (_c = (_b = _this.config.columnWidths) === null || _b === void 0 ? void 0 : _b[i]) !== null && _c !== void 0 ? _c : cell.content.length;
|
4160
|
+
return _this.cellFormatter.formatCell(cell, width);
|
4133
4161
|
});
|
4134
|
-
return "|".concat(formattedCells.join(
|
4162
|
+
return "|".concat(formattedCells.join("|"), "|");
|
4135
4163
|
};
|
4136
4164
|
TableFormatter.prototype.formatAlignmentRow = function () {
|
4137
4165
|
var _this = this;
|
4138
|
-
var padding = this.config.useTabs
|
4166
|
+
var padding = this.config.useTabs
|
4167
|
+
? "\t"
|
4168
|
+
: this.config.hasPadding
|
4169
|
+
? " "
|
4170
|
+
: "";
|
4139
4171
|
var formattedColumns = Array.from({ length: this.config.columnCount }, function (_, i) {
|
4172
|
+
var _a, _b;
|
4140
4173
|
var alignment = _this.adjustedAlignments[i];
|
4141
|
-
var width = _this.config.columnWidths ?
|
4174
|
+
var width = (_b = (_a = _this.config.columnWidths) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 3;
|
4142
4175
|
var indicator = AlignmentFormatter.formatIndicator(alignment, width);
|
4143
4176
|
return "".concat(padding).concat(indicator).concat(padding);
|
4144
4177
|
});
|
4145
|
-
return "|".concat(formattedColumns.join(
|
4178
|
+
return "|".concat(formattedColumns.join("|"), "|");
|
4146
4179
|
};
|
4147
4180
|
return TableFormatter;
|
4148
4181
|
}());
|
4149
|
-
function calculateColumnWidths(tableRows, maxColumnCount) {
|
4182
|
+
function calculateColumnWidths(tableRows, maxColumnCount, config) {
|
4150
4183
|
var widths = new Array(maxColumnCount).fill(3);
|
4184
|
+
var cellFormatter = new CellFormatter(config);
|
4151
4185
|
tableRows.forEach(function (row) {
|
4152
|
-
var _a;
|
4153
4186
|
for (var i = 0; i < maxColumnCount; i++) {
|
4154
|
-
var cell =
|
4155
|
-
|
4187
|
+
var cell = row[i];
|
4188
|
+
if (cell) {
|
4189
|
+
var formattedContent = cellFormatter["formatCellContent"](cell);
|
4190
|
+
widths[i] = Math.max(widths[i], formattedContent.length);
|
4191
|
+
}
|
4156
4192
|
}
|
4157
4193
|
});
|
4158
4194
|
return widths;
|
4159
4195
|
}
|
4160
|
-
function calculateMaxColumnCount(inputData) {
|
4161
|
-
var headerColumnCount = inputData.inputDataHeader.length;
|
4162
|
-
var bodyColumnCounts = inputData.inputDataBody.map(function (row) { return row.length; });
|
4163
|
-
return Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
|
4164
|
-
}
|
4165
|
-
function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
|
4166
|
-
return canAdjustColumnWidths
|
4167
|
-
? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
|
4168
|
-
: undefined;
|
4169
|
-
}
|
4170
4196
|
function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
|
4171
4197
|
if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
|
4172
4198
|
if (useTabs === void 0) { useTabs = false; }
|
4173
4199
|
if (replaceNewlines === void 0) { replaceNewlines = false; }
|
4174
4200
|
if (hasPadding === void 0) { hasPadding = true; }
|
4175
|
-
var maxColumnCount =
|
4176
|
-
var columnWidths = getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths);
|
4201
|
+
var maxColumnCount = Math.max.apply(Math, __spreadArray([inputData.inputDataHeader.length], inputData.inputDataBody.map(function (row) { return row.length; }), false));
|
4177
4202
|
var config = {
|
4178
4203
|
columnCount: maxColumnCount,
|
4179
4204
|
columnAlignments: columnAlignments,
|
4180
|
-
columnWidths:
|
4205
|
+
columnWidths: canAdjustColumnWidths
|
4206
|
+
? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount, {
|
4207
|
+
columnCount: maxColumnCount,
|
4208
|
+
columnAlignments: columnAlignments,
|
4209
|
+
useTabs: useTabs,
|
4210
|
+
replaceNewlines: replaceNewlines,
|
4211
|
+
hasPadding: hasPadding,
|
4212
|
+
})
|
4213
|
+
: undefined,
|
4181
4214
|
useTabs: useTabs,
|
4182
4215
|
replaceNewlines: replaceNewlines,
|
4183
|
-
hasPadding: hasPadding
|
4216
|
+
hasPadding: hasPadding,
|
4184
4217
|
};
|
4185
4218
|
var tableFormatter = new TableFormatter(config);
|
4186
4219
|
var headerRow = tableFormatter.formatRow(inputData.inputDataHeader);
|
4187
4220
|
var alignmentRow = tableFormatter.formatAlignmentRow();
|
4188
4221
|
var bodyRows = inputData.inputDataBody
|
4189
4222
|
.map(function (row) { return tableFormatter.formatRow(row); })
|
4190
|
-
.join(
|
4223
|
+
.join("\n");
|
4191
4224
|
return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows).trimEnd();
|
4192
4225
|
}
|
4193
|
-
function replaceNewlinesInCell(cell) {
|
4194
|
-
return cell.replace(/\n/g, '<br>');
|
4195
|
-
}
|
4196
4226
|
function getColumnName(index) {
|
4197
|
-
var columnName =
|
4227
|
+
var columnName = "";
|
4198
4228
|
var currentIndex = index;
|
4199
4229
|
while (currentIndex >= 0) {
|
4200
4230
|
columnName = String.fromCharCode((currentIndex % 26) + 65) + columnName;
|
@@ -4214,7 +4244,7 @@ var MarkdownTableError = /** @class */ (function (_super) {
|
|
4214
4244
|
__extends(MarkdownTableError, _super);
|
4215
4245
|
function MarkdownTableError(message) {
|
4216
4246
|
var _this = _super.call(this, message) || this;
|
4217
|
-
_this.name =
|
4247
|
+
_this.name = "MarkdownTableError";
|
4218
4248
|
Object.setPrototypeOf(_this, MarkdownTableError.prototype);
|
4219
4249
|
return _this;
|
4220
4250
|
}
|
@@ -4240,7 +4270,10 @@ var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8
|
|
4240
4270
|
var getTableData = function (inputData, hasHeader) {
|
4241
4271
|
return hasHeader
|
4242
4272
|
? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
|
4243
|
-
: {
|
4273
|
+
: {
|
4274
|
+
inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }),
|
4275
|
+
inputDataBody: inputData,
|
4276
|
+
};
|
4244
4277
|
};
|
4245
4278
|
var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding) {
|
4246
4279
|
try {
|
@@ -4258,7 +4291,7 @@ var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adju
|
|
4258
4291
|
var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
|
4259
4292
|
require$$0.useEffect(function () {
|
4260
4293
|
var _a;
|
4261
|
-
var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(
|
4294
|
+
var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("code");
|
4262
4295
|
if (codeElement && markdownTableSyntax) {
|
4263
4296
|
requestAnimationFrame(function () {
|
4264
4297
|
Prism$1.highlightElement(codeElement);
|
@@ -4267,10 +4300,12 @@ var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
|
|
4267
4300
|
}, [markdownTableSyntax]);
|
4268
4301
|
};
|
4269
4302
|
var MarkdownTable = function (_a) {
|
4270
|
-
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 ?
|
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;
|
4271
4304
|
var adjustColumnWidths = !isCompact;
|
4272
4305
|
var preElementRef = require$$0.useRef(null);
|
4273
|
-
var markdownTableSyntax = require$$0.useMemo(function () {
|
4306
|
+
var markdownTableSyntax = require$$0.useMemo(function () {
|
4307
|
+
return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding);
|
4308
|
+
}, [
|
4274
4309
|
inputData,
|
4275
4310
|
hasHeader,
|
4276
4311
|
columnAlignments,
|
@@ -4285,11 +4320,11 @@ var MarkdownTable = function (_a) {
|
|
4285
4320
|
}
|
4286
4321
|
}, [markdownTableSyntax, onGenerate]);
|
4287
4322
|
applySyntaxHighlighting(preElementRef, markdownTableSyntax);
|
4288
|
-
return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme ===
|
4289
|
-
position:
|
4290
|
-
isolation:
|
4291
|
-
display:
|
4292
|
-
}, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme ===
|
4323
|
+
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: {
|
4324
|
+
position: "relative",
|
4325
|
+
isolation: "isolate",
|
4326
|
+
display: "inline-block",
|
4327
|
+
}, 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 }) }) })] }));
|
4293
4328
|
};
|
4294
4329
|
|
4295
4330
|
exports.MarkdownTable = MarkdownTable;
|