@atlaskit/editor-plugin-show-diff 14.3.2 → 14.4.0

package/dist/cjs/ui/ContributorTag/ContributorTag.js

@@ -0,0 +1,383 @@
+/* ContributorTag.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContributorTag = ContributorTag;
+require("./ContributorTag.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _bindEventListener = require("bind-event-listener");
+var _reactIntl = require("react-intl");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
+var _avatarContent = require("@atlaskit/avatar/avatar-content");
+var _aiBot = _interopRequireDefault(require("@atlaskit/icon-lab/core/ai-bot"));
+var _icon = require("@atlaskit/logo/rovo-hex/icon");
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
+var _factory = require("../../pm-plugins/decorations/colorSchemes/factory");
+var _schemes = require("../../pm-plugins/decorations/colorSchemes/schemes");
+var _messages = require("./messages");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; }
+// 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(_messages.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.default, {
+      appearance: "circle",
+      size: "xxsmall",
+      src: contributor.avatarUrl,
+      name: name,
+      stackIndex: stackIndex,
+      borderColor: ringColor
+    });
+  }
+  return /*#__PURE__*/React.createElement(_avatar.default, {
+    appearance: "hexagon",
+    size: "xxsmall",
+    src: contributor.avatarUrl,
+    name: name,
+    stackIndex: stackIndex,
+    borderColor: ringColor
+  }, contributor.avatarUrl ? undefined : /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null, contributor.agentKind === 'rovo' ? /*#__PURE__*/React.createElement(_icon.RovoHexIcon, {
+    size: "xxsmall",
+    label: ""
+  }) :
+  /*#__PURE__*/
+  // `small` (12px) fits inside the 16px hexagon.
+  React.createElement(_aiBot.default, {
+    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 = _schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
+  var accent = isInserted ? isActive ? colors.insertActiveColor : colors.insertColor : isActive ? colors.deleteActiveColor : colors.deleteColor;
+  return (0, _factory.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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    maxWidthPx = _useState4[0],
+    setMaxWidthPx = _useState4[1];
+  (0, _react.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 (0, _bindEventListener.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.
+ */
+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 = (0, _reactIntl.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((0, _toConsumableArray2.default)(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 = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isTruncated = _useState6[0],
+    setIsTruncated = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_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(_messages.contributorTagMessages.changedByConnected, {
+    agentName: agentName,
+    userName: userName
+  }) : formatMessage(_messages.contributorTagMessages.changedBy, {
+    name: primaryName
+  });
+  var measureTruncation = (0, _react.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: (0, _runtime.ax)([styles.constraint])
+  }, /*#__PURE__*/React.createElement(_Tooltip.default, {
+    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", (0, _extends2.default)({}, 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: (0, _runtime.ax)([styles.tag, isVisible ? styles.visible : styles.hidden])
+    }), /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)([styles.avatars])
+    }, isConnectedPair && userContributor ? /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.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: (0, _runtime.ax)([styles.name])
+    }, displayName), /*#__PURE__*/React.createElement(_visuallyHidden.default, null, fullLabel));
+  }));
+}

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

@@ -0,0 +1,50 @@
+/* ContributorTagWidget.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContributorTagWidget = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ContributorTag = require("./ContributorTag");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+var ContributorTagWidget = exports.ContributorTagWidget = function ContributorTagWidget(_ref) {
+  var api = _ref.api,
+    diffId = _ref.diffId,
+    getEditorRoot = _ref.getEditorRoot;
+  var _useSharedPluginState = (0, _hooks.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.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/cjs/ui/ContributorTag/messages.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contributorTagMessages = void 0;
+var _reactIntl = require("react-intl");
+var contributorTagMessages = exports.contributorTagMessages = (0, _reactIntl.defineMessages)({
+  changedBy: {
+    id: 'editor-plugin-show-diff.ContributorTag.changedBy',
+    defaultMessage: 'Changed by {name}',
+    description: 'Screen-reader label and tooltip for the tag pinned to a highlighted change in the version-history diff, naming the single person or agent that made the change. The name placeholder is the contributor display name.'
+  },
+  changedByConnected: {
+    id: 'editor-plugin-show-diff.ContributorTag.changedByConnected',
+    defaultMessage: 'Changed by {agentName} with {userName}',
+    description: 'Screen-reader label and tooltip for the tag pinned to a highlighted change in the version-history diff when an AI agent made the change on behalf of a user. The agentName placeholder is the agent display name. The userName placeholder is the display name of the user that invoked the agent.'
+  },
+  externalAgentName: {
+    id: 'editor-plugin-show-diff.ContributorTag.externalAgentName',
+    defaultMessage: 'External agent',
+    description: 'Fallback display name shown in the contributor tag of the version-history diff for an unidentified third-party agent (for example an MCP or CLI client) that has no name of its own.'
+  }
+});