@atlaskit/editor-plugin-show-diff 26.0.1 → 26.0.3

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 (6) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/pm-plugins/scrollToDiff.js +41 -32
  3. package/dist/es2019/pm-plugins/scrollToDiff.js +39 -30
  4. package/dist/esm/pm-plugins/scrollToDiff.js +41 -32
  5. package/dist/types/pm-plugins/markViews.d.ts +1 -1
  6. package/package.json +6 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-show-diff
2
2
 
3
+ ## 26.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 26.0.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`fa1e60dbfa6e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa1e60dbfa6e5) -
14
+ Keep rendered diffs visible when navigating inside horizontally overflowing tables, behind
15
+ `platform_editor_ai_suggestion_table_scroll_fix`.
16
+ - Updated dependencies
17
+
3
18
  ## 26.0.1
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/pm-plugins/scrollToDiff.js CHANGED
@@ -8,6 +8,7 @@ var _table = require("@atlaskit/editor-common/styles/table");
8
8
  var _getStickyHeaderHeight = require("@atlaskit/editor-common/table/get-sticky-header-height");
9
9
  var _fg = require("@atlaskit/platform-feature-flags/fg");
10
10
  var _decorationKeys = require("./decorations/decorationKeys");
11
+ var _getWidgetElement = require("./decorations/utils/getWidgetElement");
11
12
  /**
12
13
  * Extra space above the scrolled-to element so it does not sit flush under the
13
14
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -24,21 +25,21 @@ function updateScrollTargetMargin(view, targetPos, api) {
24
25
  var tableHeaderHeight = isLimitedModeEnabled ? undefined : (0, _getStickyHeaderHeight.getStickyHeaderHeight)(view, targetPos);
25
26
  view.dom.style.setProperty(_decorationKeys.SCROLL_TARGET_MARGIN_CSS_PROPERTY, "".concat(tableHeaderHeight ? tableHeaderHeight + _table.tableMarginTop : 0, "px"));
26
27
  }
27
-
28
- /**
29
- * Returns the resolved HTMLElement for a given DOM node, walking up to the
30
- * parent element if the node itself is not an Element (e.g. a text node).
31
- */
32
28
  function scrollToSelection(node) {
33
- var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
29
+ // ProseMirror may return a text node; scroll its parent element instead.
30
+ var element = node instanceof Element ? node : node === null || node === void 0 ? void 0 : node.parentElement;
34
31
  if (!(element instanceof HTMLElement)) {
35
32
  return;
36
33
  }
34
+ var scrollOptions = {
35
+ behavior: 'smooth',
36
+ block: 'start'
37
+ };
38
+ if ((0, _fg.fg)('platform_editor_ai_suggestion_table_scroll_fix')) {
39
+ scrollOptions.inline = 'center';
40
+ }
37
41
  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
38
- element.scrollIntoView({
39
- behavior: 'smooth',
40
- block: 'start'
41
- });
42
+ element.scrollIntoView(scrollOptions);
42
43
  return;
43
44
  }
44
45
 
@@ -46,14 +47,25 @@ function scrollToSelection(node) {
46
47
  var previousScrollMarginTop = element.style.scrollMarginTop;
47
48
  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
48
49
  try {
49
- element.scrollIntoView({
50
- behavior: 'smooth',
51
- block: 'start'
52
- });
50
+ element.scrollIntoView(scrollOptions);
53
51
  } finally {
54
52
  element.style.scrollMarginTop = previousScrollMarginTop;
55
53
  }
56
54
  }
55
+ function resolveScrollTarget(view, target) {
56
+ var _view$domAtPos;
57
+ if ((0, _decorationKeys.isDiffDecoration)(target) && target.spec.decorationType === 'widget') {
58
+ return (0, _getWidgetElement.getWidgetElement)(target);
59
+ }
60
+ if ((0, _decorationKeys.isDiffDecoration)(target) && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
61
+ var _Array$from$find;
62
+ return (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(function (element) {
63
+ return element.dataset.diffId === target.spec.diffId;
64
+ })) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target.from);
65
+ }
66
+ var targetNode = view.nodeDOM(target.from);
67
+ return targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
68
+ }
57
69
 
58
70
  /**
59
71
  * Schedules scrolling to the decoration at the given index after the next frame. Defaults to the
@@ -73,30 +85,27 @@ var scrollToDecoration = exports.scrollToDecoration = function scrollToDecoratio
73
85
  // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
74
86
  // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
75
87
  var target = (0, _decorationKeys.isDiffDecoration)(decoration) && decoration.spec.scrollTarget || decoration;
76
- var rafId = requestAnimationFrame(function () {
77
- rafId = null;
88
+ var rafId = null;
89
+ var cancelled = false;
90
+ var scrollToTarget = function scrollToTarget() {
91
+ if (view.isDestroyed) {
92
+ return;
93
+ }
78
94
  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
79
95
  updateScrollTargetMargin(view, target.from, api);
80
96
  }
81
- if ((0, _decorationKeys.isDiffDecoration)(target) && target.spec.decorationType === 'widget') {
82
- var _target$type;
83
- // @ts-expect-error - decoration.type is not typed public API
84
- var widgetDom = target === null || target === void 0 || (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
85
- scrollToSelection(widgetDom);
86
- } else if ((0, _decorationKeys.isDiffDecoration)(target) && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
87
- var _Array$from$find;
88
- var targetNode = (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(function (element) {
89
- return element.dataset.diffId === target.spec.diffId;
90
- })) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
91
- scrollToSelection(targetNode);
92
- } else {
93
- var _view$domAtPos;
94
- var _targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
95
- var node = _targetNode instanceof Element ? _targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
96
- scrollToSelection(node);
97
+ scrollToSelection(resolveScrollTarget(view, target));
98
+ };
99
+
100
+ // Called from the plugin's post-DOM update hook; defer measurement until layout can settle.
101
+ rafId = requestAnimationFrame(function () {
102
+ rafId = null;
103
+ if (!cancelled) {
104
+ scrollToTarget();
97
105
  }
98
106
  });
99
107
  return function () {
108
+ cancelled = true;
100
109
  if (rafId !== null) {
101
110
  cancelAnimationFrame(rafId);
102
111
  rafId = null;
package/dist/es2019/pm-plugins/scrollToDiff.js CHANGED
@@ -2,6 +2,7 @@ import { tableMarginTop } from '@atlaskit/editor-common/styles/table';
2
2
  import { getStickyHeaderHeight } from '@atlaskit/editor-common/table/get-sticky-header-height';
3
3
  import { fg } from '@atlaskit/platform-feature-flags/fg';
4
4
  import { isDiffDecoration, SCROLL_TARGET_MARGIN_CSS_PROPERTY } from './decorations/decorationKeys';
5
+ import { getWidgetElement } from './decorations/utils/getWidgetElement';
5
6
 
6
7
  /**
7
8
  * Extra space above the scrolled-to element so it does not sit flush under the
@@ -19,21 +20,21 @@ function updateScrollTargetMargin(view, targetPos, api) {
19
20
  const tableHeaderHeight = isLimitedModeEnabled ? undefined : getStickyHeaderHeight(view, targetPos);
20
21
  view.dom.style.setProperty(SCROLL_TARGET_MARGIN_CSS_PROPERTY, `${tableHeaderHeight ? tableHeaderHeight + tableMarginTop : 0}px`);
21
22
  }
22
-
23
- /**
24
- * Returns the resolved HTMLElement for a given DOM node, walking up to the
25
- * parent element if the node itself is not an Element (e.g. a text node).
26
- */
27
23
  function scrollToSelection(node) {
28
- const element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
24
+ // ProseMirror may return a text node; scroll its parent element instead.
25
+ const element = node instanceof Element ? node : node === null || node === void 0 ? void 0 : node.parentElement;
29
26
  if (!(element instanceof HTMLElement)) {
30
27
  return;
31
28
  }
29
+ const scrollOptions = {
30
+ behavior: 'smooth',
31
+ block: 'start'
32
+ };
33
+ if (fg('platform_editor_ai_suggestion_table_scroll_fix')) {
34
+ scrollOptions.inline = 'center';
35
+ }
32
36
  if (fg('platform_editor_ai_show_diff_patch_1')) {
33
- element.scrollIntoView({
34
- behavior: 'smooth',
35
- block: 'start'
36
- });
37
+ element.scrollIntoView(scrollOptions);
37
38
  return;
38
39
  }
39
40
 
@@ -41,14 +42,23 @@ function scrollToSelection(node) {
41
42
  const previousScrollMarginTop = element.style.scrollMarginTop;
42
43
  element.style.scrollMarginTop = `${SCROLL_TOP_MARGIN_PX}px`;
43
44
  try {
44
- element.scrollIntoView({
45
- behavior: 'smooth',
46
- block: 'start'
47
- });
45
+ element.scrollIntoView(scrollOptions);
48
46
  } finally {
49
47
  element.style.scrollMarginTop = previousScrollMarginTop;
50
48
  }
51
49
  }
50
+ function resolveScrollTarget(view, target) {
51
+ var _view$domAtPos;
52
+ if (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
53
+ return getWidgetElement(target);
54
+ }
55
+ if (isDiffDecoration(target) && fg('platform_editor_ai_show_diff_patch_2')) {
56
+ var _Array$from$find;
57
+ return (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(element => element.dataset.diffId === target.spec.diffId)) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target.from);
58
+ }
59
+ const targetNode = view.nodeDOM(target.from);
60
+ return targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
61
+ }
52
62
 
53
63
  /**
54
64
  * Schedules scrolling to the decoration at the given index after the next frame. Defaults to the
@@ -66,28 +76,27 @@ export const scrollToDecoration = (view, decorations, activeIndex = 0, api) => {
66
76
  // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
67
77
  // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
68
78
  const target = isDiffDecoration(decoration) && decoration.spec.scrollTarget || decoration;
69
- let rafId = requestAnimationFrame(() => {
70
- rafId = null;
79
+ let rafId = null;
80
+ let cancelled = false;
81
+ const scrollToTarget = () => {
82
+ if (view.isDestroyed) {
83
+ return;
84
+ }
71
85
  if (fg('platform_editor_ai_show_diff_patch_1')) {
72
86
  updateScrollTargetMargin(view, target.from, api);
73
87
  }
74
- if (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
75
- var _target$type;
76
- // @ts-expect-error - decoration.type is not typed public API
77
- const widgetDom = target === null || target === void 0 ? void 0 : (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
78
- scrollToSelection(widgetDom);
79
- } else if (isDiffDecoration(target) && fg('platform_editor_ai_show_diff_patch_2')) {
80
- var _Array$from$find;
81
- const targetNode = (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(element => element.dataset.diffId === target.spec.diffId)) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
82
- scrollToSelection(targetNode);
83
- } else {
84
- var _view$domAtPos;
85
- const targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
86
- const node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
87
- scrollToSelection(node);
88
+ scrollToSelection(resolveScrollTarget(view, target));
89
+ };
90
+
91
+ // Called from the plugin's post-DOM update hook; defer measurement until layout can settle.
92
+ rafId = requestAnimationFrame(() => {
93
+ rafId = null;
94
+ if (!cancelled) {
95
+ scrollToTarget();
88
96
  }
89
97
  });
90
98
  return () => {
99
+ cancelled = true;
91
100
  if (rafId !== null) {
92
101
  cancelAnimationFrame(rafId);
93
102
  rafId = null;
package/dist/esm/pm-plugins/scrollToDiff.js CHANGED
@@ -2,6 +2,7 @@ import { tableMarginTop } from '@atlaskit/editor-common/styles/table';
2
2
  import { getStickyHeaderHeight } from '@atlaskit/editor-common/table/get-sticky-header-height';
3
3
  import { fg } from '@atlaskit/platform-feature-flags/fg';
4
4
  import { isDiffDecoration, SCROLL_TARGET_MARGIN_CSS_PROPERTY } from './decorations/decorationKeys';
5
+ import { getWidgetElement } from './decorations/utils/getWidgetElement';
5
6
 
6
7
  /**
7
8
  * Extra space above the scrolled-to element so it does not sit flush under the
@@ -19,21 +20,21 @@ function updateScrollTargetMargin(view, targetPos, api) {
19
20
  var tableHeaderHeight = isLimitedModeEnabled ? undefined : getStickyHeaderHeight(view, targetPos);
20
21
  view.dom.style.setProperty(SCROLL_TARGET_MARGIN_CSS_PROPERTY, "".concat(tableHeaderHeight ? tableHeaderHeight + tableMarginTop : 0, "px"));
21
22
  }
22
-
23
- /**
24
- * Returns the resolved HTMLElement for a given DOM node, walking up to the
25
- * parent element if the node itself is not an Element (e.g. a text node).
26
- */
27
23
  function scrollToSelection(node) {
28
- var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
24
+ // ProseMirror may return a text node; scroll its parent element instead.
25
+ var element = node instanceof Element ? node : node === null || node === void 0 ? void 0 : node.parentElement;
29
26
  if (!(element instanceof HTMLElement)) {
30
27
  return;
31
28
  }
29
+ var scrollOptions = {
30
+ behavior: 'smooth',
31
+ block: 'start'
32
+ };
33
+ if (fg('platform_editor_ai_suggestion_table_scroll_fix')) {
34
+ scrollOptions.inline = 'center';
35
+ }
32
36
  if (fg('platform_editor_ai_show_diff_patch_1')) {
33
- element.scrollIntoView({
34
- behavior: 'smooth',
35
- block: 'start'
36
- });
37
+ element.scrollIntoView(scrollOptions);
37
38
  return;
38
39
  }
39
40
 
@@ -41,14 +42,25 @@ function scrollToSelection(node) {
41
42
  var previousScrollMarginTop = element.style.scrollMarginTop;
42
43
  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
43
44
  try {
44
- element.scrollIntoView({
45
- behavior: 'smooth',
46
- block: 'start'
47
- });
45
+ element.scrollIntoView(scrollOptions);
48
46
  } finally {
49
47
  element.style.scrollMarginTop = previousScrollMarginTop;
50
48
  }
51
49
  }
50
+ function resolveScrollTarget(view, target) {
51
+ var _view$domAtPos;
52
+ if (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
53
+ return getWidgetElement(target);
54
+ }
55
+ if (isDiffDecoration(target) && fg('platform_editor_ai_show_diff_patch_2')) {
56
+ var _Array$from$find;
57
+ return (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(function (element) {
58
+ return element.dataset.diffId === target.spec.diffId;
59
+ })) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target.from);
60
+ }
61
+ var targetNode = view.nodeDOM(target.from);
62
+ return targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
63
+ }
52
64
 
53
65
  /**
54
66
  * Schedules scrolling to the decoration at the given index after the next frame. Defaults to the
@@ -68,30 +80,27 @@ export var scrollToDecoration = function scrollToDecoration(view, decorations) {
68
80
  // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
69
81
  // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
70
82
  var target = isDiffDecoration(decoration) && decoration.spec.scrollTarget || decoration;
71
- var rafId = requestAnimationFrame(function () {
72
- rafId = null;
83
+ var rafId = null;
84
+ var cancelled = false;
85
+ var scrollToTarget = function scrollToTarget() {
86
+ if (view.isDestroyed) {
87
+ return;
88
+ }
73
89
  if (fg('platform_editor_ai_show_diff_patch_1')) {
74
90
  updateScrollTargetMargin(view, target.from, api);
75
91
  }
76
- if (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
77
- var _target$type;
78
- // @ts-expect-error - decoration.type is not typed public API
79
- var widgetDom = target === null || target === void 0 || (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
80
- scrollToSelection(widgetDom);
81
- } else if (isDiffDecoration(target) && fg('platform_editor_ai_show_diff_patch_2')) {
82
- var _Array$from$find;
83
- var targetNode = (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(function (element) {
84
- return element.dataset.diffId === target.spec.diffId;
85
- })) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
86
- scrollToSelection(targetNode);
87
- } else {
88
- var _view$domAtPos;
89
- var _targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
90
- var node = _targetNode instanceof Element ? _targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
91
- scrollToSelection(node);
92
+ scrollToSelection(resolveScrollTarget(view, target));
93
+ };
94
+
95
+ // Called from the plugin's post-DOM update hook; defer measurement until layout can settle.
96
+ rafId = requestAnimationFrame(function () {
97
+ rafId = null;
98
+ if (!cancelled) {
99
+ scrollToTarget();
92
100
  }
93
101
  });
94
102
  return function () {
103
+ cancelled = true;
95
104
  if (rafId !== null) {
96
105
  cancelAnimationFrame(rafId);
97
106
  rafId = null;
package/dist/types/pm-plugins/markViews.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
1
+ import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view/types';
2
2
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
3
3
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
4
  /** Where to look up a mark's renderer, and the view to render it against. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-show-diff",
3
- "version": "26.0.1",
3
+ "version": "26.0.3",
4
4
  "description": "ShowDiff plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/platform-feature-experiments": "^0.3.0",
40
40
  "@atlaskit/platform-feature-flags": "^2.2.0",
41
41
  "@atlaskit/primitives": "^22.6.0",
42
- "@atlaskit/tmp-editor-statsig": "^240.0.0",
42
+ "@atlaskit/tmp-editor-statsig": "^241.0.0",
43
43
  "@atlaskit/tokens": "^20.6.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@compiled/react": "^1.0.2",
@@ -77,6 +77,10 @@
77
77
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
78
78
  },
79
79
  "platform-feature-flags": {
80
+ "platform_editor_ai_suggestion_table_scroll_fix": {
81
+ "type": "boolean",
82
+ "referenceOnly": true
83
+ },
80
84
  "platform_editor_diff_reveal_animation": {
81
85
  "type": "boolean"
82
86
  },