@khanacademy/perseus-editor 28.8.5 → 28.8.6

package/dist/index.js

@@ -27,11 +27,11 @@ var $ = require('jquery');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var Switch = require('@khanacademy/wonder-blocks-switch');
 var katex = require('katex');
-var PropTypes = require('prop-types');
 var classNames = require('classnames');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var keypadContext = require('@khanacademy/keypad-context');
 var mathInput = require('@khanacademy/math-input');
+var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var KAS = require('@khanacademy/kas');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
@@ -100,8 +100,8 @@ var IconButton__default = /*#__PURE__*/_interopDefaultCompat(IconButton);
 var $__default = /*#__PURE__*/_interopDefaultCompat($);
 var Switch__default = /*#__PURE__*/_interopDefaultCompat(Switch);
 var katex__default = /*#__PURE__*/_interopDefaultCompat(katex);
-var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespaceCompat(KAS);
 var plusCircle__default = /*#__PURE__*/_interopDefaultCompat(plusCircle);
@@ -128,7 +128,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="28.8.5";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="28.8.6";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1524,21 +1524,25 @@ const{ButtonGroup: ButtonGroup$8,InlineIcon: InlineIcon$3}=perseus.components;co
 
 function clonePath(path){return {newPos:path.newPos,components:path.components.slice(0)}}function removeEmpty(array){var ret=[];for(var i=0;i<array.length;i++){if(array[i]){ret.push(array[i]);}}return ret}function escapeHTML(s){var n=s;n=n.replace(/&/g,"&amp;");n=n.replace(/</g,"&lt;");n=n.replace(/>/g,"&gt;");n=n.replace(/"/g,"&quot;");return n}var Diff=function(ignoreWhitespace){this.ignoreWhitespace=ignoreWhitespace;};Diff.prototype={diff:function(oldString,newString){if(newString===oldString){return [{value:newString}]}if(!newString){return [{value:oldString,removed:true}]}if(!oldString){return [{value:newString,added:true}]}newString=this.tokenize(newString);oldString=this.tokenize(oldString);var newLen=newString.length,oldLen=oldString.length;var maxEditLength=newLen+oldLen;var bestPath=[{newPos:-1,components:[]}];var oldPos=this.extractCommon(bestPath[0],newString,oldString,0);if(bestPath[0].newPos+1>=newLen&&oldPos+1>=oldLen){return bestPath[0].components}for(var editLength=1;editLength<=maxEditLength;editLength++){for(var diagonalPath=-1*editLength;diagonalPath<=editLength;diagonalPath+=2){var basePath;var addPath=bestPath[diagonalPath-1],removePath=bestPath[diagonalPath+1];oldPos=(removePath?removePath.newPos:0)-diagonalPath;if(addPath){bestPath[diagonalPath-1]=undefined;}var canAdd=addPath&&addPath.newPos+1<newLen;var canRemove=removePath&&0<=oldPos&&oldPos<oldLen;if(!canAdd&&!canRemove){bestPath[diagonalPath]=undefined;continue}if(!canAdd||canRemove&&addPath.newPos<removePath.newPos){basePath=clonePath(removePath);this.pushComponent(basePath.components,oldString[oldPos],undefined,true);}else {basePath=clonePath(addPath);basePath.newPos++;this.pushComponent(basePath.components,newString[basePath.newPos],true,undefined);}var oldPos=this.extractCommon(basePath,newString,oldString,diagonalPath);if(basePath.newPos+1>=newLen&&oldPos+1>=oldLen){return basePath.components}else {bestPath[diagonalPath]=basePath;}}}},pushComponent:function(components,value,added,removed){var last=components[components.length-1];if(last&&last.added===added&&last.removed===removed){components[components.length-1]={value:this.join(last.value,value),added:added,removed:removed};}else {components.push({value:value,added:added,removed:removed});}},extractCommon:function(basePath,newString,oldString,diagonalPath){var newLen=newString.length,oldLen=oldString.length,newPos=basePath.newPos,oldPos=newPos-diagonalPath;while(newPos+1<newLen&&oldPos+1<oldLen&&this.equals(newString[newPos+1],oldString[oldPos+1])){newPos++;oldPos++;this.pushComponent(basePath.components,newString[newPos],undefined,undefined);}basePath.newPos=newPos;return oldPos},equals:function(left,right){var reWhitespace=/\S/;if(this.ignoreWhitespace&&!reWhitespace.test(left)&&!reWhitespace.test(right)){return true}else {return left===right}},join:function(left,right){return left+right},tokenize:function(value){return value}};var CharDiff=new Diff;var WordDiff=new Diff(true);var WordWithSpaceDiff=new Diff;WordDiff.tokenize=WordWithSpaceDiff.tokenize=function(value){return removeEmpty(value.split(/(\s+|\b)/))};var CssDiff=new Diff(true);CssDiff.tokenize=function(value){return removeEmpty(value.split(/([{}:;,]|\s+)/))};var LineDiff=new Diff;LineDiff.tokenize=function(value){var retLines=[],lines=value.split(/^/m);for(var i=0;i<lines.length;i++){var line=lines[i],lastLine=lines[i-1];if(line=="\n"&&lastLine&&lastLine[lastLine.length-1]==="\r"){retLines[retLines.length-1]+="\n";}else if(line){retLines.push(line);}}return retLines};const JSDiff={Diff:Diff,diffChars:function(oldStr,newStr){return CharDiff.diff(oldStr,newStr)},diffWords:function(oldStr,newStr){return WordDiff.diff(oldStr,newStr)},diffWordsWithSpace:function(oldStr,newStr){return WordWithSpaceDiff.diff(oldStr,newStr)},diffLines:function(oldStr,newStr){return LineDiff.diff(oldStr,newStr)},diffCss:function(oldStr,newStr){return CssDiff.diff(oldStr,newStr)},createPatch:function(fileName,oldStr,newStr,oldHeader,newHeader){var ret=[];ret.push("Index: "+fileName);ret.push("===================================================================");ret.push("--- "+fileName+(typeof oldHeader==="undefined"?"":"	"+oldHeader));ret.push("+++ "+fileName+(typeof newHeader==="undefined"?"":"	"+newHeader));var diff=LineDiff.diff(oldStr,newStr);if(!diff[diff.length-1].value){diff.pop();}diff.push({value:"",lines:[]});function contextLines(lines){return lines.map(function(entry){return " "+entry})}function eofNL(curRange,i,current){var last=diff[diff.length-2],isLast=i===diff.length-2,isLastOfType=i===diff.length-3&&(current.added!==last.added||current.removed!==last.removed);if(!/\n$/.test(current.value)&&(isLast||isLastOfType)){curRange.push("\");}}var oldRangeStart=0,newRangeStart=0,curRange=[],oldLine=1,newLine=1;for(var i=0;i<diff.length;i++){var current=diff[i],lines=current.lines||current.value.replace(/\n$/,"").split("\n");current.lines=lines;if(current.added||current.removed){if(!oldRangeStart){var prev=diff[i-1];oldRangeStart=oldLine;newRangeStart=newLine;if(prev){curRange=contextLines(prev.lines.slice(-4));oldRangeStart-=curRange.length;newRangeStart-=curRange.length;}}curRange.push.apply(curRange,lines.map(function(entry){return (current.added?"+":"-")+entry}));eofNL(curRange,i,current);if(current.added){newLine+=lines.length;}else {oldLine+=lines.length;}}else {if(oldRangeStart){if(lines.length<=8&&i<diff.length-2){curRange.push.apply(curRange,contextLines(lines));}else {var contextSize=Math.min(lines.length,4);ret.push("@@ -"+oldRangeStart+","+(oldLine-oldRangeStart+contextSize)+" +"+newRangeStart+","+(newLine-newRangeStart+contextSize)+" @@");ret.push.apply(ret,curRange);ret.push.apply(ret,contextLines(lines.slice(0,contextSize)));if(lines.length<=4){eofNL(ret,i,current);}oldRangeStart=0;newRangeStart=0;curRange=[];}}oldLine+=lines.length;newLine+=lines.length;}}return ret.join("\n")+"\n"},applyPatch:function(oldStr,uniDiff){var diffstr=uniDiff.split("\n");var diff=[];var remEOFNL=false,addEOFNL=false;for(var i=diffstr[0][0]==="I"?4:0;i<diffstr.length;i++){if(diffstr[i][0]==="@"){var meh=diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);diff.unshift({start:meh[3],oldlength:meh[2],oldlines:[],newlength:meh[4],newlines:[]});}else if(diffstr[i][0]==="+"){diff[0].newlines.push(diffstr[i].substr(1));}else if(diffstr[i][0]==="-"){diff[0].oldlines.push(diffstr[i].substr(1));}else if(diffstr[i][0]===" "){diff[0].newlines.push(diffstr[i].substr(1));diff[0].oldlines.push(diffstr[i].substr(1));}else if(diffstr[i][0]==="\\"){if(diffstr[i-1][0]==="+"){remEOFNL=true;}else if(diffstr[i-1][0]==="-"){addEOFNL=true;}}}var str=oldStr.split("\n");for(var i=diff.length-1;i>=0;i--){var d=diff[i];for(var j=0;j<d.oldlength;j++){if(str[d.start-1+j]!==d.oldlines[j]){return false}}Array.prototype.splice.apply(str,[d.start-1,+d.oldlength].concat(d.newlines));}if(remEOFNL){while(!str[str.length-1]){str.pop();}}else if(addEOFNL){str.push("");}return str.join("\n")},convertChangesToXML:function(changes){var ret=[];for(var i=0;i<changes.length;i++){var change=changes[i];if(change.added){ret.push("<ins>");}else if(change.removed){ret.push("<del>");}ret.push(escapeHTML(change.value));if(change.added){ret.push("</ins>");}else if(change.removed){ret.push("</del>");}}return ret.join("")},convertChangesToDMP:function(changes){var ret=[],change;for(var i=0;i<changes.length;i++){change=changes[i];ret.push([change.added?1:change.removed?-1:0,change.value]);}return ret}};
 
-const splitDiff=function(diffEntries){const lines=[];let currentLine=[];___default.default.each(diffEntries,entry=>{const values=entry.value.split("\n");___default.default.each(values,(value,i)=>{const isNewline=i>0;if(isNewline){lines.push(currentLine);currentLine=[];}const newEntry=___default.default.extend({},entry,{value:value});currentLine.push(newEntry);});});if(currentLine.length){lines.push(currentLine);}return lines};
+const splitDiff=function(diffEntries){const lines=[];let currentLine=[];___default.default.each(diffEntries,entry=>{const values=entry.value.split("\n");___default.default.each(values,(value,i)=>{const isNewline=i>0;if(isNewline){lines.push(currentLine);currentLine=[];}const newEntry=___default.default.extend({},entry,{value:value});currentLine.push(newEntry);});});if(currentLine.length>0){lines.push(currentLine);}return lines};
+
+function statusFor(chunk){if(chunk.added){return "added"}if(chunk.removed){return "removed"}return "unchanged"}function splitUpChunk(chunk){return ___default.default.map(chunk.value,value=>{return {value:value,status:statusFor(chunk)}})}function mapcat(lst,fn){return ___default.default.flatten(___default.default.map(lst,fn),true)}const ArrayDiff=new JSDiff.Diff;ArrayDiff.tokenize=array=>___default.default.map(array,elem=>[elem]);ArrayDiff.join=(a,b)=>a.concat(b);ArrayDiff.equals=___default.default.isEqual;function flattenChunks(chunks){return mapcat(chunks,splitUpChunk)}const stringArrayDiff=function(a,b){const diffResult=ArrayDiff.diff(a,b);const flattened=flattenChunks(diffResult);const result={before:___default.default.filter(flattened,entry=>entry.status!=="added"),after:___default.default.filter(flattened,entry=>entry.status!=="removed")};return result};
+
+const{SvgImage: SvgImage$2}=perseus.components;const BEFORE$1="before";const AFTER$1="after";const IMAGE_REGEX=/http.*?\.png|web\+graphie[^)]*/g;const imagesInString=function(str){return str?.match(IMAGE_REGEX)||[]};const classFor=function(entry,ifAdded,ifRemoved){if(entry.added){return ifAdded}if(entry.removed){return ifRemoved}return ""};class ImageDiffSide extends React__namespace.Component{render(){return jsxRuntimeExports.jsx("div",{children:___default.default.map(this.props.images,(entry,index)=>{const className=classNames__default.default({image:true,"image-unchanged":entry.status==="unchanged","image-added":entry.status==="added","image-removed":entry.status==="removed"});return jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx("div",{className:className,children:jsxRuntimeExports.jsx(SvgImage$2,{src:entry.value,title:entry.value,allowZoom:false,alt:"entry.value"})})},index)})})}}class TextDiff extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({collapsed:nextProps.before===nextProps.after});}render(){const diffed=JSDiff.diffWords(this.props.before,this.props.after);const lines=splitDiff(diffed);const beforeImages=imagesInString(this.props.before);const afterImages=imagesInString(this.props.after);const images=stringArrayDiff(beforeImages,afterImages);const renderedLines=___default.default.map(lines,line=>{const contents={before:[],after:[]};contents.before=___default.default(line).map(function(entry,i){return jsxRuntimeExports.jsx("span",{className:classFor(entry,"not-present","removed dark"),children:entry.value},i)});contents.after=___default.default(line).map(function(entry,i){return jsxRuntimeExports.jsx("span",{className:classFor(entry,"added dark","not-present"),children:entry.value},i)});return contents});const className=classNames__default.default({"diff-row":true,collapsed:this.state.collapsed});return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"diff-header",children:this.props.title}),jsxRuntimeExports.jsx("div",{className:"diff-header",children:this.props.title}),jsxRuntimeExports.jsx("div",{className:"diff-body ui-helper-clearfix",children:___default.default.map([BEFORE$1,AFTER$1],(side,index)=>{return jsxRuntimeExports.jsxs("div",{className:"diff-row "+side,children:[!this.state.collapsed&&___default.default.map(renderedLines,(line,lineNum)=>{const changed=line[side].length>1;const lineClass=classNames__default.default({"diff-line":true,added:side===AFTER$1&&changed,removed:side===BEFORE$1&&changed});return jsxRuntimeExports.jsx("div",{className:lineClass,children:line[side]},lineNum)}),!this.state.collapsed&&jsxRuntimeExports.jsx(ImageDiffSide,{images:images[side]})]},index)})}),___default.default.map([BEFORE$1,AFTER$1],(side,index)=>{return jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:className+" "+side,onClick:this.handleExpand,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){this.handleExpand();}},children:this.state.collapsed&&jsxRuntimeExports.jsx("span",{children:jsxRuntimeExports.jsxs("span",{className:"expand-button",children:[" ","[ show unmodified ]"," "]})})},index)})]})}constructor(...args){super(...args),this.state={collapsed:this.props.before===this.props.after},this.handleExpand=()=>{this.setState({collapsed:false});};}}TextDiff.defaultProps={after:"",before:""};
 
-const statusFor=function(chunk){if(chunk.added){return "added"}if(chunk.removed){return "removed"}return "unchanged"};const splitUpChunk=chunk=>___default.default.map(chunk.value,value=>{return {value:value,status:statusFor(chunk)}});const mapcat=function(lst,fn){return ___default.default.flatten(___default.default.map(lst,fn),true)};const ArrayDiff=new JSDiff.Diff;ArrayDiff.tokenize=array=>___default.default.map(array,elem=>[elem]);ArrayDiff.join=(a,b)=>a.concat(b);ArrayDiff.equals=___default.default.isEqual;const flattenChunks=chunks=>mapcat(chunks,splitUpChunk);const stringArrayDiff=function(a,b){const diffResult=ArrayDiff.diff(a,b);const flattened=flattenChunks(diffResult);return {before:___default.default.filter(flattened,entry=>entry.status!=="added"),after:___default.default.filter(flattened,entry=>entry.status!=="removed")}};
+const indentationFromDepth=function(depth){return (depth-1)*20};const BEFORE="before";const AFTER="after";const UNCHANGED$1="unchanged";class DiffSide extends React__namespace.Component{render(){const className=classNames__default.default(this.props.className,{"diff-row":true,before:this.props.side===BEFORE,after:this.props.side===AFTER});return jsxRuntimeExports.jsx("div",{className:className,children:jsxRuntimeExports.jsxs("div",{style:{paddingLeft:indentationFromDepth(this.props.depth)},children:[this.props.showKey&&this.props.propKey+": ",jsxRuntimeExports.jsx("span",{className:"inner-value dark "+this.props.className,children:this.props.value})]})})}}class CollapsedRow extends React__namespace.Component{render(){const self=this;return jsxRuntimeExports.jsx("div",{onClick:self.props.onClick,style:{clear:"both"},children:___default.default.map([BEFORE,AFTER],function(side){return jsxRuntimeExports.jsx("div",{className:"diff-row collapsed "+side,children:jsxRuntimeExports.jsx("div",{style:{paddingLeft:indentationFromDepth(self.props.depth)},children:jsxRuntimeExports.jsx("span",{children:" [ show unmodified ] "})})},side)})})}}CollapsedRow.defaultProps={depth:0};class DiffEntry extends React__namespace.Component{render(){const entry=this.props.entry;const propertyDeleted=entry.status==="removed";const propertyAdded=entry.status==="added";const propertyChanged=entry.status==="changed";const hasChildren=entry.children.length>0;const leftClass=classNames__default.default({removed:propertyDeleted||propertyChanged&&!hasChildren,dark:propertyDeleted,"blank-space":propertyAdded});const rightClass=classNames__default.default({added:propertyAdded||propertyChanged&&!hasChildren,dark:propertyAdded,"blank-space":propertyDeleted});let shownChildren;if(this.state.expanded){shownChildren=entry.children;}else {shownChildren=___default.default(entry.children).select(function(child){return child.status!==UNCHANGED$1});}let collapsed=shownChildren.length<entry.children.length;if(entry.children.length===shownChildren.length+1){shownChildren=entry.children;collapsed=false;}const self=this;return jsxRuntimeExports.jsxs("div",{children:[entry.key&&jsxRuntimeExports.jsxs("div",{style:{clear:"both"},children:[jsxRuntimeExports.jsx(DiffSide,{side:BEFORE,className:leftClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyAdded,value:entry.before}),jsxRuntimeExports.jsx(DiffSide,{side:AFTER,className:rightClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyDeleted,value:entry.after})]}),___default.default.map(shownChildren,function(child){return jsxRuntimeExports.jsx(DiffEntry,{depth:self.props.depth+1,entry:child,expanded:self.state.expanded},child.key)}),collapsed&&jsxRuntimeExports.jsx(CollapsedRow,{depth:this.props.depth+1,onClick:this.expand})]})}constructor(...args){super(...args),this.state={expanded:this.props.expanded??false},this.expand=()=>{this.setState({expanded:true});};}}DiffEntry.defaultProps={depth:0};
 
-const{SvgImage: SvgImage$2}=perseus.components;const BEFORE$1="before";const AFTER$1="after";const IMAGE_REGEX=/http.*?\.png|web\+graphie[^)]*/g;const imagesInString=function(str){return str.match(IMAGE_REGEX)||[]};const classFor=function(entry,ifAdded,ifRemoved){if(entry.added){return ifAdded}if(entry.removed){return ifRemoved}return ""};class ImageDiffSide extends React__namespace.Component{render(){return jsxRuntimeExports.jsx("div",{children:___default.default.map(this.props.images,(entry,index)=>{const className=classNames__default.default({image:true,"image-unchanged":entry.status==="unchanged","image-added":entry.status==="added","image-removed":entry.status==="removed"});return jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx("div",{className:className,children:jsxRuntimeExports.jsx(SvgImage$2,{src:entry.value,title:entry.value,allowZoom:false})})},index)})})}}ImageDiffSide.propTypes={images:PropTypes__default.default.arrayOf(PropTypes__default.default.shape({})).isRequired};class TextDiff extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({collapsed:nextProps.before===nextProps.after});}render(){const diffed=JSDiff.diffWords(this.props.before,this.props.after);const lines=splitDiff(diffed);const beforeImages=imagesInString(this.props.before);const afterImages=imagesInString(this.props.after);const images=stringArrayDiff(beforeImages,afterImages);const renderedLines=___default.default.map(lines,line=>{const contents={};contents.before=___default.default(line).map(function(entry,i){return jsxRuntimeExports.jsx("span",{className:classFor(entry,"not-present","removed dark"),children:entry.value},i)});contents.after=___default.default(line).map(function(entry,i){return jsxRuntimeExports.jsx("span",{className:classFor(entry,"added dark","not-present"),children:entry.value},i)});return contents});const className=classNames__default.default({"diff-row":true,collapsed:this.state.collapsed});return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"diff-header",children:this.props.title}),jsxRuntimeExports.jsx("div",{className:"diff-header",children:this.props.title}),jsxRuntimeExports.jsx("div",{className:"diff-body ui-helper-clearfix",children:___default.default.map([BEFORE$1,AFTER$1],(side,index)=>{return jsxRuntimeExports.jsxs("div",{className:"diff-row "+side,children:[!this.state.collapsed&&___default.default.map(renderedLines,(line,lineNum)=>{const changed=line[side].length>1;const lineClass=classNames__default.default({"diff-line":true,added:side===AFTER$1&&changed,removed:side===BEFORE$1&&changed});return jsxRuntimeExports.jsx("div",{className:lineClass,children:line[side]},lineNum)}),!this.state.collapsed&&jsxRuntimeExports.jsx(ImageDiffSide,{images:images[side]})]},index)})}),___default.default.map([BEFORE$1,AFTER$1],(side,index)=>{return jsxRuntimeExports.jsx("div",{className:className+" "+side,onClick:this.handleExpand,children:this.state.collapsed&&jsxRuntimeExports.jsx("span",{children:jsxRuntimeExports.jsxs("span",{className:"expand-button",children:[" ","[ show unmodified ]"," "]})})},index)})]})}constructor(...args){super(...args),this.state={collapsed:this.props.before===this.props.after},this.handleExpand=()=>{this.setState({collapsed:false});};}}TextDiff.propTypes={after:PropTypes__default.default.string,before:PropTypes__default.default.string,title:PropTypes__default.default.string.isRequired};TextDiff.defaultProps={after:"",before:""};
+const UNCHANGED="unchanged";const CHANGED="changed";const ADDED="added";const REMOVED="removed";const valueEntry=function(before,after,key){let status;if(before===after){status=UNCHANGED;}else if(before===undefined){status=ADDED;}else if(after===undefined){status=REMOVED;}else {status=CHANGED;}return {after:JSON.stringify(after),before:JSON.stringify(before),children:[],key:key,status:status}};const objectEntry=function(before,after,key){const beforeKeys=___default.default.isObject(before)?___default.default(before).keys():[];const afterKeys=___default.default.isObject(after)?___default.default(after).keys():[];const keys=___default.default.union(beforeKeys,afterKeys);const children=___default.default.map(keys,function(key){return performDiff((before||{})[key],(after||{})[key],key)});let status;if(before===undefined){status=ADDED;}else if(after===undefined){status=REMOVED;}else {const changed=___default.default.any(children,function(child){return child.status!==UNCHANGED});status=changed?CHANGED:UNCHANGED;}return {after:"",before:"",children:children,key:key,status:status}};const performDiff=function(before,after,key){if(typeof before==="object"||typeof after==="object"){return objectEntry(before,after,key)}return valueEntry(before,after,key)};
 
-const UNCHANGED$1="unchanged";const CHANGED="changed";const ADDED="added";const REMOVED="removed";const valueEntry=function(before,after,key){let status;if(before===after){status=UNCHANGED$1;}else if(before===undefined){status=ADDED;}else if(after===undefined){status=REMOVED;}else {status=CHANGED;}return {after:JSON.stringify(after),before:JSON.stringify(before),children:[],key:key,status:status}};const objectEntry=function(before,after,key){const beforeKeys=___default.default.isObject(before)?___default.default(before).keys():[];const afterKeys=___default.default.isObject(after)?___default.default(after).keys():[];const keys=___default.default.union(beforeKeys,afterKeys);const children=___default.default.map(keys,function(key){return performDiff((before||{})[key],(after||{})[key],key)});let status;if(before===undefined){status=ADDED;}else if(after===undefined){status=REMOVED;}else {const changed=___default.default.any(children,function(child){return child.status!==UNCHANGED$1});status=changed?CHANGED:UNCHANGED$1;}return {after:"",before:"",children:children,key:key,status:status}};const performDiff=function(before,after,key){if(typeof before==="object"||typeof after==="object"){return objectEntry(before,after,key)}return valueEntry(before,after,key)};
+const{SvgImage: SvgImage$1}=perseus.components;class ImageWidgetDiff extends React__namespace.Component{render(){const{before,after}=this.props;const beforeSrc=before.options?.backgroundImage?.url?before.options.backgroundImage.url:"";const afterSrc=after.options?.backgroundImage?.url?after.options.backgroundImage.url:"";const beforeAlt=before.options?.alt?before.options.alt:"";const afterAlt=after.options?.alt?after.options.alt:"";return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"diff-row before",children:beforeSrc&&jsxRuntimeExports.jsx("div",{className:classNames__default.default({image:true,"image-unchanged":beforeSrc===afterSrc,"image-removed":beforeSrc!==afterSrc}),children:jsxRuntimeExports.jsx(SvgImage$1,{src:beforeSrc,title:beforeSrc,allowZoom:false,alt:beforeAlt})})}),jsxRuntimeExports.jsx("div",{className:"diff-row after",children:afterSrc&&jsxRuntimeExports.jsx("div",{className:classNames__default.default({image:true,"image-unchanged":beforeSrc===afterSrc,"image-added":beforeSrc!==afterSrc}),children:jsxRuntimeExports.jsx(SvgImage$1,{src:afterSrc,title:afterSrc,allowZoom:false,alt:afterAlt})})})]})}}class WidgetDiff extends React__namespace.Component{render(){const{after,before,title,type}=this.props;const diff=performDiff(before,after);return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("div",{className:"diff-header",children:title}),jsxRuntimeExports.jsx("div",{className:"diff-header",children:title}),jsxRuntimeExports.jsxs("div",{className:"diff-body ui-helper-clearfix",children:[type==="image"&&jsxRuntimeExports.jsx(ImageWidgetDiff,{before:before,after:after}),jsxRuntimeExports.jsx(DiffEntry,{entry:diff})]})]})}}
 
-const{SvgImage: SvgImage$1}=perseus.components;const indentationFromDepth=function(depth){return (depth-1)*20};const BEFORE="before";const AFTER="after";const UNCHANGED="unchanged";class DiffSide extends React__namespace.Component{render(){const className=classNames__default.default(this.props.className,{"diff-row":true,before:this.props.side===BEFORE,after:this.props.side===AFTER});return jsxRuntimeExports.jsx("div",{className:className,children:jsxRuntimeExports.jsxs("div",{style:{paddingLeft:indentationFromDepth(this.props.depth)},children:[this.props.showKey&&this.props.propKey+": ",jsxRuntimeExports.jsx("span",{className:"inner-value dark "+this.props.className,children:this.props.value})]})})}}DiffSide.propTypes={className:PropTypes__default.default.string.isRequired,depth:PropTypes__default.default.number.isRequired,propKey:PropTypes__default.default.string.isRequired,showKey:PropTypes__default.default.bool.isRequired,side:PropTypes__default.default.oneOf([BEFORE,AFTER]).isRequired,value:PropTypes__default.default.string};class CollapsedRow extends React__namespace.Component{render(){const self=this;return jsxRuntimeExports.jsx("div",{onClick:self.props.onClick,style:{clear:"both"},children:___default.default.map([BEFORE,AFTER],function(side){return jsxRuntimeExports.jsx("div",{className:"diff-row collapsed "+side,children:jsxRuntimeExports.jsx("div",{style:{paddingLeft:indentationFromDepth(self.props.depth)},children:jsxRuntimeExports.jsx("span",{children:" [ show unmodified ] "})})},side)})})}}CollapsedRow.propTypes={depth:PropTypes__default.default.number,onClick:PropTypes__default.default.func.isRequired};CollapsedRow.defaultProps={depth:0};class DiffEntry extends React__namespace.Component{render(){const entry=this.props.entry;const propertyDeleted=entry.status==="removed";const propertyAdded=entry.status==="added";const propertyChanged=entry.status==="changed";const hasChildren=entry.children.length>0;const leftClass=classNames__default.default({removed:propertyDeleted||propertyChanged&&!hasChildren,dark:propertyDeleted,"blank-space":propertyAdded});const rightClass=classNames__default.default({added:propertyAdded||propertyChanged&&!hasChildren,dark:propertyAdded,"blank-space":propertyDeleted});let shownChildren;if(this.state.expanded){shownChildren=entry.children;}else {shownChildren=___default.default(entry.children).select(function(child){return child.status!==UNCHANGED});}let collapsed=shownChildren.length<entry.children.length;if(entry.children.length===shownChildren.length+1){shownChildren=entry.children;collapsed=false;}const self=this;return jsxRuntimeExports.jsxs("div",{children:[entry.key&&jsxRuntimeExports.jsxs("div",{style:{clear:"both"},children:[jsxRuntimeExports.jsx(DiffSide,{side:BEFORE,className:leftClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyAdded,value:entry.before}),jsxRuntimeExports.jsx(DiffSide,{side:AFTER,className:rightClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyDeleted,value:entry.after})]}),___default.default.map(shownChildren,function(child){return jsxRuntimeExports.jsx(DiffEntry,{depth:self.props.depth+1,entry:child,expanded:self.state.expanded},child.key)}),collapsed&&jsxRuntimeExports.jsx(CollapsedRow,{depth:this.props.depth+1,onClick:this.expand})]})}constructor(...args){super(...args),this.state={expanded:this.props.expanded},this.expand=()=>{this.setState({expanded:true});};}}DiffEntry.propTypes={depth:PropTypes__default.default.number,entry:PropTypes__default.default.shape({after:PropTypes__default.default.string,before:PropTypes__default.default.string,children:PropTypes__default.default.arrayOf(PropTypes__default.default.any),key:PropTypes__default.default.string}),expanded:PropTypes__default.default.bool};DiffEntry.defaultProps={depth:0};class ImageWidgetDiff extends React__namespace.Component{render(){const{before,after}=this.props;const beforeSrc=before.options&&before.options.backgroundImage?before.options.backgroundImage.url:"";const afterSrc=after.options&&after.options.backgroundImage?after.options.backgroundImage.url:"";return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"diff-row before",children:beforeSrc&&jsxRuntimeExports.jsx("div",{className:classNames__default.default({image:true,"image-unchanged":beforeSrc===afterSrc,"image-removed":beforeSrc!==afterSrc}),children:jsxRuntimeExports.jsx(SvgImage$1,{src:beforeSrc,title:beforeSrc,allowZoom:false})})}),jsxRuntimeExports.jsx("div",{className:"diff-row after",children:afterSrc&&jsxRuntimeExports.jsx("div",{className:classNames__default.default({image:true,"image-unchanged":beforeSrc===afterSrc,"image-added":beforeSrc!==afterSrc}),children:jsxRuntimeExports.jsx(SvgImage$1,{src:afterSrc,title:afterSrc,allowZoom:false})})})]})}}ImageWidgetDiff.propTypes={after:PropTypes__default.default.shape({options:PropTypes__default.default.objectOf(PropTypes__default.default.any)}).isRequired,before:PropTypes__default.default.shape({options:PropTypes__default.default.objectOf(PropTypes__default.default.any)}).isRequired};class WidgetDiff extends React__namespace.Component{render(){const{after,before,title,type}=this.props;const diff=performDiff(before,after);return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"diff-header",children:title}),jsxRuntimeExports.jsx("div",{className:"diff-header",children:title}),jsxRuntimeExports.jsxs("div",{className:"diff-body ui-helper-clearfix",children:[type==="image"&&jsxRuntimeExports.jsx(ImageWidgetDiff,{before:before,after:after}),jsxRuntimeExports.jsx(DiffEntry,{entry:diff})]})]})}}WidgetDiff.propTypes={after:PropTypes__default.default.shape({options:PropTypes__default.default.objectOf(PropTypes__default.default.any)}),before:PropTypes__default.default.shape({options:PropTypes__default.default.objectOf(PropTypes__default.default.any)}),title:PropTypes__default.default.string.isRequired,type:PropTypes__default.default.string};WidgetDiff.defaultProps={after:{},before:{},type:""};
+const filterWidgetInfo=function(widgetInfo,showAlignmentOptions){const{alignment,options,type}=widgetInfo;const filteredWidgetInfo={options};if(showAlignmentOptions&&perseusCore.CoreWidgetRegistry.getSupportedAlignments(type).length>1){filteredWidgetInfo.alignment=alignment;}if(perseus.Widgets.supportsStaticMode(type)){filteredWidgetInfo.static=widgetInfo?.static??undefined;}return filteredWidgetInfo};class RendererDiff extends React__namespace.Component{render(){const{after,before,showAlignmentOptions,showSeparator,title}=this.props;let textDiff;let widgetsDiff=[];if(before.content||after.content){textDiff=jsxRuntimeExports.jsx(TextDiff,{before:before.content,after:after.content,title:title});}const beforeWidgets=Object.keys(before.widgets??{}).filter(widget=>before.content.includes(widget));const afterWidgets=Object.keys(after.widgets??{}).filter(widget=>after.content.includes(widget));if(beforeWidgets.length>0||afterWidgets.length>0){const widgets=___default.default.union(beforeWidgets,afterWidgets);widgetsDiff=widgets.map(widget=>jsxRuntimeExports.jsx(WidgetDiff,{before:filterWidgetInfo(before.widgets?.[widget],showAlignmentOptions),after:filterWidgetInfo(after.widgets?.[widget],showAlignmentOptions),title:widget,type:(before.widgets?.[widget]??{}).type||(after.widgets?.[widget]??{}).type},widget));}return jsxRuntimeExports.jsxs("div",{children:[textDiff,widgetsDiff,showSeparator&&jsxRuntimeExports.jsx("div",{className:"diff-separator"})]})}}RendererDiff.defaultProps={after:{content:"",images:{},widgets:{}},before:{content:"",images:{},widgets:{}},showAlignmentOptions:false,showSeparator:false};
 
-const filterWidgetInfo=function(widgetInfo,showAlignmentOptions){const{alignment,graded,options,type}=widgetInfo||{};const filteredWidgetInfo={options};if(showAlignmentOptions&&perseusCore.CoreWidgetRegistry.getSupportedAlignments(type).length>1){filteredWidgetInfo.alignment=alignment;}if(type==="transformer"){filteredWidgetInfo.graded=graded;}if(perseus.Widgets.supportsStaticMode(type)){filteredWidgetInfo.static=widgetInfo?.static??undefined;}return filteredWidgetInfo};class RendererDiff extends React__namespace.Component{render(){const{after,before,showAlignmentOptions,showSeparator,title}=this.props;let textDiff;let widgetsDiff;if(before.content||after.content){textDiff=jsxRuntimeExports.jsx(TextDiff,{before:before.content,after:after.content,title:title});}const beforeWidgets=Object.keys(before.widgets??{}).filter(widget=>before.content.includes(widget));const afterWidgets=Object.keys(after.widgets??{}).filter(widget=>after.content.includes(widget));if(beforeWidgets.length||afterWidgets.length){const widgets=___default.default.union(beforeWidgets,afterWidgets);widgetsDiff=widgets.map(widget=>jsxRuntimeExports.jsx(WidgetDiff,{before:filterWidgetInfo(before.widgets?.[widget],showAlignmentOptions),after:filterWidgetInfo(after.widgets?.[widget],showAlignmentOptions),title:widget,type:(before.widgets?.[widget]??{}).type||(after.widgets?.[widget]??{}).type},widget));}return jsxRuntimeExports.jsxs("div",{children:[textDiff,widgetsDiff,showSeparator&&jsxRuntimeExports.jsx("div",{className:"diff-separator"})]})}}RendererDiff.defaultProps={after:{content:"",images:{},widgets:{}},before:{content:"",images:{},widgets:{}},showAlignmentOptions:false,showSeparator:false};
+class ArticleDiff extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState(ArticleDiff._stateFromProps(nextProps));}render(){const{before,after}=this.state;const sectionCount=Math.max(before.length,after.length);const sections=___default.default.times(sectionCount,n=>jsxRuntimeExports.jsx(RendererDiff,{before:n<before.length?before[n]:undefined,after:n<after.length?after[n]:undefined,title:`Section ${n+1}`,showAlignmentOptions:true,showSeparator:n<sectionCount-1},n));return jsxRuntimeExports.jsx(perseus.Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsx("div",{className:"framework-perseus",children:sections})})}constructor(...args){super(...args),this.state=ArticleDiff._stateFromProps(this.props);}}ArticleDiff._stateFromProps=props=>{const{before,after}=props;return {before:Array.isArray(before)?before:[before],after:Array.isArray(after)?after:[after]}};
 
-const rendererProps=PropTypes__default.default.shape({content:PropTypes__default.default.string,images:PropTypes__default.default.objectOf(PropTypes__default.default.any),widgets:PropTypes__default.default.objectOf(PropTypes__default.default.any)});class ArticleDiff extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState(ArticleDiff._stateFromProps(nextProps));}render(){const{before,after}=this.state;const sectionCount=Math.max(before.length,after.length);const sections=___default.default.times(sectionCount,n=>jsxRuntimeExports.jsx(RendererDiff,{before:n<before.length?before[n]:undefined,after:n<after.length?after[n]:undefined,title:`Section ${n+1}`,showAlignmentOptions:true,showSeparator:n<sectionCount-1},n));return jsxRuntimeExports.jsx(perseus.Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsx("div",{className:"framework-perseus",children:sections})})}constructor(...args){super(...args),this.state=ArticleDiff._stateFromProps(this.props);}}ArticleDiff.propTypes={after:PropTypes__default.default.oneOfType([rendererProps,PropTypes__default.default.arrayOf(rendererProps)]).isRequired,before:PropTypes__default.default.oneOfType([rendererProps,PropTypes__default.default.arrayOf(rendererProps)]).isRequired};ArticleDiff._stateFromProps=props=>{const{before,after}=props;return {before:Array.isArray(before)?before:[before],after:Array.isArray(after)?after:[after]}};
+class AnswerAreaDiff extends React__namespace.Component{render(){const{after,before,title}=this.props;const diff=performDiff(before,after);return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("div",{className:"diff-header",children:title}),jsxRuntimeExports.jsx("div",{className:"diff-header",children:title}),jsxRuntimeExports.jsx("div",{className:"diff-body ui-helper-clearfix",children:jsxRuntimeExports.jsx(DiffEntry,{entry:diff})})]})}}
 
-const itemProps=PropTypes__default.default.shape({question:PropTypes__default.default.shape({}).isRequired,answerArea:PropTypes__default.default.shape({}).isRequired,hints:PropTypes__default.default.arrayOf(PropTypes__default.default.any).isRequired});class ItemDiff extends React__namespace.Component{render(){const{before,after}=this.props;const hintCount=Math.max(before.hints.length,after.hints.length);const question=jsxRuntimeExports.jsx(RendererDiff,{before:before.question,after:after.question,title:"Question",showAlignmentOptions:false,showSeparator:true});const extras=jsxRuntimeExports.jsx(WidgetDiff,{before:before.answerArea,after:after.answerArea,title:"Question extras"});const hints=___default.default.times(hintCount,function(n){return jsxRuntimeExports.jsx(RendererDiff,{before:n<before.hints.length?before.hints[n]:undefined,after:n<after.hints.length?after.hints[n]:undefined,title:`Hint ${n+1}`,showAlignmentOptions:false,showSeparator:n<hintCount-1},n)});return jsxRuntimeExports.jsx(perseus.Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsxs("div",{className:"framework-perseus",children:[question,extras,hints&&jsxRuntimeExports.jsx("div",{className:"diff-separator"}),hints]})})}}ItemDiff.propTypes={after:itemProps.isRequired,before:itemProps.isRequired};
+class ItemDiff extends React__namespace.Component{render(){const{before,after}=this.props;const hintCount=Math.max(before.hints.length,after.hints.length);const question=jsxRuntimeExports.jsx(RendererDiff,{before:before.question,after:after.question,title:"Question",showAlignmentOptions:false,showSeparator:true});let extras;if(before.answerArea&&after.answerArea){extras=jsxRuntimeExports.jsx(AnswerAreaDiff,{before:before.answerArea,after:after.answerArea,title:"Question extras"});}const hints=___default.default.times(hintCount,function(n){return jsxRuntimeExports.jsx(RendererDiff,{before:n<before.hints.length?before.hints[n]:undefined,after:n<after.hints.length?after.hints[n]:undefined,title:`Hint ${n+1}`,showAlignmentOptions:false,showSeparator:n<hintCount-1},n)});return jsxRuntimeExports.jsx(perseus.Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsxs("div",{className:"framework-perseus",children:[question,extras,hints.length>0&&jsxRuntimeExports.jsx("div",{className:"diff-separator"}),hints]})})}}
 
 const{InfoTip: InfoTip$p,InlineIcon: InlineIcon$2}=perseus.components;class HintEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-hint-editor "+this.props.className,children:[this.props.showTitle&&jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Hint"}),jsxRuntimeExports.jsx(Editor,{ref:this.editor,apiOptions:this.props.apiOptions,widgets:this.props.widgets||undefined,content:this.props.content||undefined,images:this.props.images,replace:this.props.replace,placeholder:"Type your hint here...",imageUploader:this.props.imageUploader,onChange:this.props.onChange,widgetIsOpen:this.props.widgetIsOpen},this.props.itemId),jsxRuntimeExports.jsxs("div",{className:"hint-controls-container clearfix",children:[this.props.showMoveButtons&&jsxRuntimeExports.jsxs("span",{className:"reorder-hints",children:[jsxRuntimeExports.jsx("button",{type:"button",className:this.props.isLast?"hidden":"",onClick:___default.default.partial(this.props.onMove,1),children:jsxRuntimeExports.jsx(InlineIcon$2,{...iconCircleArrowDown})})," ",jsxRuntimeExports.jsx("button",{type:"button",className:this.props.isFirst?"hidden":"",onClick:___default.default.partial(this.props.onMove,-1),children:jsxRuntimeExports.jsx(InlineIcon$2,{...iconCircleArrowUp})})," ",this.props.isLast&&jsxRuntimeExports.jsx(InfoTip$p,{children:jsxRuntimeExports.jsx("p",{children:"The last hint is automatically bolded."})})]}),jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.replace,onChange:this.handleChange}),"Replace previous hint",this.props.showRemoveButton&&jsxRuntimeExports.jsxs("button",{type:"button",className:"remove-hint simple-button orange",onClick:this.props.onRemove,children:[jsxRuntimeExports.jsx(InlineIcon$2,{...perseus.iconTrash}),"Remove this hint"," "]})]})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.handleChange=e=>{this.props.onChange({replace:e.target.checked});},this.focus=()=>{this.editor.current?.focus();},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=options=>{return this.editor.current?.serialize(options)};}}HintEditor.defaultProps={className:"",content:"",replace:false,showMoveButtons:true,showTitle:true,showRemoveButton:true};class CombinedHintEditor extends React__namespace.Component{componentDidMount(){this.updatePreview();}componentDidUpdate(){this.updatePreview();}render(){const isMobile=this.props.deviceType==="phone"||this.props.deviceType==="tablet";return jsxRuntimeExports.jsxs("div",{className:"perseus-combined-hint-editor "+"perseus-editor-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(HintEditor,{ref:this.editor,itemId:this.props.itemId,isFirst:this.props.isFirst,isLast:this.props.isLast,widgets:this.props.hint.widgets,content:this.props.hint.content,images:this.props.hint.images,replace:this.props.hint.replace,imageUploader:this.props.imageUploader,onChange:this.props.onChange,onRemove:this.props.onRemove,onMove:this.props.onMove,apiOptions:this.props.apiOptions,widgetIsOpen:this.props.widgetIsOpen})}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell",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})})})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.frame=React__namespace.createRef(),this.updatePreview=()=>{const shouldBold=this.props.isLast&&!/\*\*/.test(this.props.hint.content);this.frame.current?.sendNewData({type:"hint",data:{hint:this.props.hint,bold:shouldBold,pos:this.props.pos,apiOptions:this.props.apiOptions,linterContext:{contentType:"hint",highlightLint:this.props.highlightLint,paths:this.props.contentPaths}}});},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=options=>{return this.editor.current?.serialize(options)},this.focus=()=>{this.editor.current?.focus();};}}CombinedHintEditor.defaultProps={highlightLint:false};class CombinedHintsEditor extends React__namespace.Component{render(){const{itemId,hints}=this.props;const editingDisabled=this.props.apiOptions?.editingDisabled??false;const hintElems=___default.default.map(hints,function(hint,i){return jsxRuntimeExports.jsx("fieldset",{disabled:editingDisabled,children:jsxRuntimeExports.jsx(CombinedHintEditor,{ref:"hintEditor"+i,isFirst:i===0,isLast:i+1===hints.length,itemId:itemId,hint:hint,pos:i,imageUploader:this.props.imageUploader,onChange:this.handleHintChange.bind(this,i),onRemove:this.handleHintRemove.bind(this,i),onMove:this.handleHintMove.bind(this,i),deviceType:this.props.deviceType,apiOptions:this.props.apiOptions,highlightLint:this.props.highlightLint,previewURL:this.props.previewURL,contentPaths:[],widgetIsOpen:this.props.widgetIsOpen})},"hintEditor"+i)},this);return jsxRuntimeExports.jsxs("div",{className:"perseus-hints-editor perseus-editor-table",children:[hintElems,jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"add-hint-container perseus-editor-left-cell",children:jsxRuntimeExports.jsxs("button",{type:"button",className:"add-hint simple-button orange",disabled:editingDisabled,onClick:this.addHint,children:[jsxRuntimeExports.jsx(InlineIcon$2,{...iconPlus})," Add a hint"]})})})]})}constructor(...args){super(...args),this.handleHintChange=(i,newProps,cb,silent)=>{const hints=[...this.props.hints];hints[i]=___default.default.extend({},this.serializeHint(i,{keepDeletedWidgets:true}),newProps);this.props.onChange({hints:hints},cb,silent);},this.handleHintRemove=i=>{if(!confirm("Are you sure you want to delete this hint?")){return}const hints=[...this.props.hints];hints.splice(i,1);this.props.onChange({hints:hints});},this.handleHintMove=(i,dir)=>{const hints=[...this.props.hints];const hint=hints.splice(i,1)[0];hints.splice(i+dir,0,hint);this.props.onChange({hints:hints},()=>{this.refs["hintEditor"+(i+dir)].focus();});},this.addHint=()=>{const hint={content:"",images:{},widgets:{}};const hints=[...this.props.hints,hint];this.props.onChange({hints:hints},()=>{const i=hints.length-1;this.refs["hintEditor"+i].focus();});},this.getSaveWarnings=()=>{return ___default.default.chain(this.props.hints).map((hint,i)=>{return ___default.default.map(this.refs["hintEditor"+i].getSaveWarnings(),issue=>"Hint "+(i+1)+": "+issue)}).flatten(true).value()},this.serialize=options=>{return this.props.hints.map((hint,i)=>{return this.serializeHint(i,options)})},this.serializeHint=(index,options)=>{return this.refs["hintEditor"+index].serialize(options)};}}CombinedHintsEditor.HintEditor=HintEditor;CombinedHintsEditor.defaultProps={onChange:()=>{},hints:[],highlightLint:false};