@atlaskit/editor-plugin-block-controls 7.2.2 → 7.2.3

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/pm-plugins/utils/getSelection.js +11 -1
  3. package/dist/cjs/ui/drag-handle.js +17 -4
  4. package/dist/es2019/pm-plugins/utils/getSelection.js +10 -0
  5. package/dist/es2019/ui/drag-handle.js +16 -3
  6. package/dist/esm/pm-plugins/utils/getSelection.js +10 -0
  7. package/dist/esm/ui/drag-handle.js +16 -3
  8. package/dist/types/pm-plugins/utils/getSelection.d.ts +1 -0
  9. package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts +1 -0
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 7.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`c02f3cc8759b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c02f3cc8759b5) -
8
+ [ux] Updates handleOnClick of a drag handle. When blockquote has a codeblock inside, we set
9
+ NodeSelection instead of range selection when blockquote's drag handle is clicked.
10
+
3
11
  ## 7.2.2
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/pm-plugins/utils/getSelection.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
6
+ exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
7
7
  var _selection2 = require("@atlaskit/editor-common/selection");
8
8
  var _state = require("@atlaskit/editor-prosemirror/state");
9
9
  var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -33,6 +33,16 @@ var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr,
33
33
  inlineNodeEndPos: inlineNodeEndPos
34
34
  };
35
35
  };
36
+ var isNodeWithCodeBlock = exports.isNodeWithCodeBlock = function isNodeWithCodeBlock(tr, start, nodeSize) {
37
+ var $startPos = tr.doc.resolve(start);
38
+ var hasCodeBlock = false;
39
+ tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n) {
40
+ if (['codeBlock'].includes(n.type.name)) {
41
+ hasCodeBlock = true;
42
+ }
43
+ });
44
+ return hasCodeBlock;
45
+ };
36
46
  var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start, nodeSize) {
37
47
  var $startPos = tr.doc.resolve(start);
38
48
  var hasMediaOrExtension = false;
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -36,7 +36,7 @@ var _main = require("../pm-plugins/main");
36
36
  var _analytics2 = require("../pm-plugins/utils/analytics");
37
37
  var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
38
38
  var _getSelection = require("../pm-plugins/utils/getSelection");
39
- var _selection = require("../pm-plugins/utils/selection");
39
+ var _selection2 = require("../pm-plugins/utils/selection");
40
40
  var _consts2 = require("./consts");
41
41
  var _dragPreview = require("./drag-preview");
42
42
  var _anchorName = require("./utils/anchor-name");
@@ -357,7 +357,20 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
357
357
  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;
358
358
  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;
359
359
  if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
360
- tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
360
+ if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
361
+ var node = tr.doc.nodeAt(startPos);
362
+ var nodeSize = node ? node.nodeSize : 1;
363
+ // It this will be required in other places, where selectNode is used, we should
364
+ // move it inside of the newGetSelection in the selectNode
365
+ if (nodeType === 'blockquote' && (0, _getSelection.isNodeWithCodeBlock)(tr, startPos, nodeSize)) {
366
+ var _selection = new _state.NodeSelection(tr.doc.resolve(startPos));
367
+ tr.setSelection(_selection);
368
+ } else {
369
+ tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
370
+ }
371
+ } else {
372
+ tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
373
+ }
361
374
  if (_consts2.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
362
375
  var _api$blockControls;
363
376
  api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
@@ -379,8 +392,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
379
392
  }
380
393
  } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
381
394
  var _api$blockControls3;
382
- var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
383
- var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
395
+ var alignAnchorHeadToSel = (0, _selection2.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
396
+ var selectionWithExpandedHead = (0, _selection2.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
384
397
  tr.setSelection(selectionWithExpandedHead);
385
398
  api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
386
399
  tr: tr
package/dist/es2019/pm-plugins/utils/getSelection.js CHANGED
@@ -27,6 +27,16 @@ export const getInlineNodePos = (tr, start, nodeSize) => {
27
27
  inlineNodeEndPos
28
28
  };
29
29
  };
30
+ export const isNodeWithCodeBlock = (tr, start, nodeSize) => {
31
+ const $startPos = tr.doc.resolve(start);
32
+ let hasCodeBlock = false;
33
+ tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, n => {
34
+ if (['codeBlock'].includes(n.type.name)) {
35
+ hasCodeBlock = true;
36
+ }
37
+ });
38
+ return hasCodeBlock;
39
+ };
30
40
  const isNodeWithMediaOrExtension = (tr, start, nodeSize) => {
31
41
  const $startPos = tr.doc.resolve(start);
32
42
  let hasMediaOrExtension = false;
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -15,7 +15,7 @@ import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaK
15
15
  import { blockControlsMessages } from '@atlaskit/editor-common/messages';
16
16
  import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
17
17
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
18
- import { TextSelection } from '@atlaskit/editor-prosemirror/state';
18
+ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
19
19
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
20
20
  import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles/consts';
21
21
  import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
@@ -33,7 +33,7 @@ import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
33
33
  import { key } from '../pm-plugins/main';
34
34
  import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
35
35
  import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
36
- import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
36
+ import { isHandleCorrelatedToSelection, isNodeWithCodeBlock, selectNode } from '../pm-plugins/utils/getSelection';
37
37
  import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
38
38
  import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
39
39
  import { dragPreview } from './drag-preview';
@@ -337,7 +337,20 @@ export const DragHandle = ({
337
337
  const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
338
338
  const $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;
339
339
  if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
340
- tr = selectNode(tr, startPos, nodeType);
340
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
341
+ const node = tr.doc.nodeAt(startPos);
342
+ const nodeSize = node ? node.nodeSize : 1;
343
+ // It this will be required in other places, where selectNode is used, we should
344
+ // move it inside of the newGetSelection in the selectNode
345
+ if (nodeType === 'blockquote' && isNodeWithCodeBlock(tr, startPos, nodeSize)) {
346
+ const selection = new NodeSelection(tr.doc.resolve(startPos));
347
+ tr.setSelection(selection);
348
+ } else {
349
+ tr = selectNode(tr, startPos, nodeType);
350
+ }
351
+ } else {
352
+ tr = selectNode(tr, startPos, nodeType);
353
+ }
341
354
  if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
342
355
  var _api$blockControls;
343
356
  api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
package/dist/esm/pm-plugins/utils/getSelection.js CHANGED
@@ -27,6 +27,16 @@ export var getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
27
27
  inlineNodeEndPos: inlineNodeEndPos
28
28
  };
29
29
  };
30
+ export var isNodeWithCodeBlock = function isNodeWithCodeBlock(tr, start, nodeSize) {
31
+ var $startPos = tr.doc.resolve(start);
32
+ var hasCodeBlock = false;
33
+ tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n) {
34
+ if (['codeBlock'].includes(n.type.name)) {
35
+ hasCodeBlock = true;
36
+ }
37
+ });
38
+ return hasCodeBlock;
39
+ };
30
40
  var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start, nodeSize) {
31
41
  var $startPos = tr.doc.resolve(start);
32
42
  var hasMediaOrExtension = false;
package/dist/esm/ui/drag-handle.js CHANGED
@@ -20,7 +20,7 @@ import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaK
20
20
  import { blockControlsMessages } from '@atlaskit/editor-common/messages';
21
21
  import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
22
22
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
23
- import { TextSelection } from '@atlaskit/editor-prosemirror/state';
23
+ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
24
24
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
25
25
  import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles/consts';
26
26
  import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
@@ -38,7 +38,7 @@ import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
38
38
  import { key } from '../pm-plugins/main';
39
39
  import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
40
40
  import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
41
- import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
41
+ import { isHandleCorrelatedToSelection, isNodeWithCodeBlock, selectNode } from '../pm-plugins/utils/getSelection';
42
42
  import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
43
43
  import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
44
44
  import { dragPreview } from './drag-preview';
@@ -354,7 +354,20 @@ export var DragHandle = function DragHandle(_ref) {
354
354
  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;
355
355
  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;
356
356
  if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
357
- tr = selectNode(tr, startPos, nodeType);
357
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
358
+ var node = tr.doc.nodeAt(startPos);
359
+ var nodeSize = node ? node.nodeSize : 1;
360
+ // It this will be required in other places, where selectNode is used, we should
361
+ // move it inside of the newGetSelection in the selectNode
362
+ if (nodeType === 'blockquote' && isNodeWithCodeBlock(tr, startPos, nodeSize)) {
363
+ var _selection = new NodeSelection(tr.doc.resolve(startPos));
364
+ tr.setSelection(_selection);
365
+ } else {
366
+ tr = selectNode(tr, startPos, nodeType);
367
+ }
368
+ } else {
369
+ tr = selectNode(tr, startPos, nodeType);
370
+ }
358
371
  if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
359
372
  var _api$blockControls;
360
373
  api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
package/dist/types/pm-plugins/utils/getSelection.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize
4
4
  inlineNodeEndPos: number;
5
5
  inlineNodePos: number;
6
6
  };
7
+ export declare const isNodeWithCodeBlock: (tr: Transaction, start: number, nodeSize: number) => boolean;
7
8
  export declare const getSelection: (tr: Transaction, start: number) => false | NodeSelection | TextSelection;
8
9
  export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
9
10
  export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize
4
4
  inlineNodeEndPos: number;
5
5
  inlineNodePos: number;
6
6
  };
7
+ export declare const isNodeWithCodeBlock: (tr: Transaction, start: number, nodeSize: number) => boolean;
7
8
  export declare const getSelection: (tr: Transaction, start: number) => false | NodeSelection | TextSelection;
8
9
  export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
9
10
  export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.2.2",
3
+ "version": "7.2.3",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,13 +38,13 @@
38
38
  "@atlaskit/editor-plugin-metrics": "^7.0.0",
39
39
  "@atlaskit/editor-plugin-quick-insert": "^6.0.0",
40
40
  "@atlaskit/editor-plugin-selection": "^6.0.0",
41
- "@atlaskit/editor-plugin-type-ahead": "^6.1.0",
41
+ "@atlaskit/editor-plugin-type-ahead": "^6.2.0",
42
42
  "@atlaskit/editor-plugin-user-intent": "^4.0.0",
43
43
  "@atlaskit/editor-plugin-width": "^7.0.0",
44
44
  "@atlaskit/editor-prosemirror": "7.0.0",
45
45
  "@atlaskit/editor-shared-styles": "^3.6.0",
46
46
  "@atlaskit/editor-tables": "^2.9.0",
47
- "@atlaskit/icon": "^28.3.0",
47
+ "@atlaskit/icon": "^28.4.0",
48
48
  "@atlaskit/link": "^3.2.0",
49
49
  "@atlaskit/platform-feature-flags": "^1.1.0",
50
50
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
53
53
  "@atlaskit/primitives": "^14.15.0",
54
54
  "@atlaskit/theme": "^21.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^13.0.0",
55
+ "@atlaskit/tmp-editor-statsig": "^13.2.0",
56
56
  "@atlaskit/tokens": "^6.4.0",
57
57
  "@atlaskit/tooltip": "^20.5.0",
58
58
  "@babel/runtime": "^7.0.0",