@khanacademy/perseus-editor 25.0.2 → 25.0.3

package/dist/es/index.js

@@ -58,7 +58,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 import Link$1 from '@khanacademy/wonder-blocks-link';
 import plusIcon from '@phosphor-icons/core/bold/plus-bold.svg';
 
-const libName="@khanacademy/perseus-editor";const libVersion="25.0.2";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="25.0.3";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1683,7 +1683,7 @@ const{InfoTip: InfoTip$3,NumberInput: NumberInput$2,RangeInput,TextListEditor: T
 
 const{NumberInput: NumberInput$1,TextInput}=components;function validateOptions(height,programID){const errors=[];if(programID===""){errors.push("The program ID is required.");}if(!Number.isInteger(height)||height<1){errors.push("The height must be a positive integer.");}return errors}class PythonProgramEditor extends React.Component{serialize(){return {programID:this.props.programID,height:this.props.height}}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["User Program ID:"," ",jsxRuntimeExports.jsx(TextInput,{value:this.props.programID,onChange:this.change("programID"),placeholder:"123"})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Height:"," ",jsxRuntimeExports.jsx(NumberInput$1,{value:this.props.height,onChange:this.change("height"),placeholder:"400"})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.getSaveWarnings=()=>{return validateOptions(this.props.height,this.props.programID)};}}PythonProgramEditor.widgetName="python-program";PythonProgramEditor.defaultProps=pythonProgramLogic.defaultWidgetOptions;
 
-class ChoiceEditor extends React.Component{render(){const checkedClass=this.props.choice.correct?"correct":"incorrect";let placeholder="Type a choice here...";if(this.props.choice.isNoneOfTheAbove){placeholder=this.props.choice.correct?"Type the answer to reveal to the user...":"None of the above";}const editor=jsxRuntimeExports.jsx(Editor,{ref:"content-editor",apiOptions:this.props.apiOptions,content:this.props.choice.content||"",widgetEnabled:false,placeholder:placeholder,disabled:this.props.choice.isNoneOfTheAbove&&!this.props.choice.correct,onChange:this.props.onContentChange});const clueEditor=jsxRuntimeExports.jsx(Editor,{ref:"clue-editor",apiOptions:this.props.apiOptions,content:this.props.choice.clue||"",widgetEnabled:false,placeholder:`Why is this choice ${checkedClass}?`,onChange:this.props.onClueChange});const deleteButton=jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",startIcon:trashIcon$1,onClick:this.props.onDelete,children:"Remove this choice"});return jsxRuntimeExports.jsxs("div",{className:"choice-clue-editors",children:[jsxRuntimeExports.jsx("div",{className:`choice-editor ${checkedClass}`,children:editor}),jsxRuntimeExports.jsx("div",{className:"clue-editor",children:clueEditor}),this.props.showDelete&&deleteButton]})}}class RadioEditor extends React.Component{onClueChange(choiceIndex,newClue){const choices=this.props.choices.slice();choices[choiceIndex]=_.extend({},choices[choiceIndex],{clue:newClue});if(newClue===""){delete choices[choiceIndex].clue;}this.props.onChange({choices:choices});}serialize(){const{choices,randomize,multipleSelect,countChoices,displayCount,hasNoneOfTheAbove,deselectEnabled}=this.props;return {choices,randomize,multipleSelect,countChoices,displayCount,hasNoneOfTheAbove,deselectEnabled,numCorrect:deriveNumCorrect({...this.props,numCorrect:undefined})}}render(){const numCorrect=_.reduce(this.props.choices,function(memo,choice){return choice.correct?memo+1:memo},0);return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Link$1,{href:"https://www.khanacademy.org/internal-courses/content-creation-best-practices/xe46daa512cd9c644:question-writing/xe46daa512cd9c644:multiple-choice/a/stems",target:"_blank",children:"Multiple choice best practices"}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx(LabeledSwitch,{label:"Randomize order",checked:this.props.randomize,onChange:value=>{this.props.onChange({randomize:value});},style:{marginBlockEnd:sizing.size_060}}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"Multiple selections",checked:this.props.multipleSelect,onChange:value=>{this.onMultipleSelectChange({multipleSelect:value});},style:{marginBlockEnd:sizing.size_060}}),this.props.multipleSelect&&jsxRuntimeExports.jsx(LabeledSwitch,{label:"Specify number correct",checked:this.props.countChoices,onChange:value=>{this.onCountChoicesChange({countChoices:value});},style:{marginBlockEnd:sizing.size_060}})]}),jsxRuntimeExports.jsx(BaseRadio,{multipleSelect:this.props.multipleSelect,countChoices:this.props.countChoices,numCorrect:numCorrect,editMode:true,labelWrap:false,apiOptions:this.props.apiOptions,reviewMode:false,choices:this.props.choices.map((choice,i)=>{return {content:jsxRuntimeExports.jsx(ChoiceEditor,{ref:`choice-editor${i}`,apiOptions:this.props.apiOptions,choice:choice,onContentChange:newProps=>{if(newProps.content!=null){this.onContentChange(i,newProps.content);}},onClueChange:newProps=>{if(newProps.content!=null){this.onClueChange(i,newProps.content);}},onDelete:()=>this.onDelete(i),showDelete:this.props.choices.length>=2}),isNoneOfTheAbove:choice.isNoneOfTheAbove,checked:choice.correct}},this),onChange:this.onChange}),jsxRuntimeExports.jsxs("div",{className:"add-choice-container",children:[jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",startIcon:plusIcon,onClick:this.addChoice.bind(this,false),children:"Add a choice"}),jsxRuntimeExports.jsx(Strut,{size:spacing.large_24}),jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",startIcon:plusIcon,onClick:this.addChoice.bind(this,true),children:"None of the above"})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.onMultipleSelectChange=allowMultiple=>{allowMultiple=allowMultiple.multipleSelect;const numCorrect=_.reduce(this.props.choices,function(memo,choice){return choice.correct?memo+1:memo},0);if(!allowMultiple&&numCorrect>1){const choices=_.map(this.props.choices,function(choice){return _.defaults({correct:false},choice)});this.props.onChange({multipleSelect:allowMultiple,choices:choices});}else {this.props.onChange({multipleSelect:allowMultiple});}},this.onCountChoicesChange=count=>{count=count.countChoices;this.props.onChange({countChoices:count});},this.onChange=({checked})=>{const choices=this.props.choices.map((choice,i)=>{return {...choice,correct:checked[i],content:choice.isNoneOfTheAbove&&!checked[i]?"":choice.content}});this.props.onChange({choices:choices,numCorrect:deriveNumCorrect({...this.props,choices,numCorrect:undefined})});},this.onContentChange=(choiceIndex,newContent)=>{const choices=this.props.choices.slice();choices[choiceIndex]=_.extend({},choices[choiceIndex],{content:newContent});this.props.onChange({choices:choices});},this.onDelete=choiceIndex=>{const choices=this.props.choices.slice();const deleted=choices[choiceIndex];choices.splice(choiceIndex,1);this.props.onChange({choices:choices,hasNoneOfTheAbove:this.props.hasNoneOfTheAbove&&!deleted.isNoneOfTheAbove});},this.addChoice=(noneOfTheAbove,e)=>{e.preventDefault();const choices=this.props.choices.slice();const newChoice={isNoneOfTheAbove:noneOfTheAbove,content:""};const addIndex=choices.length-(this.props.hasNoneOfTheAbove?1:0);choices.splice(addIndex,0,newChoice);this.props.onChange({choices:choices,hasNoneOfTheAbove:noneOfTheAbove||this.props.hasNoneOfTheAbove},()=>{this.refs[`choice-editor${addIndex}`].refs["content-editor"].focus();});},this.setDisplayCount=num=>{this.props.onChange({displayCount:num});},this.focus=()=>{this.refs["choice-editor0"].refs["content-editor"].focus();return true},this.getSaveWarnings=()=>{if(!_.some(_.pluck(this.props.choices,"correct"))){return ["No choice is marked as correct."]}return []};}}RadioEditor.widgetName="radio";RadioEditor.defaultProps=radioLogic.defaultWidgetOptions;
+class ChoiceEditor extends React.Component{render(){const checkedClass=this.props.choice.correct?"correct":"incorrect";let placeholder="Type a choice here...";if(this.props.choice.isNoneOfTheAbove){placeholder=this.props.choice.correct?"Type the answer to reveal to the user...":"None of the above";}const editor=jsxRuntimeExports.jsx(Editor,{ref:"content-editor",apiOptions:this.props.apiOptions,content:this.props.choice.content||"",widgetEnabled:false,placeholder:placeholder,disabled:this.props.choice.isNoneOfTheAbove&&!this.props.choice.correct,onChange:this.props.onContentChange});const clueEditor=jsxRuntimeExports.jsx(Editor,{ref:"clue-editor",apiOptions:this.props.apiOptions,content:this.props.choice.clue||"",widgetEnabled:false,placeholder:`Why is this choice ${checkedClass}?`,onChange:this.props.onClueChange});const deleteLink=jsxRuntimeExports.jsx("a",{className:"simple-button orange delete-choice",href:"#",onClick:e=>{e.stopPropagation();e.preventDefault();this.props.onDelete();},title:"Remove this choice",children:"Remove this choice"});return jsxRuntimeExports.jsxs("div",{className:"choice-clue-editors",children:[jsxRuntimeExports.jsx("div",{className:`choice-editor ${checkedClass}`,children:editor}),jsxRuntimeExports.jsx("div",{className:"clue-editor",children:clueEditor}),this.props.showDelete&&deleteLink]})}}class RadioEditor extends React.Component{onClueChange(choiceIndex,newClue){const choices=this.props.choices.slice();choices[choiceIndex]=_.extend({},choices[choiceIndex],{clue:newClue});if(newClue===""){delete choices[choiceIndex].clue;}this.props.onChange({choices:choices});}serialize(){const{choices,randomize,multipleSelect,countChoices,displayCount,hasNoneOfTheAbove,deselectEnabled}=this.props;return {choices,randomize,multipleSelect,countChoices,displayCount,hasNoneOfTheAbove,deselectEnabled,numCorrect:deriveNumCorrect({...this.props,numCorrect:undefined})}}render(){const numCorrect=_.reduce(this.props.choices,function(memo,choice){return choice.correct?memo+1:memo},0);return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Link$1,{href:"https://www.khanacademy.org/internal-courses/content-creation-best-practices/xe46daa512cd9c644:question-writing/xe46daa512cd9c644:multiple-choice/a/stems",target:"_blank",children:"Multiple choice best practices"}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx(LabeledSwitch,{label:"Randomize order",checked:this.props.randomize,onChange:value=>{this.props.onChange({randomize:value});},style:{marginBlockEnd:sizing.size_060}}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"Multiple selections",checked:this.props.multipleSelect,onChange:value=>{this.onMultipleSelectChange({multipleSelect:value});},style:{marginBlockEnd:sizing.size_060}}),this.props.multipleSelect&&jsxRuntimeExports.jsx(LabeledSwitch,{label:"Specify number correct",checked:this.props.countChoices,onChange:value=>{this.onCountChoicesChange({countChoices:value});},style:{marginBlockEnd:sizing.size_060}})]}),jsxRuntimeExports.jsx(BaseRadio,{multipleSelect:this.props.multipleSelect,countChoices:this.props.countChoices,numCorrect:numCorrect,editMode:true,labelWrap:false,apiOptions:this.props.apiOptions,reviewMode:false,choices:this.props.choices.map((choice,i)=>{return {content:jsxRuntimeExports.jsx(ChoiceEditor,{ref:`choice-editor${i}`,apiOptions:this.props.apiOptions,choice:choice,onContentChange:newProps=>{if(newProps.content!=null){this.onContentChange(i,newProps.content);}},onClueChange:newProps=>{if(newProps.content!=null){this.onClueChange(i,newProps.content);}},onDelete:()=>this.onDelete(i),showDelete:this.props.choices.length>=2}),isNoneOfTheAbove:choice.isNoneOfTheAbove,checked:choice.correct}},this),onChange:this.onChange}),jsxRuntimeExports.jsxs("div",{className:"add-choice-container",children:[jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",startIcon:plusIcon,onClick:this.addChoice.bind(this,false),children:"Add a choice"}),jsxRuntimeExports.jsx(Strut,{size:spacing.large_24}),jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",startIcon:plusIcon,onClick:this.addChoice.bind(this,true),children:"None of the above"})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.onMultipleSelectChange=allowMultiple=>{allowMultiple=allowMultiple.multipleSelect;const numCorrect=_.reduce(this.props.choices,function(memo,choice){return choice.correct?memo+1:memo},0);if(!allowMultiple&&numCorrect>1){const choices=_.map(this.props.choices,function(choice){return _.defaults({correct:false},choice)});this.props.onChange({multipleSelect:allowMultiple,choices:choices});}else {this.props.onChange({multipleSelect:allowMultiple});}},this.onCountChoicesChange=count=>{count=count.countChoices;this.props.onChange({countChoices:count});},this.onChange=({checked})=>{const choices=this.props.choices.map((choice,i)=>{return {...choice,correct:checked[i],content:choice.isNoneOfTheAbove&&!checked[i]?"":choice.content}});this.props.onChange({choices:choices,numCorrect:deriveNumCorrect({...this.props,choices,numCorrect:undefined})});},this.onContentChange=(choiceIndex,newContent)=>{const choices=this.props.choices.slice();choices[choiceIndex]=_.extend({},choices[choiceIndex],{content:newContent});this.props.onChange({choices:choices});},this.onDelete=choiceIndex=>{const choices=this.props.choices.slice();const deleted=choices[choiceIndex];choices.splice(choiceIndex,1);this.props.onChange({choices:choices,hasNoneOfTheAbove:this.props.hasNoneOfTheAbove&&!deleted.isNoneOfTheAbove});},this.addChoice=(noneOfTheAbove,e)=>{e.preventDefault();const choices=this.props.choices.slice();const newChoice={isNoneOfTheAbove:noneOfTheAbove,content:""};const addIndex=choices.length-(this.props.hasNoneOfTheAbove?1:0);choices.splice(addIndex,0,newChoice);this.props.onChange({choices:choices,hasNoneOfTheAbove:noneOfTheAbove||this.props.hasNoneOfTheAbove},()=>{this.refs[`choice-editor${addIndex}`].refs["content-editor"].focus();});},this.setDisplayCount=num=>{this.props.onChange({displayCount:num});},this.focus=()=>{this.refs["choice-editor0"].refs["content-editor"].focus();return true},this.getSaveWarnings=()=>{if(!_.some(_.pluck(this.props.choices,"correct"))){return ["No choice is marked as correct."]}return []};}}RadioEditor.widgetName="radio";RadioEditor.defaultProps=radioLogic.defaultWidgetOptions;
 
 const{InfoTip: InfoTip$2,TextListEditor}=components;const HORIZONTAL="horizontal";const VERTICAL="vertical";class SorterEditor extends React.Component{render(){const editor=this;return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{children:[" ","Correct answer:"," ",jsxRuntimeExports.jsx(InfoTip$2,{children:jsxRuntimeExports.jsx("p",{children:"Enter the correct answer (in the correct order) here. The preview on the right will have the cards in a randomized order, which is how the student will see them."})})]}),jsxRuntimeExports.jsx(TextListEditor,{options:this.props.correct,onChange:function(options,cb){editor.props.onChange({correct:options},cb);},layout:this.props.layout}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Layout:"," ",jsxRuntimeExports.jsxs("select",{value:this.props.layout,onChange:this.onLayoutChange,children:[jsxRuntimeExports.jsx("option",{value:HORIZONTAL,children:"Horizontal"}),jsxRuntimeExports.jsx("option",{value:VERTICAL,children:"Vertical"})]})]}),jsxRuntimeExports.jsx(InfoTip$2,{children:jsxRuntimeExports.jsx("p",{children:"Use the horizontal layout for short text and small images. The vertical layout is best for longer text and larger images."})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Checkbox$1,{label:"Padding:",checked:this.props.padding,onChange:value=>{this.props.onChange({padding:value});}}),jsxRuntimeExports.jsx(InfoTip$2,{children:jsxRuntimeExports.jsx("p",{children:"Padding is good for text, but not needed for images."})})]})]})}constructor(...args){super(...args),this.onLayoutChange=e=>{this.props.onChange({layout:e.target.value});},this.serialize=()=>{return _.pick(this.props,"correct","layout","padding")};}}SorterEditor.propTypes={correct:PropTypes.array,layout:PropTypes.oneOf([HORIZONTAL,VERTICAL]),padding:PropTypes.bool};SorterEditor.widgetName="sorter";SorterEditor.defaultProps=sorterLogic.defaultWidgetOptions;