@pie-element/select-text 9.6.1-next.2 → 9.6.2-beta.1

package/configure/lib/design.js

@@ -45,10 +45,26 @@ var _debug = _interopRequireDefault(require("debug"));
 
 var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
 
+var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
+
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
 var _utils = require("./utils");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -79,7 +95,12 @@ var Design = /*#__PURE__*/function (_React$Component) {
         u.tokens = [];
       });
     }, 200));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeText", function (event) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeText", function (text) {
+      _this.updateText(text);
+
+      _this.clearTokens();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTextEvent", function (event) {
       return _this.updateText(event.target.value);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTokens", function (tokens, mode) {
@@ -93,6 +114,14 @@ var Design = /*#__PURE__*/function (_React$Component) {
         u.maxSelections = Math.max(max, correctTokenCount);
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTokenizedText", function (text) {
+      _this.apply(function (u) {
+        u.tokenizedText = text; // const correctTokenCount = tokens.filter((t) => t.correct).length;
+        // const max = isFinite(u.maxSelections) ? u.maxSelections : 0;
+        //
+        // u.maxSelections = Math.max(max, correctTokenCount);
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxSelections", function (event, max) {
       _this.apply(function (u) {
         return u.maxSelections = max;
@@ -143,9 +172,193 @@ var Design = /*#__PURE__*/function (_React$Component) {
         rationale: rationale
       }));
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createDOMAnnotation", function (elems, annotation) {
+      var classes = _this.props.classes;
+      var id = annotation.id;
+      (elems || []).forEach(function (elem) {
+        elem.dataset.id = id;
+        elem.className = (0, _classnames["default"])(classes.token); // elem.onclick = !disabled && this.handleClick;
+        // elem.onmouseover = this.handleHover;
+        // elem.onmouseout = this.handleCancelHover;
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createNewAnnotation", function (selectedElems, selectionDetails) {
+      var annotation = _objectSpread({
+        id: [selectionDetails.start, selectionDetails.end, new Date().getTime()].join('-')
+      }, selectionDetails);
+
+      _this.createDOMAnnotation(selectedElems, annotation);
+
+      return annotation;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "wrapSentencesInSpans", function (html) {
+      var onClickHandler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var classes = _this.props.classes;
+      var container = document.createElement('div');
+      container.innerHTML = html;
+
+      var splitSentences = function splitSentences(text) {
+        // Match sentences ending with punctuation:
+        // "." or "!" or "?"
+        var pattern = /([^.!?]+[.!?]+[\s"]*)|([^.!?]+$)/g;
+        var matches = text.match(pattern);
+        return matches || [];
+      };
+
+      var processNode = function processNode(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          var sentences = splitSentences(node.textContent);
+          var fragment = document.createDocumentFragment();
+
+          var _iterator = _createForOfIteratorHelper(sentences),
+              _step;
+
+          try {
+            var _loop = function _loop() {
+              var sentence = _step.value;
+
+              if (sentence.trim()) {
+                var span = document.createElement('span');
+                span.textContent = sentence;
+                span.className = (0, _classnames["default"])(classes.token);
+
+                if (onClickHandler) {
+                  span.addEventListener('click', function (e) {
+                    onClickHandler(e, sentence);
+                  });
+                }
+
+                fragment.appendChild(span);
+              } else {
+                fragment.appendChild(document.createTextNode(sentence));
+              }
+            };
+
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              _loop();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+
+          node.replaceWith(fragment);
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+          Array.from(node.childNodes).forEach(processNode);
+        }
+      };
+
+      Array.from(container.childNodes).forEach(processNode);
+      return container;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelection", function (event) {
+      var selection = window.getSelection(); // prevent unwanted selections
+
+      if (event.detail > 2) {
+        (0, _utils.clearSelection)();
+        return;
+      }
+
+      if (selection && selection.rangeCount > 0) {
+        _this.wrapSelectionInSpan(selection);
+
+        (0, _utils.clearSelection)();
+
+        if (_this.textRef) {
+          var content = _this.textRef.getHTML();
+
+          _this.changeTokenizedText(content); // this.setState({ tokenizedText: content });
+
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTokenClick", function (event) {
+      var correctMode = _this.state.correctMode;
+
+      if (!correctMode) {
+        return;
+      }
+
+      event.target.classList.toggle('correct');
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearTokens", function () {
+      var model = _this.props.model;
+
+      if (_this.textRef) {
+        var container = document.createElement('div');
+        container.innerHTML = model.text; // Remove all children and add new content
+
+        _this.textRef.innerHTML = '';
+
+        _this.textRef.appendChild(container);
+      }
+
+      _this.changeTokenizedText(model.text);
+
+      _this.setState({
+        tokenizedText: model.text
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectWords", function () {
+      var text = _this.state.text;
+
+      _this.clearTokens();
+
+      var tokenized = _this.wrapWordsInSpans(text, function (e) {
+        return _this.handleTokenClick(e);
+      });
+
+      console.log('words:', tokenized);
+
+      _this.changeTokenizedText(tokenized);
+
+      _this.setState({
+        tokenizedText: tokenized
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectSentences", function () {
+      var text = _this.state.text;
+
+      _this.clearTokens();
+
+      var container = _this.wrapSentencesInSpans(text); // Remove all children and add new content
+
+
+      _this.textRef.innerHTML = '';
+
+      _this.textRef.appendChild(container);
+
+      var tokenized = container.innerHTML;
+      console.log('sentences:', tokenized);
+
+      _this.changeTokenizedText(tokenized); // this.setState({ tokenizedText: tokenized });
+
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectParagraphs", function () {
+      var text = _this.state.text;
+
+      _this.clearTokens();
+
+      var container = _this.wrapParagraphContentInSpan(text); // Remove all children and add new content
+
+
+      _this.textRef.innerHTML = '';
+
+      _this.textRef.appendChild(container);
+
+      var tokenized = container.innerHTML;
+      console.log('paragraphs:', tokenized);
+
+      _this.changeTokenizedText(tokenized); // this.setState({ tokenizedText: tokenized });
+
+    });
     var _model = _this.props.model;
     _this.state = {
-      text: _model && _model.text || ''
+      correctMode: false,
+      selectMode: false,
+      text: _model && _model.text || '',
+      tokenizedText: _model && _model.token || ''
     };
     return _this;
   }
@@ -156,17 +369,160 @@ var Design = /*#__PURE__*/function (_React$Component) {
       var model = nProps.model;
 
       if (model && model.text) {
-        this.setState({
+        var _this$setState;
+
+        this.setState((_this$setState = {
           text: model.text
-        });
+        }, (0, _defineProperty2["default"])(_this$setState, "text", model.text), (0, _defineProperty2["default"])(_this$setState, "tokenizedText", model.tokenizedText || model.text), _this$setState)); // model.tokens.forEach((annotation) => {
+        //   console.log('annotation', annotation);
+        //   const [domStart, domEnd] = getDOMNodes(annotation.start, annotation.end, this.textRef);
+        //   console.log('domStart, domEnd', domStart, domEnd);
+        //
+        //   if (domStart && domEnd) {
+        //     const range = document.createRange();
+        //
+        //     range.setStart(domStart.node, domStart.offset);
+        //     range.setEnd(domEnd.node, domEnd.offset);
+        //
+        //     const spans = wrapRange(range);
+        //
+        //     this.createDOMAnnotation(spans, annotation);
+        //   }
+        // });
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // console.log('UPDATED');
+      // console.log('this.state.text', this.state.text);
+      //eslint-disable-next-line
+      var domNode = _reactDom["default"].findDOMNode(this);
+
+      (0, _mathRendering.renderMath)(domNode);
+    }
+  }, {
+    key: "wrapWordsInSpans",
+    value: // addAnnotation = (type) => {
+    //   const { annotations, onChange } = this.props;
+    //   const annotation = this.createNewAnnotation('', type);
+    //   const labelElem = getLabelElement(annotation.id);
+    //
+    //   annotations.push(annotation);
+    //
+    //   this.setState({
+    //     openedMenu: false,
+    //     openedEditor: true,
+    //     annotationIndex: annotations.length - 1,
+    //     annotation,
+    //     labelElem,
+    //   });
+    //
+    //   onChange(annotations);
+    // };
+    // new functionalities
+    function wrapWordsInSpans(html, onClick) {
+      var classes = this.props.classes;
+      var container = document.createElement('div');
+      container.innerHTML = html;
+
+      var processNode = function processNode(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          var words = node.textContent.split(/(\s+|\b)/); // split by word boundaries + spaces
+
+          var fragment = document.createDocumentFragment();
+
+          var _iterator2 = _createForOfIteratorHelper(words),
+              _step2;
+
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var word = _step2.value;
+
+              if (word.trim()) {
+                var span = document.createElement('span');
+                span.className = (0, _classnames["default"])(classes.token);
+                span.addEventListener('click', function (e) {
+                  return onClick(e);
+                });
+                span.textContent = word;
+                fragment.appendChild(span);
+              } else {
+                fragment.appendChild(document.createTextNode(word));
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+
+          node.replaceWith(fragment);
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+          Array.from(node.childNodes).forEach(processNode);
+        }
+      };
+
+      Array.from(container.childNodes).forEach(processNode);
+      return container.innerHTML;
+    }
+  }, {
+    key: "wrapParagraphContentInSpan",
+    value: function wrapParagraphContentInSpan(html) {
+      var _this2 = this;
+
+      var classes = this.props.classes;
+      var container = document.createElement('div');
+      container.innerHTML = html;
+      container.querySelectorAll('p').forEach(function (p) {
+        var span = document.createElement('span');
+        span.className = (0, _classnames["default"])(classes.token);
+        span.addEventListener('click', _this2.handleTokenClick); // Move all children of <p> into the span
+
+        while (p.firstChild) {
+          span.appendChild(p.firstChild);
+        }
+
+        p.appendChild(span);
+      });
+      return container;
+    }
+  }, {
+    key: "wrapSelectionInSpan",
+    value: function wrapSelectionInSpan(selection) {
+      var classes = this.props.classes;
+      var range = selection.getRangeAt(0);
+
+      if (range.collapsed) {
+        console.log('Selection is collapsed (no text selected).');
+        return;
+      } // Extract the contents of the selection
+
+
+      var contents = range.extractContents(); // Create the span wrapper
+
+      var span = document.createElement('span');
+      span.className = (0, _classnames["default"])(classes.token);
+      span.addEventListener('click', this.handleTokenClick);
+      span.appendChild(contents); // Insert back into the DOM
+
+      range.insertNode(span); // Collapse the selection
+
+      selection.removeAllRanges();
+    }
   }, {
     key: "render",
     value: function render() {
-      var _configuration$teache, _configuration$prompt, _configuration$ration;
-
-      var textValue = this.state.text;
+      var _configuration$teache,
+          _configuration$prompt,
+          _this3 = this,
+          _configuration$ration;
+
+      var _this$state = this.state,
+          textValue = _this$state.text,
+          correctMode = _this$state.correctMode,
+          selectMode = _this$state.selectMode,
+          tokenizedText = _this$state.tokenizedText;
       var _this$props6 = this.props,
           classes = _this$props6.classes,
           configuration = _this$props6.configuration,
@@ -336,65 +692,60 @@ var Design = /*#__PURE__*/function (_React$Component) {
         mathMlOptions: mathMlOptions
       }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.errorText
-      }, promptError)), text.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+      }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.subheader
+      }, "NEW functionality", /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+          checked: selectMode,
+          onChange: function onChange() {
+            _this3.setState({
+              selectMode: !selectMode
+            }); // renderMath(this);
+
+          }
+        }),
+        label: "Select tokens"
+      })), selectMode && /*#__PURE__*/_react["default"].createElement(_textSelect.Controls, {
+        onClear: this.clearTokens,
+        onWords: this.selectWords,
+        onSentences: this.selectSentences,
+        onParagraphs: this.selectParagraphs,
+        setCorrectMode: correctMode,
+        onToggleCorrectMode: function onToggleCorrectMode() {
+          return _this3.setState({
+            correctMode: !correctMode
+          });
+        }
+      }), text.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: text.label || '',
         className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-        className: classes.input,
-        multiline: true,
-        defaultValue: textValue,
-        onChange: this.changeText,
-        spellCheck: spellCheckEnabled
-      })), tokens.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: tokens.label || '',
-        className: classes.tokenizerContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        classes: {
-          tooltip: classes.tooltip
+      }, selectMode ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.textContainer,
+        ref: function ref(r) {
+          return _this3.textRef = r;
         },
-        disableFocusListener: true,
-        disableTouchListener: true,
-        placement: 'right',
-        title: validationMessage
-      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-        fontSize: 'small',
-        color: 'primary',
-        style: {
-          position: 'absolute',
-          left: '48px',
-          top: '-3px'
+        onMouseDown: selectMode && !correctMode ? _utils.clearSelection : function () {},
+        onMouseUp: selectMode && !correctMode ? this.handleSelection : function () {},
+        dangerouslySetInnerHTML: {
+          __html: tokenizedText
         }
-      })), /*#__PURE__*/_react["default"].createElement(_textSelect.Tokenizer, {
-        className: classes.tokenizer,
-        text: model.text,
-        tokens: tokensModel,
-        onChange: this.changeTokens
-      })), tokensError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, tokensError), selectionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, selectionsError), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.tokensDetails
-      }, mode.settings && /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-        label: "".concat(mode.label, ": ").concat(model.mode ? model.mode : 'None'),
-        className: classes.chip
-      }), selections.settings && /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-        label: "".concat(selections.label, ": ").concat(tokensModel.length),
-        className: classes.chip
-      }), correctAnswer.settings && /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-        label: "".concat(correctAnswer.label, ": ").concat(tokensModel.filter(function (t) {
-          return t.correct;
-        }).length),
-        className: classes.chip
-      }), selectionCount.settings && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
-        min: tokensModel.filter(function (t) {
-          return t.correct;
-        }).length || 0,
-        label: "".concat(selectionCount.label, " (0:any)"),
-        max: tokensModel.length,
-        value: model.maxSelections,
-        onChange: this.changeMaxSelections,
-        className: classes.numberField
+      }) : /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: textValue,
+        onChange: this.changeText,
+        nonEmpty: false,
+        disableUnderline: true,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(text === null || text === void 0 ? void 0 : text.inputConfiguration),
+        spellCheck: spellCheckEnabled,
+        imageSupport: imageSupport,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
       })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: rationale.label || '',
         className: classes.promptHolder
@@ -499,6 +850,43 @@ var _default = (0, _styles.withStyles)(function (theme) {
       fontSize: theme.typography.fontSize - 2,
       color: theme.palette.error.main,
       paddingTop: theme.spacing.unit
+    },
+    subheader: {
+      paddingBottom: '8px',
+      borderBottom: '1px solid grey',
+      marginBottom: '16px',
+      marginTop: '24px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    textContainer: {
+      padding: '15px 21px',
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      overflowY: 'scroll',
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'break-word',
+      '& p': {
+        margin: 0
+      },
+      '& span[data-latex]': {
+        userSelect: 'none',
+        '-webkit-user-select': 'none',
+        '-moz-user-select': 'none',
+        '-ms-user-select': 'none'
+      }
+    },
+    token: {
+      position: 'relative',
+      cursor: 'pointer',
+      backgroundColor: '#fff9c4',
+      '&:hover': {
+        backgroundColor: '#E5E0B0'
+      },
+      '&.correct': {
+        backgroundColor: '#4caf50'
+      }
     }
   };
 })(Design);