@pie-element/extended-text-entry 15.2.1 → 15.2.2-beta.11

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.
@@ -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");
14
13
  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: _renderUi.color.border()
31
+ borderRightColor: theme.palette.grey[100]
32
32
  },
33
33
  ...(annotationType === 'negative' && {
34
34
  '&::before': {
@@ -42,17 +42,15 @@ 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.
48
45
  const Wrapper = (0, _styles.styled)('div')(({
46
+ theme,
49
47
  annotationType
50
48
  }) => ({
51
49
  width: '200px',
52
50
  overflow: 'hidden',
53
51
  borderRadius: '4px',
54
- backgroundColor: _renderUi.color.white(),
55
- border: `4px solid ${_renderUi.color.border()}`,
52
+ backgroundColor: '#ffffff',
53
+ border: `4px solid ${theme.palette.grey[100]}`,
56
54
  ...(annotationType === 'negative' && {
57
55
  borderColor: 'rgb(255, 204, 238) !important'
58
56
  }),
@@ -60,12 +58,15 @@ const Wrapper = (0, _styles.styled)('div')(({
60
58
  borderColor: 'rgb(153, 255, 153) !important'
61
59
  })
62
60
  }));
63
- const Holder = (0, _styles.styled)('div')(() => ({
61
+ const Holder = (0, _styles.styled)('div')(({
62
+ theme
63
+ }) => ({
64
64
  display: 'flex',
65
65
  flexWrap: 'wrap',
66
- borderTop: `2px solid ${_renderUi.color.border()}`
66
+ borderTop: `2px solid ${theme.palette.grey[100]}`
67
67
  }));
68
68
  const Button = (0, _styles.styled)('div')(({
69
+ theme,
69
70
  variant,
70
71
  annotationType
71
72
  }) => ({
@@ -75,10 +76,10 @@ const Button = (0, _styles.styled)('div')(({
75
76
  padding: '4px',
76
77
  cursor: 'pointer',
77
78
  '&:not(:nth-child(3n))': {
78
- borderRight: `1px solid ${_renderUi.color.border()}`
79
+ borderRight: `1px solid ${theme.palette.grey[100]}`
79
80
  },
80
81
  '&:hover': {
81
- backgroundColor: _renderUi.color.backgroundDark()
82
+ backgroundColor: theme.palette.grey[100]
82
83
  },
83
84
  ...(variant === 'positive' && {
84
85
  backgroundColor: 'rgb(153, 255, 153) !important',
@@ -1 +1 @@
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":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,MAAMK,aAAa,GAAG,IAAAC,cAAM,EAACC,iBAAO,CAAC,CAAC,CAAC;EAAEC;AAAe,CAAC,MAAM;EAC7D,kBAAkB,EAAE;IAClBC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,OAAO;IAClBC,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE;MACXC,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE,MAAM;MACbC,GAAG,EAAE,MAAM;MACXC,MAAM,EAAE,mBAAmB;MAC3BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAE,CAAC;MACTC,KAAK,EAAE,CAAC;MACRC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE,KAAK;MAClBC,gBAAgB,EAAEC,eAAK,CAACP,MAAM,CAAC;IACjC,CAAC;IACD,IAAIP,cAAc,KAAK,UAAU,IAAI;MACnC,WAAW,EAAE;QACXa,gBAAgB,EAAE;MACpB;IACF,CAAC,CAAC;IACF,IAAIb,cAAc,KAAK,UAAU,IAAI;MACnC,WAAW,EAAE;QACXa,gBAAgB,EAAE;MACpB;IACF,CAAC;EACH;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA,MAAME,OAAO,GAAG,IAAAjB,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE;AAAe,CAAC,MAAM;EACrDU,KAAK,EAAE,OAAO;EACdM,QAAQ,EAAE,QAAQ;EAClBC,YAAY,EAAE,KAAK;EACnBC,eAAe,EAAEJ,eAAK,CAACK,KAAK,CAAC,CAAC;EAC9BZ,MAAM,EAAE,aAAaO,eAAK,CAACP,MAAM,CAAC,CAAC,EAAE;EACrC,IAAIP,cAAc,KAAK,UAAU,IAAI;IACnCoB,WAAW,EAAE;EACf,CAAC,CAAC;EACF,IAAIpB,cAAc,KAAK,UAAU,IAAI;IACnCoB,WAAW,EAAE;EACf,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,MAAM,GAAG,IAAAvB,cAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EAClCwB,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,SAAS,EAAE,aAAaV,eAAK,CAACP,MAAM,CAAC,CAAC;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMkB,MAAM,GAAG,IAAA3B,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAE4B,OAAO;EAAE1B;AAAe,CAAC,MAAM;EAC7D2B,QAAQ,EAAE,CAAC;EACXjB,KAAK,EAAE,KAAK;EACZkB,SAAS,EAAE,QAAQ;EACnBC,OAAO,EAAE,KAAK;EACdC,MAAM,EAAE,SAAS;EACjB,uBAAuB,EAAE;IACvBC,WAAW,EAAE,aAAajB,eAAK,CAACP,MAAM,CAAC,CAAC;EAC1C,CAAC;EACD,SAAS,EAAE;IACTW,eAAe,EAAEJ,eAAK,CAACkB,cAAc,CAAC;EACxC,CAAC;EACD,IAAIN,OAAO,KAAK,UAAU,IAAI;IAC5BR,eAAe,EAAE,+BAA+B;IAChD,SAAS,EAAE;MACTe,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EACF,IAAIP,OAAO,KAAK,UAAU,IAAI;IAC5BR,eAAe,EAAE,+BAA+B;IAChD,SAAS,EAAE;MACTe,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EACF,IAAIP,OAAO,KAAK,YAAY,IAAI1B,cAAc,KAAK,UAAU,IAAI;IAC/D,SAAS,EAAE;MACTkB,eAAe,EAAE;IACnB;EACF,CAAC,CAAC;EACF,IAAIQ,OAAO,KAAK,YAAY,IAAI1B,cAAc,KAAK,UAAU,IAAI;IAC/D,SAAS,EAAE;MACTkB,eAAe,EAAE;IACnB;EACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMgB,cAAc,SAASC,cAAK,CAACC,SAAS,CAAC;EAa3CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,yBAaEC,KAAK,IAAK,IAAI,CAACC,QAAQ,CAAC;MAAEC,KAAK,EAAEF,KAAK,CAACG,MAAM,CAACD;IAAM,CAAC,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,sBAE1D,MAAM;MACjB,MAAM;QAAEG,KAAK,EAAEE,QAAQ;QAAEC,MAAM;QAAEC,OAAO;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MACjE,MAAM;QAAEK;MAAM,CAAC,GAAG,IAAI,CAACM,KAAK;MAE5B,IAAIN,KAAK,KAAK,EAAE,EAAE;QAChBK,QAAQ,CAAC,CAAC;MACZ;MAEA,IAAIH,QAAQ,KAAKF,KAAK,EAAE;QACtBG,MAAM,CAACD,QAAQ,EAAEF,KAAK,CAAC;MACzB;MAEA,IAAI,CAACD,QAAQ,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,CAAC;MAC5BI,OAAO,CAAC,CAAC;IACX,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEU,YAAY;QAAEF;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MAC7C,MAAM;QAAEK;MAAM,CAAC,GAAG,IAAI,CAACM,KAAK;MAE5B,IAAIN,KAAK,KAAK,EAAE,EAAE;QAChBK,QAAQ,CAAC,CAAC;MACZ,CAAC,MAAM;QACLE,YAAY,CAACP,KAAK,CAAC;MACrB;MAEA,IAAI,CAACD,QAAQ,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,CAAC;IAC9B,CAAC;IAzCC,IAAI,CAACM,KAAK,GAAG;MAAEN,KAAK,EAAEL,KAAK,CAACK;IAAM,CAAC;EACrC;EAEAQ,gCAAgCA,CAACC,SAAS,EAAE;IAC1C,MAAM;MAAET;IAAM,CAAC,GAAGS,SAAS;IAC3B,MAAM;MAAET,KAAK,EAAEU;IAAW,CAAC,GAAG,IAAI,CAACf,KAAK;IAExC,IAAIK,KAAK,KAAKU,UAAU,EAAE;MACxB,IAAI,CAACX,QAAQ,CAAC;QAAEC;MAAM,CAAC,CAAC;IAC1B;EACF;EAiCAW,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAER,QAAQ;MAAES,IAAI;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACpB,KAAK;IAC7D,MAAM;MAAEK;IAAM,CAAC,GAAG,IAAI,CAACM,KAAK;IAE5B,oBACE3D,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAC9D,aAAa;MACZ0D,QAAQ,EAAEA,QAAS;MACnBK,SAAS,EAAE,CAAE;MACbH,IAAI,EAAEA,IAAK;MACXV,OAAO,EAAE,IAAI,CAACc,UAAW;MACzB7D,cAAc,EAAE0D,IAAK;MACrBI,KAAK,EAAE;QAAEC,SAAS,EAAE,GAAGP,MAAM,IAAI;QAAEQ,UAAU,EAAE;MAAyB,CAAE;MAC1EC,kBAAkB,EAAE;QAAEC,KAAK,EAAE,GAAG;QAAEC,IAAI,EAAE;MAAI,CAAE;MAC9CC,YAAY,EAAE;QACZC,QAAQ,EAAE,KAAK;QACfC,UAAU,EAAE;MACd,CAAE;MACFC,eAAe,EAAE;QACfF,QAAQ,EAAE,KAAK;QACfC,UAAU,EAAE;MACd;IAAE,gBAEFhF,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAC5C,OAAO;MAACf,cAAc,EAAE0D;IAAK,gBAC5BpE,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAACjE,SAAA,CAAA8E,SAAS;MACRC,EAAE,EAAC,mBAAmB;MACtBX,KAAK,EAAE;QACLjC,OAAO,EAAE,SAAS;QAClBnB,KAAK,EAAE;MACT,CAAE;MACFgE,SAAS;MACTC,SAAS;MACTC,IAAI,EAAE,CAAE;MACRC,OAAO,EAAE,CAAE;MACXlC,KAAK,EAAEA,KAAM;MACbmC,QAAQ,EAAE,IAAI,CAACC,aAAc;MAC7BC,UAAU,EAAE;QAAEC,gBAAgB,EAAE;MAAK;IAAE,CACxC,CAAC,eACF3F,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAACtC,MAAM,qBACL/B,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAClC,MAAM;MAACyD,OAAO,EAAElC;IAAS,GAAC,QAEnB,CAAC,eACT1D,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAClC,MAAM;MAACC,OAAO,EAAC,YAAY;MAAC1B,cAAc,EAAE0D,IAAK;MAACwB,OAAO,EAAE,IAAI,CAACC;IAAiB,GAC/EzB,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,MAC3B,CAAC,eACTpE,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAClC,MAAM;MAACyD,OAAO,EAAE,IAAI,CAACrB;IAAW,GAAC,MAE1B,CACF,CACD,CACI,CAAC;EAEpB;AACF;AAAC,IAAAtB,gBAAA,CAAAC,OAAA,EA9GKN,cAAc,eACC;EACjBqB,QAAQ,EAAE6B,kBAAS,CAACC,MAAM;EAC1B5B,IAAI,EAAE2B,kBAAS,CAACE,IAAI;EACpB9B,MAAM,EAAE4B,kBAAS,CAACG,MAAM;EACxB5C,KAAK,EAAEyC,kBAAS,CAACI,MAAM;EACvB9B,IAAI,EAAE0B,kBAAS,CAACI,MAAM;EACtBzC,OAAO,EAAEqC,kBAAS,CAACK,IAAI;EACvBzC,QAAQ,EAAEoC,kBAAS,CAACK,IAAI;EACxB3C,MAAM,EAAEsC,kBAAS,CAACK,IAAI;EACtBvC,YAAY,EAAEkC,kBAAS,CAACK;AAC1B,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAnD,OAAA,GAqGYN,cAAc","ignoreList":[]}
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":[]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/extended-text-entry",
3
3
  "repository": "pie-framework/pie-elements",
4
- "version": "15.2.1",
4
+ "version": "15.2.2-beta.11",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -14,10 +14,10 @@
14
14
  "@mui/icons-material": "^7.3.4",
15
15
  "@mui/material": "^7.3.4",
16
16
  "@pie-framework/pie-player-events": "^0.1.0",
17
- "@pie-lib/config-ui": "13.0.17",
18
- "@pie-lib/editable-html-tip-tap": "2.1.15",
17
+ "@pie-lib/config-ui": "13.0.22-beta.5",
18
+ "@pie-lib/editable-html-tip-tap": "2.1.20-beta.5",
19
19
  "@pie-lib/math-rendering": "5.1.0",
20
- "@pie-lib/render-ui": "7.0.1",
20
+ "@pie-lib/render-ui": "6.1.3",
21
21
  "classnames": "^2.2.6",
22
22
  "debug": "^4.1.1",
23
23
  "lodash.throttle": "^4.1.1",
@@ -25,7 +25,7 @@
25
25
  "react": "18.3.1",
26
26
  "react-dom": "18.3.1"
27
27
  },
28
- "gitHead": "5635523a84dd61f007275dcb853627b1ff0c6792",
28
+ "gitHead": "5eb985ca813dbe9890be1d71169333cdceba1682",
29
29
  "scripts": {
30
30
  "postpublish": "../../scripts/postpublish"
31
31
  },
@@ -1,170 +0,0 @@
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 &mdash; ` +
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 &mdash; 1.E1&ndash;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`).
@@ -1 +0,0 @@
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};
@@ -1,139 +0,0 @@
1
- /**
2
- * Get the feedback from a {FeedbackConfig}
3
- *
4
- * @param {FeedbackConfig} feedback
5
- * @param {string} fallback
6
- */
7
- const getFeedback = (feedback, fallback) =>
8
- new Promise((resolve) => {
9
- if (!feedback || feedback.type === 'none') {
10
- resolve(undefined);
11
- return;
12
- }
13
- feedback = feedback || {};
14
- const out = feedback[feedback.type] || fallback;
15
- resolve(out);
16
- });
17
-
18
- var defaults = {
19
- annotationsEnabled: false,
20
- dimensions: { height: 100, width: 500 },
21
- equationEditor: 'Grade 8 - HS',
22
- feedbackEnabled: false,
23
- mathInput: false,
24
- playerSpellCheckDisabled: true,
25
- predefinedAnnotations: [
26
- { label: 'good', text: 'good', type: 'positive' },
27
- { label: '★', text: '★', type: 'positive' },
28
- { label: ':-)', text: ':-)', type: 'positive' },
29
- { label: 'creative', text: 'creative', type: 'positive' },
30
- { label: 'run-on', text: 'run-on', type: 'negative' },
31
- { label: 'frag', text: 'fragment', type: 'negative' },
32
- { label: 'tran', text: 'transition', type: 'negative' },
33
- { label: 'supp', text: 'support needed', type: 'negative' },
34
- { label: 'punc', text: 'punctuation', type: 'negative' },
35
- { label: 'agr', text: 'agreement wrong', type: 'negative' },
36
- { label: 'unclear', text: 'unclear', type: 'negative' },
37
- { label: 'cut', text: 'cut', type: 'negative' },
38
- { label: 'sp', text: 'spelling', type: 'negative' },
39
- { label: 'cap', text: 'capitalization', type: 'negative' },
40
- { label: 'inf', text: 'informal', type: 'negative' },
41
- { label: 'awk', text: 'awkward', type: 'negative' },
42
- ],
43
- prompt: '',
44
- promptEnabled: true,
45
- rationale: '',
46
- rationaleEnabled: true,
47
- studentInstructionsEnabled: true,
48
- teacherInstructions: '',
49
- teacherInstructionsEnabled: true,
50
- toolbarEditorPosition: 'bottom',
51
- };
52
-
53
- async function createDefaultModel(model = {}) {
54
-
55
- return { ...defaults, ...model };
56
- }
57
-
58
- const normalize = (question) => ({ ...defaults, ...question });
59
-
60
- async function model(question, session, env) {
61
- const normalizedQuestion = normalize(question);
62
-
63
- const fb =
64
- env.mode === 'evaluate' && normalizedQuestion.feedbackEnabled
65
- ? getFeedback(normalizedQuestion.feedback, 'Your answer has been submitted')
66
- : Promise.resolve(undefined);
67
-
68
- let teacherInstructions = null;
69
- if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
70
- teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
71
- } else {
72
- teacherInstructions = null;
73
- }
74
-
75
- let equationEditor = normalizedQuestion.equationEditor || 'miscellaneous';
76
-
77
- switch (normalizedQuestion.equationEditor) {
78
- case 'Grade 1 - 2':
79
- equationEditor = 1;
80
- break;
81
- case 'Grade 3 - 5':
82
- equationEditor = 3;
83
- break;
84
- case 'Grade 6 - 7':
85
- equationEditor = 6;
86
- break;
87
- case 'Grade 8 - HS':
88
- equationEditor = 8;
89
- break;
90
- }
91
-
92
- const annotatorMode = normalizedQuestion.annotationsEnabled && (env.role === 'instructor' || env.mode === 'evaluate');
93
-
94
- return fb.then((feedback) => ({
95
- prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
96
- dimensions: normalizedQuestion.dimensions,
97
- customKeys: normalizedQuestion.customKeys || [],
98
- id: normalizedQuestion.id,
99
- disabled: env.mode !== 'gather',
100
- feedback,
101
- teacherInstructions,
102
- language: normalizedQuestion.language,
103
- mathInput: normalizedQuestion.mathInput,
104
- spanishInput: normalizedQuestion.spanishInput,
105
- specialInput: normalizedQuestion.specialInput,
106
- equationEditor,
107
- spellCheckEnabled: !normalizedQuestion.playerSpellCheckDisabled,
108
- playersToolbarPosition: normalizedQuestion.playersToolbarPosition || 'bottom',
109
- annotatorMode,
110
- disabledAnnotator: normalizedQuestion.annotationsEnabled ? env.role !== 'instructor' : true,
111
- predefinedAnnotations: normalizedQuestion.annotationsEnabled ? normalizedQuestion.predefinedAnnotations : [],
112
- extraCSSRules: normalizedQuestion.extraCSSRules,
113
- }));
114
- }
115
-
116
- async function outcome(/*question, session, env*/) {
117
- return {
118
- score: 0,
119
- completed: 'n/a',
120
- note: 'Requires manual scoring',
121
- };
122
- }
123
-
124
- // remove all html tags except img, iframe and source tag for audio
125
- const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
126
-
127
- const validate = (model = {}, config = {}) => {
128
- const errors = {};
129
-
130
- ['teacherInstructions', 'prompt'].forEach((field) => {
131
- if (config[field]?.required && !getContent(model[field])) {
132
- errors[field] = 'This field is required.';
133
- }
134
- });
135
-
136
- return errors;
137
- };
138
-
139
- export { createDefaultModel, model, normalize, outcome, validate };
package/module/demo.js DELETED
@@ -1,38 +0,0 @@
1
- import Configure from './configure.js';
2
- import Element from './element.js';
3
- import * as controller from './controller.js';
4
-
5
- var generate = {};
6
-
7
- generate.model = (id, element) => ({
8
- id,
9
- element,
10
- customKeys: ['\\square'],
11
- feedback: { type: 'default', default: 'this is default feedback' },
12
- prompt: 'This is the question prompt',
13
- promptEnabled: true,
14
- mathInput: true,
15
- playersToolbarPosition: 'bottom',
16
- toolbarEditorPosition: 'bottom',
17
- spellCheckEnabled: true,
18
- rubricEnabled: false,
19
- annotationsEnabled: false,
20
- });
21
-
22
- const { model } = generate;
23
- var config = {
24
- elements: {
25
- 'extended-text-entry': '../..',
26
- },
27
- models: [model('1', 'extended-text-entry')],
28
- };
29
-
30
- //Note: demo-el is a custom element loaded in the markup.
31
- customElements.whenDefined("demo-el").then(() => {
32
- config.models.forEach((m) => {
33
- const de = document.createElement("demo-el");
34
- document.body.appendChild(de);
35
- de.def = { tagName: m.element, Element, Configure, controller };
36
- de.model = m;
37
- });
38
- });