@khanacademy/perseus-editor 31.2.4 → 32.0.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 (10) hide show
  1. package/dist/es/index.js +5 -3
  2. package/dist/es/index.js.map +1 -1
  3. package/dist/index.js +5 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/preview/message-types.d.ts +12 -4
  6. package/dist/preview-with-iframe.d.ts +42 -0
  7. package/dist/widgets/interactive-graph-editor/components/axis-tick-switches.d.ts +9 -0
  8. package/dist/widgets/interactive-graph-editor/components/interactive-graph-settings.d.ts +12 -1
  9. package/dist/widgets/interactive-graph-editor/interactive-graph-editor.d.ts +8 -1
  10. package/package.json +41 -41
package/dist/preview/message-types.d.ts CHANGED
@@ -4,7 +4,15 @@
4
4
  */
5
5
  import type { APIOptions, DeviceType } from "@khanacademy/perseus";
6
6
  import type { Hint, PerseusArticle, PerseusItem } from "@khanacademy/perseus-core";
7
- import type { LinterContextProps } from "@khanacademy/perseus-linter";
7
+ /**
8
+ * The subset of `LinterContextProps` that's meaningful to send across the
9
+ * preview bridge. The receiver wraps this in `pushContextStack(...)` before
10
+ * passing it to the renderer, which fills in the `stack`.
11
+ */
12
+ type PreviewLinterContext = {
13
+ contentType: string;
14
+ highlightLint: boolean;
15
+ };
8
16
  /**
9
17
  * Constant identifier for all Perseus preview messages
10
18
  */
@@ -23,7 +31,7 @@ export type QuestionPreviewData = {
23
31
  apiOptions: APIOptions;
24
32
  initialHintsVisible: number;
25
33
  device: DeviceType;
26
- linterContext: LinterContextProps;
34
+ linterContext: PreviewLinterContext;
27
35
  reviewMode?: boolean;
28
36
  legacyPerseusLint?: ReadonlyArray<string>;
29
37
  problemNum?: number;
@@ -35,7 +43,7 @@ export type HintPreviewData = {
35
43
  hint: Hint;
36
44
  pos: number;
37
45
  apiOptions: APIOptions;
38
- linterContext: LinterContextProps;
46
+ linterContext: PreviewLinterContext;
39
47
  };
40
48
  /**
41
49
  * Data for article section preview
@@ -43,7 +51,7 @@ export type HintPreviewData = {
43
51
  export type ArticlePreviewData = {
44
52
  apiOptions: APIOptions;
45
53
  json: PerseusArticle;
46
- linterContext: LinterContextProps;
54
+ linterContext: PreviewLinterContext;
47
55
  legacyPerseusLint?: ReadonlyArray<string>;
48
56
  };
49
57
  /**
package/dist/preview-with-iframe.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import * as React from "react";
2
+ import type { PreviewContent } from "./preview/message-types";
3
+ type Props = {
4
+ /**
5
+ * The URL that the iframe should load
6
+ */
7
+ url: string;
8
+ /**
9
+ * Whether the iframe should be displaying in mobile mode
10
+ */
11
+ isMobile: boolean;
12
+ /**
13
+ * Whether to make the iframe's height match its content's height, used to
14
+ * prevent scrolling inside the iframe.
15
+ */
16
+ seamless: boolean;
17
+ /**
18
+ * The content to render in the preview area.
19
+ */
20
+ content: PreviewContent;
21
+ };
22
+ /**
23
+ * Displays content in an iframe, isolating it from the parent page and
24
+ * switches to rendering for mobile, if needed.
25
+ *
26
+ * To simulate the environment of content rendered by itself, content previews
27
+ * are rendered inside iframes, where components such as the math keypad and
28
+ * mobile breakpoints based on media queries work (because the body of the
29
+ * document is not the body of the editor). To make this work, this component
30
+ * renders an iframe and communicates with it via the
31
+ * {@link usePreviewController} hook and its use of postMessage.
32
+ *
33
+ * This is the new preview iframe component, replacing `IframeContentRenderer`
34
+ * once all editors have migrated. It exists alongside the legacy component so
35
+ * that consumers can keep using `IframeContentRenderer` until they are all
36
+ * ported over.
37
+ */
38
+ declare function PreviewWithIframe(props: Props): React.JSX.Element;
39
+ declare namespace PreviewWithIframe {
40
+ var displayName: string;
41
+ }
42
+ export default PreviewWithIframe;
package/dist/widgets/interactive-graph-editor/components/axis-tick-switches.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import type { ShowAxisTicks } from "@khanacademy/perseus-core";
3
+ interface AxisTickSwitchesProps {
4
+ showAxisTicks: ShowAxisTicks;
5
+ onChange: (axis: keyof ShowAxisTicks) => void;
6
+ disabled: boolean;
7
+ }
8
+ export default function AxisTickSwitches(props: AxisTickSwitchesProps): React.JSX.Element;
9
+ export {};
package/dist/widgets/interactive-graph-editor/components/interactive-graph-settings.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  import { Changeable } from "@khanacademy/perseus";
5
5
  import * as React from "react";
6
6
  import type { APIOptionsWithDefaults } from "@khanacademy/perseus";
7
- import type { AxisLabelLocation, ShowAxisArrows, MarkingsType, PerseusImageBackground } from "@khanacademy/perseus-core";
7
+ import type { AxisLabelLocation, ShowAxisArrows, ShowAxisTicks, MarkingsType, PerseusImageBackground } from "@khanacademy/perseus-core";
8
8
  type ChangeFn = typeof Changeable.change;
9
9
  type Range = [min: number, max: number];
10
10
  type Props = {
@@ -31,6 +31,10 @@ type Props = {
31
31
  * Whether the graph is bounded (no axis arrows) on the x and y axes.
32
32
  */
33
33
  showAxisArrows: ShowAxisArrows;
34
+ /**
35
+ * Whether to show tick marks and tick numbers per axis.
36
+ */
37
+ showAxisTicks: ShowAxisTicks;
34
38
  /**
35
39
  * How far apart the tick marks on the axes are in the x and y
36
40
  * directions.
@@ -81,6 +85,7 @@ type State = {
81
85
  stepTextbox: [x: number, y: number];
82
86
  rangeTextbox: [x: Range, y: Range];
83
87
  showAxisArrowsSwitches: ShowAxisArrows;
88
+ showAxisTicksSwitches: ShowAxisTicks;
84
89
  backgroundImage: PerseusImageBackground;
85
90
  };
86
91
  declare class InteractiveGraphSettings extends React.Component<Props, State> {
@@ -96,6 +101,7 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
96
101
  stepTextbox: [x: number, y: number];
97
102
  rangeTextbox: [x: Range, y: Range];
98
103
  showAxisArrowsSwitches: ShowAxisArrows;
104
+ showAxisTicksSwitches: ShowAxisTicks;
99
105
  backgroundImage: {
100
106
  url?: string | null;
101
107
  width?: number;
@@ -130,6 +136,10 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
130
136
  yMin: boolean;
131
137
  yMax: boolean;
132
138
  };
139
+ showAxisTicks: {
140
+ x: boolean;
141
+ y: boolean;
142
+ };
133
143
  };
134
144
  componentDidMount(): void;
135
145
  UNSAFE_componentWillReceiveProps(nextProps: any): void;
@@ -147,6 +157,7 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
147
157
  changeLabel: (i: any, e: any) => void;
148
158
  changeRange: (i: any, values: any) => void;
149
159
  changeShowAxisArrows: (axis: keyof ShowAxisArrows) => void;
160
+ changeShowAxisTicks: (axis: keyof ShowAxisTicks) => void;
150
161
  changeStepsBasedOnRange: () => void;
151
162
  changeStep: (step: any) => void;
152
163
  changeSnapStep: (snapStep: any) => void;
package/dist/widgets/interactive-graph-editor/interactive-graph-editor.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type LockedFigure, type PerseusImageBackground, type PerseusInteractiveGraphWidgetOptions, type PerseusGraphType, type MarkingsType, type InteractiveGraphDefaultWidgetOptions, type AxisLabelLocation, type ShowAxisArrows } from "@khanacademy/perseus-core";
1
+ import { type LockedFigure, type PerseusImageBackground, type PerseusInteractiveGraphWidgetOptions, type PerseusGraphType, type MarkingsType, type InteractiveGraphDefaultWidgetOptions, type AxisLabelLocation, type ShowAxisArrows, type ShowAxisTicks } from "@khanacademy/perseus-core";
2
2
  import * as React from "react";
3
3
  import type { APIOptionsWithDefaults } from "@khanacademy/perseus";
4
4
  import type { PropsFor } from "@khanacademy/wonder-blocks-core";
@@ -24,6 +24,7 @@ declare const InteractiveGraph: {
24
24
  rulerTicks?: number;
25
25
  range: import("@khanacademy/perseus-core").GraphRange;
26
26
  showAxisArrows: ShowAxisArrows;
27
+ showAxisTicks: ShowAxisTicks;
27
28
  correct?: PerseusGraphType;
28
29
  lockedFigures: LockedFigure[];
29
30
  fullGraphAriaLabel?: string;
@@ -496,6 +497,7 @@ declare const InteractiveGraph: {
496
497
  rulerTicks?: number;
497
498
  range: import("@khanacademy/perseus-core").GraphRange;
498
499
  showAxisArrows: ShowAxisArrows;
500
+ showAxisTicks: ShowAxisTicks;
499
501
  correct?: PerseusGraphType;
500
502
  lockedFigures: LockedFigure[];
501
503
  fullGraphAriaLabel?: string;
@@ -953,6 +955,7 @@ declare const InteractiveGraph: {
953
955
  labelLocation: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["labelLocation"];
954
956
  range: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["range"];
955
957
  showAxisArrows: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["showAxisArrows"];
958
+ showAxisTicks: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["showAxisTicks"];
956
959
  step: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["step"];
957
960
  backgroundImage: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["backgroundImage"];
958
961
  markings: import("../../../../perseus/src/widgets/interactive-graphs/interactive-graph").Props["markings"];
@@ -985,6 +988,10 @@ export type Props = {
985
988
  * Whether the graph is bounded on the x and y axes.
986
989
  */
987
990
  showAxisArrows: ShowAxisArrows;
991
+ /**
992
+ * Whether to show tick marks and tick numbers per axis.
993
+ */
994
+ showAxisTicks: ShowAxisTicks;
988
995
  /**
989
996
  * How far apart the tick marks on the axes are in the x and y
990
997
  * directions.
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Perseus editors",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "31.2.4",
6
+ "version": "32.0.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -36,35 +36,35 @@
36
36
  "mafs": "^0.19.0",
37
37
  "tiny-invariant": "1.3.1",
38
38
  "@khanacademy/kas": "2.2.3",
39
- "@khanacademy/keypad-context": "3.2.50",
40
- "@khanacademy/kmath": "2.4.8",
41
- "@khanacademy/math-input": "26.4.22",
42
- "@khanacademy/perseus": "77.5.2",
43
- "@khanacademy/perseus-core": "26.1.1",
44
- "@khanacademy/perseus-linter": "5.0.5",
45
- "@khanacademy/perseus-score": "8.9.1",
39
+ "@khanacademy/keypad-context": "3.2.52",
40
+ "@khanacademy/kmath": "2.4.10",
41
+ "@khanacademy/math-input": "26.4.24",
42
+ "@khanacademy/perseus": "77.6.1",
43
+ "@khanacademy/perseus-core": "26.3.0",
44
+ "@khanacademy/perseus-linter": "5.0.7",
45
+ "@khanacademy/perseus-score": "8.10.0",
46
46
  "@khanacademy/perseus-utils": "2.1.5"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@khanacademy/mathjax-renderer": "3.0.0",
50
- "@khanacademy/wonder-blocks-accordion": "3.1.54",
51
- "@khanacademy/wonder-blocks-banner": "5.0.20",
52
- "@khanacademy/wonder-blocks-button": "11.5.1",
53
- "@khanacademy/wonder-blocks-clickable": "8.1.6",
50
+ "@khanacademy/wonder-blocks-accordion": "3.1.56",
51
+ "@khanacademy/wonder-blocks-banner": "5.0.21",
52
+ "@khanacademy/wonder-blocks-button": "11.5.2",
53
+ "@khanacademy/wonder-blocks-clickable": "8.1.7",
54
54
  "@khanacademy/wonder-blocks-core": "12.4.3",
55
- "@khanacademy/wonder-blocks-dropdown": "10.8.5",
56
- "@khanacademy/wonder-blocks-form": "7.5.7",
57
- "@khanacademy/wonder-blocks-icon": "5.3.10",
58
- "@khanacademy/wonder-blocks-icon-button": "11.2.1",
59
- "@khanacademy/wonder-blocks-labeled-field": "4.0.17",
60
- "@khanacademy/wonder-blocks-layout": "3.1.47",
61
- "@khanacademy/wonder-blocks-link": "10.1.8",
62
- "@khanacademy/wonder-blocks-pill": "3.1.58",
63
- "@khanacademy/wonder-blocks-switch": "3.3.31",
55
+ "@khanacademy/wonder-blocks-dropdown": "10.8.7",
56
+ "@khanacademy/wonder-blocks-form": "7.5.8",
57
+ "@khanacademy/wonder-blocks-icon": "5.3.11",
58
+ "@khanacademy/wonder-blocks-icon-button": "11.2.2",
59
+ "@khanacademy/wonder-blocks-labeled-field": "4.0.18",
60
+ "@khanacademy/wonder-blocks-layout": "3.1.48",
61
+ "@khanacademy/wonder-blocks-link": "10.1.9",
62
+ "@khanacademy/wonder-blocks-pill": "3.1.60",
63
+ "@khanacademy/wonder-blocks-switch": "3.3.32",
64
64
  "@khanacademy/wonder-blocks-timing": "7.0.4",
65
- "@khanacademy/wonder-blocks-tokens": "16.2.0",
66
- "@khanacademy/wonder-blocks-tooltip": "4.1.71",
67
- "@khanacademy/wonder-blocks-typography": "4.3.0",
65
+ "@khanacademy/wonder-blocks-tokens": "16.3.0",
66
+ "@khanacademy/wonder-blocks-tooltip": "4.1.72",
67
+ "@khanacademy/wonder-blocks-typography": "4.3.1",
68
68
  "@khanacademy/wonder-stuff-core": "3.0.0",
69
69
  "@phosphor-icons/core": "2.0.2",
70
70
  "aphrodite": "1.2.5",
@@ -79,24 +79,24 @@
79
79
  },
80
80
  "peerDependencies": {
81
81
  "@khanacademy/mathjax-renderer": "^3.0.0",
82
- "@khanacademy/wonder-blocks-accordion": "^3.1.54",
83
- "@khanacademy/wonder-blocks-banner": "^5.0.20",
84
- "@khanacademy/wonder-blocks-button": "^11.5.1",
85
- "@khanacademy/wonder-blocks-clickable": "^8.1.6",
82
+ "@khanacademy/wonder-blocks-accordion": "^3.1.56",
83
+ "@khanacademy/wonder-blocks-banner": "^5.0.21",
84
+ "@khanacademy/wonder-blocks-button": "^11.5.2",
85
+ "@khanacademy/wonder-blocks-clickable": "^8.1.7",
86
86
  "@khanacademy/wonder-blocks-core": "^12.4.3",
87
- "@khanacademy/wonder-blocks-dropdown": "^10.8.5",
88
- "@khanacademy/wonder-blocks-form": "^7.5.7",
89
- "@khanacademy/wonder-blocks-icon": "^5.3.10",
90
- "@khanacademy/wonder-blocks-icon-button": "^11.2.1",
91
- "@khanacademy/wonder-blocks-labeled-field": "^4.0.17",
92
- "@khanacademy/wonder-blocks-layout": "^3.1.47",
93
- "@khanacademy/wonder-blocks-link": "^10.1.8",
94
- "@khanacademy/wonder-blocks-pill": "^3.1.58",
95
- "@khanacademy/wonder-blocks-switch": "^3.3.31",
87
+ "@khanacademy/wonder-blocks-dropdown": "^10.8.7",
88
+ "@khanacademy/wonder-blocks-form": "^7.5.8",
89
+ "@khanacademy/wonder-blocks-icon": "^5.3.11",
90
+ "@khanacademy/wonder-blocks-icon-button": "^11.2.2",
91
+ "@khanacademy/wonder-blocks-labeled-field": "^4.0.18",
92
+ "@khanacademy/wonder-blocks-layout": "^3.1.48",
93
+ "@khanacademy/wonder-blocks-link": "^10.1.9",
94
+ "@khanacademy/wonder-blocks-pill": "^3.1.60",
95
+ "@khanacademy/wonder-blocks-switch": "^3.3.32",
96
96
  "@khanacademy/wonder-blocks-timing": "^7.0.4",
97
- "@khanacademy/wonder-blocks-tokens": "^16.2.0",
98
- "@khanacademy/wonder-blocks-tooltip": "^4.1.71",
99
- "@khanacademy/wonder-blocks-typography": "^4.3.0",
97
+ "@khanacademy/wonder-blocks-tokens": "^16.3.0",
98
+ "@khanacademy/wonder-blocks-tooltip": "^4.1.72",
99
+ "@khanacademy/wonder-blocks-typography": "^4.3.1",
100
100
  "@khanacademy/wonder-stuff-core": "^3.0.0",
101
101
  "@phosphor-icons/core": "^2.0.2",
102
102
  "aphrodite": "^1.2.5",
@@ -109,7 +109,7 @@
109
109
  },
110
110
  "keywords": [],
111
111
  "khan": {
112
- "catalogHash": "522e5ac78ae83dd8"
112
+ "catalogHash": "0b097526eed5a522"
113
113
  },
114
114
  "scripts": {}
115
115
  }