@atlaskit/renderer/dist/es2019/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
const markStyles = css({
  color: 'inherit',
  backgroundColor: 'unset',
  WebkitTapHighlightColor: 'transparent',
  borderBottom: `${"var(--ds-border-width-selected, 2px)"} 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 const AnnotationDraft = ({
  draftPosition,
  children
}) => {
  const {
    dispatch
  } = useAnnotationManagerDispatch();
  const markRef = useCallback(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 const 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 const applyAnnotationOnText = ({
  texts,
  shouldApplyAnnotationAt,
  draftPosition,
  textHighlighter,
  marks
}) => {
  const annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
  return texts.map((value, index) => {
    const 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 const TextWithAnnotationDraft = ({
  startPos,
  endPos,
  children,
  textHighlighter,
  marks
}) => {
  const textPosition = React.useMemo(() => ({
    start: startPos,
    end: endPos
  }), [endPos, startPos]);
  const {
    selectionDraftDocumentPosition: nextDraftPosition
  } = useAnnotationRangeState();
  const shouldApplyAnnotationAt = React.useMemo(() => {
    if (!nextDraftPosition) {
      return false;
    }
    return calcInsertDraftPositionOnText(textPosition, nextDraftPosition);
  }, [nextDraftPosition, textPosition]);
  const textString = findTextString(children);
  if (!textString) {
    return jsx(Fragment, null, children);
  }
  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
    const segments = segmentText(textString, textHighlighter);
    return jsx(Fragment, null, renderTextSegments(segments, textHighlighter, marks || [], startPos));
  }
  if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
    const segments = segmentText(textString, textHighlighter);
    return jsx(AnnotationDraft, {
      key: 0,
      draftPosition: nextDraftPosition
    }, renderTextSegments(segments, textHighlighter, marks || [], startPos));
  }
  const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, textString);
  const texts = splitText(textString, offsets);
  if (!texts) {
    const segments = segmentText(textString, textHighlighter);
    return jsx(Fragment, null, renderTextSegments(segments, textHighlighter, marks || [], startPos));
  }
  const components = applyAnnotationOnText({
    texts,
    shouldApplyAnnotationAt,
    draftPosition: nextDraftPosition,
    textHighlighter,
    marks
  });
  return jsx(Fragment, null, components);
};