@pie-element/inline-dropdown 10.1.2-next.2 → 10.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.json +1082 -0
  2. package/CHANGELOG.md +2192 -0
  3. package/LICENSE.md +5 -0
  4. package/README.md +1 -0
  5. package/configure/CHANGELOG.json +647 -0
  6. package/configure/CHANGELOG.md +1949 -0
  7. package/configure/lib/defaults.js +192 -0
  8. package/configure/lib/defaults.js.map +1 -0
  9. package/configure/lib/index.js +135 -0
  10. package/configure/lib/index.js.map +1 -0
  11. package/configure/lib/inline-dropdown-toolbar.js +456 -0
  12. package/configure/lib/inline-dropdown-toolbar.js.map +1 -0
  13. package/configure/lib/main.js +612 -0
  14. package/configure/lib/main.js.map +1 -0
  15. package/configure/lib/markupUtils.js +50 -0
  16. package/configure/lib/markupUtils.js.map +1 -0
  17. package/configure/lib/response-area.js +48 -0
  18. package/configure/lib/response-area.js.map +1 -0
  19. package/configure/lib/utils.js +22 -0
  20. package/configure/lib/utils.js.map +1 -0
  21. package/configure/package.json +24 -0
  22. package/controller/CHANGELOG.json +467 -0
  23. package/controller/CHANGELOG.md +1283 -0
  24. package/controller/lib/defaults.js +25 -0
  25. package/controller/lib/defaults.js.map +1 -0
  26. package/controller/lib/index.js +295 -0
  27. package/controller/lib/index.js.map +1 -0
  28. package/controller/lib/utils.js +32 -0
  29. package/controller/lib/utils.js.map +1 -0
  30. package/controller/package.json +16 -0
  31. package/docs/config-schema.json +2854 -0
  32. package/docs/config-schema.json.md +2106 -0
  33. package/docs/demo/config.js +8 -0
  34. package/docs/demo/generate.js +76 -0
  35. package/docs/demo/index.html +1 -0
  36. package/docs/demo/session.js +11 -0
  37. package/docs/pie-schema.json +1152 -0
  38. package/docs/pie-schema.json.md +814 -0
  39. package/lib/index.js +85 -0
  40. package/lib/index.js.map +1 -0
  41. package/lib/inline-dropdown.js +176 -0
  42. package/lib/inline-dropdown.js.map +1 -0
  43. package/package.json +21 -85
  44. package/configure.js +0 -2
  45. package/controller.js +0 -1
  46. package/dist/author/defaults.d.ts +0 -194
  47. package/dist/author/defaults.js +0 -130
  48. package/dist/author/index.d.ts +0 -43
  49. package/dist/author/index.js +0 -83
  50. package/dist/author/inline-dropdown-toolbar.d.ts +0 -48
  51. package/dist/author/inline-dropdown-toolbar.js +0 -268
  52. package/dist/author/main.d.ts +0 -49
  53. package/dist/author/main.js +0 -379
  54. package/dist/author/markupUtils.d.ts +0 -12
  55. package/dist/author/markupUtils.js +0 -23
  56. package/dist/author/response-area.d.ts +0 -20
  57. package/dist/author/response-area.js +0 -32
  58. package/dist/author/utils.d.ts +0 -10
  59. package/dist/author/utils.js +0 -10
  60. package/dist/browser/Close-ihSzAQyP.js +0 -9031
  61. package/dist/browser/Close-ihSzAQyP.js.map +0 -1
  62. package/dist/browser/author/index.js +0 -40578
  63. package/dist/browser/author/index.js.map +0 -1
  64. package/dist/browser/controller/index.js +0 -196
  65. package/dist/browser/controller/index.js.map +0 -1
  66. package/dist/browser/delivery/index.js +0 -2714
  67. package/dist/browser/delivery/index.js.map +0 -1
  68. package/dist/browser/dist-CAsDMEWi.js +0 -133
  69. package/dist/browser/dist-CAsDMEWi.js.map +0 -1
  70. package/dist/browser/inline-dropdown.css +0 -2
  71. package/dist/controller/defaults.d.ts +0 -27
  72. package/dist/controller/defaults.js +0 -21
  73. package/dist/controller/index.d.ts +0 -54
  74. package/dist/controller/index.js +0 -124
  75. package/dist/controller/utils.d.ts +0 -12
  76. package/dist/controller/utils.js +0 -13
  77. package/dist/delivery/index.d.ts +0 -20
  78. package/dist/delivery/index.js +0 -60
  79. package/dist/delivery/inline-dropdown.d.ts +0 -38
  80. package/dist/delivery/inline-dropdown.js +0 -109
  81. package/dist/index.d.ts +0 -1
  82. package/dist/index.iife.d.ts +0 -8
  83. package/dist/index.iife.js +0 -148
  84. package/dist/index.js +0 -2
  85. package/dist/runtime-support.d.ts +0 -12
  86. package/dist/runtime-support.js +0 -12
@@ -0,0 +1,612 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.Main = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _react = _interopRequireDefault(require("react"));
11
+ var _reactDom = _interopRequireDefault(require("react-dom"));
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+ var _editableHtmlTipTap = _interopRequireWildcard(require("@pie-lib/editable-html-tip-tap"));
14
+ var _configUi = require("@pie-lib/config-ui");
15
+ var _mathRendering = require("@pie-lib/math-rendering");
16
+ var _renderUi = require("@pie-lib/render-ui");
17
+ var _lodashEs = require("lodash-es");
18
+ var _styles = require("@mui/material/styles");
19
+ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
20
+ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
21
+ var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
22
+ var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
23
+ var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
24
+ var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
25
+ var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
26
+ var _inlineDropdownToolbar = _interopRequireDefault(require("./inline-dropdown-toolbar"));
27
+ var _utils = require("./utils");
28
+ var _responseArea = _interopRequireDefault(require("./response-area"));
29
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
30
+ const {
31
+ toggle,
32
+ Panel,
33
+ dropdown
34
+ } = _configUi.settings;
35
+ const PromptHolder = (0, _styles.styled)(_configUi.InputContainer)(({
36
+ theme
37
+ }) => ({
38
+ width: '100%',
39
+ paddingTop: theme.spacing(2),
40
+ marginBottom: theme.spacing(2)
41
+ }));
42
+ const ChoiceRationaleHolder = (0, _styles.styled)(_configUi.InputContainer)(({
43
+ theme
44
+ }) => ({
45
+ width: '100%',
46
+ paddingTop: theme.spacing(0.5),
47
+ marginBottom: theme.spacing(2)
48
+ }));
49
+ const StyledTypography = (0, _styles.styled)(_Typography.default)(({
50
+ theme
51
+ }) => ({
52
+ fontSize: theme.typography.fontSize + 2,
53
+ marginRight: theme.spacing(1)
54
+ }));
55
+ const RationaleLabel = (0, _styles.styled)('span')(({
56
+ theme
57
+ }) => ({
58
+ display: 'flex',
59
+ alignItems: 'center',
60
+ whiteSpace: 'break-spaces',
61
+ color: _renderUi.color.disabled(),
62
+ padding: 0,
63
+ fontSize: theme.typography.fontSize - 2,
64
+ lineHeight: 1
65
+ }));
66
+ const RationaleChoices = (0, _styles.styled)('div')(({
67
+ theme
68
+ }) => ({
69
+ marginBottom: theme.spacing(2.5)
70
+ }));
71
+ const StyledAccordionDetails = (0, _styles.styled)(_AccordionDetails.default)({
72
+ display: 'block',
73
+ paddingTop: 0,
74
+ paddingBottom: 0
75
+ });
76
+ const FlexContainer = (0, _styles.styled)('div')(({
77
+ theme
78
+ }) => ({
79
+ display: 'flex',
80
+ alignItems: 'center',
81
+ marginBottom: theme.spacing(1)
82
+ }));
83
+ const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
84
+ theme
85
+ }) => ({
86
+ '& .MuiTooltip-tooltip': {
87
+ fontSize: theme.typography.fontSize - 2,
88
+ whiteSpace: 'pre',
89
+ maxWidth: '500px'
90
+ }
91
+ }));
92
+ const ErrorText = (0, _styles.styled)('div')(({
93
+ theme
94
+ }) => ({
95
+ fontSize: theme.typography.fontSize - 2,
96
+ color: theme.palette.error.main,
97
+ paddingTop: theme.spacing(1)
98
+ }));
99
+ const createElementFromHTML = htmlString => {
100
+ const div = document.createElement('div');
101
+ div.innerHTML = (htmlString || '').trim();
102
+ return div;
103
+ };
104
+ class Main extends _react.default.Component {
105
+ constructor(...args) {
106
+ super(...args);
107
+ (0, _defineProperty2.default)(this, "state", {
108
+ warning: {
109
+ open: false
110
+ }
111
+ });
112
+ (0, _defineProperty2.default)(this, "onModelChange", newVal => {
113
+ this.props.onModelChanged({
114
+ ...this.props.model,
115
+ ...newVal
116
+ });
117
+ });
118
+ (0, _defineProperty2.default)(this, "onPromptChanged", prompt => {
119
+ this.onModelChange({
120
+ prompt
121
+ });
122
+ });
123
+ (0, _defineProperty2.default)(this, "onRationaleChanged", rationale => {
124
+ this.onModelChange({
125
+ rationale
126
+ });
127
+ });
128
+ (0, _defineProperty2.default)(this, "onChoiceRationaleChanged", (index, choice) => {
129
+ const {
130
+ model
131
+ } = this.props;
132
+ const indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(elem => elem.label === choice.label && elem.value === choice.value);
133
+ model.choices[index] && model.choices[index].splice(indexOfChoice, 1, choice);
134
+ this.onModelChange(model);
135
+ });
136
+ (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
137
+ this.onModelChange({
138
+ teacherInstructions
139
+ });
140
+ });
141
+ (0, _defineProperty2.default)(this, "onMarkupChanged", slateMarkup => {
142
+ this.onModelChange({
143
+ slateMarkup
144
+ });
145
+ });
146
+ (0, _defineProperty2.default)(this, "onCheck", (confirmCallback, cancelCallback) => {
147
+ this.setState({
148
+ warning: {
149
+ open: true,
150
+ text: 'Response areas with under 2 options or with no correct answers will be discarded.',
151
+ onClose: () => {
152
+ this.setState({
153
+ warning: {
154
+ open: false
155
+ }
156
+ }, cancelCallback);
157
+ },
158
+ onConfirm: () => {
159
+ this.setState({
160
+ warning: {
161
+ open: false
162
+ }
163
+ }, confirmCallback);
164
+ }
165
+ }
166
+ });
167
+ });
168
+ (0, _defineProperty2.default)(this, "validateResponseAreaClose", (node, pos, editor, closeToolbar, onCancel) => {
169
+ const {
170
+ respAreaChoices
171
+ } = this.state;
172
+ const index = node.attrs.index;
173
+ const currentChoices = respAreaChoices[index] || [];
174
+ const shouldWarn = currentChoices.length < 2 || !currentChoices.find(c => c.correct);
175
+ if (!shouldWarn) {
176
+ closeToolbar();
177
+ return;
178
+ }
179
+ editor._holdInlineDropdownToolbarIndex = index;
180
+ this.onCheck(() => {
181
+ delete editor._holdInlineDropdownToolbarIndex;
182
+ (0, _editableHtmlTipTap.deleteInlineDropdownByIndex)(editor, index, pos);
183
+ closeToolbar();
184
+ }, onCancel);
185
+ });
186
+ (0, _defineProperty2.default)(this, "onChange", markup => {
187
+ const {
188
+ respAreaChoices
189
+ } = this.state;
190
+ const domMarkup = createElementFromHTML(markup);
191
+ const allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
192
+ const allChoices = {};
193
+ allRespAreas.forEach(el => {
194
+ allChoices[el.dataset.index] = el.dataset.value || '';
195
+ });
196
+ const existingRespAreaChoices = (0, _lodashEs.reduce)(respAreaChoices, (obj, choices, key) => {
197
+ if (!(0, _lodashEs.isUndefined)(allChoices[key])) {
198
+ obj[key] = respAreaChoices[key];
199
+ }
200
+ return obj;
201
+ }, {});
202
+ const newRespAreaChoices = {};
203
+ allRespAreas.forEach((el, index) => {
204
+ const choices = existingRespAreaChoices[el.dataset.index];
205
+ if (choices) {
206
+ newRespAreaChoices[index] = choices;
207
+ }
208
+ el.dataset.index = index;
209
+ });
210
+ this.onModelChange({
211
+ choices: (0, _lodashEs.cloneDeep)(newRespAreaChoices),
212
+ slateMarkup: domMarkup.innerHTML
213
+ });
214
+ });
215
+ (0, _defineProperty2.default)(this, "onAddChoice", (index, label, choiceIndex) => {
216
+ const {
217
+ respAreaChoices
218
+ } = this.state;
219
+ const {
220
+ maxResponseAreaChoices
221
+ } = this.props.configuration;
222
+ const showWarning = message => this.setState({
223
+ warning: {
224
+ open: true,
225
+ text: message,
226
+ onClose: undefined,
227
+ onConfirm: () => {
228
+ this.setState({
229
+ warning: {
230
+ open: false
231
+ }
232
+ });
233
+ }
234
+ }
235
+ });
236
+ if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) {
237
+ showWarning(`There are only ${maxResponseAreaChoices} answers allowed per choice.`);
238
+ return;
239
+ }
240
+ if (!respAreaChoices[index]) {
241
+ respAreaChoices[index] = [];
242
+ }
243
+
244
+ // check for duplicate answer, but exclude the one that is currently edited
245
+ if ((respAreaChoices[index] || []).find((r, idx) => r.label === label && idx !== choiceIndex)) {
246
+ showWarning('Duplicate answers are not allowed.');
247
+ return;
248
+ }
249
+ if (choiceIndex >= 0 && respAreaChoices[index]?.[choiceIndex]) {
250
+ // we need to update the choice label with the new value
251
+ respAreaChoices[index][choiceIndex].label = label;
252
+ } else {
253
+ // add a new choice
254
+ const value = respAreaChoices[index] && (0, _lodashEs.max)(respAreaChoices[index].map(c => parseInt(c.value)).filter(val => !isNaN(val))) || 0;
255
+ respAreaChoices[index].push({
256
+ label,
257
+ value: `${value + 1}`,
258
+ correct: false
259
+ });
260
+ }
261
+ this.onModelChange({
262
+ choices: (0, _lodashEs.cloneDeep)(respAreaChoices)
263
+ });
264
+ });
265
+ (0, _defineProperty2.default)(this, "onRemoveChoice", (respIndex, index) => {
266
+ const {
267
+ respAreaChoices
268
+ } = this.state;
269
+ respAreaChoices[respIndex].splice(index, 1);
270
+ this.onModelChange({
271
+ choices: (0, _lodashEs.cloneDeep)(respAreaChoices)
272
+ });
273
+ });
274
+ (0, _defineProperty2.default)(this, "onSelectChoice", (respIndex, selectedIndex) => {
275
+ const {
276
+ respAreaChoices
277
+ } = this.state;
278
+ respAreaChoices[respIndex] = respAreaChoices[respIndex].map((choice, index) => ({
279
+ ...choice,
280
+ correct: index === selectedIndex
281
+ }));
282
+ this.onModelChange({
283
+ choices: (0, _lodashEs.cloneDeep)(respAreaChoices)
284
+ });
285
+ });
286
+ }
287
+ componentDidMount() {
288
+ const {
289
+ model: {
290
+ choices
291
+ }
292
+ } = this.props;
293
+ this.setState({
294
+ respAreaChoices: (0, _lodashEs.cloneDeep)(choices)
295
+ });
296
+ }
297
+ UNSAFE_componentWillReceiveProps(nProps) {
298
+ const newState = {};
299
+ if (!(0, _lodashEs.isEqual)(nProps.model.choices, this.props.model.choices) || !(0, _lodashEs.isEqual)(nProps.model.choices, this.state.respAreaChoices)) {
300
+ newState.respAreaChoices = (0, _lodashEs.cloneDeep)(nProps.model.choices);
301
+ }
302
+ if (!(0, _lodashEs.isEmpty)(newState)) {
303
+ this.setState(newState);
304
+ }
305
+ }
306
+ componentDidUpdate() {
307
+ //eslint-disable-next-line
308
+ const domNode = _reactDom.default.findDOMNode(this);
309
+ (0, _mathRendering.renderMath)(domNode);
310
+ }
311
+ render() {
312
+ const {
313
+ warning
314
+ } = this.state;
315
+ const {
316
+ model,
317
+ configuration,
318
+ onConfigurationChanged,
319
+ imageSupport,
320
+ uploadSoundSupport
321
+ } = this.props;
322
+ const {
323
+ baseInputConfiguration = {},
324
+ choiceRationale = {},
325
+ contentDimensions = {},
326
+ lockChoiceOrder = {},
327
+ maxResponseAreas,
328
+ maxImageWidth = {},
329
+ maxImageHeight = {},
330
+ partialScoring = {},
331
+ prompt = {},
332
+ rationale = {},
333
+ settingsPanelDisabled,
334
+ spellCheck = {},
335
+ teacherInstructions = {},
336
+ template = {},
337
+ withRubric = {},
338
+ mathMlOptions = {},
339
+ language = {},
340
+ languageChoices = {},
341
+ responseAreaInputConfiguration = {}
342
+ } = configuration || {};
343
+ const {
344
+ choiceRationaleEnabled,
345
+ choices,
346
+ errors,
347
+ extraCSSRules,
348
+ promptEnabled,
349
+ rationaleEnabled,
350
+ spellCheckEnabled,
351
+ teacherInstructionsEnabled,
352
+ toolbarEditorPosition
353
+ } = model || {};
354
+ const {
355
+ prompt: promptError,
356
+ rationale: rationaleError,
357
+ responseAreasError,
358
+ responseAreaChoicesError,
359
+ teacherInstructions: teacherInstructionsError
360
+ } = errors || {};
361
+ const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
362
+ const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
363
+ const renderChoiceRationale = () => (Object.keys(choices) || []).map((key, index) => /*#__PURE__*/_react.default.createElement(RationaleChoices, {
364
+ key: key
365
+ }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
366
+ slotProps: {
367
+ transition: {
368
+ timeout: {
369
+ enter: 225,
370
+ exit: 195
371
+ }
372
+ }
373
+ }
374
+ }, /*#__PURE__*/_react.default.createElement(_AccordionSummary.default, {
375
+ expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null)
376
+ }, /*#__PURE__*/_react.default.createElement(StyledTypography, {
377
+ component: 'div'
378
+ }, `Rationale for response area #${index + 1}`)), /*#__PURE__*/_react.default.createElement(StyledAccordionDetails, null, (choices[key] || []).map(choice => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
379
+ key: choice.label
380
+ }, /*#__PURE__*/_react.default.createElement(RationaleLabel, {
381
+ dangerouslySetInnerHTML: {
382
+ __html: `${rationale.label} for ${choice.label} (${choice.correct ? 'correct' : 'incorrect'})`
383
+ }
384
+ }), /*#__PURE__*/_react.default.createElement(ChoiceRationaleHolder, null, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
385
+ markup: choice.rationale || '',
386
+ spellCheck: spellCheckEnabled,
387
+ pluginProps: getPluginProps(rationale?.inputConfiguration),
388
+ onChange: c => this.onChoiceRationaleChanged(key, {
389
+ ...choice,
390
+ rationale: c
391
+ }),
392
+ imageSupport: imageSupport,
393
+ maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
394
+ maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
395
+ uploadSoundSupport: uploadSoundSupport,
396
+ mathMlOptions: mathMlOptions
397
+ }))))))));
398
+ const toolbarOpts = {
399
+ position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
400
+ };
401
+ const validationMessage = (0, _utils.generateValidationMessage)(configuration);
402
+ const panelSettings = {
403
+ partialScoring: partialScoring.settings && toggle(partialScoring.label),
404
+ lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
405
+ 'language.enabled': language.settings && toggle(language.label, true),
406
+ language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
407
+ };
408
+ const panelProperties = {
409
+ teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
410
+ rationaleEnabled: rationale.settings && toggle(rationale.label),
411
+ choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
412
+ promptEnabled: prompt.settings && toggle(prompt.label),
413
+ spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
414
+ rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
415
+ };
416
+ const getPluginProps = (props = {}) => ({
417
+ ...baseInputConfiguration,
418
+ ...props
419
+ });
420
+ return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
421
+ extraCSSRules: {
422
+ names: ['red', 'blue'],
423
+ rules: `
424
+ .red {
425
+ color: red !important;
426
+ }
427
+
428
+ .blue {
429
+ color: blue !important;
430
+ }
431
+ `
432
+ },
433
+ dimensions: contentDimensions,
434
+ hideSettings: settingsPanelDisabled,
435
+ settings: /*#__PURE__*/_react.default.createElement(Panel, {
436
+ model: model,
437
+ configuration: configuration,
438
+ onChangeModel: model => this.onModelChange(model),
439
+ onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
440
+ groups: {
441
+ Settings: panelSettings,
442
+ Properties: panelProperties
443
+ }
444
+ })
445
+ }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
446
+ label: teacherInstructions.label
447
+ }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
448
+ markup: model.teacherInstructions || '',
449
+ onChange: this.onTeacherInstructionsChanged,
450
+ imageSupport: imageSupport,
451
+ nonEmpty: false,
452
+ error: teacherInstructionsError,
453
+ toolbarOpts: toolbarOpts,
454
+ pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
455
+ spellCheck: spellCheckEnabled,
456
+ maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
457
+ maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
458
+ uploadSoundSupport: uploadSoundSupport,
459
+ languageCharactersProps: [{
460
+ language: 'spanish'
461
+ }, {
462
+ language: 'special'
463
+ }],
464
+ mathMlOptions: mathMlOptions
465
+ }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
466
+ label: prompt.label
467
+ }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
468
+ markup: model.prompt,
469
+ onChange: this.onPromptChanged,
470
+ imageSupport: imageSupport,
471
+ nonEmpty: false,
472
+ disableUnderline: true,
473
+ error: promptError,
474
+ toolbarOpts: toolbarOpts,
475
+ pluginProps: getPluginProps(prompt?.inputConfiguration),
476
+ spellCheck: spellCheckEnabled,
477
+ maxImageWidth: defaultImageMaxWidth,
478
+ maxImageHeight: defaultImageMaxHeight,
479
+ uploadSoundSupport: uploadSoundSupport,
480
+ languageCharactersProps: [{
481
+ language: 'spanish'
482
+ }, {
483
+ language: 'special'
484
+ }],
485
+ mathMlOptions: mathMlOptions
486
+ }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(FlexContainer, null, /*#__PURE__*/_react.default.createElement(StyledTypography, {
487
+ component: 'div'
488
+ }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react.default.createElement(StyledTooltip, {
489
+ disableFocusListener: true,
490
+ disableTouchListener: true,
491
+ placement: 'right',
492
+ title: validationMessage
493
+ }, /*#__PURE__*/_react.default.createElement(_Info.default, {
494
+ fontSize: 'small',
495
+ color: 'primary'
496
+ }))), /*#__PURE__*/_react.default.createElement(_responseArea.default, {
497
+ responseAreasError: responseAreasError,
498
+ responseAreaChoicesError: responseAreaChoicesError,
499
+ editableHtmlProps: {
500
+ pluginProps: getPluginProps(template?.inputConfiguration),
501
+ activePlugins: _editableHtmlTipTap.ALL_PLUGINS,
502
+ toolbarOpts: {
503
+ position: 'top'
504
+ },
505
+ extraCSSRules: {
506
+ names: ['red', 'blue'],
507
+ rules: `
508
+ .red {
509
+ color: red !important;
510
+ }
511
+
512
+ .blue {
513
+ color: blue !important;
514
+ }
515
+ `
516
+ },
517
+ responseAreaProps: {
518
+ type: 'inline-dropdown',
519
+ options: {
520
+ duplicates: true
521
+ },
522
+ maxResponseAreas: maxResponseAreas,
523
+ onToolbarCloseRequest: ([node, pos], editor, closeToolbar, onCancel) => {
524
+ this.validateResponseAreaClose(node, pos, editor, closeToolbar, onCancel);
525
+ },
526
+ respAreaToolbar: (nodeInfo, editor, closeToolbar) => {
527
+ const [node, pos] = nodeInfo;
528
+ const {
529
+ respAreaChoices
530
+ } = this.state;
531
+ return props => /*#__PURE__*/_react.default.createElement(_inlineDropdownToolbar.default, (0, _extends2.default)({}, props, {
532
+ onAddChoice: this.onAddChoice,
533
+ onRemoveChoice: index => this.onRemoveChoice(node.attrs.index, index),
534
+ onSelectChoice: index => this.onSelectChoice(node.attrs.index, index),
535
+ node: node,
536
+ pos: pos,
537
+ editor: editor,
538
+ onToolbarDone: closeToolbar,
539
+ choices: respAreaChoices[node.attrs.index],
540
+ spellCheck: spellCheckEnabled,
541
+ uploadSoundSupport: uploadSoundSupport,
542
+ mathMlOptions: mathMlOptions,
543
+ baseInputConfiguration: baseInputConfiguration,
544
+ responseAreaInputConfiguration: responseAreaInputConfiguration
545
+ }));
546
+ }
547
+ },
548
+ spellCheck: spellCheckEnabled,
549
+ markup: model.slateMarkup || '',
550
+ onChange: this.onChange,
551
+ imageSupport: imageSupport,
552
+ disableImageAlignmentButtons: true,
553
+ disabled: false,
554
+ highlightShape: false,
555
+ error: responseAreasError,
556
+ uploadSoundSupport: uploadSoundSupport,
557
+ languageCharactersProps: [{
558
+ language: 'spanish'
559
+ }, {
560
+ language: 'special'
561
+ }],
562
+ mathMlOptions: mathMlOptions
563
+ }
564
+ }), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
565
+ label: rationale.label
566
+ }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
567
+ markup: model.rationale || '',
568
+ onChange: this.onRationaleChanged,
569
+ imageSupport: imageSupport,
570
+ error: rationaleError,
571
+ toolbarOpts: toolbarOpts,
572
+ pluginProps: getPluginProps(rationale?.inputConfiguration),
573
+ spellCheck: spellCheckEnabled,
574
+ maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
575
+ maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
576
+ uploadSoundSupport: uploadSoundSupport,
577
+ languageCharactersProps: [{
578
+ language: 'spanish'
579
+ }, {
580
+ language: 'special'
581
+ }],
582
+ mathMlOptions: mathMlOptions
583
+ }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
584
+ open: warning.open,
585
+ title: "Warning",
586
+ text: warning.text,
587
+ onClose: warning.onClose,
588
+ onConfirm: warning.onConfirm,
589
+ disableAutoFocus: true,
590
+ disableEnforceFocus: true,
591
+ disableRestoreFocus: true
592
+ }));
593
+ }
594
+ }
595
+ exports.Main = Main;
596
+ (0, _defineProperty2.default)(Main, "propTypes", {
597
+ configuration: _propTypes.default.object.isRequired,
598
+ model: _propTypes.default.object.isRequired,
599
+ disableSidePanel: _propTypes.default.bool,
600
+ onModelChanged: _propTypes.default.func.isRequired,
601
+ onConfigurationChanged: _propTypes.default.func.isRequired,
602
+ imageSupport: _propTypes.default.shape({
603
+ add: _propTypes.default.func.isRequired,
604
+ delete: _propTypes.default.func.isRequired
605
+ }),
606
+ uploadSoundSupport: _propTypes.default.shape({
607
+ add: _propTypes.default.func.isRequired,
608
+ delete: _propTypes.default.func.isRequired
609
+ })
610
+ });
611
+ var _default = exports.default = Main;
612
+ //# sourceMappingURL=main.js.map