@atlaskit/editor-plugin-block-controls 20.0.0 → 20.0.2
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 +18 -0
- package/dist/cjs/blockControlsPlugin.js +12 -16
- package/dist/cjs/editor-commands/move-node-with-block-menu.js +0 -4
- package/dist/cjs/editor-commands/move-node.js +2 -2
- package/dist/cjs/editor-commands/utils/move-node-utils.js +6 -9
- package/dist/cjs/pm-plugins/handle-mouse-down.js +5 -13
- package/dist/cjs/pm-plugins/handle-mouse-over.js +17 -26
- package/dist/cjs/pm-plugins/main.js +11 -15
- package/dist/cjs/pm-plugins/utils/expand-and-update-selection.js +1 -5
- package/dist/cjs/pm-plugins/utils/getSelection.js +11 -95
- package/dist/cjs/ui/drag-handle.js +49 -127
- package/dist/es2019/blockControlsPlugin.js +12 -16
- package/dist/es2019/editor-commands/move-node-with-block-menu.js +0 -4
- package/dist/es2019/editor-commands/move-node.js +2 -2
- package/dist/es2019/editor-commands/utils/move-node-utils.js +6 -9
- package/dist/es2019/pm-plugins/handle-mouse-down.js +5 -13
- package/dist/es2019/pm-plugins/handle-mouse-over.js +17 -26
- package/dist/es2019/pm-plugins/main.js +11 -15
- package/dist/es2019/pm-plugins/utils/expand-and-update-selection.js +1 -5
- package/dist/es2019/pm-plugins/utils/getSelection.js +7 -93
- package/dist/es2019/ui/drag-handle.js +31 -109
- package/dist/esm/blockControlsPlugin.js +12 -16
- package/dist/esm/editor-commands/move-node-with-block-menu.js +0 -4
- package/dist/esm/editor-commands/move-node.js +2 -2
- package/dist/esm/editor-commands/utils/move-node-utils.js +6 -9
- package/dist/esm/pm-plugins/handle-mouse-down.js +5 -13
- package/dist/esm/pm-plugins/handle-mouse-over.js +17 -26
- package/dist/esm/pm-plugins/main.js +11 -15
- package/dist/esm/pm-plugins/utils/expand-and-update-selection.js +1 -5
- package/dist/esm/pm-plugins/utils/getSelection.js +11 -95
- package/dist/esm/ui/drag-handle.js +49 -127
- package/dist/types/pm-plugins/utils/getSelection.d.ts +1 -1
- package/package.json +3 -3
|
@@ -19,7 +19,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
|
|
|
19
19
|
import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
20
20
|
import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
21
21
|
import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
|
|
22
|
-
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
23
22
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
24
23
|
import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
|
|
25
24
|
import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
|
|
@@ -40,7 +39,6 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
|
|
|
40
39
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
|
|
41
40
|
import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
|
|
42
41
|
import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
|
|
43
|
-
import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
|
|
44
42
|
import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
|
|
45
43
|
import { DragHandleNestedIcon } from './drag-handle-nested-icon';
|
|
46
44
|
import { dragPreview } from './drag-preview';
|
|
@@ -189,11 +187,6 @@ var dragHandleButtonStylesOld = css({
|
|
|
189
187
|
backgroundColor: "var(--ds-background-disabled, #0515240F)"
|
|
190
188
|
}
|
|
191
189
|
});
|
|
192
|
-
var focusedStylesOld = css({
|
|
193
|
-
'&:focus': {
|
|
194
|
-
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
|
|
195
|
-
}
|
|
196
|
-
});
|
|
197
190
|
var focusedStyles = css({
|
|
198
191
|
'&:focus-visible': {
|
|
199
192
|
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
|
|
@@ -356,7 +349,7 @@ var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
|
|
|
356
349
|
return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
|
|
357
350
|
};
|
|
358
351
|
export var DragHandle = function DragHandle(_ref2) {
|
|
359
|
-
var _api$
|
|
352
|
+
var _api$blockControls7;
|
|
360
353
|
var view = _ref2.view,
|
|
361
354
|
api = _ref2.api,
|
|
362
355
|
formatMessage = _ref2.formatMessage,
|
|
@@ -518,88 +511,19 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
518
511
|
});
|
|
519
512
|
view.focus();
|
|
520
513
|
}, [api, view, getPos, nodeType, anchorName]);
|
|
521
|
-
var handleOnClick = useCallback(function (e) {
|
|
522
|
-
var _api$core2;
|
|
523
|
-
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
|
|
524
|
-
var _api$blockControls$sh, _api$analytics2;
|
|
525
|
-
var tr = _ref4.tr;
|
|
526
|
-
var startPos = getPos();
|
|
527
|
-
if (startPos === undefined) {
|
|
528
|
-
return tr;
|
|
529
|
-
}
|
|
530
|
-
if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
531
|
-
tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
|
|
532
|
-
}
|
|
533
|
-
var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
534
|
-
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
|
|
535
|
-
if (tr.selection.empty || !e.shiftKey) {
|
|
536
|
-
tr = selectNode(tr, startPos, nodeType, api);
|
|
537
|
-
} else if (isTopLevelNodeValue && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
538
|
-
var _api$blockControls3;
|
|
539
|
-
var alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
|
|
540
|
-
var selectionWithExpandedHead = expandSelectionHeadToNodeAtPos(alignAnchorHeadToSel, startPos);
|
|
541
|
-
tr.setSelection(selectionWithExpandedHead);
|
|
542
|
-
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
|
|
543
|
-
tr: tr
|
|
544
|
-
});
|
|
545
|
-
}
|
|
546
|
-
var resolvedMovingNode = tr.doc.resolve(startPos);
|
|
547
|
-
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
548
|
-
tr.setMeta('scrollIntoView', false);
|
|
549
|
-
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
|
|
550
|
-
eventType: EVENT_TYPE.UI,
|
|
551
|
-
action: ACTION.CLICKED,
|
|
552
|
-
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
553
|
-
actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
|
|
554
|
-
attributes: {
|
|
555
|
-
nodeDepth: resolvedMovingNode.depth,
|
|
556
|
-
nodeTypes: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
|
|
557
|
-
}
|
|
558
|
-
})(tr);
|
|
559
|
-
return tr;
|
|
560
|
-
});
|
|
561
|
-
view.focus();
|
|
562
|
-
}, [api, view, getPos, isTopLevelNodeValue, nodeType]);
|
|
563
|
-
var handleKeyDown = useCallback(function (e) {
|
|
564
|
-
// allow user to use spacebar to select the node
|
|
565
|
-
if (!e.repeat && e.key === ' ') {
|
|
566
|
-
var _api$core3;
|
|
567
|
-
var startPos = getPos();
|
|
568
|
-
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
|
|
569
|
-
var tr = _ref5.tr;
|
|
570
|
-
if (startPos === undefined) {
|
|
571
|
-
return tr;
|
|
572
|
-
}
|
|
573
|
-
var node = tr.doc.nodeAt(startPos);
|
|
574
|
-
if (!node) {
|
|
575
|
-
return tr;
|
|
576
|
-
}
|
|
577
|
-
var $startPos = tr.doc.resolve(startPos + node.nodeSize);
|
|
578
|
-
var selection = new TextSelection($startPos);
|
|
579
|
-
tr.setSelection(selection);
|
|
580
|
-
return tr;
|
|
581
|
-
});
|
|
582
|
-
} else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
|
|
583
|
-
return pressed;
|
|
584
|
-
})) {
|
|
585
|
-
// If not trying to press shortcut keys,
|
|
586
|
-
// return focus to editor to resume editing from caret position
|
|
587
|
-
view.focus();
|
|
588
|
-
}
|
|
589
|
-
}, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, view]);
|
|
590
514
|
var handleKeyDownNew = useCallback(function (e) {
|
|
591
515
|
// allow user to use spacebar to select the node
|
|
592
516
|
if (e.key === 'Enter' || !e.repeat && e.key === ' ') {
|
|
593
|
-
var _getDocument, _api$
|
|
517
|
+
var _getDocument, _api$core2;
|
|
594
518
|
if (((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement) !== buttonRef.current) {
|
|
595
519
|
return;
|
|
596
520
|
}
|
|
597
521
|
e.preventDefault();
|
|
598
522
|
e.stopPropagation();
|
|
599
523
|
var startPos = getPos();
|
|
600
|
-
api === null || api === void 0 || (_api$
|
|
601
|
-
var _selectionPreservatio2, _api$
|
|
602
|
-
var tr =
|
|
524
|
+
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
|
|
525
|
+
var _selectionPreservatio2, _api$blockControls3, _api$blockControls4, _api$userIntent;
|
|
526
|
+
var tr = _ref4.tr;
|
|
603
527
|
if (startPos === undefined) {
|
|
604
528
|
return tr;
|
|
605
529
|
}
|
|
@@ -612,7 +536,7 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
612
536
|
nodeType: nodeType,
|
|
613
537
|
api: api
|
|
614
538
|
});
|
|
615
|
-
api === null || api === void 0 || (_api$
|
|
539
|
+
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.startPreservingSelection()({
|
|
616
540
|
tr: tr
|
|
617
541
|
});
|
|
618
542
|
if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
@@ -623,7 +547,7 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
623
547
|
pos: startPos,
|
|
624
548
|
rootPos: tr.doc.resolve(startPos).before(1)
|
|
625
549
|
};
|
|
626
|
-
api === null || api === void 0 || (_api$
|
|
550
|
+
api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.toggleBlockMenu({
|
|
627
551
|
anchorName: anchorName,
|
|
628
552
|
triggerByNode: triggerByNode,
|
|
629
553
|
openedViaKeyboard: true
|
|
@@ -657,19 +581,19 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
657
581
|
start: start
|
|
658
582
|
};
|
|
659
583
|
},
|
|
660
|
-
onGenerateDragPreview: function onGenerateDragPreview(
|
|
661
|
-
var _api$
|
|
662
|
-
var nativeSetDragImage =
|
|
663
|
-
api === null || api === void 0 || (_api$
|
|
664
|
-
var tr =
|
|
584
|
+
onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
|
|
585
|
+
var _api$core3, _api$blockControls$sh;
|
|
586
|
+
var nativeSetDragImage = _ref5.nativeSetDragImage;
|
|
587
|
+
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
|
|
588
|
+
var tr = _ref6.tr;
|
|
665
589
|
var handlePos = getPos();
|
|
666
590
|
if (typeof handlePos !== 'number') {
|
|
667
591
|
return tr;
|
|
668
592
|
}
|
|
669
593
|
var newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
|
|
670
594
|
if (!tr.selection.empty && newHandlePosCheck) {
|
|
671
|
-
var _api$
|
|
672
|
-
api === null || api === void 0 || (_api$
|
|
595
|
+
var _api$blockControls5;
|
|
596
|
+
api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
|
|
673
597
|
tr: tr
|
|
674
598
|
});
|
|
675
599
|
} else {
|
|
@@ -683,7 +607,7 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
683
607
|
selection = state.selection;
|
|
684
608
|
var sliceFrom = selection.from;
|
|
685
609
|
var sliceTo = selection.to;
|
|
686
|
-
var mSelect = api === null || api === void 0 || (_api$blockControls$
|
|
610
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
687
611
|
if (mSelect) {
|
|
688
612
|
var anchor = mSelect.anchor,
|
|
689
613
|
head = mSelect.head;
|
|
@@ -738,8 +662,8 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
738
662
|
};
|
|
739
663
|
}
|
|
740
664
|
},
|
|
741
|
-
render: function render(
|
|
742
|
-
var container =
|
|
665
|
+
render: function render(_ref7) {
|
|
666
|
+
var container = _ref7.container;
|
|
743
667
|
var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
|
|
744
668
|
if (!dom) {
|
|
745
669
|
return;
|
|
@@ -771,17 +695,17 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
771
695
|
});
|
|
772
696
|
},
|
|
773
697
|
onDragStart: function onDragStart() {
|
|
774
|
-
var _api$
|
|
698
|
+
var _api$core4;
|
|
775
699
|
if (start === undefined) {
|
|
776
700
|
return;
|
|
777
701
|
}
|
|
778
|
-
api === null || api === void 0 || (_api$
|
|
779
|
-
var _api$blockControls$
|
|
780
|
-
var tr =
|
|
702
|
+
api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref8) {
|
|
703
|
+
var _api$blockControls$sh2, _api$blockControls6, _api$analytics2;
|
|
704
|
+
var tr = _ref8.tr;
|
|
781
705
|
var nodeTypes, hasSelectedMultipleNodes;
|
|
782
706
|
var resolvedMovingNode = tr.doc.resolve(start);
|
|
783
707
|
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
784
|
-
var mSelect = api === null || api === void 0 || (_api$blockControls$
|
|
708
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
|
|
785
709
|
if (mSelect) {
|
|
786
710
|
var attributes = getMultiSelectAnalyticsAttributes(tr, mSelect.anchor, mSelect.head);
|
|
787
711
|
nodeTypes = attributes.nodeTypes;
|
|
@@ -790,11 +714,11 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
790
714
|
nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
|
|
791
715
|
hasSelectedMultipleNodes = false;
|
|
792
716
|
}
|
|
793
|
-
api === null || api === void 0 || (_api$
|
|
717
|
+
api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
|
|
794
718
|
tr: tr
|
|
795
719
|
});
|
|
796
720
|
tr.setMeta('scrollIntoView', false);
|
|
797
|
-
api === null || api === void 0 || (_api$
|
|
721
|
+
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
|
|
798
722
|
eventType: EVENT_TYPE.UI,
|
|
799
723
|
action: ACTION.DRAGGED,
|
|
800
724
|
actionSubject: ACTION_SUBJECT.ELEMENT,
|
|
@@ -1024,11 +948,11 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1024
948
|
setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
|
|
1025
949
|
}, [start, selection, view]);
|
|
1026
950
|
useEffect(function () {
|
|
1027
|
-
var _api$blockControls$
|
|
951
|
+
var _api$blockControls$sh3;
|
|
1028
952
|
if (isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
1029
953
|
return;
|
|
1030
954
|
}
|
|
1031
|
-
var mSelect = api === null || api === void 0 || (_api$blockControls$
|
|
955
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
1032
956
|
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
1033
957
|
var isLayoutColumnMenuEnabled = expValEquals('platform_editor_layout_column_menu', 'isEnabled', true);
|
|
1034
958
|
if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
@@ -1036,15 +960,15 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1036
960
|
} else {
|
|
1037
961
|
setDragHandleDisabled(false);
|
|
1038
962
|
}
|
|
1039
|
-
}, [api === null || api === void 0 || (_api$
|
|
1040
|
-
var dragHandleMessage =
|
|
963
|
+
}, [api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
|
|
964
|
+
var dragHandleMessage = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
|
|
1041
965
|
br: jsx("br", null)
|
|
1042
|
-
})
|
|
966
|
+
});
|
|
1043
967
|
|
|
1044
968
|
// Create a string version for aria-label
|
|
1045
|
-
var dragHandleAriaLabel =
|
|
969
|
+
var dragHandleAriaLabel = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
|
|
1046
970
|
br: ' '
|
|
1047
|
-
})
|
|
971
|
+
});
|
|
1048
972
|
var helpDescriptors = isTopLevelNodeValue ? [{
|
|
1049
973
|
description: dragHandleMessage
|
|
1050
974
|
}, {
|
|
@@ -1126,15 +1050,15 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1126
1050
|
css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
1127
1051
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
1128
1052
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
1129
|
-
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles,
|
|
1053
|
+
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, isFocused && keyboardFocusedDragHandleStyles, focusedStyles, dragHandleButtonScaledStyles],
|
|
1130
1054
|
ref: buttonRef
|
|
1131
1055
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
1132
1056
|
,
|
|
1133
1057
|
style: !editorExperiment('platform_editor_controls', 'variant1') ? positionStylesOld : {},
|
|
1134
1058
|
onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
|
|
1135
|
-
onMouseUp:
|
|
1136
|
-
onClick:
|
|
1137
|
-
onKeyDown:
|
|
1059
|
+
onMouseUp: handleMouseUp,
|
|
1060
|
+
onClick: handleOnClickNew,
|
|
1061
|
+
onKeyDown: handleKeyDownNew
|
|
1138
1062
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
|
|
1139
1063
|
,
|
|
1140
1064
|
onDrop: handleOnDrop,
|
|
@@ -1144,14 +1068,12 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1144
1068
|
"data-testid": "block-ctrl-drag-handle",
|
|
1145
1069
|
"aria-label": dragHandleAriaLabel,
|
|
1146
1070
|
onBlur: function onBlur() {
|
|
1147
|
-
|
|
1148
|
-
setIsFocused(false);
|
|
1149
|
-
}
|
|
1071
|
+
setIsFocused(false);
|
|
1150
1072
|
var pos = getPos();
|
|
1151
1073
|
if (pos !== undefined) {
|
|
1152
|
-
var _api$
|
|
1153
|
-
api === null || api === void 0 || (_api$
|
|
1154
|
-
var tr =
|
|
1074
|
+
var _api$core5;
|
|
1075
|
+
api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref9) {
|
|
1076
|
+
var tr = _ref9.tr;
|
|
1155
1077
|
tr.setMeta(key, {
|
|
1156
1078
|
activeNode: {
|
|
1157
1079
|
pos: pos,
|
|
@@ -1245,16 +1167,16 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1245
1167
|
var render = isTooltip ? buttonWithTooltip() : renderButton();
|
|
1246
1168
|
return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
|
|
1247
1169
|
};
|
|
1248
|
-
export var DragHandleWithVisibility = function DragHandleWithVisibility(
|
|
1249
|
-
var view =
|
|
1250
|
-
api =
|
|
1251
|
-
formatMessage =
|
|
1252
|
-
getPos =
|
|
1253
|
-
anchorName =
|
|
1254
|
-
nodeType =
|
|
1255
|
-
handleOptions =
|
|
1256
|
-
isTopLevelNode =
|
|
1257
|
-
anchorRectCache =
|
|
1170
|
+
export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
|
|
1171
|
+
var view = _ref0.view,
|
|
1172
|
+
api = _ref0.api,
|
|
1173
|
+
formatMessage = _ref0.formatMessage,
|
|
1174
|
+
getPos = _ref0.getPos,
|
|
1175
|
+
anchorName = _ref0.anchorName,
|
|
1176
|
+
nodeType = _ref0.nodeType,
|
|
1177
|
+
handleOptions = _ref0.handleOptions,
|
|
1178
|
+
isTopLevelNode = _ref0.isTopLevelNode,
|
|
1179
|
+
anchorRectCache = _ref0.anchorRectCache;
|
|
1258
1180
|
var rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
|
|
1259
1181
|
var _states$blockControls2, _states$blockControls3;
|
|
1260
1182
|
return {
|
|
@@ -17,7 +17,7 @@ export declare const isNodeWithCodeBlock: (tr: Transaction, start: number, nodeS
|
|
|
17
17
|
* @returns The appropriate selection for the node.
|
|
18
18
|
*/
|
|
19
19
|
export declare const newGetSelection: (doc: PMNode, selectionEmpty: boolean, start: number) => false | TextSelection | NodeSelection;
|
|
20
|
-
export declare const getSelection: (tr: Transaction, start: number
|
|
20
|
+
export declare const getSelection: (tr: Transaction, start: number) => false | TextSelection | NodeSelection;
|
|
21
21
|
export declare const selectNode: (tr: Transaction, start: number, nodeType: string, api?: ExtractInjectionAPI<BlockControlsPlugin>) => Transaction;
|
|
22
22
|
export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number, api?: ExtractInjectionAPI<BlockControlsPlugin>) => Transaction;
|
|
23
23
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "20.0.
|
|
3
|
+
"version": "20.0.2",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@atlaskit/primitives": "^22.5.0",
|
|
62
62
|
"@atlaskit/section-message": "^10.2.0",
|
|
63
63
|
"@atlaskit/theme": "^28.2.0",
|
|
64
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
64
|
+
"@atlaskit/tmp-editor-statsig": "^200.0.0",
|
|
65
65
|
"@atlaskit/tokens": "^18.2.0",
|
|
66
66
|
"@atlaskit/tooltip": "^24.3.0",
|
|
67
67
|
"@babel/runtime": "^7.0.0",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"uuid": "^11.1.1"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
|
-
"@atlaskit/editor-common": "^123.
|
|
76
|
+
"@atlaskit/editor-common": "^123.1.0",
|
|
77
77
|
"react": "^18.2.0 || ^19.2.0",
|
|
78
78
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
79
79
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|