@pie-element/extended-text-entry 15.1.1-next.131 → 15.1.1-next.147
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.
- package/configure/package.json +2 -2
- package/docs/demo/PIE-927-math-repro.md +170 -0
- package/lib/annotation/annotation-menu.js +17 -14
- package/lib/annotation/annotation-menu.js.map +1 -1
- package/lib/annotation/freeform-editor.js +11 -12
- package/lib/annotation/freeform-editor.js.map +1 -1
- package/module/configure.js +1 -1
- package/module/element.js +1 -1
- package/module/manifest.json +4 -8
- package/module/print.js +1 -1
- package/package.json +5 -5
package/configure/package.json
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"@mui/icons-material": "^7.3.4",
|
|
14
14
|
"@mui/material": "^7.3.4",
|
|
15
15
|
"@pie-framework/pie-configure-events": "^1.3.0",
|
|
16
|
-
"@pie-lib/config-ui": "13.0.
|
|
17
|
-
"@pie-lib/editable-html-tip-tap": "2.1.
|
|
16
|
+
"@pie-lib/config-ui": "13.0.17",
|
|
17
|
+
"@pie-lib/editable-html-tip-tap": "2.1.15",
|
|
18
18
|
"lodash-es": "^4.17.23",
|
|
19
19
|
"prop-types": "^15.8.1",
|
|
20
20
|
"react": "18.3.1",
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# PIE-927 — math prompt repro harness (archived)
|
|
2
|
+
|
|
3
|
+
Reported as **DNAFORM-2099**: `extended-text-entry` prompts showed their raw latex source
|
|
4
|
+
(`P\left(x\right)=-2x^{3}...`) instead of typeset math.
|
|
5
|
+
|
|
6
|
+
This file archives the throwaway demo harness built to reproduce it. The demo itself was reverted to
|
|
7
|
+
its plain single-item form once the fix landed — everything needed to rebuild the harness is below.
|
|
8
|
+
|
|
9
|
+
## Cause and fix
|
|
10
|
+
|
|
11
|
+
The prompt container was located by a **shared DOM id**. With several items of the same element on
|
|
12
|
+
one page, every item resolved that id to the *first* match, so an item would request math
|
|
13
|
+
typesetting against another item's node — leaving its own prompt untypeset.
|
|
14
|
+
|
|
15
|
+
Fixed in two halves:
|
|
16
|
+
|
|
17
|
+
| Repo | Change |
|
|
18
|
+
| --- | --- |
|
|
19
|
+
| `pie-lib` | `fix(render-ui)!: scope PreviewPrompt to its own node instead of a shared id` — breaking, shipped in `@pie-lib/render-ui@7.0.0` |
|
|
20
|
+
| `pie-elements` | `fix: read the prompt container by class, not by the id pie-lib removed` |
|
|
21
|
+
|
|
22
|
+
## Why the harness needed several items
|
|
23
|
+
|
|
24
|
+
**A single item on a page typesets fine.** The id collision cannot happen with one item, so a
|
|
25
|
+
one-item demo shows nothing. Any future repro must mount **more than one** item of the same element.
|
|
26
|
+
|
|
27
|
+
The harness mounted 5 items × 6 expressions = **30 tagged prompt expressions**, each prefixed with a
|
|
28
|
+
unique tag (`[3.E2]`) so a mis-rendered one could be named exactly. Two extra tags per item —
|
|
29
|
+
`[n.T1]` in teacher instructions, `[n.F1]` in feedback — need `role=instructor` (with `mode=view` or
|
|
30
|
+
`evaluate`) and `mode=evaluate` respectively to appear at all.
|
|
31
|
+
|
|
32
|
+
## Expression shapes covered
|
|
33
|
+
|
|
34
|
+
The two forms below both appeared in the reported items and both must render. `E1`'s wrapper holds no
|
|
35
|
+
delimiters and braces its exponents; `E2`'s holds the delimiters and leaves exponents unbraced.
|
|
36
|
+
|
|
37
|
+
| Tag | Shape |
|
|
38
|
+
| --- | --- |
|
|
39
|
+
| `E1` | wrapper without delimiters, braced exponents — `P\left(x\right)=-2x^{3}-4x^{2}+18x+36` |
|
|
40
|
+
| `E2` | wrapper with delimiters, unbraced exponents — `P\left(x\right)=-2x^3-4x^2+18x+36` |
|
|
41
|
+
| `E3` | fraction and radical — `x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}` |
|
|
42
|
+
| `E4` | radical, no delimiters — `\sqrt[3]{27x^{6}}=3x^{2}` |
|
|
43
|
+
| `E5` | series with limits — `\sum_{n=1}^{\infty}\frac{1}{n^{2}}=\frac{\pi^{2}}{6}` |
|
|
44
|
+
| `E6` | MathML pasted raw, no `data-latex` wrapper (exercises the other code path) |
|
|
45
|
+
| `T1` | teacher instructions (needs `role=instructor`) |
|
|
46
|
+
| `F1` | feedback (needs `mode=evaluate`) |
|
|
47
|
+
|
|
48
|
+
Two wrapper builders drove `E1`–`E5`:
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
// no delimiters inside the wrapper: renderMath() adds them itself, via fixMathElements()
|
|
52
|
+
const bare = (latex) => `<span data-latex="" data-raw="${latex}">${latex}</span>`;
|
|
53
|
+
|
|
54
|
+
// already delimited - the form that shipped in the item that failed to render
|
|
55
|
+
const delimited = (latex) => `<span data-latex="" data-raw="${latex}">\\(${latex}\\)</span>`;
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Rebuilding it
|
|
59
|
+
|
|
60
|
+
Run with `yarn pie-install` / the usual demo flow from `packages/extended-text-entry`. Restore these
|
|
61
|
+
four files, then remember that `ITEM_COUNT` drives `config.js` and `session.js` **but not**
|
|
62
|
+
`index.html`, which hardcodes its elements — raising the count means adding matching markup there.
|
|
63
|
+
|
|
64
|
+
### `generate.js`
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
const LATEX = {
|
|
68
|
+
polyBraced: 'P\\left(x\\right)=-2x^{3}-4x^{2}+18x+36',
|
|
69
|
+
polyPlain: 'P\\left(x\\right)=-2x^3-4x^2+18x+36',
|
|
70
|
+
quadratic: 'x=\\frac{-b\\pm\\sqrt{b^{2}-4ac}}{2a}',
|
|
71
|
+
radical: '\\sqrt[3]{27x^{6}}=3x^{2}',
|
|
72
|
+
series: '\\sum_{n=1}^{\\infty}\\frac{1}{n^{2}}=\\frac{\\pi^{2}}{6}',
|
|
73
|
+
inequality: '-3\\le x\\le 2',
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const MATHML =
|
|
77
|
+
'<math xmlns="http://www.w3.org/1998/Math/MathML">' +
|
|
78
|
+
'<mfrac><mrow><mn>3</mn><mi>x</mi></mrow><mn>4</mn></mfrac></math>';
|
|
79
|
+
|
|
80
|
+
const bare = (latex) => `<span data-latex="" data-raw="${latex}">${latex}</span>`;
|
|
81
|
+
const delimited = (latex) => `<span data-latex="" data-raw="${latex}">\\(${latex}\\)</span>`;
|
|
82
|
+
const tag = (label) => `<strong style="color:#b00020;font-family:ui-monospace,Menlo,monospace">[${label}]</strong>`;
|
|
83
|
+
const line = (label, note, markup) => `<div>${tag(label)} ${note}: ${markup}</div>`;
|
|
84
|
+
|
|
85
|
+
const prompt = (item) =>
|
|
86
|
+
[
|
|
87
|
+
`<p>Item ${item}. Every expression below must show as typeset math — ` +
|
|
88
|
+
'if any shows its raw latex source instead, report it by its tag.</p>',
|
|
89
|
+
line(`${item}.E1`, 'wrapper without delimiters, braced exponents', bare(LATEX.polyBraced)),
|
|
90
|
+
line(`${item}.E2`, 'wrapper with delimiters, unbraced exponents', delimited(LATEX.polyPlain)),
|
|
91
|
+
line(`${item}.E3`, 'fraction and radical', delimited(LATEX.quadratic)),
|
|
92
|
+
line(`${item}.E4`, 'radical, no delimiters', bare(LATEX.radical)),
|
|
93
|
+
line(`${item}.E5`, 'series with limits', delimited(LATEX.series)),
|
|
94
|
+
line(`${item}.E6`, 'mathml, no data-latex wrapper', MATHML),
|
|
95
|
+
].join('');
|
|
96
|
+
|
|
97
|
+
exports.model = (id, element) => ({
|
|
98
|
+
id,
|
|
99
|
+
element,
|
|
100
|
+
customKeys: ['\\square'],
|
|
101
|
+
feedback: {
|
|
102
|
+
type: 'custom',
|
|
103
|
+
default: 'this is default feedback',
|
|
104
|
+
custom: line(`${id}.F1`, 'feedback', delimited(LATEX.inequality)),
|
|
105
|
+
},
|
|
106
|
+
feedbackEnabled: true,
|
|
107
|
+
prompt: prompt(id),
|
|
108
|
+
promptEnabled: true,
|
|
109
|
+
teacherInstructions: line(`${id}.T1`, 'teacher instructions', delimited(LATEX.polyPlain)),
|
|
110
|
+
teacherInstructionsEnabled: true,
|
|
111
|
+
mathInput: true,
|
|
112
|
+
playersToolbarPosition: 'bottom',
|
|
113
|
+
toolbarEditorPosition: 'bottom',
|
|
114
|
+
spellCheckEnabled: true,
|
|
115
|
+
rubricEnabled: false,
|
|
116
|
+
annotationsEnabled: false,
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
exports.ITEM_COUNT = 5;
|
|
120
|
+
exports.PROMPT_EXPRESSIONS_PER_ITEM = 6;
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### `config.js`
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
const { model, ITEM_COUNT } = require('./generate');
|
|
127
|
+
|
|
128
|
+
const ids = Array.from({ length: ITEM_COUNT }, (_, i) => `${i + 1}`);
|
|
129
|
+
|
|
130
|
+
module.exports = {
|
|
131
|
+
elements: {
|
|
132
|
+
'extended-text-entry': '../..',
|
|
133
|
+
},
|
|
134
|
+
models: ids.map((id) => model(id, 'extended-text-entry')),
|
|
135
|
+
};
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### `session.js`
|
|
139
|
+
|
|
140
|
+
One session per model — the player needs a session whose `id` matches each model's `id`, so this must
|
|
141
|
+
stay the same length as `config.js`.
|
|
142
|
+
|
|
143
|
+
```js
|
|
144
|
+
const { ITEM_COUNT } = require('./generate');
|
|
145
|
+
|
|
146
|
+
module.exports = Array.from({ length: ITEM_COUNT }, (_, i) => ({
|
|
147
|
+
id: `${i + 1}`,
|
|
148
|
+
element: 'extended-text-entry',
|
|
149
|
+
}));
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### `index.html`
|
|
153
|
+
|
|
154
|
+
Five `<extended-text-entry>` elements with `pie-id="1"`…`"5"`, each wrapped in a labelled box:
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<div class="body">
|
|
158
|
+
<div class="math-demo-item">
|
|
159
|
+
<h5>item 1 — 1.E1–1.E6</h5>
|
|
160
|
+
<extended-text-entry pie-id="1"></extended-text-entry>
|
|
161
|
+
</div>
|
|
162
|
+
<!-- repeat for pie-id 2..5 -->
|
|
163
|
+
</div>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Regression check
|
|
167
|
+
|
|
168
|
+
Nothing here is covered by the Jest suite — it needs a real browser to observe typesetting. Rebuild
|
|
169
|
+
this harness and eyeball all 30 tags after any change to prompt rendering or to the math-rendering
|
|
170
|
+
libs (`@pie-lib/render-ui`, `@pie-lib/math-rendering`, `@pie-lib/math-rendering-accessible`).
|
|
@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _styles = require("@mui/material/styles");
|
|
12
12
|
var _material = require("@mui/material");
|
|
13
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
13
14
|
const StyledPopover = (0, _styles.styled)(_material.Popover)({
|
|
14
15
|
'& .MuiPaper-root': {
|
|
15
16
|
overflowX: 'unset',
|
|
@@ -24,47 +25,49 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)({
|
|
|
24
25
|
width: 0,
|
|
25
26
|
pointerEvents: 'none',
|
|
26
27
|
borderWidth: '7px',
|
|
27
|
-
borderTopColor:
|
|
28
|
+
borderTopColor: _renderUi.color.border()
|
|
28
29
|
}
|
|
29
30
|
}
|
|
30
31
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
|
|
33
|
+
/*
|
|
34
|
+
* Surface and stroke move together. Tokenising the border alone would put a scheme's
|
|
35
|
+
* border colour on a fixed white popover -- under white-on-black, `--pie-border` is
|
|
36
|
+
* #ffffff, so the outline would vanish. `--pie-white` inverts with the scheme, which
|
|
37
|
+
* is what `common.white` was standing in for.
|
|
38
|
+
*/
|
|
39
|
+
const MainWrapper = (0, _styles.styled)('div')(() => ({
|
|
34
40
|
width: '300px',
|
|
35
41
|
overflow: 'hidden',
|
|
36
42
|
borderRadius: '4px',
|
|
37
|
-
backgroundColor:
|
|
38
|
-
border: `2px solid ${
|
|
43
|
+
backgroundColor: _renderUi.color.white(),
|
|
44
|
+
border: `2px solid ${_renderUi.color.border()}`
|
|
39
45
|
}));
|
|
40
46
|
const AnnotationsWrapper = (0, _styles.styled)('div')({
|
|
41
47
|
display: 'flex',
|
|
42
48
|
flexWrap: 'wrap'
|
|
43
49
|
});
|
|
44
|
-
const ControlsWrapper = (0, _styles.styled)('div')(({
|
|
45
|
-
theme
|
|
46
|
-
}) => ({
|
|
50
|
+
const ControlsWrapper = (0, _styles.styled)('div')(() => ({
|
|
47
51
|
display: 'flex',
|
|
48
52
|
flexWrap: 'wrap',
|
|
49
|
-
borderTop: `2px solid ${
|
|
53
|
+
borderTop: `2px solid ${_renderUi.color.border()}`
|
|
50
54
|
}));
|
|
51
55
|
const Button = (0, _styles.styled)('div')(({
|
|
52
|
-
theme,
|
|
53
56
|
variant
|
|
54
57
|
}) => ({
|
|
55
58
|
width: '22%',
|
|
56
59
|
textAlign: 'center',
|
|
57
60
|
padding: '4px',
|
|
58
61
|
cursor: 'pointer',
|
|
59
|
-
borderBottom: `1px solid ${
|
|
62
|
+
borderBottom: `1px solid ${_renderUi.color.border()}`,
|
|
60
63
|
'&:not(:nth-child(4n))': {
|
|
61
|
-
borderRight: `1px solid ${
|
|
64
|
+
borderRight: `1px solid ${_renderUi.color.border()}`
|
|
62
65
|
},
|
|
63
66
|
'&:nth-child(4n)': {
|
|
64
67
|
flexGrow: 1
|
|
65
68
|
},
|
|
66
69
|
'&:hover': {
|
|
67
|
-
backgroundColor:
|
|
70
|
+
backgroundColor: _renderUi.color.backgroundDark()
|
|
68
71
|
},
|
|
69
72
|
...(variant === 'positive' && {
|
|
70
73
|
backgroundColor: 'rgb(153, 255, 153) !important',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotation-menu.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","StyledPopover","styled","Popover","overflowX","overflowY","marginTop","position","left","border","content","height","width","pointerEvents","borderWidth","borderTopColor","
|
|
1
|
+
{"version":3,"file":"annotation-menu.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","_renderUi","StyledPopover","styled","Popover","overflowX","overflowY","marginTop","position","left","border","content","height","width","pointerEvents","borderWidth","borderTopColor","color","MainWrapper","overflow","borderRadius","backgroundColor","white","AnnotationsWrapper","display","flexWrap","ControlsWrapper","borderTop","Button","variant","textAlign","padding","cursor","borderBottom","borderRight","flexGrow","backgroundDark","filter","AnnotationMenu","React","Component","render","anchorEl","annotations","isNewAnnotation","onAnnotate","onClose","onEdit","onDelete","onWrite","open","props","default","createElement","elevation","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","map","annotation","index","key","type","onClick","label","style","Fragment","_defineProperty2","PropTypes","object","bool","array","func","_default","exports"],"sources":["../../src/annotation/annotation-menu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { Popover } from '@mui/material';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledPopover = styled(Popover)({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginTop: '-16px',\n '&::after': {\n position: 'absolute',\n left: 'calc(50% - 7px)',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderTopColor: color.border(),\n },\n },\n});\n\n/*\n * Surface and stroke move together. Tokenising the border alone would put a scheme's\n * border colour on a fixed white popover -- under white-on-black, `--pie-border` is\n * #ffffff, so the outline would vanish. `--pie-white` inverts with the scheme, which\n * is what `common.white` was standing in for.\n */\nconst MainWrapper = styled('div')(() => ({\n width: '300px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: color.white(),\n border: `2px solid ${color.border()}`,\n}));\n\nconst AnnotationsWrapper = styled('div')({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\nconst ControlsWrapper = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${color.border()}`,\n}));\n\nconst Button = styled('div')(({ variant }) => ({\n width: '22%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n borderBottom: `1px solid ${color.border()}`,\n '&:not(:nth-child(4n))': {\n borderRight: `1px solid ${color.border()}`,\n },\n '&:nth-child(4n)': {\n flexGrow: 1,\n },\n '&:hover': {\n backgroundColor: color.backgroundDark(),\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n}));\n\nclass AnnotationMenu extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n annotations: PropTypes.array,\n isNewAnnotation: PropTypes.bool,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onEdit: PropTypes.func,\n onWrite: PropTypes.func,\n onAnnotate: PropTypes.func,\n };\n\n render() {\n const { anchorEl, annotations, isNewAnnotation, onAnnotate, onClose, onEdit, onDelete, onWrite, open } =\n this.props;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n open={open}\n onClose={onClose}\n elevation={5}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n >\n <MainWrapper>\n <AnnotationsWrapper>\n {annotations.map((annotation, index) => (\n <Button\n key={`annotation-${index}`}\n variant={annotation.type}\n onClick={() => onAnnotate(annotation)}\n >\n {annotation.label}\n </Button>\n ))}\n </AnnotationsWrapper>\n <ControlsWrapper>\n <Button onClick={onClose}>\n Cancel\n </Button>\n <Button style={{ pointerEvents: 'none' }} />\n {isNewAnnotation ? (\n <React.Fragment>\n <Button variant=\"positive\" onClick={() => onWrite('positive')}>\n Write\n </Button>\n <Button variant=\"negative\" onClick={() => onWrite('negative')}>\n Write\n </Button>\n </React.Fragment>\n ) : (\n <React.Fragment>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button onClick={onEdit}>\n Edit\n </Button>\n </React.Fragment>\n )}\n </ControlsWrapper>\n </MainWrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default AnnotationMenu;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,8 +10,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _material = require("@mui/material");
|
|
12
12
|
var _styles = require("@mui/material/styles");
|
|
13
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
13
14
|
const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
14
|
-
theme,
|
|
15
15
|
annotationType
|
|
16
16
|
}) => ({
|
|
17
17
|
'& .MuiPaper-root': {
|
|
@@ -28,7 +28,7 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
|
28
28
|
width: 0,
|
|
29
29
|
pointerEvents: 'none',
|
|
30
30
|
borderWidth: '7px',
|
|
31
|
-
borderRightColor:
|
|
31
|
+
borderRightColor: _renderUi.color.border()
|
|
32
32
|
},
|
|
33
33
|
...(annotationType === 'negative' && {
|
|
34
34
|
'&::before': {
|
|
@@ -42,15 +42,17 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
|
42
42
|
})
|
|
43
43
|
}
|
|
44
44
|
}));
|
|
45
|
+
|
|
46
|
+
// See annotation-menu: the popover surface has to follow the scheme alongside its
|
|
47
|
+
// stroke, or a scheme's border colour lands on a permanently white card.
|
|
45
48
|
const Wrapper = (0, _styles.styled)('div')(({
|
|
46
|
-
theme,
|
|
47
49
|
annotationType
|
|
48
50
|
}) => ({
|
|
49
51
|
width: '200px',
|
|
50
52
|
overflow: 'hidden',
|
|
51
53
|
borderRadius: '4px',
|
|
52
|
-
backgroundColor:
|
|
53
|
-
border: `4px solid ${
|
|
54
|
+
backgroundColor: _renderUi.color.white(),
|
|
55
|
+
border: `4px solid ${_renderUi.color.border()}`,
|
|
54
56
|
...(annotationType === 'negative' && {
|
|
55
57
|
borderColor: 'rgb(255, 204, 238) !important'
|
|
56
58
|
}),
|
|
@@ -58,15 +60,12 @@ const Wrapper = (0, _styles.styled)('div')(({
|
|
|
58
60
|
borderColor: 'rgb(153, 255, 153) !important'
|
|
59
61
|
})
|
|
60
62
|
}));
|
|
61
|
-
const Holder = (0, _styles.styled)('div')(({
|
|
62
|
-
theme
|
|
63
|
-
}) => ({
|
|
63
|
+
const Holder = (0, _styles.styled)('div')(() => ({
|
|
64
64
|
display: 'flex',
|
|
65
65
|
flexWrap: 'wrap',
|
|
66
|
-
borderTop: `2px solid ${
|
|
66
|
+
borderTop: `2px solid ${_renderUi.color.border()}`
|
|
67
67
|
}));
|
|
68
68
|
const Button = (0, _styles.styled)('div')(({
|
|
69
|
-
theme,
|
|
70
69
|
variant,
|
|
71
70
|
annotationType
|
|
72
71
|
}) => ({
|
|
@@ -76,10 +75,10 @@ const Button = (0, _styles.styled)('div')(({
|
|
|
76
75
|
padding: '4px',
|
|
77
76
|
cursor: 'pointer',
|
|
78
77
|
'&:not(:nth-child(3n))': {
|
|
79
|
-
borderRight: `1px solid ${
|
|
78
|
+
borderRight: `1px solid ${_renderUi.color.border()}`
|
|
80
79
|
},
|
|
81
80
|
'&:hover': {
|
|
82
|
-
backgroundColor:
|
|
81
|
+
backgroundColor: _renderUi.color.backgroundDark()
|
|
83
82
|
},
|
|
84
83
|
...(variant === 'positive' && {
|
|
85
84
|
backgroundColor: 'rgb(153, 255, 153) !important',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","StyledPopover","styled","Popover","theme","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","palette","grey","Wrapper","overflow","borderRadius","backgroundColor","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\n\nconst StyledPopover = styled(Popover)(({ theme, annotationType }) => ({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginLeft: '16px',\n '&::before': {\n position: 'absolute',\n right: '100%',\n top: '13px',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderRightColor: theme.palette.grey[100],\n },\n ...(annotationType === 'negative' && {\n '&::before': {\n borderRightColor: 'rgb(255, 204, 238) !important',\n },\n }),\n ...(annotationType === 'positive' && {\n '&::before': {\n borderRightColor: 'rgb(153, 255, 153) !important',\n },\n }),\n },\n}));\n\nconst Wrapper = styled('div')(({ theme, annotationType }) => ({\n width: '200px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: '#ffffff',\n border: `4px solid ${theme.palette.grey[100]}`,\n ...(annotationType === 'negative' && {\n borderColor: 'rgb(255, 204, 238) !important',\n }),\n ...(annotationType === 'positive' && {\n borderColor: 'rgb(153, 255, 153) !important',\n }),\n}));\n\nconst Holder = styled('div')(({ theme }) => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${theme.palette.grey[100]}`,\n}));\n\nconst Button = styled('div')(({ theme, variant, annotationType }) => ({\n flexGrow: 1,\n width: '28%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n '&:not(:nth-child(3n))': {\n borderRight: `1px solid ${theme.palette.grey[100]}`,\n },\n '&:hover': {\n backgroundColor: theme.palette.grey[100],\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'negative' && {\n '&:hover': {\n backgroundColor: 'rgb(153, 255, 153) !important',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'positive' && {\n '&:hover': {\n backgroundColor: 'rgb(255, 204, 238) !important',\n },\n }),\n}));\n\nclass FreeformEditor extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n offset: PropTypes.number,\n value: PropTypes.string,\n type: PropTypes.string,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onSave: PropTypes.func,\n onTypeChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = { value: props.value };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { value } = nextProps;\n const { value: propsValue } = this.props;\n\n if (value !== propsValue) {\n this.setState({ value });\n }\n }\n\n onValueChange = (event) => this.setState({ value: event.target.value });\n\n handleSave = () => {\n const { value: oldValue, onSave, onClose, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n }\n\n if (oldValue !== value) {\n onSave(oldValue, value);\n }\n\n this.setState({ value: '' });\n onClose();\n };\n\n handleTypeChange = () => {\n const { onTypeChange, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n } else {\n onTypeChange(value);\n }\n\n this.setState({ value: '' });\n };\n\n render() {\n const { anchorEl, offset, onDelete, open, type } = this.props;\n const { value } = this.state;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n elevation={2}\n open={open}\n onClose={this.handleSave}\n annotationType={type}\n style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n <Wrapper annotationType={type}>\n <TextField\n id=\"annotation-editor\"\n style={{\n padding: '2px 5px',\n width: '95%',\n }}\n autoFocus\n multiline\n rows={1}\n maxRows={4}\n value={value}\n onChange={this.onValueChange}\n InputProps={{ disableUnderline: true }}\n />\n <Holder>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n {type === 'negative' ? 'Green' : 'Pink'}\n </Button>\n <Button onClick={this.handleSave}>\n Save\n </Button>\n </Holder>\n </Wrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default FreeformEditor;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","_renderUi","StyledPopover","styled","Popover","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","color","Wrapper","overflow","borderRadius","backgroundColor","white","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","backgroundDark","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledPopover = styled(Popover)(({ annotationType }) => ({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginLeft: '16px',\n '&::before': {\n position: 'absolute',\n right: '100%',\n top: '13px',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderRightColor: color.border(),\n },\n ...(annotationType === 'negative' && {\n '&::before': {\n borderRightColor: 'rgb(255, 204, 238) !important',\n },\n }),\n ...(annotationType === 'positive' && {\n '&::before': {\n borderRightColor: 'rgb(153, 255, 153) !important',\n },\n }),\n },\n}));\n\n// See annotation-menu: the popover surface has to follow the scheme alongside its\n// stroke, or a scheme's border colour lands on a permanently white card.\nconst Wrapper = styled('div')(({ annotationType }) => ({\n width: '200px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: color.white(),\n border: `4px solid ${color.border()}`,\n ...(annotationType === 'negative' && {\n borderColor: 'rgb(255, 204, 238) !important',\n }),\n ...(annotationType === 'positive' && {\n borderColor: 'rgb(153, 255, 153) !important',\n }),\n}));\n\nconst Holder = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${color.border()}`,\n}));\n\nconst Button = styled('div')(({ variant, annotationType }) => ({\n flexGrow: 1,\n width: '28%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n '&:not(:nth-child(3n))': {\n borderRight: `1px solid ${color.border()}`,\n },\n '&:hover': {\n backgroundColor: color.backgroundDark(),\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'negative' && {\n '&:hover': {\n backgroundColor: 'rgb(153, 255, 153) !important',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'positive' && {\n '&:hover': {\n backgroundColor: 'rgb(255, 204, 238) !important',\n },\n }),\n}));\n\nclass FreeformEditor extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n offset: PropTypes.number,\n value: PropTypes.string,\n type: PropTypes.string,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onSave: PropTypes.func,\n onTypeChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = { value: props.value };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { value } = nextProps;\n const { value: propsValue } = this.props;\n\n if (value !== propsValue) {\n this.setState({ value });\n }\n }\n\n onValueChange = (event) => this.setState({ value: event.target.value });\n\n handleSave = () => {\n const { value: oldValue, onSave, onClose, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n }\n\n if (oldValue !== value) {\n onSave(oldValue, value);\n }\n\n this.setState({ value: '' });\n onClose();\n };\n\n handleTypeChange = () => {\n const { onTypeChange, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n } else {\n onTypeChange(value);\n }\n\n this.setState({ value: '' });\n };\n\n render() {\n const { anchorEl, offset, onDelete, open, type } = this.props;\n const { value } = this.state;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n elevation={2}\n open={open}\n onClose={this.handleSave}\n annotationType={type}\n style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n <Wrapper annotationType={type}>\n <TextField\n id=\"annotation-editor\"\n style={{\n padding: '2px 5px',\n width: '95%',\n }}\n autoFocus\n multiline\n rows={1}\n maxRows={4}\n value={value}\n onChange={this.onValueChange}\n InputProps={{ disableUnderline: true }}\n />\n <Holder>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n {type === 'negative' ? 'Green' : 'Pink'}\n </Button>\n <Button onClick={this.handleSave}>\n Save\n </Button>\n </Holder>\n </Wrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default FreeformEditor;\n"],"mappings":"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","ignoreList":[]}
|
package/module/configure.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_dll_react as e,_dll_prop_types as t,_dll_mui__material as n,_dll_mui__material_styles as i,_dll_react_dom_client as a}from"../../../@pie-lib/shared-module@^5.2.14/module/index.js";import{_dll_pie_lib__config_ui as s}from"../../../@pie-lib/config-module@^4.0.19/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@^7.1.16/module/index.js";var l={};Object.defineProperty(l,"__esModule",{value:!0});class r extends CustomEvent{constructor(e,t=!1){super(r.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}r.TYPE="model.updated";var d=l.ModelUpdatedEvent=r;class c extends CustomEvent{constructor(e,t){super(c.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}c.TYPE="delete.image";var p=l.DeleteImageEvent=c;class u extends CustomEvent{constructor(e){super(u.TYPE,{bubbles:!0,detail:e}),this.handler=e}}u.TYPE="insert.image";var h=l.InsertImageEvent=u;class g extends CustomEvent{constructor(e,t){super(g.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}g.TYPE="delete.sound";var b=l.DeleteSoundEvent=g;class m extends CustomEvent{constructor(e){super(m.TYPE,{bubbles:!0,detail:e}),this.handler=e}}m.TYPE="insert.sound";var _=l.InsertSoundEvent=m;const E=e,f=t,{Typography:C}=n,{styled:I}=i,{FeedbackSelector:v}=s,{InputContainer:S}=s,{settings:x}=s,{layout:y}=s,k=o,{ALL_PLUGINS:P}=o;function w(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}const{Panel:M,toggle:T,numberFields:A,dropdown:D}=x,R={type:"default",default:"Your answer has been submitted"},q=I(C)(({theme:e})=>({paddingBottom:e.spacing(1)})),Y=I(S)(({theme:e})=>({paddingTop:e.spacing(1),marginTop:e.spacing(2),marginBottom:e.spacing(2),width:"100%"})),O=I("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class j extends E.Component{static __initStatic(){this.propTypes={onModelChanged:f.func.isRequired,onConfigurationChanged:f.func,model:f.object.isRequired,configuration:f.object.isRequired,imageSupport:f.object.isRequired,uploadSoundSupport:f.object.isRequired}}constructor(e){super(e),j.prototype.__init.call(this),j.prototype.__init2.call(this),j.prototype.__init3.call(this),this.state={setDimensions:!0}}__init(){this.onPromptChange=e=>{const{onModelChanged:t,model:n}=this.props;t({...n,prompt:e})}}__init2(){this.changeFeedback=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,feedback:e})}}__init3(){this.changeTeacherInstructions=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,teacherInstructions:e})}}render(){const{model:e,configuration:t,imageSupport:n,onConfigurationChanged:i,onModelChanged:a,uploadSoundSupport:s}=this.props,{annotations:o={},contentDimensions:l={},dimensions:r={},equationEditor:d={},feedback:c={},playerSpellCheck:p={},prompt:u={},settingsPanelDisabled:h,spanishInput:g={},specialInput:b={},spellCheck:m={},studentInstructions:_={},teacherInstructions:f={},mathInput:C={},maxImageWidth:I={},maxImageHeight:S={},multiple:x={},withRubric:j={},mathMlOptions:H={},baseInputConfiguration:F={}}=t||{},{errors:G={},extraCSSRules:W,feedbackEnabled:L,promptEnabled:z,spellCheckEnabled:N,teacherInstructionsEnabled:B,toolbarEditorPosition:U}=e||{},{prompt:J,teacherInstructions:K}=G,Q=I&&I.prompt,V=S&&S.prompt,X={position:"top"===U?"top":"bottom"},Z={mathInput:C.settings&&T(C.label),equationEditor:d.enabled&&e.mathInput&&D(d.label,["non-negative-integers","integers","decimals","fractions","Grade 1 - 2","Grade 3 - 5","Grade 6 - 7","Grade 8 - HS","geometry","advanced-algebra","statistics","item-authoring"]),spanishInput:g.settings&&T(g.label),specialInput:b.settings&&T(b.label),dimensions:r.settings&&A(r.label,{width:{label:"Width (px)",suffix:"px",min:100,max:1200},height:{label:"Height (px)",suffix:"px",min:100,max:500}}),"multiple.enabled":x.settings&&T(x.label,!0),promptEnabled:u.settings&&T(u.label),feedbackEnabled:c.settings&&T(c.label),annotationsEnabled:o.settings&&T(o.label),spellCheckEnabled:m.settings&&T(m.label),playerSpellCheckDisabled:p.settings&&T(p.label)},$={teacherInstructionsEnabled:f.settings&&T(f.label),studentInstructionsEnabled:_.settings&&T(_.label),rubricEnabled:w([j,"optionalAccess",e=>e.settings])&&T(w([j,"optionalAccess",e=>e.label]))},ee=e=>Object.assign({...F},e||{});return E.createElement(y.ConfigLayout,{extraCSSRules:W,dimensions:l,hideSettings:h,settings:E.createElement(M,{model:e,configuration:t,onChangeModel:e=>a(e),onChangeConfiguration:e=>i(e),groups:{Settings:Z,Properties:$}})},B&&E.createElement(Y,{label:f.label},E.createElement(k,{className:"prompt",markup:e.teacherInstructions||"",onChange:this.changeTeacherInstructions,imageSupport:n,nonEmpty:!1,error:K,toolbarOpts:X,spellCheck:N,maxImageWidth:I&&I.teacherInstructions||Q,maxImageHeight:S&&S.teacherInstructions||V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:H,pluginProps:ee(w([f,"optionalAccess",e=>e.inputConfiguration]))}),K&&E.createElement(O,null,K)),z&&E.createElement(Y,{label:u.label},E.createElement(k,{activePlugins:P,className:"prompt",markup:e.prompt||"",onChange:this.onPromptChange,imageSupport:n,nonEmpty:!1,error:J,toolbarOpts:X,spellCheck:N,maxImageWidth:Q,maxImageHeight:V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:H,pluginProps:ee(w([u,"optionalAccess",e=>e.inputConfiguration]))}),J&&E.createElement(O,null,J)),L&&E.createElement(E.Fragment,null,E.createElement(q,{variant:"h6"},"Feedback"),E.createElement(v,{label:"When submitted, show",feedback:e.feedback||R,onChange:this.changeFeedback,toolbarOpts:X})))}}j.__initStatic();var H={annotationsEnabled:!1,dimensions:{height:100,width:500},equationEditor:"Grade 8 - HS",feedbackEnabled:!1,mathInput:!1,playerSpellCheckDisabled:!0,predefinedAnnotations:[{label:"good",text:"good",type:"positive"},{label:"★",text:"★",type:"positive"},{label:":-)",text:":-)",type:"positive"},{label:"creative",text:"creative",type:"positive"},{label:"run-on",text:"run-on",type:"negative"},{label:"frag",text:"fragment",type:"negative"},{label:"tran",text:"transition",type:"negative"},{label:"supp",text:"support needed",type:"negative"},{label:"punc",text:"punctuation",type:"negative"},{label:"agr",text:"agreement wrong",type:"negative"},{label:"unclear",text:"unclear",type:"negative"},{label:"cut",text:"cut",type:"negative"},{label:"sp",text:"spelling",type:"negative"},{label:"cap",text:"capitalization",type:"negative"},{label:"inf",text:"informal",type:"negative"},{label:"awk",text:"awkward",type:"negative"}],prompt:"",promptEnabled:!0,rationale:"",rationaleEnabled:!0,spanishInput:!1,specialInput:!1,spellCheckEnabled:!0,studentInstructionsEnabled:!0,teacherInstructions:"",teacherInstructionsEnabled:!0,toolbarEditorPosition:"bottom"},F={annotations:{settings:!1,label:"Annotations"},baseInputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!0},blockquote:{disabled:!0},textAlign:{disabled:!0},showParagraphs:{disabled:!1},separateParagraphs:{disabled:!0}},dimensions:{settings:!0,label:"Text-Entry Display Size"},spellCheck:{label:"Spellcheck",settings:!1,enabled:!0},playerSpellCheck:{label:"Disable Student Spellcheck",settings:!0,enabled:!0},equationEditor:{settings:!1,label:"Equation Editor",enabled:!0},feedback:{settings:!0,label:"Feedback"},mathInput:{settings:!0,label:"Student response can include math notation",enabled:!1},settingsPanelDisabled:!1,spanishInput:{settings:!0,label:"Students can insert Spanish",enabled:!1},specialInput:{settings:!0,label:"Students can insert Special Characters",enabled:!1},multiple:{settings:!1,label:"Multiple Parts",enabled:!1},studentInstructions:{settings:!1,label:"Student Instructions"},prompt:{settings:!0,label:"Prompt",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},teacherInstructions:{settings:!0,label:"Teacher Instructions",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},maxImageWidth:{teacherInstructions:300,prompt:300},maxImageHeight:{teacherInstructions:300,prompt:300},withRubric:{settings:!1,label:"Add Rubric"},mathMlOptions:{mmlOutput:!1,mmlEditing:!1}};const G=e,{createRoot:W}=a;function L(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}class z extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={},t)=>{const n={...H,...e};return L([t,"optionalAccess",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&!n.rubricEnabled&&(n.rubricEnabled=!0),n}}constructor(){super(),this._root=null,this._configuration=F,L([this,"access",e=>e._configuration,"access",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1),this._model=z.createDefaultModel({},this._configuration)}set model(e){this._model=z.createDefaultModel(e,this._configuration),this.render()}set configuration(e){this._configuration={...F,...e};const{withRubric:t={}}=e||{};L([t,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1,this._model.rubricEnabled||(this._model.rubricEnabled=!0)),this.render()}onModelChanged(e){this._model=e,this.render(),this.dispatchEvent(new d(this._model,!1))}onConfigurationChanged(e){this._configuration={...F,...e},this._model&&this.onModelChanged(this._model),this.render()}insertImage(e){this.dispatchEvent(new h(e))}onDeleteImage(e,t){this.dispatchEvent(new p(e,t))}insertSound(e){this.dispatchEvent(new _(e))}onDeleteSound(e,t){this.dispatchEvent(new b(e,t))}render(){if(this._model){const e=G.createElement(j,{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)}});this._root||(this._root=W(this)),this._root.render(e)}}connectedCallback(){this.render()}disconnectedCallback(){this._root&&(this._root.unmount(),this._root=null)}}z.__initStatic();export{z as default};
|
|
1
|
+
import{_dll_react as e,_dll_prop_types as t,_dll_mui__material as n,_dll_mui__material_styles as i,_dll_react_dom_client as a}from"../../../@pie-lib/shared-module@6.0.0/module/index.js";import{_dll_pie_lib__config_ui as s}from"../../../@pie-lib/config-module@5.0.0/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@8.0.0/module/index.js";var l={};Object.defineProperty(l,"__esModule",{value:!0});class r extends CustomEvent{constructor(e,t=!1){super(r.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}r.TYPE="model.updated";var d=l.ModelUpdatedEvent=r;class c extends CustomEvent{constructor(e,t){super(c.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}c.TYPE="delete.image";var p=l.DeleteImageEvent=c;class u extends CustomEvent{constructor(e){super(u.TYPE,{bubbles:!0,detail:e}),this.handler=e}}u.TYPE="insert.image";var h=l.InsertImageEvent=u;class g extends CustomEvent{constructor(e,t){super(g.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}g.TYPE="delete.sound";var b=l.DeleteSoundEvent=g;class m extends CustomEvent{constructor(e){super(m.TYPE,{bubbles:!0,detail:e}),this.handler=e}}m.TYPE="insert.sound";var _=l.InsertSoundEvent=m;const E=e,f=t,{Typography:C}=n,{styled:I}=i,{FeedbackSelector:v}=s,{InputContainer:S}=s,{settings:x}=s,{layout:y}=s,k=o,{ALL_PLUGINS:P}=o;function w(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}const{Panel:M,toggle:T,numberFields:A,dropdown:D}=x,R={type:"default",default:"Your answer has been submitted"},q=I(C)(({theme:e})=>({paddingBottom:e.spacing(1)})),Y=I(S)(({theme:e})=>({paddingTop:e.spacing(1),marginTop:e.spacing(2),marginBottom:e.spacing(2),width:"100%"})),O=I("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class j extends E.Component{static __initStatic(){this.propTypes={onModelChanged:f.func.isRequired,onConfigurationChanged:f.func,model:f.object.isRequired,configuration:f.object.isRequired,imageSupport:f.object.isRequired,uploadSoundSupport:f.object.isRequired}}constructor(e){super(e),j.prototype.__init.call(this),j.prototype.__init2.call(this),j.prototype.__init3.call(this),this.state={setDimensions:!0}}__init(){this.onPromptChange=e=>{const{onModelChanged:t,model:n}=this.props;t({...n,prompt:e})}}__init2(){this.changeFeedback=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,feedback:e})}}__init3(){this.changeTeacherInstructions=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,teacherInstructions:e})}}render(){const{model:e,configuration:t,imageSupport:n,onConfigurationChanged:i,onModelChanged:a,uploadSoundSupport:s}=this.props,{annotations:o={},contentDimensions:l={},dimensions:r={},equationEditor:d={},feedback:c={},playerSpellCheck:p={},prompt:u={},settingsPanelDisabled:h,spanishInput:g={},specialInput:b={},spellCheck:m={},studentInstructions:_={},teacherInstructions:f={},mathInput:C={},maxImageWidth:I={},maxImageHeight:S={},multiple:x={},withRubric:j={},mathMlOptions:H={},baseInputConfiguration:F={}}=t||{},{errors:G={},extraCSSRules:W,feedbackEnabled:L,promptEnabled:z,spellCheckEnabled:N,teacherInstructionsEnabled:B,toolbarEditorPosition:U}=e||{},{prompt:J,teacherInstructions:K}=G,Q=I&&I.prompt,V=S&&S.prompt,X={position:"top"===U?"top":"bottom"},Z={mathInput:C.settings&&T(C.label),equationEditor:d.enabled&&e.mathInput&&D(d.label,["non-negative-integers","integers","decimals","fractions","Grade 1 - 2","Grade 3 - 5","Grade 6 - 7","Grade 8 - HS","geometry","advanced-algebra","statistics","item-authoring"]),spanishInput:g.settings&&T(g.label),specialInput:b.settings&&T(b.label),dimensions:r.settings&&A(r.label,{width:{label:"Width (px)",suffix:"px",min:100,max:1200},height:{label:"Height (px)",suffix:"px",min:100,max:500}}),"multiple.enabled":x.settings&&T(x.label,!0),promptEnabled:u.settings&&T(u.label),feedbackEnabled:c.settings&&T(c.label),annotationsEnabled:o.settings&&T(o.label),spellCheckEnabled:m.settings&&T(m.label),playerSpellCheckDisabled:p.settings&&T(p.label)},$={teacherInstructionsEnabled:f.settings&&T(f.label),studentInstructionsEnabled:_.settings&&T(_.label),rubricEnabled:w([j,"optionalAccess",e=>e.settings])&&T(w([j,"optionalAccess",e=>e.label]))},ee=e=>Object.assign({...F},e||{});return E.createElement(y.ConfigLayout,{extraCSSRules:W,dimensions:l,hideSettings:h,settings:E.createElement(M,{model:e,configuration:t,onChangeModel:e=>a(e),onChangeConfiguration:e=>i(e),groups:{Settings:Z,Properties:$}})},B&&E.createElement(Y,{label:f.label},E.createElement(k,{className:"prompt",markup:e.teacherInstructions||"",onChange:this.changeTeacherInstructions,imageSupport:n,nonEmpty:!1,error:K,toolbarOpts:X,spellCheck:N,maxImageWidth:I&&I.teacherInstructions||Q,maxImageHeight:S&&S.teacherInstructions||V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:H,pluginProps:ee(w([f,"optionalAccess",e=>e.inputConfiguration]))}),K&&E.createElement(O,null,K)),z&&E.createElement(Y,{label:u.label},E.createElement(k,{activePlugins:P,className:"prompt",markup:e.prompt||"",onChange:this.onPromptChange,imageSupport:n,nonEmpty:!1,error:J,toolbarOpts:X,spellCheck:N,maxImageWidth:Q,maxImageHeight:V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:H,pluginProps:ee(w([u,"optionalAccess",e=>e.inputConfiguration]))}),J&&E.createElement(O,null,J)),L&&E.createElement(E.Fragment,null,E.createElement(q,{variant:"h6"},"Feedback"),E.createElement(v,{label:"When submitted, show",feedback:e.feedback||R,onChange:this.changeFeedback,toolbarOpts:X})))}}j.__initStatic();var H={annotationsEnabled:!1,dimensions:{height:100,width:500},equationEditor:"Grade 8 - HS",feedbackEnabled:!1,mathInput:!1,playerSpellCheckDisabled:!0,predefinedAnnotations:[{label:"good",text:"good",type:"positive"},{label:"★",text:"★",type:"positive"},{label:":-)",text:":-)",type:"positive"},{label:"creative",text:"creative",type:"positive"},{label:"run-on",text:"run-on",type:"negative"},{label:"frag",text:"fragment",type:"negative"},{label:"tran",text:"transition",type:"negative"},{label:"supp",text:"support needed",type:"negative"},{label:"punc",text:"punctuation",type:"negative"},{label:"agr",text:"agreement wrong",type:"negative"},{label:"unclear",text:"unclear",type:"negative"},{label:"cut",text:"cut",type:"negative"},{label:"sp",text:"spelling",type:"negative"},{label:"cap",text:"capitalization",type:"negative"},{label:"inf",text:"informal",type:"negative"},{label:"awk",text:"awkward",type:"negative"}],prompt:"",promptEnabled:!0,rationale:"",rationaleEnabled:!0,spanishInput:!1,specialInput:!1,spellCheckEnabled:!0,studentInstructionsEnabled:!0,teacherInstructions:"",teacherInstructionsEnabled:!0,toolbarEditorPosition:"bottom"},F={annotations:{settings:!1,label:"Annotations"},baseInputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!0},blockquote:{disabled:!0},textAlign:{disabled:!0},showParagraphs:{disabled:!1},separateParagraphs:{disabled:!0}},dimensions:{settings:!0,label:"Text-Entry Display Size"},spellCheck:{label:"Spellcheck",settings:!1,enabled:!0},playerSpellCheck:{label:"Disable Student Spellcheck",settings:!0,enabled:!0},equationEditor:{settings:!1,label:"Equation Editor",enabled:!0},feedback:{settings:!0,label:"Feedback"},mathInput:{settings:!0,label:"Student response can include math notation",enabled:!1},settingsPanelDisabled:!1,spanishInput:{settings:!0,label:"Students can insert Spanish",enabled:!1},specialInput:{settings:!0,label:"Students can insert Special Characters",enabled:!1},multiple:{settings:!1,label:"Multiple Parts",enabled:!1},studentInstructions:{settings:!1,label:"Student Instructions"},prompt:{settings:!0,label:"Prompt",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},teacherInstructions:{settings:!0,label:"Teacher Instructions",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},maxImageWidth:{teacherInstructions:300,prompt:300},maxImageHeight:{teacherInstructions:300,prompt:300},withRubric:{settings:!1,label:"Add Rubric"},mathMlOptions:{mmlOutput:!1,mmlEditing:!1}};const G=e,{createRoot:W}=a;function L(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}class z extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={},t)=>{const n={...H,...e};return L([t,"optionalAccess",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&!n.rubricEnabled&&(n.rubricEnabled=!0),n}}constructor(){super(),this._root=null,this._configuration=F,L([this,"access",e=>e._configuration,"access",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1),this._model=z.createDefaultModel({},this._configuration)}set model(e){this._model=z.createDefaultModel(e,this._configuration),this.render()}set configuration(e){this._configuration={...F,...e};const{withRubric:t={}}=e||{};L([t,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1,this._model.rubricEnabled||(this._model.rubricEnabled=!0)),this.render()}onModelChanged(e){this._model=e,this.render(),this.dispatchEvent(new d(this._model,!1))}onConfigurationChanged(e){this._configuration={...F,...e},this._model&&this.onModelChanged(this._model),this.render()}insertImage(e){this.dispatchEvent(new h(e))}onDeleteImage(e,t){this.dispatchEvent(new p(e,t))}insertSound(e){this.dispatchEvent(new _(e))}onDeleteSound(e,t){this.dispatchEvent(new b(e,t))}render(){if(this._model){const e=G.createElement(j,{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)}});this._root||(this._root=W(this)),this._root.render(e)}}connectedCallback(){this.render()}disconnectedCallback(){this._root&&(this._root.unmount(),this._root=null)}}z.__initStatic();export{z as default};
|