@khanacademy/perseus-editor 9.0.0 → 10.0.0

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export { default as Editor } from "./editor";
 export { default as i18n } from "./i18n";
 export { default as IframeContentRenderer } from "./iframe-content-renderer";
 export { default as MultiRendererEditor } from "./multirenderer-editor";
-export { default as StatefulArticleEditor } from "./stateful-article-editor";
 export { default as StatefulEditorPage } from "./stateful-editor-page";
 import "./styles/perseus-editor.less";
 import AllEditors from "./all-editors";

package/dist/index.js

@@ -83,7 +83,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "9.0.0";
+const libVersion = "10.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -278,13 +278,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$H.button
+      style: styles$G.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$H = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20789,13 +20789,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$G.expanded : styles$G.collapsed;
+  const iconStyle = props.isExpanded ? styles$F.expanded : styles$F.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20825,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.errorContainer
+      style: styles$E.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.title,
+      style: styles$E.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.errorExplanation
+      style: styles$E.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$F.error,
+      style: styles$E.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20843,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24593,12 +24593,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$E.baseButton, color === "green" && styles$E.green, color === "orange" && styles$E.orange),
+      className: aphrodite.css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$E = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24811,23 +24811,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$D.containerHeader)
+    className: aphrodite.css(styles$C.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$C.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.container)
+    className: aphrodite.css(styles$C.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$D.row, styles$D.rowHeading)
+    className: aphrodite.css(styles$C.row, styles$C.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$C.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$D.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$C.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$C.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$C.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24840,11 +24840,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.container)
+    className: aphrodite.css(styles$C.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft, styles$D.containerHeader)
+    className: aphrodite.css(styles$C.columnLeft, styles$C.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$C.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24858,28 +24858,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerHeader)
+    className: aphrodite.css(styles$C.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$C.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerHeader, styles$D.previewCollectionHeader)
+    className: aphrodite.css(styles$C.containerHeader, styles$C.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$C.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.container)
+    className: aphrodite.css(styles$C.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$D.row)
+    className: aphrodite.css(styles$C.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$C.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$C.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$D.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$C.contentIndent)
   }, children));
 };
 
@@ -24999,11 +24999,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$D.row)
+    className: aphrodite.css(styles$C.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$C.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$C.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25011,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$C.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$C.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25029,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.row)
+    className: aphrodite.css(styles$C.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$C.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$C.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$D.hintEditor),
+    className: aphrodite.css(styles$C.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25050,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$C.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$C.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25069,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$C.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.tagsEditor)
+    className: aphrodite.css(styles$C.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,23 +25102,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$D.control)
+      className: aphrodite.css(styles$C.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$D.verticalFlip)
+      className: aphrodite.css(styles$C.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$D.control)
+      className: aphrodite.css(styles$C.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$D.control)
+      className: aphrodite.css(styles$C.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25126,7 +25126,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$D.arrayElement, !elementIsLeaf && styles$D.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25152,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$D.objectElement)
+    className: aphrodite.css(styles$C.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25322,7 +25322,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25424,116 +25424,6 @@ const styles$D = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/no-unsafe */
-const StatefulArticleEditor = createReactClass__default["default"]({
-  displayName: "StatefulArticleEditor",
-  getInitialState: function () {
-    return ___default["default"]({}).extend(this.props, {
-      mode: "edit",
-      onChange: this.handleChange,
-      ref: "editor",
-      screen: "phone"
-    });
-  },
-  componentDidMount: function () {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-  },
-  // getInitialState isn't called if the react component is re-rendered
-  // in-place on the dom, in which case this is called instead, so we
-  // need to update the state here.
-  // (This component is currently re-rendered by the "Add image" button.)
-  UNSAFE_componentWillReceiveProps: function (nextProps) {
-    // be careful not to overwrite our onChange and ref
-    this.setState(___default["default"](nextProps).omit("onChange", "ref"));
-  },
-  componentWillUnmount: function () {
-    this._isMounted = false;
-  },
-  getSaveWarnings: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.getSaveWarnings();
-  },
-  serialize: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.serialize();
-  },
-  handleChange: function (newState, cb) {
-    if (this._isMounted) {
-      this.setState(newState, cb);
-    }
-  },
-  scorePreview: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.scorePreview();
-  },
-  render: function () {
-    const {
-      mode,
-      screen
-    } = this.state;
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$C.controlBar
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$C.controls
-    }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        mode: "edit"
-      }),
-      style: mode === "edit" ? styles$C.controlSelected : styles$C.control
-    }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        mode: "preview"
-      }),
-      style: mode === "preview" ? styles$C.controlSelected : styles$C.control
-    }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        mode: "json"
-      }),
-      style: mode === "json" ? styles$C.controlSelected : styles$C.control
-    }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$C.controls
-    }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        screen: "phone"
-      }),
-      style: screen === "phone" ? styles$C.controlSelected : styles$C.control
-    }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        screen: "tablet"
-      }),
-      style: screen === "tablet" ? styles$C.controlSelected : styles$C.control
-    }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        screen: "desktop"
-      }),
-      style: screen === "desktop" ? styles$C.controlSelected : styles$C.control
-    }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$C.editor
-    }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
-  }
-});
-const styles$C = {
-  controlBar: {
-    marginBottom: 25,
-    marginTop: 5
-  },
-  controls: {
-    marginRight: 10
-  },
-  controlSelected: {
-    cursor: "default",
-    fontWeight: 700
-  },
-  control: {
-    cursor: "pointer"
-  },
-  editor: {
-    marginTop: -20
-  }
-};
-
 /* eslint-disable react/no-unsafe, react/sort-comp */
 
 /* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
@@ -36608,7 +36498,6 @@ exports.EditorPage = EditorPage;
 exports.IframeContentRenderer = IframeContentRenderer;
 exports.ItemDiff = ItemDiff;
 exports.MultiRendererEditor = MultiRendererEditor;
-exports.StatefulArticleEditor = StatefulArticleEditor;
 exports.StatefulEditorPage = StatefulEditorPage;
 exports.StructuredItemDiff = StructuredItemDiff;
 exports.ViewportResizer = ViewportResizer;