safe-mdx 0.0.2 → 0.0.3

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 (10) hide show
  1. package/dist/index.js +1 -17
  2. package/dist/index.js.map +1 -1
  3. package/dist/safe-mdx.d.ts.map +1 -1
  4. package/dist/safe-mdx.js +43 -76
  5. package/dist/safe-mdx.js.map +1 -1
  6. package/dist/safe-mdx.test.js +280 -154
  7. package/dist/safe-mdx.test.js.map +1 -1
  8. package/package.json +11 -3
  9. package/src/safe-mdx.test.tsx +262 -127
  10. package/src/safe-mdx.tsx +7 -2
package/src/safe-mdx.test.tsx CHANGED
@@ -38,6 +38,133 @@ test('basic', () => {
38
38
  }
39
39
  `)
40
40
  })
41
+ test('table', () => {
42
+ expect(
43
+ render(dedent`
44
+ # Hello
45
+
46
+ | Tables | Are | Cool |
47
+ | ------------- |:-------------:| -----:|
48
+ | col 3 is | right-aligned | $1600 |
49
+ | col 2 is | centered | $12 |
50
+ `),
51
+ ).toMatchInlineSnapshot(`
52
+ {
53
+ "errors": [],
54
+ "result": <React.Fragment>
55
+ <h1>
56
+ Hello
57
+ </h1>
58
+ <table>
59
+ <thead>
60
+ <tr
61
+ className=""
62
+ >
63
+ <td
64
+ className=""
65
+ >
66
+ Tables
67
+ </td>
68
+ <td
69
+ className=""
70
+ >
71
+ Are
72
+ </td>
73
+ <td
74
+ className=""
75
+ >
76
+ Cool
77
+ </td>
78
+ </tr>
79
+ </thead>
80
+ <tbody>
81
+ <tr
82
+ className=""
83
+ >
84
+ <td
85
+ className=""
86
+ >
87
+ col 3 is
88
+ </td>
89
+ <td
90
+ className=""
91
+ >
92
+ right-aligned
93
+ </td>
94
+ <td
95
+ className=""
96
+ >
97
+ $1600
98
+ </td>
99
+ </tr>
100
+ <tr
101
+ className=""
102
+ >
103
+ <td
104
+ className=""
105
+ >
106
+ col 2 is
107
+ </td>
108
+ <td
109
+ className=""
110
+ >
111
+ centered
112
+ </td>
113
+ <td
114
+ className=""
115
+ >
116
+ $12
117
+ </td>
118
+ </tr>
119
+ </tbody>
120
+ </table>
121
+ </React.Fragment>,
122
+ }
123
+ `)
124
+ })
125
+ test('table, only head', () => {
126
+ expect(
127
+ render(dedent`
128
+ # Hello
129
+
130
+ | Tables | Are | Cool |
131
+ | ------------- |:-------------:| -----:|
132
+
133
+ `),
134
+ ).toMatchInlineSnapshot(`
135
+ {
136
+ "errors": [],
137
+ "result": <React.Fragment>
138
+ <h1>
139
+ Hello
140
+ </h1>
141
+ <table>
142
+ <thead>
143
+ <tr
144
+ className=""
145
+ >
146
+ <td
147
+ className=""
148
+ >
149
+ Tables
150
+ </td>
151
+ <td
152
+ className=""
153
+ >
154
+ Are
155
+ </td>
156
+ <td
157
+ className=""
158
+ >
159
+ Cool
160
+ </td>
161
+ </tr>
162
+ </thead>
163
+ </table>
164
+ </React.Fragment>,
165
+ }
166
+ `)
167
+ })
41
168
 
42
169
  test('inline jsx', () => {
43
170
  expect(
@@ -145,10 +272,10 @@ test('props parsing', () => {
145
272
  <Heading
146
273
  backTick="some \${expr} value"
147
274
  boolean={false}
148
- doublequote="a \\" string"
275
+ doublequote="a " string"
149
276
  null={null}
150
277
  num={2}
151
- quote="a \\" string"
278
+ quote="a " string"
152
279
  someJson={
153
280
  {
154
281
  "a": 1,
@@ -1215,150 +1342,158 @@ test('kitchen sink', () => {
1215
1342
  Colons can be used to align columns.
1216
1343
  </p>
1217
1344
  <table>
1218
- <tr
1219
- className=""
1220
- >
1221
- <td
1222
- className=""
1223
- >
1224
- Tables
1225
- </td>
1226
- <td
1227
- className=""
1228
- >
1229
- Are
1230
- </td>
1231
- <td
1232
- className=""
1233
- >
1234
- Cool
1235
- </td>
1236
- </tr>
1237
- <tr
1238
- className=""
1239
- >
1240
- <td
1345
+ <thead>
1346
+ <tr
1241
1347
  className=""
1242
1348
  >
1243
- col 3 is
1244
- </td>
1245
- <td
1349
+ <td
1350
+ className=""
1351
+ >
1352
+ Tables
1353
+ </td>
1354
+ <td
1355
+ className=""
1356
+ >
1357
+ Are
1358
+ </td>
1359
+ <td
1360
+ className=""
1361
+ >
1362
+ Cool
1363
+ </td>
1364
+ </tr>
1365
+ </thead>
1366
+ <tbody>
1367
+ <tr
1246
1368
  className=""
1247
1369
  >
1248
- right-aligned
1249
- </td>
1250
- <td
1370
+ <td
1371
+ className=""
1372
+ >
1373
+ col 3 is
1374
+ </td>
1375
+ <td
1376
+ className=""
1377
+ >
1378
+ right-aligned
1379
+ </td>
1380
+ <td
1381
+ className=""
1382
+ >
1383
+ $1600
1384
+ </td>
1385
+ </tr>
1386
+ <tr
1251
1387
  className=""
1252
1388
  >
1253
- $1600
1254
- </td>
1255
- </tr>
1256
- <tr
1257
- className=""
1258
- >
1259
- <td
1389
+ <td
1390
+ className=""
1391
+ >
1392
+ col 2 is
1393
+ </td>
1394
+ <td
1395
+ className=""
1396
+ >
1397
+ centered
1398
+ </td>
1399
+ <td
1400
+ className=""
1401
+ >
1402
+ $12
1403
+ </td>
1404
+ </tr>
1405
+ <tr
1260
1406
  className=""
1261
1407
  >
1262
- col 2 is
1263
- </td>
1264
- <td
1265
- className=""
1266
- >
1267
- centered
1268
- </td>
1269
- <td
1270
- className=""
1271
- >
1272
- $12
1273
- </td>
1274
- </tr>
1275
- <tr
1276
- className=""
1277
- >
1278
- <td
1279
- className=""
1280
- >
1281
- zebra stripes
1282
- </td>
1283
- <td
1284
- className=""
1285
- >
1286
- are neat
1287
- </td>
1288
- <td
1289
- className=""
1290
- >
1291
- $1
1292
- </td>
1293
- </tr>
1408
+ <td
1409
+ className=""
1410
+ >
1411
+ zebra stripes
1412
+ </td>
1413
+ <td
1414
+ className=""
1415
+ >
1416
+ are neat
1417
+ </td>
1418
+ <td
1419
+ className=""
1420
+ >
1421
+ $1
1422
+ </td>
1423
+ </tr>
1424
+ </tbody>
1294
1425
  </table>
1295
1426
  <p>
1296
1427
  There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
1297
1428
  </p>
1298
1429
  <table>
1299
- <tr
1300
- className=""
1301
- >
1302
- <td
1303
- className=""
1304
- >
1305
- Markdown
1306
- </td>
1307
- <td
1308
- className=""
1309
- >
1310
- Less
1311
- </td>
1312
- <td
1313
- className=""
1314
- >
1315
- Pretty
1316
- </td>
1317
- </tr>
1318
- <tr
1319
- className=""
1320
- >
1321
- <td
1322
- className=""
1323
- >
1324
- <em>
1325
- Still
1326
- </em>
1327
- </td>
1328
- <td
1329
- className=""
1330
- >
1331
- <code>
1332
- renders
1333
- </code>
1334
- </td>
1335
- <td
1336
- className=""
1337
- >
1338
- <strong>
1339
- nicely
1340
- </strong>
1341
- </td>
1342
- </tr>
1343
- <tr
1344
- className=""
1345
- >
1346
- <td
1430
+ <thead>
1431
+ <tr
1347
1432
  className=""
1348
1433
  >
1349
- 1
1350
- </td>
1351
- <td
1434
+ <td
1435
+ className=""
1436
+ >
1437
+ Markdown
1438
+ </td>
1439
+ <td
1440
+ className=""
1441
+ >
1442
+ Less
1443
+ </td>
1444
+ <td
1445
+ className=""
1446
+ >
1447
+ Pretty
1448
+ </td>
1449
+ </tr>
1450
+ </thead>
1451
+ <tbody>
1452
+ <tr
1352
1453
  className=""
1353
1454
  >
1354
- 2
1355
- </td>
1356
- <td
1455
+ <td
1456
+ className=""
1457
+ >
1458
+ <em>
1459
+ Still
1460
+ </em>
1461
+ </td>
1462
+ <td
1463
+ className=""
1464
+ >
1465
+ <code>
1466
+ renders
1467
+ </code>
1468
+ </td>
1469
+ <td
1470
+ className=""
1471
+ >
1472
+ <strong>
1473
+ nicely
1474
+ </strong>
1475
+ </td>
1476
+ </tr>
1477
+ <tr
1357
1478
  className=""
1358
1479
  >
1359
- 3
1360
- </td>
1361
- </tr>
1480
+ <td
1481
+ className=""
1482
+ >
1483
+ 1
1484
+ </td>
1485
+ <td
1486
+ className=""
1487
+ >
1488
+ 2
1489
+ </td>
1490
+ <td
1491
+ className=""
1492
+ >
1493
+ 3
1494
+ </td>
1495
+ </tr>
1496
+ </tbody>
1362
1497
  </table>
1363
1498
  <a
1364
1499
  name="blockquotes"
package/src/safe-mdx.tsx CHANGED
@@ -319,9 +319,14 @@ export class MdastToJsx {
319
319
  return <Fragment>{this.mapMdastChildren(node)}</Fragment>
320
320
  }
321
321
  case 'table': {
322
- const align = node.align
322
+ const [head, ...body] = React.Children.toArray(
323
+ this.mapMdastChildren(node),
324
+ )
323
325
  return (
324
- <this.c.table>{this.mapMdastChildren(node)}</this.c.table>
326
+ <this.c.table>
327
+ {head && <this.c.thead>{head}</this.c.thead>}
328
+ {!!body?.length && <this.c.tbody>{body}</this.c.tbody>}
329
+ </this.c.table>
325
330
  )
326
331
  }
327
332
  case 'tableRow': {