@khanacademy/perseus-editor 44.0.0 → 44.0.2

package/dist/index.js

@@ -35,7 +35,6 @@ import { Checkbox as Checkbox$1, RadioGroup, Choice, TextField, LabeledTextField
 import { StatefulKeypadContextProvider, KeypadContext } from '@khanacademy/keypad-context';
 import { MobileKeypad, useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { useActionScheduler } from '@khanacademy/wonder-blocks-timing';
-import PropTypes from 'prop-types';
 import * as KAS from '@khanacademy/kas';
 import { LabeledField } from '@khanacademy/wonder-blocks-labeled-field';
 import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
@@ -67,7 +66,7 @@ import minusCircleIcon from '@phosphor-icons/core/bold/minus-circle-bold.svg';
 import arrowDown from '@phosphor-icons/core/regular/arrow-down.svg';
 import arrowUp from '@phosphor-icons/core/regular/arrow-up.svg';
 
-const libName="@khanacademy/perseus-editor";const libVersion="44.0.0";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="44.0.2";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1557,7 +1556,7 @@ const{TextInput: TextInput$5}=components;class DefinitionEditor extends React.Co
 
 class DeprecatedStandinEditor extends React.Component{serialize(){return EditorJsonify.serialize.call(this)}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("p",{children:"This widget has been deprecated and removed"}),jsxRuntimeExports.jsx("p",{children:"Learners will see a message and they will not be graded on this part. Please replace this widget with a supported one."})]})}}
 
-class DropdownEditor extends React.Component{handleChange(changed){this.props.onChange({choices:this.props.choices,placeholder:this.props.placeholder,visibleLabel:this.props.visibleLabel,ariaLabel:this.props.ariaLabel,...changed});}onCorrectChange(choiceIndex){const choices=this.props.choices.map(function(choice,i){return _.extend({},choice,{correct:i===choiceIndex})});this.handleChange({choices:choices});}onContentChange(choiceIndex,newContent){const choices=this.props.choices.slice();const choice=_.clone(choices[choiceIndex]);choice.content=newContent;choices[choiceIndex]=choice;this.handleChange({choices:choices});}render(){const dropdownGroupName=_.uniqueId("perseus_dropdown_");const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-dropdown",children:[jsxRuntimeExports.jsxs("div",{className:"dropdown-info",children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Dropdown"}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["The drop down is useful for making inequalities in a custom format. We normally use the symbols ","<",","," ",">",', ≤, ≥ (in that order) which you can copy into the choices. When possible, use the "multiple choice" answer type instead.']})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Visible label",jsxRuntimeExports.jsx(TextField,{value:this.props.visibleLabel??"",onChange:visibleLabel=>this.handleChange({visibleLabel})})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Optional visible label"})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Aria label",jsxRuntimeExports.jsx(TextField,{value:this.props.ariaLabel??"",onChange:ariaLabel=>this.handleChange({ariaLabel}),type:"text"})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writing accessible labels, please see"," ",jsxRuntimeExports.jsx("a",{href:"https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",target:"_blank",rel:"noreferrer",children:"this article."})," ",'If left blank, the value will default to "Select an answer".']})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Placeholder",jsxRuntimeExports.jsx(TextField,{value:this.props.placeholder,onChange:placeholder=>this.handleChange({placeholder}),placeholder:"Placeholder value"})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."})})]}),jsxRuntimeExports.jsx("div",{className:"clearfix"}),jsxRuntimeExports.jsx(BodyText,{children:"Choices"}),jsxRuntimeExports.jsx("ul",{className:"dropdown-choices",children:this.props.choices.map((choice,i)=>{const choiceBackgroundColor=choice.correct?semanticColor.core.background.success.subtle:semanticColor.core.background.critical.subtle;return jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("div",{className:"dropdown-choice",children:[jsxRuntimeExports.jsx("input",{type:"radio",name:dropdownGroupName,checked:choice.correct,onChange:()=>this.onCorrectChange(i)}),jsxRuntimeExports.jsx(TextField,{value:choice.content,"aria-label":`Choice ${i+1} content`,disabled:editingDisabled,style:{backgroundColor:choiceBackgroundColor},onChange:newContent=>this.onContentChange(i,newContent)}),jsxRuntimeExports.jsx(IconButton,{icon:trashIcon,"aria-label":"Delete choice",disabled:editingDisabled,kind:"tertiary",size:"small",onClick:()=>this.removeChoice(i)})]})},""+i)},this)}),jsxRuntimeExports.jsx("div",{className:"add-choice-container",children:jsxRuntimeExports.jsx(Button,{kind:"secondary",disabled:editingDisabled,onClick:this.addChoice,startIcon:plusIcon,children:"Add a choice"})})]})}constructor(...args){super(...args),this.addChoice=()=>{const choices=this.props.choices;const blankChoice={content:"",correct:false};this.handleChange({choices:choices.concat([blankChoice])});},this.removeChoice=choiceIndex=>{const choices=[...this.props.choices];choices.splice(choiceIndex,1);this.handleChange({choices});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}DropdownEditor.propTypes={choices:PropTypes.arrayOf(PropTypes.shape({content:PropTypes.string,correct:PropTypes.bool})),placeholder:PropTypes.string};DropdownEditor.defaultProps=dropdownLogic.defaultWidgetOptions;
+class DropdownEditor extends React.Component{handleChange(changed){this.props.onChange({choices:this.props.choices,placeholder:this.props.placeholder,visibleLabel:this.props.visibleLabel,ariaLabel:this.props.ariaLabel,...changed});}onCorrectChange(choiceIndex){const choices=this.props.choices.map(function(choice,i){return _.extend({},choice,{correct:i===choiceIndex})});this.handleChange({choices:choices});}onContentChange(choiceIndex,newContent){const choices=this.props.choices.slice();const choice=_.clone(choices[choiceIndex]);choice.content=newContent;choices[choiceIndex]=choice;this.handleChange({choices:choices});}render(){const dropdownGroupName=_.uniqueId("perseus_dropdown_");const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-dropdown",children:[jsxRuntimeExports.jsxs("div",{className:"dropdown-info",children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Dropdown"}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["The drop down is useful for making inequalities in a custom format. We normally use the symbols ","<",","," ",">",', ≤, ≥ (in that order) which you can copy into the choices. When possible, use the "multiple choice" answer type instead.']})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Visible label",jsxRuntimeExports.jsx(TextField,{value:this.props.visibleLabel??"",onChange:visibleLabel=>this.handleChange({visibleLabel})})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Optional visible label"})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Aria label",jsxRuntimeExports.jsx(TextField,{value:this.props.ariaLabel??"",onChange:ariaLabel=>this.handleChange({ariaLabel}),type:"text"})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writing accessible labels, please see"," ",jsxRuntimeExports.jsx("a",{href:"https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",target:"_blank",rel:"noreferrer",children:"this article."})," ",'If left blank, the value will default to "Select an answer".']})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Placeholder",jsxRuntimeExports.jsx(TextField,{value:this.props.placeholder,onChange:placeholder=>this.handleChange({placeholder}),placeholder:"Placeholder value"})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."})})]}),jsxRuntimeExports.jsx("div",{className:"clearfix"}),jsxRuntimeExports.jsx(BodyText,{children:"Choices"}),jsxRuntimeExports.jsx("ul",{className:"dropdown-choices",children:this.props.choices.map((choice,i)=>{const choiceBackgroundColor=choice.correct?semanticColor.core.background.success.subtle:semanticColor.core.background.critical.subtle;return jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("div",{className:"dropdown-choice",children:[jsxRuntimeExports.jsx("input",{type:"radio",name:dropdownGroupName,checked:choice.correct,onChange:()=>this.onCorrectChange(i)}),jsxRuntimeExports.jsx(TextField,{value:choice.content,"aria-label":`Choice ${i+1} content`,disabled:editingDisabled,style:{backgroundColor:choiceBackgroundColor},onChange:newContent=>this.onContentChange(i,newContent)}),jsxRuntimeExports.jsx(IconButton,{icon:trashIcon,"aria-label":"Delete choice",disabled:editingDisabled,kind:"tertiary",size:"small",onClick:()=>this.removeChoice(i)})]})},""+i)},this)}),jsxRuntimeExports.jsx("div",{className:"add-choice-container",children:jsxRuntimeExports.jsx(Button,{kind:"secondary",disabled:editingDisabled,onClick:this.addChoice,startIcon:plusIcon,children:"Add a choice"})})]})}constructor(...args){super(...args),this.addChoice=()=>{const choices=this.props.choices;const blankChoice={content:"",correct:false};this.handleChange({choices:choices.concat([blankChoice])});},this.removeChoice=choiceIndex=>{const choices=[...this.props.choices];choices.splice(choiceIndex,1);this.handleChange({choices});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}DropdownEditor.defaultProps=dropdownLogic.defaultWidgetOptions;
 
 const{TextInput: TextInput$4}=components;class ExplanationEditor extends React.Component{handleChange(changes){this.props.onChange({showPrompt:this.props.showPrompt,hidePrompt:this.props.hidePrompt,explanation:this.props.explanation,widgets:this.props.widgets,...changes});}render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-explanation-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to show explanation:"," ",jsxRuntimeExports.jsx(TextInput$4,{value:this.props.showPrompt,onChange:showPrompt=>this.handleChange({showPrompt})})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to hide explanation:"," ",jsxRuntimeExports.jsx(TextInput$4,{value:this.props.hidePrompt,onChange:hidePrompt=>this.handleChange({hidePrompt})})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:this.props.explanation,widgets:this.props.widgets,widgetEnabled:true,onChange:props=>{const newProps={};if(_.has(props,"content")){newProps.explanation=props.content;}if(_.has(props,"widgets")){newProps.widgets=props.widgets;}this.handleChange(newProps);}})})]})}constructor(...args){super(...args),this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}ExplanationEditor.defaultProps=explanationLogic.defaultWidgetOptions;
 
@@ -1877,7 +1876,7 @@ var styles = {"editor":"perseus_nJ-Uq5eT","section":"perseus_vTiphIsj","cards":"
 
 const minCards=2;const defaultOptions=sorterLogic.defaultWidgetOptions;const layoutOptions={horizontal:"Horizontal",vertical:"Vertical"};const SorterEditor=React.forwardRef(function SorterEditor({correct=defaultOptions.correct,layout=defaultOptions.layout,padding=defaultOptions.padding,onChange},ref){React.useImperativeHandle(ref,()=>({serialize:()=>{return {correct,layout,padding}},getSaveWarnings:()=>{const warnings=[];if(correct.length<minCards){warnings.push(`Sorter requires at least ${minCards} cards.`);}if(correct.some(card=>card.trim()==="")){warnings.push("Sorter cards cannot be blank.");}return warnings}}),[correct,layout,padding]);const onCardChange=(index,value)=>{const newCorrect=[...correct];newCorrect[index]=value;onChange({correct:newCorrect});};const onAddCard=()=>{if(correct.length>=SORTER_MAX_CARDS){return}onChange({correct:[...correct,""]});};const onMoveCard=(index,offset)=>{const newCorrect=[...correct];const newIndex=index+offset;[newCorrect[index],newCorrect[newIndex]]=[newCorrect[newIndex],newCorrect[index]];onChange({correct:newCorrect});};const onDeleteCard=index=>{onChange({correct:correct.filter((card,i)=>i!==index)});};return jsxRuntimeExports.jsxs(View,{className:styles.editor,children:[jsxRuntimeExports.jsxs(View,{className:styles.section,children:[jsxRuntimeExports.jsxs("div",{children:["Correct answer"," ",jsxRuntimeExports.jsxs(InfoTip,{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("p",{children:"For horizontal orientation, the top input represents the leftmost card and the bottom input represents the rightmost card."})]})]}),jsxRuntimeExports.jsx(View,{tag:"ol",className:styles.cards,children:correct.map((card,i)=>jsxRuntimeExports.jsx(CardEditor,{index:i,value:card,isFirst:i===0,isLast:i===correct.length-1,onChange:value=>onCardChange(i,value),onMoveUp:()=>onMoveCard(i,-1),onMoveDown:()=>onMoveCard(i,1),onDelete:()=>onDeleteCard(i)},i))}),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,className:styles.addCard,disabled:correct.length>=SORTER_MAX_CARDS,onClick:onAddCard,children:"Add a card"})]}),jsxRuntimeExports.jsx(LabeledField,{label:"Layout",field:jsxRuntimeExports.jsx(TypedSingleSelect,{options:layoutOptions,selectedValue:layout,onChange:newLayout=>onChange({layout:newLayout})}),contextLabel:jsxRuntimeExports.jsx(InfoTip,{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."})}),styles:{contextLabel:{marginInlineEnd:"auto"}}}),layout==="horizontal"&&correct.length>SORTER_MAX_HORIZONTAL_CARDS&&jsxRuntimeExports.jsx(Banner,{kind:"warning",text:`Sorter widget with more than ${SORTER_MAX_HORIZONTAL_CARDS} options will display vertically, even if the layout is set to horizontal.`}),jsxRuntimeExports.jsxs("div",{className:styles.row,children:[jsxRuntimeExports.jsx(Checkbox$1,{label:"Padding",checked:padding,onChange:value=>{onChange({padding:value});}}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Padding is good for text, but not needed for images."})})]})]})});var SorterEditor$1 = Object.assign(SorterEditor,{defaultProps:defaultOptions});
 
-const{NumberInput}=components;const Table=TableWidget.widget;class TableEditor extends React.Component{render(){const tableProps={options:{headers:this.props.headers,rows:this.props.rows,columns:this.props.columns,answers:this.props.answers},onChange:this.props.onChange,userInput:this.props.answers,handleUserInput:userInput=>{if(this.props.apiOptions?.editingDisabled){return}this.props.onChange({answers:userInput});},apiOptions:this.props.apiOptions,editableHeaders:true,onFocus:()=>{},onBlur:()=>{},trackInteraction:()=>{},Editor:Editor};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of columns:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:this.numberOfColumns,value:this.props.columns,onChange:val=>{if(val){this.onSizeInput(this.props.rows,val);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of rows:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:"numberOfRows",value:this.props.rows,onChange:val=>{if(val){this.onSizeInput(val,this.props.columns);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsxs("div",{children:[" ","Table of answers:"," ",jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."})})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(Table,{...tableProps})})]})}constructor(...args){super(...args),this.numberOfColumns=React.createRef(),this.focus=()=>{this.numberOfColumns.current?.focus();},this.onSizeInput=(numRawRows,numRawColumns)=>{let rows=+numRawRows||0;let columns=+numRawColumns||0;rows=Math.min(Math.max(1,rows),30);columns=Math.min(Math.max(1,columns),6);const oldColumns=this.props.columns;const oldRows=this.props.rows;const answers=this.props.answers;if(rows<=oldRows){answers.length=rows;}else {_(rows-oldRows).times(function(){answers.push(Util.stringArrayOfSize(oldColumns));});}function fixColumnSizing(array){if(columns<=oldColumns){array.length=columns;}else {_(columns-oldColumns).times(function(){array.push("");});}}const headers=this.props.headers;fixColumnSizing(headers);_.each(answers,fixColumnSizing);this.props.onChange({rows:rows,columns:columns,answers:answers,headers:headers});},this.serialize=()=>{const json=_.pick(this.props,"headers","rows","columns");return _.extend({},json,{answers:this.props.answers.map(_.clone)})};}}TableEditor.propTypes={rows:PropTypes.number,columns:PropTypes.number,headers:PropTypes.arrayOf(PropTypes.string),answers:PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))};TableEditor.defaultProps=tableLogic.defaultWidgetOptions;
+const{NumberInput}=components;const Table=TableWidget.widget;class TableEditor extends React.Component{render(){const tableProps={options:{headers:this.props.headers,rows:this.props.rows,columns:this.props.columns,answers:this.props.answers},onChange:this.props.onChange,userInput:this.props.answers,handleUserInput:userInput=>{if(this.props.apiOptions?.editingDisabled){return}this.props.onChange({answers:userInput});},apiOptions:this.props.apiOptions,editableHeaders:true,onFocus:()=>{},onBlur:()=>{},trackInteraction:()=>{},Editor:Editor};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of columns:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:this.numberOfColumns,value:this.props.columns,onChange:val=>{if(val){this.onSizeInput(this.props.rows,val);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of rows:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:"numberOfRows",value:this.props.rows,onChange:val=>{if(val){this.onSizeInput(val,this.props.columns);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsxs("div",{children:[" ","Table of answers:"," ",jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."})})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(Table,{...tableProps})})]})}constructor(...args){super(...args),this.numberOfColumns=React.createRef(),this.focus=()=>{this.numberOfColumns.current?.focus();},this.onSizeInput=(numRawRows,numRawColumns)=>{let rows=+numRawRows||0;let columns=+numRawColumns||0;rows=Math.min(Math.max(1,rows),30);columns=Math.min(Math.max(1,columns),6);const oldColumns=this.props.columns;const oldRows=this.props.rows;const answers=this.props.answers;if(rows<=oldRows){answers.length=rows;}else {_(rows-oldRows).times(function(){answers.push(Util.stringArrayOfSize(oldColumns));});}function fixColumnSizing(array){if(columns<=oldColumns){array.length=columns;}else {_(columns-oldColumns).times(function(){array.push("");});}}const headers=this.props.headers;fixColumnSizing(headers);_.each(answers,fixColumnSizing);this.props.onChange({rows:rows,columns:columns,answers:answers,headers:headers});},this.serialize=()=>{const json=_.pick(this.props,"headers","rows","columns");return _.extend({},json,{answers:this.props.answers.map(_.clone)})};}}TableEditor.defaultProps=tableLogic.defaultWidgetOptions;
 
 const KA_VIDEO_URL=/khanacademy\.org\/.*\/v\/(.*)$/;function getSlugFromUrl(url){const match=KA_VIDEO_URL.exec(url);if(match){return match[1]}return url}function VideoSettings(props){const[inputValue,setInputValue]=React.useState(props.location);function handleUrlChange(url){props.onChange({location:getSlugFromUrl(url)});}return jsxRuntimeExports.jsx(LabeledField,{label:"KA Video Slug",description:"KA video URLs will be converted to just the slug.",field:jsxRuntimeExports.jsx(TextArea,{value:inputValue,onChange:setInputValue,onBlur:e=>handleUrlChange(e.target.value),autoResize:true})})}