@atlaskit/editor-plugin-block-controls 9.0.8 → 9.0.11
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 +25 -0
- package/dist/cjs/pm-plugins/main.js +10 -3
- package/dist/cjs/pm-plugins/utils/inline-drop-target.js +2 -3
- package/dist/cjs/ui/drag-handle.js +27 -1
- package/dist/es2019/pm-plugins/main.js +10 -3
- package/dist/es2019/pm-plugins/utils/inline-drop-target.js +2 -3
- package/dist/es2019/ui/drag-handle.js +23 -1
- package/dist/esm/pm-plugins/main.js +10 -3
- package/dist/esm/pm-plugins/utils/inline-drop-target.js +2 -3
- package/dist/esm/ui/drag-handle.js +27 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 9.0.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`029e47b456b89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/029e47b456b89) -
|
|
8
|
+
Fixing a bug where we expect the selection toolbar to show when selecting text and releasing on
|
|
9
|
+
the block controls handle.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 9.0.10
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`3bc16a4221f74`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3bc16a4221f74) -
|
|
17
|
+
[ux] EDITOR-5746 fix bug where drop targets appeared (and never cleared) after table row drag
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
20
|
+
## 9.0.9
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- [`97fd2b35b4ba3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/97fd2b35b4ba3) -
|
|
25
|
+
Editor-5020: fix inline drop hint outside synced block
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
|
|
3
28
|
## 9.0.8
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
@@ -869,10 +869,17 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
|
|
|
869
869
|
return false;
|
|
870
870
|
},
|
|
871
871
|
dragenter: function dragenter(view, event) {
|
|
872
|
-
var _api$limitedMode3;
|
|
872
|
+
var _api$limitedMode3, _key$getState3;
|
|
873
873
|
if (api !== null && api !== void 0 && (_api$limitedMode3 = api.limitedMode) !== null && _api$limitedMode3 !== void 0 && (_api$limitedMode3 = _api$limitedMode3.sharedState.currentState()) !== null && _api$limitedMode3 !== void 0 && _api$limitedMode3.enabled) {
|
|
874
874
|
return;
|
|
875
875
|
}
|
|
876
|
+
|
|
877
|
+
// Only process dragenter for block control drags.
|
|
878
|
+
// Other drag types (e.g. table row) should not create
|
|
879
|
+
// drop target decorations or emit active anchors.
|
|
880
|
+
if (!((_key$getState3 = key.getState(view.state)) !== null && _key$getState3 !== void 0 && _key$getState3.isDragging) && (0, _expValEquals.expValEquals)('platform_editor_fix_table_row_drag_drop_target', 'isEnabled', true)) {
|
|
881
|
+
return;
|
|
882
|
+
}
|
|
876
883
|
if (isHTMLElement(event.target) && (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
|
|
877
884
|
var targetElement = event.target.closest('[data-prosemirror-node-name]');
|
|
878
885
|
if (targetElement) {
|
|
@@ -921,13 +928,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
|
|
|
921
928
|
})));
|
|
922
929
|
},
|
|
923
930
|
dragend: function dragend(view) {
|
|
924
|
-
var _api$limitedMode5, _key$
|
|
931
|
+
var _api$limitedMode5, _key$getState4;
|
|
925
932
|
if (api !== null && api !== void 0 && (_api$limitedMode5 = api.limitedMode) !== null && _api$limitedMode5 !== void 0 && (_api$limitedMode5 = _api$limitedMode5.sharedState.currentState()) !== null && _api$limitedMode5 !== void 0 && _api$limitedMode5.enabled) {
|
|
926
933
|
return;
|
|
927
934
|
}
|
|
928
935
|
var state = view.state,
|
|
929
936
|
dispatch = view.dispatch;
|
|
930
|
-
if ((_key$
|
|
937
|
+
if ((_key$getState4 = key.getState(state)) !== null && _key$getState4 !== void 0 && _key$getState4.isPMDragging) {
|
|
931
938
|
var tr = state.tr;
|
|
932
939
|
tr.setMeta(key, _objectSpread(_objectSpread({}, state.tr.getMeta(key)), {}, {
|
|
933
940
|
isPMDragging: false
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.shouldAllowInlineDropTarget = void 0;
|
|
7
7
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
8
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
9
8
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
10
9
|
var _checkMediaLayout = require("./check-media-layout");
|
|
11
10
|
var _consts = require("./consts");
|
|
@@ -17,7 +16,7 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
|
|
|
17
16
|
var isInsideBodiedSyncBlock = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) === 'bodiedSyncBlock';
|
|
18
17
|
if ((0, _experiments.editorExperiment)('advanced_layouts', false) || isNested) {
|
|
19
18
|
// If nested inside bodiedSyncBlock, enable inline drop target so user can drop to create a layout inside it
|
|
20
|
-
if (isInsideBodiedSyncBlock && (0,
|
|
19
|
+
if (isInsideBodiedSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _experiments.editorExperiment)('platform_synced_block_patch_6', true)) {
|
|
21
20
|
return true;
|
|
22
21
|
}
|
|
23
22
|
return false;
|
|
@@ -28,7 +27,7 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
|
|
|
28
27
|
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
29
28
|
return false;
|
|
30
29
|
}
|
|
31
|
-
if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && (0, _experiments.editorExperiment)('platform_synced_block', true)
|
|
30
|
+
if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && (0, _experiments.editorExperiment)('platform_synced_block', true)) {
|
|
32
31
|
return false;
|
|
33
32
|
}
|
|
34
33
|
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
|
|
@@ -408,6 +408,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
|
|
|
408
408
|
isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
|
|
409
409
|
anchorRectCache = _ref3.anchorRectCache;
|
|
410
410
|
var buttonRef = (0, _react.useRef)(null);
|
|
411
|
+
var mouseDownRef = (0, _react.useRef)(false);
|
|
411
412
|
var _useState = (0, _react.useState)(false),
|
|
412
413
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
413
414
|
dragHandleSelected = _useState2[0],
|
|
@@ -488,11 +489,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
|
|
|
488
489
|
}
|
|
489
490
|
}
|
|
490
491
|
}, [anchorName, nodeType, view.dom]);
|
|
492
|
+
(0, _react.useEffect)(function () {
|
|
493
|
+
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
|
|
494
|
+
return;
|
|
495
|
+
}
|
|
496
|
+
var unbind = (0, _bindEventListener.bind)(window, {
|
|
497
|
+
type: 'mouseUp',
|
|
498
|
+
listener: function listener() {
|
|
499
|
+
return mouseDownRef.current = false;
|
|
500
|
+
}
|
|
501
|
+
});
|
|
502
|
+
return function () {
|
|
503
|
+
return unbind();
|
|
504
|
+
};
|
|
505
|
+
}, []);
|
|
506
|
+
var handleMouseDown = (0, _react.useCallback)(function () {
|
|
507
|
+
mouseDownRef.current = true;
|
|
508
|
+
}, []);
|
|
491
509
|
var handleMouseUp = (0, _react.useCallback)(function (e) {
|
|
492
510
|
// Stop propagation so that for drag handles in nested scenarios the click is captured
|
|
493
511
|
// and doesn't propagate to the edge of the element and trigger a node selection
|
|
494
512
|
// on the parent element
|
|
495
|
-
|
|
513
|
+
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
|
|
514
|
+
e.stopPropagation();
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
// Fixes bug where selection toolbar is blocked when mouse is released on drag handle
|
|
518
|
+
if (mouseDownRef.current) {
|
|
519
|
+
e.stopPropagation();
|
|
520
|
+
}
|
|
496
521
|
}, []);
|
|
497
522
|
var handleOnClickNew = (0, _react.useCallback)(function (e) {
|
|
498
523
|
var _api$core;
|
|
@@ -1116,6 +1141,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
|
|
|
1116
1141
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
1117
1142
|
,
|
|
1118
1143
|
style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
|
|
1144
|
+
onMouseDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
|
|
1119
1145
|
onMouseUp: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? handleMouseUp : undefined,
|
|
1120
1146
|
onClick: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? handleOnClickNew : handleOnClick,
|
|
1121
1147
|
onKeyDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown
|
|
@@ -771,10 +771,17 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
|
|
|
771
771
|
return false;
|
|
772
772
|
},
|
|
773
773
|
dragenter(view, event) {
|
|
774
|
-
var _api$limitedMode3, _api$limitedMode3$sha;
|
|
774
|
+
var _api$limitedMode3, _api$limitedMode3$sha, _key$getState3;
|
|
775
775
|
if (api !== null && api !== void 0 && (_api$limitedMode3 = api.limitedMode) !== null && _api$limitedMode3 !== void 0 && (_api$limitedMode3$sha = _api$limitedMode3.sharedState.currentState()) !== null && _api$limitedMode3$sha !== void 0 && _api$limitedMode3$sha.enabled) {
|
|
776
776
|
return;
|
|
777
777
|
}
|
|
778
|
+
|
|
779
|
+
// Only process dragenter for block control drags.
|
|
780
|
+
// Other drag types (e.g. table row) should not create
|
|
781
|
+
// drop target decorations or emit active anchors.
|
|
782
|
+
if (!((_key$getState3 = key.getState(view.state)) !== null && _key$getState3 !== void 0 && _key$getState3.isDragging) && expValEquals('platform_editor_fix_table_row_drag_drop_target', 'isEnabled', true)) {
|
|
783
|
+
return;
|
|
784
|
+
}
|
|
778
785
|
if (isHTMLElement(event.target) && expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
|
|
779
786
|
const targetElement = event.target.closest('[data-prosemirror-node-name]');
|
|
780
787
|
if (targetElement) {
|
|
@@ -824,7 +831,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
|
|
|
824
831
|
}));
|
|
825
832
|
},
|
|
826
833
|
dragend(view) {
|
|
827
|
-
var _api$limitedMode5, _api$limitedMode5$sha, _key$
|
|
834
|
+
var _api$limitedMode5, _api$limitedMode5$sha, _key$getState4;
|
|
828
835
|
if (api !== null && api !== void 0 && (_api$limitedMode5 = api.limitedMode) !== null && _api$limitedMode5 !== void 0 && (_api$limitedMode5$sha = _api$limitedMode5.sharedState.currentState()) !== null && _api$limitedMode5$sha !== void 0 && _api$limitedMode5$sha.enabled) {
|
|
829
836
|
return;
|
|
830
837
|
}
|
|
@@ -832,7 +839,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
|
|
|
832
839
|
state,
|
|
833
840
|
dispatch
|
|
834
841
|
} = view;
|
|
835
|
-
if ((_key$
|
|
842
|
+
if ((_key$getState4 = key.getState(state)) !== null && _key$getState4 !== void 0 && _key$getState4.isPMDragging) {
|
|
836
843
|
const tr = state.tr;
|
|
837
844
|
tr.setMeta(key, {
|
|
838
845
|
...state.tr.getMeta(key),
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
2
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
3
|
import { isWrappedMedia } from './check-media-layout';
|
|
5
4
|
import { maxLayoutColumnSupported } from './consts';
|
|
@@ -12,7 +11,7 @@ isSameLayout = false, activeNode, parentNode) => {
|
|
|
12
11
|
const isInsideBodiedSyncBlock = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) === 'bodiedSyncBlock';
|
|
13
12
|
if (editorExperiment('advanced_layouts', false) || isNested) {
|
|
14
13
|
// If nested inside bodiedSyncBlock, enable inline drop target so user can drop to create a layout inside it
|
|
15
|
-
if (isInsideBodiedSyncBlock &&
|
|
14
|
+
if (isInsideBodiedSyncBlock && editorExperiment('platform_synced_block', true) && editorExperiment('platform_synced_block_patch_6', true)) {
|
|
16
15
|
return true;
|
|
17
16
|
}
|
|
18
17
|
return false;
|
|
@@ -23,7 +22,7 @@ isSameLayout = false, activeNode, parentNode) => {
|
|
|
23
22
|
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
24
23
|
return false;
|
|
25
24
|
}
|
|
26
|
-
if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && editorExperiment('platform_synced_block', true)
|
|
25
|
+
if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && editorExperiment('platform_synced_block', true)) {
|
|
27
26
|
return false;
|
|
28
27
|
}
|
|
29
28
|
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
|
|
@@ -405,6 +405,7 @@ export const DragHandle = ({
|
|
|
405
405
|
}) => {
|
|
406
406
|
var _api$core4;
|
|
407
407
|
const buttonRef = useRef(null);
|
|
408
|
+
const mouseDownRef = useRef(false);
|
|
408
409
|
const [dragHandleSelected, setDragHandleSelected] = useState(false);
|
|
409
410
|
const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
|
|
410
411
|
const [blockCardWidth, setBlockCardWidth] = useState(768);
|
|
@@ -466,11 +467,31 @@ export const DragHandle = ({
|
|
|
466
467
|
}
|
|
467
468
|
}
|
|
468
469
|
}, [anchorName, nodeType, view.dom]);
|
|
470
|
+
useEffect(() => {
|
|
471
|
+
if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
|
|
472
|
+
return;
|
|
473
|
+
}
|
|
474
|
+
const unbind = bind(window, {
|
|
475
|
+
type: 'mouseUp',
|
|
476
|
+
listener: () => mouseDownRef.current = false
|
|
477
|
+
});
|
|
478
|
+
return () => unbind();
|
|
479
|
+
}, []);
|
|
480
|
+
const handleMouseDown = useCallback(() => {
|
|
481
|
+
mouseDownRef.current = true;
|
|
482
|
+
}, []);
|
|
469
483
|
const handleMouseUp = useCallback(e => {
|
|
470
484
|
// Stop propagation so that for drag handles in nested scenarios the click is captured
|
|
471
485
|
// and doesn't propagate to the edge of the element and trigger a node selection
|
|
472
486
|
// on the parent element
|
|
473
|
-
|
|
487
|
+
if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
|
|
488
|
+
e.stopPropagation();
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
// Fixes bug where selection toolbar is blocked when mouse is released on drag handle
|
|
492
|
+
if (mouseDownRef.current) {
|
|
493
|
+
e.stopPropagation();
|
|
494
|
+
}
|
|
474
495
|
}, []);
|
|
475
496
|
const handleOnClickNew = useCallback(e => {
|
|
476
497
|
var _api$core;
|
|
@@ -1104,6 +1125,7 @@ export const DragHandle = ({
|
|
|
1104
1125
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
1105
1126
|
,
|
|
1106
1127
|
style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
|
|
1128
|
+
onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
|
|
1107
1129
|
onMouseUp: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleMouseUp : undefined,
|
|
1108
1130
|
onClick: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleOnClickNew : handleOnClick,
|
|
1109
1131
|
onKeyDown: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown
|
|
@@ -863,10 +863,17 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
|
|
|
863
863
|
return false;
|
|
864
864
|
},
|
|
865
865
|
dragenter: function dragenter(view, event) {
|
|
866
|
-
var _api$limitedMode3;
|
|
866
|
+
var _api$limitedMode3, _key$getState3;
|
|
867
867
|
if (api !== null && api !== void 0 && (_api$limitedMode3 = api.limitedMode) !== null && _api$limitedMode3 !== void 0 && (_api$limitedMode3 = _api$limitedMode3.sharedState.currentState()) !== null && _api$limitedMode3 !== void 0 && _api$limitedMode3.enabled) {
|
|
868
868
|
return;
|
|
869
869
|
}
|
|
870
|
+
|
|
871
|
+
// Only process dragenter for block control drags.
|
|
872
|
+
// Other drag types (e.g. table row) should not create
|
|
873
|
+
// drop target decorations or emit active anchors.
|
|
874
|
+
if (!((_key$getState3 = key.getState(view.state)) !== null && _key$getState3 !== void 0 && _key$getState3.isDragging) && expValEquals('platform_editor_fix_table_row_drag_drop_target', 'isEnabled', true)) {
|
|
875
|
+
return;
|
|
876
|
+
}
|
|
870
877
|
if (isHTMLElement(event.target) && expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
|
|
871
878
|
var targetElement = event.target.closest('[data-prosemirror-node-name]');
|
|
872
879
|
if (targetElement) {
|
|
@@ -915,13 +922,13 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
|
|
|
915
922
|
})));
|
|
916
923
|
},
|
|
917
924
|
dragend: function dragend(view) {
|
|
918
|
-
var _api$limitedMode5, _key$
|
|
925
|
+
var _api$limitedMode5, _key$getState4;
|
|
919
926
|
if (api !== null && api !== void 0 && (_api$limitedMode5 = api.limitedMode) !== null && _api$limitedMode5 !== void 0 && (_api$limitedMode5 = _api$limitedMode5.sharedState.currentState()) !== null && _api$limitedMode5 !== void 0 && _api$limitedMode5.enabled) {
|
|
920
927
|
return;
|
|
921
928
|
}
|
|
922
929
|
var state = view.state,
|
|
923
930
|
dispatch = view.dispatch;
|
|
924
|
-
if ((_key$
|
|
931
|
+
if ((_key$getState4 = key.getState(state)) !== null && _key$getState4 !== void 0 && _key$getState4.isPMDragging) {
|
|
925
932
|
var tr = state.tr;
|
|
926
933
|
tr.setMeta(key, _objectSpread(_objectSpread({}, state.tr.getMeta(key)), {}, {
|
|
927
934
|
isPMDragging: false
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
2
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
3
|
import { isWrappedMedia } from './check-media-layout';
|
|
5
4
|
import { maxLayoutColumnSupported } from './consts';
|
|
@@ -11,7 +10,7 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
|
|
|
11
10
|
var isInsideBodiedSyncBlock = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) === 'bodiedSyncBlock';
|
|
12
11
|
if (editorExperiment('advanced_layouts', false) || isNested) {
|
|
13
12
|
// If nested inside bodiedSyncBlock, enable inline drop target so user can drop to create a layout inside it
|
|
14
|
-
if (isInsideBodiedSyncBlock &&
|
|
13
|
+
if (isInsideBodiedSyncBlock && editorExperiment('platform_synced_block', true) && editorExperiment('platform_synced_block_patch_6', true)) {
|
|
15
14
|
return true;
|
|
16
15
|
}
|
|
17
16
|
return false;
|
|
@@ -22,7 +21,7 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
|
|
|
22
21
|
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
23
22
|
return false;
|
|
24
23
|
}
|
|
25
|
-
if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && editorExperiment('platform_synced_block', true)
|
|
24
|
+
if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && editorExperiment('platform_synced_block', true)) {
|
|
26
25
|
return false;
|
|
27
26
|
}
|
|
28
27
|
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
|
|
@@ -405,6 +405,7 @@ export var DragHandle = function DragHandle(_ref3) {
|
|
|
405
405
|
isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
|
|
406
406
|
anchorRectCache = _ref3.anchorRectCache;
|
|
407
407
|
var buttonRef = useRef(null);
|
|
408
|
+
var mouseDownRef = useRef(false);
|
|
408
409
|
var _useState = useState(false),
|
|
409
410
|
_useState2 = _slicedToArray(_useState, 2),
|
|
410
411
|
dragHandleSelected = _useState2[0],
|
|
@@ -485,11 +486,35 @@ export var DragHandle = function DragHandle(_ref3) {
|
|
|
485
486
|
}
|
|
486
487
|
}
|
|
487
488
|
}, [anchorName, nodeType, view.dom]);
|
|
489
|
+
useEffect(function () {
|
|
490
|
+
if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
|
|
491
|
+
return;
|
|
492
|
+
}
|
|
493
|
+
var unbind = bind(window, {
|
|
494
|
+
type: 'mouseUp',
|
|
495
|
+
listener: function listener() {
|
|
496
|
+
return mouseDownRef.current = false;
|
|
497
|
+
}
|
|
498
|
+
});
|
|
499
|
+
return function () {
|
|
500
|
+
return unbind();
|
|
501
|
+
};
|
|
502
|
+
}, []);
|
|
503
|
+
var handleMouseDown = useCallback(function () {
|
|
504
|
+
mouseDownRef.current = true;
|
|
505
|
+
}, []);
|
|
488
506
|
var handleMouseUp = useCallback(function (e) {
|
|
489
507
|
// Stop propagation so that for drag handles in nested scenarios the click is captured
|
|
490
508
|
// and doesn't propagate to the edge of the element and trigger a node selection
|
|
491
509
|
// on the parent element
|
|
492
|
-
|
|
510
|
+
if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
|
|
511
|
+
e.stopPropagation();
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
// Fixes bug where selection toolbar is blocked when mouse is released on drag handle
|
|
515
|
+
if (mouseDownRef.current) {
|
|
516
|
+
e.stopPropagation();
|
|
517
|
+
}
|
|
493
518
|
}, []);
|
|
494
519
|
var handleOnClickNew = useCallback(function (e) {
|
|
495
520
|
var _api$core;
|
|
@@ -1113,6 +1138,7 @@ export var DragHandle = function DragHandle(_ref3) {
|
|
|
1113
1138
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
1114
1139
|
,
|
|
1115
1140
|
style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
|
|
1141
|
+
onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
|
|
1116
1142
|
onMouseUp: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleMouseUp : undefined,
|
|
1117
1143
|
onClick: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleOnClickNew : handleOnClick,
|
|
1118
1144
|
onKeyDown: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.11",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
57
57
|
"@atlaskit/primitives": "^18.0.0",
|
|
58
58
|
"@atlaskit/theme": "^22.0.0",
|
|
59
|
-
"@atlaskit/tmp-editor-statsig": "^40.
|
|
59
|
+
"@atlaskit/tmp-editor-statsig": "^40.6.0",
|
|
60
60
|
"@atlaskit/tokens": "^11.1.0",
|
|
61
61
|
"@atlaskit/tooltip": "^20.14.0",
|
|
62
62
|
"@babel/runtime": "^7.0.0",
|