@atlaskit/editor-plugin-block-controls 1.3.12 → 1.4.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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/drop-target.js +19 -2
  3. package/dist/es2019/ui/drop-target.js +19 -2
  4. package/dist/esm/ui/drop-target.js +19 -2
  5. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#101384](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101384)
8
+ [`649f601103e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/649f601103e0) -
9
+ [ux] Add autoscroller support to blocks plugin
10
+
3
11
  ## 1.3.12
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/drop-target.js CHANGED
@@ -8,7 +8,9 @@ exports.DropTarget = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("react");
10
10
  var _react2 = require("@emotion/react");
11
+ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
11
12
  var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
13
+ var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
12
14
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
13
15
  /** @jsx jsx */
14
16
 
@@ -30,11 +32,24 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
30
32
  if (!element) {
31
33
  return;
32
34
  }
33
- return (0, _adapter.dropTargetForElements)({
35
+ var combined = [];
36
+ var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
37
+ if (scrollable) {
38
+ combined.push((0, _element.autoScrollForElements)({
39
+ element: scrollable,
40
+ canScroll: function canScroll() {
41
+ return true;
42
+ }
43
+ }));
44
+ }
45
+ combined.push((0, _adapter.dropTargetForElements)({
34
46
  element: element,
35
47
  getIsSticky: function getIsSticky() {
36
48
  return true;
37
49
  },
50
+ onDrag: function onDrag() {
51
+ scrollable.style.setProperty('scroll-behavior', 'unset');
52
+ },
38
53
  onDragEnter: function onDragEnter() {
39
54
  return setIsDraggedOver(true);
40
55
  },
@@ -43,6 +58,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
43
58
  },
44
59
  onDrop: function onDrop() {
45
60
  var _api$blockControls;
61
+ scrollable.style.setProperty('scroll-behavior', null);
46
62
  var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
47
63
  activeNode = _ref2.activeNode,
48
64
  decorationState = _ref2.decorationState;
@@ -59,7 +75,8 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
59
75
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
60
76
  }
61
77
  }
62
- });
78
+ }));
79
+ return _combine.combine.apply(void 0, combined);
63
80
  }, [index, api]);
64
81
  return (
65
82
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
package/dist/es2019/ui/drop-target.js CHANGED
@@ -1,7 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
4
5
  import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
6
+ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
5
7
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
6
8
  const styleDropTarget = css({
7
9
  height: "var(--ds-space-100, 8px)",
@@ -19,13 +21,27 @@ export const DropTarget = ({
19
21
  if (!element) {
20
22
  return;
21
23
  }
22
- return dropTargetForElements({
24
+ const combined = [];
25
+ const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
26
+ if (scrollable) {
27
+ combined.push(autoScrollForElements({
28
+ element: scrollable,
29
+ canScroll: () => {
30
+ return true;
31
+ }
32
+ }));
33
+ }
34
+ combined.push(dropTargetForElements({
23
35
  element,
24
36
  getIsSticky: () => true,
37
+ onDrag: () => {
38
+ scrollable.style.setProperty('scroll-behavior', 'unset');
39
+ },
25
40
  onDragEnter: () => setIsDraggedOver(true),
26
41
  onDragLeave: () => setIsDraggedOver(false),
27
42
  onDrop: () => {
28
43
  var _api$blockControls;
44
+ scrollable.style.setProperty('scroll-behavior', null);
29
45
  const {
30
46
  activeNode,
31
47
  decorationState
@@ -44,7 +60,8 @@ export const DropTarget = ({
44
60
  api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos));
45
61
  }
46
62
  }
47
- });
63
+ }));
64
+ return combine(...combined);
48
65
  }, [index, api]);
49
66
  return (
50
67
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
package/dist/esm/ui/drop-target.js CHANGED
@@ -2,7 +2,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  /** @jsx jsx */
3
3
  import { useEffect, useRef, useState } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
+ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
5
6
  import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
7
+ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
6
8
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
7
9
  var styleDropTarget = css({
8
10
  height: "var(--ds-space-100, 8px)",
@@ -22,11 +24,24 @@ export var DropTarget = function DropTarget(_ref) {
22
24
  if (!element) {
23
25
  return;
24
26
  }
25
- return dropTargetForElements({
27
+ var combined = [];
28
+ var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
29
+ if (scrollable) {
30
+ combined.push(autoScrollForElements({
31
+ element: scrollable,
32
+ canScroll: function canScroll() {
33
+ return true;
34
+ }
35
+ }));
36
+ }
37
+ combined.push(dropTargetForElements({
26
38
  element: element,
27
39
  getIsSticky: function getIsSticky() {
28
40
  return true;
29
41
  },
42
+ onDrag: function onDrag() {
43
+ scrollable.style.setProperty('scroll-behavior', 'unset');
44
+ },
30
45
  onDragEnter: function onDragEnter() {
31
46
  return setIsDraggedOver(true);
32
47
  },
@@ -35,6 +50,7 @@ export var DropTarget = function DropTarget(_ref) {
35
50
  },
36
51
  onDrop: function onDrop() {
37
52
  var _api$blockControls;
53
+ scrollable.style.setProperty('scroll-behavior', null);
38
54
  var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
39
55
  activeNode = _ref2.activeNode,
40
56
  decorationState = _ref2.decorationState;
@@ -51,7 +67,8 @@ export var DropTarget = function DropTarget(_ref) {
51
67
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
52
68
  }
53
69
  }
54
- });
70
+ }));
71
+ return combine.apply(void 0, combined);
55
72
  }, [index, api]);
56
73
  return (
57
74
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.3.12",
3
+ "version": "1.4.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,6 +35,7 @@
35
35
  "@atlaskit/editor-prosemirror": "4.0.1",
36
36
  "@atlaskit/icon": "^22.2.0",
37
37
  "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
38
+ "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
38
39
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
39
40
  "@atlaskit/tokens": "^1.48.0",
40
41
  "@babel/runtime": "^7.0.0",