@atlaskit/editor-plugin-show-diff 21.0.3 → 22.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/pm-plugins/decorations/extractContributorTags.js +3 -3
  3. package/dist/cjs/ui/ContributorTag/buildContributorTagDom.js +1 -1
  4. package/dist/cjs/ui/ContributorTag/contributorAvatarRenderer.js +17 -4
  5. package/dist/es2019/pm-plugins/decorations/extractContributorTags.js +3 -3
  6. package/dist/es2019/ui/ContributorTag/buildContributorTagDom.js +1 -1
  7. package/dist/es2019/ui/ContributorTag/contributorAvatarRenderer.js +17 -4
  8. package/dist/esm/pm-plugins/decorations/extractContributorTags.js +3 -3
  9. package/dist/esm/ui/ContributorTag/buildContributorTagDom.js +1 -1
  10. package/dist/esm/ui/ContributorTag/contributorAvatarRenderer.js +17 -4
  11. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-show-diff
2
2
 
3
+ ## 22.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6b392a68c0802`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b392a68c0802) -
8
+ Improve the visibility of agent contributor-tag icons with an icon-shaped drop shadow.
9
+ - Updated dependencies
10
+
11
+ ## 22.0.0
12
+
13
+ ### Patch Changes
14
+
15
+ - [`a99760331343b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a99760331343b) -
16
+ Fix contributor tag ordering: a wide inline/widget change that merely overlapped a block's range
17
+ (rather than being contained by it) was wrongly folded into the block's tag, hiding its own
18
+ attribution.
19
+ - Updated dependencies
20
+
3
21
  ## 21.0.3
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/pm-plugins/decorations/extractContributorTags.js CHANGED
@@ -50,11 +50,11 @@ var leadsReplacement = function leadsReplacement(widget) {
50
50
 
51
51
  /**
52
52
  * Whether `inner` captions the same change as the block decoration `block`, in which case only the
53
- * block keeps the tag — one tag per block. Containment counts in either direction: a leaf block's
54
- * highlight spans the wrapper the block sits in. Merely adjacent ranges keep a tag each.
53
+ * block keeps the tag — one tag per block. Only when the block fully covers `inner`; a wider
54
+ * inline/widget range that merely overlaps the block is a separate change (EDITOR-9473).
55
55
  */
56
56
  var isSameBlockChange = function isSameBlockChange(inner, block) {
57
- return inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
57
+ return inner.spec.attributionKey === block.spec.attributionKey && block.from <= inner.from && inner.to <= block.to;
58
58
  };
59
59
 
60
60
  /**
package/dist/cjs/ui/ContributorTag/buildContributorTagDom.js CHANGED
@@ -110,7 +110,7 @@ var constraintStyle = (0, _lazyNodeView.convertToInlineCss)({
110
110
  var tagStyle = (0, _lazyNodeView.convertToInlineCss)({
111
111
  display: 'inline-flex',
112
112
  alignItems: 'center',
113
- gap: "var(--ds-space-050, 4px)",
113
+ gap: "var(--ds-space-025, 2px)",
114
114
  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
115
115
  maxWidth: '100%',
116
116
  minWidth: 0,
package/dist/cjs/ui/ContributorTag/contributorAvatarRenderer.js CHANGED
@@ -46,6 +46,17 @@ var boxStyle = (0, _lazyNodeView.convertToInlineCss)({
46
46
  width: "".concat(AVATAR_BOX_SIZE, "px"),
47
47
  height: "".concat(AVATAR_BOX_SIZE, "px")
48
48
  });
49
+
50
+ /** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
51
+ var agentBoxStyle = (0, _lazyNodeView.convertToInlineCss)({
52
+ display: 'inline-flex',
53
+ alignItems: 'center',
54
+ justifyContent: 'center',
55
+ flexShrink: 0,
56
+ boxSizing: 'border-box',
57
+ width: "".concat(AVATAR_SIZE, "px"),
58
+ height: "".concat(AVATAR_SIZE, "px")
59
+ });
49
60
  var shapeStyle = (0, _lazyNodeView.convertToInlineCss)({
50
61
  display: 'flex',
51
62
  alignItems: 'center',
@@ -56,6 +67,10 @@ var shapeStyle = (0, _lazyNodeView.convertToInlineCss)({
56
67
  aspectRatio: '1/1',
57
68
  overflow: 'hidden'
58
69
  });
70
+ var agentShadowStyle = (0, _lazyNodeView.convertToInlineCss)({
71
+ // No clip-path on `element`, so the blur isn't cut off.
72
+ filter: "drop-shadow(0 5px 5px ".concat("var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 1px 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 0 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ")")
73
+ });
59
74
  var imageStyle = (0, _lazyNodeView.convertToInlineCss)({
60
75
  display: 'block',
61
76
  width: '100%',
@@ -88,7 +103,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
88
103
  stackIndex = _ref.stackIndex;
89
104
  var isAgent = contributor.kind === 'agent';
90
105
  var element = doc.createElement('span');
91
- element.setAttribute('style', boxStyle);
106
+ element.setAttribute('style', isAgent ? "".concat(agentBoxStyle, " ").concat(agentShadowStyle) : boxStyle);
92
107
  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
93
108
  // announcement comes from.
94
109
  element.setAttribute('aria-hidden', 'true');
@@ -99,7 +114,6 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
99
114
  shape.setAttribute('style', shapeStyle);
100
115
  element.appendChild(shape);
101
116
  if (isAgent) {
102
- element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
103
117
  shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
104
118
  } else {
105
119
  shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
@@ -148,8 +162,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
148
162
  }
149
163
  var setRingColor = function setRingColor(nextRingColor) {
150
164
  if (isAgent) {
151
- element.style.setProperty('background', nextRingColor);
152
- // Shows through wherever the artwork is transparent, as the avatar background did.
165
+ // No ring; shows through wherever the artwork is transparent, as before.
153
166
  shape.style.setProperty('background', nextRingColor);
154
167
  return;
155
168
  }
package/dist/es2019/pm-plugins/decorations/extractContributorTags.js CHANGED
@@ -29,10 +29,10 @@ const leadsReplacement = widget => fg('confluence_ncs_step_diffing_version_histo
29
29
 
30
30
  /**
31
31
  * Whether `inner` captions the same change as the block decoration `block`, in which case only the
32
- * block keeps the tag — one tag per block. Containment counts in either direction: a leaf block's
33
- * highlight spans the wrapper the block sits in. Merely adjacent ranges keep a tag each.
32
+ * block keeps the tag — one tag per block. Only when the block fully covers `inner`; a wider
33
+ * inline/widget range that merely overlaps the block is a separate change (EDITOR-9473).
34
34
  */
35
- const isSameBlockChange = (inner, block) => inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
35
+ const isSameBlockChange = (inner, block) => inner.spec.attributionKey === block.spec.attributionKey && block.from <= inner.from && inner.to <= block.to;
36
36
 
37
37
  /**
38
38
  * Whether `outer` is the box `inner` sits in, for one contributor. Nested blocks they inserted read
package/dist/es2019/ui/ContributorTag/buildContributorTagDom.js CHANGED
@@ -102,7 +102,7 @@ const constraintStyle = convertToInlineCss({
102
102
  const tagStyle = convertToInlineCss({
103
103
  display: 'inline-flex',
104
104
  alignItems: 'center',
105
- gap: "var(--ds-space-050, 4px)",
105
+ gap: "var(--ds-space-025, 2px)",
106
106
  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
107
107
  maxWidth: '100%',
108
108
  minWidth: 0,
package/dist/es2019/ui/ContributorTag/contributorAvatarRenderer.js CHANGED
@@ -41,6 +41,17 @@ const boxStyle = convertToInlineCss({
41
41
  width: `${AVATAR_BOX_SIZE}px`,
42
42
  height: `${AVATAR_BOX_SIZE}px`
43
43
  });
44
+
45
+ /** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
46
+ const agentBoxStyle = convertToInlineCss({
47
+ display: 'inline-flex',
48
+ alignItems: 'center',
49
+ justifyContent: 'center',
50
+ flexShrink: 0,
51
+ boxSizing: 'border-box',
52
+ width: `${AVATAR_SIZE}px`,
53
+ height: `${AVATAR_SIZE}px`
54
+ });
44
55
  const shapeStyle = convertToInlineCss({
45
56
  display: 'flex',
46
57
  alignItems: 'center',
@@ -51,6 +62,10 @@ const shapeStyle = convertToInlineCss({
51
62
  aspectRatio: '1/1',
52
63
  overflow: 'hidden'
53
64
  });
65
+ const agentShadowStyle = convertToInlineCss({
66
+ // No clip-path on `element`, so the blur isn't cut off.
67
+ filter: `drop-shadow(0 5px 5px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"}) drop-shadow(0 1px 2px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"}) drop-shadow(0 0 2px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"})`
68
+ });
54
69
  const imageStyle = convertToInlineCss({
55
70
  display: 'block',
56
71
  width: '100%',
@@ -84,7 +99,7 @@ export const contributorAvatarRenderer = ({
84
99
  }) => {
85
100
  const isAgent = contributor.kind === 'agent';
86
101
  const element = doc.createElement('span');
87
- element.setAttribute('style', boxStyle);
102
+ element.setAttribute('style', isAgent ? `${agentBoxStyle} ${agentShadowStyle}` : boxStyle);
88
103
  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
89
104
  // announcement comes from.
90
105
  element.setAttribute('aria-hidden', 'true');
@@ -95,7 +110,6 @@ export const contributorAvatarRenderer = ({
95
110
  shape.setAttribute('style', shapeStyle);
96
111
  element.appendChild(shape);
97
112
  if (isAgent) {
98
- element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
99
113
  shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
100
114
  } else {
101
115
  shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
@@ -144,8 +158,7 @@ export const contributorAvatarRenderer = ({
144
158
  }
145
159
  const setRingColor = nextRingColor => {
146
160
  if (isAgent) {
147
- element.style.setProperty('background', nextRingColor);
148
- // Shows through wherever the artwork is transparent, as the avatar background did.
161
+ // No ring; shows through wherever the artwork is transparent, as before.
149
162
  shape.style.setProperty('background', nextRingColor);
150
163
  return;
151
164
  }
package/dist/esm/pm-plugins/decorations/extractContributorTags.js CHANGED
@@ -44,11 +44,11 @@ var leadsReplacement = function leadsReplacement(widget) {
44
44
 
45
45
  /**
46
46
  * Whether `inner` captions the same change as the block decoration `block`, in which case only the
47
- * block keeps the tag — one tag per block. Containment counts in either direction: a leaf block's
48
- * highlight spans the wrapper the block sits in. Merely adjacent ranges keep a tag each.
47
+ * block keeps the tag — one tag per block. Only when the block fully covers `inner`; a wider
48
+ * inline/widget range that merely overlaps the block is a separate change (EDITOR-9473).
49
49
  */
50
50
  var isSameBlockChange = function isSameBlockChange(inner, block) {
51
- return inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
51
+ return inner.spec.attributionKey === block.spec.attributionKey && block.from <= inner.from && inner.to <= block.to;
52
52
  };
53
53
 
54
54
  /**
package/dist/esm/ui/ContributorTag/buildContributorTagDom.js CHANGED
@@ -103,7 +103,7 @@ var constraintStyle = convertToInlineCss({
103
103
  var tagStyle = convertToInlineCss({
104
104
  display: 'inline-flex',
105
105
  alignItems: 'center',
106
- gap: "var(--ds-space-050, 4px)",
106
+ gap: "var(--ds-space-025, 2px)",
107
107
  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
108
108
  maxWidth: '100%',
109
109
  minWidth: 0,
package/dist/esm/ui/ContributorTag/contributorAvatarRenderer.js CHANGED
@@ -41,6 +41,17 @@ var boxStyle = convertToInlineCss({
41
41
  width: "".concat(AVATAR_BOX_SIZE, "px"),
42
42
  height: "".concat(AVATAR_BOX_SIZE, "px")
43
43
  });
44
+
45
+ /** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
46
+ var agentBoxStyle = convertToInlineCss({
47
+ display: 'inline-flex',
48
+ alignItems: 'center',
49
+ justifyContent: 'center',
50
+ flexShrink: 0,
51
+ boxSizing: 'border-box',
52
+ width: "".concat(AVATAR_SIZE, "px"),
53
+ height: "".concat(AVATAR_SIZE, "px")
54
+ });
44
55
  var shapeStyle = convertToInlineCss({
45
56
  display: 'flex',
46
57
  alignItems: 'center',
@@ -51,6 +62,10 @@ var shapeStyle = convertToInlineCss({
51
62
  aspectRatio: '1/1',
52
63
  overflow: 'hidden'
53
64
  });
65
+ var agentShadowStyle = convertToInlineCss({
66
+ // No clip-path on `element`, so the blur isn't cut off.
67
+ filter: "drop-shadow(0 5px 5px ".concat("var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 1px 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 0 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ")")
68
+ });
54
69
  var imageStyle = convertToInlineCss({
55
70
  display: 'block',
56
71
  width: '100%',
@@ -83,7 +98,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
83
98
  stackIndex = _ref.stackIndex;
84
99
  var isAgent = contributor.kind === 'agent';
85
100
  var element = doc.createElement('span');
86
- element.setAttribute('style', boxStyle);
101
+ element.setAttribute('style', isAgent ? "".concat(agentBoxStyle, " ").concat(agentShadowStyle) : boxStyle);
87
102
  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
88
103
  // announcement comes from.
89
104
  element.setAttribute('aria-hidden', 'true');
@@ -94,7 +109,6 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
94
109
  shape.setAttribute('style', shapeStyle);
95
110
  element.appendChild(shape);
96
111
  if (isAgent) {
97
- element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
98
112
  shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
99
113
  } else {
100
114
  shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
@@ -143,8 +157,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
143
157
  }
144
158
  var setRingColor = function setRingColor(nextRingColor) {
145
159
  if (isAgent) {
146
- element.style.setProperty('background', nextRingColor);
147
- // Shows through wherever the artwork is transparent, as the avatar background did.
160
+ // No ring; shows through wherever the artwork is transparent, as before.
148
161
  shape.style.setProperty('background', nextRingColor);
149
162
  return;
150
163
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-show-diff",
3
- "version": "21.0.3",
3
+ "version": "22.0.1",
4
4
  "description": "ShowDiff plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,10 +29,10 @@
29
29
  "@atlaskit/agent-color": "^1.0.0",
30
30
  "@atlaskit/avatar": "^30.0.0",
31
31
  "@atlaskit/custom-steps": "^1.1.0",
32
- "@atlaskit/editor-plugin-accessibility-utils": "^23.0.0",
33
- "@atlaskit/editor-plugin-analytics": "^23.0.0",
34
- "@atlaskit/editor-plugin-limited-mode": "^20.0.0",
35
- "@atlaskit/editor-plugin-user-intent": "^21.0.0",
32
+ "@atlaskit/editor-plugin-accessibility-utils": "^24.0.0",
33
+ "@atlaskit/editor-plugin-analytics": "^24.0.0",
34
+ "@atlaskit/editor-plugin-limited-mode": "^21.0.0",
35
+ "@atlaskit/editor-plugin-user-intent": "^22.0.0",
36
36
  "@atlaskit/editor-prosemirror": "^9.0.0",
37
37
  "@atlaskit/editor-shared-styles": "^4.3.0",
38
38
  "@atlaskit/editor-tables": "^3.2.0",
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/button": "^25.4.0",
54
54
  "@atlaskit/css": "^1.1.0",
55
55
  "@atlaskit/dropdown-menu": "^21.0.0",
56
- "@atlaskit/editor-core": "^233.0.0",
56
+ "@atlaskit/editor-core": "^234.0.0",
57
57
  "@atlaskit/editor-json-transformer": "^10.0.0",
58
58
  "@atlaskit/editor-plugins": "^16.1.0",
59
59
  "@atlaskit/form": "^18.0.0",
@@ -63,15 +63,15 @@
63
63
  "@atlaskit/util-data-test": "^19.1.0",
64
64
  "@atlassian/confluence-presets": "workspace:^",
65
65
  "@atlassian/content-reconciliation": "^0.1.3506",
66
- "@atlassian/editor-ai-injected-editors": "^37.0.0",
67
- "@atlassian/editor-plugin-ai": "^77.0.0",
66
+ "@atlassian/editor-ai-injected-editors": "^38.0.0",
67
+ "@atlassian/editor-plugin-ai": "^78.0.0",
68
68
  "@atlassian/structured-docs-types": "workspace:^",
69
69
  "react": "^19.2.0",
70
70
  "react-dom": "^19.2.0",
71
71
  "react-intl": "^7.0.0"
72
72
  },
73
73
  "peerDependencies": {
74
- "@atlaskit/editor-common": "^127.2.0",
74
+ "@atlaskit/editor-common": "^128.0.0",
75
75
  "react": "^18.2.0 || ^19.2.0",
76
76
  "react-dom": "^18.2.0 || ^19.2.0",
77
77
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"