@pie-element/extended-text-entry 6.8.1 → 6.8.4

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.8.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@6.8.3...@pie-element/extended-text-entry@6.8.4) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/extended-text-entry
+
+
+
+
+
+## [6.8.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@6.8.2...@pie-element/extended-text-entry@6.8.3) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/extended-text-entry
+
+
+
+
+
+## [6.8.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@6.8.1...@pie-element/extended-text-entry@6.8.2) (2022-02-21)
+
+**Note:** Version bump only for package @pie-element/extended-text-entry
+
+
+
+
+
 ## [6.8.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@6.8.0...@pie-element/extended-text-entry@6.8.1) (2022-02-04)
 
 **Note:** Version bump only for package @pie-element/extended-text-entry

package/configure/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.13](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@5.4.12...@pie-element/extended-text-entry-configure@5.4.13) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/extended-text-entry-configure
+
+
+
+
+
+## [5.4.12](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@5.4.11...@pie-element/extended-text-entry-configure@5.4.12) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/extended-text-entry-configure
+
+
+
+
+
+## [5.4.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@5.4.10...@pie-element/extended-text-entry-configure@5.4.11) (2022-02-21)
+
+**Note:** Version bump only for package @pie-element/extended-text-entry-configure
+
+
+
+
+
 ## [5.4.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@5.4.9...@pie-element/extended-text-entry-configure@5.4.10) (2022-02-04)
 
 **Note:** Version bump only for package @pie-element/extended-text-entry-configure

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/extended-text-entry-configure",
   "private": true,
-  "version": "5.4.10",
+  "version": "5.4.13",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,8 +10,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.10.18",
-    "@pie-lib/editable-html": "^7.17.18",
+    "@pie-lib/config-ui": "^10.10.23",
+    "@pie-lib/editable-html": "^7.19.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "react": "^16.8.1",

package/module/configure.js

@@ -1,6 +1,6 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.19/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.20/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.20/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.2/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.25/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.2.1/module/index.js";
 var lib = {};
 Object.defineProperty(lib, "__esModule", {
   value: true

package/module/element.js

@@ -1,7 +1,7 @@
-import {_dll_debug, _dll_lodash, _dll_react_dom, _dll_prop_types, _dll_react, _dll_react_dom_server, _dll_material_ui__core, _dll_classnames, _dll_material_ui__core_styles, _dll_material_ui__icons, _dll_pie_lib__render_ui} from "../../../@pie-lib/shared-module@^1.2.19/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.22/module/index.js";
-import {_dll_pie_lib__math_toolbar} from "../../../@pie-lib/math-edit-module@^1.1.18/module/index.js";
-import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.20/module/index.js";
+import {_dll_debug, _dll_lodash, _dll_react_dom, _dll_prop_types, _dll_react, _dll_react_dom_server, _dll_material_ui__core, _dll_classnames, _dll_material_ui__core_styles, _dll_material_ui__icons, _dll_pie_lib__render_ui} from "../../../@pie-lib/shared-module@^1.4.2/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.27/module/index.js";
+import {_dll_pie_lib__math_toolbar} from "../../../@pie-lib/math-edit-module@^1.1.23/module/index.js";
+import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.25/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -30654,20 +30654,24 @@ var TablePlugin = (opts, toolbarPlugins) => {
     if (node.object !== 'document') {
       return;
     }
+    const tableAdded = node.findDescendant(d => d.data && d.data.get('newTable'));
+    if (!tableAdded) {
+      return;
+    }
+    const nodeToSearch = node.getParent(tableAdded.key) || node;
     let shouldAddTextAfterNode = false;
-    const indexToNotHaveTableOn = node.nodes.size - 1;
-    const indexOfLastTable = node.nodes.findLastIndex(d => d.type === 'table');
+    const indexToNotHaveTableOn = nodeToSearch.nodes.size - 1;
+    const indexOfLastTable = nodeToSearch.nodes.findLastIndex(d => d.type === 'table');
     if (indexOfLastTable === indexToNotHaveTableOn) {
       shouldAddTextAfterNode = true;
     }
     if (!shouldAddTextAfterNode) {
       return;
     }
-    const tableNode = node.nodes.get(indexOfLastTable);
     return change => {
       if (shouldAddTextAfterNode) {
-        const tableJSON = tableNode.toJSON();
-        change.removeNodeByKey(tableNode.key);
+        const tableJSON = tableAdded.toJSON();
+        change.removeNodeByKey(tableAdded.key);
         const newBlock = Block.create({
           object: 'block',
           type: 'div'
@@ -30792,13 +30796,13 @@ const serialization$1 = {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 413
+              lineNumber: 418
             }
           }, React$f.createElement('tbody', {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 414
+              lineNumber: 419
             }
           }, children));
         }
@@ -30808,7 +30812,7 @@ const serialization$1 = {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 419
+              lineNumber: 424
             }
           }, children);
         }
@@ -30822,7 +30826,7 @@ const serialization$1 = {
               __self: this,
               __source: {
                 fileName: _jsxFileName$e,
-                lineNumber: 425
+                lineNumber: 430
               }
             }, children);
           } else {
@@ -30831,7 +30835,7 @@ const serialization$1 = {
               __self: this,
               __source: {
                 fileName: _jsxFileName$e,
-                lineNumber: 427
+                lineNumber: 432
               }
             }, children);
           }
@@ -31294,7 +31298,7 @@ const ExplicitConstructedResponse = props => {
 };
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes$5.object,
-  value: PropTypes$5.object
+  value: PropTypes$5.string
 };
 const defaultECR = index => Inline.create({
   type: 'explicit_constructed_response',
@@ -31336,14 +31340,19 @@ const {isUndefined: isUndefined} = _dll_lodash;
 const _jsxFileName$8 = "/home/circleci/repo/node_modules/@pie-lib/editable-html/src/plugins/respArea/index.jsx";
 const log$8 = debug$8('@pie-lib:editable-html:plugins:respArea');
 const lastIndexMap = {};
-const elTypesArray = ['inline_dropdown', 'explicit_constructed_response', 'drag_in_the_blank'];
+const elTypesMap = {
+  'inline-dropdown': 'inline_dropdown',
+  'explicit-constructed-response': 'explicit_constructed_response',
+  'drag-in-the-blank': 'drag_in_the_blank'
+};
+const elTypesArray = Object.values(elTypesMap);
 function ResponseAreaPlugin(opts) {
   const toolbar = {
     icon: React$9.createElement(ToolbarIcon, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 18
+        lineNumber: 23
       }
     }),
     buttonStyles: {
@@ -31406,7 +31415,7 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 88
+            lineNumber: 93
           }
         });
       }
@@ -31421,7 +31430,7 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 95
+            lineNumber: 100
           }
         });
       }
@@ -31433,12 +31442,12 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 102
+            lineNumber: 107
           }
         });
       }
     },
-    onChange(change) {
+    onChange(change, editor) {
       const type = opts.type.replace(/-/g, '_');
       if (isUndefined(lastIndexMap[type])) {
         lastIndexMap[type] = 0;
@@ -31451,6 +31460,18 @@ function ResponseAreaPlugin(opts) {
           }
         });
       }
+      if (!editor.value) {
+        return;
+      }
+      const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
+      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
+      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+      const elementsWithChangedStatus = arrayToFilter.filter(d => !arrayToUseForFilter.find(e => e.data.get('index') === d.data.get('index')));
+      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
+        opts.onHandleAreaChange(elementsWithChangedStatus);
+      }
     },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');
@@ -31514,7 +31535,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 181
+              lineNumber: 207
             }
           });
         }
@@ -31528,7 +31549,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 187
+              lineNumber: 213
             }
           });
         }
@@ -31544,7 +31565,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 198
+              lineNumber: 224
             }
           });
         }
@@ -31872,7 +31893,7 @@ class Toolbar extends React$7.Component {
         position: PropTypes$4.oneOf(['bottom', 'top']),
         alignment: PropTypes$4.oneOf(['left', 'right']),
         alwaysVisible: PropTypes$4.bool,
-        ref: PropTypes$4.obj,
+        ref: PropTypes$4.func,
         showDone: PropTypes$4.bool
       }),
       onDataChange: PropTypes$4.func
@@ -32660,6 +32681,11 @@ const defaultToolbarOpts = {
   showDone: true,
   doneOn: 'blur'
 };
+const defaultResponseAreaProps = {
+  options: {},
+  respAreaToolbar: () => {},
+  onHandleAreaChange: () => {}
+};
 const createToolbarOpts = toolbarOpts => {
   return {
     ...defaultToolbarOpts,
@@ -32686,6 +32712,7 @@ class Editor extends React$3.Component {
       classes: PropTypes$2.object.isRequired,
       highlightShape: PropTypes$2.bool,
       disabled: PropTypes$2.bool,
+      spellCheck: PropTypes$2.bool,
       nonEmpty: PropTypes$2.bool,
       disableUnderline: PropTypes$2.bool,
       autoWidthToolbar: PropTypes$2.bool,
@@ -32695,7 +32722,7 @@ class Editor extends React$3.Component {
         type: PropTypes$2.oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank']),
         options: PropTypes$2.object,
         respAreaToolbar: PropTypes$2.func,
-        onDelete: PropTypes$2.func
+        onHandleAreaChange: PropTypes$2.func
       }),
       toolbarOpts: PropTypes$2.shape({
         position: PropTypes$2.oneOf(['bottom', 'top']),
@@ -32716,8 +32743,9 @@ class Editor extends React$3.Component {
       disableUnderline: true,
       onFocus: () => {},
       onBlur: () => {},
+      onKeyDown: () => {},
       toolbarOpts: defaultToolbarOpts,
-      onKeyDown: () => {}
+      responseAreaProps: defaultResponseAreaProps
     };
   }
   constructor(props) {
@@ -32741,6 +32769,10 @@ class Editor extends React$3.Component {
       value: props.value,
       toolbarOpts: createToolbarOpts(props.toolbarOpts)
     };
+    const normalizedResponseAreaProps = {
+      ...defaultResponseAreaProps,
+      ...props.responseAreaProps
+    };
     this.onResize = () => {
       props.onChange(this.state.value, true);
     };
@@ -32794,9 +32826,10 @@ class Editor extends React$3.Component {
         }
       },
       responseArea: {
-        type: props.responseAreaProps && props.responseAreaProps.type,
-        options: props.responseAreaProps && props.responseAreaProps.options,
-        respAreaToolbar: props.responseAreaProps && props.responseAreaProps.respAreaToolbar,
+        type: normalizedResponseAreaProps.type,
+        options: normalizedResponseAreaProps.options,
+        respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
+        onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
         onFocus: () => {
           log$3('[table:onFocus]...');
           this.onPluginFocus();
@@ -33100,7 +33133,7 @@ class Editor extends React$3.Component {
     };
   }
   render() {
-    const {disabled, highlightShape, classes, className, placeholder, pluginProps, onKeyDown} = this.props;
+    const {disabled, spellCheck, highlightShape, classes, className, placeholder, pluginProps, onKeyDown} = this.props;
     const {value, focusedNode, toolbarOpts} = this.state;
     log$3('[render] value: ', value);
     const sizeStyle = this.buildSizeStyle();
@@ -33117,7 +33150,7 @@ class Editor extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 542
+        lineNumber: 559
       }
     }, React$3.createElement(Editor$2, {
       plugins: this.plugins,
@@ -33142,6 +33175,7 @@ class Editor extends React$3.Component {
       focusedNode: focusedNode,
       normalize: this.normalize,
       readOnly: disabled,
+      spellCheck: spellCheck,
       className: classes.slateEditor,
       style: {
         minHeight: sizeStyle.minHeight,
@@ -33155,7 +33189,7 @@ class Editor extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 547
+        lineNumber: 564
       }
     }));
   }

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/extended-text-entry@6.8.0</title>
+      <title>@pie-element/extended-text-entry@6.8.3</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,22 +1,22 @@
 {
   "name": "@pie-element/extended-text-entry",
-  "version": "6.8.0",
+  "version": "6.8.3",
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.2.19"
+      "version": "^1.4.2"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.22"
+      "version": "^1.0.27"
     },
     {
       "name": "@pie-lib/math-edit-module",
-      "version": "^1.1.18"
+      "version": "^1.1.23"
     },
     {
       "name": "@pie-lib/drag-module",
-      "version": "^1.0.20"
+      "version": "^1.0.25"
     }
   ]
 }

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/extended-text-entry@6.8.0</title>
+      <title>@pie-element/extended-text-entry@6.8.3</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js

@@ -1,7 +1,7 @@
-import {_dll_debug, _dll_lodash, _dll_react_dom, _dll_prop_types, _dll_react, _dll_react_dom_server, _dll_material_ui__core, _dll_classnames, _dll_material_ui__core_styles, _dll_material_ui__icons, _dll_pie_lib__render_ui} from "../../../@pie-lib/shared-module@^1.2.19/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.22/module/index.js";
-import {_dll_pie_lib__math_toolbar} from "../../../@pie-lib/math-edit-module@^1.1.18/module/index.js";
-import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.20/module/index.js";
+import {_dll_debug, _dll_lodash, _dll_react_dom, _dll_prop_types, _dll_react, _dll_react_dom_server, _dll_material_ui__core, _dll_classnames, _dll_material_ui__core_styles, _dll_material_ui__icons, _dll_pie_lib__render_ui} from "../../../@pie-lib/shared-module@^1.4.2/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.27/module/index.js";
+import {_dll_pie_lib__math_toolbar} from "../../../@pie-lib/math-edit-module@^1.1.23/module/index.js";
+import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.25/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -30654,20 +30654,24 @@ var TablePlugin = (opts, toolbarPlugins) => {
     if (node.object !== 'document') {
       return;
     }
+    const tableAdded = node.findDescendant(d => d.data && d.data.get('newTable'));
+    if (!tableAdded) {
+      return;
+    }
+    const nodeToSearch = node.getParent(tableAdded.key) || node;
     let shouldAddTextAfterNode = false;
-    const indexToNotHaveTableOn = node.nodes.size - 1;
-    const indexOfLastTable = node.nodes.findLastIndex(d => d.type === 'table');
+    const indexToNotHaveTableOn = nodeToSearch.nodes.size - 1;
+    const indexOfLastTable = nodeToSearch.nodes.findLastIndex(d => d.type === 'table');
     if (indexOfLastTable === indexToNotHaveTableOn) {
       shouldAddTextAfterNode = true;
     }
     if (!shouldAddTextAfterNode) {
       return;
     }
-    const tableNode = node.nodes.get(indexOfLastTable);
     return change => {
       if (shouldAddTextAfterNode) {
-        const tableJSON = tableNode.toJSON();
-        change.removeNodeByKey(tableNode.key);
+        const tableJSON = tableAdded.toJSON();
+        change.removeNodeByKey(tableAdded.key);
         const newBlock = Block.create({
           object: 'block',
           type: 'div'
@@ -30792,13 +30796,13 @@ const serialization$1 = {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 413
+              lineNumber: 418
             }
           }, React$f.createElement('tbody', {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 414
+              lineNumber: 419
             }
           }, children));
         }
@@ -30808,7 +30812,7 @@ const serialization$1 = {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 419
+              lineNumber: 424
             }
           }, children);
         }
@@ -30822,7 +30826,7 @@ const serialization$1 = {
               __self: this,
               __source: {
                 fileName: _jsxFileName$e,
-                lineNumber: 425
+                lineNumber: 430
               }
             }, children);
           } else {
@@ -30831,7 +30835,7 @@ const serialization$1 = {
               __self: this,
               __source: {
                 fileName: _jsxFileName$e,
-                lineNumber: 427
+                lineNumber: 432
               }
             }, children);
           }
@@ -31294,7 +31298,7 @@ const ExplicitConstructedResponse = props => {
 };
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes$5.object,
-  value: PropTypes$5.object
+  value: PropTypes$5.string
 };
 const defaultECR = index => Inline.create({
   type: 'explicit_constructed_response',
@@ -31336,14 +31340,19 @@ const {isUndefined: isUndefined} = _dll_lodash;
 const _jsxFileName$8 = "/home/circleci/repo/node_modules/@pie-lib/editable-html/src/plugins/respArea/index.jsx";
 const log$8 = debug$8('@pie-lib:editable-html:plugins:respArea');
 const lastIndexMap = {};
-const elTypesArray = ['inline_dropdown', 'explicit_constructed_response', 'drag_in_the_blank'];
+const elTypesMap = {
+  'inline-dropdown': 'inline_dropdown',
+  'explicit-constructed-response': 'explicit_constructed_response',
+  'drag-in-the-blank': 'drag_in_the_blank'
+};
+const elTypesArray = Object.values(elTypesMap);
 function ResponseAreaPlugin(opts) {
   const toolbar = {
     icon: React$9.createElement(ToolbarIcon, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 18
+        lineNumber: 23
       }
     }),
     buttonStyles: {
@@ -31406,7 +31415,7 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 88
+            lineNumber: 93
           }
         });
       }
@@ -31421,7 +31430,7 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 95
+            lineNumber: 100
           }
         });
       }
@@ -31433,12 +31442,12 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 102
+            lineNumber: 107
           }
         });
       }
     },
-    onChange(change) {
+    onChange(change, editor) {
       const type = opts.type.replace(/-/g, '_');
       if (isUndefined(lastIndexMap[type])) {
         lastIndexMap[type] = 0;
@@ -31451,6 +31460,18 @@ function ResponseAreaPlugin(opts) {
           }
         });
       }
+      if (!editor.value) {
+        return;
+      }
+      const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
+      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
+      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+      const elementsWithChangedStatus = arrayToFilter.filter(d => !arrayToUseForFilter.find(e => e.data.get('index') === d.data.get('index')));
+      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
+        opts.onHandleAreaChange(elementsWithChangedStatus);
+      }
     },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');
@@ -31514,7 +31535,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 181
+              lineNumber: 207
             }
           });
         }
@@ -31528,7 +31549,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 187
+              lineNumber: 213
             }
           });
         }
@@ -31544,7 +31565,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 198
+              lineNumber: 224
             }
           });
         }
@@ -31872,7 +31893,7 @@ class Toolbar extends React$7.Component {
         position: PropTypes$4.oneOf(['bottom', 'top']),
         alignment: PropTypes$4.oneOf(['left', 'right']),
         alwaysVisible: PropTypes$4.bool,
-        ref: PropTypes$4.obj,
+        ref: PropTypes$4.func,
         showDone: PropTypes$4.bool
       }),
       onDataChange: PropTypes$4.func
@@ -32660,6 +32681,11 @@ const defaultToolbarOpts = {
   showDone: true,
   doneOn: 'blur'
 };
+const defaultResponseAreaProps = {
+  options: {},
+  respAreaToolbar: () => {},
+  onHandleAreaChange: () => {}
+};
 const createToolbarOpts = toolbarOpts => {
   return {
     ...defaultToolbarOpts,
@@ -32686,6 +32712,7 @@ class Editor extends React$3.Component {
       classes: PropTypes$2.object.isRequired,
       highlightShape: PropTypes$2.bool,
       disabled: PropTypes$2.bool,
+      spellCheck: PropTypes$2.bool,
       nonEmpty: PropTypes$2.bool,
       disableUnderline: PropTypes$2.bool,
       autoWidthToolbar: PropTypes$2.bool,
@@ -32695,7 +32722,7 @@ class Editor extends React$3.Component {
         type: PropTypes$2.oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank']),
         options: PropTypes$2.object,
         respAreaToolbar: PropTypes$2.func,
-        onDelete: PropTypes$2.func
+        onHandleAreaChange: PropTypes$2.func
       }),
       toolbarOpts: PropTypes$2.shape({
         position: PropTypes$2.oneOf(['bottom', 'top']),
@@ -32716,8 +32743,9 @@ class Editor extends React$3.Component {
       disableUnderline: true,
       onFocus: () => {},
       onBlur: () => {},
+      onKeyDown: () => {},
       toolbarOpts: defaultToolbarOpts,
-      onKeyDown: () => {}
+      responseAreaProps: defaultResponseAreaProps
     };
   }
   constructor(props) {
@@ -32741,6 +32769,10 @@ class Editor extends React$3.Component {
       value: props.value,
       toolbarOpts: createToolbarOpts(props.toolbarOpts)
     };
+    const normalizedResponseAreaProps = {
+      ...defaultResponseAreaProps,
+      ...props.responseAreaProps
+    };
     this.onResize = () => {
       props.onChange(this.state.value, true);
     };
@@ -32794,9 +32826,10 @@ class Editor extends React$3.Component {
         }
       },
       responseArea: {
-        type: props.responseAreaProps && props.responseAreaProps.type,
-        options: props.responseAreaProps && props.responseAreaProps.options,
-        respAreaToolbar: props.responseAreaProps && props.responseAreaProps.respAreaToolbar,
+        type: normalizedResponseAreaProps.type,
+        options: normalizedResponseAreaProps.options,
+        respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
+        onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
         onFocus: () => {
           log$3('[table:onFocus]...');
           this.onPluginFocus();
@@ -33100,7 +33133,7 @@ class Editor extends React$3.Component {
     };
   }
   render() {
-    const {disabled, highlightShape, classes, className, placeholder, pluginProps, onKeyDown} = this.props;
+    const {disabled, spellCheck, highlightShape, classes, className, placeholder, pluginProps, onKeyDown} = this.props;
     const {value, focusedNode, toolbarOpts} = this.state;
     log$3('[render] value: ', value);
     const sizeStyle = this.buildSizeStyle();
@@ -33117,7 +33150,7 @@ class Editor extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 542
+        lineNumber: 559
       }
     }, React$3.createElement(Editor$2, {
       plugins: this.plugins,
@@ -33142,6 +33175,7 @@ class Editor extends React$3.Component {
       focusedNode: focusedNode,
       normalize: this.normalize,
       readOnly: disabled,
+      spellCheck: spellCheck,
       className: classes.slateEditor,
       style: {
         minHeight: sizeStyle.minHeight,
@@ -33155,7 +33189,7 @@ class Editor extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 547
+        lineNumber: 564
       }
     }));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/extended-text-entry",
-  "version": "6.8.1",
+  "version": "6.8.4",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -12,7 +12,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/editable-html": "^7.17.18",
+    "@pie-lib/editable-html": "^7.19.2",
     "@pie-lib/math-rendering": "^2.3.12",
     "@pie-lib/render-ui": "^4.12.4",
     "classnames": "^2.2.5",
@@ -22,7 +22,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "820dc9994e5f621018ca2c262f9a999996fd2079",
+  "gitHead": "7b61c8a15ceae75e9e6db5d465abfb6d22c34f30",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },