@pie-lib/editable-html 11.29.0-mui-update.0 → 11.31.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 +13 -60
  2. package/lib/plugins/respArea/drag-in-the-blank/choice.js +70 -29
  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 +86 -40
  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,37 +3,29 @@
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.29.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.28.1-mui-update.0...@pie-lib/editable-html@11.29.0-mui-update.0) (2025-11-26)
6
+ # [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)
7
7
 
8
- **Note:** Version bump only for package @pie-lib/editable-html
9
-
10
-
11
-
12
-
13
-
14
- ## [11.28.1-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.28.0-mui-update.0...@pie-lib/editable-html@11.28.1-mui-update.0) (2025-11-20)
15
8
 
9
+ ### Features
16
10
 
17
- ### Bug Fixes
18
-
19
- * remove carets from [@pie-lib](https://github.com/pie-lib) dependencies and configure lerna to use exact versions ([c9cd800](https://github.com/pie-framework/pie-lib/commit/c9cd800844abca09e7acf1fd35b2ddf51a6d86df))
11
+ * updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
20
12
 
21
13
 
22
14
 
23
15
 
24
16
 
25
- # [11.28.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.27.0-mui-update.0...@pie-lib/editable-html@11.28.0-mui-update.0) (2025-11-20)
17
+ # [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)
26
18
 
27
19
 
28
- ### Bug Fixes
20
+ ### Features
29
21
 
30
- * remove carret, point to specific libs version ([09939a5](https://github.com/pie-framework/pie-lib/commit/09939a5aca19d7dda03d62c93d4d524f98dd69da))
22
+ * sync latest changes from dev ([c936e9c](https://github.com/pie-framework/pie-lib/commit/c936e9c7f9e095e7d9b9805ac2bf72bd271e05f1))
31
23
 
32
24
 
33
25
 
34
26
 
35
27
 
36
- # [11.27.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.26.0-mui-update.0...@pie-lib/editable-html@11.27.0-mui-update.0) (2025-11-20)
28
+ ## [11.21.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.21.1...@pie-lib/editable-html@11.21.2) (2025-11-27)
37
29
 
38
30
  **Note:** Version bump only for package @pie-lib/editable-html
39
31
 
@@ -41,30 +33,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
41
33
 
42
34
 
43
35
 
44
- # [11.26.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.25.0-mui-update.0...@pie-lib/editable-html@11.26.0-mui-update.0) (2025-11-19)
45
-
46
-
47
- ### Bug Fixes
48
-
49
- * use fixed lib deps ([de7c64d](https://github.com/pie-framework/pie-lib/commit/de7c64d14f13259fe44d47405e4421baef21e24e))
50
- * **editable-html:** add slateEditorExtraStyles prop ([0b71f34](https://github.com/pie-framework/pie-lib/commit/0b71f3412aeb90d613d41a9afe93b9ccd13f09c4))
51
-
52
-
53
-
54
-
55
-
56
- # [11.25.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.24.0-mui-update.0...@pie-lib/editable-html@11.25.0-mui-update.0) (2025-11-18)
57
-
58
-
59
- ### Bug Fixes
60
-
61
- * **editable-html:** replace ReactDOM.render() with createRoot() for React 18 compatibility ([e9618b5](https://github.com/pie-framework/pie-lib/commit/e9618b5d892ee98d08f4440934eec9be58ee170a))
62
-
63
-
64
-
65
-
66
-
67
- # [11.24.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.23.0-mui-update.0...@pie-lib/editable-html@11.24.0-mui-update.0) (2025-11-18)
36
+ ## [11.21.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.17.2...@pie-lib/editable-html@11.21.1) (2025-10-22)
68
37
 
69
38
  **Note:** Version bump only for package @pie-lib/editable-html
70
39
 
@@ -72,7 +41,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
72
41
 
73
42
 
74
43
 
75
- # [11.23.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.22.0-mui-update.0...@pie-lib/editable-html@11.23.0-mui-update.0) (2025-11-17)
44
+ # [11.21.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.20.0...@pie-lib/editable-html@11.21.0) (2025-10-16)
76
45
 
77
46
  **Note:** Version bump only for package @pie-lib/editable-html
78
47
 
@@ -80,18 +49,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
80
49
 
81
50
 
82
51
 
83
- # [11.22.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.21.0-mui-update.0...@pie-lib/editable-html@11.22.0-mui-update.0) (2025-11-05)
84
-
85
-
86
- ### Bug Fixes
87
-
88
- * add missing dependencies for dnd-kit ([c50ec8e](https://github.com/pie-framework/pie-lib/commit/c50ec8e0a839e574aa61db78ecd121c6fdbc70c9))
89
-
90
-
91
-
92
-
93
-
94
- # [11.21.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.20.0-mui-update.0...@pie-lib/editable-html@11.21.0-mui-update.0) (2025-11-03)
52
+ # [11.20.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.17.0...@pie-lib/editable-html@11.20.0) (2025-10-16)
95
53
 
96
54
  **Note:** Version bump only for package @pie-lib/editable-html
97
55
 
@@ -99,7 +57,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
99
57
 
100
58
 
101
59
 
102
- # [11.20.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.18.0-mui-update.0...@pie-lib/editable-html@11.20.0-mui-update.0) (2025-11-03)
60
+ # [11.19.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.17.0...@pie-lib/editable-html@11.19.0) (2025-10-16)
103
61
 
104
62
  **Note:** Version bump only for package @pie-lib/editable-html
105
63
 
@@ -107,14 +65,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
107
65
 
108
66
 
109
67
 
110
- # [11.18.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.17.2...@pie-lib/editable-html@11.18.0-mui-update.0) (2025-10-31)
111
-
68
+ # [11.18.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.17.0...@pie-lib/editable-html@11.18.0) (2025-10-16)
112
69
 
113
- ### Features
114
-
115
- * bump react and react-dom ([01dc19e](https://github.com/pie-framework/pie-lib/commit/01dc19e88bbc8d372c561d1511df1a82937d45af))
116
- * drag library update ([fb7a4d0](https://github.com/pie-framework/pie-lib/commit/fb7a4d0ce761f2f4c1a122854cfa306abb8ea7c8))
117
- * packages/editable-html mui update PD-5268 ([6b8d201](https://github.com/pie-framework/pie-lib/commit/6b8d201cfc0bf7e26eea58e296109c463544075f))
70
+ **Note:** Version bump only for package @pie-lib/editable-html
118
71
 
119
72
 
120
73
 
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; }
@@ -51,7 +50,6 @@ function BlankContent(_ref2) {
51
50
  isOver = _ref2.isOver,
52
51
  dragItem = _ref2.dragItem,
53
52
  value = _ref2.value,
54
- disabled = _ref2.disabled,
55
53
  externalStyle = _ref2.style;
56
54
  var _useState = (0, _react.useState)(null),
57
55
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -59,8 +57,11 @@ function BlankContent(_ref2) {
59
57
  setHoveredElementSize = _useState2[1];
60
58
  var elementRef = (0, _react.useRef)(null);
61
59
  var handleClick = function handleClick(event) {
62
- if (elementRef.current) {
63
- elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';
60
+ if (!elementRef.current) return;
61
+ if (elementRef.current.contains(event.target)) {
62
+ elementRef.current.classList.add('selected');
63
+ } else {
64
+ elementRef.current.classList.remove('selected');
64
65
  }
65
66
  };
66
67
  (0, _react.useEffect)(function () {
@@ -85,7 +86,7 @@ function BlankContent(_ref2) {
85
86
  setHoveredElementSize(null);
86
87
  }
87
88
  }, [isOver, hoveredElementSize]);
88
- var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
89
+ var label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || "\xA0";
89
90
  var finalLabel = isDragging ? "\xA0" : label;
90
91
  var hasGrip = finalLabel !== "\xA0";
91
92
  var isPreview = dragItem && isOver;
@@ -135,60 +136,100 @@ function DragDropChoice(_ref3) {
135
136
  var _dragItem$data;
136
137
  var value = _ref3.value,
137
138
  disabled = _ref3.disabled,
138
- onChange = _ref3.onChange,
139
- removeResponse = _ref3.removeResponse,
140
139
  instanceId = _ref3.instanceId,
141
- targetId = _ref3.targetId,
142
- duplicates = _ref3.duplicates,
140
+ children = _ref3.children,
143
141
  n = _ref3.n,
144
- children = _ref3.children;
145
- // Setup draggable functionality
142
+ nodeProps = _ref3.nodeProps,
143
+ opts = _ref3.opts;
146
144
  var _useDraggable = (0, _core.useDraggable)({
147
145
  id: "drag-".concat(n.key),
148
- disabled: disabled || !value,
146
+ disabled: disabled || !(value !== null && value !== void 0 && value.value),
149
147
  data: {
150
- id: targetId,
148
+ id: "drag-".concat(n.key),
151
149
  value: value,
152
150
  instanceId: instanceId,
153
- fromChoice: true
151
+ nodeProps: nodeProps,
152
+ n: n,
153
+ opts: opts,
154
+ type: 'drag-in-the-blank-placed-choice',
155
+ fromChoice: !value,
156
+ onRemove: function onRemove(draggedData) {
157
+ return (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
158
+ },
159
+ onDrop: function onDrop(draggedData, dropData) {
160
+ // check if we're dropping into a blank
161
+ var isValidBlank = (dropData === null || dropData === void 0 ? void 0 : dropData.type) === "drag-in-the-blank-drop-choice";
162
+ if (!isValidBlank) return;
163
+
164
+ // place into blank
165
+ (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
166
+ if (!opts.options.duplicates && draggedData.fromChoice) {
167
+ (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
168
+ }
169
+ }
154
170
  }
155
171
  }),
156
172
  dragAttributes = _useDraggable.attributes,
157
173
  dragListeners = _useDraggable.listeners,
158
174
  setDragNodeRef = _useDraggable.setNodeRef,
159
- dragTransform = _useDraggable.transform,
160
175
  isDragging = _useDraggable.isDragging;
161
-
162
- // Setup droppable functionality
163
176
  var _useDroppable = (0, _core.useDroppable)({
164
177
  id: "drop-".concat(n.key),
165
178
  data: {
166
- accepts: ['drag-in-the-blank-choice'],
179
+ type: 'drag-in-the-blank-drop-choice',
180
+ accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
167
181
  instanceId: instanceId,
168
- value: value
182
+ value: value,
183
+ id: "drop-".concat(n.key),
184
+ nodeProps: nodeProps,
185
+ n: n,
186
+ opts: opts,
187
+ onDrop: function onDrop(draggedData, dropData) {
188
+ // check if we're dropping into a blank
189
+ var isValidBlank = (dropData === null || dropData === void 0 ? void 0 : dropData.type) === "drag-in-the-blank-drop-choice";
190
+ if (!isValidBlank) return;
191
+
192
+ // if the dragged and dropped data are the same, do nothing
193
+ if (draggedData.value.id === dropData.value.id) return;
194
+ if (draggedData.type === 'drag-in-the-blank-choice') {
195
+ // place into blank
196
+ (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
197
+ if (!opts.options.duplicates && draggedData.fromChoice) {
198
+ (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
199
+ }
200
+ return;
201
+ }
202
+
203
+ // moving placed choice between blanks
204
+ if (draggedData.type === 'drag-in-the-blank-placed-choice') {
205
+ // clear target blank
206
+ (0, _utils.onRemoveResponse)(nodeProps, dropData.value);
207
+
208
+ // set new blank value
209
+ (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
210
+
211
+ // clear original blank - slight delay to ensure state updates correctly
212
+ setTimeout(function () {
213
+ return (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
214
+ }, 10);
215
+ }
216
+ }
169
217
  }
170
218
  }),
171
219
  setDropNodeRef = _useDroppable.setNodeRef,
172
220
  isOver = _useDroppable.isOver,
173
221
  dragItem = _useDroppable.active;
174
-
175
- // Combine refs for both drag and drop
176
222
  var setNodeRef = function setNodeRef(node) {
177
223
  setDragNodeRef(node);
178
224
  setDropNodeRef(node);
179
225
  };
180
- var dragStyle = {
181
- transform: _utilities.CSS.Translate.toString(dragTransform),
182
- opacity: isDragging ? 0.5 : 1
183
- };
184
226
  var dragContent = /*#__PURE__*/_react["default"].createElement(BlankContent, {
185
227
  n: n,
186
228
  isDragging: isDragging,
187
229
  isOver: isOver,
188
230
  dragItem: dragItem === null || dragItem === void 0 || (_dragItem$data = dragItem.data) === null || _dragItem$data === void 0 ? void 0 : _dragItem$data.current,
189
231
  value: value,
190
- disabled: disabled,
191
- style: dragStyle
232
+ disabled: disabled
192
233
  }, children);
193
234
  var dragEl = !value ? /*#__PURE__*/_react["default"].createElement("span", {
194
235
  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","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","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","disabled","DragDropChoice","_ref3","_dragItem$data","instanceId","nodeProps","opts","_useDraggable","useDraggable","id","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","_extends2","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 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 && 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\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 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.29.0-mui-update.0",
3
+ "version": "11.31.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.30.0-mui-update.0",
17
- "@pie-lib/math-input": "6.39.0-mui-update.0",
18
- "@pie-lib/math-rendering": "3.34.0-mui-update.0",
19
- "@pie-lib/math-toolbar": "1.39.0-mui-update.0",
20
- "@pie-lib/render-ui": "4.43.0-mui-update.0",
17
+ "@pie-lib/drag": "2.32.0-mui-update.0",
18
+ "@pie-lib/math-input": "6.41.0-mui-update.0",
19
+ "@pie-lib/math-rendering": "3.36.0-mui-update.0",
20
+ "@pie-lib/math-toolbar": "1.41.0-mui-update.0",
21
+ "@pie-lib/render-ui": "4.45.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": "094026045c44d3d7e558beb7e6986f2652661f75",
55
+ "gitHead": "56f71068deecd32adaab99fd03515f1133919d9d",
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
 
@@ -70,7 +72,7 @@ export function BlankContent({
70
72
  }
71
73
  }, [isOver, hoveredElementSize]);
72
74
 
73
- const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
75
+ const label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || '\u00A0';
74
76
  const finalLabel = isDragging ? '\u00A0' : label;
75
77
  const hasGrip = finalLabel !== '\u00A0';
76
78
  const isPreview = dragItem && isOver;
@@ -128,36 +130,50 @@ BlankContent.propTypes = {
128
130
  style: PropTypes.object,
129
131
  };
130
132
 
131
- function DragDropChoice({
132
- value,
133
- disabled,
134
- onChange,
135
- removeResponse,
136
- instanceId,
137
- targetId,
138
- duplicates,
133
+ function DragDropChoice({
134
+ value,
135
+ disabled,
136
+ instanceId,
137
+ children,
139
138
  n,
140
- children
139
+ nodeProps,
140
+ opts,
141
141
  }) {
142
- // Setup draggable functionality
143
142
  const {
144
143
  attributes: dragAttributes,
145
144
  listeners: dragListeners,
146
145
  setNodeRef: setDragNodeRef,
147
- transform: dragTransform,
148
146
  isDragging,
149
147
  } = useDraggable({
150
148
  id: `drag-${n.key}`,
151
- disabled: disabled || !value,
149
+ disabled: disabled || !value?.value,
152
150
  data: {
153
- id: targetId,
154
- value: value,
155
- instanceId: instanceId,
156
- fromChoice: true,
157
- },
151
+ id: `drag-${n.key}`,
152
+ value,
153
+ instanceId,
154
+ nodeProps,
155
+ n,
156
+ opts,
157
+ type: 'drag-in-the-blank-placed-choice',
158
+ fromChoice: !value,
159
+ onRemove: (draggedData) => onRemoveResponse(nodeProps, draggedData.value),
160
+ onDrop: (draggedData, dropData) => {
161
+ // check if we're dropping into a blank
162
+ const isValidBlank =
163
+ dropData?.type === "drag-in-the-blank-drop-choice";
164
+
165
+ if (!isValidBlank) return;
166
+
167
+ // place into blank
168
+ onValueChange(nodeProps, n, draggedData.value);
169
+
170
+ if (!opts.options.duplicates && draggedData.fromChoice) {
171
+ onRemoveResponse(nodeProps, draggedData.value);
172
+ }
173
+ }
174
+ }
158
175
  });
159
176
 
160
- // Setup droppable functionality
161
177
  const {
162
178
  setNodeRef: setDropNodeRef,
163
179
  isOver,
@@ -165,23 +181,54 @@ function DragDropChoice({
165
181
  } = useDroppable({
166
182
  id: `drop-${n.key}`,
167
183
  data: {
168
- accepts: ['drag-in-the-blank-choice'],
184
+ type: 'drag-in-the-blank-drop-choice',
185
+ accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
169
186
  instanceId: instanceId,
170
187
  value: value,
171
- },
188
+ id: `drop-${n.key}`,
189
+ nodeProps,
190
+ n,
191
+ opts,
192
+ onDrop: (draggedData, dropData) => {
193
+ // check if we're dropping into a blank
194
+ const isValidBlank =
195
+ dropData?.type === "drag-in-the-blank-drop-choice";
196
+
197
+ if (!isValidBlank) return;
198
+
199
+ // if the dragged and dropped data are the same, do nothing
200
+ if (draggedData.value.id === dropData.value.id) return;
201
+
202
+ if (draggedData.type === 'drag-in-the-blank-choice') {
203
+ // place into blank
204
+ onValueChange(nodeProps, n, draggedData.value);
205
+
206
+ if (!opts.options.duplicates && draggedData.fromChoice) {
207
+ onRemoveResponse(nodeProps, draggedData.value);
208
+ }
209
+ return;
210
+ }
211
+
212
+ // moving placed choice between blanks
213
+ if (draggedData.type === 'drag-in-the-blank-placed-choice') {
214
+ // clear target blank
215
+ onRemoveResponse(nodeProps, dropData.value);
216
+
217
+ // set new blank value
218
+ onValueChange(nodeProps, n, draggedData.value);
219
+
220
+ // clear original blank - slight delay to ensure state updates correctly
221
+ setTimeout(() => onRemoveResponse(nodeProps, draggedData.value), 10);
222
+ }
223
+ }
224
+ }
172
225
  });
173
226
 
174
- // Combine refs for both drag and drop
175
227
  const setNodeRef = (node) => {
176
228
  setDragNodeRef(node);
177
229
  setDropNodeRef(node);
178
230
  };
179
231
 
180
- const dragStyle = {
181
- transform: CSS.Translate.toString(dragTransform),
182
- opacity: isDragging ? 0.5 : 1,
183
- };
184
-
185
232
  const dragContent = (
186
233
  <BlankContent
187
234
  n={n}
@@ -190,7 +237,6 @@ function DragDropChoice({
190
237
  dragItem={dragItem?.data?.current}
191
238
  value={value}
192
239
  disabled={disabled}
193
- style={dragStyle}
194
240
  >
195
241
  {children}
196
242
  </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
+ };