@pie-element/drawing-response 12.1.2-next.5 → 12.1.3

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","DrawableResponseConfigure","HTMLElement","constructor","_defineProperty2","default","m","reset","_model","dispatchModelUpdated","_render","c","_configuration","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","sensibleDefaults","configuration","withRubric","forceEnabled","settings","createDefaultModel","onModelChanged","bind","model","s","newConfiguration","rubricEnabled","language","enabled","languageChoices","options","length","value","find","option","push","label","resetValue","ModelUpdatedEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","element","React","createElement","Root","onConfigurationChanged","imageSupport","add","insertImage","delete","onDeleteImage","uploadSoundSupport","createRoot","render","disconnectedCallback","unmount","exports","config","defaultModel"],"sources":["../src/index.js"],"sourcesContent":["import {\n  DeleteImageEvent,\n  DeleteSoundEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  ModelUpdatedEvent,\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('hotspot:configure');\n\nexport default class DrawableResponseConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}, config) => {\n    const defaultModel = {\n      ...sensibleDefaults.model,\n      ...model,\n    };\n\n    // if configuration.withRubric.forceEnabled is true, then we update the model\n    // without triggering the Model Updated event (for more details, check documentation)\n    if (config?.withRubric?.forceEnabled && !defaultModel.rubricEnabled) {\n      defaultModel.rubricEnabled = true;\n    }\n\n    return defaultModel;\n  };\n\n  constructor() {\n    super();\n    this._root = null;\n    this._configuration = sensibleDefaults.configuration;\n\n    // if configuration.withRubric.forceEnabled is true, then we\n    // update the configuration (we do not want to display the toggle in the Settings Panel)\n    if (this._configuration.withRubric?.forceEnabled) {\n      this._configuration.withRubric.settings = false;\n    }\n\n    this._model = DrawableResponseConfigure.createDefaultModel({}, this._configuration);\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);\n    this._render();\n  }\n\n  set configuration(c) {\n    const newConfiguration = {\n      ...sensibleDefaults.configuration,\n      ...c,\n    };\n\n    this._configuration = newConfiguration;\n\n    const { withRubric = {} } = c || {};\n\n    // if configuration.withRubric.forceEnabled is true, then we update the model\n    // without triggering the Model Updated event (for more details, check documentation)\n    // and also update the configuration (we do not want to display the toggle in the Settings Panel)\n    if (withRubric?.forceEnabled) {\n      this._configuration.withRubric.settings = false;\n\n      if (!this._model.rubricEnabled) {\n        this._model.rubricEnabled = true;\n      }\n    }\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (newConfiguration?.language?.enabled) {\n      if (newConfiguration?.languageChoices?.options?.length) {\n        this._model.language = newConfiguration?.languageChoices.options[0].value;\n      }\n    } else if (newConfiguration.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n\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 = (c) => {\n    this._configuration = c;\n\n    this._render();\n  };\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      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage,\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\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,219 @@
+"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 _configUi = require("@pie-lib/config-ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
+var _imageContainer = _interopRequireDefault(require("./image-container"));
+var _lodashEs = require("lodash-es");
+const {
+  Panel,
+  toggle,
+  dropdown
+} = _configUi.settings;
+const PromptHolder = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(1),
+  width: '100%'
+}));
+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, "onPromptChanged", prompt => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const update = (0, _lodashEs.cloneDeep)(model);
+      onModelChanged({
+        ...update,
+        prompt
+      });
+    });
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      onModelChanged({
+        ...model,
+        teacherInstructions
+      });
+    });
+    (0, _defineProperty2.default)(this, "onUpdateImageDimension", dimensions => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      onModelChanged({
+        ...model,
+        imageDimensions: dimensions
+      });
+    });
+    (0, _defineProperty2.default)(this, "onImageUpload", imageUrl => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      onModelChanged({
+        ...model,
+        imageUrl
+      });
+    });
+  }
+  render() {
+    const {
+      configuration,
+      imageSupport,
+      model,
+      onConfigurationChanged,
+      onModelChanged,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      backgroundImage = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      prompt = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      language = {},
+      languageChoices = {},
+      mathMlOptions = {}
+    } = configuration || {};
+    const {
+      backgroundImageEnabled,
+      errors = {},
+      extraCSSRules,
+      promptEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      prompt: promptError,
+      teacherInstructions: teacherInstructionsError
+    } = errors;
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelSettings = {
+      backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    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,
+        onChangeModel: onModelChanged,
+        configuration: configuration,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
+      label: "Item Stem"
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.prompt,
+      onChange: this.onPromptChanged,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      imageSupport: imageSupport,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), backgroundImageEnabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "h6"
+    }, "Define Background Image"), /*#__PURE__*/_react.default.createElement(_imageContainer.default, {
+      imageUrl: model.imageUrl,
+      onUpdateImageDimension: this.onUpdateImageDimension,
+      onImageUpload: this.onImageUpload,
+      imageDimensions: model.imageDimensions,
+      insertImage: imageSupport && imageSupport.add
+    })));
+  }
+}
+exports.Root = Root;
+Root.propTypes = {
+  configuration: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func,
+    delete: _propTypes.default.func
+  }),
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func,
+    delete: _propTypes.default.func
+  }),
+  onModelChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _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","_configUi","_propTypes","_editableHtmlTipTap","_Typography","_styles","_imageContainer","_lodashEs","Panel","toggle","dropdown","settings","PromptHolder","styled","InputContainer","theme","paddingTop","spacing","marginTop","marginBottom","width","ErrorText","fontSize","typography","color","palette","error","main","Root","React","Component","constructor","args","_defineProperty2","default","prompt","model","onModelChanged","props","update","cloneDeep","teacherInstructions","dimensions","imageDimensions","imageUrl","render","configuration","imageSupport","onConfigurationChanged","uploadSoundSupport","baseInputConfiguration","backgroundImage","contentDimensions","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","withRubric","language","languageChoices","mathMlOptions","backgroundImageEnabled","errors","extraCSSRules","promptEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","teacherInstructionsError","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","enabled","options","panelProperties","rubricEnabled","getPluginProps","createElement","layout","ConfigLayout","hideSettings","onChangeModel","onChangeConfiguration","groups","Settings","Properties","markup","onChange","onTeacherInstructionsChanged","nonEmpty","pluginProps","inputConfiguration","languageCharactersProps","onPromptChanged","Fragment","variant","onUpdateImageDimension","onImageUpload","insertImage","add","exports","propTypes","PropTypes","object","isRequired","shape","func","delete","_default"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html-tip-tap';\nimport Typography from '@mui/material/Typography';\nimport { styled } from '@mui/material/styles';\n\nimport ImageContainer from './image-container';\nimport { cloneDeep } from 'lodash-es';\n\nconst { Panel, toggle, dropdown } = settings;\n\nconst PromptHolder = styled(InputContainer)(({ theme }) => ({\n  paddingTop: theme.spacing(1),\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(1),\n  width: '100%',\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  onPromptChanged = (prompt) => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({ ...update, prompt });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, teacherInstructions });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, imageDimensions: dimensions });\n  };\n\n  onImageUpload = (imageUrl) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, imageUrl });\n  };\n\n  render() {\n    const { configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =\n      this.props;\n    const {\n      baseInputConfiguration = {},\n      backgroundImage = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      prompt = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      language = {},\n      languageChoices = {},\n      mathMlOptions = {},\n    } = configuration || {};\n    const {\n      backgroundImageEnabled,\n      errors = {},\n      extraCSSRules,\n      promptEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const { prompt: promptError, teacherInstructions: teacherInstructionsError } = errors;\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const panelSettings = {\n      backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n      promptEnabled: prompt.settings && toggle(prompt.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 panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\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            onChangeModel={onModelChanged}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            groups={{\n              Settings: panelSettings,\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {teacherInstructionsEnabled && (\n          <PromptHolder label={teacherInstructions.label}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={this.onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={teacherInstructionsError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}\n          </PromptHolder>\n        )}\n\n        {promptEnabled && (\n          <PromptHolder label=\"Item Stem\">\n            <EditableHtml\n              markup={model.prompt}\n              onChange={this.onPromptChanged}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheckEnabled}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              imageSupport={imageSupport}\n              maxImageWidth={defaultImageMaxWidth}\n              maxImageHeight={defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {promptError && <ErrorText>{promptError}</ErrorText>}\n          </PromptHolder>\n        )}\n\n        {backgroundImageEnabled && (\n          <React.Fragment>\n            <Typography variant=\"h6\">Define Background Image</Typography>\n\n            <ImageContainer\n              imageUrl={model.imageUrl}\n              onUpdateImageDimension={this.onUpdateImageDimension}\n              onImageUpload={this.onImageUpload}\n              imageDimensions={model.imageDimensions}\n              insertImage={imageSupport && imageSupport.add}\n            />\n          </React.Fragment>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nRoot.propTypes = {\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default Root;\n"],"mappings":"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","ignoreList":[]}

package/configure/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@pie-element/drawing-response-configure",
+  "private": true,
+  "version": "11.1.3",
+  "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.7",
+    "@pie-lib/editable-html-tip-tap": "2.1.5",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "license": "ISC"
+}

package/configure/src/__tests__/image-container.test.jsx

@@ -0,0 +1,231 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { ImageContainer } from '../image-container';
+
+jest.mock('@pie-lib/config-ui', () => ({
+  settings: {
+    Panel: (props) => <div {...props} />,
+    toggle: jest.fn(),
+    radio: jest.fn(),
+    dropdown: jest.fn(),
+  },
+  layout: {
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
+}));
+
+const theme = createTheme();
+
+describe('ImageContainer', () => {
+  const onUpdateImageDimension = jest.fn();
+  const onImageUpload = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderImageContainer = (props = {}) => {
+    const defaultProps = {
+      imageUrl: 'url',
+      onUpdateImageDimension,
+      onImageUpload,
+      ...props,
+    };
+    return render(
+      <ThemeProvider theme={theme}>
+        <ImageContainer {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders "Replace Image" button when imageUrl is provided', () => {
+      renderImageContainer({ imageUrl: 'http://example.com/image.png' });
+      expect(screen.getByRole('button', { name: /replace image/i })).toBeInTheDocument();
+    });
+
+    it('renders "Upload Image" button when no imageUrl', () => {
+      renderImageContainer({ imageUrl: '' });
+      // Should have two "Upload Image" buttons - one in toolbar, one in center
+      const uploadButtons = screen.getAllByRole('button', { name: /upload image/i });
+      expect(uploadButtons.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('shows drag and drop instruction when no image', () => {
+      renderImageContainer({ imageUrl: '' });
+      expect(screen.getByText(/drag and drop or upload image from computer/i)).toBeInTheDocument();
+    });
+
+    it('renders the image when imageUrl is provided', () => {
+      const { container } = renderImageContainer({ imageUrl: 'http://example.com/test.png' });
+      // Image has alt="" so it has role="presentation", query by tag instead
+      const image = container.querySelector('img');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', 'http://example.com/test.png');
+    });
+
+    it('does not show drag and drop instruction when image exists', () => {
+      renderImageContainer({ imageUrl: 'http://example.com/image.png' });
+      expect(screen.queryByText(/drag and drop or upload image from computer/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('logic', () => {
+    let oldFileReader;
+    let dummyFileReader;
+
+    beforeAll(() => {
+      oldFileReader = window.FileReader;
+      dummyFileReader = {};
+
+      dummyFileReader.readAsDataURL = (result) => {
+        dummyFileReader.result = result;
+        dummyFileReader.onloadend();
+      };
+      window.FileReader = jest.fn(() => dummyFileReader);
+    });
+
+    afterAll(() => {
+      window.FileReader = oldFileReader;
+    });
+
+    it('handleFileRead calls onImageUpload', () => {
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleFileRead('file');
+
+      expect(onImageUpload).toBeCalled();
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
+    });
+
+    it('handleUploadImage calls handleFileRead which calls onImageUpload', () => {
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleUploadImage({ target: { files: ['file'] }, preventDefault: jest.fn() });
+
+      expect(onImageUpload).toBeCalled();
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
+    });
+
+    it('handleOnDrop calls handleFileRead which calls onImageUpload if item is file and image', () => {
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [
+            {
+              kind: 'file',
+              getAsFile: jest.fn().mockReturnValue({ type: 'image', key: 'item' }),
+            },
+          ],
+          files: [],
+        },
+      });
+
+      expect(onImageUpload).toBeCalledWith({ type: 'image', key: 'item' });
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
+    });
+
+    it("handleOnDrop calls handleFileRead which doesn't call onImageUpload if item is file but not image", () => {
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [
+            {
+              kind: 'file',
+              getAsFile: jest.fn().mockReturnValue({ type: 'jpg' }),
+            },
+          ],
+          files: [],
+        },
+      });
+
+      // Should not be called since 'jpg' doesn't start with 'image'
+      expect(onImageUpload).not.toHaveBeenCalled();
+    });
+
+    it('handleOnDrop calls handleFileRead which calls onImageUpload if item is not file, but file is image', () => {
+      jest.clearAllMocks();
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [
+            {
+              kind: 'something else',
+              getAsFile: jest.fn().mockReturnValue({ type: 'image' }),
+            },
+          ],
+          files: [{ type: 'image', key: 'file' }],
+        },
+      });
+
+      expect(onImageUpload).toBeCalledWith({ type: 'image', key: 'file' });
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
+    });
+
+    it("handleOnDrop calls handleFileRead which doesn't call onImageUpload if item is not file and file is not image", () => {
+      jest.clearAllMocks();
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
+        preventDefault: jest.fn(),
+        dataTransfer: {
+          items: [
+            {
+              kind: 'something else',
+              getAsFile: jest.fn().mockReturnValue({ type: 'image' }),
+            },
+          ],
+          files: [{ type: 'something else', key: 'file' }],
+        },
+      });
+
+      // Should not be called since file type is 'something else', not 'image'
+      expect(onImageUpload).not.toHaveBeenCalled();
+    });
+
+    it('handleOnImageLoad calls onUpdateImageDimension', () => {
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnImageLoad({
+        target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 },
+      });
+
+      expect(onUpdateImageDimension).toHaveBeenCalledWith({
+        height: 50,
+        width: 50,
+      });
+    });
+
+    it('stopResizing calls onUpdateImageDimension with state dimensions', () => {
+      jest.clearAllMocks();
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      // Set state dimensions directly
+      testInstance.state = { ...testInstance.state, dimensions: { height: 75, width: 100 } };
+
+      // Call stopResizing which should use the dimensions from state
+      testInstance.stopResizing();
+
+      expect(onUpdateImageDimension).toHaveBeenCalledWith({
+        height: 75,
+        width: 100,
+      });
+    });
+  });
+});

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+jest.mock('@pie-lib/config-ui', () => ({
+  choiceUtils: {
+    firstAvailableIndex: jest.fn(),
+  },
+  settings: {
+    Panel: (props) => <div {...props} />,
+    toggle: jest.fn(),
+    radio: jest.fn(),
+    dropdown: jest.fn(),
+  },
+  layout: {
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
+}));
+
+jest.mock('@pie-lib/editable-html-tip-tap', () => (props) => <div {...props} />);
+
+jest.mock('@mui/material/Typography', () => (props) => <div {...props}>{props.children}</div>);
+
+jest.mock('../image-container', () => (props) => <div {...props} />);
+
+const model = () => ({
+  promptEnabled: true,
+  prompt: 'This is the question prompt',
+  imageUrl: '',
+  imageDimensions: {
+    height: 0,
+    width: 0,
+  },
+});
+
+const mockRender = jest.fn();
+const mockUnmount = jest.fn();
+jest.mock('react-dom/client', () => ({
+  createRoot: jest.fn(() => ({
+    render: mockRender,
+    unmount: mockUnmount,
+  })),
+}));
+
+describe('index', () => {
+  let Def;
+  let el;
+  let onModelChanged = jest.fn();
+  let initialModel = model();
+
+  beforeAll(() => {
+    Def = require('../index').default;
+    // Register the custom element if not already registered
+    if (!customElements.get('drawing-response-configure')) {
+      customElements.define('drawing-response-configure', Def);
+    }
+  });
+
+  beforeEach(() => {
+    // Create custom element using document.createElement to properly initialize
+    el = document.createElement('drawing-response-configure');
+    el.model = initialModel;
+    el.onModelChanged = onModelChanged;
+  });
+
+  describe('set model', () => {
+    it('calls ReactDOM.render', () => {
+      expect(createRoot).toHaveBeenCalled();
+      expect(mockRender).toHaveBeenCalled();
+    });
+  });
+});