@khanacademy/perseus-editor 9.0.0 → 10.0.0

package/dist/es/index.js

@@ -37,7 +37,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$H.button
+      style: styles$G.button
     }, ({
       hovered,
       focused,
@@ -235,7 +235,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$H = StyleSheet.create({
+const styles$G = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20740,13 +20740,13 @@ class WidgetSelect extends React.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.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$G = StyleSheet.create({
+const styles$F = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20779,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$F.errorContainer
+      style: styles$E.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$F.title,
+      style: styles$E.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: styles$F.error,
+      style: styles$E.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20797,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$F = StyleSheet.create({
+const styles$E = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24591,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$E.baseButton, color === "green" && styles$E.green, color === "orange" && styles$E.orange),
+      className: css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24606,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$E = StyleSheet.create({
+const styles$D = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24826,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.containerHeader)
+    className: css(styles$C.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$D.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.container)
+    className: css(styles$C.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$D.row, styles$D.rowHeading)
+    className: css(styles$C.row, styles$C.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$D.containerHeader)
+    className: "pod-title " + css(styles$C.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnRight)
+    className: css(styles$C.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24855,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.container)
+    className: css(styles$C.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft, styles$D.containerHeader)
+    className: css(styles$C.columnLeft, styles$C.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24872,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.containerHeader)
+    className: css(styles$C.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$D.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.containerHeader, styles$D.previewCollectionHeader)
+    className: css(styles$C.containerHeader, styles$C.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$D.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.container)
+    className: css(styles$C.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$D.row)
+    className: css(styles$C.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft)
+    className: css(styles$C.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnRight)
+    className: css(styles$C.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$D.contentIndent)
+    className: css(path.length > 0 && styles$C.contentIndent)
   }, children));
 };
 
@@ -25016,11 +25016,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.row)
+    className: css(styles$C.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$D.sticky)
+    className: css(sticky && styles$C.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25028,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnRight)
+    className: css(styles$C.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$D.sticky)
+    className: css(sticky && styles$C.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25046,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.row)
+    className: css(styles$C.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$D.sticky)
+    className: css(sticky && styles$C.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$D.hintEditor),
+    className: css(styles$C.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25067,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnRight)
+    className: css(styles$C.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$D.sticky)
+    className: css(sticky && styles$C.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25086,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$D.tagsEditor)
+    className: css(styles$C.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25119,23 +25119,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$D.control)
+      className: css(styles$C.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$D.verticalFlip)
+      className: css(styles$C.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$D.control)
+      className: css(styles$C.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$D.control)
+      className: css(styles$C.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25143,7 +25143,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$D.arrayElement, !elementIsLeaf && styles$D.arrayElementAndNotLeaf)
+      className: css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25169,7 +25169,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.createElement("div", {
     key: subkey,
-    className: css(styles$D.objectElement)
+    className: css(styles$C.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25336,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$D = StyleSheet.create({
+const styles$C = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25438,116 +25438,6 @@ const styles$D = StyleSheet.create({
   }
 });
 
-/* eslint-disable react/no-unsafe */
-const StatefulArticleEditor = createReactClass({
-  displayName: "StatefulArticleEditor",
-  getInitialState: function () {
-    return _({}).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(_(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.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$C.controlBar
-    }, /*#__PURE__*/React.createElement("span", {
-      style: styles$C.controls
-    }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
-      onClick: () => this.setState({
-        mode: "edit"
-      }),
-      style: mode === "edit" ? styles$C.controlSelected : styles$C.control
-    }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
-      onClick: () => this.setState({
-        mode: "preview"
-      }),
-      style: mode === "preview" ? styles$C.controlSelected : styles$C.control
-    }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
-      onClick: () => this.setState({
-        mode: "json"
-      }),
-      style: mode === "json" ? styles$C.controlSelected : styles$C.control
-    }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$C.controls
-    }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
-      onClick: () => this.setState({
-        screen: "phone"
-      }),
-      style: screen === "phone" ? styles$C.controlSelected : styles$C.control
-    }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
-      onClick: () => this.setState({
-        screen: "tablet"
-      }),
-      style: screen === "tablet" ? styles$C.controlSelected : styles$C.control
-    }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
-      onClick: () => this.setState({
-        screen: "desktop"
-      }),
-      style: screen === "desktop" ? styles$C.controlSelected : styles$C.control
-    }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$C.editor
-    }, /*#__PURE__*/React.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.
@@ -36397,5 +36287,5 @@ Widgets.registerWidgets(AllWidgets);
 Widgets.replaceDeprecatedWidgets();
 Widgets.replaceDeprecatedEditors();
 
-export { AllEditors, AllWidgets, ArticleDiff, ArticleEditor, DeviceFramer, Editor, EditorPage, IframeContentRenderer, ItemDiff, MultiRendererEditor, StatefulArticleEditor, StatefulEditorPage, StructuredItemDiff, ViewportResizer, i18n, libVersion };
+export { AllEditors, AllWidgets, ArticleDiff, ArticleEditor, DeviceFramer, Editor, EditorPage, IframeContentRenderer, ItemDiff, MultiRendererEditor, StatefulEditorPage, StructuredItemDiff, ViewportResizer, i18n, libVersion };
 //# sourceMappingURL=index.js.map