ink-markdown-es 1.0.1 → 1.0.2-alpha.0

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.
Files changed (2) hide show
  1. package/dist/index.js +185 -119
  2. package/package.json +4 -3
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
1
2
  import { memo, useId, useMemo } from "react";
2
3
  import { marked } from "marked";
3
4
  import { Box, Text } from "ink";
@@ -149,93 +150,100 @@ function renderInlineTokens(tokens, styles, renderers) {
149
150
  case 'escape':
150
151
  {
151
152
  const textToken = token;
152
- if ('tokens' in textToken && textToken.tokens) return /*#__PURE__*/ React.createElement(Text, {
153
- key: key
154
- }, renderInlineTokens(textToken.tokens, styles, renderers));
155
- return /*#__PURE__*/ React.createElement(Text, {
156
- key: key
157
- }, textToken.text);
153
+ if ('tokens' in textToken && textToken.tokens) return /*#__PURE__*/ jsx(Text, {
154
+ children: renderInlineTokens(textToken.tokens, styles, renderers)
155
+ }, key);
156
+ return /*#__PURE__*/ jsx(Text, {
157
+ children: textToken.text
158
+ }, key);
158
159
  }
159
160
  case 'strong':
160
161
  {
161
162
  const strongToken = token;
162
163
  const strongStyle = mergeStyles(DEFAULT_STYLES.strong, styles.strong);
163
- if (renderers.strong) return /*#__PURE__*/ React.createElement(Text, {
164
- key: key
165
- }, renderers.strong(renderInlineTokens(strongToken.tokens, styles, renderers), strongToken));
166
- return /*#__PURE__*/ React.createElement(Text, {
167
- key: key,
168
- ...extractTextProps(strongStyle)
169
- }, renderInlineTokens(strongToken.tokens, styles, renderers));
164
+ if (renderers.strong) return /*#__PURE__*/ jsx(Text, {
165
+ children: renderers.strong(renderInlineTokens(strongToken.tokens, styles, renderers), strongToken)
166
+ }, key);
167
+ return /*#__PURE__*/ jsx(Text, {
168
+ ...extractTextProps(strongStyle),
169
+ children: renderInlineTokens(strongToken.tokens, styles, renderers)
170
+ }, key);
170
171
  }
171
172
  case 'em':
172
173
  {
173
174
  const emToken = token;
174
175
  const emStyle = mergeStyles(DEFAULT_STYLES.em, styles.em);
175
- if (renderers.em) return /*#__PURE__*/ React.createElement(Text, {
176
- key: key
177
- }, renderers.em(renderInlineTokens(emToken.tokens, styles, renderers), emToken));
178
- return /*#__PURE__*/ React.createElement(Text, {
179
- key: key,
180
- ...extractTextProps(emStyle)
181
- }, renderInlineTokens(emToken.tokens, styles, renderers));
176
+ if (renderers.em) return /*#__PURE__*/ jsx(Text, {
177
+ children: renderers.em(renderInlineTokens(emToken.tokens, styles, renderers), emToken)
178
+ }, key);
179
+ return /*#__PURE__*/ jsx(Text, {
180
+ ...extractTextProps(emStyle),
181
+ children: renderInlineTokens(emToken.tokens, styles, renderers)
182
+ }, key);
182
183
  }
183
184
  case 'del':
184
185
  {
185
186
  const delToken = token;
186
187
  const delStyle = mergeStyles(DEFAULT_STYLES.del, styles.del);
187
- if (renderers.del) return /*#__PURE__*/ React.createElement(Text, {
188
- key: key
189
- }, renderers.del(renderInlineTokens(delToken.tokens, styles, renderers), delToken));
190
- return /*#__PURE__*/ React.createElement(Text, {
191
- key: key,
192
- ...extractTextProps(delStyle)
193
- }, renderInlineTokens(delToken.tokens, styles, renderers));
188
+ if (renderers.del) return /*#__PURE__*/ jsx(Text, {
189
+ children: renderers.del(renderInlineTokens(delToken.tokens, styles, renderers), delToken)
190
+ }, key);
191
+ return /*#__PURE__*/ jsx(Text, {
192
+ ...extractTextProps(delStyle),
193
+ children: renderInlineTokens(delToken.tokens, styles, renderers)
194
+ }, key);
194
195
  }
195
196
  case 'codespan':
196
197
  {
197
198
  const codespanToken = token;
198
199
  const codespanStyle = mergeStyles(DEFAULT_STYLES.codespan, styles.codespan);
199
- if (renderers.codespan) return /*#__PURE__*/ React.createElement(Text, {
200
- key: key
201
- }, renderers.codespan(codespanToken.text, codespanToken));
202
- return /*#__PURE__*/ React.createElement(Text, {
203
- key: key,
204
- ...extractTextProps(codespanStyle)
205
- }, codespanToken.text);
200
+ if (renderers.codespan) return /*#__PURE__*/ jsx(Text, {
201
+ children: renderers.codespan(codespanToken.text, codespanToken)
202
+ }, key);
203
+ return /*#__PURE__*/ jsx(Text, {
204
+ ...extractTextProps(codespanStyle),
205
+ children: codespanToken.text
206
+ }, key);
206
207
  }
207
208
  case 'link':
208
209
  {
209
210
  const linkToken = token;
210
211
  const linkStyle = mergeStyles(DEFAULT_STYLES.link, styles.link);
211
- if (renderers.link) return /*#__PURE__*/ React.createElement(Text, {
212
- key: key
213
- }, renderers.link(linkToken.text, linkToken.href, linkToken.title, linkToken));
214
- return /*#__PURE__*/ React.createElement(Text, {
215
- key: key,
216
- ...extractTextProps(linkStyle)
217
- }, linkToken.text, linkToken.href && ` (${linkToken.href})`);
212
+ if (renderers.link) return /*#__PURE__*/ jsx(Text, {
213
+ children: renderers.link(linkToken.text, linkToken.href, linkToken.title, linkToken)
214
+ }, key);
215
+ return /*#__PURE__*/ jsxs(Text, {
216
+ ...extractTextProps(linkStyle),
217
+ children: [
218
+ linkToken.text,
219
+ linkToken.href && ` (${linkToken.href})`
220
+ ]
221
+ }, key);
218
222
  }
219
223
  case 'image':
220
224
  {
221
225
  const imageToken = token;
222
226
  const imageStyle = mergeStyles(DEFAULT_STYLES.image, styles.image);
223
- if (renderers.image) return /*#__PURE__*/ React.createElement(Text, {
224
- key: key
225
- }, renderers.image(imageToken.text, imageToken.href, imageToken.title, imageToken));
226
- return /*#__PURE__*/ React.createElement(Text, {
227
- key: key,
228
- ...extractTextProps(imageStyle)
229
- }, "[Image: ", imageToken.text || imageToken.href, "]");
227
+ if (renderers.image) return /*#__PURE__*/ jsx(Text, {
228
+ children: renderers.image(imageToken.text, imageToken.href, imageToken.title, imageToken)
229
+ }, key);
230
+ return /*#__PURE__*/ jsxs(Text, {
231
+ ...extractTextProps(imageStyle),
232
+ children: [
233
+ "[Image: ",
234
+ imageToken.text || imageToken.href,
235
+ "]"
236
+ ]
237
+ }, key);
230
238
  }
231
239
  case 'br':
232
- return /*#__PURE__*/ React.createElement(Text, {
233
- key: key
234
- }, '\n');
240
+ return /*#__PURE__*/ jsx(Text, {
241
+ children: '\n'
242
+ }, key);
235
243
  default:
236
- if ('text' in token) return /*#__PURE__*/ React.createElement(Text, {
237
- key: key
238
- }, token.text);
244
+ if ('text' in token) return /*#__PURE__*/ jsx(Text, {
245
+ children: token.text
246
+ }, key);
239
247
  return null;
240
248
  }
241
249
  });
@@ -251,7 +259,16 @@ function renderBlockToken(token, styles, renderers, showSharp) {
251
259
  if (renderer) return renderer(headingToken.text, headingToken);
252
260
  const headingStyle = mergeStyles(DEFAULT_STYLES[styleKey], styles[styleKey]);
253
261
  const mergedShowSharp = 'boolean' == typeof headingStyle.showSharp ? headingStyle.showSharp : Boolean(showSharp);
254
- return /*#__PURE__*/ React.createElement(Box, extractBoxProps(headingStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(headingStyle), mergedShowSharp && `${'#'.repeat(headingToken.depth)} `, renderInlineTokens(headingToken.tokens, styles, renderers)));
262
+ return /*#__PURE__*/ jsx(Box, {
263
+ ...extractBoxProps(headingStyle),
264
+ children: /*#__PURE__*/ jsxs(Text, {
265
+ ...extractTextProps(headingStyle),
266
+ children: [
267
+ mergedShowSharp && `${'#'.repeat(headingToken.depth)} `,
268
+ renderInlineTokens(headingToken.tokens, styles, renderers)
269
+ ]
270
+ })
271
+ });
255
272
  }
256
273
  case 'paragraph':
257
274
  {
@@ -259,33 +276,51 @@ function renderBlockToken(token, styles, renderers, showSharp) {
259
276
  const paragraphStyle = mergeStyles(DEFAULT_STYLES.paragraph, styles.paragraph);
260
277
  const content = renderInlineTokens(paragraphToken.tokens, styles, renderers);
261
278
  if (renderers.paragraph) return renderers.paragraph(content, paragraphToken);
262
- return /*#__PURE__*/ React.createElement(Box, extractBoxProps(paragraphStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(paragraphStyle), content));
279
+ return /*#__PURE__*/ jsx(Box, {
280
+ ...extractBoxProps(paragraphStyle),
281
+ children: /*#__PURE__*/ jsx(Text, {
282
+ ...extractTextProps(paragraphStyle),
283
+ children: content
284
+ })
285
+ });
263
286
  }
264
287
  case 'code':
265
288
  {
266
289
  const codeToken = token;
267
290
  const codeStyle = mergeStyles(DEFAULT_STYLES.code, styles.code);
268
291
  if (renderers.code) return renderers.code(codeToken.text, codeToken.lang, codeToken);
269
- return /*#__PURE__*/ React.createElement(Box, extractBoxProps(codeStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(codeStyle), codeToken.text));
292
+ return /*#__PURE__*/ jsx(Box, {
293
+ ...extractBoxProps(codeStyle),
294
+ children: /*#__PURE__*/ jsx(Text, {
295
+ ...extractTextProps(codeStyle),
296
+ children: codeToken.text
297
+ })
298
+ });
270
299
  }
271
300
  case 'blockquote':
272
301
  {
273
302
  const blockquoteToken = token;
274
303
  const blockquoteStyle = mergeStyles(DEFAULT_STYLES.blockquote, styles.blockquote);
275
- const content = blockquoteToken.tokens.map((t, i)=>/*#__PURE__*/ React.createElement(Box, {
276
- key: `bq-${i}`
277
- }, renderBlockToken(t, styles, renderers)));
278
- if (renderers.blockquote) return renderers.blockquote(/*#__PURE__*/ React.createElement(React.Fragment, null, content), blockquoteToken);
279
- return /*#__PURE__*/ React.createElement(Box, extractBoxProps(blockquoteStyle), /*#__PURE__*/ React.createElement(Box, {
280
- flexDirection: "column"
281
- }, blockquoteToken.tokens.map((t, i)=>{
282
- const rendered = renderBlockToken(t, styles, renderers);
283
- if (rendered) return /*#__PURE__*/ React.createElement(Text, {
284
- key: `bq-text-${i}`,
285
- ...extractTextProps(blockquoteStyle)
286
- }, 'paragraph' === t.type ? renderInlineTokens(t.tokens, styles, renderers) : t.text || '');
287
- return null;
288
- })));
304
+ const content = blockquoteToken.tokens.map((t, i)=>/*#__PURE__*/ jsx(Box, {
305
+ children: renderBlockToken(t, styles, renderers)
306
+ }, `bq-${i}`));
307
+ if (renderers.blockquote) return renderers.blockquote(/*#__PURE__*/ jsx(Fragment, {
308
+ children: content
309
+ }), blockquoteToken);
310
+ return /*#__PURE__*/ jsx(Box, {
311
+ ...extractBoxProps(blockquoteStyle),
312
+ children: /*#__PURE__*/ jsx(Box, {
313
+ flexDirection: "column",
314
+ children: blockquoteToken.tokens.map((t, i)=>{
315
+ const rendered = renderBlockToken(t, styles, renderers);
316
+ if (rendered) return /*#__PURE__*/ jsx(Text, {
317
+ ...extractTextProps(blockquoteStyle),
318
+ children: 'paragraph' === t.type ? renderInlineTokens(t.tokens, styles, renderers) : t.text || ''
319
+ }, `bq-text-${i}`);
320
+ return null;
321
+ })
322
+ })
323
+ });
289
324
  }
290
325
  case 'list':
291
326
  {
@@ -297,20 +332,27 @@ function renderBlockToken(token, styles, renderers, showSharp) {
297
332
  const start = 'number' == typeof listToken.start ? listToken.start : 1;
298
333
  const prefix = listToken.ordered ? `${start + index}. ` : `${bullet} `;
299
334
  const itemContent = renderInlineTokens(item.tokens, styles, renderers);
300
- if (renderers.listItem) return /*#__PURE__*/ React.createElement(Box, {
301
- key: `li-${index}`,
302
- ...extractBoxProps(listItemStyle)
303
- }, renderers.listItem(itemContent, item));
304
- return /*#__PURE__*/ React.createElement(Box, {
305
- key: `li-${index}`,
306
- ...extractBoxProps(listItemStyle)
307
- }, /*#__PURE__*/ React.createElement(Text, extractTextProps(listItemStyle), prefix, itemContent));
335
+ if (renderers.listItem) return /*#__PURE__*/ jsx(Box, {
336
+ ...extractBoxProps(listItemStyle),
337
+ children: renderers.listItem(itemContent, item)
338
+ }, `li-${index}`);
339
+ return /*#__PURE__*/ jsx(Box, {
340
+ ...extractBoxProps(listItemStyle),
341
+ children: /*#__PURE__*/ jsxs(Text, {
342
+ ...extractTextProps(listItemStyle),
343
+ children: [
344
+ prefix,
345
+ itemContent
346
+ ]
347
+ })
348
+ }, `li-${index}`);
308
349
  });
309
350
  if (renderers.list) return renderers.list(items, listToken.ordered, listToken);
310
- return /*#__PURE__*/ React.createElement(Box, {
351
+ return /*#__PURE__*/ jsx(Box, {
311
352
  flexDirection: "column",
312
- ...extractBoxProps(listStyle)
313
- }, items);
353
+ ...extractBoxProps(listStyle),
354
+ children: items
355
+ });
314
356
  }
315
357
  case 'hr':
316
358
  {
@@ -319,53 +361,77 @@ function renderBlockToken(token, styles, renderers, showSharp) {
319
361
  const char = hrStyle.char || '─';
320
362
  const width = hrStyle.width || 40;
321
363
  if (renderers.hr) return renderers.hr(hrToken);
322
- return /*#__PURE__*/ React.createElement(Box, extractBoxProps(hrStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(hrStyle), char.repeat(width)));
364
+ return /*#__PURE__*/ jsx(Box, {
365
+ ...extractBoxProps(hrStyle),
366
+ children: /*#__PURE__*/ jsx(Text, {
367
+ ...extractTextProps(hrStyle),
368
+ children: char.repeat(width)
369
+ })
370
+ });
323
371
  }
324
372
  case 'table':
325
373
  {
326
374
  const tableToken = token;
327
375
  const tableStyle = mergeStyles(DEFAULT_STYLES.table, styles.table);
328
376
  const cellStyle = mergeStyles(DEFAULT_STYLES.tableCell, styles.tableCell);
329
- const headerCells = tableToken.header.map((cell, i)=>/*#__PURE__*/ React.createElement(Box, {
330
- key: `th-${i}`,
331
- ...extractBoxProps(cellStyle)
332
- }, /*#__PURE__*/ React.createElement(Text, {
333
- bold: true,
334
- ...extractTextProps(cellStyle)
335
- }, renderInlineTokens(cell.tokens, styles, renderers))));
336
- const header = /*#__PURE__*/ React.createElement(Box, {
337
- flexDirection: "row"
338
- }, headerCells);
339
- const bodyRows = tableToken.rows.map((row, rowIndex)=>/*#__PURE__*/ React.createElement(Box, {
340
- key: `tr-${rowIndex}`,
341
- flexDirection: "row"
342
- }, row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement(Box, {
343
- key: `td-${cellIndex}`,
344
- ...extractBoxProps(cellStyle)
345
- }, /*#__PURE__*/ React.createElement(Text, extractTextProps(cellStyle), renderInlineTokens(cell.tokens, styles, renderers))))));
346
- const body = /*#__PURE__*/ React.createElement(React.Fragment, null, bodyRows);
377
+ const headerCells = tableToken.header.map((cell, i)=>/*#__PURE__*/ jsx(Box, {
378
+ ...extractBoxProps(cellStyle),
379
+ children: /*#__PURE__*/ jsx(Text, {
380
+ bold: true,
381
+ ...extractTextProps(cellStyle),
382
+ children: renderInlineTokens(cell.tokens, styles, renderers)
383
+ })
384
+ }, `th-${i}`));
385
+ const header = /*#__PURE__*/ jsx(Box, {
386
+ flexDirection: "row",
387
+ children: headerCells
388
+ });
389
+ const bodyRows = tableToken.rows.map((row, rowIndex)=>/*#__PURE__*/ jsx(Box, {
390
+ flexDirection: "row",
391
+ children: row.map((cell, cellIndex)=>/*#__PURE__*/ jsx(Box, {
392
+ ...extractBoxProps(cellStyle),
393
+ children: /*#__PURE__*/ jsx(Text, {
394
+ ...extractTextProps(cellStyle),
395
+ children: renderInlineTokens(cell.tokens, styles, renderers)
396
+ })
397
+ }, `td-${cellIndex}`))
398
+ }, `tr-${rowIndex}`));
399
+ const body = /*#__PURE__*/ jsx(Fragment, {
400
+ children: bodyRows
401
+ });
347
402
  if (renderers.table) return renderers.table(header, body, tableToken);
348
- return /*#__PURE__*/ React.createElement(Box, {
403
+ return /*#__PURE__*/ jsxs(Box, {
349
404
  flexDirection: "column",
350
- ...extractBoxProps(tableStyle)
351
- }, header, body);
405
+ ...extractBoxProps(tableStyle),
406
+ children: [
407
+ header,
408
+ body
409
+ ]
410
+ });
352
411
  }
353
412
  case 'space':
354
- return /*#__PURE__*/ React.createElement(Text, null, '\n');
413
+ return /*#__PURE__*/ jsx(Text, {
414
+ children: '\n'
415
+ });
355
416
  case 'html':
356
417
  {
357
418
  const htmlToken = token;
358
- return /*#__PURE__*/ React.createElement(Text, {
359
- dimColor: true
360
- }, htmlToken.text);
419
+ return /*#__PURE__*/ jsx(Text, {
420
+ dimColor: true,
421
+ children: htmlToken.text
422
+ });
361
423
  }
362
424
  default:
363
- if ('text' in token) return /*#__PURE__*/ React.createElement(Text, null, token.text);
425
+ if ('text' in token) return /*#__PURE__*/ jsx(Text, {
426
+ children: token.text
427
+ });
364
428
  return null;
365
429
  }
366
430
  }
367
431
  const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp }) {
368
- return /*#__PURE__*/ React.createElement(React.Fragment, null, renderBlockToken(token, styles, renderers, showSharp));
432
+ return /*#__PURE__*/ jsx(Fragment, {
433
+ children: renderBlockToken(token, styles, renderers, showSharp)
434
+ });
369
435
  }, (prevProps, nextProps)=>prevProps.token === nextProps.token);
370
436
  src_MemoizedBlock.displayName = 'MemoizedBlock';
371
437
  function MarkdownComponent({ children, styles = {}, renderers = {}, showSharp = false }) {
@@ -373,15 +439,15 @@ function MarkdownComponent({ children, styles = {}, renderers = {}, showSharp =
373
439
  const tokens = useMemo(()=>marked.lexer(children), [
374
440
  children
375
441
  ]);
376
- return /*#__PURE__*/ React.createElement(Box, {
377
- flexDirection: "column"
378
- }, tokens.map((token, index)=>/*#__PURE__*/ React.createElement(src_MemoizedBlock, {
379
- key: `${generatedId}-block-${index}`,
380
- token: token,
381
- styles: styles,
382
- renderers: renderers,
383
- showSharp: showSharp
384
- })));
442
+ return /*#__PURE__*/ jsx(Box, {
443
+ flexDirection: "column",
444
+ children: tokens.map((token, index)=>/*#__PURE__*/ jsx(src_MemoizedBlock, {
445
+ token: token,
446
+ styles: styles,
447
+ renderers: renderers,
448
+ showSharp: showSharp
449
+ }, `${generatedId}-block-${index}`))
450
+ });
385
451
  }
386
452
  const Markdown = /*#__PURE__*/ memo(MarkdownComponent);
387
453
  Markdown.displayName = 'Markdown';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ink-markdown-es",
3
- "version": "1.0.1",
3
+ "version": "1.0.2-alpha.0",
4
4
  "description": "A modern performance markdown renderer for ink",
5
5
  "keywords": [
6
6
  "markdown",
@@ -42,11 +42,12 @@
42
42
  "ink": "^6",
43
43
  "react": "^19",
44
44
  "react-devtools-core": "^6",
45
- "typescript": "^5.9.3"
45
+ "typescript": "^5.9.3",
46
+ "@rsbuild/plugin-react": "^1.4.3"
46
47
  },
47
48
  "peerDependencies": {
48
49
  "ink": "^6",
49
- "react": "^18 || ^19"
50
+ "react": "^19"
50
51
  },
51
52
  "dependencies": {
52
53
  "dedent": "^1.7.1",