@atlaskit/editor-plugin-show-diff 22.0.5 → 23.0.0
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.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/pm-plugins/decorations/createAnchorDecorationWidgets.js +10 -3
- package/dist/cjs/ui/IndicatorBar/IndicatorBar.compiled.css +1 -0
- package/dist/cjs/ui/IndicatorBar/IndicatorBar.js +3 -1
- package/dist/es2019/pm-plugins/decorations/createAnchorDecorationWidgets.js +9 -2
- package/dist/es2019/ui/IndicatorBar/IndicatorBar.compiled.css +1 -0
- package/dist/es2019/ui/IndicatorBar/IndicatorBar.js +3 -1
- package/dist/esm/pm-plugins/decorations/createAnchorDecorationWidgets.js +10 -3
- package/dist/esm/ui/IndicatorBar/IndicatorBar.compiled.css +1 -0
- package/dist/esm/ui/IndicatorBar/IndicatorBar.js +3 -1
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 23.0.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 22.0.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`3f41dc18d7b3e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f41dc18d7b3e) -
|
|
14
|
+
EDITOR-9252 Align show diff indicators in Firefox without transformed anchors, disable
|
|
15
|
+
anchor-based hiding so indicators remain visible when the optional left-offset decoration is
|
|
16
|
+
absent, and size list replacement widgets to their content under
|
|
17
|
+
platform_editor_ai_show_diff_patch_2.
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 22.0.5
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -235,7 +235,10 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
|
|
|
235
235
|
anchor.style.setProperty('anchor-name', "--".concat(leftAnchorKey));
|
|
236
236
|
anchor.style.setProperty('position', 'absolute');
|
|
237
237
|
anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
|
|
238
|
-
|
|
238
|
+
// transforms on anchors have limited browser support
|
|
239
|
+
if (!(0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
|
|
240
|
+
anchor.style.setProperty('transform', 'translateX(-50%)');
|
|
241
|
+
}
|
|
239
242
|
wrapper.appendChild(anchor);
|
|
240
243
|
var _measureWidth = function measureWidth() {
|
|
241
244
|
var _nodeDOM$querySelecto;
|
|
@@ -248,7 +251,8 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
|
|
|
248
251
|
return;
|
|
249
252
|
}
|
|
250
253
|
var measuredElements = widthMeasureTargets.flatMap(function (_ref2) {
|
|
251
|
-
var
|
|
254
|
+
var leftOffset = _ref2.leftOffset,
|
|
255
|
+
targetMeasureElement = _ref2.measureElement,
|
|
252
256
|
measureLeft = _ref2.measureLeft,
|
|
253
257
|
measurePos = _ref2.measurePos,
|
|
254
258
|
measureSelector = _ref2.measureSelector;
|
|
@@ -260,6 +264,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
|
|
|
260
264
|
return elements.map(function (element) {
|
|
261
265
|
return {
|
|
262
266
|
element: element,
|
|
267
|
+
leftOffset: leftOffset,
|
|
263
268
|
measureLeft: measureLeft
|
|
264
269
|
};
|
|
265
270
|
});
|
|
@@ -289,7 +294,9 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
|
|
|
289
294
|
if (widest.measureLeft) {
|
|
290
295
|
var left = widest.element.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
|
|
291
296
|
anchor.style.setProperty('left', "".concat(left, "px"));
|
|
292
|
-
|
|
297
|
+
} else {
|
|
298
|
+
var _widest$leftOffset;
|
|
299
|
+
anchor.style.setProperty('left', "calc(50% - ".concat((_widest$leftOffset = widest.leftOffset) !== null && _widest$leftOffset !== void 0 ? _widest$leftOffset : 0, "px - ").concat(widest.element.offsetWidth / 2, "px)"));
|
|
293
300
|
}
|
|
294
301
|
anchor.style.setProperty('width', "".concat(widest.element.offsetWidth, "px"));
|
|
295
302
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._17c61i8t{position-visibility:anchors-valid}
|
|
2
|
+
._17c6oga4{position-visibility:always}
|
|
2
3
|
._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
|
|
3
4
|
._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
|
|
4
5
|
._1bsb1l7b{width:3px}
|
|
@@ -9,11 +9,13 @@ exports.IndicatorBar = IndicatorBar;
|
|
|
9
9
|
require("./IndicatorBar.compiled.css");
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _runtime = require("@compiled/react/runtime");
|
|
12
|
+
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
12
13
|
var _factory = require("../../pm-plugins/decorations/colorSchemes/factory");
|
|
13
14
|
var _schemes = require("../../pm-plugins/decorations/colorSchemes/schemes");
|
|
14
15
|
var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
|
|
15
16
|
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); }
|
|
16
17
|
var barStyles = null;
|
|
18
|
+
var barAlwaysVisibleStyles = null;
|
|
17
19
|
var getIndicatorColor = function getIndicatorColor(colorScheme, isInserted) {
|
|
18
20
|
if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
|
|
19
21
|
return "var(--ds-border-information, #357DE8)";
|
|
@@ -39,6 +41,6 @@ function IndicatorBar(_ref) {
|
|
|
39
41
|
top: "anchor(--".concat(anchorTop, " top)"),
|
|
40
42
|
bottom: "anchor(--".concat(anchorBottom, " bottom)")
|
|
41
43
|
},
|
|
42
|
-
className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
|
|
44
|
+
className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n", (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && "_17c6oga4"])
|
|
43
45
|
});
|
|
44
46
|
}
|
|
@@ -224,7 +224,10 @@ export const createLeftAnchorWidget = ({
|
|
|
224
224
|
anchor.style.setProperty('anchor-name', `--${leftAnchorKey}`);
|
|
225
225
|
anchor.style.setProperty('position', 'absolute');
|
|
226
226
|
anchor.style.setProperty('left', `calc(50% - ${(edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0}px)`);
|
|
227
|
-
|
|
227
|
+
// transforms on anchors have limited browser support
|
|
228
|
+
if (!fg('platform_editor_ai_show_diff_patch_2')) {
|
|
229
|
+
anchor.style.setProperty('transform', 'translateX(-50%)');
|
|
230
|
+
}
|
|
228
231
|
wrapper.appendChild(anchor);
|
|
229
232
|
const measureWidth = () => {
|
|
230
233
|
var _nodeDOM$querySelecto;
|
|
@@ -237,6 +240,7 @@ export const createLeftAnchorWidget = ({
|
|
|
237
240
|
return;
|
|
238
241
|
}
|
|
239
242
|
const measuredElements = widthMeasureTargets.flatMap(({
|
|
243
|
+
leftOffset,
|
|
240
244
|
measureElement: targetMeasureElement,
|
|
241
245
|
measureLeft,
|
|
242
246
|
measurePos,
|
|
@@ -249,6 +253,7 @@ export const createLeftAnchorWidget = ({
|
|
|
249
253
|
const elements = nodeDOM instanceof HTMLElement ? measureSelector ? Array.from(nodeDOM.querySelectorAll(measureSelector)) : [nodeDOM] : [];
|
|
250
254
|
return elements.map(element => ({
|
|
251
255
|
element,
|
|
256
|
+
leftOffset,
|
|
252
257
|
measureLeft
|
|
253
258
|
}));
|
|
254
259
|
});
|
|
@@ -268,7 +273,9 @@ export const createLeftAnchorWidget = ({
|
|
|
268
273
|
if (widest.measureLeft) {
|
|
269
274
|
const left = widest.element.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
|
|
270
275
|
anchor.style.setProperty('left', `${left}px`);
|
|
271
|
-
|
|
276
|
+
} else {
|
|
277
|
+
var _widest$leftOffset;
|
|
278
|
+
anchor.style.setProperty('left', `calc(50% - ${(_widest$leftOffset = widest.leftOffset) !== null && _widest$leftOffset !== void 0 ? _widest$leftOffset : 0}px - ${widest.element.offsetWidth / 2}px)`);
|
|
272
279
|
}
|
|
273
280
|
anchor.style.setProperty('width', `${widest.element.offsetWidth}px`);
|
|
274
281
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._17c61i8t{position-visibility:anchors-valid}
|
|
2
|
+
._17c6oga4{position-visibility:always}
|
|
2
3
|
._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
|
|
3
4
|
._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
|
|
4
5
|
._1bsb1l7b{width:3px}
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import "./IndicatorBar.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
5
6
|
import { getAccentBorderColor } from '../../pm-plugins/decorations/colorSchemes/factory';
|
|
6
7
|
import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
|
|
7
8
|
import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
|
|
8
9
|
const barStyles = null;
|
|
10
|
+
const barAlwaysVisibleStyles = null;
|
|
9
11
|
const getIndicatorColor = (colorScheme, isInserted) => {
|
|
10
12
|
if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
|
|
11
13
|
return "var(--ds-border-information, #357DE8)";
|
|
@@ -30,6 +32,6 @@ export function IndicatorBar({
|
|
|
30
32
|
top: `anchor(--${anchorTop} top)`,
|
|
31
33
|
bottom: `anchor(--${anchorBottom} bottom)`
|
|
32
34
|
},
|
|
33
|
-
className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
|
|
35
|
+
className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n", fg('platform_editor_ai_show_diff_patch_2') && "_17c6oga4"])
|
|
34
36
|
});
|
|
35
37
|
}
|
|
@@ -229,7 +229,10 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
|
|
|
229
229
|
anchor.style.setProperty('anchor-name', "--".concat(leftAnchorKey));
|
|
230
230
|
anchor.style.setProperty('position', 'absolute');
|
|
231
231
|
anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
|
|
232
|
-
|
|
232
|
+
// transforms on anchors have limited browser support
|
|
233
|
+
if (!fg('platform_editor_ai_show_diff_patch_2')) {
|
|
234
|
+
anchor.style.setProperty('transform', 'translateX(-50%)');
|
|
235
|
+
}
|
|
233
236
|
wrapper.appendChild(anchor);
|
|
234
237
|
var _measureWidth = function measureWidth() {
|
|
235
238
|
var _nodeDOM$querySelecto;
|
|
@@ -242,7 +245,8 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
|
|
|
242
245
|
return;
|
|
243
246
|
}
|
|
244
247
|
var measuredElements = widthMeasureTargets.flatMap(function (_ref2) {
|
|
245
|
-
var
|
|
248
|
+
var leftOffset = _ref2.leftOffset,
|
|
249
|
+
targetMeasureElement = _ref2.measureElement,
|
|
246
250
|
measureLeft = _ref2.measureLeft,
|
|
247
251
|
measurePos = _ref2.measurePos,
|
|
248
252
|
measureSelector = _ref2.measureSelector;
|
|
@@ -254,6 +258,7 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
|
|
|
254
258
|
return elements.map(function (element) {
|
|
255
259
|
return {
|
|
256
260
|
element: element,
|
|
261
|
+
leftOffset: leftOffset,
|
|
257
262
|
measureLeft: measureLeft
|
|
258
263
|
};
|
|
259
264
|
});
|
|
@@ -283,7 +288,9 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
|
|
|
283
288
|
if (widest.measureLeft) {
|
|
284
289
|
var left = widest.element.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
|
|
285
290
|
anchor.style.setProperty('left', "".concat(left, "px"));
|
|
286
|
-
|
|
291
|
+
} else {
|
|
292
|
+
var _widest$leftOffset;
|
|
293
|
+
anchor.style.setProperty('left', "calc(50% - ".concat((_widest$leftOffset = widest.leftOffset) !== null && _widest$leftOffset !== void 0 ? _widest$leftOffset : 0, "px - ").concat(widest.element.offsetWidth / 2, "px)"));
|
|
287
294
|
}
|
|
288
295
|
anchor.style.setProperty('width', "".concat(widest.element.offsetWidth, "px"));
|
|
289
296
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._17c61i8t{position-visibility:anchors-valid}
|
|
2
|
+
._17c6oga4{position-visibility:always}
|
|
2
3
|
._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
|
|
3
4
|
._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
|
|
4
5
|
._1bsb1l7b{width:3px}
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import "./IndicatorBar.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
5
6
|
import { getAccentBorderColor } from '../../pm-plugins/decorations/colorSchemes/factory';
|
|
6
7
|
import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
|
|
7
8
|
import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
|
|
8
9
|
var barStyles = null;
|
|
10
|
+
var barAlwaysVisibleStyles = null;
|
|
9
11
|
var getIndicatorColor = function getIndicatorColor(colorScheme, isInserted) {
|
|
10
12
|
if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
|
|
11
13
|
return "var(--ds-border-information, #357DE8)";
|
|
@@ -31,6 +33,6 @@ export function IndicatorBar(_ref) {
|
|
|
31
33
|
top: "anchor(--".concat(anchorTop, " top)"),
|
|
32
34
|
bottom: "anchor(--".concat(anchorBottom, " bottom)")
|
|
33
35
|
},
|
|
34
|
-
className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
|
|
36
|
+
className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n", fg('platform_editor_ai_show_diff_patch_2') && "_17c6oga4"])
|
|
35
37
|
});
|
|
36
38
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "23.0.0",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"sideEffects": false,
|
|
26
26
|
"atlaskit:src": "src/index.ts",
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@atlaskit/adf-schema": "^57.
|
|
28
|
+
"@atlaskit/adf-schema": "^57.7.0",
|
|
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": "^
|
|
33
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
34
|
-
"@atlaskit/editor-plugin-limited-mode": "^
|
|
35
|
-
"@atlaskit/editor-plugin-user-intent": "^
|
|
32
|
+
"@atlaskit/editor-plugin-accessibility-utils": "^25.0.0",
|
|
33
|
+
"@atlaskit/editor-plugin-analytics": "^25.0.0",
|
|
34
|
+
"@atlaskit/editor-plugin-limited-mode": "^22.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-user-intent": "^23.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,9 +53,9 @@
|
|
|
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": "^
|
|
56
|
+
"@atlaskit/editor-core": "^235.0.0",
|
|
57
57
|
"@atlaskit/editor-json-transformer": "^10.0.0",
|
|
58
|
-
"@atlaskit/editor-plugins": "^16.
|
|
58
|
+
"@atlaskit/editor-plugins": "^16.2.0",
|
|
59
59
|
"@atlaskit/form": "^18.1.0",
|
|
60
60
|
"@atlaskit/section-message": "^10.2.0",
|
|
61
61
|
"@atlaskit/textarea": "^10.2.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": "^
|
|
67
|
-
"@atlassian/editor-plugin-ai": "^
|
|
66
|
+
"@atlassian/editor-ai-injected-editors": "^39.0.0",
|
|
67
|
+
"@atlassian/editor-plugin-ai": "^79.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": "^
|
|
74
|
+
"@atlaskit/editor-common": "^129.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"
|