@khanacademy/perseus-editor 4.0.0 → 4.1.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 (12) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/es/index.js +47 -48
  3. package/dist/es/index.js.map +1 -1
  4. package/dist/index.js +43 -50
  5. package/dist/index.js.map +1 -1
  6. package/dist/widgets/image-editor.d.ts +45 -1
  7. package/dist/widgets/interactive-graph-editor.d.ts +46 -0
  8. package/package.json +4 -4
  9. package/src/widgets/__stories__/image-editor.stories.tsx +72 -0
  10. package/src/widgets/image-editor.tsx +76 -61
  11. package/src/widgets/interaction-editor/mathquill-input.tsx +1 -1
  12. package/tsconfig-build.tsbuildinfo +1 -1
package/dist/widgets/image-editor.d.ts CHANGED
@@ -1,2 +1,46 @@
1
- declare const ImageEditor: any;
1
+ import { Changeable } from "@khanacademy/perseus";
2
+ import * as React from "react";
3
+ import type { APIOptions, Range, Size } from "@khanacademy/perseus";
4
+ type Props = Changeable.ChangeableProps & {
5
+ apiOptions: APIOptions;
6
+ title: string;
7
+ range: [Readonly<Range>, Readonly<Range>];
8
+ box: Size;
9
+ backgroundImage: any;
10
+ labels: ReadonlyArray<string>;
11
+ alt: string;
12
+ caption: string;
13
+ };
14
+ type DefaultProps = {
15
+ title: NonNullable<Props["title"]>;
16
+ range: NonNullable<Props["range"]>;
17
+ box: NonNullable<Props["box"]>;
18
+ backgroundImage: NonNullable<Props["backgroundImage"]>;
19
+ labels: NonNullable<Props["labels"]>;
20
+ alt: NonNullable<Props["alt"]>;
21
+ caption: NonNullable<Props["caption"]>;
22
+ };
23
+ type State = {
24
+ backgroundImageError?: string;
25
+ };
26
+ declare class ImageEditor extends React.Component<Props> {
27
+ _isMounted: boolean;
28
+ static displayName: string;
29
+ static widgetName: string;
30
+ static defaultProps: DefaultProps;
31
+ state: State;
32
+ componentDidMount(): void;
33
+ componentWillUnmount(): void;
34
+ render(): JSX.Element;
35
+ _renderRowForLabel(label: any, i: any): JSX.Element;
36
+ change(...args: any[]): any;
37
+ removeLabel(labelIndex: any, e: any): void;
38
+ onCoordinateChange(labelIndex: any, newCoordinates: any): void;
39
+ onContentChange(labelIndex: any, e: any): void;
40
+ onAlignmentChange(labelIndex: any, e: any): void;
41
+ setUrl(url: any, width: any, height: any, silent: any): void;
42
+ onUrlChange(url: string | undefined | null, silent: boolean): Promise<void>;
43
+ onRangeChange(type: any, newRange: any): void;
44
+ serialize(): any;
45
+ }
2
46
  export default ImageEditor;
package/dist/widgets/interactive-graph-editor.d.ts CHANGED
@@ -40,6 +40,7 @@ declare const InteractiveGraph: {
40
40
  inModal?: boolean | undefined;
41
41
  crossOutEnabled?: boolean | undefined;
42
42
  editorChangeDelay?: number | undefined;
43
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
43
44
  }> & {
44
45
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
45
46
  baseElements: {
@@ -107,6 +108,7 @@ declare const InteractiveGraph: {
107
108
  inModal?: boolean | undefined;
108
109
  crossOutEnabled?: boolean | undefined;
109
110
  editorChangeDelay?: number | undefined;
111
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
110
112
  }> & {
111
113
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
112
114
  baseElements: {
@@ -194,6 +196,7 @@ declare const InteractiveGraph: {
194
196
  inModal?: boolean | undefined;
195
197
  crossOutEnabled?: boolean | undefined;
196
198
  editorChangeDelay?: number | undefined;
199
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
197
200
  }> & {
198
201
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
199
202
  baseElements: {
@@ -262,6 +265,7 @@ declare const InteractiveGraph: {
262
265
  inModal?: boolean | undefined;
263
266
  crossOutEnabled?: boolean | undefined;
264
267
  editorChangeDelay?: number | undefined;
268
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
265
269
  }> & {
266
270
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
267
271
  baseElements: {
@@ -330,6 +334,7 @@ declare const InteractiveGraph: {
330
334
  inModal?: boolean | undefined;
331
335
  crossOutEnabled?: boolean | undefined;
332
336
  editorChangeDelay?: number | undefined;
337
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
333
338
  }> & {
334
339
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
335
340
  baseElements: {
@@ -406,6 +411,7 @@ declare const InteractiveGraph: {
406
411
  inModal?: boolean | undefined;
407
412
  crossOutEnabled?: boolean | undefined;
408
413
  editorChangeDelay?: number | undefined;
414
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
409
415
  }> & {
410
416
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
411
417
  baseElements: {
@@ -521,6 +527,7 @@ declare const InteractiveGraph: {
521
527
  inModal?: boolean | undefined;
522
528
  crossOutEnabled?: boolean | undefined;
523
529
  editorChangeDelay?: number | undefined;
530
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
524
531
  }> & {
525
532
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
526
533
  baseElements: {
@@ -594,6 +601,7 @@ declare const InteractiveGraph: {
594
601
  inModal?: boolean | undefined;
595
602
  crossOutEnabled?: boolean | undefined;
596
603
  editorChangeDelay?: number | undefined;
604
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
597
605
  }> & {
598
606
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
599
607
  baseElements: {
@@ -664,6 +672,7 @@ declare const InteractiveGraph: {
664
672
  inModal?: boolean | undefined;
665
673
  crossOutEnabled?: boolean | undefined;
666
674
  editorChangeDelay?: number | undefined;
675
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
667
676
  }> & {
668
677
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
669
678
  baseElements: {
@@ -733,6 +742,7 @@ declare const InteractiveGraph: {
733
742
  inModal?: boolean | undefined;
734
743
  crossOutEnabled?: boolean | undefined;
735
744
  editorChangeDelay?: number | undefined;
745
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
736
746
  }> & {
737
747
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
738
748
  baseElements: {
@@ -801,6 +811,7 @@ declare const InteractiveGraph: {
801
811
  inModal?: boolean | undefined;
802
812
  crossOutEnabled?: boolean | undefined;
803
813
  editorChangeDelay?: number | undefined;
814
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
804
815
  }> & {
805
816
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
806
817
  baseElements: {
@@ -869,6 +880,7 @@ declare const InteractiveGraph: {
869
880
  inModal?: boolean | undefined;
870
881
  crossOutEnabled?: boolean | undefined;
871
882
  editorChangeDelay?: number | undefined;
883
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
872
884
  }> & {
873
885
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
874
886
  baseElements: {
@@ -938,6 +950,7 @@ declare const InteractiveGraph: {
938
950
  inModal?: boolean | undefined;
939
951
  crossOutEnabled?: boolean | undefined;
940
952
  editorChangeDelay?: number | undefined;
953
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
941
954
  }> & {
942
955
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
943
956
  baseElements: {
@@ -1025,6 +1038,7 @@ declare const InteractiveGraph: {
1025
1038
  inModal?: boolean | undefined;
1026
1039
  crossOutEnabled?: boolean | undefined;
1027
1040
  editorChangeDelay?: number | undefined;
1041
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1028
1042
  }> & {
1029
1043
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1030
1044
  baseElements: {
@@ -1093,6 +1107,7 @@ declare const InteractiveGraph: {
1093
1107
  inModal?: boolean | undefined;
1094
1108
  crossOutEnabled?: boolean | undefined;
1095
1109
  editorChangeDelay?: number | undefined;
1110
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1096
1111
  }> & {
1097
1112
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1098
1113
  baseElements: {
@@ -1161,6 +1176,7 @@ declare const InteractiveGraph: {
1161
1176
  inModal?: boolean | undefined;
1162
1177
  crossOutEnabled?: boolean | undefined;
1163
1178
  editorChangeDelay?: number | undefined;
1179
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1164
1180
  }> & {
1165
1181
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1166
1182
  baseElements: {
@@ -1237,6 +1253,7 @@ declare const InteractiveGraph: {
1237
1253
  inModal?: boolean | undefined;
1238
1254
  crossOutEnabled?: boolean | undefined;
1239
1255
  editorChangeDelay?: number | undefined;
1256
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1240
1257
  }> & {
1241
1258
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1242
1259
  baseElements: {
@@ -1352,6 +1369,7 @@ declare const InteractiveGraph: {
1352
1369
  inModal?: boolean | undefined;
1353
1370
  crossOutEnabled?: boolean | undefined;
1354
1371
  editorChangeDelay?: number | undefined;
1372
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1355
1373
  }> & {
1356
1374
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1357
1375
  baseElements: {
@@ -1425,6 +1443,7 @@ declare const InteractiveGraph: {
1425
1443
  inModal?: boolean | undefined;
1426
1444
  crossOutEnabled?: boolean | undefined;
1427
1445
  editorChangeDelay?: number | undefined;
1446
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1428
1447
  }> & {
1429
1448
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1430
1449
  baseElements: {
@@ -1495,6 +1514,7 @@ declare const InteractiveGraph: {
1495
1514
  inModal?: boolean | undefined;
1496
1515
  crossOutEnabled?: boolean | undefined;
1497
1516
  editorChangeDelay?: number | undefined;
1517
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1498
1518
  }> & {
1499
1519
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1500
1520
  baseElements: {
@@ -1564,6 +1584,7 @@ declare const InteractiveGraph: {
1564
1584
  inModal?: boolean | undefined;
1565
1585
  crossOutEnabled?: boolean | undefined;
1566
1586
  editorChangeDelay?: number | undefined;
1587
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1567
1588
  }> & {
1568
1589
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1569
1590
  baseElements: {
@@ -1632,6 +1653,7 @@ declare const InteractiveGraph: {
1632
1653
  inModal?: boolean | undefined;
1633
1654
  crossOutEnabled?: boolean | undefined;
1634
1655
  editorChangeDelay?: number | undefined;
1656
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1635
1657
  }> & {
1636
1658
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1637
1659
  baseElements: {
@@ -1700,6 +1722,7 @@ declare const InteractiveGraph: {
1700
1722
  inModal?: boolean | undefined;
1701
1723
  crossOutEnabled?: boolean | undefined;
1702
1724
  editorChangeDelay?: number | undefined;
1725
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1703
1726
  }> & {
1704
1727
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1705
1728
  baseElements: {
@@ -1784,6 +1807,7 @@ declare const InteractiveGraph: {
1784
1807
  inModal?: boolean | undefined;
1785
1808
  crossOutEnabled?: boolean | undefined;
1786
1809
  editorChangeDelay?: number | undefined;
1810
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1787
1811
  }> & {
1788
1812
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1789
1813
  baseElements: {
@@ -1852,6 +1876,7 @@ declare const InteractiveGraph: {
1852
1876
  inModal?: boolean | undefined;
1853
1877
  crossOutEnabled?: boolean | undefined;
1854
1878
  editorChangeDelay?: number | undefined;
1879
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1855
1880
  }> & {
1856
1881
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1857
1882
  baseElements: {
@@ -1920,6 +1945,7 @@ declare const InteractiveGraph: {
1920
1945
  inModal?: boolean | undefined;
1921
1946
  crossOutEnabled?: boolean | undefined;
1922
1947
  editorChangeDelay?: number | undefined;
1948
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1923
1949
  }> & {
1924
1950
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1925
1951
  baseElements: {
@@ -1988,6 +2014,7 @@ declare const InteractiveGraph: {
1988
2014
  inModal?: boolean | undefined;
1989
2015
  crossOutEnabled?: boolean | undefined;
1990
2016
  editorChangeDelay?: number | undefined;
2017
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
1991
2018
  }> & {
1992
2019
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
1993
2020
  baseElements: {
@@ -2056,6 +2083,7 @@ declare const InteractiveGraph: {
2056
2083
  inModal?: boolean | undefined;
2057
2084
  crossOutEnabled?: boolean | undefined;
2058
2085
  editorChangeDelay?: number | undefined;
2086
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2059
2087
  }> & {
2060
2088
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2061
2089
  baseElements: {
@@ -2124,6 +2152,7 @@ declare const InteractiveGraph: {
2124
2152
  inModal?: boolean | undefined;
2125
2153
  crossOutEnabled?: boolean | undefined;
2126
2154
  editorChangeDelay?: number | undefined;
2155
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2127
2156
  }> & {
2128
2157
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2129
2158
  baseElements: {
@@ -2193,6 +2222,7 @@ declare const InteractiveGraph: {
2193
2222
  inModal?: boolean | undefined;
2194
2223
  crossOutEnabled?: boolean | undefined;
2195
2224
  editorChangeDelay?: number | undefined;
2225
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2196
2226
  }> & {
2197
2227
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2198
2228
  baseElements: {
@@ -2261,6 +2291,7 @@ declare const InteractiveGraph: {
2261
2291
  inModal?: boolean | undefined;
2262
2292
  crossOutEnabled?: boolean | undefined;
2263
2293
  editorChangeDelay?: number | undefined;
2294
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2264
2295
  }> & {
2265
2296
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2266
2297
  baseElements: {
@@ -2329,6 +2360,7 @@ declare const InteractiveGraph: {
2329
2360
  inModal?: boolean | undefined;
2330
2361
  crossOutEnabled?: boolean | undefined;
2331
2362
  editorChangeDelay?: number | undefined;
2363
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2332
2364
  }> & {
2333
2365
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2334
2366
  baseElements: {
@@ -2397,6 +2429,7 @@ declare const InteractiveGraph: {
2397
2429
  inModal?: boolean | undefined;
2398
2430
  crossOutEnabled?: boolean | undefined;
2399
2431
  editorChangeDelay?: number | undefined;
2432
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2400
2433
  }> & {
2401
2434
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2402
2435
  baseElements: {
@@ -2465,6 +2498,7 @@ declare const InteractiveGraph: {
2465
2498
  inModal?: boolean | undefined;
2466
2499
  crossOutEnabled?: boolean | undefined;
2467
2500
  editorChangeDelay?: number | undefined;
2501
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2468
2502
  }> & {
2469
2503
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2470
2504
  baseElements: {
@@ -2533,6 +2567,7 @@ declare const InteractiveGraph: {
2533
2567
  inModal?: boolean | undefined;
2534
2568
  crossOutEnabled?: boolean | undefined;
2535
2569
  editorChangeDelay?: number | undefined;
2570
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2536
2571
  }> & {
2537
2572
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2538
2573
  baseElements: {
@@ -2601,6 +2636,7 @@ declare const InteractiveGraph: {
2601
2636
  inModal?: boolean | undefined;
2602
2637
  crossOutEnabled?: boolean | undefined;
2603
2638
  editorChangeDelay?: number | undefined;
2639
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2604
2640
  }> & {
2605
2641
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2606
2642
  baseElements: {
@@ -2669,6 +2705,7 @@ declare const InteractiveGraph: {
2669
2705
  inModal?: boolean | undefined;
2670
2706
  crossOutEnabled?: boolean | undefined;
2671
2707
  editorChangeDelay?: number | undefined;
2708
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2672
2709
  }> & {
2673
2710
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2674
2711
  baseElements: {
@@ -2737,6 +2774,7 @@ declare const InteractiveGraph: {
2737
2774
  inModal?: boolean | undefined;
2738
2775
  crossOutEnabled?: boolean | undefined;
2739
2776
  editorChangeDelay?: number | undefined;
2777
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2740
2778
  }> & {
2741
2779
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2742
2780
  baseElements: {
@@ -2805,6 +2843,7 @@ declare const InteractiveGraph: {
2805
2843
  inModal?: boolean | undefined;
2806
2844
  crossOutEnabled?: boolean | undefined;
2807
2845
  editorChangeDelay?: number | undefined;
2846
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2808
2847
  }> & {
2809
2848
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2810
2849
  baseElements: {
@@ -2873,6 +2912,7 @@ declare const InteractiveGraph: {
2873
2912
  inModal?: boolean | undefined;
2874
2913
  crossOutEnabled?: boolean | undefined;
2875
2914
  editorChangeDelay?: number | undefined;
2915
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2876
2916
  }> & {
2877
2917
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2878
2918
  baseElements: {
@@ -2941,6 +2981,7 @@ declare const InteractiveGraph: {
2941
2981
  inModal?: boolean | undefined;
2942
2982
  crossOutEnabled?: boolean | undefined;
2943
2983
  editorChangeDelay?: number | undefined;
2984
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
2944
2985
  }> & {
2945
2986
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
2946
2987
  baseElements: {
@@ -3009,6 +3050,7 @@ declare const InteractiveGraph: {
3009
3050
  inModal?: boolean | undefined;
3010
3051
  crossOutEnabled?: boolean | undefined;
3011
3052
  editorChangeDelay?: number | undefined;
3053
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
3012
3054
  }> & {
3013
3055
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
3014
3056
  baseElements: {
@@ -3077,6 +3119,7 @@ declare const InteractiveGraph: {
3077
3119
  inModal?: boolean | undefined;
3078
3120
  crossOutEnabled?: boolean | undefined;
3079
3121
  editorChangeDelay?: number | undefined;
3122
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
3080
3123
  }> & {
3081
3124
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
3082
3125
  baseElements: {
@@ -3145,6 +3188,7 @@ declare const InteractiveGraph: {
3145
3188
  inModal?: boolean | undefined;
3146
3189
  crossOutEnabled?: boolean | undefined;
3147
3190
  editorChangeDelay?: number | undefined;
3191
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
3148
3192
  }> & {
3149
3193
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
3150
3194
  baseElements: {
@@ -3213,6 +3257,7 @@ declare const InteractiveGraph: {
3213
3257
  inModal?: boolean | undefined;
3214
3258
  crossOutEnabled?: boolean | undefined;
3215
3259
  editorChangeDelay?: number | undefined;
3260
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
3216
3261
  }> & {
3217
3262
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
3218
3263
  baseElements: {
@@ -3282,6 +3327,7 @@ declare const InteractiveGraph: {
3282
3327
  inModal?: boolean | undefined;
3283
3328
  crossOutEnabled?: boolean | undefined;
3284
3329
  editorChangeDelay?: number | undefined;
3330
+ onWidgetStartProps?: ((widgets: import("../../../perseus/src/types").PerseusWidgetMap) => import("../../../perseus/src/types").PerseusWidgetMap) | undefined;
3285
3331
  }> & {
3286
3332
  GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
3287
3333
  baseElements: {
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Perseus editors",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "4.0.0",
6
+ "version": "4.1.1",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -23,9 +23,9 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@khanacademy/kas": "^0.3.7",
26
- "@khanacademy/kmath": "^0.1.8",
27
- "@khanacademy/math-input": "^16.5.1",
28
- "@khanacademy/perseus": "^19.0.0",
26
+ "@khanacademy/kmath": "^0.1.9",
27
+ "@khanacademy/math-input": "^17.0.1",
28
+ "@khanacademy/perseus": "^19.1.1",
29
29
  "@khanacademy/perseus-core": "1.4.1"
30
30
  },
31
31
  "devDependencies": {
package/src/widgets/__stories__/image-editor.stories.tsx ADDED
@@ -0,0 +1,72 @@
1
+ import {ApiOptions} from "@khanacademy/perseus";
2
+ import {View} from "@khanacademy/wonder-blocks-core";
3
+ import Spacing from "@khanacademy/wonder-blocks-spacing";
4
+ import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
5
+ import {action} from "@storybook/addon-actions";
6
+ import {StyleSheet} from "aphrodite";
7
+ import * as React from "react";
8
+
9
+ import ImageEditor from "../image-editor";
10
+
11
+ import type {PropsFor} from "@khanacademy/wonder-blocks-core";
12
+
13
+ type StoryArgs = Record<any, any>;
14
+
15
+ type Story = {
16
+ title: string;
17
+ };
18
+
19
+ export default {
20
+ title: "Perseus/Editor/Widgets/Image Editor",
21
+ } as Story;
22
+
23
+ const styles = StyleSheet.create({
24
+ wrapper: {
25
+ // The maximum width of a widget in the editor.
26
+ width: 338,
27
+ margin: 20,
28
+ },
29
+ });
30
+
31
+ const onChangeAction = action("onChange");
32
+
33
+ const WithState = () => {
34
+ const widgetRef = React.useRef<ImageEditor>(null);
35
+ const [state, setState] = React.useState<
36
+ Partial<PropsFor<typeof ImageEditor>>
37
+ >({
38
+ backgroundImage: {
39
+ url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
40
+ },
41
+ });
42
+
43
+ return (
44
+ <View style={styles.wrapper}>
45
+ <LabelSmall
46
+ style={{fontStyle: "italic", marginBottom: Spacing.small_12}}
47
+ >
48
+ <b>Note</b> that this editor has a known-issue where it does not
49
+ calculate the image dimensions initially if they aren't
50
+ provided. It does update the dimensions when you blur the 'Image
51
+ url:' field.
52
+ </LabelSmall>
53
+ <ImageEditor
54
+ {...state}
55
+ apiOptions={ApiOptions.defaults}
56
+ onChange={(props) => {
57
+ onChangeAction(props);
58
+
59
+ setState({
60
+ ...widgetRef.current?.serialize(),
61
+ ...props,
62
+ });
63
+ }}
64
+ ref={widgetRef}
65
+ />
66
+ </View>
67
+ );
68
+ };
69
+
70
+ export const Default = (args: StoryArgs): React.ReactElement => {
71
+ return <WithState />;
72
+ };