@atlaskit/editor-plugin-show-diff 14.5.1 → 15.0.0

package/dist/es2019/ui/ContributorTag/ContributorTag.js

@@ -1,312 +0,0 @@
-/* ContributorTag.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _extends from "@babel/runtime/helpers/extends";
-import "./ContributorTag.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { bindAll } from 'bind-event-listener';
-import { useIntl } from 'react-intl';
-import Avatar from '@atlaskit/avatar/avatar';
-import { AvatarContent } from '@atlaskit/avatar/avatar-content';
-import AiBotIcon from '@atlaskit/icon-lab/core/ai-bot';
-import { RovoHexIcon } from '@atlaskit/logo/rovo-hex/icon';
-import Tooltip from '@atlaskit/tooltip/Tooltip';
-import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
-import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
-import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { contributorTagMessages } from './messages';
-
-// Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp below
-// cannot collapse the box on a very short highlight.
-const MIN_TAG_WIDTH = '28px';
-const styles = {
-  constraint: "_1e0c1ule _kqswstnw _94n51osq _1e02idpf _1ul9idpf _1pbykb7n _uiztglyw",
-  tag: "_zulp1b66 _1reo15vq _18m915vq _2rko12b0 _11c8wadc _18zr1b66 _1rjcv77o _1e0c116y _4cvr1h6o _p12f1osq _1ul9idpf _1il9nqa1 _1doc1dm9 _16qs130s _o5721q9c _vchhusvi",
-  hidden: "_tzy4idpf _lcxvglyw",
-  visible: "_tzy4kb7n _lcxv1wug",
-  avatars: "_1e0c116y _4cvr1h6o _1o9zidpf",
-  leadingAvatar: "_1e0c116y _12l2r5cr",
-  name: "_1reo15vq _18m915vq _1e0c1ule _1ul9idpf _1bto1l2s _o5721q9c"
-};
-const getContributorName = (contributor, formatMessage) => {
-  var _contributor$name, _contributor$agentKin;
-  const name = (_contributor$name = contributor.name) === null || _contributor$name === void 0 ? void 0 : _contributor$name.trim();
-  if (name) {
-    return name;
-  }
-
-  // `agentKind` defaults to `'external'` per the plugin type contract; an unidentified external
-  // agent falls back to a generic label rather than rendering a nameless tag.
-  if (contributor.kind === 'agent' && ((_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external') === 'external') {
-    return formatMessage(contributorTagMessages.externalAgentName);
-  }
-  return '';
-};
-const ContributorAvatar = ({
-  contributor,
-  name,
-  ringColor,
-  stackIndex
-}) => {
-  if (contributor.kind === 'user') {
-    return /*#__PURE__*/React.createElement(Avatar, {
-      appearance: "circle",
-      size: "xxsmall",
-      src: contributor.avatarUrl,
-      name: name,
-      stackIndex: stackIndex,
-      borderColor: ringColor
-    });
-  }
-  return /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "hexagon",
-    size: "xxsmall",
-    src: contributor.avatarUrl,
-    name: name,
-    stackIndex: stackIndex,
-    borderColor: ringColor
-  }, contributor.avatarUrl ? undefined : /*#__PURE__*/React.createElement(AvatarContent, null, contributor.agentKind === 'rovo' ? /*#__PURE__*/React.createElement(RovoHexIcon, {
-    size: "xxsmall",
-    label: ""
-  }) :
-  /*#__PURE__*/
-  // `small` (12px) fits inside the 16px hexagon.
-  React.createElement(AiBotIcon, {
-    label: "",
-    size: "small"
-  })));
-};
-/**
- * Resolves the tag's accent from the same scheme value and token maps the highlight used, so the two
- * can never drift.
- */
-const getTagAccent = ({
-  colorScheme,
-  isActive,
-  isInserted
-}) => {
-  const colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
-  const accent = isInserted ? isActive ? colors.insertActiveColor : colors.insertColor : isActive ? colors.deleteActiveColor : colors.deleteColor;
-  return getAccentTokens(accent);
-};
-
-/** The line the change starts on: topmost of its fragments, leftmost among those. */
-const findChangeStartLine = highlights => {
-  let start;
-  for (const highlight of highlights) {
-    for (const rect of highlight.getClientRects()) {
-      if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
-        start = rect;
-      }
-    }
-  }
-  return start;
-};
-
-/**
- * Observes the highlight this tag describes, for what CSS here cannot see: its hover state (the
- * highlight is a ProseMirror decoration in a different DOM subtree, so listeners are bound
- * imperatively via `data-diff-id`) and the width the tag is clamped to.
- *
- * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
- * memoised decoration calculation.
- */
-const useHighlightState = (diffId, highlightSelector, getEditorRoot) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const [maxWidthPx, setMaxWidthPx] = useState(undefined);
-  useEffect(() => {
-    // Both queries are scoped to this editor's content root, so a tag can only ever bind to the
-    // decorations its own plugin instance rendered — another editor on the page, or one nested
-    // inside this one, cannot supply the geometry.
-    const editorRoot = getEditorRoot();
-    const highlights = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.querySelectorAll(highlightSelector);
-    if (!editorRoot || !(highlights !== null && highlights !== void 0 && highlights.length)) {
-      return;
-    }
-    const elements = Array.from(highlights);
-    // The width comes from this tag's OWN decoration; sibling halves of the change are here for
-    // hover only.
-    const ownElements = Array.from(editorRoot.querySelectorAll(`[data-diff-id="${diffId}"]`));
-    const measure = () => {
-      var _findChangeStartLine;
-      // Counted by distinct line box, not by client rect: an inline node inside the change (a
-      // mention, emoji, date) splits the highlight into several rects on the same line, and
-      // treating that as a wrap would drop the width clamp on changes that never wrapped.
-      const lineTops = new Set();
-      for (const highlight of ownElements) {
-        for (const rect of highlight.getClientRects()) {
-          lineTops.add(Math.round(rect.top));
-        }
-      }
-
-      // A wrapped change's first line says nothing useful about how wide the tag may be.
-      const width = lineTops.size > 1 ? undefined : (_findChangeStartLine = findChangeStartLine(ownElements)) === null || _findChangeStartLine === void 0 ? void 0 : _findChangeStartLine.width;
-      setMaxWidthPx(width);
-    };
-    measure();
-
-    // An inline element cannot be observed itself (ResizeObserver skips boxes with no principal
-    // box), so the block it sits in is observed instead.
-    const resizeObserver = new ResizeObserver(measure);
-    for (const parent of new Set(ownElements.map(({
-      parentElement
-    }) => parentElement))) {
-      if (parent) {
-        resizeObserver.observe(parent);
-      }
-    }
-
-    // `bindAll` takes a single target, and a change can render more than one highlight.
-    const unbinds = elements.map(highlight => bindAll(highlight, [{
-      type: 'mouseenter',
-      listener: () => setIsHovered(true)
-    }, {
-      type: 'mouseleave',
-      listener: () => setIsHovered(false)
-    }]));
-    return () => {
-      resizeObserver.disconnect();
-      unbinds.forEach(unbind => unbind());
-    };
-  }, [diffId, getEditorRoot, highlightSelector]);
-  return {
-    isHovered,
-    maxWidthPx
-  };
-};
-
-/**
- * A small tag naming who made one diff, rendered into the host widget its decoration places on the
- * change's first character and positioned above it.
- */
-export function ContributorTag({
-  colorScheme,
-  connectedContributor,
-  contributor,
-  diffId,
-  getEditorRoot,
-  isActive,
-  isInserted = true,
-  linkedDiffIds
-}) {
-  const {
-    formatMessage
-  } = useIntl();
-  // A plain string, so the hook's effect is not re-run by a fresh array on every render.
-  const highlightSelector = [diffId, ...(linkedDiffIds !== null && linkedDiffIds !== void 0 ? linkedDiffIds : [])].map(id => `[data-diff-id="${id}"]`).join(', ');
-  const {
-    isHovered: isHighlightHovered,
-    maxWidthPx
-  } = useHighlightState(diffId, highlightSelector, getEditorRoot);
-  const accent = getTagAccent({
-    colorScheme,
-    isActive: Boolean(isActive),
-    isInserted
-  });
-  const nameRef = useRef(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const [isHoveredOrFocused, setIsHoveredOrFocused] = useState(false);
-  const isConnectedPair = Boolean(connectedContributor);
-  const isPrimaryAgent = contributor.kind === 'agent';
-  const primaryName = getContributorName(contributor, formatMessage);
-  const secondaryName = connectedContributor ? getContributorName(connectedContributor, formatMessage) : '';
-
-  // Resolved by `kind` so a reverse `connectedTo` (an attributed user pointing at its agent)
-  // renders identically.
-  const agentName = isPrimaryAgent ? primaryName : secondaryName;
-  const userName = isPrimaryAgent ? secondaryName : primaryName;
-  const userContributor = isPrimaryAgent ? connectedContributor : contributor;
-  const agentContributor = isPrimaryAgent ? contributor : connectedContributor;
-  const displayName = isConnectedPair ? agentName || primaryName : primaryName;
-  const fullLabel = isConnectedPair ? formatMessage(contributorTagMessages.changedByConnected, {
-    agentName,
-    userName
-  }) : formatMessage(contributorTagMessages.changedBy, {
-    name: primaryName
-  });
-  const measureTruncation = useCallback(() => {
-    const element = nameRef.current;
-    if (element) {
-      setIsTruncated(element.scrollWidth > element.clientWidth);
-    }
-  }, []);
-  const isVisible = Boolean(isActive) || isHighlightHovered || isHoveredOrFocused;
-
-  // A connected pair only ever renders the agent name, so it always gets a tooltip; a single
-  // contributor only when its name is clipped.
-  const tooltipContent = isTruncated || isConnectedPair ? fullLabel : null;
-  return /*#__PURE__*/React.createElement("span", {
-    style: {
-      // Clamped to the highlight's own width, floored at `MIN_TAG_WIDTH` so a one-character
-      // change still shows an avatar.
-      maxWidth: maxWidthPx === undefined ? undefined : `max(${Math.round(maxWidthPx)}px, ${MIN_TAG_WIDTH})`
-    },
-    className: ax([styles.constraint])
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltipContent
-    // A tooltip below would cover the highlighted text the tag describes.
-    ,
-    position: "top"
-    // The label is already exposed by the visually hidden text below.
-    ,
-    isScreenReaderAnnouncementDisabled: true
-  }, tooltipProps => /*#__PURE__*/React.createElement("span", _extends({}, tooltipProps, {
-    "data-testid": "diff-contributor-tag"
-    // Deliberately no `aria-label`: it would be announced ahead of the element's
-    // contents, but design requires the contributor *after* the change — hence the
-    // visually hidden last child.
-    ,
-    role: "note"
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: 0,
-    style: {
-      backgroundColor: accent.background,
-      borderBottomColor: accent.border
-    },
-    onMouseOver: event => {
-      tooltipProps.onMouseOver(event);
-      measureTruncation();
-      setIsHoveredOrFocused(true);
-    },
-    onMouseOut: event => {
-      tooltipProps.onMouseOut(event);
-      setIsHoveredOrFocused(false);
-    },
-    onFocus: event => {
-      tooltipProps.onFocus(event);
-      measureTruncation();
-      setIsHoveredOrFocused(true);
-    },
-    onBlur: event => {
-      tooltipProps.onBlur(event);
-      setIsHoveredOrFocused(false);
-    },
-    className: ax([styles.tag, isVisible ? styles.visible : styles.hidden])
-  }), /*#__PURE__*/React.createElement("span", {
-    className: ax([styles.avatars])
-  }, isConnectedPair && userContributor ? /*#__PURE__*/React.createElement("span", {
-    className: ax([styles.leadingAvatar])
-  }, /*#__PURE__*/React.createElement(ContributorAvatar, {
-    contributor: userContributor,
-    name: userName,
-    ringColor: accent.background,
-    stackIndex: 1
-  })) : null, isConnectedPair && agentContributor ? /*#__PURE__*/React.createElement(ContributorAvatar, {
-    contributor: agentContributor,
-    name: agentName,
-    ringColor: accent.background,
-    stackIndex: 0
-  }) : null, !isConnectedPair ? /*#__PURE__*/React.createElement(ContributorAvatar, {
-    contributor: contributor,
-    name: primaryName,
-    ringColor: accent.background
-  }) : null), /*#__PURE__*/React.createElement("span", {
-    "data-testid": "diff-contributor-tag-name",
-    ref: nameRef,
-    style: {
-      color: accent.text
-    },
-    className: ax([styles.name])
-  }, displayName), /*#__PURE__*/React.createElement(VisuallyHidden, null, fullLabel))));
-}

package/dist/es2019/ui/ContributorTag/ContributorTagWidget.js

@@ -1,43 +0,0 @@
-/* ContributorTagWidget.tsx generated by @compiled/babel-plugin v2.0.0 */
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { ContributorTag } from './ContributorTag';
-
-/**
- * One contributor tag, mounted by its diff decoration into the host element that decoration draws
- * (see `mountContributorTag`).
- *
- * The model is read from plugin state here rather than passed in, because ProseMirror skips `toDOM`
- * for a widget it reuses: stepping to the next change republishes the tags without redrawing their
- * hosts, so anything the tag needs to react to — `isActive` above all — has to arrive through a
- * subscription of its own. Renders nothing when this diff has no tag, which is the case for the
- * deleted half of a replacement: that half is folded into the inline tag.
- */
-export const ContributorTagWidget = ({
-  api,
-  diffId,
-  getEditorRoot
-}) => {
-  const {
-    model
-  } = useSharedPluginStateWithSelector(api, ['showDiff'], state => {
-    var _state$showDiffState, _state$showDiffState$;
-    return {
-      model: (_state$showDiffState = state.showDiffState) === null || _state$showDiffState === void 0 ? void 0 : (_state$showDiffState$ = _state$showDiffState.contributorTags) === null || _state$showDiffState$ === void 0 ? void 0 : _state$showDiffState$.find(tag => tag.diffId === diffId)
-    };
-  });
-  if (!model) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ContributorTag, {
-    colorScheme: model.colorScheme,
-    connectedContributor: model.connectedContributor,
-    contributor: model.contributor,
-    diffId: model.diffId,
-    getEditorRoot: getEditorRoot,
-    isActive: model.isActive,
-    isInserted: model.isInserted,
-    linkedDiffIds: model.linkedDiffIds
-  });
-};

package/dist/esm/ui/ContributorTag/ContributorTag.compiled.css

@@ -1,29 +0,0 @@
-._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}
-._18zr1b66{padding-inline:var(--ds-space-050,4px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}
-._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
-._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._18m915vq{overflow-y:hidden}
-._1bto1l2s{text-overflow:ellipsis}
-._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
-._1e02idpf{inset-inline-start:0}
-._1e0c116y{display:inline-flex}
-._1e0c1ule{display:block}
-._1il9nqa1{border-bottom-style:solid}
-._1o9zidpf{flex-shrink:0}
-._1pbykb7n{z-index:1}
-._1reo15vq{overflow-x:hidden}
-._1ul9idpf{min-width:0}
-._4cvr1h6o{align-items:center}
-._94n51osq{bottom:100%}
-._kqswstnw{position:absolute}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
-._o5721q9c{white-space:nowrap}
-._p12f1osq{max-width:100%}
-._tzy4idpf{opacity:0}
-._tzy4kb7n{opacity:1}
-._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
-._vchhusvi{box-sizing:border-box}