@khanacademy/perseus 17.8.0 → 18.0.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.
Files changed (56) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/es/index.css +0 -4
  3. package/dist/es/index.js +1422 -1021
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +0 -4
  6. package/dist/index.d.ts +4 -2
  7. package/dist/index.js +1321 -954
  8. package/dist/index.js.map +1 -1
  9. package/dist/perseus-types.d.ts +4 -3
  10. package/dist/renderer.d.ts +6 -6
  11. package/dist/server-item-renderer.d.ts +2 -4
  12. package/dist/strings.js +1 -1
  13. package/dist/types.d.ts +19 -2
  14. package/dist/util/drawing-transform.d.ts +21 -0
  15. package/dist/util/extract-perseus-data.d.ts +26 -0
  16. package/dist/util/graph-bounds.d.ts +9 -0
  17. package/dist/util/graphie.d.ts +2 -0
  18. package/dist/util/interval.d.ts +1 -0
  19. package/dist/util/parse-perseus-json.d.ts +10 -0
  20. package/dist/util/tex.d.ts +1 -3
  21. package/dist/widgets/deprecated-standin/index.d.ts +4 -4
  22. package/dist/widgets/passage.d.ts +3 -3
  23. package/dist/widgets.d.ts +16 -6
  24. package/package.json +9 -9
  25. package/src/__tests__/extract-perseus-data.test.ts +1027 -0
  26. package/src/index.ts +6 -1
  27. package/src/init.ts +1 -1
  28. package/src/perseus-types.ts +4 -3
  29. package/src/renderer.tsx +12 -9
  30. package/src/server-item-renderer.tsx +2 -4
  31. package/src/styles/widgets/image.less +0 -3
  32. package/src/types.ts +19 -16
  33. package/src/util/drawing-transform.test.ts +67 -0
  34. package/src/util/drawing-transform.ts +102 -0
  35. package/src/util/extract-perseus-data.ts +539 -0
  36. package/src/util/graph-bounds.ts +23 -0
  37. package/src/util/graphie.ts +1167 -1258
  38. package/src/util/interactive.ts +2 -2
  39. package/src/util/interval.ts +4 -0
  40. package/src/util/parse-perseus-json.test.ts +10 -0
  41. package/src/util/parse-perseus-json.ts +13 -0
  42. package/src/util/tex.ts +11 -84
  43. package/src/widgets/__stories__/image.stories.tsx +12 -26
  44. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +72 -288
  45. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +5 -20
  46. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +32 -128
  47. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +22 -88
  48. package/src/widgets/__tests__/__snapshots__/plotter.test.tsx.snap +12 -48
  49. package/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx +8 -12
  50. package/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap +6 -7
  51. package/src/widgets/deprecated-standin/index.tsx +8 -7
  52. package/src/widgets/interactive-graph.tsx +3 -2
  53. package/src/widgets/label-image/answer-pill.tsx +6 -1
  54. package/src/widgets/passage.tsx +5 -7
  55. package/src/widgets.ts +34 -10
  56. package/tsconfig-build.tsbuildinfo +1 -1
@@ -230,10 +230,7 @@ exports[`interaction widget should render 1`] = `
230
230
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 116.59637038983988px; top: 88.69565217391305px; fill: none;"
231
231
  >
232
232
  <span
233
- class="katex-holder"
234
- />
235
- <span
236
- class="mathjax-holder"
233
+ class="tex-holder"
237
234
  />
238
235
  </span>
239
236
  <span
@@ -242,10 +239,7 @@ exports[`interaction widget should render 1`] = `
242
239
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 181.46123525470475px; top: 88.69565217391305px; fill: none;"
243
240
  >
244
241
  <span
245
- class="katex-holder"
246
- />
247
- <span
248
- class="mathjax-holder"
242
+ class="tex-holder"
249
243
  />
250
244
  </span>
251
245
  <span
@@ -254,10 +248,7 @@ exports[`interaction widget should render 1`] = `
254
248
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 246.3261001195696px; top: 88.69565217391305px; fill: none;"
255
249
  >
256
250
  <span
257
- class="katex-holder"
258
- />
259
- <span
260
- class="mathjax-holder"
251
+ class="tex-holder"
261
252
  />
262
253
  </span>
263
254
  <span
@@ -266,10 +257,7 @@ exports[`interaction widget should render 1`] = `
266
257
  style="position: absolute; padding: 7px; color: gray; left: 19.459459459459445px; top: 26.08695652173914px; fill: none;"
267
258
  >
268
259
  <span
269
- class="katex-holder"
270
- />
271
- <span
272
- class="mathjax-holder"
260
+ class="tex-holder"
273
261
  />
274
262
  </span>
275
263
  <span
@@ -278,10 +266,7 @@ exports[`interaction widget should render 1`] = `
278
266
  style="position: absolute; padding: 7px; color: gray; left: 149.18918918918916px; top: 26.08695652173914px; fill: none;"
279
267
  >
280
268
  <span
281
- class="katex-holder"
282
- />
283
- <span
284
- class="mathjax-holder"
269
+ class="tex-holder"
285
270
  />
286
271
  </span>
287
272
  </div>
@@ -329,10 +329,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
329
329
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
330
330
  >
331
331
  <span
332
- class="katex-holder"
333
- />
334
- <span
335
- class="mathjax-holder"
332
+ class="tex-holder"
336
333
  />
337
334
  </span>
338
335
  <span
@@ -341,10 +338,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
341
338
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
342
339
  >
343
340
  <span
344
- class="katex-holder"
345
- />
346
- <span
347
- class="mathjax-holder"
341
+ class="tex-holder"
348
342
  />
349
343
  </span>
350
344
  <span
@@ -353,10 +347,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
353
347
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
354
348
  >
355
349
  <span
356
- class="katex-holder"
357
- />
358
- <span
359
- class="mathjax-holder"
350
+ class="tex-holder"
360
351
  />
361
352
  </span>
362
353
  <span
@@ -365,10 +356,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
365
356
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 269.14285714285717px; top: 126.85714285714285px; fill: none; stroke: #6495ED;"
366
357
  >
367
358
  <span
368
- class="katex-holder"
369
- />
370
- <span
371
- class="mathjax-holder"
359
+ class="tex-holder"
372
360
  />
373
361
  </span>
374
362
  <span
@@ -377,10 +365,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
377
365
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 122.85714285714286px; top: 142.85714285714286px; fill: none; stroke: #6495ED;"
378
366
  >
379
367
  <span
380
- class="katex-holder"
381
- />
382
- <span
383
- class="mathjax-holder"
368
+ class="tex-holder"
384
369
  />
385
370
  </span>
386
371
  <span
@@ -389,10 +374,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
389
374
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 257.14285714285717px; top: 248.57142857142856px; fill: none; stroke: #6495ED;"
390
375
  >
391
376
  <span
392
- class="katex-holder"
393
- />
394
- <span
395
- class="mathjax-holder"
377
+ class="tex-holder"
396
378
  />
397
379
  </span>
398
380
  </div>
@@ -741,10 +723,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
741
723
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
742
724
  >
743
725
  <span
744
- class="katex-holder"
745
- />
746
- <span
747
- class="mathjax-holder"
726
+ class="tex-holder"
748
727
  />
749
728
  </span>
750
729
  <span
@@ -753,10 +732,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
753
732
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
754
733
  >
755
734
  <span
756
- class="katex-holder"
757
- />
758
- <span
759
- class="mathjax-holder"
735
+ class="tex-holder"
760
736
  />
761
737
  </span>
762
738
  <span
@@ -765,10 +741,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
765
741
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
766
742
  >
767
743
  <span
768
- class="katex-holder"
769
- />
770
- <span
771
- class="mathjax-holder"
744
+ class="tex-holder"
772
745
  />
773
746
  </span>
774
747
  <span
@@ -777,10 +750,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
777
750
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
778
751
  >
779
752
  <span
780
- class="katex-holder"
781
- />
782
- <span
783
- class="mathjax-holder"
753
+ class="tex-holder"
784
754
  />
785
755
  </span>
786
756
  <span
@@ -789,10 +759,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
789
759
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
790
760
  >
791
761
  <span
792
- class="katex-holder"
793
- />
794
- <span
795
- class="mathjax-holder"
762
+ class="tex-holder"
796
763
  />
797
764
  </span>
798
765
  <span
@@ -801,10 +768,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
801
768
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
802
769
  >
803
770
  <span
804
- class="katex-holder"
805
- />
806
- <span
807
- class="mathjax-holder"
771
+ class="tex-holder"
808
772
  />
809
773
  </span>
810
774
  </div>
@@ -1666,10 +1630,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1666
1630
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1667
1631
  >
1668
1632
  <span
1669
- class="katex-holder"
1670
- />
1671
- <span
1672
- class="mathjax-holder"
1633
+ class="tex-holder"
1673
1634
  />
1674
1635
  </span>
1675
1636
  <span
@@ -1678,10 +1639,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1678
1639
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1679
1640
  >
1680
1641
  <span
1681
- class="katex-holder"
1682
- />
1683
- <span
1684
- class="mathjax-holder"
1642
+ class="tex-holder"
1685
1643
  />
1686
1644
  </span>
1687
1645
  <span
@@ -1690,10 +1648,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1690
1648
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1691
1649
  >
1692
1650
  <span
1693
- class="katex-holder"
1694
- />
1695
- <span
1696
- class="mathjax-holder"
1651
+ class="tex-holder"
1697
1652
  />
1698
1653
  </span>
1699
1654
  <span
@@ -1702,10 +1657,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1702
1657
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1703
1658
  >
1704
1659
  <span
1705
- class="katex-holder"
1706
- />
1707
- <span
1708
- class="mathjax-holder"
1660
+ class="tex-holder"
1709
1661
  />
1710
1662
  </span>
1711
1663
  <span
@@ -1714,10 +1666,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1714
1666
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1715
1667
  >
1716
1668
  <span
1717
- class="katex-holder"
1718
- />
1719
- <span
1720
- class="mathjax-holder"
1669
+ class="tex-holder"
1721
1670
  />
1722
1671
  </span>
1723
1672
  <span
@@ -1726,10 +1675,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1726
1675
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1727
1676
  >
1728
1677
  <span
1729
- class="katex-holder"
1730
- />
1731
- <span
1732
- class="mathjax-holder"
1678
+ class="tex-holder"
1733
1679
  />
1734
1680
  </span>
1735
1681
  <span
@@ -1738,10 +1684,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1738
1684
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1739
1685
  >
1740
1686
  <span
1741
- class="katex-holder"
1742
- />
1743
- <span
1744
- class="mathjax-holder"
1687
+ class="tex-holder"
1745
1688
  />
1746
1689
  </span>
1747
1690
  <span
@@ -1750,10 +1693,7 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1750
1693
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1751
1694
  >
1752
1695
  <span
1753
- class="katex-holder"
1754
- />
1755
- <span
1756
- class="mathjax-holder"
1696
+ class="tex-holder"
1757
1697
  />
1758
1698
  </span>
1759
1699
  </div>
@@ -2081,10 +2021,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2081
2021
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
2082
2022
  >
2083
2023
  <span
2084
- class="katex-holder"
2085
- />
2086
- <span
2087
- class="mathjax-holder"
2024
+ class="tex-holder"
2088
2025
  />
2089
2026
  </span>
2090
2027
  <span
@@ -2093,10 +2030,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2093
2030
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
2094
2031
  >
2095
2032
  <span
2096
- class="katex-holder"
2097
- />
2098
- <span
2099
- class="mathjax-holder"
2033
+ class="tex-holder"
2100
2034
  />
2101
2035
  </span>
2102
2036
  <span
@@ -2105,10 +2039,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2105
2039
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
2106
2040
  >
2107
2041
  <span
2108
- class="katex-holder"
2109
- />
2110
- <span
2111
- class="mathjax-holder"
2042
+ class="tex-holder"
2112
2043
  />
2113
2044
  </span>
2114
2045
  <span
@@ -2117,10 +2048,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2117
2048
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 246.45997239142687px; top: 162.4842995185723px; fill: none; stroke: #6495ED;"
2118
2049
  >
2119
2050
  <span
2120
- class="katex-holder"
2121
- />
2122
- <span
2123
- class="mathjax-holder"
2051
+ class="tex-holder"
2124
2052
  />
2125
2053
  </span>
2126
2054
  <span
@@ -2129,10 +2057,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2129
2057
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 153.54002760857313px; top: 162.48429951857227px; fill: none; stroke: #6495ED;"
2130
2058
  >
2131
2059
  <span
2132
- class="katex-holder"
2133
- />
2134
- <span
2135
- class="mathjax-holder"
2060
+ class="tex-holder"
2136
2061
  />
2137
2062
  </span>
2138
2063
  <span
@@ -2141,10 +2066,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2141
2066
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 248.57142857142856px; fill: none; stroke: #6495ED;"
2142
2067
  >
2143
2068
  <span
2144
- class="katex-holder"
2145
- />
2146
- <span
2147
- class="mathjax-holder"
2069
+ class="tex-holder"
2148
2070
  />
2149
2071
  </span>
2150
2072
  </div>
@@ -2493,10 +2415,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2493
2415
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2494
2416
  >
2495
2417
  <span
2496
- class="katex-holder"
2497
- />
2498
- <span
2499
- class="mathjax-holder"
2418
+ class="tex-holder"
2500
2419
  />
2501
2420
  </span>
2502
2421
  <span
@@ -2505,10 +2424,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2505
2424
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2506
2425
  >
2507
2426
  <span
2508
- class="katex-holder"
2509
- />
2510
- <span
2511
- class="mathjax-holder"
2427
+ class="tex-holder"
2512
2428
  />
2513
2429
  </span>
2514
2430
  <span
@@ -2517,10 +2433,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2517
2433
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2518
2434
  >
2519
2435
  <span
2520
- class="katex-holder"
2521
- />
2522
- <span
2523
- class="mathjax-holder"
2436
+ class="tex-holder"
2524
2437
  />
2525
2438
  </span>
2526
2439
  <span
@@ -2529,10 +2442,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2529
2442
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2530
2443
  >
2531
2444
  <span
2532
- class="katex-holder"
2533
- />
2534
- <span
2535
- class="mathjax-holder"
2445
+ class="tex-holder"
2536
2446
  />
2537
2447
  </span>
2538
2448
  <span
@@ -2541,10 +2451,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2541
2451
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2542
2452
  >
2543
2453
  <span
2544
- class="katex-holder"
2545
- />
2546
- <span
2547
- class="mathjax-holder"
2454
+ class="tex-holder"
2548
2455
  />
2549
2456
  </span>
2550
2457
  <span
@@ -2553,10 +2460,7 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2553
2460
  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2554
2461
  >
2555
2462
  <span
2556
- class="katex-holder"
2557
- />
2558
- <span
2559
- class="mathjax-holder"
2463
+ class="tex-holder"
2560
2464
  />
2561
2465
  </span>
2562
2466
  </div>