@pie-element/extended-text-entry 15.1.1 → 15.1.2-next.1

package/lib/annotation/annotation-editor.js

@@ -1,636 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-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 _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
-var _configUi = require("@pie-lib/config-ui");
-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)(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;
-      }
-      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.style.zIndex = '10';
-      }
-      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,
-        labelElem,
-        annotationIndex,
-        annotation: annotations[annotationIndex],
-        selectionDetails: null
-      });
-    });
-    (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)';
-        }
-      });
-      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)(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)';
-        }
-      });
-      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)(this, "handleClose", event => {
-      const {
-        selectedElems,
-        labelElem
-      } = this.state;
-      if (selectedElems.length && !selectedElems[0].hasAttribute('data-id')) {
-        (0, _annotationUtils.removeElemsWrapping)(selectedElems, this.textRef);
-      }
-      if (labelElem) {
-        labelElem.style.zIndex = '';
-      }
-      this.setState({
-        anchorEl: null,
-        openedMenu: false,
-        openedEditor: false,
-        selectedElems: [],
-        labelElem: null,
-        selectionDetails: null,
-        annotationIndex: null,
-        annotation: null
-      });
-      (0, _annotationUtils.clearSelection)();
-    });
-    (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) {
-        const selectedRange = selection.getRangeAt(0);
-        const selectedText = selectedRange.toString();
-        const isSelectionInside = this.textRef.contains(selectedRange.commonAncestorContainer);
-        if (!selection.isCollapsed && selectedText !== '' && isSelectionInside) {
-          const selectionDetails = (0, _annotationUtils.getRangeDetails)(selectedRange, this.textRef);
-          const selectedElems = (0, _annotationUtils.wrapRange)(selectedRange);
-          this.setState({
-            anchorEl: selectedElems[0],
-            openedMenu: true,
-            selectedElems,
-            selectionDetails
-          });
-        }
-      }
-    });
-    (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);
-      annotations.splice(annotationIndex, 1);
-      onChange(annotations);
-      this.handleClose();
-    });
-    (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 = `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;
-      });
-      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;
-      if ((0, _annotationUtils.isSideLabel)(label)) {
-        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 = `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)';
-        }
-
-        // 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 = `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)(this, "createNewAnnotation", (label, type) => {
-      const {
-        selectedElems,
-        selectionDetails
-      } = this.state;
-      const annotation = {
-        id: [selectionDetails.start, selectionDetails.end, new Date().getTime()].join('-'),
-        label,
-        type,
-        ...selectionDetails
-      };
-      this.createDOMAnnotation(selectedElems, annotation);
-      return annotation;
-    });
-    (0, _defineProperty2.default)(this, "handleMenuClick", newAnnotation => {
-      const {
-        annotations,
-        onChange
-      } = this.props;
-      const {
-        annotation,
-        annotationIndex
-      } = this.state;
-      const {
-        type,
-        text: label
-      } = newAnnotation;
-      if (annotation) {
-        const updatedAnnotation = {
-          ...annotation,
-          label,
-          type
-        };
-        const {
-          type: oldType,
-          label: oldLabel
-        } = annotation;
-        this.updateLabel(oldLabel, updatedAnnotation, type !== oldType && oldType);
-        annotations.splice(annotationIndex, 1, updatedAnnotation);
-      } else {
-        const newAnnotation = this.createNewAnnotation(label, type);
-        annotations.push(newAnnotation);
-      }
-      onChange(annotations);
-      this.handleClose();
-    });
-    (0, _defineProperty2.default)(this, "editAnnotation", () => {
-      this.setState({
-        openedMenu: false,
-        openedEditor: true
-      });
-    });
-    (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({
-        openedMenu: false,
-        openedEditor: true,
-        annotationIndex: annotations.length - 1,
-        annotation,
-        labelElem
-      });
-      onChange(annotations);
-    });
-    (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(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)(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(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)(this, "updateAnnotation", (oldLabel, newLabel) => {
-      const {
-        annotations,
-        onChange
-      } = this.props;
-      const {
-        annotationIndex
-      } = this.state;
-      const updatedAnnotation = {
-        ...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
-    };
-  }
-  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);
-        }
-      });
-    }
-    if (this.textRef) {
-      this.adjustAnnotationsPosition();
-      this.textRef.addEventListener('scroll', this.adjustAnnotationsPosition);
-    }
-  }
-  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(_editableHtmlTipTap.default, {
-      className: "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
-        },
-        h3: {
-          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
-    }));
-  }
-}
-(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 = exports.default = AnnotationEditor;
-//# sourceMappingURL=annotation-editor.js.map