@pie-element/extended-text-entry 13.4.1-next.0 → 14.0.0-beta.0

package/lib/annotation/annotation-editor.js

@@ -1,300 +1,211 @@
 "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"));
-
+exports.default = void 0;
 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 _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _annotationUtils = require("./annotation-utils");
-
 var _freeformEditor = _interopRequireDefault(require("./freeform-editor"));
-
 var _annotationMenu = _interopRequireDefault(require("./annotation-menu"));
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 var _configUi = require("@pie-lib/config-ui");
-
-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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var style = function style(theme) {
-  return {
-    textContainer: {
-      padding: '10px 120px 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: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2,
-      marginTop: theme.spacing.unit * 2,
-      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: theme.typography.fontSize - 2,
-      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: theme.spacing.unit / 2,
-      borderRadius: '4px',
-      marginLeft: theme.spacing.unit,
-      width: '180px',
-      whiteSpace: 'pre-wrap',
-      wordBreak: 'break-word',
-      border: "2px solid ".concat(theme.palette.common.white),
-      fontSize: theme.typography.fontSize,
-      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");
+const TextContainer = (0, _styles.styled)('div')({
+  padding: '10px 120px 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'
+  }
+});
+const LabelsContainer = (0, _styles.styled)('div')({
+  width: '230px'
+});
+const Wrapper = (0, _styles.styled)('div')({
+  position: 'relative',
+  overflowX: 'hidden',
+  display: 'flex'
+});
+const CommentContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  width: '100%'
+}));
+
+// Global styles for pseudo-elements that can't be applied inline
+const globalStyles = `
+  .sideAnnotation:before {
+    position: absolute;
+    right: var(--before-right, 100%);
+    top: var(--before-top, 5px);
+    border: solid transparent;
+    content: "";
+    height: 0;
+    width: 0;
+    pointer-events: none;
+    border-width: var(--before-border-width, 7px);
+    border-right-color: var(--before-border-color, rgb(153, 255, 153));
+  }
+`;
+
+// Inject styles if not already injected
+if (!document.getElementById('annotation-editor-styles')) {
+  const styleElement = document.createElement('style');
+  styleElement.id = 'annotation-editor-styles';
+  styleElement.textContent = globalStyles;
+  document.head.appendChild(styleElement);
+}
+class AnnotationEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "adjustAnnotationsPosition", () => {
+      if (this.textRef && this.labelsRef) {
+        const left = this.textRef.offsetLeft + this.textRef.offsetWidth + 8;
+        Array.from(this.labelsRef.children).forEach(label => {
+          const spans = (0, _annotationUtils.getAnnotationElements)(label.dataset.annId);
+          const spanOffset = spans[0].offsetTop ? spans[0].offsetTop : spans[0].offsetParent.offsetTop;
+          const top = spanOffset - this.textRef.scrollTop - 6;
+          label.style.top = `${top}px`;
+          label.style.left = `${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;
-
+    (0, _defineProperty2.default)(this, "handleClick", event => {
+      const {
+        annotations
+      } = this.props;
+      const {
+        selectionDetails
+      } = this.state;
       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');
-
+      const {
+        id,
+        annId
+      } = event.target.dataset;
+      const annotationId = id || annId;
+      const selectedElems = (0, _annotationUtils.getAnnotationElements)(annotationId);
+      const labelElem = (0, _annotationUtils.getLabelElement)(annotationId);
+      const annotationIndex = annotations.findIndex(annotation => annotation.id === annotationId);
+      const isSideLabel = labelElem.hasAttribute('data-freeform');
       if (isSideLabel) {
-        labelElem.classList.add(classes.highlight);
+        labelElem.style.zIndex = '10';
       }
-
-      _this.setState({
+      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,
+        selectedElems,
+        labelElem,
+        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);
+    (0, _defineProperty2.default)(this, "handleHover", event => {
+      const {
+        id,
+        annId
+      } = event.target.dataset;
+      const annotationId = id || annId;
+      const selectedElems = (0, _annotationUtils.getAnnotationElements)(annotationId);
+      const labelElem = (0, _annotationUtils.getLabelElement)(annotationId);
+      const isSideLabel = labelElem.hasAttribute('data-freeform');
+      selectedElems.forEach(elem => {
+        elem.style.zIndex = '20';
+        if (elem.classList.contains('positive')) {
+          elem.style.backgroundColor = 'rgb(51, 255, 51, 0.7)';
+        } else if (elem.classList.contains('negative')) {
+          elem.style.backgroundColor = 'rgba(255, 102, 204, 0.55)';
+        }
       });
-      labelElem.classList.add(isSideLabel ? classes.sideAnnotationHover : classes.labelHover);
+      if (isSideLabel) {
+        labelElem.style.zIndex = '20';
+        if (labelElem.classList.contains('positive')) {
+          labelElem.style.backgroundColor = 'rgb(128, 255, 128)';
+          labelElem.style.setProperty('--before-border-color', 'rgb(153, 255, 153)');
+        } else if (labelElem.classList.contains('negative')) {
+          labelElem.style.backgroundColor = 'rgb(255, 179, 230)';
+          labelElem.style.setProperty('--before-border-color', 'rgb(255, 179, 230)');
+        }
+      } else {
+        labelElem.style.zIndex = '20';
+        if (labelElem.classList.contains('positive')) {
+          labelElem.style.color = 'rgb(0, 77, 0)';
+        } else if (labelElem.classList.contains('negative')) {
+          labelElem.style.color = 'rgb(153, 0, 102)';
+        }
+      }
     });
-    (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);
+    (0, _defineProperty2.default)(this, "handleCancelHover", event => {
+      const {
+        id,
+        annId
+      } = event.target.dataset;
+      const annotationId = id || annId;
+      const selectedElems = (0, _annotationUtils.getAnnotationElements)(annotationId);
+      const labelElem = (0, _annotationUtils.getLabelElement)(annotationId);
+      const isSideLabel = labelElem.hasAttribute('data-freeform');
+      selectedElems.forEach(elem => {
+        elem.style.zIndex = '';
+        if (elem.classList.contains('positive')) {
+          elem.style.backgroundColor = 'rgb(51, 255, 51, 0.5)';
+        } else if (elem.classList.contains('negative')) {
+          elem.style.backgroundColor = 'rgba(255, 102, 204, 0.4)';
+        }
       });
-      labelElem.classList.remove(isSideLabel ? classes.sideAnnotationHover : classes.labelHover);
+      if (isSideLabel) {
+        labelElem.style.zIndex = '';
+        if (labelElem.classList.contains('positive')) {
+          labelElem.style.backgroundColor = 'rgb(153, 255, 153)';
+          labelElem.style.removeProperty('--before-border-color');
+        } else if (labelElem.classList.contains('negative')) {
+          labelElem.style.backgroundColor = 'rgb(255, 204, 238)';
+          labelElem.style.removeProperty('--before-border-color');
+        }
+      } else {
+        labelElem.style.zIndex = '';
+        if (labelElem.classList.contains('positive')) {
+          labelElem.style.color = 'rgb(0, 128, 0)';
+        } else if (labelElem.classList.contains('negative')) {
+          labelElem.style.color = 'rgb(204, 0, 136)';
+        }
+      }
     });
-    (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;
-
+    (0, _defineProperty2.default)(this, "handleClose", event => {
+      const {
+        selectedElems,
+        labelElem
+      } = this.state;
       if (selectedElems.length && !selectedElems[0].hasAttribute('data-id')) {
-        (0, _annotationUtils.removeElemsWrapping)(selectedElems, _this.textRef);
+        (0, _annotationUtils.removeElemsWrapping)(selectedElems, this.textRef);
       }
-
       if (labelElem) {
-        labelElem.classList.remove(classes.highlight);
+        labelElem.style.zIndex = '';
       }
-
-      _this.setState({
+      this.setState({
         anchorEl: null,
         openedMenu: false,
         openedEditor: false,
@@ -304,236 +215,285 @@ var AnnotationEditor = /*#__PURE__*/function (_React$Component) {
         annotationIndex: null,
         annotation: null
       });
-
       (0, _annotationUtils.clearSelection)();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelection", function (event) {
-      var selection = window.getSelection(); // prevent unwanted selections
+    (0, _defineProperty2.default)(this, "handleSelection", event => {
+      const 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);
-
+        const selectedRange = selection.getRangeAt(0);
+        const selectedText = selectedRange.toString();
+        const 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({
+          const selectionDetails = (0, _annotationUtils.getRangeDetails)(selectedRange, this.textRef);
+          const selectedElems = (0, _annotationUtils.wrapRange)(selectedRange);
+          this.setState({
             anchorEl: selectedElems[0],
             openedMenu: true,
-            selectedElems: selectedElems,
-            selectionDetails: selectionDetails
+            selectedElems,
+            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];
+    (0, _defineProperty2.default)(this, "deleteAnnotation", () => {
+      const {
+        annotations,
+        onChange
+      } = this.props;
+      const {
+        selectedElems,
+        labelElem,
+        annotationIndex,
+        annotation
+      } = this.state;
+      const parentRef = (0, _annotationUtils.isSideLabel)(annotation.label) ? this.labelsRef : selectedElems[0];
       parentRef.removeChild(labelElem);
-      (0, _annotationUtils.removeElemsWrapping)(selectedElems, _this.textRef);
+      (0, _annotationUtils.removeElemsWrapping)(selectedElems, this.textRef);
       annotations.splice(annotationIndex, 1);
       onChange(annotations);
-
-      _this.handleClose();
+      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) {
+    (0, _defineProperty2.default)(this, "createDOMAnnotation", (elems, annotation) => {
+      const {
+        disabled
+      } = this.props;
+      const {
+        id,
+        label,
+        type
+      } = annotation;
+      (elems || []).forEach(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;
+        elem.className = `annotation ${type}`;
+        // Apply annotation styles directly
+        elem.style.position = 'relative';
+        elem.style.cursor = 'pointer';
+        if (type === 'positive') {
+          elem.style.backgroundColor = 'rgb(51, 255, 51, 0.5)';
+        } else if (type === 'negative') {
+          elem.style.backgroundColor = 'rgba(255, 102, 204, 0.4)';
+        }
+        elem.onclick = !disabled && this.handleClick;
+        elem.onmouseover = this.handleHover;
+        elem.onmouseout = this.handleCancelHover;
       });
-      var firstSpan = elems && elems[0] || {};
-      var labelElem = document.createElement('SPAN');
+      const firstSpan = elems && elems[0] || {};
+      const labelElem = document.createElement('SPAN');
       labelElem.dataset.annId = id;
       labelElem.innerHTML = label;
-      labelElem.onclick = !disabled && _this.handleClick;
-      labelElem.onmouseover = _this.handleHover;
-      labelElem.onmouseout = _this.handleCancelHover;
-
+      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;
+        const spanOffset = firstSpan.offsetTop ? firstSpan.offsetTop : firstSpan.offsetParent.offsetTop;
+        const top = spanOffset - this.textRef.scrollTop;
+        const 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");
+        labelElem.className = `sideAnnotation ${type}`;
+
+        // Apply side annotation styles directly
+        labelElem.style.position = 'absolute';
+        labelElem.style.padding = '4px';
+        labelElem.style.borderRadius = '4px';
+        labelElem.style.marginLeft = '8px';
+        labelElem.style.width = '180px';
+        labelElem.style.whiteSpace = 'pre-wrap';
+        labelElem.style.wordBreak = 'break-word';
+        labelElem.style.border = '2px solid #ffffff';
+        labelElem.style.fontSize = '14px';
+        labelElem.style.fontStyle = 'normal';
+        labelElem.style.fontWeight = 'normal';
+        labelElem.style.top = `${top}px`;
+        labelElem.style.left = `${left}px`;
+        if (type === 'negative') {
+          labelElem.style.backgroundColor = 'rgb(255, 204, 238)';
+        } else if (type === 'positive') {
+          labelElem.style.backgroundColor = 'rgb(153, 255, 153)';
+        }
 
-        _this.labelsRef.appendChild(labelElem);
+        // Add pseudo-element styles via CSS
+        labelElem.style.setProperty('--before-border-width', '7px');
+        labelElem.style.setProperty('--before-top', '5px');
+        labelElem.style.setProperty('--before-right', '100%');
+        if (type === 'negative') {
+          labelElem.style.setProperty('--before-border-color', 'rgb(255, 204, 238)');
+        } else if (type === 'positive') {
+          labelElem.style.setProperty('--before-border-color', 'rgb(153, 255, 153)');
+        }
+        this.labelsRef.appendChild(labelElem);
       } else {
-        labelElem.className = (0, _classnames["default"])(classes.annotationLabel, type);
+        labelElem.className = `annotationLabel ${type}`;
+
+        // Apply annotation label styles directly
+        labelElem.style.backgroundColor = 'rgb(242, 242, 242)';
+        labelElem.style.padding = '2px';
+        labelElem.style.position = 'absolute';
+        labelElem.style.userSelect = 'none';
+        labelElem.style.whiteSpace = 'nowrap';
+        labelElem.style.top = '-10px';
+        labelElem.style.left = '-2px';
+        labelElem.style.fontSize = '12px';
+        labelElem.style.fontStyle = 'normal';
+        labelElem.style.fontWeight = 'normal';
+        labelElem.style.lineHeight = '6px';
+        labelElem.style.webkitUserSelect = 'none';
+        labelElem.style.mozUserSelect = 'none';
+        labelElem.style.msUserSelect = 'none';
+        if (type === 'positive') {
+          labelElem.style.color = 'rgb(0, 128, 0)';
+        } else if (type === 'negative') {
+          labelElem.style.color = 'rgb(204, 0, 136)';
+        }
         firstSpan.appendChild(labelElem);
       }
     });
-    (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({
+    (0, _defineProperty2.default)(this, "createNewAnnotation", (label, type) => {
+      const {
+        selectedElems,
+        selectionDetails
+      } = this.state;
+      const annotation = {
         id: [selectionDetails.start, selectionDetails.end, new Date().getTime()].join('-'),
-        label: label,
-        type: type
-      }, selectionDetails);
-
-      _this.createDOMAnnotation(selectedElems, annotation);
-
+        label,
+        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;
-
+    (0, _defineProperty2.default)(this, "handleMenuClick", newAnnotation => {
+      const {
+        annotations,
+        onChange
+      } = this.props;
+      const {
+        annotation,
+        annotationIndex
+      } = this.state;
+      const {
+        type,
+        text: label
+      } = newAnnotation;
       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);
-
+        const updatedAnnotation = {
+          ...annotation,
+          label,
+          type
+        };
+        const {
+          type: oldType,
+          label: oldLabel
+        } = annotation;
+        this.updateLabel(oldLabel, updatedAnnotation, type !== oldType && oldType);
         annotations.splice(annotationIndex, 1, updatedAnnotation);
       } else {
-        var _newAnnotation = _this.createNewAnnotation(label, type);
-
-        annotations.push(_newAnnotation);
+        const newAnnotation = this.createNewAnnotation(label, type);
+        annotations.push(newAnnotation);
       }
-
       onChange(annotations);
-
-      _this.handleClose();
+      this.handleClose();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "editAnnotation", function () {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "editAnnotation", () => {
+      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);
+    (0, _defineProperty2.default)(this, "addAnnotation", type => {
+      const {
+        annotations,
+        onChange
+      } = this.props;
+      const annotation = this.createNewAnnotation('', type);
+      const labelElem = (0, _annotationUtils.getLabelElement)(annotation.id);
       annotations.push(annotation);
-
-      _this.setState({
+      this.setState({
         openedMenu: false,
         openedEditor: true,
         annotationIndex: annotations.length - 1,
-        annotation: annotation,
-        labelElem: labelElem
+        annotation,
+        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;
-
+    (0, _defineProperty2.default)(this, "updateLabel", (oldLabel, annotation, oldType) => {
+      const {
+        selectedElems,
+        labelElem
+      } = this.state;
+      const {
+        label,
+        type
+      } = annotation;
       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) {
+          selectedElems.forEach(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);
+        this.createDOMAnnotation(selectedElems, annotation);
       } else if (!(0, _annotationUtils.isSideLabel)(label) && (0, _annotationUtils.isSideLabel)(oldLabel)) {
-        _this.labelsRef.removeChild(labelElem);
-
-        _this.createDOMAnnotation(selectedElems, annotation);
+        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,
+    (0, _defineProperty2.default)(this, "changeAnnotationType", newLabel => {
+      const {
+        annotations,
+        onChange
+      } = this.props;
+      const {
+        annotationIndex,
+        selectedElems
+      } = this.state;
+      const {
+        type: oldType,
+        label: oldLabel
+      } = annotations[annotationIndex];
+      const type = oldType === 'positive' ? 'negative' : 'positive';
+      const updatedAnnotation = {
+        ...annotations[annotationIndex],
+        type,
         label: newLabel
-      });
-
-      selectedElems.forEach(function (span) {
+      };
+      selectedElems.forEach(span => {
         span.classList.remove(oldType);
         span.classList.add(type);
       });
-
-      _this.updateLabel(oldLabel, updatedAnnotation, oldType);
-
+      this.updateLabel(oldLabel, updatedAnnotation, oldType);
       annotations.splice(annotationIndex, 1, updatedAnnotation);
       onChange(annotations);
-
-      _this.handleClose();
+      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]), {}, {
+    (0, _defineProperty2.default)(this, "updateAnnotation", (oldLabel, newLabel) => {
+      const {
+        annotations,
+        onChange
+      } = this.props;
+      const {
+        annotationIndex
+      } = this.state;
+      const updatedAnnotation = {
+        ...annotations[annotationIndex],
         label: newLabel
-      });
-
-      _this.updateLabel(oldLabel, updatedAnnotation);
-
+      };
+      this.updateLabel(oldLabel, updatedAnnotation);
       annotations.splice(annotationIndex, 1, updatedAnnotation);
       onChange(annotations);
     });
-    _this.state = {
+    this.state = {
       anchorEl: null,
       openedMenu: false,
       openedEditor: false,
@@ -543,164 +503,131 @@ var AnnotationEditor = /*#__PURE__*/function (_React$Component) {
       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);
-      }
+  componentDidMount() {
+    const {
+      annotations,
+      text
+    } = this.props;
+    if (text) {
+      annotations.forEach(annotation => {
+        const [domStart, domEnd] = (0, _annotationUtils.getDOMNodes)(annotation.start, annotation.end, this.textRef);
+        if (domStart && domEnd) {
+          const range = document.createRange();
+          range.setStart(domStart.node, domStart.offset);
+          range.setEnd(domEnd.node, domEnd.offset);
+          const spans = (0, _annotationUtils.wrapRange)(range);
+          this.createDOMAnnotation(spans, annotation);
+        }
+      });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.textRef.removeEventListener('scroll', this.adjustAnnotationsPosition);
+    if (this.textRef) {
+      this.adjustAnnotationsPosition();
+      this.textRef.addEventListener('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
+  }
+  componentWillUnmount() {
+    this.textRef.removeEventListener('scroll', this.adjustAnnotationsPosition);
+  }
+  render() {
+    const {
+      comment,
+      customKeys,
+      disabled,
+      disabledMath,
+      keypadMode,
+      height,
+      width,
+      maxHeight,
+      onCommentChange,
+      predefinedAnnotations,
+      text
+    } = this.props;
+    const {
+      anchorEl,
+      annotation,
+      openedMenu,
+      openedEditor,
+      selectionDetails
+    } = this.state;
+    const anchorOffset = anchorEl && (anchorEl.offsetTop ? anchorEl.offsetTop : anchorEl.offsetParent.offsetTop);
+    const topOffset = this.textRef && anchorOffset ? anchorOffset - this.textRef.scrollTop - 8 : 0;
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(TextContainer, {
+      style: {
+        width: width - 34,
+        minHeight: height,
+        maxHeight: maxHeight
+      },
+      ref: r => this.textRef = r,
+      onMouseDown: !disabled ? _annotationUtils.clearSelection : () => {},
+      onMouseUp: !disabled ? this.handleSelection : () => {},
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    }), /*#__PURE__*/_react.default.createElement(LabelsContainer, {
+      ref: r => this.labelsRef = r
+    })), /*#__PURE__*/_react.default.createElement(CommentContainer, {
+      label: 'Comment'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      className: "prompt",
+      markup: comment || '',
+      onChange: onCommentChange,
+      width: width && (width + 104).toString(),
+      disabled: disabled,
+      pluginProps: {
+        math: {
+          disabled: disabledMath,
+          customKeys: customKeys,
+          keypadMode: keypadMode,
+          controlledKeypadMode: false
         },
-        ref: function ref(r) {
-          return _this3.textRef = r;
+        video: {
+          disabled: true
         },
-        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 + 104).toString(),
-        disabled: disabled,
-        pluginProps: {
-          math: {
-            disabled: disabledMath,
-            customKeys: customKeys,
-            keypadMode: keypadMode,
-            controlledKeypadMode: false
-          },
-          video: {
-            disabled: true
-          },
-          audio: {
-            disabled: true
-          },
-          textAlign: {
-            disabled: true
-          }
+        audio: {
+          disabled: true
+        },
+        textAlign: {
+          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
+      }
+    })), /*#__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
+    }));
+  }
+}
+(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
 });
-
-var _default = (0, _styles.withStyles)(style)(AnnotationEditor);
-
-exports["default"] = _default;
+var _default = exports.default = AnnotationEditor;
 //# sourceMappingURL=annotation-editor.js.map