@atlaskit/editor-plugin-find-replace 8.1.0 → 8.2.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/pm-plugins/utils/commands.js +41 -1
  3. package/dist/cjs/ui/FindReplaceDropDownOrToolbarButtonWithState.js +1 -1
  4. package/dist/es2019/pm-plugins/utils/commands.js +41 -1
  5. package/dist/es2019/ui/FindReplaceDropDownOrToolbarButtonWithState.js +1 -1
  6. package/dist/esm/pm-plugins/utils/commands.js +41 -1
  7. package/dist/esm/ui/FindReplaceDropDownOrToolbarButtonWithState.js +1 -1
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-find-replace
2
2
 
3
+ ## 8.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`d7dec29b99a58`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d7dec29b99a58) -
8
+ [ux] [EDITOR-5118] his change modifies scrolling behaviour to centre selected content when using
9
+ find and replace, behind exp platform_editor_editor_centre_content_on_find
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 8.1.1
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 8.1.0
4
22
 
5
23
  ### Minor Changes
package/dist/cjs/pm-plugins/utils/commands.js CHANGED
@@ -4,10 +4,50 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.withScrollIntoView = void 0;
7
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
7
8
  var withScrollIntoView = exports.withScrollIntoView = function withScrollIntoView(command) {
8
9
  return function (state, dispatch, view) {
9
10
  return command(state, function (tr) {
10
- tr.scrollIntoView();
11
+ if ((0, _expValEquals.expValEquals)('platform_editor_editor_centre_content_on_find', 'isEnabled', true) && view) {
12
+ var targetPos = tr.selection.anchor;
13
+ var coords = view.coordsAtPos(targetPos);
14
+
15
+ // If element is not visible (coords are invalid), try parent nodes
16
+ if (coords.top === coords.bottom || coords.top === 0) {
17
+ var $pos = tr.selection.$anchor;
18
+ var depth = $pos.depth;
19
+ while (depth > 0 && (coords.top === coords.bottom || coords.top === 0)) {
20
+ targetPos = $pos.before(depth);
21
+ coords = view.coordsAtPos(targetPos);
22
+ depth--;
23
+ }
24
+ }
25
+
26
+ // Find the closest scrollable parent element
27
+ var scrollParent = view.dom;
28
+ while (scrollParent && scrollParent !== document.documentElement) {
29
+ var style = window.getComputedStyle(scrollParent);
30
+ var overflowY = style.overflowY;
31
+ var overflowX = style.overflowX;
32
+ var isScrollable = (overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll') && (scrollParent.scrollHeight > scrollParent.clientHeight || scrollParent.scrollWidth > scrollParent.clientWidth);
33
+ if (isScrollable) {
34
+ break;
35
+ }
36
+ scrollParent = scrollParent.parentElement;
37
+ }
38
+
39
+ // Scroll to center the content
40
+ if (scrollParent && scrollParent !== document.documentElement) {
41
+ var parentRect = scrollParent.getBoundingClientRect();
42
+ var scrollTop = scrollParent.scrollTop + coords.top - parentRect.top - parentRect.height / 2 + (coords.bottom - coords.top) / 2;
43
+ scrollParent.scrollTo({
44
+ top: scrollTop,
45
+ behavior: 'smooth'
46
+ });
47
+ }
48
+ } else {
49
+ tr.scrollIntoView();
50
+ }
11
51
  if (dispatch) {
12
52
  dispatch(tr);
13
53
  }
package/dist/cjs/ui/FindReplaceDropDownOrToolbarButtonWithState.js CHANGED
@@ -79,7 +79,7 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
79
79
  var dispatchCommand = function dispatchCommand(cmd) {
80
80
  var state = editorView.state,
81
81
  dispatch = editorView.dispatch;
82
- cmd(state, dispatch);
82
+ cmd(state, dispatch, editorView);
83
83
  };
84
84
  var handleActivate = function handleActivate() {
85
85
  runWithEditorFocused(function () {
package/dist/es2019/pm-plugins/utils/commands.js CHANGED
@@ -1,5 +1,45 @@
1
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
1
2
  export const withScrollIntoView = command => (state, dispatch, view) => command(state, tr => {
2
- tr.scrollIntoView();
3
+ if (expValEquals('platform_editor_editor_centre_content_on_find', 'isEnabled', true) && view) {
4
+ let targetPos = tr.selection.anchor;
5
+ let coords = view.coordsAtPos(targetPos);
6
+
7
+ // If element is not visible (coords are invalid), try parent nodes
8
+ if (coords.top === coords.bottom || coords.top === 0) {
9
+ const $pos = tr.selection.$anchor;
10
+ let depth = $pos.depth;
11
+ while (depth > 0 && (coords.top === coords.bottom || coords.top === 0)) {
12
+ targetPos = $pos.before(depth);
13
+ coords = view.coordsAtPos(targetPos);
14
+ depth--;
15
+ }
16
+ }
17
+
18
+ // Find the closest scrollable parent element
19
+ let scrollParent = view.dom;
20
+ while (scrollParent && scrollParent !== document.documentElement) {
21
+ const style = window.getComputedStyle(scrollParent);
22
+ const overflowY = style.overflowY;
23
+ const overflowX = style.overflowX;
24
+ const isScrollable = (overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll') && (scrollParent.scrollHeight > scrollParent.clientHeight || scrollParent.scrollWidth > scrollParent.clientWidth);
25
+ if (isScrollable) {
26
+ break;
27
+ }
28
+ scrollParent = scrollParent.parentElement;
29
+ }
30
+
31
+ // Scroll to center the content
32
+ if (scrollParent && scrollParent !== document.documentElement) {
33
+ const parentRect = scrollParent.getBoundingClientRect();
34
+ const scrollTop = scrollParent.scrollTop + coords.top - parentRect.top - parentRect.height / 2 + (coords.bottom - coords.top) / 2;
35
+ scrollParent.scrollTo({
36
+ top: scrollTop,
37
+ behavior: 'smooth'
38
+ });
39
+ }
40
+ } else {
41
+ tr.scrollIntoView();
42
+ }
3
43
  if (dispatch) {
4
44
  dispatch(tr);
5
45
  }
package/dist/es2019/ui/FindReplaceDropDownOrToolbarButtonWithState.js CHANGED
@@ -72,7 +72,7 @@ const FindReplaceToolbarButtonWithState = ({
72
72
  state,
73
73
  dispatch
74
74
  } = editorView;
75
- cmd(state, dispatch);
75
+ cmd(state, dispatch, editorView);
76
76
  };
77
77
  const handleActivate = () => {
78
78
  runWithEditorFocused(() => dispatchCommand(activateWithAnalytics(editorAnalyticsAPI)({
package/dist/esm/pm-plugins/utils/commands.js CHANGED
@@ -1,7 +1,47 @@
1
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
1
2
  export var withScrollIntoView = function withScrollIntoView(command) {
2
3
  return function (state, dispatch, view) {
3
4
  return command(state, function (tr) {
4
- tr.scrollIntoView();
5
+ if (expValEquals('platform_editor_editor_centre_content_on_find', 'isEnabled', true) && view) {
6
+ var targetPos = tr.selection.anchor;
7
+ var coords = view.coordsAtPos(targetPos);
8
+
9
+ // If element is not visible (coords are invalid), try parent nodes
10
+ if (coords.top === coords.bottom || coords.top === 0) {
11
+ var $pos = tr.selection.$anchor;
12
+ var depth = $pos.depth;
13
+ while (depth > 0 && (coords.top === coords.bottom || coords.top === 0)) {
14
+ targetPos = $pos.before(depth);
15
+ coords = view.coordsAtPos(targetPos);
16
+ depth--;
17
+ }
18
+ }
19
+
20
+ // Find the closest scrollable parent element
21
+ var scrollParent = view.dom;
22
+ while (scrollParent && scrollParent !== document.documentElement) {
23
+ var style = window.getComputedStyle(scrollParent);
24
+ var overflowY = style.overflowY;
25
+ var overflowX = style.overflowX;
26
+ var isScrollable = (overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll') && (scrollParent.scrollHeight > scrollParent.clientHeight || scrollParent.scrollWidth > scrollParent.clientWidth);
27
+ if (isScrollable) {
28
+ break;
29
+ }
30
+ scrollParent = scrollParent.parentElement;
31
+ }
32
+
33
+ // Scroll to center the content
34
+ if (scrollParent && scrollParent !== document.documentElement) {
35
+ var parentRect = scrollParent.getBoundingClientRect();
36
+ var scrollTop = scrollParent.scrollTop + coords.top - parentRect.top - parentRect.height / 2 + (coords.bottom - coords.top) / 2;
37
+ scrollParent.scrollTo({
38
+ top: scrollTop,
39
+ behavior: 'smooth'
40
+ });
41
+ }
42
+ } else {
43
+ tr.scrollIntoView();
44
+ }
5
45
  if (dispatch) {
6
46
  dispatch(tr);
7
47
  }
package/dist/esm/ui/FindReplaceDropDownOrToolbarButtonWithState.js CHANGED
@@ -71,7 +71,7 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
71
71
  var dispatchCommand = function dispatchCommand(cmd) {
72
72
  var state = editorView.state,
73
73
  dispatch = editorView.dispatch;
74
- cmd(state, dispatch);
74
+ cmd(state, dispatch, editorView);
75
75
  };
76
76
  var handleActivate = function handleActivate() {
77
77
  runWithEditorFocused(function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-find-replace",
3
- "version": "8.1.0",
3
+ "version": "8.2.0",
4
4
  "description": "find replace plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/primitives": "^18.0.0",
45
45
  "@atlaskit/textfield": "^8.2.0",
46
46
  "@atlaskit/theme": "^22.0.0",
47
- "@atlaskit/tmp-editor-statsig": "^39.0.0",
47
+ "@atlaskit/tmp-editor-statsig": "^40.2.0",
48
48
  "@atlaskit/tokens": "^11.1.0",
49
49
  "@atlaskit/tooltip": "^20.14.0",
50
50
  "@babel/runtime": "^7.0.0",
@@ -61,7 +61,7 @@
61
61
  "react-dom": "^18.2.0"
62
62
  },
63
63
  "peerDependencies": {
64
- "@atlaskit/editor-common": "^112.3.0",
64
+ "@atlaskit/editor-common": "^112.4.0",
65
65
  "react": "^18.2.0",
66
66
  "react-intl-next": "npm:react-intl@^5.18.1"
67
67
  },