@khanacademy/perseus-editor 31.1.0 → 31.2.0

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { default as Editor } from "./editor";
 export { default as IframeContentRenderer } from "./iframe-content-renderer";
 export { default as ContentPreview } from "./content-preview";
 export type { Issue } from "./components/issues-panel";
+export { usePreviewController } from "./preview/use-preview-controller";
+export { usePreviewPresenter } from "./preview/use-preview-presenter";
 import "./styles/perseus-editor.css";
 import { widgets } from "@khanacademy/perseus";
 import AllEditors from "./all-editors";

package/dist/index.js

@@ -36,10 +36,10 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var axeCore = require('axe-core');
 var keypadContext = require('@khanacademy/keypad-context');
 var mathInput = require('@khanacademy/math-input');
+var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var KAS = require('@khanacademy/kas');
-var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksLabeledField = require('@khanacademy/wonder-blocks-labeled-field');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var trashIcon$1 = require('@phosphor-icons/core/regular/trash.svg');
@@ -132,7 +132,7 @@ var xIcon__default = /*#__PURE__*/_interopDefaultCompat(xIcon);
 var checkIcon__default = /*#__PURE__*/_interopDefaultCompat(checkIcon);
 var minusCircleIcon__default = /*#__PURE__*/_interopDefaultCompat(minusCircleIcon);
 
-const libName="@khanacademy/perseus-editor";const libVersion="31.1.0";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="31.2.0";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1576,6 +1576,18 @@ const{HUD}=perseus.components;class EditorPage extends React__namespace.Componen
 
 function ContentPreview({question,apiOptions,seamless,linterContext,legacyPerseusLint,previewDevice,reviewMode}){const i18n=perseus.usePerseusI18n();const isMobile=previewDevice!=="desktop";const className=isMobile?"perseus-mobile":"";return jsxRuntimeExports.jsx(wonderBlocksCore.View,{className:`framework-perseus ${className}`,style:[styles$N.container,!seamless?styles$N.gutter:undefined],children:jsxRuntimeExports.jsx(keypadContext.StatefulKeypadContextProvider,{children:jsxRuntimeExports.jsx(keypadContext.KeypadContext.Consumer,{children:({setKeypadActive,keypadElement,setKeypadElement})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(perseus.UserInputManager,{widgets:question?.widgets||{},problemNum:0,children:({userInput,handleUserInput,initializeUserInput})=>jsxRuntimeExports.jsx(perseus.Renderer,{strings:i18n.strings,apiOptions:{...apiOptions,isMobile},keypadElement:keypadElement,linterContext:linterContext,legacyPerseusLint:legacyPerseusLint,userInput:userInput,handleUserInput:handleUserInput,initializeUserInput:initializeUserInput,reviewMode:reviewMode,...question})}),jsxRuntimeExports.jsx(mathInput.MobileKeypad,{onAnalyticsEvent:()=>Promise.resolve(),onDismiss:()=>setKeypadActive(false),onElementMounted:setKeypadElement})]})})})})}const styles$N=aphrodite.StyleSheet.create({container:{padding:wonderBlocksTokens.spacing.xxxSmall_4,containerType:"inline-size",containerName:"perseus-root"},gutter:{marginRight:lintGutterWidth}});
 
+const PREVIEW_MESSAGE_SOURCE="perseus-preview";function createPreviewIframeReadyMessage(){return {source:PREVIEW_MESSAGE_SOURCE,type:"iframe-ready"}}
+
+function isIframeToParentMessage(message){return typeof message==="object"&&message!==null&&"source"in message&&typeof message.source==="string"&&message.source===PREVIEW_MESSAGE_SOURCE}function isParentToIframeMessage(message){return typeof message==="object"&&message!==null&&"source"in message&&typeof message.source==="string"&&message.source===PREVIEW_MESSAGE_SOURCE}
+
+function sanitizeApiOptions(apiOptions){if(apiOptions==null){return null}const{onFocusChange:_,answerableCallback:__,getAnotherHint:___,interactionCallback:____,imagePreloader:_____,trackInteraction:______,setDrawingAreaAvailable:________,baseElements:_________,nativeKeypadProxy:__________,imagePlaceholder:___________,widgetPlaceholder:____________,...serializableOptions}=apiOptions;return serializableOptions}
+
+function sanitizePreviewData(content){if((content.type==="question"||content.type==="hint"||content.type==="article")&&content.data.apiOptions!=null){return {...content,data:{...content.data,apiOptions:sanitizeApiOptions(content.data.apiOptions)}}}if(content.type==="article-all"){return {...content,data:content.data.map(section=>section.apiOptions!=null?{...section,apiOptions:sanitizeApiOptions(section.apiOptions)}:section)}}return content}
+
+function usePreviewController(iframeRef){const[height,setHeight]=React__namespace.useState(null);const[isIframeReady,setIsIframeReady]=React__namespace.useState(false);const pendingDataRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{const handleMessage=event=>{if(iframeRef.current?.contentWindow==null||event.source!==iframeRef.current?.contentWindow){return}const message=event.data;if(!isIframeToParentMessage(message)){return}switch(message.type){case "iframe-ready":{if(pendingDataRef.current){const sanitizedData=sanitizePreviewData(pendingDataRef.current);const msg={source:PREVIEW_MESSAGE_SOURCE,type:"content-data",content:sanitizedData};iframeRef.current.contentWindow.postMessage(msg,"/");pendingDataRef.current=null;}setIsIframeReady(true);break}case "height-update":setHeight(message.height);break;default:throw new wonderStuffCore.UnreachableCaseError(message)}};window.addEventListener("message",handleMessage);return ()=>{window.removeEventListener("message",handleMessage);}},[iframeRef]);const sendData=React__namespace.useCallback(data=>{if(!isIframeReady){pendingDataRef.current=data;return}const contentWindow=iframeRef.current?.contentWindow;if(!contentWindow){return}const sanitizedData=sanitizePreviewData(data);const message={source:PREVIEW_MESSAGE_SOURCE,type:"content-data",content:sanitizedData};contentWindow.postMessage(message,"/");},[iframeRef,isIframeReady]);return {sendData,height}}
+
+function usePreviewPresenter(){const[data,setData]=React__namespace.useState(null);const iframe=window.frameElement;if(iframe==null){throw new Error("usePreviewPresenter must be used within an iframe")}React__namespace.useEffect(()=>{const handleMessage=event=>{if(event.source!==window.parent){return}const message=event.data;if(!isParentToIframeMessage(message)){return}switch(message.type){case "content-data":setData(message.content);break;default:throw new wonderStuffCore.UnreachableCaseError(message.type)}};window.addEventListener("message",handleMessage);window.parent.postMessage(createPreviewIframeReadyMessage(),"/");return ()=>{window.removeEventListener("message",handleMessage);}},[]);const reportHeight=React__namespace.useCallback(height=>{if(window.parent==null){return}const message={source:PREVIEW_MESSAGE_SOURCE,type:"height-update",height};window.parent.postMessage(message,"/");},[]);return {data,isMobile:iframe.dataset.mobile==="true",hasLintGutter:iframe.dataset.lintGutter==="true",reportHeight}}
+
 const{TextListEditor: TextListEditor$4}=perseus.components;const Categorizer=perseus.Categorizer.widget;class CategorizerEditor extends React__namespace.Component{render(){const categorizerProps={items:this.props.items,categories:this.props.categories,userInput:{values:this.props.values},handleUserInput:userInput=>{this.props.onChange({values:userInput.values});},apiOptions:this.props.apiOptions,trackInteraction:function(){}};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Randomize item order",checked:this.props.randomizeItems,onChange:value=>{this.props.onChange({randomizeItems:value});}})}),"Categories:",jsxRuntimeExports.jsx(TextListEditor$4,{options:this.props.categories,onChange:cat=>{this.change("categories",cat);},layout:"horizontal"}),"Items:",jsxRuntimeExports.jsx(TextListEditor$4,{options:this.props.items,onChange:items=>{this.change({items:items,values:___default.default.first(this.props.values,items.length)});},layout:"vertical"}),jsxRuntimeExports.jsx(Categorizer,{...categorizerProps})]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}CategorizerEditor.propTypes={...perseus.Changeable.propTypes,apiOptions:perseus.ApiOptions.propTypes,items:PropTypes__default.default.arrayOf(PropTypes__default.default.string),categories:PropTypes__default.default.arrayOf(PropTypes__default.default.string),values:PropTypes__default.default.arrayOf(PropTypes__default.default.number),randomizeItems:PropTypes__default.default.bool};CategorizerEditor.widgetName="categorizer";CategorizerEditor.defaultProps=perseusCore.categorizerLogic.defaultWidgetOptions;
 
 class BlurInput extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({value:nextProps.value});}focus(){this.input.current?.focus();}render(){return jsxRuntimeExports.jsx("input",{ref:this.input,className:this.props.className,style:this.props.style,type:"text",value:this.state.value,onChange:this.handleChange,onBlur:this.handleBlur})}constructor(props){super(props),this.input=React__namespace.createRef(),this.handleChange=e=>{this.setState({value:e.target.value});},this.handleBlur=e=>{this.props.onChange(e.target.value);};this.state={value:this.props.value};}}
@@ -1671,7 +1683,7 @@ const UNLIMITED="unlimited";const parsePointCount=points=>{const parsed=parseInt
 
 const GraphPointsCountSelector=({correct,graph,onChange})=>{return jsxRuntimeExports.jsx(LabeledRow,{label:"Number of Points:",children:jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:`${correct.numPoints??1}`,onChange:newValue=>{const points=parsePointCount(newValue);onChange({correct:{type:"point",numPoints:points},graph:{type:"point",numPoints:points}});},placeholder:"",className:styles$G.singleSelectShort,children:[...[...Array(7).keys()].map(n=>jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:`${n}`,label:`${n} point${n>1?"s":""}`},n)),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:UNLIMITED,label:"unlimited"},"unlimited")]})})};
 
-const GraphTypeSelector=props=>{const showExponential=perseusCore.isFeatureOn({apiOptions:props.apiOptions},"interactive-graph-exponent");const showAbsoluteValue=perseusCore.isFeatureOn({apiOptions:props.apiOptions},"interactive-graph-absolute-value");const showTangent=perseusCore.isFeatureOn({apiOptions:props.apiOptions},"interactive-graph-tangent");const showLogarithm=perseusCore.isFeatureOn({apiOptions:props.apiOptions},"interactive-graph-logarithm");const showVector=perseusCore.isFeatureOn({apiOptions:props.apiOptions},"interactive-graph-vector");return jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:props.graphType,onChange:props.onChange,placeholder:"Select an answer type",style:styles$E.singleSelectShort,children:[showAbsoluteValue&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"absolute-value",label:"Absolute value"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"none",label:"None"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"linear",label:"Linear function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"quadratic",label:"Quadratic function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"sinusoid",label:"Sinusoid function"}),showExponential&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exponential",label:"Exponential function"}),showTangent&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"tangent",label:"Tangent function"}),showLogarithm&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"logarithm",label:"Logarithm function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"circle",label:"Circle"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"point",label:"Point(s)"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"linear-system",label:"Linear System"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"polygon",label:"Polygon"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"segment",label:"Line Segment(s)"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"ray",label:"Ray"}),showVector&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"vector",label:"Vector"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"angle",label:"Angle"})]})};const styles$E=aphrodite.StyleSheet.create({singleSelectShort:{height:wonderBlocksTokens.sizing.size_260}});
+const GraphTypeSelector=props=>{const showVector=perseusCore.isFeatureOn({apiOptions:props.apiOptions},"interactive-graph-vector");return jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:props.graphType,onChange:props.onChange,placeholder:"Select an answer type",style:styles$E.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"absolute-value",label:"Absolute value"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"none",label:"None"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"linear",label:"Linear function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"quadratic",label:"Quadratic function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"sinusoid",label:"Sinusoid function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exponential",label:"Exponential function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"tangent",label:"Tangent function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"logarithm",label:"Logarithm function"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"circle",label:"Circle"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"point",label:"Point(s)"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"linear-system",label:"Linear System"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"polygon",label:"Polygon"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"segment",label:"Line Segment(s)"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"ray",label:"Ray"}),showVector&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"vector",label:"Vector"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"angle",label:"Angle"})]})};const styles$E=aphrodite.StyleSheet.create({singleSelectShort:{height:wonderBlocksTokens.sizing.size_260}});
 
 function Heading({title,isOpen,isCollapsible,onToggle}){return jsxRuntimeExports.jsx(Clickable__default.default,{style:[styles$D.container,!isCollapsible&&styles$D.notClickable],disabled:!isCollapsible,onClick:()=>isCollapsible&&onToggle?.(!isOpen),children:()=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$D.heading,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.BodyText,{size:"small",weight:"bold",tag:"span",children:title}),isCollapsible&&jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:isOpen})]})})}const styles$D=aphrodite.StyleSheet.create({container:{marginTop:wonderBlocksTokens.spacing.small_12,marginInline:-10,backgroundColor:wonderBlocksTokens.semanticColor.core.background.neutral.subtle,padding:wonderBlocksTokens.spacing.xSmall_8,width:"calc(100% + 20px)"},heading:{flexDirection:"row",justifyContent:"space-between",userSelect:"none"},notClickable:{color:"inherit",cursor:"default"}});
 
@@ -1869,4 +1881,6 @@ exports.IframeContentRenderer = IframeContentRenderer;
 exports.ItemDiff = ItemDiff;
 exports.ViewportResizer = ViewportResizer;
 exports.libVersion = libVersion;
+exports.usePreviewController = usePreviewController;
+exports.usePreviewPresenter = usePreviewPresenter;
 //# sourceMappingURL=index.js.map