@pie-lib/editable-html 11.30.0-mui-update.0 → 11.33.0-mui-update.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/lib/plugins/respArea/drag-in-the-blank/choice.js +86 -32
  3. package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +1 -1
  4. package/lib/plugins/respArea/drag-in-the-blank/index.js +16 -68
  5. package/lib/plugins/respArea/drag-in-the-blank/index.js.map +1 -1
  6. package/lib/plugins/respArea/drag-in-the-blank/utils.js +38 -0
  7. package/lib/plugins/respArea/drag-in-the-blank/utils.js.map +1 -0
  8. package/package.json +8 -7
  9. package/src/plugins/respArea/drag-in-the-blank/choice.jsx +104 -46
  10. package/src/plugins/respArea/drag-in-the-blank/index.jsx +5 -70
  11. package/src/plugins/respArea/drag-in-the-blank/utils.js +14 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,38 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [11.33.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.32.0-mui-update.0...@pie-lib/editable-html@11.33.0-mui-update.0) (2025-12-17)
7
+
8
+ **Note:** Version bump only for package @pie-lib/editable-html
9
+
10
+
11
+
12
+
13
+
14
+ # [11.32.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.31.0-mui-update.0...@pie-lib/editable-html@11.32.0-mui-update.0) (2025-12-17)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * choice render for both img and math ([39bc638](https://github.com/pie-framework/pie-lib/commit/39bc638070fc5e9c5f2b50d0d70698f80a32ecb9))
20
+ * fix math rendering issues after React, mui and drag upgrade for drag-in-the-blank ([6dc3c95](https://github.com/pie-framework/pie-lib/commit/6dc3c95c041be02015a9005133fe750e1ff78842))
21
+ * prevent math re-rendering issues when dragging choices over blanks ([b316544](https://github.com/pie-framework/pie-lib/commit/b316544f0d574f7f57b70e2de4d8bab2086a4151))
22
+
23
+
24
+
25
+
26
+
27
+ # [11.31.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.30.0-mui-update.0...@pie-lib/editable-html@11.31.0-mui-update.0) (2025-12-11)
28
+
29
+
30
+ ### Features
31
+
32
+ * updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
33
+
34
+
35
+
36
+
37
+
6
38
  # [11.30.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.29.0-mui-update.0...@pie-lib/editable-html@11.30.0-mui-update.0) (2025-12-02)
7
39
 
8
40
 
package/lib/plugins/respArea/drag-in-the-blank/choice.js CHANGED
@@ -12,14 +12,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
13
  var _react = _interopRequireWildcard(require("react"));
14
14
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
- var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
15
+ var _classnames = _interopRequireDefault(require("classnames"));
16
16
  var _core = require("@dnd-kit/core");
17
- var _utilities = require("@dnd-kit/utilities");
18
17
  var _renderUi = require("@pie-lib/render-ui");
19
18
  var _mathRendering = require("@pie-lib/math-rendering");
20
19
  var _styles = require("@mui/material/styles");
21
- var _classnames = _interopRequireDefault(require("classnames"));
22
20
  var _icons = require("../icons");
21
+ var _utils = require("./utils");
23
22
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
24
23
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
25
24
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -45,13 +44,13 @@ var StyledContent = (0, _styles.styled)('span')(function (_ref) {
45
44
  };
46
45
  });
47
46
  function BlankContent(_ref2) {
47
+ var _dragItem$value2, _dragItem$value3;
48
48
  var n = _ref2.n,
49
49
  children = _ref2.children,
50
50
  isDragging = _ref2.isDragging,
51
51
  isOver = _ref2.isOver,
52
52
  dragItem = _ref2.dragItem,
53
53
  value = _ref2.value,
54
- disabled = _ref2.disabled,
55
54
  externalStyle = _ref2.style;
56
55
  var _useState = (0, _react.useState)(null),
57
56
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -59,8 +58,11 @@ function BlankContent(_ref2) {
59
58
  setHoveredElementSize = _useState2[1];
60
59
  var elementRef = (0, _react.useRef)(null);
61
60
  var handleClick = function handleClick(event) {
62
- if (elementRef.current) {
63
- elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';
61
+ if (!elementRef.current) return;
62
+ if (elementRef.current.contains(event.target)) {
63
+ elementRef.current.classList.add('selected');
64
+ } else {
65
+ elementRef.current.classList.remove('selected');
64
66
  }
65
67
  };
66
68
  (0, _react.useEffect)(function () {
@@ -70,10 +72,14 @@ function BlankContent(_ref2) {
70
72
  };
71
73
  }, []);
72
74
  (0, _react.useEffect)(function () {
75
+ var _dragItem$value;
76
+ // Render math for the current value or preview
77
+ var currentContent = isOver && (dragItem === null || dragItem === void 0 || (_dragItem$value = dragItem.value) === null || _dragItem$value === void 0 ? void 0 : _dragItem$value.value) || (value === null || value === void 0 ? void 0 : value.value);
78
+ if (!currentContent) return;
73
79
  if (elementRef.current && typeof _mathRendering.renderMath === 'function') {
74
80
  (0, _mathRendering.renderMath)(elementRef.current);
75
81
  }
76
- });
82
+ }, [value === null || value === void 0 ? void 0 : value.id, value === null || value === void 0 ? void 0 : value.value, isOver, dragItem === null || dragItem === void 0 || (_dragItem$value2 = dragItem.value) === null || _dragItem$value2 === void 0 ? void 0 : _dragItem$value2.id, dragItem === null || dragItem === void 0 || (_dragItem$value3 = dragItem.value) === null || _dragItem$value3 === void 0 ? void 0 : _dragItem$value3.value]);
77
83
  (0, _react.useEffect)(function () {
78
84
  if (isOver && elementRef.current && !hoveredElementSize) {
79
85
  var node = elementRef.current;
@@ -85,10 +91,18 @@ function BlankContent(_ref2) {
85
91
  setHoveredElementSize(null);
86
92
  }
87
93
  }, [isOver, hoveredElementSize]);
88
- var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
94
+ var label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || "\xA0";
89
95
  var finalLabel = isDragging ? "\xA0" : label;
90
96
  var hasGrip = finalLabel !== "\xA0";
91
97
  var isPreview = dragItem && isOver;
98
+ var hasContent = finalLabel !== "\xA0";
99
+ var containsHTML = hasContent && /<[^>]+>/.test(finalLabel);
100
+ var spanProps = _objectSpread({
101
+ key: "".concat(n.key, "-").concat(isPreview ? 'preview' : 'value')
102
+ }, hasContent && {
103
+ 'data-latex': '',
104
+ 'data-raw': finalLabel
105
+ });
92
106
  return /*#__PURE__*/_react["default"].createElement("div", {
93
107
  ref: elementRef,
94
108
  style: _objectSpread({
@@ -115,11 +129,11 @@ function BlankContent(_ref2) {
115
129
  color: '#9B9B9B'
116
130
  },
117
131
  contentEditable: false
118
- }), /*#__PURE__*/_react["default"].createElement("span", {
132
+ }), containsHTML ? /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, spanProps, {
119
133
  dangerouslySetInnerHTML: {
120
134
  __html: finalLabel
121
135
  }
122
- }), children);
136
+ })) : /*#__PURE__*/_react["default"].createElement("span", spanProps, finalLabel), children);
123
137
  }
124
138
  BlankContent.propTypes = {
125
139
  n: _propTypes["default"].object,
@@ -135,60 +149,100 @@ function DragDropChoice(_ref3) {
135
149
  var _dragItem$data;
136
150
  var value = _ref3.value,
137
151
  disabled = _ref3.disabled,
138
- onChange = _ref3.onChange,
139
- removeResponse = _ref3.removeResponse,
140
152
  instanceId = _ref3.instanceId,
141
- targetId = _ref3.targetId,
142
- duplicates = _ref3.duplicates,
153
+ children = _ref3.children,
143
154
  n = _ref3.n,
144
- children = _ref3.children;
145
- // Setup draggable functionality
155
+ nodeProps = _ref3.nodeProps,
156
+ opts = _ref3.opts;
146
157
  var _useDraggable = (0, _core.useDraggable)({
147
158
  id: "drag-".concat(n.key),
148
- disabled: disabled || !value,
159
+ disabled: disabled || !(value !== null && value !== void 0 && value.value),
149
160
  data: {
150
- id: targetId,
161
+ id: "drag-".concat(n.key),
151
162
  value: value,
152
163
  instanceId: instanceId,
153
- fromChoice: true
164
+ nodeProps: nodeProps,
165
+ n: n,
166
+ opts: opts,
167
+ type: 'drag-in-the-blank-placed-choice',
168
+ fromChoice: !value,
169
+ onRemove: function onRemove(draggedData) {
170
+ return (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
171
+ },
172
+ onDrop: function onDrop(draggedData, dropData) {
173
+ // check if we're dropping into a blank
174
+ var isValidBlank = (dropData === null || dropData === void 0 ? void 0 : dropData.type) === "drag-in-the-blank-drop-choice";
175
+ if (!isValidBlank) return;
176
+
177
+ // place into blank
178
+ (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
179
+ if (!opts.options.duplicates && draggedData.fromChoice) {
180
+ (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
181
+ }
182
+ }
154
183
  }
155
184
  }),
156
185
  dragAttributes = _useDraggable.attributes,
157
186
  dragListeners = _useDraggable.listeners,
158
187
  setDragNodeRef = _useDraggable.setNodeRef,
159
- dragTransform = _useDraggable.transform,
160
188
  isDragging = _useDraggable.isDragging;
161
-
162
- // Setup droppable functionality
163
189
  var _useDroppable = (0, _core.useDroppable)({
164
190
  id: "drop-".concat(n.key),
165
191
  data: {
166
- accepts: ['drag-in-the-blank-choice'],
192
+ type: 'drag-in-the-blank-drop-choice',
193
+ accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
167
194
  instanceId: instanceId,
168
- value: value
195
+ value: value,
196
+ id: "drop-".concat(n.key),
197
+ nodeProps: nodeProps,
198
+ n: n,
199
+ opts: opts,
200
+ onDrop: function onDrop(draggedData, dropData) {
201
+ // check if we're dropping into a blank
202
+ var isValidBlank = (dropData === null || dropData === void 0 ? void 0 : dropData.type) === "drag-in-the-blank-drop-choice";
203
+ if (!isValidBlank) return;
204
+
205
+ // if the dragged and dropped data are the same, do nothing
206
+ if (draggedData.value.id === dropData.value.id) return;
207
+ if (draggedData.type === 'drag-in-the-blank-choice') {
208
+ // place into blank
209
+ (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
210
+ if (!opts.options.duplicates && draggedData.fromChoice) {
211
+ (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
212
+ }
213
+ return;
214
+ }
215
+
216
+ // moving placed choice between blanks
217
+ if (draggedData.type === 'drag-in-the-blank-placed-choice') {
218
+ // clear target blank
219
+ (0, _utils.onRemoveResponse)(nodeProps, dropData.value);
220
+
221
+ // set new blank value
222
+ (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
223
+
224
+ // clear original blank - slight delay to ensure state updates correctly
225
+ setTimeout(function () {
226
+ return (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
227
+ }, 10);
228
+ }
229
+ }
169
230
  }
170
231
  }),
171
232
  setDropNodeRef = _useDroppable.setNodeRef,
172
233
  isOver = _useDroppable.isOver,
173
234
  dragItem = _useDroppable.active;
174
-
175
- // Combine refs for both drag and drop
176
235
  var setNodeRef = function setNodeRef(node) {
177
236
  setDragNodeRef(node);
178
237
  setDropNodeRef(node);
179
238
  };
180
- var dragStyle = {
181
- transform: _utilities.CSS.Translate.toString(dragTransform),
182
- opacity: isDragging ? 0.5 : 1
183
- };
184
239
  var dragContent = /*#__PURE__*/_react["default"].createElement(BlankContent, {
185
240
  n: n,
186
241
  isDragging: isDragging,
187
242
  isOver: isOver,
188
243
  dragItem: dragItem === null || dragItem === void 0 || (_dragItem$data = dragItem.data) === null || _dragItem$data === void 0 ? void 0 : _dragItem$data.current,
189
244
  value: value,
190
- disabled: disabled,
191
- style: dragStyle
245
+ disabled: disabled
192
246
  }, children);
193
247
  var dragEl = !value ? /*#__PURE__*/_react["default"].createElement("span", {
194
248
  ref: setDropNodeRef
package/lib/plugins/respArea/drag-in-the-blank/choice.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isUndefined","_core","_utilities","_renderUi","_mathRendering","_styles","_classnames","_icons","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledContent","styled","_ref","theme","border","concat","palette","primary","main","fontSize","minWidth","color","correct","error","primaryDark","BlankContent","_ref2","children","isDragging","isOver","dragItem","value","disabled","externalStyle","style","_useState","useState","_useState2","_slicedToArray2","hoveredElementSize","setHoveredElementSize","elementRef","useRef","handleClick","event","current","className","contains","target","useEffect","document","addEventListener","removeEventListener","renderMath","node","width","offsetWidth","height","offsetHeight","label","finalLabel","hasGrip","isPreview","createElement","ref","display","minHeight","background","defaults","BORDER_LIGHT","WHITE","BORDER_DARK","boxSizing","borderRadius","overflow","position","padding","undefined","key","contentEditable","GripIcon","top","left","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","func","bool","DragDropChoice","_ref3","_dragItem$data","onChange","removeResponse","instanceId","targetId","duplicates","_useDraggable","useDraggable","id","data","fromChoice","dragAttributes","attributes","dragListeners","listeners","setDragNodeRef","setNodeRef","dragTransform","transform","_useDroppable","useDroppable","accepts","setDropNodeRef","active","dragStyle","CSS","Translate","toString","opacity","dragContent","dragEl","_extends2","content","classnames","string","_default","exports"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/choice.jsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport isUndefined from 'lodash/isUndefined';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\nimport classnames from 'classnames';\n\nimport { GripIcon } from '../icons';\n\nconst StyledContent = styled('span')(({ theme }) => ({\n border: `solid 0px ${theme.palette.primary.main}`,\n '& mjx-frac': {\n fontSize: '120% !important',\n },\n '&.chip': {\n minWidth: '90px',\n },\n '&.correct': {\n border: `solid 1px ${color.correct()}`,\n },\n '&.incorrect': {\n border: `solid 1px ${theme.palette.error.main}`,\n },\n '&.selected': {\n border: `2px solid ${color.primaryDark()} !important`,\n },\n}));\n\nexport function BlankContent({ \n n, \n children, \n isDragging, \n isOver, \n dragItem, \n value,\n disabled,\n style: externalStyle\n}) {\n const [hoveredElementSize, setHoveredElementSize] = useState(null);\n const elementRef = useRef(null);\n\n const handleClick = (event) => {\n if (elementRef.current) {\n elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';\n }\n };\n\n useEffect(() => {\n document.addEventListener('click', handleClick);\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, []);\n\n useEffect(() => {\n if (elementRef.current && typeof renderMath === 'function') {\n renderMath(elementRef.current);\n }\n });\n\n useEffect(() => {\n if (isOver && elementRef.current && !hoveredElementSize) {\n const node = elementRef.current;\n setHoveredElementSize({ width: node.offsetWidth, height: node.offsetHeight });\n } else if (!isOver && hoveredElementSize) {\n setHoveredElementSize(null);\n }\n }, [isOver, hoveredElementSize]);\n\n const label = dragItem && isOver ? dragItem.value.value : value.value || '\\u00A0';\n const finalLabel = isDragging ? '\\u00A0' : label;\n const hasGrip = finalLabel !== '\\u00A0';\n const isPreview = dragItem && isOver;\n\n return (\n <div\n ref={elementRef}\n style={{\n display: 'inline-flex',\n minWidth: '178px',\n minHeight: '36px',\n background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,\n border: isPreview ? `1px solid ${color.defaults.BORDER_DARK}` : `1px solid ${color.defaults.BORDER_LIGHT}`,\n boxSizing: 'border-box',\n borderRadius: '3px',\n overflow: 'hidden',\n position: 'relative',\n padding: '8px 8px 8px 35px',\n width: hoveredElementSize ? hoveredElementSize.width : undefined,\n height: hoveredElementSize ? hoveredElementSize.height : undefined,\n ...externalStyle,\n }}\n data-key={n.key}\n contentEditable={false}\n >\n {hasGrip && (\n <GripIcon\n style={{\n position: 'absolute',\n top: '6px',\n left: '15px',\n color: '#9B9B9B',\n }}\n contentEditable={false}\n />\n )}\n <span\n dangerouslySetInnerHTML={{\n __html: finalLabel,\n }}\n />\n {children}\n </div>\n );\n}\n\nBlankContent.propTypes = {\n n: PropTypes.object,\n children: PropTypes.func,\n isDragging: PropTypes.bool,\n isOver: PropTypes.bool,\n dragItem: PropTypes.object,\n value: PropTypes.object,\n disabled: PropTypes.bool,\n style: PropTypes.object,\n};\n\nfunction DragDropChoice({ \n value, \n disabled, \n onChange, \n removeResponse, \n instanceId, \n targetId, \n duplicates,\n n,\n children \n}) {\n // Setup draggable functionality\n const {\n attributes: dragAttributes,\n listeners: dragListeners,\n setNodeRef: setDragNodeRef,\n transform: dragTransform,\n isDragging,\n } = useDraggable({\n id: `drag-${n.key}`,\n disabled: disabled || !value,\n data: {\n id: targetId,\n value: value,\n instanceId: instanceId,\n fromChoice: true,\n },\n });\n\n // Setup droppable functionality\n const {\n setNodeRef: setDropNodeRef,\n isOver,\n active: dragItem,\n } = useDroppable({\n id: `drop-${n.key}`,\n data: {\n accepts: ['drag-in-the-blank-choice'],\n instanceId: instanceId,\n value: value,\n },\n });\n\n // Combine refs for both drag and drop\n const setNodeRef = (node) => {\n setDragNodeRef(node);\n setDropNodeRef(node);\n };\n\n const dragStyle = {\n transform: CSS.Translate.toString(dragTransform),\n opacity: isDragging ? 0.5 : 1,\n };\n\n const dragContent = (\n <BlankContent\n n={n}\n isDragging={isDragging}\n isOver={isOver}\n dragItem={dragItem?.data?.current}\n value={value}\n disabled={disabled}\n style={dragStyle}\n >\n {children}\n </BlankContent>\n );\n\n const dragEl = !value ? (\n <span ref={setDropNodeRef}>{dragContent}</span>\n ) : (\n <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>\n {dragContent}\n </span>\n );\n\n const content = (\n <StyledContent className={classnames(isOver && 'over')}>\n {dragEl}\n </StyledContent>\n );\n\n return content;\n}\n\nDragDropChoice.propTypes = {\n value: PropTypes.object,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n removeResponse: PropTypes.func,\n instanceId: PropTypes.string,\n targetId: PropTypes.string,\n duplicates: PropTypes.bool,\n n: PropTypes.object,\n children: PropTypes.node,\n};\n\nexport default DragDropChoice;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_core","_renderUi","_mathRendering","_styles","_icons","_utils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledContent","styled","_ref","theme","border","concat","palette","primary","main","fontSize","minWidth","color","correct","error","primaryDark","BlankContent","_ref2","_dragItem$value2","_dragItem$value3","children","isDragging","isOver","dragItem","value","externalStyle","style","_useState","useState","_useState2","_slicedToArray2","hoveredElementSize","setHoveredElementSize","elementRef","useRef","handleClick","event","current","contains","target","classList","add","remove","useEffect","document","addEventListener","removeEventListener","_dragItem$value","currentContent","renderMath","id","node","width","offsetWidth","height","offsetHeight","label","finalLabel","hasGrip","isPreview","hasContent","containsHTML","test","spanProps","key","createElement","ref","display","minHeight","background","defaults","BORDER_LIGHT","WHITE","BORDER_DARK","boxSizing","borderRadius","overflow","position","padding","undefined","contentEditable","GripIcon","top","left","_extends2","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","func","bool","disabled","DragDropChoice","_ref3","_dragItem$data","instanceId","nodeProps","opts","_useDraggable","useDraggable","data","type","fromChoice","onRemove","draggedData","onRemoveResponse","onDrop","dropData","isValidBlank","onValueChange","options","duplicates","dragAttributes","attributes","dragListeners","listeners","setDragNodeRef","setNodeRef","_useDroppable","useDroppable","accepts","setTimeout","setDropNodeRef","active","dragContent","dragEl","content","className","classnames","onChange","removeResponse","string","targetId","_default","exports"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/choice.jsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\n\nimport { GripIcon } from '../icons';\nimport { onValueChange, onRemoveResponse } from './utils';\n\nconst StyledContent = styled('span')(({ theme }) => ({\n border: `solid 0px ${theme.palette.primary.main}`,\n '& mjx-frac': {\n fontSize: '120% !important',\n },\n '&.chip': {\n minWidth: '90px',\n },\n '&.correct': {\n border: `solid 1px ${color.correct()}`,\n },\n '&.incorrect': {\n border: `solid 1px ${theme.palette.error.main}`,\n },\n '&.selected': {\n border: `2px solid ${color.primaryDark()} !important`,\n },\n}));\n\nexport function BlankContent({\n n,\n children,\n isDragging,\n isOver,\n dragItem,\n value,\n style: externalStyle\n}) {\n const [hoveredElementSize, setHoveredElementSize] = useState(null);\n const elementRef = useRef(null);\n\n const handleClick = (event) => {\n if (!elementRef.current) return;\n\n if (elementRef.current.contains(event.target)) {\n elementRef.current.classList.add('selected');\n } else {\n elementRef.current.classList.remove('selected');\n }\n };\n\n useEffect(() => {\n document.addEventListener('click', handleClick);\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, []);\n\n useEffect(() => {\n // Render math for the current value or preview\n const currentContent = (isOver && dragItem?.value?.value) || value?.value;\n\n if (!currentContent) return;\n\n if (elementRef.current && typeof renderMath === 'function') {\n renderMath(elementRef.current);\n }\n }, [value?.id, value?.value, isOver, dragItem?.value?.id, dragItem?.value?.value]);\n\n useEffect(() => {\n if (isOver && elementRef.current && !hoveredElementSize) {\n const node = elementRef.current;\n setHoveredElementSize({ width: node.offsetWidth, height: node.offsetHeight });\n } else if (!isOver && hoveredElementSize) {\n setHoveredElementSize(null);\n }\n }, [isOver, hoveredElementSize]);\n\n const label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || '\\u00A0';\n const finalLabel = isDragging ? '\\u00A0' : label;\n const hasGrip = finalLabel !== '\\u00A0';\n const isPreview = dragItem && isOver;\n const hasContent = finalLabel !== '\\u00A0';\n const containsHTML = hasContent && /<[^>]+>/.test(finalLabel);\n\n const spanProps = {\n key: `${n.key}-${isPreview ? 'preview' : 'value'}`,\n ...(hasContent && { 'data-latex': '', 'data-raw': finalLabel }),\n };\n\n return (\n <div\n ref={elementRef}\n style={{\n display: 'inline-flex',\n minWidth: '178px',\n minHeight: '36px',\n background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,\n border: isPreview ? `1px solid ${color.defaults.BORDER_DARK}` : `1px solid ${color.defaults.BORDER_LIGHT}`,\n boxSizing: 'border-box',\n borderRadius: '3px',\n overflow: 'hidden',\n position: 'relative',\n padding: '8px 8px 8px 35px',\n width: hoveredElementSize ? hoveredElementSize.width : undefined,\n height: hoveredElementSize ? hoveredElementSize.height : undefined,\n ...externalStyle,\n }}\n data-key={n.key}\n contentEditable={false}\n >\n {hasGrip && (\n <GripIcon\n style={{\n position: 'absolute',\n top: '6px',\n left: '15px',\n color: '#9B9B9B',\n }}\n contentEditable={false}\n />\n )}\n {containsHTML ? (\n <span {...spanProps} dangerouslySetInnerHTML={{ __html: finalLabel }} />\n ) : (\n <span {...spanProps}>{finalLabel}</span>\n )}\n {children}\n </div>\n );\n}\n\nBlankContent.propTypes = {\n n: PropTypes.object,\n children: PropTypes.func,\n isDragging: PropTypes.bool,\n isOver: PropTypes.bool,\n dragItem: PropTypes.object,\n value: PropTypes.object,\n disabled: PropTypes.bool,\n style: PropTypes.object,\n};\n\nfunction DragDropChoice({\n value,\n disabled,\n instanceId,\n children,\n n,\n nodeProps,\n opts,\n}) {\n const {\n attributes: dragAttributes,\n listeners: dragListeners,\n setNodeRef: setDragNodeRef,\n isDragging,\n } = useDraggable({\n id: `drag-${n.key}`,\n disabled: disabled || !value?.value,\n data: {\n id: `drag-${n.key}`,\n value,\n instanceId,\n nodeProps,\n n,\n opts,\n type: 'drag-in-the-blank-placed-choice',\n fromChoice: !value,\n onRemove: (draggedData) => onRemoveResponse(nodeProps, draggedData.value),\n onDrop: (draggedData, dropData) => {\n // check if we're dropping into a blank\n const isValidBlank =\n dropData?.type === \"drag-in-the-blank-drop-choice\";\n\n if (!isValidBlank) return;\n\n // place into blank\n onValueChange(nodeProps, n, draggedData.value);\n\n if (!opts.options.duplicates && draggedData.fromChoice) {\n onRemoveResponse(nodeProps, draggedData.value);\n }\n }\n }\n });\n\n const {\n setNodeRef: setDropNodeRef,\n isOver,\n active: dragItem,\n } = useDroppable({\n id: `drop-${n.key}`,\n data: {\n type: 'drag-in-the-blank-drop-choice',\n accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],\n instanceId: instanceId,\n value: value,\n id: `drop-${n.key}`,\n nodeProps,\n n,\n opts,\n onDrop: (draggedData, dropData) => {\n // check if we're dropping into a blank\n const isValidBlank =\n dropData?.type === \"drag-in-the-blank-drop-choice\";\n\n if (!isValidBlank) return;\n\n // if the dragged and dropped data are the same, do nothing\n if (draggedData.value.id === dropData.value.id) return;\n\n if (draggedData.type === 'drag-in-the-blank-choice') {\n // place into blank\n onValueChange(nodeProps, n, draggedData.value);\n\n if (!opts.options.duplicates && draggedData.fromChoice) {\n onRemoveResponse(nodeProps, draggedData.value);\n }\n return;\n }\n\n // moving placed choice between blanks\n if (draggedData.type === 'drag-in-the-blank-placed-choice') {\n // clear target blank\n onRemoveResponse(nodeProps, dropData.value);\n\n // set new blank value\n onValueChange(nodeProps, n, draggedData.value);\n\n // clear original blank - slight delay to ensure state updates correctly\n setTimeout(() => onRemoveResponse(nodeProps, draggedData.value), 10);\n }\n }\n }\n });\n\n const setNodeRef = (node) => {\n setDragNodeRef(node);\n setDropNodeRef(node);\n };\n\n const dragContent = (\n <BlankContent\n n={n}\n isDragging={isDragging}\n isOver={isOver}\n dragItem={dragItem?.data?.current}\n value={value}\n disabled={disabled}\n >\n {children}\n </BlankContent>\n );\n\n const dragEl = !value ? (\n <span ref={setDropNodeRef}>{dragContent}</span>\n ) : (\n <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>\n {dragContent}\n </span>\n );\n\n const content = (\n <StyledContent className={classnames(isOver && 'over')}>\n {dragEl}\n </StyledContent>\n );\n\n return content;\n}\n\nDragDropChoice.propTypes = {\n value: PropTypes.object,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n removeResponse: PropTypes.func,\n instanceId: PropTypes.string,\n targetId: PropTypes.string,\n duplicates: PropTypes.bool,\n n: PropTypes.object,\n children: PropTypes.node,\n};\n\nexport default DragDropChoice;\n"],"mappings":"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","ignoreList":[]}
package/lib/plugins/respArea/drag-in-the-blank/index.js CHANGED
@@ -4,75 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.onValueChange = exports.onRemoveResponse = exports["default"] = void 0;
7
+ exports["default"] = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
9
  var _react = _interopRequireDefault(require("react"));
11
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
- var _drag = require("@pie-lib/drag");
13
11
  var _choice = _interopRequireDefault(require("./choice"));
14
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
15
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
16
- var onValueChange = exports.onValueChange = function onValueChange(nodeProps, n, value) {
17
- var val = nodeProps.editor.value;
18
- var change = val.change();
19
- change.setNodeByKey(n.key, {
20
- data: _objectSpread(_objectSpread({}, value), {}, {
21
- index: n.data.get('index')
22
- })
23
- });
24
- nodeProps.editor.props.onChange(change, function () {
25
- nodeProps.editor.props.onEditingDone();
26
- });
27
- };
28
- var onRemoveResponse = exports.onRemoveResponse = function onRemoveResponse(nodeProps, value) {
29
- var val = nodeProps.editor.value;
30
- var change = val.change();
31
- var dragInTheBlank = val.document.findDescendant(function (n) {
32
- return n.data && n.data.get('index') === value.index;
33
- });
34
- change.setNodeByKey(dragInTheBlank.key, {
35
- data: {
36
- index: dragInTheBlank.data.get('index')
37
- }
38
- });
39
- nodeProps.editor.props.onChange(change, function () {
40
- nodeProps.editor.props.onEditingDone();
41
- });
42
- };
43
- var DragDrop = function DragDrop(props) {
12
+ var _utils = require("./utils");
13
+ var DragDrop = function DragDrop(_ref) {
44
14
  var _nodeProps$editor;
45
- var attributes = props.attributes,
46
- data = props.data,
47
- n = props.n,
48
- nodeProps = props.nodeProps,
49
- opts = props.opts;
15
+ var attributes = _ref.attributes,
16
+ data = _ref.data,
17
+ n = _ref.n,
18
+ nodeProps = _ref.nodeProps,
19
+ opts = _ref.opts;
50
20
  var inTable = data.inTable;
51
- var handleDragEnd = function handleDragEnd(event) {
52
- var active = event.active,
53
- over = event.over;
54
- if (!over || !active) return;
55
- var draggedData = active.data.current;
56
- var dropData = over.data.current;
57
-
58
- // Check if this is a valid drop for drag-in-the-blank
59
- if (draggedData && dropData && dropData.instanceId === draggedData.instanceId && over.id.startsWith('drop-')) {
60
- var _draggedData$value;
61
- // Handle the drop
62
- var shouldDrop = !((_draggedData$value = draggedData.value) !== null && _draggedData$value !== void 0 && _draggedData$value.index) || !data.index || draggedData.value.index !== data.index;
63
- if (shouldDrop) {
64
- onValueChange(nodeProps, n, draggedData.value);
65
- }
66
-
67
- // Remove from source if not duplicates
68
- if (!opts.options.duplicates && draggedData.fromChoice) {
69
- onRemoveResponse(nodeProps, draggedData.value);
70
- }
71
- }
72
- };
73
- return /*#__PURE__*/_react["default"].createElement(_drag.DragProvider, {
74
- onDragEnd: handleDragEnd
75
- }, /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
21
+ return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
76
22
  style: {
77
23
  display: 'inline-flex',
78
24
  minHeight: '50px',
@@ -84,17 +30,19 @@ var DragDrop = function DragDrop(props) {
84
30
  }), /*#__PURE__*/_react["default"].createElement(_choice["default"], {
85
31
  n: n,
86
32
  dragKey: n.key,
87
- targetId: "0",
33
+ targetId: "drop-".concat(n.key),
88
34
  value: data,
89
35
  duplicates: opts.options.duplicates,
90
36
  onChange: function onChange(value) {
91
- return onValueChange(nodeProps, n, value);
37
+ return (0, _utils.onValueChange)(nodeProps, n, value);
92
38
  },
93
39
  removeResponse: function removeResponse(value) {
94
- return onRemoveResponse(nodeProps, value);
40
+ return (0, _utils.onRemoveResponse)(nodeProps, value);
95
41
  },
96
- instanceId: ((_nodeProps$editor = nodeProps.editor) === null || _nodeProps$editor === void 0 || (_nodeProps$editor = _nodeProps$editor.props) === null || _nodeProps$editor === void 0 ? void 0 : _nodeProps$editor.instanceId) || 'default'
97
- }, nodeProps.children)));
42
+ instanceId: ((_nodeProps$editor = nodeProps.editor) === null || _nodeProps$editor === void 0 || (_nodeProps$editor = _nodeProps$editor.props) === null || _nodeProps$editor === void 0 ? void 0 : _nodeProps$editor.instanceId) || 'default',
43
+ nodeProps: nodeProps,
44
+ opts: opts
45
+ }, nodeProps.children));
98
46
  };
99
47
  DragDrop.propTypes = {
100
48
  attributes: _propTypes["default"].object,
package/lib/plugins/respArea/drag-in-the-blank/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_choice","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","onValueChange","exports","nodeProps","n","value","val","editor","change","setNodeByKey","key","data","index","get","props","onChange","onEditingDone","onRemoveResponse","dragInTheBlank","document","findDescendant","DragDrop","_nodeProps$editor","attributes","opts","inTable","handleDragEnd","event","active","over","draggedData","current","dropData","instanceId","id","startsWith","_draggedData$value","shouldDrop","options","duplicates","fromChoice","createElement","DragProvider","onDragEnd","_extends2","style","display","minHeight","minWidth","position","margin","cursor","dragKey","targetId","removeResponse","children","propTypes","PropTypes","object","_default"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragProvider } from '@pie-lib/drag';\nimport DragDropTile from './choice';\n\nexport const onValueChange = (nodeProps, n, value) => {\n const val = nodeProps.editor.value;\n const change = val.change();\n\n change.setNodeByKey(n.key, {\n data: {\n ...value,\n index: n.data.get('index'),\n },\n });\n\n nodeProps.editor.props.onChange(change, () => {\n nodeProps.editor.props.onEditingDone();\n });\n};\n\nexport const onRemoveResponse = (nodeProps, value) => {\n const val = nodeProps.editor.value;\n const change = val.change();\n const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);\n\n change.setNodeByKey(dragInTheBlank.key, {\n data: {\n index: dragInTheBlank.data.get('index'),\n },\n });\n\n nodeProps.editor.props.onChange(change, () => {\n nodeProps.editor.props.onEditingDone();\n });\n};\n\nconst DragDrop = (props) => {\n const { attributes, data, n, nodeProps, opts } = props;\n const { inTable } = data;\n\n const handleDragEnd = (event) => {\n const { active, over } = event;\n \n if (!over || !active) return;\n\n const draggedData = active.data.current;\n const dropData = over.data.current;\n\n // Check if this is a valid drop for drag-in-the-blank\n if (\n draggedData &&\n dropData &&\n dropData.instanceId === draggedData.instanceId &&\n over.id.startsWith('drop-')\n ) {\n // Handle the drop\n const shouldDrop =\n !draggedData.value?.index ||\n !data.index ||\n draggedData.value.index !== data.index;\n\n if (shouldDrop) {\n onValueChange(nodeProps, n, draggedData.value);\n }\n\n // Remove from source if not duplicates\n if (!opts.options.duplicates && draggedData.fromChoice) {\n onRemoveResponse(nodeProps, draggedData.value);\n }\n }\n };\n\n return (\n <DragProvider onDragEnd={handleDragEnd}>\n <span\n {...attributes}\n style={{\n display: 'inline-flex',\n minHeight: '50px',\n minWidth: '178px',\n position: 'relative',\n margin: inTable ? '10px' : '0 10px',\n cursor: 'pointer',\n }}\n >\n <DragDropTile\n n={n}\n dragKey={n.key}\n targetId=\"0\"\n value={data}\n duplicates={opts.options.duplicates}\n onChange={(value) => onValueChange(nodeProps, n, value)}\n removeResponse={(value) => onRemoveResponse(nodeProps, value)}\n instanceId={nodeProps.editor?.props?.instanceId || 'default'}\n >\n {nodeProps.children}\n </DragDropTile>\n </span>\n </DragProvider>\n );\n};\n\nDragDrop.propTypes = {\n attributes: PropTypes.object,\n data: PropTypes.object,\n n: PropTypes.object,\n nodeProps: PropTypes.object,\n opts: PropTypes.object,\n};\n\nexport default DragDrop;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_choice","_utils","DragDrop","_ref","_nodeProps$editor","attributes","data","n","nodeProps","opts","inTable","createElement","_extends2","style","display","minHeight","minWidth","position","margin","cursor","dragKey","key","targetId","concat","value","duplicates","options","onChange","onValueChange","removeResponse","onRemoveResponse","instanceId","editor","props","children","propTypes","PropTypes","object","_default","exports"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport DragDropTile from './choice';\nimport { onValueChange, onRemoveResponse } from './utils';\n\nconst DragDrop = ({ attributes, data, n, nodeProps, opts }) => {\n const { inTable } = data;\n\n return (\n <span\n {...attributes}\n style={{\n display: 'inline-flex',\n minHeight: '50px',\n minWidth: '178px',\n position: 'relative',\n margin: inTable ? '10px' : '0 10px',\n cursor: 'pointer',\n }}\n >\n <DragDropTile\n n={n}\n dragKey={n.key}\n targetId={`drop-${n.key}`}\n value={data}\n duplicates={opts.options.duplicates}\n onChange={(value) => onValueChange(nodeProps, n, value)}\n removeResponse={(value) => onRemoveResponse(nodeProps, value)}\n instanceId={nodeProps.editor?.props?.instanceId || 'default'}\n nodeProps={nodeProps}\n opts={opts}\n >\n {nodeProps.children}\n </DragDropTile>\n </span>\n );\n};\n\nDragDrop.propTypes = {\n attributes: PropTypes.object,\n data: PropTypes.object,\n n: PropTypes.object,\n nodeProps: PropTypes.object,\n opts: PropTypes.object,\n};\n\nexport default DragDrop;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAMI,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAiD;EAAA,IAAAC,iBAAA;EAAA,IAA3CC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,CAAC,GAAAJ,IAAA,CAADI,CAAC;IAAEC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,IAAI,GAAAN,IAAA,CAAJM,IAAI;EACtD,IAAQC,OAAO,GAAKJ,IAAI,CAAhBI,OAAO;EAEf,oBACId,MAAA,YAAAe,aAAA,aAAAC,SAAA,iBACMP,UAAU;IACdQ,KAAK,EAAE;MACLC,OAAO,EAAE,aAAa;MACtBC,SAAS,EAAE,MAAM;MACjBC,QAAQ,EAAE,OAAO;MACjBC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAER,OAAO,GAAG,MAAM,GAAG,QAAQ;MACnCS,MAAM,EAAE;IACV;EAAE,iBAEFvB,MAAA,YAAAe,aAAA,CAACX,OAAA,WAAY;IACXO,CAAC,EAAEA,CAAE;IACLa,OAAO,EAAEb,CAAC,CAACc,GAAI;IACfC,QAAQ,UAAAC,MAAA,CAAUhB,CAAC,CAACc,GAAG,CAAG;IAC1BG,KAAK,EAAElB,IAAK;IACZmB,UAAU,EAAEhB,IAAI,CAACiB,OAAO,CAACD,UAAW;IACpCE,QAAQ,EAAE,SAAVA,QAAQA,CAAGH,KAAK;MAAA,OAAK,IAAAI,oBAAa,EAACpB,SAAS,EAAED,CAAC,EAAEiB,KAAK,CAAC;IAAA,CAAC;IACxDK,cAAc,EAAE,SAAhBA,cAAcA,CAAGL,KAAK;MAAA,OAAK,IAAAM,uBAAgB,EAACtB,SAAS,EAAEgB,KAAK,CAAC;IAAA,CAAC;IAC9DO,UAAU,EAAE,EAAA3B,iBAAA,GAAAI,SAAS,CAACwB,MAAM,cAAA5B,iBAAA,gBAAAA,iBAAA,GAAhBA,iBAAA,CAAkB6B,KAAK,cAAA7B,iBAAA,uBAAvBA,iBAAA,CAAyB2B,UAAU,KAAI,SAAU;IAC7DvB,SAAS,EAAEA,SAAU;IACrBC,IAAI,EAAEA;EAAK,GAEVD,SAAS,CAAC0B,QACC,CACV,CAAC;AAEb,CAAC;AAEDhC,QAAQ,CAACiC,SAAS,GAAG;EACnB9B,UAAU,EAAE+B,qBAAS,CAACC,MAAM;EAC5B/B,IAAI,EAAE8B,qBAAS,CAACC,MAAM;EACtB9B,CAAC,EAAE6B,qBAAS,CAACC,MAAM;EACnB7B,SAAS,EAAE4B,qBAAS,CAACC,MAAM;EAC3B5B,IAAI,EAAE2B,qBAAS,CAACC;AAClB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEarC,QAAQ","ignoreList":[]}
package/lib/plugins/respArea/drag-in-the-blank/utils.js ADDED
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.onValueChange = exports.onRemoveResponse = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
10
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
11
+ var onRemoveResponse = exports.onRemoveResponse = function onRemoveResponse(nodeProps, value) {
12
+ var val = nodeProps.editor.value;
13
+ var change = val.change();
14
+ var dragInTheBlank = val.document.findDescendant(function (n) {
15
+ return n.data && n.data.get('index') === value.index;
16
+ });
17
+ change.setNodeByKey(dragInTheBlank.key, {
18
+ data: {
19
+ index: dragInTheBlank.data.get('index')
20
+ }
21
+ });
22
+ nodeProps.editor.props.onChange(change, function () {
23
+ nodeProps.editor.props.onEditingDone();
24
+ });
25
+ };
26
+ var onValueChange = exports.onValueChange = function onValueChange(nodeProps, n, value) {
27
+ var val = nodeProps.editor.value;
28
+ var change = val.change();
29
+ change.setNodeByKey(n.key, {
30
+ data: _objectSpread(_objectSpread({}, value), {}, {
31
+ index: n.data.get('index')
32
+ })
33
+ });
34
+ nodeProps.editor.props.onChange(change, function () {
35
+ nodeProps.editor.props.onEditingDone();
36
+ });
37
+ };
38
+ //# sourceMappingURL=utils.js.map
package/lib/plugins/respArea/drag-in-the-blank/utils.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","names":["onRemoveResponse","exports","nodeProps","value","val","editor","change","dragInTheBlank","document","findDescendant","n","data","get","index","setNodeByKey","key","props","onChange","onEditingDone","onValueChange","_objectSpread"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/utils.js"],"sourcesContent":["export const onRemoveResponse = (nodeProps, value) => {\n const val = nodeProps.editor.value;\n const change = val.change();\n const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);\n change.setNodeByKey(dragInTheBlank.key, { data: { index: dragInTheBlank.data.get('index'), }, });\n nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });\n};\n\nexport const onValueChange = (nodeProps, n, value) => {\n const val = nodeProps.editor.value;\n const change = val.change();\n change.setNodeByKey(n.key, { data: { ...value, index: n.data.get('index'), }, });\n nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });\n};"],"mappings":";;;;;;;;;;AAAO,IAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAIE,SAAS,EAAEC,KAAK,EAAK;EAClD,IAAMC,GAAG,GAAGF,SAAS,CAACG,MAAM,CAACF,KAAK;EAClC,IAAMG,MAAM,GAAGF,GAAG,CAACE,MAAM,CAAC,CAAC;EAC3B,IAAMC,cAAc,GAAGH,GAAG,CAACI,QAAQ,CAACC,cAAc,CAAC,UAACC,CAAC;IAAA,OAAKA,CAAC,CAACC,IAAI,IAAID,CAAC,CAACC,IAAI,CAACC,GAAG,CAAC,OAAO,CAAC,KAAKT,KAAK,CAACU,KAAK;EAAA,EAAC;EACxGP,MAAM,CAACQ,YAAY,CAACP,cAAc,CAACQ,GAAG,EAAE;IAAEJ,IAAI,EAAE;MAAEE,KAAK,EAAEN,cAAc,CAACI,IAAI,CAACC,GAAG,CAAC,OAAO;IAAG;EAAG,CAAC,CAAC;EAChGV,SAAS,CAACG,MAAM,CAACW,KAAK,CAACC,QAAQ,CAACX,MAAM,EAAE,YAAM;IAAEJ,SAAS,CAACG,MAAM,CAACW,KAAK,CAACE,aAAa,CAAC,CAAC;EAAE,CAAC,CAAC;AAC9F,CAAC;AAEM,IAAMC,aAAa,GAAAlB,OAAA,CAAAkB,aAAA,GAAG,SAAhBA,aAAaA,CAAIjB,SAAS,EAAEQ,CAAC,EAAEP,KAAK,EAAK;EAClD,IAAMC,GAAG,GAAGF,SAAS,CAACG,MAAM,CAACF,KAAK;EAClC,IAAMG,MAAM,GAAGF,GAAG,CAACE,MAAM,CAAC,CAAC;EAC3BA,MAAM,CAACQ,YAAY,CAACJ,CAAC,CAACK,GAAG,EAAE;IAAEJ,IAAI,EAAAS,aAAA,CAAAA,aAAA,KAAOjB,KAAK;MAAEU,KAAK,EAAEH,CAAC,CAACC,IAAI,CAACC,GAAG,CAAC,OAAO;IAAC;EAAK,CAAC,CAAC;EAChFV,SAAS,CAACG,MAAM,CAACW,KAAK,CAACC,QAAQ,CAACX,MAAM,EAAE,YAAM;IAAEJ,SAAS,CAACG,MAAM,CAACW,KAAK,CAACE,aAAa,CAAC,CAAC;EAAE,CAAC,CAAC;AAC9F,CAAC","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/editable-html",
3
- "version": "11.30.0-mui-update.0",
3
+ "version": "11.33.0-mui-update.0",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "main": "lib/index.js",
@@ -8,16 +8,17 @@
8
8
  "author": "pie-framework developers",
9
9
  "dependencies": {
10
10
  "@dnd-kit/core": "6.1.0",
11
+ "@dnd-kit/modifiers": "9.0.0",
11
12
  "@dnd-kit/utilities": "3.2.2",
12
13
  "@emotion/react": "^11.14.0",
13
14
  "@emotion/style": "^0.8.0",
14
15
  "@mui/icons-material": "^7.3.4",
15
16
  "@mui/material": "^7.3.4",
16
- "@pie-lib/drag": "2.31.0-mui-update.0",
17
- "@pie-lib/math-input": "6.40.0-mui-update.0",
18
- "@pie-lib/math-rendering": "3.35.0-mui-update.0",
19
- "@pie-lib/math-toolbar": "1.40.0-mui-update.0",
20
- "@pie-lib/render-ui": "4.44.0-mui-update.0",
17
+ "@pie-lib/drag": "2.34.0-mui-update.0",
18
+ "@pie-lib/math-input": "6.43.0-mui-update.0",
19
+ "@pie-lib/math-rendering": "3.38.0-mui-update.0",
20
+ "@pie-lib/math-toolbar": "1.43.0-mui-update.0",
21
+ "@pie-lib/render-ui": "4.47.0-mui-update.0",
21
22
  "change-case": "^3.0.2",
22
23
  "classnames": "^2.2.6",
23
24
  "debug": "^4.1.1",
@@ -51,6 +52,6 @@
51
52
  "publishConfig": {
52
53
  "access": "public"
53
54
  },
54
- "gitHead": "23a7cb8864b947778ac7e6dffdc6fa4a74af5927",
55
+ "gitHead": "ba9b27bd2b3ece25d9f66f5ce4a51e4a280f930b",
55
56
  "scripts": {}
56
57
  }
package/src/plugins/respArea/drag-in-the-blank/choice.jsx CHANGED
@@ -1,14 +1,13 @@
1
1
  import React, { useRef, useEffect, useState } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import isUndefined from 'lodash/isUndefined';
3
+ import classnames from 'classnames';
4
4
  import { useDraggable, useDroppable } from '@dnd-kit/core';
5
- import { CSS } from '@dnd-kit/utilities';
6
5
  import { color } from '@pie-lib/render-ui';
7
6
  import { renderMath } from '@pie-lib/math-rendering';
8
7
  import { styled } from '@mui/material/styles';
9
- import classnames from 'classnames';
10
8
 
11
9
  import { GripIcon } from '../icons';
10
+ import { onValueChange, onRemoveResponse } from './utils';
12
11
 
13
12
  const StyledContent = styled('span')(({ theme }) => ({
14
13
  border: `solid 0px ${theme.palette.primary.main}`,
@@ -29,22 +28,25 @@ const StyledContent = styled('span')(({ theme }) => ({
29
28
  },
30
29
  }));
31
30
 
32
- export function BlankContent({
33
- n,
34
- children,
35
- isDragging,
36
- isOver,
37
- dragItem,
31
+ export function BlankContent({
32
+ n,
33
+ children,
34
+ isDragging,
35
+ isOver,
36
+ dragItem,
38
37
  value,
39
- disabled,
40
38
  style: externalStyle
41
39
  }) {
42
40
  const [hoveredElementSize, setHoveredElementSize] = useState(null);
43
41
  const elementRef = useRef(null);
44
42
 
45
43
  const handleClick = (event) => {
46
- if (elementRef.current) {
47
- elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';
44
+ if (!elementRef.current) return;
45
+
46
+ if (elementRef.current.contains(event.target)) {
47
+ elementRef.current.classList.add('selected');
48
+ } else {
49
+ elementRef.current.classList.remove('selected');
48
50
  }
49
51
  };
50
52
 
@@ -56,10 +58,15 @@ export function BlankContent({
56
58
  }, []);
57
59
 
58
60
  useEffect(() => {
61
+ // Render math for the current value or preview
62
+ const currentContent = (isOver && dragItem?.value?.value) || value?.value;
63
+
64
+ if (!currentContent) return;
65
+
59
66
  if (elementRef.current && typeof renderMath === 'function') {
60
67
  renderMath(elementRef.current);
61
68
  }
62
- });
69
+ }, [value?.id, value?.value, isOver, dragItem?.value?.id, dragItem?.value?.value]);
63
70
 
64
71
  useEffect(() => {
65
72
  if (isOver && elementRef.current && !hoveredElementSize) {
@@ -70,10 +77,17 @@ export function BlankContent({
70
77
  }
71
78
  }, [isOver, hoveredElementSize]);
72
79
 
73
- const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
80
+ const label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || '\u00A0';
74
81
  const finalLabel = isDragging ? '\u00A0' : label;
75
82
  const hasGrip = finalLabel !== '\u00A0';
76
83
  const isPreview = dragItem && isOver;
84
+ const hasContent = finalLabel !== '\u00A0';
85
+ const containsHTML = hasContent && /<[^>]+>/.test(finalLabel);
86
+
87
+ const spanProps = {
88
+ key: `${n.key}-${isPreview ? 'preview' : 'value'}`,
89
+ ...(hasContent && { 'data-latex': '', 'data-raw': finalLabel }),
90
+ };
77
91
 
78
92
  return (
79
93
  <div
@@ -107,11 +121,11 @@ export function BlankContent({
107
121
  contentEditable={false}
108
122
  />
109
123
  )}
110
- <span
111
- dangerouslySetInnerHTML={{
112
- __html: finalLabel,
113
- }}
114
- />
124
+ {containsHTML ? (
125
+ <span {...spanProps} dangerouslySetInnerHTML={{ __html: finalLabel }} />
126
+ ) : (
127
+ <span {...spanProps}>{finalLabel}</span>
128
+ )}
115
129
  {children}
116
130
  </div>
117
131
  );
@@ -128,36 +142,50 @@ BlankContent.propTypes = {
128
142
  style: PropTypes.object,
129
143
  };
130
144
 
131
- function DragDropChoice({
132
- value,
133
- disabled,
134
- onChange,
135
- removeResponse,
136
- instanceId,
137
- targetId,
138
- duplicates,
145
+ function DragDropChoice({
146
+ value,
147
+ disabled,
148
+ instanceId,
149
+ children,
139
150
  n,
140
- children
151
+ nodeProps,
152
+ opts,
141
153
  }) {
142
- // Setup draggable functionality
143
154
  const {
144
155
  attributes: dragAttributes,
145
156
  listeners: dragListeners,
146
157
  setNodeRef: setDragNodeRef,
147
- transform: dragTransform,
148
158
  isDragging,
149
159
  } = useDraggable({
150
160
  id: `drag-${n.key}`,
151
- disabled: disabled || !value,
161
+ disabled: disabled || !value?.value,
152
162
  data: {
153
- id: targetId,
154
- value: value,
155
- instanceId: instanceId,
156
- fromChoice: true,
157
- },
163
+ id: `drag-${n.key}`,
164
+ value,
165
+ instanceId,
166
+ nodeProps,
167
+ n,
168
+ opts,
169
+ type: 'drag-in-the-blank-placed-choice',
170
+ fromChoice: !value,
171
+ onRemove: (draggedData) => onRemoveResponse(nodeProps, draggedData.value),
172
+ onDrop: (draggedData, dropData) => {
173
+ // check if we're dropping into a blank
174
+ const isValidBlank =
175
+ dropData?.type === "drag-in-the-blank-drop-choice";
176
+
177
+ if (!isValidBlank) return;
178
+
179
+ // place into blank
180
+ onValueChange(nodeProps, n, draggedData.value);
181
+
182
+ if (!opts.options.duplicates && draggedData.fromChoice) {
183
+ onRemoveResponse(nodeProps, draggedData.value);
184
+ }
185
+ }
186
+ }
158
187
  });
159
188
 
160
- // Setup droppable functionality
161
189
  const {
162
190
  setNodeRef: setDropNodeRef,
163
191
  isOver,
@@ -165,23 +193,54 @@ function DragDropChoice({
165
193
  } = useDroppable({
166
194
  id: `drop-${n.key}`,
167
195
  data: {
168
- accepts: ['drag-in-the-blank-choice'],
196
+ type: 'drag-in-the-blank-drop-choice',
197
+ accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
169
198
  instanceId: instanceId,
170
199
  value: value,
171
- },
200
+ id: `drop-${n.key}`,
201
+ nodeProps,
202
+ n,
203
+ opts,
204
+ onDrop: (draggedData, dropData) => {
205
+ // check if we're dropping into a blank
206
+ const isValidBlank =
207
+ dropData?.type === "drag-in-the-blank-drop-choice";
208
+
209
+ if (!isValidBlank) return;
210
+
211
+ // if the dragged and dropped data are the same, do nothing
212
+ if (draggedData.value.id === dropData.value.id) return;
213
+
214
+ if (draggedData.type === 'drag-in-the-blank-choice') {
215
+ // place into blank
216
+ onValueChange(nodeProps, n, draggedData.value);
217
+
218
+ if (!opts.options.duplicates && draggedData.fromChoice) {
219
+ onRemoveResponse(nodeProps, draggedData.value);
220
+ }
221
+ return;
222
+ }
223
+
224
+ // moving placed choice between blanks
225
+ if (draggedData.type === 'drag-in-the-blank-placed-choice') {
226
+ // clear target blank
227
+ onRemoveResponse(nodeProps, dropData.value);
228
+
229
+ // set new blank value
230
+ onValueChange(nodeProps, n, draggedData.value);
231
+
232
+ // clear original blank - slight delay to ensure state updates correctly
233
+ setTimeout(() => onRemoveResponse(nodeProps, draggedData.value), 10);
234
+ }
235
+ }
236
+ }
172
237
  });
173
238
 
174
- // Combine refs for both drag and drop
175
239
  const setNodeRef = (node) => {
176
240
  setDragNodeRef(node);
177
241
  setDropNodeRef(node);
178
242
  };
179
243
 
180
- const dragStyle = {
181
- transform: CSS.Translate.toString(dragTransform),
182
- opacity: isDragging ? 0.5 : 1,
183
- };
184
-
185
244
  const dragContent = (
186
245
  <BlankContent
187
246
  n={n}
@@ -190,7 +249,6 @@ function DragDropChoice({
190
249
  dragItem={dragItem?.data?.current}
191
250
  value={value}
192
251
  disabled={disabled}
193
- style={dragStyle}
194
252
  >
195
253
  {children}
196
254
  </BlankContent>
package/src/plugins/respArea/drag-in-the-blank/index.jsx CHANGED
@@ -1,78 +1,12 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { DragProvider } from '@pie-lib/drag';
4
3
  import DragDropTile from './choice';
4
+ import { onValueChange, onRemoveResponse } from './utils';
5
5
 
6
- export const onValueChange = (nodeProps, n, value) => {
7
- const val = nodeProps.editor.value;
8
- const change = val.change();
9
-
10
- change.setNodeByKey(n.key, {
11
- data: {
12
- ...value,
13
- index: n.data.get('index'),
14
- },
15
- });
16
-
17
- nodeProps.editor.props.onChange(change, () => {
18
- nodeProps.editor.props.onEditingDone();
19
- });
20
- };
21
-
22
- export const onRemoveResponse = (nodeProps, value) => {
23
- const val = nodeProps.editor.value;
24
- const change = val.change();
25
- const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
26
-
27
- change.setNodeByKey(dragInTheBlank.key, {
28
- data: {
29
- index: dragInTheBlank.data.get('index'),
30
- },
31
- });
32
-
33
- nodeProps.editor.props.onChange(change, () => {
34
- nodeProps.editor.props.onEditingDone();
35
- });
36
- };
37
-
38
- const DragDrop = (props) => {
39
- const { attributes, data, n, nodeProps, opts } = props;
6
+ const DragDrop = ({ attributes, data, n, nodeProps, opts }) => {
40
7
  const { inTable } = data;
41
8
 
42
- const handleDragEnd = (event) => {
43
- const { active, over } = event;
44
-
45
- if (!over || !active) return;
46
-
47
- const draggedData = active.data.current;
48
- const dropData = over.data.current;
49
-
50
- // Check if this is a valid drop for drag-in-the-blank
51
- if (
52
- draggedData &&
53
- dropData &&
54
- dropData.instanceId === draggedData.instanceId &&
55
- over.id.startsWith('drop-')
56
- ) {
57
- // Handle the drop
58
- const shouldDrop =
59
- !draggedData.value?.index ||
60
- !data.index ||
61
- draggedData.value.index !== data.index;
62
-
63
- if (shouldDrop) {
64
- onValueChange(nodeProps, n, draggedData.value);
65
- }
66
-
67
- // Remove from source if not duplicates
68
- if (!opts.options.duplicates && draggedData.fromChoice) {
69
- onRemoveResponse(nodeProps, draggedData.value);
70
- }
71
- }
72
- };
73
-
74
9
  return (
75
- <DragProvider onDragEnd={handleDragEnd}>
76
10
  <span
77
11
  {...attributes}
78
12
  style={{
@@ -87,17 +21,18 @@ const DragDrop = (props) => {
87
21
  <DragDropTile
88
22
  n={n}
89
23
  dragKey={n.key}
90
- targetId="0"
24
+ targetId={`drop-${n.key}`}
91
25
  value={data}
92
26
  duplicates={opts.options.duplicates}
93
27
  onChange={(value) => onValueChange(nodeProps, n, value)}
94
28
  removeResponse={(value) => onRemoveResponse(nodeProps, value)}
95
29
  instanceId={nodeProps.editor?.props?.instanceId || 'default'}
30
+ nodeProps={nodeProps}
31
+ opts={opts}
96
32
  >
97
33
  {nodeProps.children}
98
34
  </DragDropTile>
99
35
  </span>
100
- </DragProvider>
101
36
  );
102
37
  };
103
38
 
package/src/plugins/respArea/drag-in-the-blank/utils.js ADDED
@@ -0,0 +1,14 @@
1
+ export const onRemoveResponse = (nodeProps, value) => {
2
+ const val = nodeProps.editor.value;
3
+ const change = val.change();
4
+ const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
5
+ change.setNodeByKey(dragInTheBlank.key, { data: { index: dragInTheBlank.data.get('index'), }, });
6
+ nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });
7
+ };
8
+
9
+ export const onValueChange = (nodeProps, n, value) => {
10
+ const val = nodeProps.editor.value;
11
+ const change = val.change();
12
+ change.setNodeByKey(n.key, { data: { ...value, index: n.data.get('index'), }, });
13
+ nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });
14
+ };