@atlaskit/editor-plugin-show-diff 14.5.2 → 15.0.1

package/dist/esm/ui/ContributorTag/ContributorTag.js

@@ -1,375 +0,0 @@
-/* ContributorTag.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./ContributorTag.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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.
-var MIN_TAG_WIDTH = '28px';
-var 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"
-};
-var getContributorName = function getContributorName(contributor, formatMessage) {
-  var _contributor$name, _contributor$agentKin;
-  var 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 '';
-};
-var ContributorAvatar = function ContributorAvatar(_ref) {
-  var contributor = _ref.contributor,
-    name = _ref.name,
-    ringColor = _ref.ringColor,
-    stackIndex = _ref.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.
- */
-var getTagAccent = function getTagAccent(_ref2) {
-  var colorScheme = _ref2.colorScheme,
-    isActive = _ref2.isActive,
-    isInserted = _ref2.isInserted;
-  var colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
-  var 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. */
-var findChangeStartLine = function findChangeStartLine(highlights) {
-  var start;
-  var _iterator = _createForOfIteratorHelper(highlights),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var highlight = _step.value;
-      var _iterator2 = _createForOfIteratorHelper(highlight.getClientRects()),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var rect = _step2.value;
-          if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
-            start = rect;
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  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.
- */
-var useHighlightState = function useHighlightState(diffId, highlightSelector, getEditorRoot) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useState3 = useState(undefined),
-    _useState4 = _slicedToArray(_useState3, 2),
-    maxWidthPx = _useState4[0],
-    setMaxWidthPx = _useState4[1];
-  useEffect(function () {
-    // 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.
-    var editorRoot = getEditorRoot();
-    var highlights = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.querySelectorAll(highlightSelector);
-    if (!editorRoot || !(highlights !== null && highlights !== void 0 && highlights.length)) {
-      return;
-    }
-    var elements = Array.from(highlights);
-    // The width comes from this tag's OWN decoration; sibling halves of the change are here for
-    // hover only.
-    var ownElements = Array.from(editorRoot.querySelectorAll("[data-diff-id=\"".concat(diffId, "\"]")));
-    var measure = function 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.
-      var lineTops = new Set();
-      for (var _i = 0, _ownElements = ownElements; _i < _ownElements.length; _i++) {
-        var highlight = _ownElements[_i];
-        var _iterator3 = _createForOfIteratorHelper(highlight.getClientRects()),
-          _step3;
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var rect = _step3.value;
-            lineTops.add(Math.round(rect.top));
-          }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
-        }
-      }
-
-      // A wrapped change's first line says nothing useful about how wide the tag may be.
-      var 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.
-    var resizeObserver = new ResizeObserver(measure);
-    var _iterator4 = _createForOfIteratorHelper(new Set(ownElements.map(function (_ref3) {
-        var parentElement = _ref3.parentElement;
-        return parentElement;
-      }))),
-      _step4;
-    try {
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-        var parent = _step4.value;
-        if (parent) {
-          resizeObserver.observe(parent);
-        }
-      }
-
-      // `bindAll` takes a single target, and a change can render more than one highlight.
-    } catch (err) {
-      _iterator4.e(err);
-    } finally {
-      _iterator4.f();
-    }
-    var unbinds = elements.map(function (highlight) {
-      return bindAll(highlight, [{
-        type: 'mouseenter',
-        listener: function listener() {
-          return setIsHovered(true);
-        }
-      }, {
-        type: 'mouseleave',
-        listener: function listener() {
-          return setIsHovered(false);
-        }
-      }]);
-    });
-    return function () {
-      resizeObserver.disconnect();
-      unbinds.forEach(function (unbind) {
-        return unbind();
-      });
-    };
-  }, [diffId, getEditorRoot, highlightSelector]);
-  return {
-    isHovered: isHovered,
-    maxWidthPx: 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(_ref4) {
-  var colorScheme = _ref4.colorScheme,
-    connectedContributor = _ref4.connectedContributor,
-    contributor = _ref4.contributor,
-    diffId = _ref4.diffId,
-    getEditorRoot = _ref4.getEditorRoot,
-    isActive = _ref4.isActive,
-    _ref4$isInserted = _ref4.isInserted,
-    isInserted = _ref4$isInserted === void 0 ? true : _ref4$isInserted,
-    linkedDiffIds = _ref4.linkedDiffIds;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  // A plain string, so the hook's effect is not re-run by a fresh array on every render.
-  var highlightSelector = [diffId].concat(_toConsumableArray(linkedDiffIds !== null && linkedDiffIds !== void 0 ? linkedDiffIds : [])).map(function (id) {
-    return "[data-diff-id=\"".concat(id, "\"]");
-  }).join(', ');
-  var _useHighlightState = useHighlightState(diffId, highlightSelector, getEditorRoot),
-    isHighlightHovered = _useHighlightState.isHovered,
-    maxWidthPx = _useHighlightState.maxWidthPx;
-  var accent = getTagAccent({
-    colorScheme: colorScheme,
-    isActive: Boolean(isActive),
-    isInserted: isInserted
-  });
-  var nameRef = useRef(null);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isTruncated = _useState6[0],
-    setIsTruncated = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isHoveredOrFocused = _useState8[0],
-    setIsHoveredOrFocused = _useState8[1];
-  var isConnectedPair = Boolean(connectedContributor);
-  var isPrimaryAgent = contributor.kind === 'agent';
-  var primaryName = getContributorName(contributor, formatMessage);
-  var secondaryName = connectedContributor ? getContributorName(connectedContributor, formatMessage) : '';
-
-  // Resolved by `kind` so a reverse `connectedTo` (an attributed user pointing at its agent)
-  // renders identically.
-  var agentName = isPrimaryAgent ? primaryName : secondaryName;
-  var userName = isPrimaryAgent ? secondaryName : primaryName;
-  var userContributor = isPrimaryAgent ? connectedContributor : contributor;
-  var agentContributor = isPrimaryAgent ? contributor : connectedContributor;
-  var displayName = isConnectedPair ? agentName || primaryName : primaryName;
-  var fullLabel = isConnectedPair ? formatMessage(contributorTagMessages.changedByConnected, {
-    agentName: agentName,
-    userName: userName
-  }) : formatMessage(contributorTagMessages.changedBy, {
-    name: primaryName
-  });
-  var measureTruncation = useCallback(function () {
-    var element = nameRef.current;
-    if (element) {
-      setIsTruncated(element.scrollWidth > element.clientWidth);
-    }
-  }, []);
-  var 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.
-  var 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(".concat(Math.round(maxWidthPx), "px, ").concat(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
-  }, function (tooltipProps) {
-    return /*#__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: function onMouseOver(event) {
-        tooltipProps.onMouseOver(event);
-        measureTruncation();
-        setIsHoveredOrFocused(true);
-      },
-      onMouseOut: function onMouseOut(event) {
-        tooltipProps.onMouseOut(event);
-        setIsHoveredOrFocused(false);
-      },
-      onFocus: function onFocus(event) {
-        tooltipProps.onFocus(event);
-        measureTruncation();
-        setIsHoveredOrFocused(true);
-      },
-      onBlur: function 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/esm/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 var ContributorTagWidget = function ContributorTagWidget(_ref) {
-  var api = _ref.api,
-    diffId = _ref.diffId,
-    getEditorRoot = _ref.getEditorRoot;
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['showDiff'], function (state) {
-      var _state$showDiffState;
-      return {
-        model: (_state$showDiffState = state.showDiffState) === null || _state$showDiffState === void 0 || (_state$showDiffState = _state$showDiffState.contributorTags) === null || _state$showDiffState === void 0 ? void 0 : _state$showDiffState.find(function (tag) {
-          return tag.diffId === diffId;
-        })
-      };
-    }),
-    model = _useSharedPluginState.model;
-  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/types/ui/ContributorTag/ContributorTag.d.ts

@@ -1,37 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { ColorScheme } from '../../pm-plugins/decorations/colorSchemes/types';
-import type { TagContributor } from '../../showDiffPluginType';
-type ContributorTagProps = {
-    colorScheme?: ColorScheme;
-    connectedContributor?: TagContributor;
-    contributor: TagContributor;
-    diffId: string;
-    /**
-     * This editor's own content root (`editorView.dom`), read through the plugin's captured view.
-     *
-     * Every DOM lookup the tag makes is scoped to it, rather than resolved by class name from a
-     * highlight element: `.ProseMirror` is not this package's to rename, and with nested editors the
-     * nearest one is not necessarily the editor whose plugin rendered this tag.
-     *
-     * A getter rather than the element itself because the view arrives with the ProseMirror view
-     * lifecycle, which the plugin does not re-render for: reading it inside the effect means it is
-     * always the current one.
-     */
-    getEditorRoot: () => HTMLElement | null;
-    isActive?: boolean;
-    isInserted?: boolean;
-    /**
-     * Other decorations of the same change this one tag captions — the deleted half of a replacement.
-     * Hovering any of them reveals the tag; only `diffId` is measured against.
-     */
-    linkedDiffIds?: string[];
-};
-/**
- * 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 declare function ContributorTag({ colorScheme, connectedContributor, contributor, diffId, getEditorRoot, isActive, isInserted, linkedDiffIds, }: ContributorTagProps): JSX.Element;
-export {};

package/dist/types/ui/ContributorTag/ContributorTagWidget.d.ts

@@ -1,22 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { ShowDiffPlugin } from '../../showDiffPluginType';
-/**
- * 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 declare const ContributorTagWidget: ({ api, diffId, getEditorRoot, }: {
-    api?: ExtractInjectionAPI<ShowDiffPlugin>;
-    diffId: string;
-    /** This editor's own content root — see `ContributorTagProps.getEditorRoot`. */
-    getEditorRoot: () => HTMLElement | null;
-}) => JSX.Element | null;