react-markdown-table-ts 0.5.8 → 0.5.10
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 +65 -65
- package/dist/index.cjs.js +109 -138
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +109 -138
- package/dist/index.esm.js.map +1 -1
- package/dist/types.d.ts +0 -4
- package/dist/utils.d.ts +17 -29
- package/package.json +1 -1
package/README.md
CHANGED
@@ -1,65 +1,65 @@
|
|
1
|
-
# ⚛️ react-markdown-table-ts 🛡️
|
2
|
-
|
3
|
-
[](https://www.npmjs.com/package/react-markdown-table-ts)
|
4
|
-

|
5
|
-
[](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
|
6
|
-
[](https://packagequality.com/#?package=react-markdown-table-ts)
|
7
|
-
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
8
|
-
|
9
|
-
A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
|
10
|
-
|
11
|
-
## ✨ Features
|
12
|
-
|
13
|
-
- **Type Safety:** Built with TypeScript to provide strong type guarantees.
|
14
|
-
- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
|
15
|
-
- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
|
16
|
-
- **Compact Mode:** Option to generate compact tables with minimal padding.
|
17
|
-
- **Tab-Separated Columns:** Option to add tabs between columns.
|
18
|
-
- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
|
19
|
-
- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
|
20
|
-
- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
|
21
|
-
- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
|
22
|
-
|
23
|
-
## 📦 Installation
|
24
|
-
|
25
|
-
Install the package via npm:
|
26
|
-
|
27
|
-
```
|
28
|
-
|
29
|
-
npm install react-markdown-table-ts
|
30
|
-
|
31
|
-
```
|
32
|
-
|
33
|
-
## 🔧 API
|
34
|
-
|
35
|
-
### MarkdownTable Props
|
36
|
-
|
37
|
-
| Prop | Type | Default | Description |
|
38
|
-
| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
|
39
|
-
| `data` | `string[][]` | `null` | The table data as a 2D array of strings |
|
40
|
-
| `columnAlignments` | `('left' \| 'center' \| 'right' \| 'none')[]` | `[]` | Alignment for each column |
|
41
|
-
| `isCompact` | `boolean` | `false` | Use minimal column widths |
|
42
|
-
| `className` | `string` | `undefined` | CSS class for the `<pre>` tag |
|
43
|
-
| `hasTabs` | `boolean` | `false` | Add tabs between table columns |
|
44
|
-
| `canReplaceNewlines` | `boolean` | `false` | Replace newlines in cells with `<br>` tags |
|
45
|
-
| `onTableCreate` | `(markdownString: string) => void` | `undefined` | Callback to receive the Markdown string |
|
46
|
-
| `hasHeader` | `boolean` | `true` | Whether the first row of `data` is a header |
|
47
|
-
|
48
|
-
## 🚀 Usage
|
49
|
-
|
50
|
-
```jsx
|
51
|
-
import React from 'react';
|
52
|
-
import {MarkdownTable} from 'markdown-table-component';
|
53
|
-
|
54
|
-
const App = () => {
|
55
|
-
const data = [
|
56
|
-
['Header 1', 'Header 2', 'Header 3'],
|
57
|
-
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
|
58
|
-
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
|
59
|
-
];
|
60
|
-
|
61
|
-
return <MarkdownTable data={data} />;
|
62
|
-
};
|
63
|
-
|
64
|
-
export default App;
|
65
|
-
```
|
1
|
+
# ⚛️ react-markdown-table-ts 🛡️
|
2
|
+
|
3
|
+
[](https://www.npmjs.com/package/react-markdown-table-ts)
|
4
|
+

|
5
|
+
[](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
|
6
|
+
[](https://packagequality.com/#?package=react-markdown-table-ts)
|
7
|
+
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
8
|
+
|
9
|
+
A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
|
10
|
+
|
11
|
+
## ✨ Features
|
12
|
+
|
13
|
+
- **Type Safety:** Built with TypeScript to provide strong type guarantees.
|
14
|
+
- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
|
15
|
+
- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
|
16
|
+
- **Compact Mode:** Option to generate compact tables with minimal padding.
|
17
|
+
- **Tab-Separated Columns:** Option to add tabs between columns.
|
18
|
+
- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
|
19
|
+
- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
|
20
|
+
- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
|
21
|
+
- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
|
22
|
+
|
23
|
+
## 📦 Installation
|
24
|
+
|
25
|
+
Install the package via npm:
|
26
|
+
|
27
|
+
```
|
28
|
+
|
29
|
+
npm install react-markdown-table-ts
|
30
|
+
|
31
|
+
```
|
32
|
+
|
33
|
+
## 🔧 API
|
34
|
+
|
35
|
+
### MarkdownTable Props
|
36
|
+
|
37
|
+
| Prop | Type | Default | Description |
|
38
|
+
| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
|
39
|
+
| `data` | `string[][]` | `null` | The table data as a 2D array of strings |
|
40
|
+
| `columnAlignments` | `('left' \| 'center' \| 'right' \| 'none')[]` | `[]` | Alignment for each column |
|
41
|
+
| `isCompact` | `boolean` | `false` | Use minimal column widths |
|
42
|
+
| `className` | `string` | `undefined` | CSS class for the `<pre>` tag |
|
43
|
+
| `hasTabs` | `boolean` | `false` | Add tabs between table columns |
|
44
|
+
| `canReplaceNewlines` | `boolean` | `false` | Replace newlines in cells with `<br>` tags |
|
45
|
+
| `onTableCreate` | `(markdownString: string) => void` | `undefined` | Callback to receive the Markdown string |
|
46
|
+
| `hasHeader` | `boolean` | `true` | Whether the first row of `data` is a header |
|
47
|
+
|
48
|
+
## 🚀 Usage
|
49
|
+
|
50
|
+
```jsx
|
51
|
+
import React from 'react';
|
52
|
+
import {MarkdownTable} from 'markdown-table-component';
|
53
|
+
|
54
|
+
const App = () => {
|
55
|
+
const data = [
|
56
|
+
['Header 1', 'Header 2', 'Header 3'],
|
57
|
+
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
|
58
|
+
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
|
59
|
+
];
|
60
|
+
|
61
|
+
return <MarkdownTable data={data} />;
|
62
|
+
};
|
63
|
+
|
64
|
+
export default App;
|
65
|
+
```
|
package/dist/index.cjs.js
CHANGED
@@ -4104,7 +4104,7 @@ var MarkdownTableError = /** @class */ (function (_super) {
|
|
4104
4104
|
function getAdjustedAlignments(columnAlignments, columnCount) {
|
4105
4105
|
var defaultAlignment = 'left';
|
4106
4106
|
return columnAlignments.length < columnCount
|
4107
|
-
? __spreadArray(__spreadArray([], columnAlignments, true), Array(columnCount - columnAlignments.length).fill(defaultAlignment), true) :
|
4107
|
+
? __spreadArray(__spreadArray([], Array.from(columnAlignments), true), Array(columnCount - columnAlignments.length).fill(defaultAlignment), true) : Array.from(columnAlignments);
|
4108
4108
|
}
|
4109
4109
|
/**
|
4110
4110
|
* Calculates the maximum width for each column based on the content.
|
@@ -4123,104 +4123,104 @@ function calculateColumnWidths(tableRows, maxColumnCount) {
|
|
4123
4123
|
});
|
4124
4124
|
return widths;
|
4125
4125
|
}
|
4126
|
-
|
4127
|
-
|
4128
|
-
|
4129
|
-
|
4130
|
-
|
4131
|
-
|
4132
|
-
|
4133
|
-
|
4126
|
+
function formatCell(cell, alignment, targetWidth, useTabs, padding) {
|
4127
|
+
switch (alignment) {
|
4128
|
+
case 'right':
|
4129
|
+
return "".concat(useTabs ? '\t' : padding).concat(cell.padStart(targetWidth)).concat(useTabs ? '\t' : padding);
|
4130
|
+
case 'center':
|
4131
|
+
return formatCenterAlignedCell(cell, targetWidth, useTabs, padding);
|
4132
|
+
default:
|
4133
|
+
return "".concat(useTabs ? '\t' : padding).concat(cell.padEnd(targetWidth)).concat(useTabs ? '\t' : padding);
|
4134
|
+
}
|
4135
|
+
}
|
4136
|
+
function formatCenterAlignedCell(cell, targetWidth, useTabs, padding) {
|
4137
|
+
var totalPadding = targetWidth - cell.length;
|
4138
|
+
var paddingLeft = Math.floor(totalPadding / 2);
|
4139
|
+
var paddingRight = totalPadding - paddingLeft;
|
4140
|
+
return "".concat(useTabs ? '\t' : padding).concat(' '.repeat(paddingLeft)).concat(cell).concat(' '.repeat(paddingRight)).concat(useTabs ? '\t' : padding);
|
4141
|
+
}
|
4142
|
+
function formatMarkdownRow(columnCount, currentRow, columnAlignments, columnWidths, useTabs, canReplaceNewlines, hasPadding) {
|
4143
|
+
if (useTabs === void 0) { useTabs = false; }
|
4144
|
+
if (canReplaceNewlines === void 0) { canReplaceNewlines = false; }
|
4145
|
+
if (hasPadding === void 0) { hasPadding = true; }
|
4134
4146
|
var adjustedAlignments = getAdjustedAlignments(columnAlignments, columnCount);
|
4135
|
-
var
|
4136
|
-
|
4137
|
-
var
|
4138
|
-
|
4147
|
+
var padding = hasPadding ? ' ' : '';
|
4148
|
+
var formattedCells = Array.from({ length: columnCount }, function (_, i) {
|
4149
|
+
var _a, _b;
|
4150
|
+
var cell = (_a = currentRow[i]) !== null && _a !== void 0 ? _a : '';
|
4151
|
+
if (canReplaceNewlines) {
|
4139
4152
|
cell = replaceNewlinesInCell(cell);
|
4140
4153
|
}
|
4141
|
-
var alignment = (
|
4154
|
+
var alignment = (_b = adjustedAlignments[i]) !== null && _b !== void 0 ? _b : 'left';
|
4142
4155
|
var targetWidth = columnWidths ? columnWidths[i] : cell.length;
|
4143
|
-
|
4144
|
-
|
4145
|
-
|
4146
|
-
}
|
4147
|
-
else if (alignment === 'center') {
|
4148
|
-
var totalPadding = targetWidth - cell.length;
|
4149
|
-
var paddingLeft = Math.floor(totalPadding / 2);
|
4150
|
-
var paddingRight = totalPadding - paddingLeft;
|
4151
|
-
markdownRow += "".concat(useTabs ? '\t' : padding).concat(' '.repeat(paddingLeft)).concat(cell).concat(' '.repeat(paddingRight)).concat(useTabs ? '\t' : padding, "|");
|
4152
|
-
}
|
4153
|
-
else {
|
4154
|
-
// Left alignment or default
|
4155
|
-
markdownRow += "".concat(useTabs ? '\t' : padding).concat(cell.padEnd(targetWidth)).concat(useTabs ? '\t' : padding, "|");
|
4156
|
-
}
|
4157
|
-
}
|
4158
|
-
return markdownRow;
|
4159
|
-
}
|
4160
|
-
function getAlignmentIndicator(_a) {
|
4161
|
-
var _b;
|
4162
|
-
var alignment = _a.alignment, targetWidth = _a.targetWidth;
|
4163
|
-
var indicators = {
|
4164
|
-
left: ":".concat('-'.repeat(targetWidth - 1)),
|
4165
|
-
center: ":".concat('-'.repeat(targetWidth - 2), ":"),
|
4166
|
-
right: "".concat('-'.repeat(targetWidth - 1), ":"),
|
4167
|
-
none: "".concat('-'.repeat(targetWidth)),
|
4168
|
-
};
|
4169
|
-
return (_b = indicators[alignment]) !== null && _b !== void 0 ? _b : indicators.none;
|
4156
|
+
return formatCell(cell, alignment, targetWidth, useTabs, padding);
|
4157
|
+
});
|
4158
|
+
return "|".concat(formattedCells.join('|'), "|");
|
4170
4159
|
}
|
4171
|
-
|
4172
|
-
|
4160
|
+
/**
|
4161
|
+
* Generates the alignment row for the Markdown table syntax.
|
4162
|
+
* @param columnCount - The number of columns in the table.
|
4163
|
+
* @param columnAlignments - Alignment settings for each column.
|
4164
|
+
* @param columnWidths - Widths of each column.
|
4165
|
+
* @param useTabs - Flag to use tabs between columns.
|
4166
|
+
* @param hasPadding - Flag to add padding spaces around cell content.
|
4167
|
+
* @returns The Markdown string for the alignment row.
|
4168
|
+
*/
|
4169
|
+
function formatAlignmentRow(columnCount, columnAlignments, columnWidths, useTabs, hasPadding) {
|
4170
|
+
var _a;
|
4171
|
+
if (useTabs === void 0) { useTabs = false; }
|
4172
|
+
if (hasPadding === void 0) { hasPadding = true; }
|
4173
4173
|
var adjustedAlignments = getAdjustedAlignments(columnAlignments, columnCount);
|
4174
|
-
var
|
4175
|
-
var
|
4176
|
-
var _a, _b;
|
4174
|
+
var alignmentRow = '|';
|
4175
|
+
for (var i = 0; i < columnCount; i++) {
|
4177
4176
|
var alignment = (_a = adjustedAlignments[i]) !== null && _a !== void 0 ? _a : 'left';
|
4178
|
-
var targetWidth =
|
4179
|
-
var alignIndicator =
|
4180
|
-
|
4181
|
-
|
4182
|
-
|
4177
|
+
var targetWidth = columnWidths ? columnWidths[i] : 3;
|
4178
|
+
var alignIndicator = '';
|
4179
|
+
var padding = hasPadding ? ' ' : '';
|
4180
|
+
switch (alignment) {
|
4181
|
+
case 'left':
|
4182
|
+
alignIndicator = ":".concat('-'.repeat(targetWidth - 1));
|
4183
|
+
break;
|
4184
|
+
case 'center':
|
4185
|
+
alignIndicator = ":".concat('-'.repeat(targetWidth - 2), ":");
|
4186
|
+
break;
|
4187
|
+
case 'right':
|
4188
|
+
alignIndicator = "".concat('-'.repeat(targetWidth - 1), ":");
|
4189
|
+
break;
|
4190
|
+
default:
|
4191
|
+
alignIndicator = "".concat('-'.repeat(targetWidth));
|
4192
|
+
break;
|
4193
|
+
}
|
4194
|
+
alignmentRow += "".concat(useTabs ? '\t' : padding).concat(alignIndicator).concat(useTabs ? '\t' : padding, "|");
|
4195
|
+
}
|
4196
|
+
return alignmentRow;
|
4183
4197
|
}
|
4184
4198
|
/**
|
4185
4199
|
* Generates a complete Markdown table string from the provided data.
|
4186
|
-
* @param
|
4200
|
+
* @param inputData - The table data including headers and rows.
|
4201
|
+
* @param columnAlignments - Alignment settings for each column.
|
4202
|
+
* @param canAdjustColumnWidths - Flag to adjust column widths based on content.
|
4203
|
+
* @param useTabs - Flag to use tabs between columns.
|
4204
|
+
* @param replaceNewlines - Flag to replace newlines with <br> tags.
|
4205
|
+
* @param hasPadding - Flag to add padding spaces around cell content.
|
4187
4206
|
* @returns The complete Markdown table string.
|
4188
4207
|
*/
|
4189
|
-
function generateMarkdownTableString(
|
4190
|
-
|
4208
|
+
function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
|
4209
|
+
if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
|
4210
|
+
if (useTabs === void 0) { useTabs = false; }
|
4211
|
+
if (replaceNewlines === void 0) { replaceNewlines = false; }
|
4212
|
+
if (hasPadding === void 0) { hasPadding = true; }
|
4191
4213
|
var headerColumnCount = inputData.inputDataHeader.length;
|
4192
4214
|
var bodyColumnCounts = inputData.inputDataBody.map(function (currentRow) { return currentRow.length; });
|
4193
4215
|
var maxColumnCount = Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
|
4194
4216
|
var columnWidths = canAdjustColumnWidths
|
4195
4217
|
? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
|
4196
4218
|
: undefined;
|
4197
|
-
var markdownHeaderRow = formatMarkdownRow(
|
4198
|
-
|
4199
|
-
currentRow: inputData.inputDataHeader,
|
4200
|
-
columnAlignments: columnAlignments,
|
4201
|
-
columnWidths: columnWidths,
|
4202
|
-
useTabs: useTabs,
|
4203
|
-
replaceNewlines: replaceNewlines,
|
4204
|
-
hasPadding: hasPadding,
|
4205
|
-
});
|
4206
|
-
var markdownAlignmentRow = formatAlignmentRow({
|
4207
|
-
columnCount: maxColumnCount,
|
4208
|
-
columnAlignments: columnAlignments,
|
4209
|
-
columnWidths: columnWidths,
|
4210
|
-
useTabs: useTabs,
|
4211
|
-
hasPadding: hasPadding,
|
4212
|
-
});
|
4219
|
+
var markdownHeaderRow = formatMarkdownRow(maxColumnCount, inputData.inputDataHeader, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
4220
|
+
var markdownAlignmentRow = formatAlignmentRow(maxColumnCount, columnAlignments, columnWidths, useTabs, hasPadding);
|
4213
4221
|
var markdownBodyRows = inputData.inputDataBody
|
4214
4222
|
.map(function (currentRow) {
|
4215
|
-
return formatMarkdownRow(
|
4216
|
-
columnCount: maxColumnCount,
|
4217
|
-
currentRow: currentRow,
|
4218
|
-
columnAlignments: columnAlignments,
|
4219
|
-
columnWidths: columnWidths,
|
4220
|
-
useTabs: useTabs,
|
4221
|
-
replaceNewlines: replaceNewlines,
|
4222
|
-
hasPadding: hasPadding,
|
4223
|
-
});
|
4223
|
+
return formatMarkdownRow(maxColumnCount, currentRow, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
4224
4224
|
})
|
4225
4225
|
.join('\n');
|
4226
4226
|
return "".concat(markdownHeaderRow, "\n").concat(markdownAlignmentRow, "\n").concat(markdownBodyRows).trimEnd();
|
@@ -18566,40 +18566,48 @@ var LIGHT_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#000
|
|
18566
18566
|
var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}\n";
|
18567
18567
|
var MarkdownTable = function (_a) {
|
18568
18568
|
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.canReplaceNewlines, canReplaceNewlines = _h === void 0 ? false : _h, className = _a.className, onTableCreate = _a.onTableCreate, _j = _a.theme, theme = _j === void 0 ? 'light' : _j, preStyle = _a.preStyle, _k = _a.showCopyButton, showCopyButton = _k === void 0 ? false : _k;
|
18569
|
+
var adjustColumnWidths = !isCompact;
|
18569
18570
|
var preElementRef = React.useRef(null);
|
18570
18571
|
var _l = React.useState(false), isCopied = _l[0], setIsCopied = _l[1];
|
18571
|
-
var adjustColumnWidths = !isCompact;
|
18572
|
-
var convertedInputData = React.useMemo(function () {
|
18573
|
-
if (!inputData)
|
18574
|
-
return null;
|
18575
|
-
var header = inputData[0], body = inputData.slice(1);
|
18576
|
-
return { inputDataHeader: header, inputDataBody: body };
|
18577
|
-
}, [inputData]);
|
18578
18572
|
var markdownTableSyntax = React.useMemo(function () {
|
18579
|
-
|
18580
|
-
|
18581
|
-
|
18582
|
-
|
18583
|
-
|
18584
|
-
|
18585
|
-
|
18586
|
-
|
18587
|
-
|
18573
|
+
if (inputData === null) {
|
18574
|
+
return 'Error: No data provided for the table.';
|
18575
|
+
}
|
18576
|
+
try {
|
18577
|
+
if (!Array.isArray(inputData) || inputData.length === 0) {
|
18578
|
+
throw new MarkdownTableError("The 'data' prop must be a non-empty two-dimensional array.");
|
18579
|
+
}
|
18580
|
+
var _a = hasHeader
|
18581
|
+
? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
|
18582
|
+
: { inputDataHeader: generateAlphabetHeaders(inputData[0].length), inputDataBody: inputData }, inputDataHeader = _a.inputDataHeader, inputDataBody = _a.inputDataBody;
|
18583
|
+
return generateMarkdownTableString({ inputDataHeader: inputDataHeader, inputDataBody: inputDataBody }, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding);
|
18584
|
+
}
|
18585
|
+
catch (error) {
|
18586
|
+
return error instanceof MarkdownTableError ? "Error: ".concat(error.message) : (function () { throw error; })();
|
18587
|
+
}
|
18588
18588
|
}, [
|
18589
|
-
|
18589
|
+
inputData,
|
18590
18590
|
hasHeader,
|
18591
18591
|
columnAlignments,
|
18592
|
-
|
18592
|
+
isCompact,
|
18593
18593
|
hasTabs,
|
18594
|
-
hasPadding,
|
18595
18594
|
canReplaceNewlines,
|
18595
|
+
hasPadding,
|
18596
18596
|
]);
|
18597
18597
|
React.useEffect(function () {
|
18598
18598
|
if (onTableCreate) {
|
18599
18599
|
onTableCreate(markdownTableSyntax);
|
18600
18600
|
}
|
18601
18601
|
}, [markdownTableSyntax, onTableCreate]);
|
18602
|
-
|
18602
|
+
React.useEffect(function () {
|
18603
|
+
var _a;
|
18604
|
+
var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('code');
|
18605
|
+
if (codeElement && markdownTableSyntax) {
|
18606
|
+
requestAnimationFrame(function () {
|
18607
|
+
Prism$1.highlightElement(codeElement);
|
18608
|
+
});
|
18609
|
+
}
|
18610
|
+
}, [markdownTableSyntax]);
|
18603
18611
|
var handleCopy = function () {
|
18604
18612
|
navigator.clipboard.writeText(markdownTableSyntax);
|
18605
18613
|
setIsCopied(true);
|
@@ -18607,51 +18615,14 @@ var MarkdownTable = function (_a) {
|
|
18607
18615
|
};
|
18608
18616
|
return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS }), jsxRuntimeExports.jsxs("div", { style: {
|
18609
18617
|
position: 'relative',
|
18610
|
-
isolation: 'isolate'
|
18618
|
+
isolation: 'isolate'
|
18611
18619
|
}, children: [showCopyButton && (jsxRuntimeExports.jsx(Tooltip$1, { title: isCopied ? 'Copied!' : 'Copy markdown table syntax', placement: "left-end", arrow: true, children: jsxRuntimeExports.jsx(IconButton$1, { onClick: handleCopy, sx: {
|
18612
18620
|
position: 'absolute',
|
18613
18621
|
top: '12px',
|
18614
18622
|
right: '8px',
|
18615
|
-
zIndex: 1
|
18623
|
+
zIndex: 1
|
18616
18624
|
}, "aria-label": "Copy to clipboard", size: "small", children: jsxRuntimeExports.jsx(ContentCopyIcon, { fontSize: "small" }) }) })), jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: preStyle, children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) })] })] }));
|
18617
18625
|
};
|
18618
|
-
var generateMarkdownTableSyntax = function (_a) {
|
18619
|
-
var inputData = _a.inputData, hasHeader = _a.hasHeader, columnAlignments = _a.columnAlignments, adjustColumnWidths = _a.adjustColumnWidths, hasTabs = _a.hasTabs, hasPadding = _a.hasPadding, canReplaceNewlines = _a.canReplaceNewlines;
|
18620
|
-
if (inputData === null) {
|
18621
|
-
return 'Error: No data provided for the table.';
|
18622
|
-
}
|
18623
|
-
if (!Array.isArray(inputData) || inputData.length === 0) {
|
18624
|
-
throw new MarkdownTableError("The 'inputData' prop must be a non-empty two-dimensional array.");
|
18625
|
-
}
|
18626
|
-
var _b = hasHeader
|
18627
|
-
? {
|
18628
|
-
inputDataHeader: inputData[0],
|
18629
|
-
inputDataBody: inputData.slice(1),
|
18630
|
-
}
|
18631
|
-
: {
|
18632
|
-
inputDataHeader: generateAlphabetHeaders(inputData[0].length),
|
18633
|
-
inputDataBody: inputData,
|
18634
|
-
}, inputDataHeader = _b.inputDataHeader, inputDataBody = _b.inputDataBody;
|
18635
|
-
return generateMarkdownTableString({
|
18636
|
-
inputData: { inputDataHeader: inputDataHeader, inputDataBody: inputDataBody },
|
18637
|
-
columnAlignments: columnAlignments,
|
18638
|
-
canAdjustColumnWidths: adjustColumnWidths,
|
18639
|
-
useTabs: hasTabs,
|
18640
|
-
replaceNewlines: canReplaceNewlines,
|
18641
|
-
hasPadding: hasPadding,
|
18642
|
-
});
|
18643
|
-
};
|
18644
|
-
var usePrismHighlight = function (markdownTableSyntax, preElementRef) {
|
18645
|
-
React.useEffect(function () {
|
18646
|
-
var _a;
|
18647
|
-
var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('code');
|
18648
|
-
if (codeElement) {
|
18649
|
-
requestAnimationFrame(function () {
|
18650
|
-
Prism$1.highlightElement(codeElement);
|
18651
|
-
});
|
18652
|
-
}
|
18653
|
-
}, [markdownTableSyntax]);
|
18654
|
-
};
|
18655
18626
|
|
18656
18627
|
exports.MarkdownTable = MarkdownTable;
|
18657
18628
|
//# sourceMappingURL=index.cjs.js.map
|