@khanacademy/perseus-editor 11.1.0 → 11.3.0

package/dist/article-editor.d.ts

@@ -3,7 +3,7 @@
  * multiple (Renderer) sections concatenated together.
  */
 import * as React from "react";
-import type { APIOptions, Changeable } from "@khanacademy/perseus";
+import type { APIOptions, Changeable, ImageUploader } from "@khanacademy/perseus";
 type RendererProps = {
     content?: string;
     widgets?: any;
@@ -20,7 +20,7 @@ type DefaultProps = {
 };
 type Props = DefaultProps & {
     apiOptions?: APIOptions;
-    imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
+    imageUploader?: ImageUploader;
     previewURL: string;
 } & Changeable.ChangeableProps;
 type State = {

package/dist/components/graph-locked-figures/line-stroke-select.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type StyleOptions = "solid" | "dashed";
+type Props = {
+    selectedValue: StyleOptions;
+    onChange: (newValue: string) => void;
+};
+declare const LineStrokeSelect: (props: Props) => React.JSX.Element;
+export default LineStrokeSelect;

package/dist/components/graph-locked-figures/locked-figure-select.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 type Props = {
-    showM2Features: boolean;
     showM2bFeatures: boolean;
     id: string;
     onChange: (value: string) => void;

package/dist/components/graph-locked-figures/locked-figure-settings-actions.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import type { LockedFigureType } from "@khanacademy/perseus";
 export type LockedFigureSettingsMovementType = "back" | "backward" | "forward" | "front";
 type Props = {
-    showM2Features?: boolean;
     figureType: LockedFigureType;
     onMove: (movement: LockedFigureSettingsMovementType) => void;
     onRemove: () => void;

package/dist/components/graph-locked-figures/locked-figure-settings.d.ts

@@ -7,12 +7,12 @@
 import * as React from "react";
 import type { Props as LockedEllipseProps } from "./locked-ellipse-settings";
 import type { LockedFigureSettingsMovementType } from "./locked-figure-settings-actions";
+import type { Props as LockedFunctionProps } from "./locked-function-settings";
 import type { Props as LockedLineProps } from "./locked-line-settings";
 import type { Props as LockedPointProps } from "./locked-point-settings";
 import type { Props as LockedPolygonProps } from "./locked-polygon-settings";
 import type { Props as LockedVectorProps } from "./locked-vector-settings";
 export type LockedFigureSettingsCommonProps = {
-    showM2Features?: boolean;
     showM2bFeatures?: boolean;
     /**
      * Called when a movement button (top, up, down, bottom) is pressed.
@@ -31,6 +31,6 @@ export type LockedFigureSettingsCommonProps = {
      */
     onToggle?: (expanded: boolean) => void;
 };
-type Props = LockedFigureSettingsCommonProps & (LockedPointProps | LockedLineProps | LockedEllipseProps | LockedVectorProps | LockedPolygonProps);
+type Props = LockedFigureSettingsCommonProps & (LockedPointProps | LockedLineProps | LockedEllipseProps | LockedVectorProps | LockedPolygonProps | LockedFunctionProps);
 declare const LockedFigureSettings: (props: Props) => React.JSX.Element | null;
 export default LockedFigureSettings;

package/dist/components/graph-locked-figures/locked-figures-section.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import type { Props as InteractiveGraphEditorProps } from "../../widgets/interactive-graph-editor";
 import type { LockedFigure } from "@khanacademy/perseus";
 type Props = {
-    showM2Features: boolean;
     showM2bFeatures: boolean;
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;

package/dist/components/graph-locked-figures/locked-function-settings.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
+import type { LockedFunctionType } from "@khanacademy/perseus";
+export type Props = LockedFunctionType & LockedFigureSettingsCommonProps & {
+    /**
+     * Called when the props (points, color, etc.) are updated.
+     */
+    onChangeProps: (newProps: Partial<LockedFunctionType>) => void;
+};
+declare const LockedFunctionSettings: (props: Props) => React.JSX.Element;
+export default LockedFunctionSettings;

package/dist/components/scrollless-number-text-field.d.ts

@@ -0,0 +1,21 @@
+import { TextField } from "@khanacademy/wonder-blocks-form";
+import * as React from "react";
+import type { PropsFor } from "@khanacademy/wonder-blocks-core";
+/**
+ * This is a custom text field of type="number" for use in Perseus Editors.
+ *
+ * This makes it so that the text field's input number updates on scroll
+ * without scrolling the page.
+ *
+ * NOTE 1: Native HTML number inputs do not update the number value on scroll,
+ * they only scroll the page. Inputs in React do NOT work this way (explanation
+ * here: https://stackoverflow.com/a/68266494). By default, scrolling on a
+ * focused number input in React causes BOTH the input value to change AND
+ * the page to scroll. The behavior in this component is an improvement on
+ * the React behavior, but it's the opposite of the native HTML behavior.
+ *
+ * NOTE 2: Firefox seems to have a custom override for this. Even with this
+ * stopPropogation, Firefox matches the native HTML behavior.
+ */
+declare const ScrolllessNumberTextField: (props: PropsFor<typeof TextField>) => React.JSX.Element;
+export default ScrolllessNumberTextField;

package/dist/components/start-coords-angle.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { Coord, PerseusGraphType } from "@khanacademy/perseus";
+type Props = {
+    startCoords: [Coord, Coord, Coord];
+    onChange: (startCoords: PerseusGraphType["startCoords"]) => void;
+};
+declare const StartCoordsAngle: (props: Props) => React.JSX.Element;
+export default StartCoordsAngle;

package/dist/components/start-coords-point.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { Coord, PerseusGraphType } from "@khanacademy/perseus";
+type Props = {
+    startCoords: ReadonlyArray<Coord>;
+    onChange: (startCoords: PerseusGraphType["startCoords"]) => void;
+};
+declare const StartCoordsPoint: (props: Props) => React.JSX.Element;
+export default StartCoordsPoint;

package/dist/components/start-coords-quadratic.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { Coord, PerseusGraphType } from "@khanacademy/perseus";
+type Props = {
+    startCoords: [Coord, Coord, Coord];
+    onChange: (startCoords: PerseusGraphType["startCoords"]) => void;
+};
+declare const StartCoordsQuadratic: (props: Props) => React.JSX.Element;
+export default StartCoordsQuadratic;

package/dist/components/start-coords-sinusoid.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { Coord, PerseusGraphType } from "@khanacademy/perseus";
+type Props = {
+    startCoords: [Coord, Coord];
+    onChange: (startCoords: PerseusGraphType["startCoords"]) => void;
+};
+declare const StartCoordsSinusoid: (props: Props) => React.JSX.Element;
+export default StartCoordsSinusoid;

package/dist/components/util.d.ts

@@ -1,4 +1,4 @@
-import type { Range, LockedFigure, LockedFigureType, LockedPointType, LockedLineType, LockedEllipseType, LockedVectorType, LockedPolygonType, LockedFunctionType, PerseusGraphType } from "@khanacademy/perseus";
+import type { Range, LockedFigure, LockedFigureType, LockedPointType, LockedLineType, LockedEllipseType, LockedVectorType, LockedPolygonType, LockedFunctionType, PerseusGraphType, Coord } from "@khanacademy/perseus";
 export declare function focusWithChromeStickyFocusBugWorkaround(element: Element): void;
 export declare function getDefaultFigureForType(type: "point"): LockedPointType;
 export declare function getDefaultFigureForType(type: "line"): LockedLineType;
@@ -10,3 +10,6 @@ export declare function getDefaultFigureForType(type: LockedFigureType): LockedF
 export declare function degreeToRadian(degrees: number): number;
 export declare function radianToDegree(radians: number): number;
 export declare function getDefaultGraphStartCoords(graph: PerseusGraphType, range: [x: Range, y: Range], step: [x: number, y: number]): PerseusGraphType["startCoords"];
+export declare const getSinusoidEquation: (startCoords: [Coord, Coord]) => string;
+export declare const getQuadraticEquation: (startCoords: [Coord, Coord, Coord]) => string;
+export declare const shouldShowStartCoordsUI: (flags: any, graph: any) => boolean;

package/dist/components/widget-editor.d.ts

@@ -21,7 +21,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "categorizer" | "image" | "radio" | "table" | "cs-program" | "iframe" | "video" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "passage-ref-target" | "simple-markdown-tester" | "sorter" | "deprecated-standin";
+        type: "definition" | "group" | "radio" | "table" | "categorizer" | "iframe" | "video" | "image" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "passage-ref-target" | "simple-markdown-tester" | "sorter" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

package/dist/editor.d.ts

@@ -1,6 +1,6 @@
 import "./katex-mhchem";
 import * as React from "react";
-import type { ChangeHandler, PerseusWidget } from "@khanacademy/perseus";
+import type { ChangeHandler, ImageUploader, PerseusWidget } from "@khanacademy/perseus";
 type Props = Readonly<{
     apiOptions: any;
     className?: string;
@@ -17,7 +17,7 @@ type Props = Readonly<{
     showWordCount: boolean;
     warnNoPrompt: boolean;
     warnNoWidgets: boolean;
-    imageUploader?: (file: string, callback: (url: string) => unknown) => unknown;
+    imageUploader?: ImageUploader;
     onChange: ChangeHandler;
 }>;
 type DefaultProps = {

package/dist/es/index.css

@@ -84,6 +84,9 @@
   border: 1px solid #ddd;
   padding: 10px;
 }
+.perseus-answer-options * {
+  margin-bottom: 4px;
+}
 .perseus-answer-widget {
   border: 1px solid #ddd;
   border-radius: 0 0 3px 3px;