@atlaskit/editor-plugin-block-controls 2.15.8 → 2.15.9

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,13 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.15.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#177093](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177093)
8
+ [`49e25b7064252`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49e25b7064252) -
9
+ Vertically centres drag handles for text nodes
10
+
3
11
  ## 2.15.8
4
12
 
5
13
  ### Patch Changes
@@ -22,8 +22,12 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type)
22
22
  } else {
23
23
  return "".concat(-_consts.DRAG_HANDLE_WIDTH, "px");
24
24
  }
25
+ } else if (type === 'heading-1') {
26
+ return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_H1_TOP_ADJUSTMENT, "px");
27
+ } else if (type === 'heading-2') {
28
+ return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_H2_TOP_ADJUSTMENT, "px");
25
29
  } else if (type === 'heading-3') {
26
- return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H3_TOP_ADJUSTMENT, "px");
30
+ return "".concat(dom.offsetTop, "px");
27
31
  } else if (type === 'heading-4') {
28
32
  return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H4_TOP_ADJUSTMENT, "px");
29
33
  } else if (type === 'heading-5') {
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
7
+ exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
10
10
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -18,10 +18,14 @@ var DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_NARROW_GAP = 4;
18
18
  var DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_MAX_GAP = 12;
19
19
  var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
20
20
  var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
21
- var DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = 2;
21
+ var DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
22
+ var DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
23
+ var DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = 1;
22
24
  var DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = 3;
23
25
  var DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
24
26
  var DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
27
+ var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
28
+ var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
25
29
  var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
26
30
  var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
27
31
  if (parentNodeType && parentNodeType !== 'doc') {
@@ -57,14 +61,8 @@ var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = fu
57
61
  var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
58
62
  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
59
63
  switch (nodeType) {
60
- case 'rule':
61
- return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
62
- case 'table':
63
- return DRAG_HANDLE_HEIGHT;
64
64
  case 'layoutSection':
65
- return 8;
66
- default:
67
- return 0;
65
+ return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
68
66
  }
69
67
  }
70
68
  switch (nodeType) {
@@ -73,7 +71,11 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
73
71
  case 'table':
74
72
  return DRAG_HANDLE_HEIGHT;
75
73
  case 'paragraph':
76
- return 2;
74
+ return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
75
+ case 'heading-1':
76
+ return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
77
+ case 'heading-2':
78
+ return DRAG_HANDLE_H2_TOP_ADJUSTMENT;
77
79
  case 'heading-3':
78
80
  return -DRAG_HANDLE_H3_TOP_ADJUSTMENT;
79
81
  case 'heading-4':
@@ -1,5 +1,5 @@
1
1
  import { fg } from '@atlaskit/platform-feature-flags';
2
- import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H3_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
2
+ import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
3
3
  export const getTopPosition = (dom, type) => {
4
4
  if (!dom) {
5
5
  return 'auto';
@@ -16,8 +16,12 @@ export const getTopPosition = (dom, type) => {
16
16
  } else {
17
17
  return `${-DRAG_HANDLE_WIDTH}px`;
18
18
  }
19
+ } else if (type === 'heading-1') {
20
+ return `${dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT}px`;
21
+ } else if (type === 'heading-2') {
22
+ return `${dom.offsetTop + DRAG_HANDLE_H2_TOP_ADJUSTMENT}px`;
19
23
  } else if (type === 'heading-3') {
20
- return `${dom.offsetTop - DRAG_HANDLE_H3_TOP_ADJUSTMENT}px`;
24
+ return `${dom.offsetTop}px`;
21
25
  } else if (type === 'heading-4') {
22
26
  return `${dom.offsetTop - DRAG_HANDLE_H4_TOP_ADJUSTMENT}px`;
23
27
  } else if (type === 'heading-5') {
@@ -9,10 +9,14 @@ export const DRAG_HANDLE_NARROW_GAP = 4;
9
9
  export const DRAG_HANDLE_MAX_GAP = 12;
10
10
  export const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
11
11
  export const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
12
- export const DRAG_HANDLE_H3_TOP_ADJUSTMENT = 2;
12
+ export const DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
13
+ export const DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
14
+ export const DRAG_HANDLE_H3_TOP_ADJUSTMENT = 1;
13
15
  export const DRAG_HANDLE_H4_TOP_ADJUSTMENT = 3;
14
16
  export const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
15
17
  export const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
18
+ export const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
19
+ export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
16
20
  const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
17
21
  export const dragHandleGap = (nodeType, parentNodeType) => {
18
22
  if (parentNodeType && parentNodeType !== 'doc') {
@@ -48,14 +52,8 @@ export const getNestedNodeLeftPaddingMargin = nodeType => {
48
52
  export const topPositionAdjustment = nodeType => {
49
53
  if (editorExperiment('advanced_layouts', true)) {
50
54
  switch (nodeType) {
51
- case 'rule':
52
- return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
53
- case 'table':
54
- return DRAG_HANDLE_HEIGHT;
55
55
  case 'layoutSection':
56
- return 8;
57
- default:
58
- return 0;
56
+ return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
59
57
  }
60
58
  }
61
59
  switch (nodeType) {
@@ -64,7 +62,11 @@ export const topPositionAdjustment = nodeType => {
64
62
  case 'table':
65
63
  return DRAG_HANDLE_HEIGHT;
66
64
  case 'paragraph':
67
- return 2;
65
+ return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
66
+ case 'heading-1':
67
+ return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
68
+ case 'heading-2':
69
+ return DRAG_HANDLE_H2_TOP_ADJUSTMENT;
68
70
  case 'heading-3':
69
71
  return -DRAG_HANDLE_H3_TOP_ADJUSTMENT;
70
72
  case 'heading-4':
@@ -1,5 +1,5 @@
1
1
  import { fg } from '@atlaskit/platform-feature-flags';
2
- import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H3_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
2
+ import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
3
3
  export var getTopPosition = function getTopPosition(dom, type) {
4
4
  if (!dom) {
5
5
  return 'auto';
@@ -16,8 +16,12 @@ export var getTopPosition = function getTopPosition(dom, type) {
16
16
  } else {
17
17
  return "".concat(-DRAG_HANDLE_WIDTH, "px");
18
18
  }
19
+ } else if (type === 'heading-1') {
20
+ return "".concat(dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT, "px");
21
+ } else if (type === 'heading-2') {
22
+ return "".concat(dom.offsetTop + DRAG_HANDLE_H2_TOP_ADJUSTMENT, "px");
19
23
  } else if (type === 'heading-3') {
20
- return "".concat(dom.offsetTop - DRAG_HANDLE_H3_TOP_ADJUSTMENT, "px");
24
+ return "".concat(dom.offsetTop, "px");
21
25
  } else if (type === 'heading-4') {
22
26
  return "".concat(dom.offsetTop - DRAG_HANDLE_H4_TOP_ADJUSTMENT, "px");
23
27
  } else if (type === 'heading-5') {
@@ -11,10 +11,14 @@ export var DRAG_HANDLE_NARROW_GAP = 4;
11
11
  export var DRAG_HANDLE_MAX_GAP = 12;
12
12
  export var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
13
13
  export var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
14
- export var DRAG_HANDLE_H3_TOP_ADJUSTMENT = 2;
14
+ export var DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
15
+ export var DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
16
+ export var DRAG_HANDLE_H3_TOP_ADJUSTMENT = 1;
15
17
  export var DRAG_HANDLE_H4_TOP_ADJUSTMENT = 3;
16
18
  export var DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
17
19
  export var DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
20
+ export var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
21
+ export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
18
22
  var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
19
23
  export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
20
24
  if (parentNodeType && parentNodeType !== 'doc') {
@@ -50,14 +54,8 @@ export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMar
50
54
  export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
51
55
  if (editorExperiment('advanced_layouts', true)) {
52
56
  switch (nodeType) {
53
- case 'rule':
54
- return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
55
- case 'table':
56
- return DRAG_HANDLE_HEIGHT;
57
57
  case 'layoutSection':
58
- return 8;
59
- default:
60
- return 0;
58
+ return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
61
59
  }
62
60
  }
63
61
  switch (nodeType) {
@@ -66,7 +64,11 @@ export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
66
64
  case 'table':
67
65
  return DRAG_HANDLE_HEIGHT;
68
66
  case 'paragraph':
69
- return 2;
67
+ return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
68
+ case 'heading-1':
69
+ return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
70
+ case 'heading-2':
71
+ return DRAG_HANDLE_H2_TOP_ADJUSTMENT;
70
72
  case 'heading-3':
71
73
  return -DRAG_HANDLE_H3_TOP_ADJUSTMENT;
72
74
  case 'heading-4':
@@ -7,10 +7,14 @@ export declare const DRAG_HANDLE_NARROW_GAP = 4;
7
7
  export declare const DRAG_HANDLE_MAX_GAP = 12;
8
8
  export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
9
9
  export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
10
- export declare const DRAG_HANDLE_H3_TOP_ADJUSTMENT = 2;
10
+ export declare const DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
11
+ export declare const DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
12
+ export declare const DRAG_HANDLE_H3_TOP_ADJUSTMENT = 1;
11
13
  export declare const DRAG_HANDLE_H4_TOP_ADJUSTMENT = 3;
12
14
  export declare const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
13
15
  export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
16
+ export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
17
+ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
14
18
  export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
15
19
  export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
16
20
  export declare const topPositionAdjustment: (nodeType: string) => number;
@@ -7,10 +7,14 @@ export declare const DRAG_HANDLE_NARROW_GAP = 4;
7
7
  export declare const DRAG_HANDLE_MAX_GAP = 12;
8
8
  export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
9
9
  export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
10
- export declare const DRAG_HANDLE_H3_TOP_ADJUSTMENT = 2;
10
+ export declare const DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
11
+ export declare const DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
12
+ export declare const DRAG_HANDLE_H3_TOP_ADJUSTMENT = 1;
11
13
  export declare const DRAG_HANDLE_H4_TOP_ADJUSTMENT = 3;
12
14
  export declare const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
13
15
  export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
16
+ export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
17
+ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
14
18
  export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
15
19
  export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
16
20
  export declare const topPositionAdjustment: (nodeType: string) => number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.15.8",
3
+ "version": "2.15.9",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",