@pie-element/extended-text-entry 6.8.0 → 6.8.3

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.17/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.20/module/index.js";
-import {_dll_pie_lib__math_toolbar} from "../../../@pie-lib/math-edit-module@^1.1.16/module/index.js";
-import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.18/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.1/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.26/module/index.js";
+import {_dll_pie_lib__math_toolbar} from "../../../@pie-lib/math-edit-module@^1.1.22/module/index.js";
+import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.24/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;
@@ -21958,6 +21958,18 @@ const htmlDecode = input => {
 const getTagName = el => {
   return (el && el.tagName || '').toLowerCase();
 };
+const lessThanHandling = input => {
+  const arrowSplit = input.split('<');
+  if (input.length > 2) {
+    return arrowSplit.reduce((st, part) => {
+      if (part.match(/<[a-zA-Z/][\s\S]*>/ig)) {
+        return `${st}${st ? '<' : ''}${part}`;
+      }
+      return `${st}${st ? '&lt;' : ''}${part}`;
+    }, '');
+  }
+  return input;
+};
 const serialization$4 = {
   deserialize(el) {
     const tagName = getTagName(el);
@@ -22002,14 +22014,14 @@ const serialization$4 = {
       const l = object.data.get('latex');
       const wrapper = object.data.get('wrapper');
       log$f('[serialize] latex: ', l);
-      const decoded = htmlDecode(l);
+      const decoded = htmlDecode(lessThanHandling(l));
       return React$p.createElement('span', {
         'data-latex': "",
         'data-raw': decoded,
         __self: this,
         __source: {
           fileName: _jsxFileName$o,
-          lineNumber: 238
+          lineNumber: 268
         }
       }, wrapMath(decoded, wrapper));
     }
@@ -22023,7 +22035,7 @@ const serialization$4 = {
         __self: this,
         __source: {
           fileName: _jsxFileName$o,
-          lineNumber: 250
+          lineNumber: 280
         }
       });
     }
@@ -30642,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'
@@ -30780,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));
         }
@@ -30796,7 +30812,7 @@ const serialization$1 = {
             __self: this,
             __source: {
               fileName: _jsxFileName$e,
-              lineNumber: 419
+              lineNumber: 424
             }
           }, children);
         }
@@ -30810,7 +30826,7 @@ const serialization$1 = {
               __self: this,
               __source: {
                 fileName: _jsxFileName$e,
-                lineNumber: 425
+                lineNumber: 430
               }
             }, children);
           } else {
@@ -30819,7 +30835,7 @@ const serialization$1 = {
               __self: this,
               __source: {
                 fileName: _jsxFileName$e,
-                lineNumber: 427
+                lineNumber: 432
               }
             }, children);
           }
@@ -31282,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',
@@ -31324,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: {
@@ -31394,7 +31415,7 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 88
+            lineNumber: 93
           }
         });
       }
@@ -31409,7 +31430,7 @@ function ResponseAreaPlugin(opts) {
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 95
+            lineNumber: 100
           }
         });
       }
@@ -31421,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;
@@ -31439,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]');
@@ -31502,7 +31535,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 181
+              lineNumber: 207
             }
           });
         }
@@ -31516,7 +31549,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 187
+              lineNumber: 213
             }
           });
         }
@@ -31532,7 +31565,7 @@ const serialization = {
             __self: this,
             __source: {
               fileName: _jsxFileName$8,
-              lineNumber: 198
+              lineNumber: 224
             }
           });
         }
@@ -31860,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
@@ -32674,6 +32707,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,
@@ -32683,7 +32717,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']),
@@ -32785,6 +32819,7 @@ class Editor extends React$3.Component {
         type: props.responseAreaProps && props.responseAreaProps.type,
         options: props.responseAreaProps && props.responseAreaProps.options,
         respAreaToolbar: props.responseAreaProps && props.responseAreaProps.respAreaToolbar,
+        onHandleAreaChange: props.responseAreaProps && props.responseAreaProps.onHandleAreaChange,
         onFocus: () => {
           log$3('[table:onFocus]...');
           this.onPluginFocus();
@@ -33088,7 +33123,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();
@@ -33105,7 +33140,7 @@ class Editor extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 542
+        lineNumber: 547
       }
     }, React$3.createElement(Editor$2, {
       plugins: this.plugins,
@@ -33130,6 +33165,7 @@ class Editor extends React$3.Component {
       focusedNode: focusedNode,
       normalize: this.normalize,
       readOnly: disabled,
+      spellCheck: spellCheck,
       className: classes.slateEditor,
       style: {
         minHeight: sizeStyle.minHeight,
@@ -33143,7 +33179,7 @@ class Editor extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 547
+        lineNumber: 552
       }
     }));
   }
@@ -33339,10 +33375,11 @@ class Main extends React$1.Component {
   }
   render() {
     const {model, classes, session} = this.props;
-    const {dimensions, disabled, feedback, teacherInstructions, mathInput, animationsDisabled} = model;
+    const {dimensions, disabled, feedback, teacherInstructions, mathInput, animationsDisabled, playersToolbarPosition} = model;
     const {value} = session;
     const {width, height} = dimensions || ({});
     const maxHeight = '40vh';
+    const toolbarOpts = {};
     log$1('[render] disabled? ', disabled);
     const teacherInstructionsDiv = React$1.createElement(PreviewPrompt, {
       defaultClassName: "teacher-instructions",
@@ -33350,9 +33387,17 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 52
+        lineNumber: 54
       }
     });
+    switch (playersToolbarPosition) {
+      case 'top':
+        toolbarOpts.position = 'top';
+        break;
+      default:
+        toolbarOpts.position = 'bottom';
+        break;
+    }
     return React$1.createElement('div', {
       className: classes.main,
       ref: ref => {
@@ -33361,13 +33406,13 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 55
+        lineNumber: 66
       }
     }, teacherInstructions && React$1.createElement('div', {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 63
+        lineNumber: 74
       }
     }, !animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -33378,20 +33423,20 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 65
+        lineNumber: 76
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv, React$1.createElement('br', {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 72
+        lineNumber: 83
       }
     })), model.prompt && React$1.createElement(Typography, {
       className: classes.prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 77
+        lineNumber: 88
       }
     }, React$1.createElement(PreviewPrompt, {
       defaultClassName: "prompt",
@@ -33399,7 +33444,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 80
+        lineNumber: 91
       }
     })), React$1.createElement(EditableHtml, {
       className: "response-area-editor",
@@ -33410,6 +33455,7 @@ class Main extends React$1.Component {
       maxHeight: maxHeight,
       disabled: disabled,
       highlightShape: true,
+      toolbarOpts: toolbarOpts,
       pluginProps: {
         math: {
           disabled: !mathInput,
@@ -33427,19 +33473,19 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 83
+        lineNumber: 94
       }
     }), feedback && React$1.createElement('div', {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 108
+        lineNumber: 120
       }
     }, React$1.createElement('br', {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 109
+        lineNumber: 121
       }
     }), React$1.createElement(Feedback, {
       correctness: "correct",
@@ -33447,7 +33493,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 110
+        lineNumber: 122
       }
     })));
   }

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/extended-text-entry@6.7.8</title>
+      <title>@pie-element/extended-text-entry@6.8.2</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.7.8",
+  "version": "6.8.2",
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.2.17"
+      "version": "^1.4.1"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.20"
+      "version": "^1.0.26"
     },
     {
       "name": "@pie-lib/math-edit-module",
-      "version": "^1.1.16"
+      "version": "^1.1.22"
     },
     {
       "name": "@pie-lib/drag-module",
-      "version": "^1.0.18"
+      "version": "^1.0.24"
     }
   ]
 }

package/module/print-demo.js

@@ -12,7 +12,8 @@ generate.model = (id, element) => ({
   prompt: 'This is the question prompt',
   promptEnabled: true,
   mathInput: true,
-  toolbarEditorPosition: 'bottom',
+  playersToolbarPosition: 'bottom',
+  toolbarEditorPosition: 'bottom'
 });
 
 const { model } = generate;

package/module/print.html

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