@pie-element/image-cloze-association 10.1.2-next.1 → 10.1.2

package/configure/lib/defaults.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  model: {
+    rationale: '',
+    rationaleEnabled: true,
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: {
+        disabled: true
+      },
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    maxImageWidth: {
+      teacherInstructions: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+//# sourceMappingURL=defaults.js.map

package/configure/lib/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","names":["model","rationale","rationaleEnabled","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","configuration","baseInputConfiguration","h3","disabled","audio","video","image","textAlign","showParagraphs","separateParagraphs","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","label","settings","enabled","inputConfiguration","required","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  model: {\n    rationale: '',\n    rationaleEnabled: true,\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n  },\n  configuration: {\n    baseInputConfiguration: {\n      h3: { disabled: true },\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":";;;;;;iCAAe;EACbA,KAAK,EAAE;IACLC,SAAS,EAAE,EAAE;IACbC,gBAAgB,EAAE,IAAI;IACtBC,0BAA0B,EAAE,IAAI;IAChCC,mBAAmB,EAAE,EAAE;IACvBC,0BAA0B,EAAE;EAC9B,CAAC;EACDC,aAAa,EAAE;IACbC,sBAAsB,EAAE;MACtBC,EAAE,EAAE;QAAEC,QAAQ,EAAE;MAAK,CAAC;MACtBC,KAAK,EAAE;QAAED,QAAQ,EAAE;MAAM,CAAC;MAC1BE,KAAK,EAAE;QAAEF,QAAQ,EAAE;MAAM,CAAC;MAC1BG,KAAK,EAAE;QAAEH,QAAQ,EAAE;MAAM,CAAC;MAC1BI,SAAS,EAAE;QAAEJ,QAAQ,EAAE;MAAK,CAAC;MAC7BK,cAAc,EAAE;QAAEL,QAAQ,EAAE;MAAM,CAAC;MACnCM,kBAAkB,EAAE;QAAEN,QAAQ,EAAE;MAAK;IACvC,CAAC;IACDO,aAAa,EAAE;MACbZ,mBAAmB,EAAE;IACvB,CAAC;IACDa,cAAc,EAAE;MACdb,mBAAmB,EAAE;IACvB,CAAC;IACDc,qBAAqB,EAAE,KAAK;IAC5BC,UAAU,EAAE;MACVC,KAAK,EAAE,YAAY;MACnBC,QAAQ,EAAE,KAAK;MACfC,OAAO,EAAE;IACX,CAAC;IACDlB,mBAAmB,EAAE;MACnBiB,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE,sBAAsB;MAC7BG,kBAAkB,EAAE;QAClBb,KAAK,EAAE;UAAED,QAAQ,EAAE;QAAM,CAAC;QAC1BE,KAAK,EAAE;UAAEF,QAAQ,EAAE;QAAM,CAAC;QAC1BG,KAAK,EAAE;UAAEH,QAAQ,EAAE;QAAM;MAC3B,CAAC;MACDe,QAAQ,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACVJ,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE;IACT,CAAC;IACDM,aAAa,EAAE;MACbC,SAAS,EAAE,KAAK;MAChBC,UAAU,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACRR,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE,kBAAkB;MACzBE,OAAO,EAAE;IACX,CAAC;IACDQ,eAAe,EAAE;MACfV,KAAK,EAAE,kBAAkB;MACzBW,OAAO,EAAE;IACX;EACF;AACF,CAAC","ignoreList":[]}

package/configure/lib/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _debug = _interopRequireDefault(require("debug"));
+var _root = _interopRequireDefault(require("./root"));
+var _defaults = _interopRequireDefault(require("./defaults"));
+const log = (0, _debug.default)('image-cloze-association:configure');
+class ImageClozeAssociationConfigure extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+    this._model = ImageClozeAssociationConfigure.createDefaultModel();
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this._configuration = _defaults.default.configuration;
+  }
+  set model(s) {
+    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);
+    this._render();
+  }
+  set configuration(c) {
+    this._configuration = c;
+    this._render();
+  }
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+  }
+  onModelChanged(m, reset) {
+    this._model = m;
+    this.dispatchModelUpdated(reset);
+    this._render();
+  }
+  onConfigurationChanged(config) {
+    this._configuration = config;
+    this._render();
+  }
+
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+  insertImage(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+  }
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+  }
+  insertSound(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+  }
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+  }
+  _render() {
+    log('_render');
+    let element = /*#__PURE__*/_react.default.createElement(_root.default, {
+      disableSidePanel: this._disableSidePanel,
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged.bind(this),
+      onConfigurationChanged: this.onConfigurationChanged.bind(this),
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this)
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this)
+      }
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
+    }
+    this._root.render(element);
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = ImageClozeAssociationConfigure;
+(0, _defineProperty2.default)(ImageClozeAssociationConfigure, "createDefaultModel", (model = {}) => ({
+  ..._defaults.default.model,
+  ...model
+}));
+//# sourceMappingURL=index.js.map

package/configure/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_pieConfigureEvents","require","_react","_interopRequireDefault","_client","_debug","_root","_defaults","log","debug","ImageClozeAssociationConfigure","HTMLElement","constructor","_model","createDefaultModel","onModelChanged","bind","_configuration","sensibleDefaults","configuration","model","s","_render","c","disableSidePanel","_disableSidePanel","dispatchModelUpdated","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","onConfigurationChanged","config","insertImage","handler","InsertImageEvent","onDeleteImage","src","done","DeleteImageEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","element","React","createElement","Root","imageSupport","add","delete","uploadSoundSupport","createRoot","render","disconnectedCallback","unmount","exports","default","_defineProperty2"],"sources":["../src/index.js"],"sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('image-cloze-association:configure');\n\nexport default class ImageClozeAssociationConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = ImageClozeAssociationConfigure.createDefaultModel();\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this._configuration = sensibleDefaults.configuration;\n  }\n\n  set model(s) {\n    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged(config) {\n    this._configuration = config;\n    this._render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Root, {\n      disableSidePanel: this._disableSidePanel,\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged.bind(this),\n      onConfigurationChanged: this.onConfigurationChanged.bind(this),\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(element);\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/root.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Root = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _configUi = require("@pie-lib/config-ui");
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _styles = require("@mui/material/styles");
+const {
+  Panel,
+  toggle,
+  dropdown
+} = _configUi.settings;
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Root extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
+    });
+  }
+  render() {
+    const {
+      model,
+      configuration,
+      onModelChanged,
+      onConfigurationChanged,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      spellCheckEnabled
+    } = model || {};
+    const {
+      teacherInstructions: teacherInstructionsError
+    } = errors;
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: config => onConfigurationChanged(config),
+        groups: {
+          Properties: panelProperties
+        }
+      })
+    }, model && model.teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), /*#__PURE__*/_react.default.createElement("div", null, "Image cloze association"));
+  }
+}
+exports.Root = Root;
+Root.propTypes = {
+  onModelChanged: _propTypes.default.func,
+  onConfigurationChanged: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  })
+};
+var _default = exports.default = Root;
+//# sourceMappingURL=root.js.map

package/configure/lib/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["_react","_interopRequireDefault","require","_propTypes","_configUi","_editableHtmlTipTap","_styles","Panel","toggle","dropdown","settings","StyledInputContainer","styled","InputContainer","theme","width","paddingTop","spacing","marginBottom","ErrorText","fontSize","typography","color","palette","error","main","Root","React","Component","constructor","args","_defineProperty2","default","teacherInstructions","props","onModelChanged","model","render","configuration","onConfigurationChanged","imageSupport","uploadSoundSupport","baseInputConfiguration","contentDimensions","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","withRubric","mathMlOptions","language","languageChoices","errors","extraCSSRules","spellCheckEnabled","teacherInstructionsError","panelProperties","teacherInstructionsEnabled","label","rubricEnabled","enabled","options","getPluginProps","createElement","layout","ConfigLayout","dimensions","hideSettings","onChangeModel","onChangeConfiguration","config","groups","Properties","markup","onChange","onTeacherInstructionsChanged","nonEmpty","pluginProps","inputConfiguration","languageCharactersProps","exports","propTypes","PropTypes","func","object","isRequired","shape","add","delete","_default"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport EditableHtml from '@pie-lib/editable-html-tip-tap';\nimport { styled } from '@mui/material/styles';\n\nconst { Panel, toggle, dropdown } = settings;\n\nconst StyledInputContainer = styled(InputContainer)(({ theme }) => ({\n  width: '100%',\n  paddingTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n}));\n\nconst ErrorText = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  paddingTop: theme.spacing(1),\n}));\n\nexport class Root extends React.Component {\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    this.props.onModelChanged({ ...this.props.model, teacherInstructions });\n  };\n\n  render() {\n    const { model, configuration, onModelChanged, onConfigurationChanged, imageSupport, uploadSoundSupport } =\n      this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      mathMlOptions = {},\n      language = {},\n      languageChoices = {},\n    } = configuration || {};\n    const { errors = {}, extraCSSRules, spellCheckEnabled } = model || {};\n    const { teacherInstructions: teacherInstructionsError } = errors;\n\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\n      'language.enabled': language.settings && toggle(language.label, true),\n      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    return (\n      <layout.ConfigLayout\n        extraCSSRules={extraCSSRules}\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            configuration={configuration}\n            onChangeModel={(model) => onModelChanged(model)}\n            onChangeConfiguration={(config) => onConfigurationChanged(config)}\n            groups={{\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {model && model.teacherInstructionsEnabled && (\n          <StyledInputContainer label={teacherInstructions.label}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={this.onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={teacherInstructionsError}\n              spellCheck={spellCheckEnabled}\n              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}\n              maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions}\n              maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}\n          </StyledInputContainer>\n        )}\n\n        <div>Image cloze association</div>\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nRoot.propTypes = {\n  onModelChanged: PropTypes.func,\n  onConfigurationChanged: PropTypes.func,\n  model: PropTypes.object.isRequired,\n  configuration: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func.isRequired,\n    delete: PropTypes.func.isRequired,\n  }),\n  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func.isRequired,\n    delete: PropTypes.func.isRequired,\n  }),\n};\n\nexport default Root;\n"],"mappings":"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","ignoreList":[]}

package/configure/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@pie-element/image-cloze-association-configure",
+  "private": true,
+  "version": "9.1.2",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "author": "",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-framework/pie-configure-events": "^1.3.0",
+    "@pie-lib/config-ui": "13.0.6",
+    "@pie-lib/editable-html-tip-tap": "2.1.4",
+    "debug": "^4.1.1",
+    "prop-types": "^15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "license": "ISC"
+}

package/configure/src/__tests__/index.test.js

@@ -0,0 +1,155 @@
+import { createRoot } from 'react-dom/client';
+import { render } from '@testing-library/react';
+
+import * as React from 'react';
+import defaultValues from '../defaults';
+import { Root } from '../root';
+
+const mockRender = jest.fn();
+const mockUnmount = jest.fn();
+const mockCreateRoot = jest.fn(() => ({
+  render: mockRender,
+  unmount: mockUnmount,
+}));
+
+jest.mock('react-dom/client', () => ({
+  createRoot: (...args) => mockCreateRoot(...args),
+}));
+
+jest.mock('@pie-lib/config-ui', () => ({
+  FeedbackConfig: (props) => <div />,
+  InputCheckbox: (props) => <div />,
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
+  layout: {
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
+  settings: {
+    Panel: (props) => <div onChange={props.onChange} />,
+    toggle: jest.fn(),
+    dropdown: jest.fn(),
+  },
+}));
+
+jest.mock('../index', () => {
+  const sensibleDefaults = require('../defaults').default;
+  const { ModelUpdatedEvent } = require('@pie-framework/pie-configure-events');
+
+  class MockHTMLElement {
+    constructor() {
+      this._root = null;
+      this._model = null;
+      this._configuration = sensibleDefaults.configuration;
+      this.dispatchEvent = jest.fn();
+      this.onModelChanged = this.onModelChanged.bind(this);
+    }
+  }
+
+  return {
+    __esModule: true,
+    default: class ImageClozeAssociationConfigure extends MockHTMLElement {
+      static createDefaultModel = (model = {}) => ({
+        ...sensibleDefaults.model,
+        ...model,
+      });
+
+      constructor() {
+        super();
+        this._model = ImageClozeAssociationConfigure.createDefaultModel();
+      }
+
+      set model(s) {
+        this._model = ImageClozeAssociationConfigure.createDefaultModel(s);
+        this._render();
+      }
+
+      set configuration(c) {
+        this._configuration = c;
+        this._render();
+      }
+
+      _render() {
+        if (!this._root) {
+          this._root = mockCreateRoot(global.document.createElement('div'));
+        }
+        this._root.render(null);
+      }
+
+      onModelChanged(model) {
+        this._model = { ...this._model, ...model };
+        this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
+      }
+    },
+  };
+});
+
+export const defaultProps = {
+  classes: {},
+  model: {},
+  configuration: defaultValues.configuration,
+};
+
+const ImageClozeAssociationConfigure = require('../index').default;
+
+describe('Root', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = (props) => {
+      const configProps = {
+        ...defaultProps,
+        ...props,
+      };
+
+      return render(<Root {...configProps} />);
+    };
+  });
+
+  it('renders correctly', () => {
+    const { container } = wrapper();
+    expect(container).toBeDefined();
+  });
+
+  it('updates teacher instructions correctly', () => {
+    let onModelChanged = jest.fn();
+    const { container } = wrapper({
+      onModelChanged,
+      model: { teacherInstructionsEnabled: true },
+    });
+
+    // Find the Root component and call the method directly
+    // Since we're using RTL, we need to test the component behavior differently
+    const rootComponent = new Root({
+      ...defaultProps,
+      onModelChanged,
+      model: { teacherInstructionsEnabled: true },
+    });
+
+    rootComponent.onTeacherInstructionsChanged('New Teacher Instructions');
+
+    expect(onModelChanged).toBeCalledWith(
+      expect.objectContaining({ teacherInstructions: 'New Teacher Instructions' }),
+    );
+  });
+});
+
+describe('index', () => {
+  let el;
+  let onModelChanged = jest.fn();
+  let initialModel = {};
+
+  beforeEach(() => {
+    mockRender.mockClear();
+    mockCreateRoot.mockClear();
+    el = new ImageClozeAssociationConfigure();
+    el.model = initialModel;
+    el.onModelChanged = onModelChanged;
+  });
+
+  describe('set model', () => {
+    it('calls createRoot and render', () => {
+      const rootInstance = mockCreateRoot.mock.results[0].value;
+      expect(mockCreateRoot).toHaveBeenCalled();
+      expect(rootInstance.render).toHaveBeenCalled();
+    });
+  });
+});

package/configure/src/defaults.js

@@ -0,0 +1,59 @@
+export default {
+  model: {
+    rationale: '',
+    rationaleEnabled: true,
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false,
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: [],
+    },
+  },
+};