@khanacademy/perseus-editor 5.0.3 → 5.1.1

package/dist/index.js

@@ -26,6 +26,8 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
 var Button = require('@khanacademy/wonder-blocks-button');
 var i18n$1 = require('@khanacademy/wonder-blocks-i18n');
 
@@ -61,12 +63,14 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.0.3";
+const libVersion = "5.1.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -260,13 +264,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$m.button
+      style: styles$q.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$m = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: Color__default["default"].gold,
     margin: 2,
@@ -20784,19 +20788,19 @@ class TexErrorView extends React__namespace.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$l.iconExpanded : styles$l.iconCollapsed;
+    const iconStyle = showErrors ? styles$p.iconExpanded : styles$p.iconCollapsed;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.errorContainer
+      style: styles$p.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.title,
+      style: styles$p.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       icon: caretRight__default["default"],
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.errorExplanation
+      style: styles$p.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.error,
+      style: styles$p.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20805,7 +20809,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$l = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24583,12 +24587,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$k.baseButton, color === "green" && styles$k.green, color === "orange" && styles$k.orange),
+      className: aphrodite.css(styles$o.baseButton, color === "green" && styles$o.green, color === "orange" && styles$o.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$k = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24801,23 +24805,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.containerHeader)
+    className: aphrodite.css(styles$n.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$j.containerTitle)
+    className: aphrodite.css(styles$n.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.container)
+    className: aphrodite.css(styles$n.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$j.row, styles$j.rowHeading)
+    className: aphrodite.css(styles$n.row, styles$n.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft)
+    className: aphrodite.css(styles$n.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$j.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$n.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.containerTitle)
+    className: aphrodite.css(styles$n.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnRight)
+    className: aphrodite.css(styles$n.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24830,11 +24834,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.container)
+    className: aphrodite.css(styles$n.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft, styles$j.containerHeader)
+    className: aphrodite.css(styles$n.columnLeft, styles$n.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft)
+    className: aphrodite.css(styles$n.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24848,28 +24852,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.containerHeader)
+    className: aphrodite.css(styles$n.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$j.containerTitle)
+    className: aphrodite.css(styles$n.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.containerHeader, styles$j.previewCollectionHeader)
+    className: aphrodite.css(styles$n.containerHeader, styles$n.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$j.containerTitle)
+    className: aphrodite.css(styles$n.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.container)
+    className: aphrodite.css(styles$n.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$j.row)
+    className: aphrodite.css(styles$n.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft)
+    className: aphrodite.css(styles$n.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnRight)
+    className: aphrodite.css(styles$n.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$j.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$n.contentIndent)
   }, children));
 };
 
@@ -24989,11 +24993,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.row)
+    className: aphrodite.css(styles$n.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft)
+    className: aphrodite.css(styles$n.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$j.sticky)
+    className: aphrodite.css(sticky && styles$n.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25001,9 +25005,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnRight)
+    className: aphrodite.css(styles$n.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$j.sticky)
+    className: aphrodite.css(sticky && styles$n.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25019,13 +25023,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.row)
+    className: aphrodite.css(styles$n.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft)
+    className: aphrodite.css(styles$n.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$j.sticky)
+    className: aphrodite.css(sticky && styles$n.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$j.hintEditor),
+    className: aphrodite.css(styles$n.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25040,9 +25044,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnRight)
+    className: aphrodite.css(styles$n.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$j.sticky)
+    className: aphrodite.css(sticky && styles$n.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25059,9 +25063,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.columnLeft)
+    className: aphrodite.css(styles$n.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$j.tagsEditor)
+    className: aphrodite.css(styles$n.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25092,23 +25096,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$j.control)
+      className: aphrodite.css(styles$n.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.verticalFlip)
+      className: aphrodite.css(styles$n.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$j.control)
+      className: aphrodite.css(styles$n.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$j.control)
+      className: aphrodite.css(styles$n.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25116,7 +25120,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$j.arrayElement, !elementIsLeaf && styles$j.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$n.arrayElement, !elementIsLeaf && styles$n.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25142,7 +25146,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$j.objectElement)
+    className: aphrodite.css(styles$n.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25311,7 +25315,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$j = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25463,47 +25467,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$i.controlBar
+      style: styles$m.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$i.controls
+      style: styles$m.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$i.controlSelected : styles$i.control
+      style: mode === "edit" ? styles$m.controlSelected : styles$m.control
     }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$i.controlSelected : styles$i.control
+      style: mode === "preview" ? styles$m.controlSelected : styles$m.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$i.controlSelected : styles$i.control
+      style: mode === "json" ? styles$m.controlSelected : styles$m.control
     }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$i.controls
+      style: styles$m.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$i.controlSelected : styles$i.control
+      style: screen === "phone" ? styles$m.controlSelected : styles$m.control
     }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$i.controlSelected : styles$i.control
+      style: screen === "tablet" ? styles$m.controlSelected : styles$m.control
     }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$i.controlSelected : styles$i.control
+      style: screen === "desktop" ? styles$m.controlSelected : styles$m.control
     }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$i.editor
+      style: styles$m.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$i = {
+const styles$m = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27041,10 +27045,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$h.title)
+      className: aphrodite.css(styles$l.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$h.input)
+      className: aphrodite.css(styles$l.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27069,7 +27073,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$h.hintsTitle)
+      className: aphrodite.css(styles$l.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27101,7 +27105,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28464,13 +28468,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$g.outerWrapper
+    style: styles$k.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$g = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29556,7 +29560,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$f.singleSelectShort
+    style: styles$j.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -29566,7 +29570,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29579,7 +29583,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$e.singleSelectShort
+    style: styles$i.singleSelectShort
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29612,7 +29616,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$e = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29628,19 +29632,25 @@ const LabeledRow = props => {
     labelSide = "left",
     style
   } = props;
-  return /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, style]
+  return /*#__PURE__*/React__namespace.createElement("label", {
+    className: aphrodite.css(styles$h.label)
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$h.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$d.spaceEnd
+    style: styles$h.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$d.spaceStart
+    style: styles$h.spaceStart
   }, label)));
 };
-const styles$d = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
+  label: {
+    width: "fit-content"
+  },
   row: {
     flexDirection: "row",
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    alignItems: "center"
+    alignItems: "center",
+    width: "fit-content"
   },
   spaceStart: {
     marginInlineStart: wonderBlocksTokens.spacing.xSmall_8
@@ -30054,10 +30064,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$c.resetSpaceTop
+      style: styles$g.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$c.backgroundUrlInput),
+      className: aphrodite.css(styles$g.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30073,24 +30083,24 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.rulerSection
+      style: styles$g.rulerSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.checkboxRow
+      style: styles$g.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$g.resetSpaceTop
     }), /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$g.resetSpaceTop
     })), this.props.showRuler && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.spaceTop
+      style: styles$g.spaceTop
     }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$c.resetSpaceTop
+      style: styles$g.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -30100,7 +30110,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "None",
-      style: styles$c.singleSelectShort
+      style: styles$g.singleSelectShort
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "",
       label: "None",
@@ -30141,7 +30151,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "10",
-      style: styles$c.singleSelectShort
+      style: styles$g.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: value,
       value: `${value}`,
@@ -30149,7 +30159,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     })))))));
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30180,6 +30190,315 @@ const styles$c = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * Dropdown for selecting a locked figure to add to an interactive graph.
+ * Locked figures are elements (points, segmeents, etc.) that are not
+ * interactive, just present in the graph's background.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedFigureSelect = props => {
+  const {
+    id,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$f.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
+    menuText: "Add element",
+    style: styles$f.addElementSelect
+  }, [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    key: `${id}-point`,
+    label: "Point",
+    onClick: () => onChange("point")
+  }, "Point")]));
+};
+const styles$f = aphrodite.StyleSheet.create({
+  container: {
+    marginTop: wonderBlocksTokens.spacing.medium_16
+  },
+  addElementSelect: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue16,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
+  }
+});
+
+const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React__namespace.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles$e.grow, style]
+    });
+  }
+}
+const styles$e = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+function focusWithChromeStickyFocusBugWorkaround(element) {
+  // NOTE(marksandstrom) Chrome sticky focus bug.
+  //
+  // There is a bug in Chrome related to sticky positioning and
+  // focus: When a child of an element with sticky positioning is
+  // focused with the focus() method, the scrollable area
+  // containing that element will scroll to the top (even though
+  // the element is already visble on the page). For a dropdown
+  // this means that the area will be scrolled to the top when
+  // the user interacts with the dropdown (since we actively
+  // manage dropdown header and option focus for keyboard users).
+  //
+  // To work around this bug the `preventScroll` focus option is
+  // used.
+  //
+  // Using `focusOptions` is an experimental browser feature
+  // "that should not be used in production code". However, since
+  // Chrome is the only browser we support that exhibits this
+  // buggy behavior and using `focusOptions` works around the
+  // bug, it is perfectly reasonable to use the feature in this
+  // case. We are not relying on the effect of the
+  // `preventScroll` option otherwise.
+  //
+  // focusOptions documentation:
+  //
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+  //
+  // Note that there could be cases where we want default focus() behavior.
+  // One that comes to mind is a dropdown with a long list of options that
+  // might be rendered off screen when opened. With this workaround the
+  // selected option would not be scrolled into view if the option is near
+  // the end of the list. We're not aware of any uses of the dropdown where
+  // this is an issue, however, so there isn't currently a way to out of the
+  // `preventScroll` behavior.
+
+  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
+  element.focus({
+    preventScroll: true
+  });
+}
+function getValidNumberFromString(value) {
+  const parsed = parseInt(value);
+  // If the value is not a number, return 0.
+  return isNaN(parsed) ? 0 : parsed;
+}
+function getDefaultFigureForFigureType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0]
+      };
+  }
+}
+
+/**
+ * LockedPointSettings is a component that allows the user to edit the
+ * settings of specifically a locked point on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedPointSettings = props => {
+  const {
+    coord,
+    onRemove,
+    onChangeCoord
+  } = props;
+  const [coordState, setCoordState] = React__namespace.useState([
+  // Using strings to make it easier to work with the text fields.
+  coord[0].toString(), coord[1].toString()]);
+
+  // Generate unique IDs so that the programmatic labels can be associated
+  // with their respective text fields.
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const xCoordId = ids.get("x-coord");
+  const yCoordId = ids.get("y-coord");
+  function handleBlur() {
+    const validCoord = [getValidNumberFromString(coordState[0]), getValidNumberFromString(coordState[1])];
+
+    // Make the text field only show valid numbers after blur.
+    setCoordState([validCoord[0].toString(), validCoord[1].toString()]);
+    // Update the graph with the new coordinates.
+    onChangeCoord(validCoord);
+  }
+  function handleChange(newValue, coordIndex) {
+    const newCoord = [...coordState];
+    newCoord[coordIndex] = newValue;
+    setCoordState(newCoord);
+  }
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    icon: trashIcon__default["default"],
+    "aria-label": `Delete locked point at ${coordState[0]}, ${coordState[1]}`,
+    onClick: onRemove
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: xCoordId,
+    style: styles$d.label,
+    tag: "label"
+  }, "x Coordinate"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    id: xCoordId,
+    value: coordState[0],
+    onChange: newValue => handleChange(newValue, 0),
+    onBlur: handleBlur,
+    style: styles$d.textField
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: yCoordId,
+    style: styles$d.label,
+    tag: "label"
+  }, "y Coordinate"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    id: yCoordId,
+    value: coordState[1],
+    onChange: newValue => handleChange(newValue, 1),
+    onBlur: handleBlur,
+    style: styles$d.textField
+  }))));
+};
+const styles$d = aphrodite.StyleSheet.create({
+  container: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.medium_16,
+    borderRadius: wonderBlocksTokens.spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  label: {
+    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+  },
+  textField: {
+    width: wonderBlocksTokens.spacing.xxxLarge_64
+  }
+});
+
+/**
+ * LockedFigureSettings takes in a figure and renders the
+ * respective settings for that figure type.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+
+// Union this type with other locked figure types when they are added.
+
+const LockedFigureSettings = props => {
+  switch (props.type) {
+    case "point":
+      return /*#__PURE__*/React__namespace.createElement(LockedPointSettings, props);
+  }
+  return null;
+};
+
+const LockedFiguresSection = props => {
+  const uniqueId = wonderBlocksCore.useUniqueIdWithMock().get("locked-figures-section");
+  const {
+    figures,
+    onChange
+  } = props;
+  function addLockedFigure(newFigure) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures, getDefaultFigureForFigureType(newFigure)]
+    };
+    onChange(newProps);
+  }
+  function removeLockedFigure(index) {
+    const lockedFigures = figures || [];
+    onChange({
+      lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
+    });
+  }
+  function changeCoord(index, coord) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures.slice(0, index), {
+        ...lockedFigures[index],
+        coord
+      }, ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newProps);
+  }
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.container
+  }, figures?.map((figure, index) => /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
+    key: `${uniqueId}-locked-${figure}-${index}`
+  }, figure, {
+    onRemove: () => removeLockedFigure(index),
+    onChangeCoord: coord => changeCoord(index, coord)
+  }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
+    id: `${uniqueId}-select`,
+    onChange: addLockedFigure
+  }));
+};
+const styles$c = aphrodite.StyleSheet.create({
+  container: {
+    paddingTop: wonderBlocksTokens.spacing.large_24
+  }
+});
+
 const SegmentCountSelector = _ref => {
   let {
     numSegments = 1,
@@ -30288,6 +30607,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
         showTooltips: this.props.showTooltips,
         rulerLabel: this.props.rulerLabel,
         rulerTicks: this.props.rulerTicks,
+        lockedFigures: this.props.lockedFigures,
         trackInteraction: function () {},
         onChange: newProps => {
           let correct = this.props.correct;
@@ -30508,7 +30828,13 @@ class InteractiveGraphEditor extends React__namespace.Component {
         borderStyle: "solid",
         borderWidth: 1
       }
-    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph);
+    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
+    // Only show the "Add element" dropdown if the graph is
+    // using Mafs.
+    this.props.graph && this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {
+      figures: this.props.lockedFigures,
+      onChange: this.props.onChange
+    }));
   }
   changeMatchType = newValue => {
     const correct = {
@@ -30520,7 +30846,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     });
   };
   serialize() {
-    const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep");
+    const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
@@ -31296,47 +31622,6 @@ const styles$5 = aphrodite.StyleSheet.create({
   }
 });
 
-function focusWithChromeStickyFocusBugWorkaround(element) {
-  // NOTE(marksandstrom) Chrome sticky focus bug.
-  //
-  // There is a bug in Chrome related to sticky positioning and
-  // focus: When a child of an element with sticky positioning is
-  // focused with the focus() method, the scrollable area
-  // containing that element will scroll to the top (even though
-  // the element is already visble on the page). For a dropdown
-  // this means that the area will be scrolled to the top when
-  // the user interacts with the dropdown (since we actively
-  // manage dropdown header and option focus for keyboard users).
-  //
-  // To work around this bug the `preventScroll` focus option is
-  // used.
-  //
-  // Using `focusOptions` is an experimental browser feature
-  // "that should not be used in production code". However, since
-  // Chrome is the only browser we support that exhibits this
-  // buggy behavior and using `focusOptions` works around the
-  // bug, it is perfectly reasonable to use the feature in this
-  // case. We are not relying on the effect of the
-  // `preventScroll` option otherwise.
-  //
-  // focusOptions documentation:
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-  //
-  // Note that there could be cases where we want default focus() behavior.
-  // One that comes to mind is a dropdown with a long list of options that
-  // might be rendered off screen when opened. With this workaround the
-  // selected option would not be scrolled into view if the option is near
-  // the end of the list. We're not aware of any uses of the dropdown where
-  // this is an issue, however, so there isn't currently a way to out of the
-  // `preventScroll` behavior.
-
-  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-  element.focus({
-    preventScroll: true
-  });
-}
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   Icon