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

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildContributorTagDom = exports.MIN_TAG_WIDTH = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_NAME_TESTID = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
+var CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_NAME_TESTID = 'diff-contributor-tag-name';
+
+/**
+ * Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp cannot
+ * collapse the box on a very short highlight.
+ */
+var MIN_TAG_WIDTH = exports.MIN_TAG_WIDTH = '28px';
+
+// Positioned against the host widget its decoration renders on the change's first character:
+// `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
+// character.
+var constraintStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'block',
+  position: 'absolute',
+  bottom: '100%',
+  insetInlineStart: 0,
+  minWidth: 0,
+  // The tag may cover surrounding text, so it has to paint over it. Matches `akEditorUnitZIndex`.
+  zIndex: 1,
+  // It renders inside the document and it is not content: dragging a selection across the change
+  // must not select it.
+  userSelect: 'none'
+});
+
+// `backgroundColor`, `borderBottomColor` and the visibility come from the model, and are set by the
+// controller.
+var tagStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: "var(--ds-space-050, 4px)",
+  // Never wider than the highlight; overflow is ellipsised on the name below.
+  maxWidth: '100%',
+  minWidth: 0,
+  overflow: 'hidden',
+  paddingInline: "var(--ds-space-050, 4px)",
+  paddingBlock: "var(--ds-space-025, 2px)",
+  borderRadius: "var(--ds-radius-small, 4px)",
+  borderBottomStyle: 'solid',
+  borderBottomWidth: "var(--ds-border-width-selected, 2px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  whiteSpace: 'nowrap',
+  boxSizing: 'border-box'
+});
+var avatarsStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: 0
+});
+var nameStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'block',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+/** `@atlaskit/visually-hidden`, inlined. */
+var srLabelStyle = (0, _lazyNodeView.convertToInlineCss)({
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  position: 'absolute',
+  border: 0,
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  userSelect: 'none',
+  whiteSpace: 'nowrap'
+});
+var createSpan = function createSpan(doc, style) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var span = doc.createElement('span');
+  span.setAttribute('style', style);
+  for (var _i = 0, _Object$entries = Object.entries(attributes); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
+      name = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    span.setAttribute(name, value);
+  }
+  return span;
+};
+/**
+ * The tag's markup, with no model applied — see `ContributorTagController`.
+ *
+ * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
+ * would need a cast per reference below.
+ */
+var buildContributorTagDom = exports.buildContributorTagDom = function buildContributorTagDom(doc) {
+  var root = createSpan(doc, constraintStyle);
+  var tag = createSpan(doc, tagStyle, {
+    'data-testid': CONTRIBUTOR_TAG_TESTID,
+    // 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 label.
+    role: 'note',
+    // Focusable so keyboard and screen-reader users can reach the tag and its tooltip.
+    tabindex: '0'
+  });
+  var avatars = createSpan(doc, avatarsStyle);
+  var name = createSpan(doc, nameStyle, {
+    'data-testid': CONTRIBUTOR_TAG_NAME_TESTID
+  });
+  var srLabel = createSpan(doc, srLabelStyle);
+  tag.append(avatars, name, srLabel);
+  root.appendChild(tag);
+  return {
+    avatars: avatars,
+    name: name,
+    root: root,
+    srLabel: srLabel,
+    tag: tag
+  };
+};

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

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contributorAvatarRenderer = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _avatarSizes = require("@atlaskit/avatar/avatar-sizes");
+var _default = require("@atlaskit/avatar/constants/default");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _contributorTagIcons = require("./contributorTagIcons");
+/** The size `@atlaskit/avatar`'s `xxsmall` rendered at. */
+var AVATAR_SIZE = _avatarSizes.AVATAR_SIZES.xxsmall;
+/** `xxsmall` also carried a `space.025` margin — the same 2px — which is where the ring is painted. */
+var AVATAR_RING_WIDTH = _default.BORDER_WIDTH;
+var AVATAR_BOX_SIZE = AVATAR_SIZE + AVATAR_RING_WIDTH * 2;
+
+/** Reused from `@atlaskit/avatar`'s `avatar-content`, so the two shapes cannot drift. */
+var HEXAGON_CLIP_PATH = 'polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)';
+var boxStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  boxSizing: 'border-box',
+  width: "".concat(AVATAR_BOX_SIZE, "px"),
+  height: "".concat(AVATAR_BOX_SIZE, "px")
+});
+var shapeStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box',
+  width: "".concat(AVATAR_SIZE, "px"),
+  height: "".concat(AVATAR_SIZE, "px"),
+  overflow: 'hidden'
+});
+var imageStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover'
+});
+
+/** The `@atlaskit/avatar` image fallback: a subtle glyph on a tinted box. */
+var personFallbackStyle = (0, _lazyNodeView.convertToInlineCss)({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+  color: "var(--ds-icon-subtle, #505258)"
+});
+/**
+ * One 16px avatar for a contributor: a circle for a person, a hexagon for an agent.
+ *
+ * Mirrors `mentionAvatarRenderer` — a bare `<img>` with a glyph fallback bound to `error`, and the
+ * hexagon cut with `clip-path`. The ring `@atlaskit/avatar` drew from `borderColor` is a
+ * `box-shadow` on the circle and a second clipped hexagon behind the agent, since `box-shadow` is
+ * cut away by `clip-path`.
+ */
+var contributorAvatarRenderer = exports.contributorAvatarRenderer = function contributorAvatarRenderer(_ref) {
+  var contributor = _ref.contributor,
+    doc = _ref.doc,
+    ringColor = _ref.ringColor,
+    stackIndex = _ref.stackIndex;
+  var isAgent = contributor.kind === 'agent';
+  var element = doc.createElement('span');
+  element.setAttribute('style', boxStyle);
+  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
+  // announcement comes from.
+  element.setAttribute('aria-hidden', 'true');
+  if (stackIndex !== undefined) {
+    element.style.setProperty('z-index', String(stackIndex));
+  }
+  var shape = doc.createElement('span');
+  shape.setAttribute('style', shapeStyle);
+  element.appendChild(shape);
+  if (isAgent) {
+    element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
+    shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
+  } else {
+    shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
+  }
+  var image;
+  var unbindImageError;
+  var showFallback = function showFallback() {
+    var _unbindImageError, _image;
+    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 || _unbindImageError();
+    unbindImageError = undefined;
+    (_image = image) === null || _image === void 0 || _image.remove();
+    image = undefined;
+    if (!isAgent) {
+      var fallback = doc.createElement('span');
+      fallback.setAttribute('style', personFallbackStyle);
+      fallback.appendChild((0, _contributorTagIcons.getContributorTagIcon)('person', doc));
+      shape.appendChild(fallback);
+      return;
+    }
+    shape.appendChild((0, _contributorTagIcons.getContributorTagIcon)(contributor.agentKind === 'rovo' ? 'rovoHex' : 'aiBot', doc));
+  };
+  if (contributor.avatarUrl) {
+    image = doc.createElement('img');
+    image.alt = '';
+    image.decoding = 'async';
+    image.draggable = false;
+    image.loading = 'lazy';
+    image.setAttribute('style', imageStyle);
+    unbindImageError = (0, _bindEventListener.bind)(image, {
+      type: 'error',
+      listener: showFallback
+    });
+    shape.appendChild(image);
+    image.src = contributor.avatarUrl;
+  } else {
+    showFallback();
+  }
+  var setRingColor = function setRingColor(nextRingColor) {
+    if (isAgent) {
+      element.style.setProperty('background', nextRingColor);
+      // Shows through wherever the artwork is transparent, as the avatar background did.
+      shape.style.setProperty('background', nextRingColor);
+      return;
+    }
+    shape.style.setProperty('box-shadow', "0 0 0 ".concat(AVATAR_RING_WIDTH, "px ").concat(nextRingColor));
+    shape.style.setProperty('background', nextRingColor);
+  };
+  setRingColor(ringColor);
+  return {
+    destroy: function destroy() {
+      var _unbindImageError2;
+      (_unbindImageError2 = unbindImageError) === null || _unbindImageError2 === void 0 || _unbindImageError2();
+      unbindImageError = undefined;
+      element.remove();
+    },
+    element: element,
+    setRingColor: setRingColor
+  };
+};