@pie-element/select-text 6.5.3-next.582 → 6.5.3-next.596

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_debug, _dll_classnames, _dll_pie_lib__render_ui, _dll_react_dom_server, _dll_pie_lib__correct_answer_toggle, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.18/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.21/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_debug, _dll_classnames, _dll_pie_lib__render_ui, _dll_react_dom_server, _dll_pie_lib__correct_answer_toggle, _dll_react_dom} 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";
 var lib$1 = {};
 Object.defineProperty(lib$1, "__esModule", {
   value: true
@@ -1797,14 +1797,14 @@ class Token extends React$4.Component {
     };
   }
   render() {
-    const {text, selectable, selected, classes, className: classNameProp, disabled, index, highlight, correct} = this.props;
+    const {text, selectable, selected, classes, className: classNameProp, disabled, index, highlight, correct, animationsDisabled} = this.props;
     let className;
     if (correct === undefined && selected && disabled) {
       className = classNames$1(classes.token, classes.selected, classes.disabledBlack);
     } else if (correct !== undefined) {
       className = classNames$1(Token.rootClassName, classes.custom, correct === true && classes.correct, correct === false && classes.incorrect);
     } else {
-      className = classNames$1(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, classNameProp);
+      className = classNames$1(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp);
     }
     return React$4.createElement('span', {
       className: className,
@@ -1815,7 +1815,7 @@ class Token extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 68
+        lineNumber: 70
       }
     });
   }
@@ -1870,6 +1870,15 @@ var Token$1 = withStyles$2(theme => {
       display: 'inline-block',
       padding: theme.spacing.unit
     },
+    print: {
+      border: 'dashed 2px gray',
+      lineHeight: 2,
+      boxSizing: 'border-box',
+      marginTop: theme.spacing.unit / 2,
+      display: 'inline-block',
+      padding: theme.spacing.unit,
+      color: color$1.text()
+    },
     custom: {
       display: 'initial'
     },
@@ -1907,6 +1916,7 @@ class TokenSelect extends React$3.Component {
       onChange: PropTypes$2.func.isRequired,
       disabled: PropTypes$2.bool,
       highlightChoices: PropTypes$2.bool,
+      animationsDisabled: PropTypes$2.bool,
       maxNoOfSelections: PropTypes$2.number
     };
   }
@@ -1933,12 +1943,12 @@ class TokenSelect extends React$3.Component {
   __init3() {
     this.toggleToken = event => {
       const {target} = event;
-      const {tokens} = this.props;
+      const {tokens, animationsDisabled} = this.props;
       const tokensCloned = clone(tokens);
       const targetSpanWrapper = target.closest(`.${Token$1.rootClassName}`);
       const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
       const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
-      if (t && t.correct === undefined) {
+      if (t && t.correct === undefined && !animationsDisabled) {
         const {onChange, maxNoOfSelections} = this.props;
         const selected = !t.selected;
         if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
@@ -1978,7 +1988,7 @@ class TokenSelect extends React$3.Component {
   }
   __init4() {
     this.generateTokensInHtml = () => {
-      const {tokens, disabled, highlightChoices} = this.props;
+      const {tokens, disabled, highlightChoices, animationsDisabled} = this.props;
       const selectedCount = this.selectedCount();
       const isLineBreak = text => text === '\n';
       const isNewParagraph = text => text === '\n\n';
@@ -1992,7 +2002,7 @@ class TokenSelect extends React$3.Component {
         if (isLineBreak(t.text)) {
           return finalAcc + '<br>';
         }
-        if (selectable && !disabled || showCorrectAnswer || t.selected) {
+        if (selectable && !disabled || showCorrectAnswer || t.selected || animationsDisabled && t.predefined) {
           return finalAcc + renderToString(React$3.createElement(Token$1, {
             key: index,
             disabled: disabled,
@@ -2000,10 +2010,11 @@ class TokenSelect extends React$3.Component {
             ...t,
             selectable: selectable,
             highlight: highlightChoices,
+            animationsDisabled: animationsDisabled,
             __self: this,
             __source: {
               fileName: _jsxFileName$2,
-              lineNumber: 119
+              lineNumber: 125
             }
           }));
         } else {
@@ -2027,7 +2038,7 @@ class TokenSelect extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 145
+        lineNumber: 152
       }
     });
   }
@@ -2063,6 +2074,7 @@ class TextSelect extends React$2.Component {
       text: PropTypes$1.string.isRequired,
       className: PropTypes$1.string,
       highlightChoices: PropTypes$1.bool,
+      animationsDisabled: PropTypes$1.bool,
       maxNoOfSelections: PropTypes$1.number
     };
   }
@@ -2080,7 +2092,7 @@ class TextSelect extends React$2.Component {
     };
   }
   render() {
-    const {text, disabled, tokens, selectedTokens, className, highlightChoices, maxNoOfSelections} = this.props;
+    const {text, disabled, tokens, selectedTokens, className, highlightChoices, maxNoOfSelections, animationsDisabled} = this.props;
     const normalized = normalize(text, tokens);
     log$1('normalized: ', normalized);
     const prepped = normalized.map(t => {
@@ -2103,10 +2115,11 @@ class TextSelect extends React$2.Component {
       disabled: disabled,
       onChange: this.change,
       maxNoOfSelections: maxNoOfSelections,
+      animationsDisabled: animationsDisabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 63
+        lineNumber: 65
       }
     });
   }
@@ -2169,7 +2182,9 @@ var generateModel = model => {
       ...token,
       text: tokenText,
       start: newStart,
-      end: newEnd
+      end: newEnd,
+      oldStart: token.start,
+      oldEnd: token.end
     }];
   }, []);
   return {
@@ -2229,7 +2244,7 @@ class Main extends React$1.Component {
   }
   __init2() {
     this.correctAnswer = () => {
-      const {model} = this.props;
+      const {model} = this.state;
       return model.tokens.filter(t => t.correct);
     };
   }
@@ -2243,13 +2258,13 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 63
+        lineNumber: 61
       }
     }, model.teacherInstructions && hasText(model.teacherInstructions) && React$1.createElement(React$1.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 66
+        lineNumber: 64
       }
     }, !model.animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -2260,41 +2275,41 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 67
+        lineNumber: 65
       }
     }, React$1.createElement(PreviewPrompt, {
       prompt: model.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 71
+        lineNumber: 69
       }
     })) : React$1.createElement(PreviewPrompt, {
       prompt: model.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 74
+        lineNumber: 72
       }
     }), React$1.createElement('br', {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 76
+        lineNumber: 74
       }
     })), React$1.createElement('div', {
       className: classes.prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 80
+        lineNumber: 78
       }
     }, React$1.createElement(PreviewPrompt, {
       prompt: model.prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 81
+        lineNumber: 79
       }
     })), !model.alwaysShowCorrect && React$1.createElement(CorrectAnswerToggle, {
       show: model.disabled && model.incorrect,
@@ -2303,7 +2318,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 84
+        lineNumber: 82
       }
     }), React$1.createElement(TextSelect, {
       className: classes.textSelect,
@@ -2311,20 +2326,29 @@ class Main extends React$1.Component {
       text: model.text,
       tokens: model.tokens,
       selectedTokens: selectedTokens,
-      onChange: onSelectionChange,
+      onChange: selection => {
+        const newSelections = selection.map(select => {
+          const token = model.tokens.find(({start, end}) => select.start === start && select.end === end);
+          if (token) {
+            return token;
+          }
+          return select;
+        });
+        onSelectionChange(newSelections);
+      },
       highlightChoices: model.highlightChoices,
       maxNoOfSelections: model.maxSelections,
       animationsDisabled: model.animationsDisabled,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 90
+        lineNumber: 88
       }
     }), model.rationale && hasText(model.rationale) && React$1.createElement(React$1.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 103
+        lineNumber: 114
       }
     }, !model.animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -2336,21 +2360,21 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 104
+        lineNumber: 115
       }
     }, React$1.createElement(PreviewPrompt, {
       prompt: model.rationale,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 108
+        lineNumber: 119
       }
     })) : React$1.createElement(PreviewPrompt, {
       prompt: model.rationale,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 110
+        lineNumber: 121
       }
     })), model.correctness && model.feedback && !showCorrectAnswer && React$1.createElement(Feedback, {
       correctness: model.correctness,
@@ -2358,7 +2382,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 115
+        lineNumber: 126
       }
     }));
   }
@@ -2427,7 +2451,7 @@ class Stateful extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 170
+        lineNumber: 181
       }
     });
   }
@@ -2447,6 +2471,21 @@ class SelectText extends HTMLElement {
   }
   set session(s) {
     this._session = s;
+    if (this._model) {
+      const generatedModel = generateModel(this._model) || ({});
+      const {tokens} = generatedModel;
+      const areCorrect = (s.selectedTokens || []).filter(({start, end}) => tokens.find(({start: tStart, end: tEnd}) => start === tStart && end === tEnd)).length;
+      if (!areCorrect) {
+        const generatedModel = generateModel({
+          ...this._model,
+          tokens: s.selectedTokens
+        }) || ({});
+        const {tokens} = generatedModel;
+        if (tokens) {
+          this._session.selectedTokens = tokens;
+        }
+      }
+    }
     if (!Array.isArray(this._session.selectedTokens)) {
       this._session.selectedTokens = [];
     }

package/module/manifest.json

@@ -4,11 +4,11 @@
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.2.18"
+      "version": "^1.2.19"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.21"
+      "version": "^1.0.22"
     }
   ]
 }