@atlaskit/renderer/dist/esm/ui/annotations/draft/component.js

Renderer component

import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { Fragment, useCallback } from 'react';
// eslint-disable-next-line @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- emotion jsx pragma; go/DSP-18766
import { css, jsx } from '@emotion/react'; // oxlint-ignore @typescript-eslint/consistent-type-imports -- classic @jsx jsx factory + jsx.JSX.Element types

import { InsertDraftPosition } from '../types';
import { splitText, calcTextSplitOffset, findTextString } from './text';
import { calcInsertDraftPositionOnText } from './position';
import { dataAttributes } from './dom';
import { segmentText } from '../../../react/utils/segment-text';
import { renderTextSegments } from '../../../react/utils/render-text-segments';
import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
import { useAnnotationRangeState } from '../contexts/AnnotationRangeContext';

// Localized AnnotationSharedCSSByState().common and AnnotationSharedCSSByState().focus
var markStyles = css({
  color: 'inherit',
  backgroundColor: 'unset',
  WebkitTapHighlightColor: 'transparent',
  borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid transparent"),
  cursor: 'pointer',
  padding: '1px 0 2px',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
  '&:has(.card), &:has([data-inline-card])': {
    padding: '5px 0 3px 0'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
  '&:has(.date-lozenger-container)': {
    paddingTop: "var(--ds-space-025, 2px)"
  },
  background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
  borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
});
export var AnnotationDraft = function AnnotationDraft(_ref) {
  var draftPosition = _ref.draftPosition,
    children = _ref.children;
  var _useAnnotationManager = useAnnotationManagerDispatch(),
    dispatch = _useAnnotationManager.dispatch;
  var markRef = useCallback(function (node) {
    dispatch({
      type: 'setDraftMarkRef',
      data: {
        draftMarkRef: node !== null && node !== void 0 ? node : undefined
      }
    });
  }, [dispatch]);
  return jsx("mark", _extends({
    "data-renderer-mark": true
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, dataAttributes(draftPosition), {
    css: markStyles,
    ref: markRef
  }), children);
};
export var getAnnotationIndex = function getAnnotationIndex(annotationPosition, fragmentCount) {
  if (annotationPosition === InsertDraftPosition.START) {
    return 0;
  }
  if (annotationPosition === InsertDraftPosition.END) {
    return fragmentCount - 1;
  }
  if (annotationPosition === InsertDraftPosition.INSIDE && fragmentCount === 3) {
    return 1;
  }
  return -1;
};
export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
  var texts = _ref2.texts,
    shouldApplyAnnotationAt = _ref2.shouldApplyAnnotationAt,
    draftPosition = _ref2.draftPosition,
    textHighlighter = _ref2.textHighlighter,
    marks = _ref2.marks;
  var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
  return texts.map(function (value, index) {
    var segments = segmentText(value, textHighlighter);
    if (annotateIndex === index) {
      return (
        // Ignored via go/ees005
        // eslint-disable-next-line react/no-array-index-key
        jsx(AnnotationDraft, {
          key: index,
          draftPosition: draftPosition
        }, renderTextSegments(segments, textHighlighter, marks || [], draftPosition.from))
      );
    }
    return (
      // Ignored via go/ees005
      // eslint-disable-next-line react/no-array-index-key
      jsx(React.Fragment, {
        key: index
      }, renderTextSegments(segments, textHighlighter, marks || [], draftPosition.from))
    );
  });
};
export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
  var startPos = _ref3.startPos,
    endPos = _ref3.endPos,
    children = _ref3.children,
    textHighlighter = _ref3.textHighlighter,
    marks = _ref3.marks;
  var textPosition = React.useMemo(function () {
    return {
      start: startPos,
      end: endPos
    };
  }, [endPos, startPos]);
  var _useAnnotationRangeSt = useAnnotationRangeState(),
    nextDraftPosition = _useAnnotationRangeSt.selectionDraftDocumentPosition;
  var shouldApplyAnnotationAt = React.useMemo(function () {
    if (!nextDraftPosition) {
      return false;
    }
    return calcInsertDraftPositionOnText(textPosition, nextDraftPosition);
  }, [nextDraftPosition, textPosition]);
  var textString = findTextString(children);
  if (!textString) {
    return jsx(Fragment, null, children);
  }
  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
    var segments = segmentText(textString, textHighlighter);
    return jsx(Fragment, null, renderTextSegments(segments, textHighlighter, marks || [], startPos));
  }
  if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
    var _segments = segmentText(textString, textHighlighter);
    return jsx(AnnotationDraft, {
      key: 0,
      draftPosition: nextDraftPosition
    }, renderTextSegments(_segments, textHighlighter, marks || [], startPos));
  }
  var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, textString);
  var texts = splitText(textString, offsets);
  if (!texts) {
    var _segments2 = segmentText(textString, textHighlighter);
    return jsx(Fragment, null, renderTextSegments(_segments2, textHighlighter, marks || [], startPos));
  }
  var components = applyAnnotationOnText({
    texts: texts,
    shouldApplyAnnotationAt: shouldApplyAnnotationAt,
    draftPosition: nextDraftPosition,
    textHighlighter: textHighlighter,
    marks: marks
  });
  return jsx(Fragment, null, components);
};