@khanacademy/perseus-editor 34.2.0 → 34.2.1

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { default as EditorPage } from "./editor-page";
 export { default as Editor } from "./editor";
 export { default as IframeContentRenderer } from "./iframe-content-renderer";
 export { default as ContentPreview } from "./content-preview";
+export { default as IssuesPanel } from "./components/issues-panel";
 export type { Issue } from "./components/issues-panel";
 export { usePreviewController } from "./preview/use-preview-controller";
 export { usePreviewPresenter } from "./preview/use-preview-presenter";

package/dist/index.js

@@ -128,7 +128,7 @@ var minusCircle__default = /*#__PURE__*/_interopDefaultCompat(minusCircle);
 var checkIcon__default = /*#__PURE__*/_interopDefaultCompat(checkIcon);
 var minusCircleIcon__default = /*#__PURE__*/_interopDefaultCompat(minusCircleIcon);
 
-const libName="@khanacademy/perseus-editor";const libVersion="34.2.0";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="34.2.1";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1562,13 +1562,15 @@ const{InfoTip: InfoTip$o,InlineIcon: InlineIcon$2}=perseus.components;class Hint
 
 const calculatorVariants=[{label:"Scientific calculator",tip:"Provides the student with a scientific calculator.",variant:"scientific"},{label:"Graphing calculator",tip:"Provides the student with a graphing calculator.",variant:"graphing"},{label:"Four-function calculator",tip:"Provides the student with a four-function calculator.",variant:"four_function"}];const{InfoTip: InfoTip$n}=perseus.components;class ItemExtrasEditor extends React__namespace.Component{shouldShowCalculatorVariants(){return this.props.calculatorVariant!==undefined}shouldShowFinancialCalculatorOptions(){return this.props.financialCalculatorMonthlyPayment||this.props.financialCalculatorTotalAmount||this.props.financialCalculatorTimeToPayOff}serialize(){const data={...ItemExtrasEditor.defaultProps};for(const key of perseusCore.ItemExtras){data[key]=!!this.props[key];}data.calculatorVariant=this.props.calculatorVariant;return data}render(){const{editingDisabled}=this.props;return jsxRuntimeExports.jsx("div",{className:"perseus-answer-editor",children:jsxRuntimeExports.jsxs("div",{className:"perseus-answer-options",children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show calculator",disabled:editingDisabled,infoTip:"Use the calculator when completing difficult calculations is NOT the intent of the question. DON’T use the calculator when testing the student’s ability to complete different types of computations.",checked:this.shouldShowCalculatorVariants(),onChange:newCheckedState=>{this.props.onChange({calculator:newCheckedState,calculatorVariant:newCheckedState?"scientific":undefined});}}),perseusCore.isFeatureOn(this.props,"desmos-calculator")&&this.shouldShowCalculatorVariants()&&calculatorVariants.map(calcVariant=>jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:calcVariant.label,disabled:editingDisabled,infoTip:calcVariant.tip,checked:this.props.calculatorVariant===calcVariant.variant,onChange:()=>{this.props.onChange({calculatorVariant:calcVariant.variant});},indent:true},calcVariant.variant)),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show financial calculator",disabled:editingDisabled,infoTip:"This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",checked:this.shouldShowFinancialCalculatorOptions(),onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState,financialCalculatorTotalAmount:newCheckedState,financialCalculatorTimeToPayOff:newCheckedState});}}),this.shouldShowFinancialCalculatorOptions()&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include monthly payment",disabled:editingDisabled,infoTip:"This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",checked:this.props.financialCalculatorMonthlyPayment,onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include total amount",disabled:editingDisabled,infoTip:"This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",checked:this.props.financialCalculatorTotalAmount,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTotalAmount:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include time-to-pay-off",disabled:editingDisabled,infoTip:"This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",checked:this.props.financialCalculatorTimeToPayOff,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTimeToPayOff:newCheckedState});},indent:true})]}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show periodic table",disabled:editingDisabled,infoTip:"This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",checked:this.props.periodicTable,onChange:newCheckedState=>{this.props.onChange({periodicTable:newCheckedState,periodicTableWithKey:false});}}),this.props.periodicTable&&jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include key/legend with periodic table",disabled:editingDisabled,infoTip:"Include a key for HS courses; omit for AP chemistry.",checked:this.props.periodicTableWithKey,onChange:newCheckedState=>{this.props.onChange({periodicTableWithKey:newCheckedState});},indent:true})]})})}}ItemExtrasEditor.defaultProps=perseusCore.getDefaultAnswerArea();const ItemExtraCheckbox=props=>jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:[styles$O.checkbox,props.indent?styles$O.indented:undefined],children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{disabled:props.disabled,label:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[props.label," ",jsxRuntimeExports.jsx(InfoTip$n,{children:props.infoTip})]}),checked:props.checked,onChange:newCheckedState=>props.onChange(newCheckedState)})});const styles$O=aphrodite.StyleSheet.create({indented:{marginInlineStart:wonderBlocksTokens.spacing.large_24}});
 
+class ItemEditor extends React__namespace.Component{serialize(){invariant__default.default(this.questionEditor.current,"cannot serialize ItemEditor without Editor");invariant__default.default(this.itemExtrasEditor.current,"cannot serialize ItemEditor without ItemExtrasEditor");return {question:this.questionEditor.current.serialize(),answerArea:this.itemExtrasEditor.current.serialize()}}render(){const isMobile=this.props.deviceType==="phone"||this.props.deviceType==="tablet";const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsx(ItemEditorContext.Provider,{value:{question:this.props.question,onEditorChange:this.handleEditorChange},children:jsxRuntimeExports.jsxs("div",{className:"perseus-editor-table",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row perseus-question-container",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Question"}),jsxRuntimeExports.jsx("fieldset",{disabled:editingDisabled,children:jsxRuntimeExports.jsx(Editor,{ref:this.questionEditor,placeholder:"Type your question here...",className:"perseus-question-editor",imageUploader:this.props.imageUploader,onChange:this.handleEditorChange,apiOptions:this.props.apiOptions,showWordCount:true,widgetIsOpen:this.props.widgetIsOpen,additionalTemplates:this.props.additionalTemplates,...this.props.question},this.props.itemId)})]}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell",children:jsxRuntimeExports.jsx("div",{id:"problemarea",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.deviceType,nochrome:true,children:jsxRuntimeExports.jsx(IframeContentRenderer,{ref:this.frame,datasetKey:"mobile",datasetValue:isMobile,seamless:true,url:this.props.previewURL},this.props.deviceType)})})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row perseus-answer-container",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Question extras"}),jsxRuntimeExports.jsx(ItemExtrasEditor,{ref:this.itemExtrasEditor,apiOptions:this.props.apiOptions,onChange:this.handleItemExtrasChange,editingDisabled:editingDisabled,...this.props.answerArea})]}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell"})]})]})})}constructor(...args){super(...args),this.frame=React__namespace.createRef(),this.questionEditor=React__namespace.createRef(),this.itemExtrasEditor=React__namespace.createRef(),this.updateProps=newProps=>{const props=___default.default(this.props).pick("question","answerArea");this.props.onChange(___default.default(props).extend(newProps));},this.triggerPreviewUpdate=newData=>{this.frame.current?.sendNewData(newData);},this.handleEditorChange=newProps=>{const question=___default.default.extend({},this.props.question,newProps);this.updateProps({question});},this.handleItemExtrasChange=newProps=>{const answerArea=___default.default.extend({},this.props.answerArea,newProps);this.updateProps({answerArea});},this.getSaveWarnings=()=>{return this.questionEditor.current?.getSaveWarnings()};}}ItemEditor.defaultProps={onChange:()=>{},question:{},answerArea:{}};
+
 var issuesList = {"axe-core":{"user-fixable":["aria-input-field-name","aria-meter-name","aria-toggle-field-name","image-alt","input-image-alt","label","link-name","list","role-img-alt","select-name","summary-name","svg-img-alt","video-caption"]}};
 
 const assistanceNeededMessage="Developer assistance needed - Please send this exercise and warning info to the LEMS team for review.";const previewIframeSelector='.perseus-question-container iframe[data-name="content-preview"]';const axeCoreEditorOptions={include:"#page-container",exclude:'[target="lint-help-window"]'};const axeCoreStorybookOptions={include:{fromFrames:['iframe[data-name="content-preview"]',"#storybook-root > .framework-perseus"]},exclude:{fromFrames:['iframe[data-name="content-preview"]','[target="lint-help-window"]']}};const convertAxeImpactToIssueImpact=impact=>{switch(impact){case "critical":return "high";case "serious":return "high";case "moderate":return "medium";case "minor":return "low";default:return "low"}};const getIssueMessage=nodes=>{return nodes.flatMap(node=>{return node.all.concat(node.any,node.none).map(result=>result.message)}).filter((message,index,allMessages)=>allMessages.indexOf(message)===index).join(". ")};const getIssueElements=(nodes,iFrameElement)=>{return nodes.flatMap(node=>{return node.target.reduce((elements,target)=>{let element=null;if(elements.length>0&&elements[elements.length-1].tagName.toLowerCase()==="iframe"){elements[elements.length-1]=elements[elements.length-1].contentDocument.querySelector(target);}else if(iFrameElement){element=iFrameElement.contentDocument?.querySelector(target)||null;}else {element=document.querySelector(target);}if(element){elements.push(element);}return elements},[])})};const mapResultsToIssues=(results,type,iFrameElement)=>{return results.map(result=>{const isUserFixable=type==="Alert"&&issuesList["axe-core"]["user-fixable"].some(testId=>testId===result.id);const description=isUserFixable?"":assistanceNeededMessage;const issueInfo={id:result.id,description:description,elements:getIssueElements(result.nodes,iFrameElement),helpUrl:result.helpUrl,help:result.help,impact:convertAxeImpactToIssueImpact(result.impact),message:getIssueMessage(result.nodes),type:type};return issueInfo})};const runAxeCore=(updateIssuesFn,logToConsole=false)=>{const isInStorybook=!!document.getElementById("storybook-root");if(!isInStorybook){let frameHasLoaded=false;const frame=document.querySelector(previewIframeSelector);if(frame){const frameDocument=frame.contentDocument||frame.contentWindow?.document;frameHasLoaded=frameDocument?.readyState==="complete";}if(!frameHasLoaded){setTimeout(runAxeCore,100,updateIssuesFn);return}}const log=(...args)=>{if(logToConsole){console.log(...args);}};const options=isInStorybook?axeCoreStorybookOptions:axeCoreEditorOptions;log("Axe Core options: ",options);const previewWindow=document.querySelector(previewIframeSelector);const axeCoreProper=isInStorybook?axeCore__namespace:previewWindow?.contentWindow?.axe;axeCoreProper.configure({reporter:"v2"});axeCoreProper.run(options).then(results=>{log(`Accessibility Results: `,results);const violations=mapResultsToIssues(results.violations,"Alert",isInStorybook?null:previewWindow);const incompletes=mapResultsToIssues(results.incomplete,"Warning",isInStorybook?null:previewWindow);const issues=violations.concat(incompletes);log(`  Issues: `,issues);if(violations.length===0&&incompletes.length===0&&results.passes.length===0){setTimeout(runAxeCore,1500,updateIssuesFn,logToConsole);}else {updateIssuesFn(issues);}},error=>{log(`*** Error: `,error);});};const runAxeCoreOnUpdate=(priorTimeoutId,setState,logToConsole)=>{clearTimeout(priorTimeoutId);return setTimeout(runAxeCore,1500,setState,logToConsole)};
 
-class ItemEditor extends React__namespace.Component{componentDidUpdate(prevProps){if(this.props.question?.content===prevProps.question?.content&&this.props.question?.widgets===prevProps.question?.widgets){return}const parsed=perseus.PerseusMarkdown.parse(this.props.question?.content??"",{});const linterContext={content:this.props.question?.content,widgets:this.props.question?.widgets,stack:[]};const texErrors=detectTexErrors(this.props.question?.content??"");const texIssues=texErrors.map((error,index)=>WARNINGS.texError(error.math,error.message,index));this.a11yCheckerTimeoutId=runAxeCoreOnUpdate(this.a11yCheckerTimeoutId,issues=>{this.setState({axeCoreIssues:issues});},this.state.showAxeCoreIssues);const gatherIssues=()=>{return [...this.props.issues??[],...PerseusLinter__namespace.runLinter(parsed,linterContext,false)?.map(linterWarning=>{if(linterWarning.rule==="inaccessible-widget"){return WARNINGS.inaccessibleWidget(linterWarning.metadata?.widgetType??"unknown",linterWarning.metadata?.widgetId??"unknown")}return WARNINGS.genericLinterWarning(linterWarning.rule,linterWarning.message,linterWarning.severity)})??[],...texIssues]};this.setState({issues:gatherIssues()});}serialize(){invariant__default.default(this.questionEditor.current,"cannot serialize ItemEditor without Editor");invariant__default.default(this.itemExtrasEditor.current,"cannot serialize ItemEditor without ItemExtrasEditor");return {question:this.questionEditor.current.serialize(),answerArea:this.itemExtrasEditor.current.serialize()}}render(){const isMobile=this.props.deviceType==="phone"||this.props.deviceType==="tablet";const editingDisabled=this.props.apiOptions?.editingDisabled??false;const allIssues=this.state.issues.concat(this.state.showAxeCoreIssues?this.state.axeCoreIssues:[]);const a11yCheck={callback:()=>{this.setState({showAxeCoreIssues:!this.state.showAxeCoreIssues});},isChecked:this.state.showAxeCoreIssues};return jsxRuntimeExports.jsx(ItemEditorContext.Provider,{value:{question:this.props.question,onEditorChange:this.handleEditorChange},children:jsxRuntimeExports.jsxs("div",{className:"perseus-editor-table",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row perseus-question-container",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[jsxRuntimeExports.jsx(IssuesPanel,{issues:allIssues,a11yCheck:a11yCheck}),jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Question"}),jsxRuntimeExports.jsx("fieldset",{disabled:editingDisabled,children:jsxRuntimeExports.jsx(Editor,{ref:this.questionEditor,placeholder:"Type your question here...",className:"perseus-question-editor",imageUploader:this.props.imageUploader,onChange:this.handleEditorChange,apiOptions:this.props.apiOptions,showWordCount:true,widgetIsOpen:this.props.widgetIsOpen,additionalTemplates:this.props.additionalTemplates,...this.props.question},this.props.itemId)})]}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell",children:jsxRuntimeExports.jsx("div",{id:"problemarea",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.deviceType,nochrome:true,children:jsxRuntimeExports.jsx(IframeContentRenderer,{ref:this.frame,datasetKey:"mobile",datasetValue:isMobile,seamless:true,url:this.props.previewURL},this.props.deviceType)})})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row perseus-answer-container",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Question extras"}),jsxRuntimeExports.jsx(ItemExtrasEditor,{ref:this.itemExtrasEditor,apiOptions:this.props.apiOptions,onChange:this.handleItemExtrasChange,editingDisabled:editingDisabled,...this.props.answerArea})]}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell"})]})]})})}constructor(...args){super(...args),this.frame=React__namespace.createRef(),this.questionEditor=React__namespace.createRef(),this.itemExtrasEditor=React__namespace.createRef(),this.state={issues:[],axeCoreIssues:[],showAxeCoreIssues:false},this.updateProps=newProps=>{const props=___default.default(this.props).pick("question","answerArea");this.props.onChange(___default.default(props).extend(newProps));},this.triggerPreviewUpdate=newData=>{this.frame.current?.sendNewData(newData);},this.handleEditorChange=newProps=>{const question=___default.default.extend({},this.props.question,newProps);this.updateProps({question});},this.handleItemExtrasChange=newProps=>{const answerArea=___default.default.extend({},this.props.answerArea,newProps);this.updateProps({answerArea});},this.getSaveWarnings=()=>{return this.questionEditor.current?.getSaveWarnings()};}}ItemEditor.defaultProps={onChange:()=>{},question:{},answerArea:{}};
+function lintRenderer(content,widgets){const parsed=perseus.PerseusMarkdown.parse(content,{});const linterContext={content,widgets,stack:[]};const linterIssues=(PerseusLinter__namespace.runLinter(parsed,linterContext,false)??[]).map(warning=>{if(warning.rule==="inaccessible-widget"){return WARNINGS.inaccessibleWidget(warning.metadata?.widgetType??"unknown",warning.metadata?.widgetId??"unknown")}return WARNINGS.genericLinterWarning(warning.rule,warning.message,warning.severity)});const texIssues=detectTexErrors(content).map((error,i)=>WARNINGS.texError(error.math,error.message,i));return [...linterIssues,...texIssues]}function gatherLinterIssues(question,hints,hostIssues){const questionIssues=lintRenderer(question?.content??"",question?.widgets);const hintIssues=hints.flatMap((hint,i)=>lintRenderer(hint.content??"",hint.widgets??undefined).map(issue=>({...issue,id:`hint-${i+1}-${issue.id}`,message:`Hint ${i+1}: ${issue.message}`})));return [...hostIssues??[],...questionIssues,...hintIssues]}
 
-const{HUD}=perseus.components;class EditorPage extends React__namespace.Component{componentDidMount(){this._isMounted=true;this.updateRenderer();}getSnapshotBeforeUpdate(prevProps,prevState){if(!prevProps.jsonMode&&this.props.jsonMode){return {...this.itemEditor.current?.serialize()??{},hints:this.hintsEditor.current?.serialize()}}return null}componentDidUpdate(previousProps,prevState,snapshot){setTimeout(()=>{this.updateRenderer();});if(snapshot){this.setState({json:snapshot});return}if(!___default.default.isEqual(previousProps.question,this.props.question)||!___default.default.isEqual(previousProps.answerArea,this.props.answerArea)||!___default.default.isEqual(previousProps.hints,this.props.hints)){this.syncJsonStateFromProps();}}componentWillUnmount(){this._isMounted=false;}syncJsonStateFromProps(){this.setState({json:{question:this.props.question,answerArea:this.props.answerArea,hints:this.props.hints}});}updateRenderer(){const hasEditor=!this.props.developerMode||!this.props.jsonMode;if(!this._isMounted||!hasEditor){return}const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};this.itemEditor.current?.triggerPreviewUpdate({type:"question",data:___default.default({item:this.serialize(),apiOptions:deviceBasedApiOptions,initialHintsVisible:0,device:this.props.previewDevice,linterContext:{contentType:"exercise",highlightLint:this.state.highlightLint},reviewMode:true,legacyPerseusLint:this.itemEditor.current?.getSaveWarnings()}).extend(___default.default(this.props).pick("problemNum"))});}getApiOptions(){return {...perseus.ApiOptions.defaults,...this.props.apiOptions}}getSaveWarnings(){const issues1=this.itemEditor.current?.getSaveWarnings();const issues2=this.hintsEditor.current?.getSaveWarnings();return issues1.concat(issues2)}serialize(){if(this.props.jsonMode){return this.state.json}invariant__default.default(this.itemEditor.current,"cannot serialize EditorPage without ItemEditor");invariant__default.default(this.hintsEditor.current,"cannot serialize EditorPage without HintsEditor");return {...this.itemEditor.current.serialize(),hints:this.hintsEditor.current.serialize()}}render(){let className="framework-perseus";const editingDisabled=this.props.apiOptions?.editingDisabled??false;const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};if(deviceBasedApiOptions.isMobile){className+=" "+perseus.ClassNames.MOBILE;}return jsxRuntimeExports.jsx(perseus.Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsxs("div",{id:"perseus",className:className,children:[jsxRuntimeExports.jsxs("div",{style:{marginBottom:10},children:[this.props.developerMode&&jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Developer JSON Mode:"," ",jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.jsonMode,disabled:this.props.apiOptions?.editingDisabled,onChange:this.toggleJsonMode})]})," "]}),!this.props.jsonMode&&jsxRuntimeExports.jsx(ViewportResizer,{deviceType:this.props.previewDevice,onViewportSizeChanged:this.props.onPreviewDeviceChange}),!this.props.jsonMode&&jsxRuntimeExports.jsx(HUD,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})]}),this.props.developerMode&&this.props.jsonMode&&jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(JsonEditor,{multiLine:true,value:this.state.json,parser:perseusCore.parseAndMigratePerseusItem,onChange:this.changeJSON,editingDisabled:editingDisabled})}),(!this.props.developerMode||!this.props.jsonMode)&&jsxRuntimeExports.jsx(ItemEditor,{ref:this.itemEditor,itemId:this.props.itemId,question:this.props.question,answerArea:this.props.answerArea,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,widgetIsOpen:this.state.widgetsAreOpen,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,issues:this.props.issues,additionalTemplates:this.props.additionalTemplates}),(!this.props.developerMode||!this.props.jsonMode)&&jsxRuntimeExports.jsx(CombinedHintsEditor,{ref:this.hintsEditor,itemId:this.props.itemId,hints:this.props.hints,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,highlightLint:this.state.highlightLint,widgetIsOpen:this.state.widgetsAreOpen})]})})}constructor(props){super(props),this.itemEditor=React__namespace.createRef(),this.hintsEditor=React__namespace.createRef(),this.toggleJsonMode=()=>{this.setState({json:this.serialize()},()=>{this.props.onChange({jsonMode:!this.props.jsonMode});});},this.handleChange=toChange=>{const newProps=___default.default(this.props).pick("question","hints","answerArea");___default.default(newProps).extend(toChange);this.props.onChange(newProps);},this.changeJSON=newJson=>{this.setState({json:newJson});this.props.onChange(newJson);};this.state={json:___default.default.pick(this.props,"question","answerArea","hints"),highlightLint:true,widgetsAreOpen:this.props.widgetsAreOpen??true};this._isMounted=false;}}EditorPage.defaultProps={answerArea:perseusCore.getDefaultAnswerArea(),developerMode:false,hints:[],jsonMode:false,onChange:()=>{}};
+const{HUD}=perseus.components;class EditorPage extends React__namespace.Component{componentDidMount(){this._isMounted=true;this.updateRenderer();this.setState({issues:gatherLinterIssues(this.props.question,this.props.hints,this.props.issues)});}getSnapshotBeforeUpdate(prevProps,prevState){if(!prevProps.jsonMode&&this.props.jsonMode){return {...this.itemEditor.current?.serialize()??{},hints:this.hintsEditor.current?.serialize()}}return null}componentDidUpdate(previousProps,prevState,snapshot){setTimeout(()=>{this.updateRenderer();});if(snapshot){this.setState({json:snapshot});return}if(!___default.default.isEqual(previousProps.question,this.props.question)||!___default.default.isEqual(previousProps.answerArea,this.props.answerArea)||!___default.default.isEqual(previousProps.hints,this.props.hints)){this.syncJsonStateFromProps();}const questionOrHintsChanged=previousProps.question?.content!==this.props.question?.content||previousProps.question?.widgets!==this.props.question?.widgets||!___default.default.isEqual(previousProps.hints,this.props.hints);if(questionOrHintsChanged){this.setState({issues:gatherLinterIssues(this.props.question,this.props.hints,this.props.issues)});this.a11yCheckerTimeoutId=runAxeCoreOnUpdate(this.a11yCheckerTimeoutId,axeCoreIssues=>this.setState({axeCoreIssues}),this.state.showAxeCoreIssues);}}componentWillUnmount(){this._isMounted=false;clearTimeout(this.a11yCheckerTimeoutId);}syncJsonStateFromProps(){this.setState({json:{question:this.props.question,answerArea:this.props.answerArea,hints:this.props.hints}});}updateRenderer(){const hasEditor=!this.props.developerMode||!this.props.jsonMode;if(!this._isMounted||!hasEditor){return}const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};this.itemEditor.current?.triggerPreviewUpdate({type:"question",data:___default.default({item:this.serialize(),apiOptions:deviceBasedApiOptions,initialHintsVisible:0,device:this.props.previewDevice,linterContext:{contentType:"exercise",highlightLint:this.state.highlightLint},reviewMode:true,legacyPerseusLint:this.itemEditor.current?.getSaveWarnings()}).extend(___default.default(this.props).pick("problemNum"))});}getApiOptions(){return {...perseus.ApiOptions.defaults,...this.props.apiOptions}}getSaveWarnings(){const issues1=this.itemEditor.current?.getSaveWarnings();const issues2=this.hintsEditor.current?.getSaveWarnings();return issues1.concat(issues2)}serialize(){if(this.props.jsonMode){return this.state.json}invariant__default.default(this.itemEditor.current,"cannot serialize EditorPage without ItemEditor");invariant__default.default(this.hintsEditor.current,"cannot serialize EditorPage without HintsEditor");return {...this.itemEditor.current.serialize(),hints:this.hintsEditor.current.serialize()}}render(){let className="framework-perseus";const editingDisabled=this.props.apiOptions?.editingDisabled??false;const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};const showEditor=!this.props.developerMode||!this.props.jsonMode;if(deviceBasedApiOptions.isMobile){className+=" "+perseus.ClassNames.MOBILE;}return jsxRuntimeExports.jsx(perseus.Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsxs("div",{id:"perseus",className:className,children:[jsxRuntimeExports.jsxs("div",{style:{marginBottom:10},children:[this.props.developerMode&&jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Developer JSON Mode:"," ",jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.jsonMode,disabled:this.props.apiOptions?.editingDisabled,onChange:this.toggleJsonMode})]})," "]}),!this.props.jsonMode&&jsxRuntimeExports.jsx(ViewportResizer,{deviceType:this.props.previewDevice,onViewportSizeChanged:this.props.onPreviewDeviceChange}),!this.props.jsonMode&&jsxRuntimeExports.jsx(HUD,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})]}),this.props.developerMode&&this.props.jsonMode&&jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(JsonEditor,{multiLine:true,value:this.state.json,parser:perseusCore.parseAndMigratePerseusItem,onChange:this.changeJSON,editingDisabled:editingDisabled})}),showEditor&&jsxRuntimeExports.jsx("div",{className:"perseus-editor-table",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(IssuesPanel,{issues:this.state.issues.concat(this.state.showAxeCoreIssues?this.state.axeCoreIssues:[]),a11yCheck:{callback:()=>this.setState({showAxeCoreIssues:!this.state.showAxeCoreIssues}),isChecked:this.state.showAxeCoreIssues}})})})}),showEditor&&jsxRuntimeExports.jsx(ItemEditor,{ref:this.itemEditor,itemId:this.props.itemId,question:this.props.question,answerArea:this.props.answerArea,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,widgetIsOpen:this.state.widgetsAreOpen,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,additionalTemplates:this.props.additionalTemplates}),showEditor&&jsxRuntimeExports.jsx(CombinedHintsEditor,{ref:this.hintsEditor,itemId:this.props.itemId,hints:this.props.hints,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,highlightLint:this.state.highlightLint,widgetIsOpen:this.state.widgetsAreOpen})]})})}constructor(props){super(props),this.itemEditor=React__namespace.createRef(),this.hintsEditor=React__namespace.createRef(),this.toggleJsonMode=()=>{this.setState({json:this.serialize()},()=>{this.props.onChange({jsonMode:!this.props.jsonMode});});},this.handleChange=toChange=>{const newProps=___default.default(this.props).pick("question","hints","answerArea");___default.default(newProps).extend(toChange);this.props.onChange(newProps);},this.changeJSON=newJson=>{this.setState({json:newJson});this.props.onChange(newJson);};this.state={json:___default.default.pick(this.props,"question","answerArea","hints"),highlightLint:true,widgetsAreOpen:this.props.widgetsAreOpen??true,issues:[],axeCoreIssues:[],showAxeCoreIssues:false};this._isMounted=false;}}EditorPage.defaultProps={answerArea:perseusCore.getDefaultAnswerArea(),developerMode:false,hints:[],jsonMode:false,onChange:()=>{}};
 
 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}});
 
@@ -1930,6 +1932,7 @@ exports.DeviceFramer = DeviceFramer;
 exports.Editor = Editor;
 exports.EditorPage = EditorPage;
 exports.IframeContentRenderer = IframeContentRenderer;
+exports.IssuesPanel = IssuesPanel;
 exports.ItemDiff = ItemDiff;
 exports.ViewportResizer = ViewportResizer;
 exports.libVersion = libVersion;