@atlaskit/editor-plugin-table 7.6.12 → 7.6.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/ui/FloatingInsertButton/InsertButton.js +8 -1
  3. package/dist/es2019/ui/FloatingInsertButton/InsertButton.js +8 -1
  4. package/dist/esm/ui/FloatingInsertButton/InsertButton.js +8 -1
  5. package/package.json +1 -1
  6. package/src/ui/FloatingInsertButton/InsertButton.tsx +16 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.6.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [#88770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88770) [`c86d9e7941f1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c86d9e7941f1) - [ux] fixing the numbered columns blue insert line indicator with correct length
8
+
3
9
  ## 7.6.12
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/ui/FloatingInsertButton/InsertButton.js CHANGED
@@ -34,6 +34,13 @@ var getToolbarSize = function getToolbarSize(tableRef) {
34
34
  }
35
35
  return _consts.tableToolbarSize;
36
36
  };
37
+ var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDropEnabled) {
38
+ var parent = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
39
+ if (parent && isDragAndDropEnabled) {
40
+ return parent.querySelector(".".concat(_types.TableCssClassName.NUMBERED_COLUMN)) ? _editorSharedStyles.akEditorTableNumberColumnWidth - 1 : 0;
41
+ }
42
+ return 0;
43
+ };
37
44
  var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
38
45
  // The line gets width 100% from the table,
39
46
  // but since we have an overflow on the left,
@@ -48,7 +55,7 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
48
55
  var diff = offsetWidth - parentOffsetWidth;
49
56
  var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
50
57
  var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
51
- return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
58
+ return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
52
59
  };
53
60
  var tooltipMessageByType = function tooltipMessageByType(type) {
54
61
  return type === 'row' ? _messages.tableMessages.insertRow : _messages.tableMessages.insertColumn;
package/dist/es2019/ui/FloatingInsertButton/InsertButton.js CHANGED
@@ -26,6 +26,13 @@ const getToolbarSize = tableRef => {
26
26
  }
27
27
  return tableToolbarSize;
28
28
  };
29
+ const getNumberColumnWidth = (tableRef, isDragAndDropEnabled) => {
30
+ const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
31
+ if (parent && isDragAndDropEnabled) {
32
+ return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`) ? akEditorTableNumberColumnWidth - 1 : 0;
33
+ }
34
+ return 0;
35
+ };
29
36
  const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
30
37
  // The line gets width 100% from the table,
31
38
  // but since we have an overflow on the left,
@@ -43,7 +50,7 @@ const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
43
50
  const diff = offsetWidth - parentOffsetWidth;
44
51
  const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
45
52
  const lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
46
- return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
53
+ return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
47
54
  };
48
55
  const tooltipMessageByType = type => {
49
56
  return type === 'row' ? messages.insertRow : messages.insertColumn;
package/dist/esm/ui/FloatingInsertButton/InsertButton.js CHANGED
@@ -27,6 +27,13 @@ var getToolbarSize = function getToolbarSize(tableRef) {
27
27
  }
28
28
  return tableToolbarSize;
29
29
  };
30
+ var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDropEnabled) {
31
+ var parent = closestElement(tableRef, ".".concat(ClassName.TABLE_CONTAINER));
32
+ if (parent && isDragAndDropEnabled) {
33
+ return parent.querySelector(".".concat(ClassName.NUMBERED_COLUMN)) ? akEditorTableNumberColumnWidth - 1 : 0;
34
+ }
35
+ return 0;
36
+ };
30
37
  var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
31
38
  // The line gets width 100% from the table,
32
39
  // but since we have an overflow on the left,
@@ -41,7 +48,7 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
41
48
  var diff = offsetWidth - parentOffsetWidth;
42
49
  var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
43
50
  var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
44
- return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
51
+ return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
45
52
  };
46
53
  var tooltipMessageByType = function tooltipMessageByType(type) {
47
54
  return type === 'row' ? messages.insertRow : messages.insertColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.6.12",
3
+ "version": "7.6.13",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/src/ui/FloatingInsertButton/InsertButton.tsx CHANGED
@@ -58,6 +58,19 @@ const getToolbarSize = (tableRef: HTMLElement): number => {
58
58
  return tableToolbarSize;
59
59
  };
60
60
 
61
+ const getNumberColumnWidth = (
62
+ tableRef: HTMLElement,
63
+ isDragAndDropEnabled?: boolean,
64
+ ): number => {
65
+ const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
66
+ if (parent && isDragAndDropEnabled) {
67
+ return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`)
68
+ ? akEditorTableNumberColumnWidth - 1
69
+ : 0;
70
+ }
71
+ return 0;
72
+ };
73
+
61
74
  const getInsertLineWidth = (
62
75
  tableRef: HTMLElement,
63
76
  isDragAndDropEnabled?: boolean,
@@ -78,7 +91,9 @@ const getInsertLineWidth = (
78
91
  Math.min(
79
92
  offsetWidth + toolbarSize,
80
93
  parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0),
81
- ) + lineOffset
94
+ ) +
95
+ lineOffset +
96
+ getNumberColumnWidth(tableRef, isDragAndDropEnabled)
82
97
  );
83
98
  };
84
99