@atlaskit/editor-plugin-block-controls 1.4.12 → 1.4.13

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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [#108531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108531)
8
+ [`bc1dab1f64bd8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc1dab1f64bd8) -
9
+ [ux] Don't render decorations when Editor is disabled or in 'view' mode
10
+ - [#110258](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110258)
11
+ [`e12a40c7d31ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e12a40c7d31ee) -
12
+ set selection on drag handle mouse down to ensure drag and drop does not use native behaviour
13
+ - Updated dependencies
14
+
3
15
  ## 1.4.12
4
16
 
5
17
  ### Patch Changes
@@ -30,7 +30,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
30
30
  },
31
31
  apply: function apply(tr, currentState, oldState, newState) {
32
32
  var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
33
- // return currentState;
34
33
  var activeNode = currentState.activeNode,
35
34
  decorations = currentState.decorations,
36
35
  isMenuOpen = currentState.isMenuOpen,
@@ -115,7 +114,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
115
114
  },
116
115
  props: {
117
116
  decorations: function decorations(state) {
118
- var _key$getState;
117
+ var _api$editorDisabled, _key$getState;
118
+ var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
119
+ if (isDisabled) {
120
+ return;
121
+ }
119
122
  return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
120
123
  }
121
124
  },
@@ -60,7 +60,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
60
60
  setDragHandleSelected = _useState2[1];
61
61
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
62
62
  featureFlagsState = _useSharedPluginState.featureFlagsState;
63
- var handleClick = (0, _react.useCallback)(function () {
63
+ var handleOnClick = (0, _react.useCallback)(function () {
64
64
  var _api$core, _api$core2;
65
65
  setDragHandleSelected(!dragHandleSelected);
66
66
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -76,6 +76,25 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
76
76
  });
77
77
  api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
78
78
  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
79
+
80
+ // handleMouseDown required along with onClick to ensure the correct selection
81
+ // is set immediately when the drag handle is clicked. Otherwise browser native
82
+ // drag and drop can take over and cause unpredictable behaviour.
83
+ var handleMouseDown = (0, _react.useCallback)(function () {
84
+ var _api$core3, _api$core4;
85
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
86
+ var tr = _ref3.tr;
87
+ if (start === undefined) {
88
+ return tr;
89
+ }
90
+ tr = (0, _utils.selectNode)(tr, start, nodeType);
91
+ tr.setMeta(_main.key, {
92
+ pos: start
93
+ });
94
+ return tr;
95
+ });
96
+ api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
97
+ }, [start, api, nodeType]);
79
98
  (0, _react.useEffect)(function () {
80
99
  var element = buttonRef.current;
81
100
  if (!element) {
@@ -83,11 +102,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
83
102
  }
84
103
  return (0, _adapter.draggable)({
85
104
  element: element,
86
- onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
87
- var nativeSetDragImage = _ref3.nativeSetDragImage;
105
+ onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
106
+ var nativeSetDragImage = _ref4.nativeSetDragImage;
88
107
  (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
89
- render: function render(_ref4) {
90
- var container = _ref4.container;
108
+ render: function render(_ref5) {
109
+ var container = _ref5.container;
91
110
  var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
92
111
  if (!dom) {
93
112
  return;
@@ -98,17 +117,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
98
117
  });
99
118
  },
100
119
  onDragStart: function onDragStart() {
101
- var _api$core3, _api$blockControls, _api$core4;
120
+ var _api$core5, _api$blockControls, _api$core6;
102
121
  if (start === undefined) {
103
122
  return;
104
123
  }
105
- api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
106
- api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
124
+ api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
125
+ api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
107
126
  },
108
127
  onDrop: function onDrop() {
109
- var _api$core5;
110
- api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
111
- var tr = _ref5.tr;
128
+ var _api$core7;
129
+ api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
130
+ var tr = _ref6.tr;
112
131
  return tr.setMeta(_main.key, {
113
132
  isDragging: false
114
133
  });
@@ -142,7 +161,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
142
161
  css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
143
162
  ref: buttonRef,
144
163
  style: positionStyles,
145
- onClick: handleClick,
164
+ onClick: handleOnClick,
165
+ onMouseDown: handleMouseDown,
146
166
  "data-testid": "block-ctrl-drag-handle"
147
167
  }, (0, _react2.jsx)(_dragHandler.default, {
148
168
  label: "",
@@ -22,7 +22,6 @@ export const createPlugin = api => {
22
22
  },
23
23
  apply(tr, currentState, oldState, newState) {
24
24
  var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
25
- // return currentState;
26
25
  let {
27
26
  activeNode,
28
27
  decorations,
@@ -109,7 +108,11 @@ export const createPlugin = api => {
109
108
  },
110
109
  props: {
111
110
  decorations: state => {
112
- var _key$getState;
111
+ var _api$editorDisabled, _api$editorDisabled$s, _key$getState;
112
+ const isDisabled = api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled;
113
+ if (isDisabled) {
114
+ return;
115
+ }
113
116
  return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
114
117
  }
115
118
  },
@@ -50,7 +50,7 @@ export const DragHandle = ({
50
50
  const {
51
51
  featureFlagsState
52
52
  } = useSharedPluginState(api, ['featureFlags']);
53
- const handleClick = useCallback(() => {
53
+ const handleOnClick = useCallback(() => {
54
54
  var _api$core, _api$core2;
55
55
  setDragHandleSelected(!dragHandleSelected);
56
56
  api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
@@ -67,6 +67,26 @@ export const DragHandle = ({
67
67
  });
68
68
  api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
69
69
  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
70
+
71
+ // handleMouseDown required along with onClick to ensure the correct selection
72
+ // is set immediately when the drag handle is clicked. Otherwise browser native
73
+ // drag and drop can take over and cause unpredictable behaviour.
74
+ const handleMouseDown = useCallback(() => {
75
+ var _api$core3, _api$core4;
76
+ api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
77
+ tr
78
+ }) => {
79
+ if (start === undefined) {
80
+ return tr;
81
+ }
82
+ tr = selectNode(tr, start, nodeType);
83
+ tr.setMeta(key, {
84
+ pos: start
85
+ });
86
+ return tr;
87
+ });
88
+ api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
89
+ }, [start, api, nodeType]);
70
90
  useEffect(() => {
71
91
  const element = buttonRef.current;
72
92
  if (!element) {
@@ -91,16 +111,16 @@ export const DragHandle = ({
91
111
  });
92
112
  },
93
113
  onDragStart() {
94
- var _api$core3, _api$blockControls, _api$core4;
114
+ var _api$core5, _api$blockControls, _api$core6;
95
115
  if (start === undefined) {
96
116
  return;
97
117
  }
98
- api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
99
- api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
118
+ api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
119
+ api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.focus();
100
120
  },
101
121
  onDrop() {
102
- var _api$core5;
103
- api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
122
+ var _api$core7;
123
+ api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
104
124
  tr
105
125
  }) => {
106
126
  return tr.setMeta(key, {
@@ -136,7 +156,8 @@ export const DragHandle = ({
136
156
  css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
137
157
  ref: buttonRef,
138
158
  style: positionStyles,
139
- onClick: handleClick,
159
+ onClick: handleOnClick,
160
+ onMouseDown: handleMouseDown,
140
161
  "data-testid": "block-ctrl-drag-handle"
141
162
  }, jsx(DragHandlerIcon, {
142
163
  label: "",
@@ -23,7 +23,6 @@ export var createPlugin = function createPlugin(api) {
23
23
  },
24
24
  apply: function apply(tr, currentState, oldState, newState) {
25
25
  var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
26
- // return currentState;
27
26
  var activeNode = currentState.activeNode,
28
27
  decorations = currentState.decorations,
29
28
  isMenuOpen = currentState.isMenuOpen,
@@ -108,7 +107,11 @@ export var createPlugin = function createPlugin(api) {
108
107
  },
109
108
  props: {
110
109
  decorations: function decorations(state) {
111
- var _key$getState;
110
+ var _api$editorDisabled, _key$getState;
111
+ var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
112
+ if (isDisabled) {
113
+ return;
114
+ }
112
115
  return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
113
116
  }
114
117
  },
@@ -52,7 +52,7 @@ export var DragHandle = function DragHandle(_ref) {
52
52
  setDragHandleSelected = _useState2[1];
53
53
  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
54
54
  featureFlagsState = _useSharedPluginState.featureFlagsState;
55
- var handleClick = useCallback(function () {
55
+ var handleOnClick = useCallback(function () {
56
56
  var _api$core, _api$core2;
57
57
  setDragHandleSelected(!dragHandleSelected);
58
58
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -68,6 +68,25 @@ export var DragHandle = function DragHandle(_ref) {
68
68
  });
69
69
  api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
70
70
  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
71
+
72
+ // handleMouseDown required along with onClick to ensure the correct selection
73
+ // is set immediately when the drag handle is clicked. Otherwise browser native
74
+ // drag and drop can take over and cause unpredictable behaviour.
75
+ var handleMouseDown = useCallback(function () {
76
+ var _api$core3, _api$core4;
77
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
78
+ var tr = _ref3.tr;
79
+ if (start === undefined) {
80
+ return tr;
81
+ }
82
+ tr = selectNode(tr, start, nodeType);
83
+ tr.setMeta(key, {
84
+ pos: start
85
+ });
86
+ return tr;
87
+ });
88
+ api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
89
+ }, [start, api, nodeType]);
71
90
  useEffect(function () {
72
91
  var element = buttonRef.current;
73
92
  if (!element) {
@@ -75,11 +94,11 @@ export var DragHandle = function DragHandle(_ref) {
75
94
  }
76
95
  return draggable({
77
96
  element: element,
78
- onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
79
- var nativeSetDragImage = _ref3.nativeSetDragImage;
97
+ onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
98
+ var nativeSetDragImage = _ref4.nativeSetDragImage;
80
99
  setCustomNativeDragPreview({
81
- render: function render(_ref4) {
82
- var container = _ref4.container;
100
+ render: function render(_ref5) {
101
+ var container = _ref5.container;
83
102
  var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
84
103
  if (!dom) {
85
104
  return;
@@ -90,17 +109,17 @@ export var DragHandle = function DragHandle(_ref) {
90
109
  });
91
110
  },
92
111
  onDragStart: function onDragStart() {
93
- var _api$core3, _api$blockControls, _api$core4;
112
+ var _api$core5, _api$blockControls, _api$core6;
94
113
  if (start === undefined) {
95
114
  return;
96
115
  }
97
- api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
98
- api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
116
+ api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
117
+ api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
99
118
  },
100
119
  onDrop: function onDrop() {
101
- var _api$core5;
102
- api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
103
- var tr = _ref5.tr;
120
+ var _api$core7;
121
+ api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
122
+ var tr = _ref6.tr;
104
123
  return tr.setMeta(key, {
105
124
  isDragging: false
106
125
  });
@@ -134,7 +153,8 @@ export var DragHandle = function DragHandle(_ref) {
134
153
  css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
135
154
  ref: buttonRef,
136
155
  style: positionStyles,
137
- onClick: handleClick,
156
+ onClick: handleOnClick,
157
+ onMouseDown: handleMouseDown,
138
158
  "data-testid": "block-ctrl-drag-handle"
139
159
  }, jsx(DragHandlerIcon, {
140
160
  label: "",
@@ -1,4 +1,5 @@
1
1
  import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
+ import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
2
3
  import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
3
4
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
4
5
  import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -16,7 +17,11 @@ export interface PluginState {
16
17
  }
17
18
  export type ReleaseHiddenDecoration = () => boolean | undefined;
18
19
  export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
19
- dependencies: [OptionalPlugin<WidthPlugin>, OptionalPlugin<FeatureFlagsPlugin>];
20
+ dependencies: [
21
+ OptionalPlugin<EditorDisabledPlugin>,
22
+ OptionalPlugin<WidthPlugin>,
23
+ OptionalPlugin<FeatureFlagsPlugin>
24
+ ];
20
25
  sharedState: {
21
26
  isMenuOpen: boolean;
22
27
  activeNode: {
@@ -1,4 +1,5 @@
1
1
  import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
+ import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
2
3
  import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
3
4
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
4
5
  import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -17,6 +18,7 @@ export interface PluginState {
17
18
  export type ReleaseHiddenDecoration = () => boolean | undefined;
18
19
  export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
19
20
  dependencies: [
21
+ OptionalPlugin<EditorDisabledPlugin>,
20
22
  OptionalPlugin<WidthPlugin>,
21
23
  OptionalPlugin<FeatureFlagsPlugin>
22
24
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.4.12",
3
+ "version": "1.4.13",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,8 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^82.2.0",
34
+ "@atlaskit/editor-common": "^82.3.0",
35
+ "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
35
36
  "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
36
37
  "@atlaskit/editor-plugin-width": "^1.1.0",
37
38
  "@atlaskit/editor-prosemirror": "4.0.1",
@@ -40,7 +41,7 @@
40
41
  "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
41
42
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
42
43
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
43
- "@atlaskit/tokens": "^1.49.0",
44
+ "@atlaskit/tokens": "^1.50.0",
44
45
  "@babel/runtime": "^7.0.0",
45
46
  "@emotion/react": "^11.7.1",
46
47
  "raf-schd": "^4.0.3"