@khanacademy/perseus-editor 11.2.0 → 11.4.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-settings.d.ts

@@ -7,6 +7,7 @@
 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";
@@ -30,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-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/sortable.d.ts

@@ -1,2 +1,8 @@
+/**
+ * Takes an array of components to sort.
+ * As of 08/05/24, there are two sortable components
+ * (one in perseus and one in perseus-editor).
+ * As far as I can tell, this one is only used in ExpressionEditor.
+ */
 declare const SortableArea: any;
 export default SortableArea;

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/util.d.ts

@@ -12,3 +12,4 @@ 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;
@@ -326,31 +329,6 @@
 .perseus-article-editor .perseus-editor-left-cell > .pod-title {
   padding: 4px 9px;
 }
-.perseus-widget-expression-editor .answer-options-list li {
-  margin: 5px 0;
-}
-.perseus-widget-expression-editor .answer-status {
-  color: inherit;
-  cursor: pointer;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  width: 75%;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.perseus-widget-expression-editor .answer-status.wrong {
-  background-color: #ffcccc;
-}
-.perseus-widget-expression-editor .answer-status.correct {
-  background-color: #aaffaa;
-}
-.perseus-widget-expression-editor .answer-status.ungraded {
-  background-color: #d9edf7;
-}
-.perseus-widget-expression-editor .expression-editor-h3 {
-  margin: 10px 0 4px;
-}
 .perseus-widget-dropdown input[type="text"] {
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -746,48 +724,6 @@
 .info-tip-content-container p + p {
   margin-top: 22px;
 }
-.expression-answer-option {
-  border: 1px solid #ddd;
-  border-radius: 3px;
-}
-.expression-answer-option .answer-handle {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==) no-repeat 50% 50%;
-  border-right: 1px solid #ddd;
-  cursor: move;
-  display: table-cell;
-  width: 20px;
-}
-.expression-answer-option .answer-body {
-  display: table-cell;
-}
-.expression-answer-option .answer-considered {
-  display: table;
-}
-.expression-answer-option .answer-expression {
-  display: table-cell;
-}
-.expression-answer-option .answer-status {
-  display: table-cell;
-  width: 100px;
-}
-.expression-answer-option .answer-option {
-  padding-left: 5px;
-}
-.expression-answer-option .remove-container {
-  padding: 5px;
-}
-.expression-answer-option .remove-container button {
-  width: 100%;
-}
-.expression-answer-option .perseus-math-input {
-  width: 236px;
-}
-.expression-answer-option .perseus-math-input .mq-root-block {
-  border-top: none;
-  border-right: none;
-  border-bottom: 1px solid #ddd !important;
-  border-left: 1px solid #ddd !important;
-}
 .perseus-widget-interaction-editor .perseus-widget-interaction-editor-select-element {
   background-color: #eee;
   border: 1px solid #ddd;
@@ -852,21 +788,9 @@
 .perseus-interaction-element .perseus-interaction-element-content.leave {
   display: none;
 }
-.button-set-label {
-  display: block;
-}
-.button-set-label-float {
-  display: block;
-  float: left;
-  margin-right: 10px;
-}
 .button-set-separator {
   margin: 10px 0;
 }
-.show-div-button {
-  -webkit-user-select: none;
-  user-select: none;
-}
 .perseus-widget-editor .unit-radio {
   color: black;
   text-decoration: none;