@khanacademy/perseus-editor 11.6.0 → 12.0.0

package/dist/index.d.ts

@@ -8,7 +8,6 @@ export { default as StructuredItemDiff } from "./diffs/structured-item-diff";
 export { default as EditorPage } from "./editor-page";
 export { default as Editor } from "./editor";
 export { default as i18n } from "./i18n";
-export { default as ContentPreview } from "./content-preview";
 export { default as IframeContentRenderer } from "./iframe-content-renderer";
 export { default as MultiRendererEditor } from "./multirenderer-editor";
 export { default as StatefulEditorPage } from "./stateful-editor-page";

package/dist/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var perseusCore = require('@khanacademy/perseus-core');
 var perseus = require('@khanacademy/perseus');
-var React$1 = require('react');
+var React = require('react');
 var _ = require('underscore');
 var createReactClass = require('create-react-class');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
@@ -18,14 +18,13 @@ var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 var classNames = require('classnames');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
-var keypadContext = require('@khanacademy/keypad-context');
-var mathInput = require('@khanacademy/math-input');
 var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
+var mathInput = require('@khanacademy/math-input');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
@@ -63,7 +62,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
@@ -92,7 +91,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 = "11.6.0";
+const libVersion = "12.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -287,13 +286,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$T.button
+      style: styles$S.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$T = aphrodite.StyleSheet.create({
+const styles$S = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20674,11 +20673,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$S.grow, style]
+      style: [styles$R.grow, style]
     });
   }
 }
-const styles$S = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -20915,13 +20914,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
+  const iconStyle = props.isExpanded ? styles$Q.expanded : styles$Q.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$R = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20951,16 +20950,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.title,
+      style: styles$P.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$Q.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$Q.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20969,7 +20968,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$Q = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24046,7 +24045,7 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -24056,7 +24055,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$P = aphrodite.StyleSheet.create({
+const styles$O = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24483,64 +24482,6 @@ var i18n = {
   findImagesInItemData: findImagesInItemData
 };
 
-/**
- * The `ContentPreview` component provides a simple preview system for Perseus
- * Content. Due to how Persus styles are built, the preview styling matches the
- * current device based on the viewport width (using `@media` queries for
- * `min-width` and `max-width`).
- *
- * The preview will render the mobile variant (styling and layout) when the
- * `previewDevice` is phone or tablet. Note that the styling cannot be matched
- * 100% due to the above `@media` query limitation.
- */
-function ContentPreview(_ref) {
-  let {
-    question,
-    apiOptions,
-    seamless,
-    linterContext,
-    legacyPerseusLint,
-    previewDevice,
-    strings
-  } = _ref;
-  const isMobile = previewDevice !== "desktop";
-  const className = isMobile ? "perseus-mobile" : "";
-  return /*#__PURE__*/React.createElement(wonderBlocksCore.View, {
-    className: `framework-perseus ${className}`,
-    style: [styles$O.container, !seamless ? styles$O.gutter : undefined]
-  }, /*#__PURE__*/React.createElement(keypadContext.StatefulKeypadContextProvider, null, /*#__PURE__*/React.createElement(keypadContext.KeypadContext.Consumer, null, _ref2 => {
-    let {
-      setKeypadActive,
-      keypadElement,
-      setKeypadElement
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(perseus.Renderer, _extends({
-      strings: strings,
-      apiOptions: {
-        ...apiOptions,
-        isMobile
-      },
-      keypadElement: keypadElement,
-      linterContext: linterContext,
-      legacyPerseusLint: legacyPerseusLint
-    }, question)), /*#__PURE__*/React.createElement(mathInput.MobileKeypad, {
-      onAnalyticsEvent: () => Promise.resolve(),
-      onDismiss: () => setKeypadActive(false),
-      onElementMounted: setKeypadElement
-    }));
-  })));
-}
-const styles$O = aphrodite.StyleSheet.create({
-  container: {
-    padding: wonderBlocksTokens.spacing.xxxSmall_4,
-    containerType: "inline-size",
-    containerName: "perseus-root"
-  },
-  gutter: {
-    marginRight: perseus.constants.lintGutterWidth
-  }
-});
-
 var isObject = function (obj) {
   return obj === Object(obj);
 };
@@ -28613,13 +28554,13 @@ class InputNumberEditor extends React__namespace.Component {
  * it's just the input itself for use writing TeX.
  */
 function MathquillInput(props) {
-  const mathFieldWrapperRef = React$1.useRef(null);
-  const mathFieldInstance = React$1.useRef();
+  const mathFieldWrapperRef = React.useRef(null);
+  const mathFieldInstance = React.useRef();
   const {
     locale,
     strings
   } = mathInput.useMathInputI18n();
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     // If we have the mount for the input, but not the input
     // make a new Mathquill input
     if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
@@ -30638,8 +30579,8 @@ const LockedFunctionSettings = props => {
   // Tracking the string value of domain constraints to handle interim state of
   //     entering a negative value, as well as representing Infinity as an empty string.
   // This variable is used when specifying the values of the input fields.
-  const [domainEntries, setDomainEntries] = React$1.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
-  React$1.useEffect(() => {
+  const [domainEntries, setDomainEntries] = React.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  React.useEffect(() => {
     // "useEffect" used to maintain parity between domain constraints and their string representation.
     setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
   }, [domain]);
@@ -37220,7 +37161,6 @@ exports.AllEditors = AllEditors;
 exports.AllWidgets = AllWidgets;
 exports.ArticleDiff = ArticleDiff;
 exports.ArticleEditor = ArticleEditor;
-exports.ContentPreview = ContentPreview;
 exports.DeviceFramer = DeviceFramer;
 exports.Editor = Editor;
 exports.EditorPage = EditorPage;