@pie-element/inline-dropdown 3.7.0 → 3.7.1-beta.587

package/configure/lib/inline-dropdown-toolbar.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,9 +27,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
+var _slateReact = require("slate-react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
 
 var _mathRendering = require("@pie-lib/math-rendering");
 
@@ -39,13 +43,17 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var MenuItemComp = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(MenuItemComp, _React$Component);
@@ -132,10 +140,6 @@ var MenuItem = (0, _styles.withStyles)({
   }
 })(MenuItemComp);
 
-var findSlateNode = function findSlateNode(key) {
-  return window.document.querySelector('[data-key="' + key + '"]');
-};
-
 var createElementFromHTML = function createElementFromHTML(htmlString) {
   var div = document.createElement('div');
   div.innerHTML = (htmlString || '').trim();
@@ -174,47 +178,61 @@ var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
       var _this2$props = _this2.props,
           node = _this2$props.node,
           onAddChoice = _this2$props.onAddChoice;
-      var onlyText = createElementFromHTML(val).textContent;
+      var onlyText = createElementFromHTML(val).textContent.trim();
 
       if (!(0, _isEmpty["default"])(onlyText)) {
-        onAddChoice(node.data.get('index'), val);
+        onAddChoice(node.data.index, val);
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onSelectChoice", function (newValue, index) {
       var _this2$props2 = _this2.props,
           node = _this2$props2.node,
-          value = _this2$props2.value,
+          nodePath = _this2$props2.nodePath,
+          editor = _this2$props2.editor,
           onToolbarDone = _this2$props2.onToolbarDone,
           onSelectChoice = _this2$props2.onSelectChoice;
 
-      var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
+      var update = _objectSpread(_objectSpread({}, node.data), {}, {
         value: newValue
       });
 
-      var change = value.change().setNodeByKey(node.key, {
-        data: update
+      editor.apply({
+        type: 'set_node',
+        path: nodePath,
+        properties: {
+          data: node.data
+        },
+        newProperties: {
+          data: update
+        }
       });
-      var nextText = value.document.getNextText(node.key);
-      change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-      onToolbarDone(change, false);
+      onToolbarDone(false);
       onSelectChoice(index);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRemoveChoice", function (val, index) {
       var _this2$props3 = _this2.props,
           node = _this2$props3.node,
-          value = _this2$props3.value,
+          nodePath = _this2$props3.nodePath,
+          editor = _this2$props3.editor,
           onToolbarDone = _this2$props3.onToolbarDone,
           onRemoveChoice = _this2$props3.onRemoveChoice;
 
-      if ((0, _isEqual["default"])(val, node.data.get('value'))) {
-        var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
+      if ((0, _isEqual["default"])(val, node.data.value)) {
+        var update = _objectSpread(_objectSpread({}, node.data), {}, {
           value: null
         });
 
-        var change = value.change().setNodeByKey(node.key, {
-          data: update
+        editor.apply({
+          type: 'set_node',
+          path: nodePath,
+          properties: {
+            data: node.data
+          },
+          newProperties: {
+            data: update
+          }
         });
-        onToolbarDone(change, false);
+        onToolbarDone(false);
       }
 
       onRemoveChoice(index);
@@ -227,20 +245,66 @@ var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
         return false;
       }
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onBlur", function () {
+      if (_this2.clickedInside) {
+        _this2.clickedInside = false;
+        return;
+      }
+
+      var _this2$props4 = _this2.props,
+          nodePath = _this2$props4.nodePath,
+          choices = _this2$props4.choices,
+          onCheck = _this2$props4.onCheck,
+          onToolbarDone = _this2$props4.onToolbarDone,
+          editor = _this2$props4.editor;
+      var correctResponse = (choices || []).find(function (choice) {
+        return choice.correct;
+      });
+
+      _this2.onAddChoice();
+
+      if (!choices || choices && choices.length < 2 || !correctResponse) {
+        onCheck(function () {
+          editor.apply({
+            type: 'remove_node',
+            path: nodePath
+          });
+          onToolbarDone(false);
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onClickInside", function () {
+      _this2.clickedInside = true;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "focusInput", function () {
+      // we need to focus the input so that math is saved even without pressing the green checkmark
+      var slateEditorRef = _this2.editorRef && _this2.editorRef.rootRef && _this2.editorRef.rootRef.slateEditor;
+      var inputRef = slateEditorRef && slateEditorRef.editorRef && slateEditorRef.editorRef.element;
+
+      if (inputRef) {
+        inputRef.focus();
+      }
+    });
     return _this2;
   }
 
   (0, _createClass2["default"])(RespAreaToolbar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var node = this.props.node;
-      var domNode = findSlateNode(node.key);
+      var _this$props2 = this.props,
+          node = _this$props2.node,
+          editor = _this$props2.editor;
+
+      var domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
 
       if (domNode) {
         //eslint-disable-next-line
         var domNodeRect = domNode.getBoundingClientRect();
-        var editor = domNode.closest('[data-slate-editor]');
-        var editorRect = editor.getBoundingClientRect();
+
+        var _editor = domNode.closest('[data-slate-editor]');
+
+        var editorRect = _editor.getBoundingClientRect();
+
         var top = domNodeRect.top - editorRect.top;
         var left = domNodeRect.left - editorRect.left;
         this.setState({
@@ -266,12 +330,25 @@ var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
     value: function render() {
       var _this3 = this;
 
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          choices = _this$props2.choices;
+      var _this$props3 = this.props,
+          classes = _this$props3.classes,
+          choices = _this$props3.choices,
+          spellCheck = _this$props3.spellCheck,
+          uploadSoundSupport = _this$props3.uploadSoundSupport;
       var _this$state = this.state,
           respAreaMarkup = _this$state.respAreaMarkup,
           toolbarStyle = _this$state.toolbarStyle;
+      var filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(function (p) {
+        return p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list';
+      });
+      var labelPlugins = {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        }
+      };
 
       if (!toolbarStyle) {
         return null;
@@ -280,7 +357,8 @@ var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread(_objectSpread({}, toolbarStyle), {}, {
           backgroundColor: '#E0E1E6'
-        })
+        }),
+        onMouseDown: this.onClickInside
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.itemBuilder
       }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
@@ -296,13 +374,18 @@ var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
           position: 'top',
           alwaysVisible: false,
           showDone: false,
-          doneOn: 'custom'
+          doneOn: 'blur'
         },
         markup: respAreaMarkup,
         onKeyDown: this.onKeyDown,
         onChange: this.onRespAreaChange,
         onDone: this.onDone,
-        placeholder: "Add Choice"
+        placeholder: "Add Choice",
+        activePlugins: filteredDefaultPlugins,
+        pluginProps: labelPlugins,
+        onBlur: this.onBlur,
+        spellCheck: spellCheck,
+        uploadSoundSupport: uploadSoundSupport
       }), /*#__PURE__*/_react["default"].createElement("i", {
         style: {
           cursor: 'pointer',
@@ -315,6 +398,9 @@ var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
         },
         contentEditable: false,
         onMouseDown: function onMouseDown() {
+          return _this3.focusInput();
+        },
+        onClick: function onClick() {
           return _this3.onAddChoice();
         }
       }, "+")), choices && /*#__PURE__*/_react["default"].createElement("div", {
@@ -343,18 +429,15 @@ exports.RespAreaToolbar = RespAreaToolbar;
 (0, _defineProperty2["default"])(RespAreaToolbar, "propTypes", {
   classes: _propTypes["default"].object,
   node: _propTypes["default"].object,
+  uploadSoundSupport: _propTypes["default"].object,
   onDone: _propTypes["default"].func,
   choices: _propTypes["default"].array,
   onAddChoice: _propTypes["default"].func.isRequired,
   onRemoveChoice: _propTypes["default"].func.isRequired,
   onSelectChoice: _propTypes["default"].func.isRequired,
   onToolbarDone: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].shape({
-    change: _propTypes["default"].func.isRequired,
-    document: _propTypes["default"].shape({
-      getNextText: _propTypes["default"].func.isRequired
-    })
-  })
+  editor: _propTypes["default"].object.isRequired,
+  nodePath: _propTypes["default"].array.isRequired
 });
 var StyledRespAreaToolbar = (0, _styles.withStyles)({
   respArea: {

package/configure/lib/inline-dropdown-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/inline-dropdown-toolbar.jsx"],"names":["MenuItemComp","e","onRemoveChoice","props","preventDefault","stopPropagation","classes","correct","onClick","value","wrapper","valueHolder","__html","removeIcon","onRemoveClick","React","Component","PropTypes","object","isRequired","bool","func","string","MenuItem","background","borderBottom","boxSizing","display","cursor","lineHeight","padding","position","fontSize","fontStyle","transform","top","right","zIndex","wordBreak","findSlateNode","key","window","document","querySelector","createElementFromHTML","htmlString","div","createElement","innerHTML","trim","RespAreaToolbar","respAreaMarkup","setState","editorRef","finishEditing","val","node","onAddChoice","onlyText","textContent","data","get","newValue","index","onToolbarDone","onSelectChoice","update","toJSON","change","setNodeByKey","nextText","getNextText","moveFocusTo","moveAnchorTo","event","domNode","domNodeRect","getBoundingClientRect","editor","closest","editorRect","left","toolbarStyle","height","width","ReactDOM","findDOMNode","choices","state","backgroundColor","itemBuilder","ref","respArea","alwaysVisible","showDone","doneOn","onKeyDown","onRespAreaChange","onDone","choicesHolder","map","label","array","shape","StyledRespAreaToolbar","minHeight","flexDirection","border"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\nimport isEqual from 'lodash/isEqual';\nimport isEmpty from 'lodash/isEmpty';\nimport classnames from 'classnames';\n\nclass MenuItemComp extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correct: PropTypes.bool.isRequired,\n    onClick: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired\n  };\n\n  onRemoveClick = e => {\n    const { onRemoveChoice } = this.props;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    onRemoveChoice();\n  };\n\n  render() {\n    const { classes, correct, onClick, value } = this.props;\n\n    return (\n      <div className={classnames(classes.wrapper, { [classes.correct]: correct })} onClick={onClick}>\n        <div\n          className={classes.valueHolder}\n          dangerouslySetInnerHTML={{\n            __html: value\n          }}\n        />\n        <i className={classes.removeIcon} onClick={this.onRemoveClick}>\n          x\n        </i>\n      </div>\n    );\n  }\n}\n\nconst MenuItem = withStyles({\n  wrapper: {\n    background: '#fff',\n    borderBottom: '1px solid black',\n    boxSizing: 'border-box',\n    display: 'block',\n    cursor: 'pointer',\n    lineHeight: '30px',\n    padding: '10px 25px 10px 10px',\n    position: 'relative'\n  },\n  correct: {\n    background: '#C4DCFA'\n  },\n  removeIcon: {\n    cursor: 'pointer',\n    fontSize: '20px',\n    fontStyle: 'normal',\n    position: 'absolute',\n    transform: 'translate(0, -50%)',\n    top: '50%',\n    right: '5px',\n    zIndex: 3\n  },\n  valueHolder: {\n    wordBreak: 'break-all'\n  }\n})(MenuItemComp);\n\nconst findSlateNode = key => {\n  return window.document.querySelector('[data-key=\"' + key + '\"]');\n};\n\nconst createElementFromHTML = htmlString => {\n  const div = document.createElement('div');\n\n  div.innerHTML = (htmlString || '').trim();\n\n  return div;\n};\n\nexport class RespAreaToolbar extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    node: PropTypes.object,\n    onDone: PropTypes.func,\n    choices: PropTypes.array,\n    onAddChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n    onSelectChoice: PropTypes.func.isRequired,\n    onToolbarDone: PropTypes.func.isRequired,\n    value: PropTypes.shape({\n      change: PropTypes.func.isRequired,\n      document: PropTypes.shape({\n        getNextText: PropTypes.func.isRequired\n      })\n    })\n  };\n\n  state = {\n    respAreaMarkup: ''\n  };\n\n  componentDidMount() {\n    const { node } = this.props;\n\n    const domNode = findSlateNode(node.key);\n\n    if (domNode) {\n      //eslint-disable-next-line\n      const domNodeRect = domNode.getBoundingClientRect();\n      const editor = domNode.closest('[data-slate-editor]');\n      const editorRect = editor.getBoundingClientRect();\n      const top = domNodeRect.top - editorRect.top;\n      const left = domNodeRect.left - editorRect.left;\n\n      this.setState({\n        toolbarStyle: {\n          position: 'absolute',\n          top: `${top + domNodeRect.height + 60}px`,\n          left: `${left + 25}px`,\n          width: domNodeRect.width\n        }\n      });\n    }\n  }\n\n  componentDidUpdate() {\n    //eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  onRespAreaChange = respAreaMarkup => {\n    this.setState({ respAreaMarkup });\n  };\n\n  onAddChoice = () => {\n    if (this.editorRef) {\n      this.editorRef.finishEditing();\n    }\n  };\n\n  onDone = (val) => {\n    const { node, onAddChoice } = this.props;\n    const onlyText = createElementFromHTML(val).textContent;\n\n    if (!isEmpty(onlyText)) {\n      onAddChoice(node.data.get('index'), val);\n    }\n  };\n\n  onSelectChoice = (newValue, index) => {\n    const { node, value, onToolbarDone, onSelectChoice } = this.props;\n    const update = { ...node.data.toJSON(), value: newValue };\n    const change = value.change().setNodeByKey(node.key, { data: update });\n\n    const nextText = value.document.getNextText(node.key);\n\n    change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);\n\n    onToolbarDone(change, false);\n\n    onSelectChoice(index);\n  };\n\n  onRemoveChoice = (val, index) => {\n    const { node, value, onToolbarDone, onRemoveChoice } = this.props;\n\n    if (isEqual(val, node.data.get('value'))) {\n      const update = { ...node.data.toJSON(), value: null };\n      const change = value.change().setNodeByKey(node.key, { data: update });\n\n      onToolbarDone(change, false);\n    }\n\n    onRemoveChoice(index);\n  };\n\n  onKeyDown = event => {\n    if (event.key === 'Enter') {\n      this.onAddChoice();\n      // Cancelling event\n      return false;\n    }\n  };\n\n  render() {\n    const { classes, choices } = this.props;\n    const { respAreaMarkup, toolbarStyle } = this.state;\n\n    if (!toolbarStyle) {\n      return null;\n    }\n\n    return (\n      <div\n        style={{\n          ...toolbarStyle,\n          backgroundColor: '#E0E1E6'\n        }}\n      >\n        <div className={classes.itemBuilder}>\n          <EditableHtml\n            ref={ref => {\n              if (ref) {\n                this.editorRef = ref;\n              }\n            }}\n            autoFocus={true}\n            autoSave\n            className={classes.respArea}\n            toolbarOpts={{\n              position: 'top',\n              alwaysVisible: false,\n              showDone: false,\n              doneOn: 'custom'\n            }}\n            markup={respAreaMarkup}\n            onKeyDown={this.onKeyDown}\n            onChange={this.onRespAreaChange}\n            onDone={this.onDone}\n            placeholder=\"Add Choice\"\n          />\n          <i\n            style={{\n              cursor: 'pointer',\n              fontSize: '20px',\n              fontStyle: 'normal',\n              position: 'absolute',\n              top: '50%',\n              right: '15px',\n              transform: 'translate(0, -50%)'\n            }}\n            contentEditable={false}\n            onMouseDown={() => this.onAddChoice()}\n          >\n            +\n          </i>\n        </div>\n        {choices && (\n          <div className={classes.choicesHolder}>\n            {choices.map(({ label, correct }, index) => (\n              <MenuItem\n                key={index}\n                onClick={() => this.onSelectChoice(label, index)}\n                onRemoveChoice={() => this.onRemoveChoice(label, index)}\n                value={label}\n                correct={correct}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst StyledRespAreaToolbar = withStyles({\n  respArea: {\n    backgroundColor: '#fff',\n    '& [data-slate-editor=\"true\"]': {\n      minHeight: 'initial !important'\n    }\n  },\n  choicesHolder: {\n    display: 'flex',\n    flexDirection: 'column',\n    '& > div:last-child': {\n      border: 'none'\n    }\n  },\n  itemBuilder: {\n    padding: '8px',\n    position: 'relative'\n  }\n})(RespAreaToolbar);\n\nexport default StyledRespAreaToolbar;\n"],"file":"inline-dropdown-toolbar.js"}
+{"version":3,"sources":["../src/inline-dropdown-toolbar.jsx"],"names":["MenuItemComp","e","onRemoveChoice","props","preventDefault","stopPropagation","classes","correct","onClick","value","wrapper","valueHolder","__html","removeIcon","onRemoveClick","React","Component","PropTypes","object","isRequired","bool","func","string","MenuItem","background","borderBottom","boxSizing","display","cursor","lineHeight","padding","position","fontSize","fontStyle","transform","top","right","zIndex","wordBreak","createElementFromHTML","htmlString","div","document","createElement","innerHTML","trim","RespAreaToolbar","respAreaMarkup","setState","editorRef","finishEditing","val","node","onAddChoice","onlyText","textContent","data","index","newValue","nodePath","editor","onToolbarDone","onSelectChoice","update","apply","type","path","properties","newProperties","event","key","clickedInside","choices","onCheck","correctResponse","find","choice","length","slateEditorRef","rootRef","slateEditor","inputRef","element","focus","domNode","ReactEditor","toDOMNode","domNodeRect","getBoundingClientRect","closest","editorRect","left","toolbarStyle","height","width","ReactDOM","findDOMNode","spellCheck","uploadSoundSupport","state","filteredDefaultPlugins","DEFAULT_PLUGINS","filter","p","labelPlugins","audio","disabled","video","backgroundColor","onClickInside","itemBuilder","ref","respArea","alwaysVisible","showDone","doneOn","onKeyDown","onRespAreaChange","onDone","onBlur","focusInput","choicesHolder","map","label","array","StyledRespAreaToolbar","minHeight","flexDirection","border"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { ReactEditor } from 'slate-react';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\nimport isEqual from 'lodash/isEqual';\nimport isEmpty from 'lodash/isEmpty';\nimport classnames from 'classnames';\nimport { DEFAULT_PLUGINS } from '@pie-lib/editable-html';\n\nclass MenuItemComp extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correct: PropTypes.bool.isRequired,\n    onClick: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired,\n  };\n\n  onRemoveClick = (e) => {\n    const { onRemoveChoice } = this.props;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    onRemoveChoice();\n  };\n\n  render() {\n    const { classes, correct, onClick, value } = this.props;\n\n    return (\n      <div className={classnames(classes.wrapper, { [classes.correct]: correct })} onClick={onClick}>\n        <div\n          className={classes.valueHolder}\n          dangerouslySetInnerHTML={{\n            __html: value,\n          }}\n        />\n        <i className={classes.removeIcon} onClick={this.onRemoveClick}>\n          x\n        </i>\n      </div>\n    );\n  }\n}\n\nconst MenuItem = withStyles({\n  wrapper: {\n    background: '#fff',\n    borderBottom: '1px solid black',\n    boxSizing: 'border-box',\n    display: 'block',\n    cursor: 'pointer',\n    lineHeight: '30px',\n    padding: '10px 25px 10px 10px',\n    position: 'relative',\n  },\n  correct: {\n    background: '#C4DCFA',\n  },\n  removeIcon: {\n    cursor: 'pointer',\n    fontSize: '20px',\n    fontStyle: 'normal',\n    position: 'absolute',\n    transform: 'translate(0, -50%)',\n    top: '50%',\n    right: '5px',\n    zIndex: 3,\n  },\n  valueHolder: {\n    wordBreak: 'break-all',\n  },\n})(MenuItemComp);\n\nconst createElementFromHTML = (htmlString) => {\n  const div = document.createElement('div');\n\n  div.innerHTML = (htmlString || '').trim();\n\n  return div;\n};\n\nexport class RespAreaToolbar extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    node: PropTypes.object,\n    uploadSoundSupport: PropTypes.object,\n    onDone: PropTypes.func,\n    choices: PropTypes.array,\n    onAddChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n    onSelectChoice: PropTypes.func.isRequired,\n    onToolbarDone: PropTypes.func.isRequired,\n    editor: PropTypes.object.isRequired,\n    nodePath: PropTypes.array.isRequired,\n  };\n\n  state = {\n    respAreaMarkup: '',\n  };\n\n  componentDidMount() {\n    const { node, editor } = this.props;\n    const domNode = ReactEditor.toDOMNode(editor, node);\n\n    if (domNode) {\n      //eslint-disable-next-line\n      const domNodeRect = domNode.getBoundingClientRect();\n      const editor = domNode.closest('[data-slate-editor]');\n      const editorRect = editor.getBoundingClientRect();\n      const top = domNodeRect.top - editorRect.top;\n      const left = domNodeRect.left - editorRect.left;\n\n      this.setState({\n        toolbarStyle: {\n          position: 'absolute',\n          top: `${top + domNodeRect.height + 60}px`,\n          left: `${left + 25}px`,\n          width: domNodeRect.width,\n        },\n      });\n    }\n  }\n\n  componentDidUpdate() {\n    //eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  onRespAreaChange = (respAreaMarkup) => {\n    this.setState({ respAreaMarkup });\n  };\n\n  onAddChoice = () => {\n    if (this.editorRef) {\n      this.editorRef.finishEditing();\n    }\n  };\n\n  onDone = (val) => {\n    const { node, onAddChoice } = this.props;\n    const onlyText = createElementFromHTML(val).textContent.trim();\n\n    if (!isEmpty(onlyText)) {\n      onAddChoice(node.data.index, val);\n    }\n  };\n\n  onSelectChoice = (newValue, index) => {\n    const { node, nodePath, editor, onToolbarDone, onSelectChoice } = this.props;\n    const update = { ...node.data, value: newValue };\n\n    editor.apply({\n      type: 'set_node',\n      path: nodePath,\n      properties: {\n        data: node.data\n      },\n      newProperties: { data: update }\n    });\n\n    onToolbarDone(false);\n    onSelectChoice(index);\n  };\n\n  onRemoveChoice = (val, index) => {\n    const { node, nodePath, editor, onToolbarDone, onRemoveChoice } = this.props;\n\n    if (isEqual(val, node.data.value)) {\n      const update = { ...node.data, value: null };\n\n      editor.apply({\n        type: 'set_node',\n        path: nodePath,\n        properties: {\n          data: node.data\n        },\n        newProperties: { data: update }\n      });\n\n      onToolbarDone(false);\n    }\n\n    onRemoveChoice(index);\n  };\n\n  onKeyDown = (event) => {\n    if (event.key === 'Enter') {\n      this.onAddChoice();\n      // Cancelling event\n      return false;\n    }\n  };\n\n  onBlur = () => {\n    if (this.clickedInside) {\n      this.clickedInside = false;\n      return;\n    }\n\n    const { nodePath, choices, onCheck, onToolbarDone, editor } = this.props;\n    const correctResponse = (choices || []).find((choice) => choice.correct);\n\n    this.onAddChoice();\n\n    if (!choices || (choices && choices.length < 2) || !correctResponse) {\n      onCheck(() => {\n        editor.apply({\n          type: 'remove_node',\n          path: nodePath\n        });\n\n        onToolbarDone(false);\n      });\n    }\n  };\n\n  onClickInside = () => {\n    this.clickedInside = true;\n  };\n\n  focusInput = () => {\n    // we need to focus the input so that math is saved even without pressing the green checkmark\n    const slateEditorRef = this.editorRef && this.editorRef.rootRef && this.editorRef.rootRef.slateEditor;\n    const inputRef = slateEditorRef && slateEditorRef.editorRef && slateEditorRef.editorRef.element;\n\n    if (inputRef) {\n      inputRef.focus();\n    }\n  };\n\n  render() {\n    const { classes, choices, spellCheck, uploadSoundSupport } = this.props;\n    const { respAreaMarkup, toolbarStyle } = this.state;\n\n    const filteredDefaultPlugins = (DEFAULT_PLUGINS || []).filter(\n      (p) => p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list',\n    );\n    const labelPlugins = {\n      audio: { disabled: true },\n      video: { disabled: true },\n    };\n\n    if (!toolbarStyle) {\n      return null;\n    }\n\n    return (\n      <div\n        style={{\n          ...toolbarStyle,\n          backgroundColor: '#E0E1E6',\n        }}\n        onMouseDown={this.onClickInside}\n      >\n        <div className={classes.itemBuilder}>\n          <EditableHtml\n            ref={(ref) => {\n              if (ref) {\n                this.editorRef = ref;\n              }\n            }}\n            autoFocus={true}\n            autoSave\n            className={classes.respArea}\n            toolbarOpts={{\n              position: 'top',\n              alwaysVisible: false,\n              showDone: false,\n              doneOn: 'blur',\n            }}\n            markup={respAreaMarkup}\n            onKeyDown={this.onKeyDown}\n            onChange={this.onRespAreaChange}\n            onDone={this.onDone}\n            placeholder=\"Add Choice\"\n            activePlugins={filteredDefaultPlugins}\n            pluginProps={labelPlugins}\n            onBlur={this.onBlur}\n            spellCheck={spellCheck}\n            uploadSoundSupport={uploadSoundSupport}\n          />\n          <i\n            style={{\n              cursor: 'pointer',\n              fontSize: '20px',\n              fontStyle: 'normal',\n              position: 'absolute',\n              top: '50%',\n              right: '15px',\n              transform: 'translate(0, -50%)',\n            }}\n            contentEditable={false}\n            onMouseDown={() => this.focusInput()}\n            onClick={() => this.onAddChoice()}\n          >\n            +\n          </i>\n        </div>\n        {choices && (\n          <div className={classes.choicesHolder}>\n            {choices.map(({ label, correct }, index) => (\n              <MenuItem\n                key={index}\n                onClick={() => this.onSelectChoice(label, index)}\n                onRemoveChoice={() => this.onRemoveChoice(label, index)}\n                value={label}\n                correct={correct}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst StyledRespAreaToolbar = withStyles({\n  respArea: {\n    backgroundColor: '#fff',\n    '& [data-slate-editor=\"true\"]': {\n      minHeight: 'initial !important',\n    },\n  },\n  choicesHolder: {\n    display: 'flex',\n    flexDirection: 'column',\n    '& > div:last-child': {\n      border: 'none',\n    },\n  },\n  itemBuilder: {\n    padding: '8px',\n    position: 'relative',\n  },\n})(RespAreaToolbar);\n\nexport default StyledRespAreaToolbar;\n"],"file":"inline-dropdown-toolbar.js"}