@pie-element/extended-text-entry 6.5.4-next.419 → 6.5.4-next.428

package/lib/annotation/annotation-editor.js

@@ -0,0 +1,702 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _annotationUtils = require("./annotation-utils");
+
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+
+var _configUi = require("@pie-lib/config-ui");
+
+var _freeformEditor = _interopRequireDefault(require("./freeform-editor"));
+
+var _annotationMenu = _interopRequireDefault(require("./annotation-menu"));
+
+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 _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 _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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var style = {
+  textContainer: {
+    padding: '10px 16px',
+    backgroundColor: 'rgba(0, 0, 0, 0.06)',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    overflowY: 'scroll',
+    lineHeight: '36px',
+    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'
+    }
+  },
+  labelsContainer: {
+    width: '230px'
+  },
+  wrapper: {
+    position: 'relative',
+    overflowX: 'hidden',
+    display: 'flex'
+  },
+  commentContainer: {
+    paddingTop: 16,
+    marginBottom: 16,
+    marginTop: 16,
+    width: '100%'
+  },
+  annotation: {
+    position: 'relative',
+    cursor: 'pointer',
+    '&.positive': {
+      backgroundColor: 'rgb(51, 255, 51, 0.5)'
+    },
+    '&.negative': {
+      backgroundColor: 'rgba(255, 102, 204, 0.4)'
+    }
+  },
+  annotationLabel: {
+    backgroundColor: 'rgb(242, 242, 242)',
+    padding: '2px',
+    position: 'absolute',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    top: '-10px',
+    left: '-2px',
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    lineHeight: '6px',
+    '-webkit-user-select': 'none',
+    '-moz-user-select': 'none',
+    '-ms-user-select': 'none',
+    '&.positive': {
+      color: 'rgb(0, 128, 0)'
+    },
+    '&.negative': {
+      color: 'rgb(204, 0, 136)'
+    }
+  },
+  labelHover: {
+    zIndex: 20,
+    '&.positive': {
+      color: 'rgb(0, 77, 0)'
+    },
+    '&.negative': {
+      color: 'rgb(153, 0, 102)'
+    }
+  },
+  highlight: {
+    zIndex: 10
+  },
+  hover: {
+    zIndex: 20,
+    '&.positive': {
+      backgroundColor: 'rgb(51, 255, 51, 0.7)'
+    },
+    '&.negative': {
+      backgroundColor: 'rgba(255, 102, 204, 0.55)'
+    }
+  },
+  sideAnnotationHover: {
+    zIndex: 20,
+    '&.negative': {
+      backgroundColor: 'rgb(255, 179, 230) !important',
+      '&:before': {
+        borderRightColor: 'rgb(255, 179, 230) !important'
+      }
+    },
+    '&.positive': {
+      backgroundColor: 'rgb(128, 255, 128) !important',
+      '&:before': {
+        borderRightColor: 'rgb(153, 255, 153) !important'
+      }
+    }
+  },
+  sideAnnotation: {
+    position: 'absolute',
+    padding: '4px',
+    borderRadius: '4px',
+    marginLeft: '8px',
+    width: '180px',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    border: '2px solid #ffffff',
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    '&:before': {
+      position: 'absolute',
+      right: '100%',
+      top: '5px',
+      border: 'solid transparent',
+      content: '""',
+      height: 0,
+      width: 0,
+      pointerEvents: 'none',
+      borderWidth: '7px'
+    },
+    '&.negative': {
+      backgroundColor: 'rgb(255, 204, 238)',
+      '&:before': {
+        borderRightColor: 'rgb(255, 204, 238)'
+      }
+    },
+    '&.positive': {
+      backgroundColor: 'rgb(153, 255, 153)',
+      '&:before': {
+        borderRightColor: 'rgb(153, 255, 153)'
+      }
+    }
+  }
+};
+
+var AnnotationEditor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(AnnotationEditor, _React$Component);
+
+  var _super = _createSuper(AnnotationEditor);
+
+  function AnnotationEditor(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, AnnotationEditor);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "adjustAnnotationsPosition", function () {
+      if (_this.textRef && _this.labelsRef) {
+        var left = _this.textRef.offsetLeft + _this.textRef.offsetWidth + 8;
+        Array.from(_this.labelsRef.children).forEach(function (label) {
+          var spans = (0, _annotationUtils.getAnnotationElements)(label.dataset.annId);
+          var spanOffset = spans[0].offsetTop ? spans[0].offsetTop : spans[0].offsetParent.offsetTop;
+          var top = spanOffset - _this.textRef.scrollTop - 6;
+          label.style.top = "".concat(top, "px");
+          label.style.left = "".concat(left, "px");
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event) {
+      var _this$props = _this.props,
+          annotations = _this$props.annotations,
+          classes = _this$props.classes;
+      var selectionDetails = _this.state.selectionDetails;
+
+      if (selectionDetails) {
+        // new selection was made inside another annotation and should not update that annotation
+        return;
+      }
+
+      var _event$target$dataset = event.target.dataset,
+          id = _event$target$dataset.id,
+          annId = _event$target$dataset.annId;
+      var annotationId = id || annId;
+      var selectedElems = (0, _annotationUtils.getAnnotationElements)(annotationId);
+      var labelElem = (0, _annotationUtils.getLabelElement)(annotationId);
+      var annotationIndex = annotations.findIndex(function (annotation) {
+        return annotation.id === annotationId;
+      });
+      var isSideLabel = labelElem.hasAttribute('data-freeform');
+
+      if (isSideLabel) {
+        labelElem.classList.add(classes.highlight);
+      }
+
+      _this.setState({
+        anchorEl: selectedElems[0],
+        openedMenu: !!id || !!annId && !isSideLabel,
+        // true if the annotation or the label was clicked
+        openedEditor: !!annId && isSideLabel,
+        // true if the side label was clicked
+        selectedElems: selectedElems,
+        labelElem: labelElem,
+        annotationIndex: annotationIndex,
+        annotation: annotations[annotationIndex],
+        selectionDetails: null
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHover", function (event) {
+      var classes = _this.props.classes;
+      var _event$target$dataset2 = event.target.dataset,
+          id = _event$target$dataset2.id,
+          annId = _event$target$dataset2.annId;
+      var annotationId = id || annId;
+      var selectedElems = (0, _annotationUtils.getAnnotationElements)(annotationId);
+      var labelElem = (0, _annotationUtils.getLabelElement)(annotationId);
+      var isSideLabel = labelElem.hasAttribute('data-freeform');
+      selectedElems.forEach(function (elem) {
+        return elem.classList.add(classes.hover);
+      });
+      labelElem.classList.add(isSideLabel ? classes.sideAnnotationHover : classes.labelHover);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCancelHover", function (event) {
+      var classes = _this.props.classes;
+      var _event$target$dataset3 = event.target.dataset,
+          id = _event$target$dataset3.id,
+          annId = _event$target$dataset3.annId;
+      var annotationId = id || annId;
+      var selectedElems = (0, _annotationUtils.getAnnotationElements)(annotationId);
+      var labelElem = (0, _annotationUtils.getLabelElement)(annotationId);
+      var isSideLabel = labelElem.hasAttribute('data-freeform');
+      selectedElems.forEach(function (elem) {
+        return elem.classList.remove(classes.hover);
+      });
+      labelElem.classList.remove(isSideLabel ? classes.sideAnnotationHover : classes.labelHover);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function (event) {
+      var classes = _this.props.classes;
+      var _this$state = _this.state,
+          selectedElems = _this$state.selectedElems,
+          labelElem = _this$state.labelElem;
+
+      if (selectedElems.length && !selectedElems[0].hasAttribute('data-id')) {
+        (0, _annotationUtils.removeElemsWrapping)(selectedElems, _this.textRef);
+      }
+
+      if (labelElem) {
+        labelElem.classList.remove(classes.highlight);
+      }
+
+      _this.setState({
+        anchorEl: null,
+        openedMenu: false,
+        openedEditor: false,
+        selectedElems: [],
+        labelElem: null,
+        selectionDetails: null,
+        annotationIndex: null,
+        annotation: null
+      });
+
+      (0, _annotationUtils.clearSelection)();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelection", function (event) {
+      var selection = window.getSelection(); // prevent unwanted selections
+
+      if (event.detail > 2) {
+        (0, _annotationUtils.clearSelection)();
+        return;
+      }
+
+      if (selection && selection.rangeCount > 0) {
+        var selectedRange = selection.getRangeAt(0);
+        var selectedText = selectedRange.toString();
+
+        var isSelectionInside = _this.textRef.contains(selectedRange.commonAncestorContainer);
+
+        if (!selection.isCollapsed && selectedText !== '' && isSelectionInside) {
+          var selectionDetails = (0, _annotationUtils.getRangeDetails)(selectedRange, _this.textRef);
+          var selectedElems = (0, _annotationUtils.wrapRange)(selectedRange);
+
+          _this.setState({
+            anchorEl: selectedElems[0],
+            openedMenu: true,
+            selectedElems: selectedElems,
+            selectionDetails: selectionDetails
+          });
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteAnnotation", function () {
+      var _this$props2 = _this.props,
+          annotations = _this$props2.annotations,
+          onChange = _this$props2.onChange;
+      var _this$state2 = _this.state,
+          selectedElems = _this$state2.selectedElems,
+          labelElem = _this$state2.labelElem,
+          annotationIndex = _this$state2.annotationIndex,
+          annotation = _this$state2.annotation;
+      var parentRef = (0, _annotationUtils.isSideLabel)(annotation.label) ? _this.labelsRef : selectedElems[0];
+      parentRef.removeChild(labelElem);
+      (0, _annotationUtils.removeElemsWrapping)(selectedElems, _this.textRef);
+      annotations.splice(annotationIndex, 1);
+      onChange(annotations);
+
+      _this.handleClose();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createDOMAnnotation", function (elems, annotation) {
+      var _this$props3 = _this.props,
+          classes = _this$props3.classes,
+          disabled = _this$props3.disabled;
+      var id = annotation.id,
+          label = annotation.label,
+          type = annotation.type;
+      (elems || []).forEach(function (elem) {
+        elem.dataset.id = id;
+        elem.className = (0, _classnames["default"])(classes.annotation, type);
+        elem.onclick = !disabled && _this.handleClick;
+        elem.onmouseover = _this.handleHover;
+        elem.onmouseout = _this.handleCancelHover;
+      });
+      var firstSpan = elems && elems[0] || {};
+      var labelElem = document.createElement('SPAN');
+      labelElem.dataset.annId = id;
+      labelElem.innerHTML = label;
+      labelElem.onclick = !disabled && _this.handleClick;
+      labelElem.onmouseover = _this.handleHover;
+      labelElem.onmouseout = _this.handleCancelHover;
+
+      if ((0, _annotationUtils.isSideLabel)(label)) {
+        var spanOffset = firstSpan.offsetTop ? firstSpan.offsetTop : firstSpan.offsetParent.offsetTop;
+        var top = spanOffset - _this.textRef.scrollTop;
+        var left = _this.textRef.offsetLeft + _this.textRef.offsetWidth + 8;
+        labelElem.dataset.freeform = true;
+        labelElem.className = (0, _classnames["default"])(classes.sideAnnotation, type);
+        labelElem.style.top = "".concat(top, "px");
+        labelElem.style.left = "".concat(left, "px");
+
+        _this.labelsRef.appendChild(labelElem);
+      } else {
+        labelElem.className = (0, _classnames["default"])(classes.annotationLabel, type);
+        firstSpan.insertBefore(labelElem, firstSpan.firstChild);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createNewAnnotation", function (label, type) {
+      var _this$state3 = _this.state,
+          selectedElems = _this$state3.selectedElems,
+          selectionDetails = _this$state3.selectionDetails;
+
+      var annotation = _objectSpread({
+        id: [selectionDetails.start, selectionDetails.end, new Date().getTime()].join('-'),
+        label: label,
+        type: type
+      }, selectionDetails);
+
+      _this.createDOMAnnotation(selectedElems, annotation);
+
+      return annotation;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMenuClick", function (newAnnotation) {
+      var _this$props4 = _this.props,
+          annotations = _this$props4.annotations,
+          onChange = _this$props4.onChange;
+      var _this$state4 = _this.state,
+          annotation = _this$state4.annotation,
+          annotationIndex = _this$state4.annotationIndex;
+      var type = newAnnotation.type,
+          label = newAnnotation.text;
+
+      if (annotation) {
+        var updatedAnnotation = _objectSpread(_objectSpread({}, annotation), {}, {
+          label: label,
+          type: type
+        });
+
+        var oldType = annotation.type,
+            oldLabel = annotation.label;
+
+        _this.updateLabel(oldLabel, updatedAnnotation, type !== oldType && oldType);
+
+        annotations.splice(annotationIndex, 1, updatedAnnotation);
+      } else {
+        var _newAnnotation = _this.createNewAnnotation(label, type);
+
+        annotations.push(_newAnnotation);
+      }
+
+      onChange(annotations);
+
+      _this.handleClose();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "editAnnotation", function () {
+      _this.setState({
+        openedMenu: false,
+        openedEditor: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addAnnotation", function (type) {
+      var _this$props5 = _this.props,
+          annotations = _this$props5.annotations,
+          onChange = _this$props5.onChange;
+
+      var annotation = _this.createNewAnnotation('', type);
+
+      var labelElem = (0, _annotationUtils.getLabelElement)(annotation.id);
+      annotations.push(annotation);
+
+      _this.setState({
+        openedMenu: false,
+        openedEditor: true,
+        annotationIndex: annotations.length - 1,
+        annotation: annotation,
+        labelElem: labelElem
+      });
+
+      onChange(annotations);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateLabel", function (oldLabel, annotation, oldType) {
+      var _this$state5 = _this.state,
+          selectedElems = _this$state5.selectedElems,
+          labelElem = _this$state5.labelElem;
+      var label = annotation.label,
+          type = annotation.type;
+
+      if ((0, _annotationUtils.isSideLabel)(label) && (0, _annotationUtils.isSideLabel)(oldLabel) || !(0, _annotationUtils.isSideLabel)(label) && !(0, _annotationUtils.isSideLabel)(oldLabel)) {
+        labelElem.innerHTML = label;
+
+        if (oldType) {
+          labelElem.classList.remove(oldType);
+          labelElem.classList.add(type);
+          selectedElems.forEach(function (elem) {
+            elem.classList.remove(oldType);
+            elem.classList.add(type);
+          });
+        }
+      } else if ((0, _annotationUtils.isSideLabel)(label) && !(0, _annotationUtils.isSideLabel)(oldLabel)) {
+        selectedElems[0].removeChild(labelElem);
+
+        _this.createDOMAnnotation(selectedElems, annotation);
+      } else if (!(0, _annotationUtils.isSideLabel)(label) && (0, _annotationUtils.isSideLabel)(oldLabel)) {
+        _this.labelsRef.removeChild(labelElem);
+
+        _this.createDOMAnnotation(selectedElems, annotation);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeAnnotationType", function (newLabel) {
+      var _this$props6 = _this.props,
+          annotations = _this$props6.annotations,
+          onChange = _this$props6.onChange;
+      var _this$state6 = _this.state,
+          annotationIndex = _this$state6.annotationIndex,
+          selectedElems = _this$state6.selectedElems;
+      var _annotations$annotati = annotations[annotationIndex],
+          oldType = _annotations$annotati.type,
+          oldLabel = _annotations$annotati.label;
+      var type = oldType === 'positive' ? 'negative' : 'positive';
+
+      var updatedAnnotation = _objectSpread(_objectSpread({}, annotations[annotationIndex]), {}, {
+        type: type,
+        label: newLabel
+      });
+
+      selectedElems.forEach(function (span) {
+        span.classList.remove(oldType);
+        span.classList.add(type);
+      });
+
+      _this.updateLabel(oldLabel, updatedAnnotation, oldType);
+
+      annotations.splice(annotationIndex, 1, updatedAnnotation);
+      onChange(annotations);
+
+      _this.handleClose();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateAnnotation", function (oldLabel, newLabel) {
+      var _this$props7 = _this.props,
+          annotations = _this$props7.annotations,
+          onChange = _this$props7.onChange;
+      var annotationIndex = _this.state.annotationIndex;
+
+      var updatedAnnotation = _objectSpread(_objectSpread({}, annotations[annotationIndex]), {}, {
+        label: newLabel
+      });
+
+      _this.updateLabel(oldLabel, updatedAnnotation);
+
+      annotations.splice(annotationIndex, 1, updatedAnnotation);
+      onChange(annotations);
+    });
+    _this.state = {
+      anchorEl: null,
+      openedMenu: false,
+      openedEditor: false,
+      selectedElems: [],
+      labelElem: null,
+      selectionDetails: null,
+      annotation: null,
+      annotationIndex: null
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(AnnotationEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var _this$props8 = this.props,
+          annotations = _this$props8.annotations,
+          text = _this$props8.text;
+
+      if (text) {
+        annotations.forEach(function (annotation) {
+          var _getDOMNodes = (0, _annotationUtils.getDOMNodes)(annotation.start, annotation.end, _this2.textRef),
+              _getDOMNodes2 = (0, _slicedToArray2["default"])(_getDOMNodes, 2),
+              domStart = _getDOMNodes2[0],
+              domEnd = _getDOMNodes2[1];
+
+          if (domStart && domEnd) {
+            var range = document.createRange();
+            range.setStart(domStart.node, domStart.offset);
+            range.setEnd(domEnd.node, domEnd.offset);
+            var spans = (0, _annotationUtils.wrapRange)(range);
+
+            _this2.createDOMAnnotation(spans, annotation);
+          }
+        });
+      }
+
+      if (this.textRef) {
+        this.adjustAnnotationsPosition();
+        this.textRef.addEventListener('scroll', this.adjustAnnotationsPosition);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.textRef.removeEventListener('scroll', this.adjustAnnotationsPosition);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props9 = this.props,
+          classes = _this$props9.classes,
+          comment = _this$props9.comment,
+          customKeys = _this$props9.customKeys,
+          disabled = _this$props9.disabled,
+          disabledMath = _this$props9.disabledMath,
+          keypadMode = _this$props9.keypadMode,
+          height = _this$props9.height,
+          width = _this$props9.width,
+          maxHeight = _this$props9.maxHeight,
+          onCommentChange = _this$props9.onCommentChange,
+          predefinedAnnotations = _this$props9.predefinedAnnotations,
+          text = _this$props9.text;
+      var _this$state7 = this.state,
+          anchorEl = _this$state7.anchorEl,
+          annotation = _this$state7.annotation,
+          openedMenu = _this$state7.openedMenu,
+          openedEditor = _this$state7.openedEditor,
+          selectionDetails = _this$state7.selectionDetails;
+      var anchorOffset = anchorEl && (anchorEl.offsetTop ? anchorEl.offsetTop : anchorEl.offsetParent.offsetTop);
+      var topOffset = this.textRef && anchorOffset ? anchorOffset - this.textRef.scrollTop - 8 : 0;
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.wrapper
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.textContainer,
+        style: {
+          width: width - 34,
+          minHeight: height,
+          maxHeight: maxHeight
+        },
+        ref: function ref(r) {
+          return _this3.textRef = r;
+        },
+        onMouseDown: !disabled ? _annotationUtils.clearSelection : function () {},
+        onMouseUp: !disabled ? this.handleSelection : function () {},
+        dangerouslySetInnerHTML: {
+          __html: text
+        }
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.labelsContainer,
+        ref: function ref(r) {
+          return _this3.labelsRef = r;
+        }
+      })), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: 'Comment',
+        className: classes.commentContainer
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        className: classes.prompt,
+        markup: comment || '',
+        onChange: onCommentChange,
+        width: width && width.toString(),
+        disabled: disabled,
+        pluginProps: {
+          math: {
+            disabled: disabledMath,
+            customKeys: customKeys,
+            keypadMode: keypadMode,
+            controlledKeypadMode: false
+          },
+          video: {
+            disabled: true
+          },
+          audio: {
+            disabled: true
+          }
+        }
+      })), /*#__PURE__*/_react["default"].createElement(_annotationMenu["default"], {
+        anchorEl: anchorEl,
+        open: openedMenu && !disabled,
+        annotations: predefinedAnnotations,
+        isNewAnnotation: !!selectionDetails,
+        onClose: this.handleClose,
+        onDelete: this.deleteAnnotation,
+        onEdit: this.editAnnotation,
+        onWrite: this.addAnnotation,
+        onAnnotate: this.handleMenuClick
+      }), /*#__PURE__*/_react["default"].createElement(_freeformEditor["default"], {
+        anchorEl: this.textRef,
+        open: openedEditor && !disabled,
+        offset: topOffset,
+        value: annotation && annotation.label || '',
+        type: annotation && annotation.type,
+        onClose: this.handleClose,
+        onDelete: this.deleteAnnotation,
+        onSave: this.updateAnnotation,
+        onTypeChange: this.changeAnnotationType
+      }));
+    }
+  }]);
+  return AnnotationEditor;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(AnnotationEditor, "propTypes", {
+  text: _propTypes["default"].string,
+  comment: _propTypes["default"].string,
+  annotations: _propTypes["default"].array,
+  predefinedAnnotations: _propTypes["default"].array,
+  onChange: _propTypes["default"].func.isRequired,
+  onCommentChange: _propTypes["default"].func.isRequired,
+  width: _propTypes["default"].number,
+  height: _propTypes["default"].number,
+  maxHeight: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  disabledMath: _propTypes["default"].bool,
+  customKeys: _propTypes["default"].array,
+  keypadMode: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired
+});
+;
+
+var _default = (0, _styles.withStyles)(style)(AnnotationEditor);
+
+exports["default"] = _default;
+//# sourceMappingURL=annotation-editor.js.map