@atlaskit/editor-plugin-table 5.3.0 → 5.3.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.
Files changed (186) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/plugins/table/commands/hover.js +17 -8
  3. package/dist/cjs/plugins/table/commands/index.js +6 -0
  4. package/dist/cjs/plugins/table/commands/misc.js +1 -7
  5. package/dist/cjs/plugins/table/event-handlers.js +29 -2
  6. package/dist/cjs/plugins/table/index.js +1 -1
  7. package/dist/cjs/plugins/table/nodeviews/TableComponent.js +5 -3
  8. package/dist/cjs/plugins/table/nodeviews/table.js +4 -2
  9. package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js +7 -3
  10. package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js +7 -2
  11. package/dist/cjs/plugins/table/pm-plugins/default-table-selection.js +14 -1
  12. package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/commands.js +36 -7
  13. package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js +69 -7
  14. package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/reducer.js +2 -0
  15. package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/utils/index.js +12 -0
  16. package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js +59 -0
  17. package/dist/cjs/plugins/table/pm-plugins/main.js +5 -5
  18. package/dist/cjs/plugins/table/reducer.js +2 -1
  19. package/dist/cjs/plugins/table/types.js +14 -1
  20. package/dist/cjs/plugins/table/ui/DragHandle/index.js +50 -0
  21. package/dist/cjs/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +53 -14
  22. package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +114 -0
  23. package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +53 -0
  24. package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/index.js +11 -106
  25. package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js +16 -6
  26. package/dist/cjs/plugins/table/ui/common-styles.js +9 -6
  27. package/dist/cjs/plugins/table/ui/consts.js +3 -1
  28. package/dist/cjs/plugins/table/ui/ui-styles.js +21 -9
  29. package/dist/cjs/plugins/table/utils/decoration.js +111 -19
  30. package/dist/cjs/plugins/table/utils/dom.js +7 -1
  31. package/dist/cjs/plugins/table/utils/index.js +38 -1
  32. package/dist/cjs/plugins/table/utils/merged-cells.js +66 -0
  33. package/dist/es2019/plugins/table/commands/hover.js +12 -8
  34. package/dist/es2019/plugins/table/commands/index.js +1 -1
  35. package/dist/es2019/plugins/table/commands/misc.js +1 -7
  36. package/dist/es2019/plugins/table/event-handlers.js +28 -2
  37. package/dist/es2019/plugins/table/index.js +1 -1
  38. package/dist/es2019/plugins/table/nodeviews/TableComponent.js +5 -3
  39. package/dist/es2019/plugins/table/nodeviews/table.js +4 -2
  40. package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js +8 -6
  41. package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js +7 -2
  42. package/dist/es2019/plugins/table/pm-plugins/default-table-selection.js +13 -0
  43. package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js +35 -7
  44. package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js +69 -4
  45. package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/reducer.js +2 -0
  46. package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/utils/index.js +1 -0
  47. package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js +56 -0
  48. package/dist/es2019/plugins/table/pm-plugins/main.js +6 -5
  49. package/dist/es2019/plugins/table/reducer.js +2 -1
  50. package/dist/es2019/plugins/table/types.js +14 -1
  51. package/dist/es2019/plugins/table/ui/DragHandle/index.js +41 -0
  52. package/dist/es2019/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +54 -10
  53. package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +86 -0
  54. package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +43 -0
  55. package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/index.js +2 -88
  56. package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js +17 -7
  57. package/dist/es2019/plugins/table/ui/common-styles.js +49 -13
  58. package/dist/es2019/plugins/table/ui/consts.js +2 -0
  59. package/dist/es2019/plugins/table/ui/ui-styles.js +171 -15
  60. package/dist/es2019/plugins/table/utils/decoration.js +106 -18
  61. package/dist/es2019/plugins/table/utils/dom.js +2 -0
  62. package/dist/es2019/plugins/table/utils/index.js +4 -3
  63. package/dist/es2019/plugins/table/utils/merged-cells.js +48 -0
  64. package/dist/esm/plugins/table/commands/hover.js +16 -8
  65. package/dist/esm/plugins/table/commands/index.js +1 -1
  66. package/dist/esm/plugins/table/commands/misc.js +1 -7
  67. package/dist/esm/plugins/table/event-handlers.js +29 -2
  68. package/dist/esm/plugins/table/index.js +1 -1
  69. package/dist/esm/plugins/table/nodeviews/TableComponent.js +5 -3
  70. package/dist/esm/plugins/table/nodeviews/table.js +4 -2
  71. package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js +8 -6
  72. package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js +7 -2
  73. package/dist/esm/plugins/table/pm-plugins/default-table-selection.js +13 -0
  74. package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js +36 -7
  75. package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js +65 -4
  76. package/dist/esm/plugins/table/pm-plugins/drag-and-drop/reducer.js +2 -0
  77. package/dist/esm/plugins/table/pm-plugins/drag-and-drop/utils/index.js +1 -0
  78. package/dist/esm/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js +53 -0
  79. package/dist/esm/plugins/table/pm-plugins/main.js +7 -7
  80. package/dist/esm/plugins/table/reducer.js +2 -1
  81. package/dist/esm/plugins/table/types.js +14 -1
  82. package/dist/esm/plugins/table/ui/DragHandle/index.js +41 -0
  83. package/dist/esm/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +54 -15
  84. package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +104 -0
  85. package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +46 -0
  86. package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/index.js +2 -104
  87. package/dist/esm/plugins/table/ui/TableFloatingControls/index.js +17 -7
  88. package/dist/esm/plugins/table/ui/common-styles.js +11 -8
  89. package/dist/esm/plugins/table/ui/consts.js +2 -0
  90. package/dist/esm/plugins/table/ui/ui-styles.js +21 -9
  91. package/dist/esm/plugins/table/utils/decoration.js +110 -18
  92. package/dist/esm/plugins/table/utils/dom.js +6 -0
  93. package/dist/esm/plugins/table/utils/index.js +4 -3
  94. package/dist/esm/plugins/table/utils/merged-cells.js +60 -0
  95. package/dist/types/plugins/table/commands/hover.d.ts +2 -1
  96. package/dist/types/plugins/table/commands/index.d.ts +1 -1
  97. package/dist/types/plugins/table/event-handlers.d.ts +1 -0
  98. package/dist/types/plugins/table/nodeviews/types.d.ts +4 -3
  99. package/dist/types/plugins/table/pm-plugins/decorations/plugin.d.ts +2 -1
  100. package/dist/types/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts +1 -1
  101. package/dist/types/plugins/table/pm-plugins/default-table-selection.d.ts +12 -0
  102. package/dist/types/plugins/table/pm-plugins/drag-and-drop/actions.d.ts +5 -1
  103. package/dist/types/plugins/table/pm-plugins/drag-and-drop/commands.d.ts +6 -1
  104. package/dist/types/plugins/table/pm-plugins/drag-and-drop/utils/index.d.ts +1 -0
  105. package/dist/types/plugins/table/pm-plugins/drag-and-drop/utils/monitor.d.ts +3 -0
  106. package/dist/types/plugins/table/pm-plugins/main.d.ts +1 -1
  107. package/dist/types/plugins/table/types.d.ts +35 -2
  108. package/dist/types/plugins/table/ui/DragHandle/index.d.ts +11 -0
  109. package/dist/types/plugins/table/ui/TableFloatingControls/NumberColumn/index.d.ts +4 -1
  110. package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.d.ts +17 -0
  111. package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts +16 -0
  112. package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts +2 -17
  113. package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts +3 -2
  114. package/dist/types/plugins/table/ui/consts.d.ts +2 -0
  115. package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -0
  116. package/dist/types/plugins/table/utils/decoration.d.ts +4 -2
  117. package/dist/types/plugins/table/utils/dom.d.ts +2 -0
  118. package/dist/types/plugins/table/utils/index.d.ts +3 -2
  119. package/dist/types/plugins/table/utils/merged-cells.d.ts +3 -0
  120. package/dist/types-ts4.5/plugins/table/commands/hover.d.ts +2 -1
  121. package/dist/types-ts4.5/plugins/table/commands/index.d.ts +1 -1
  122. package/dist/types-ts4.5/plugins/table/event-handlers.d.ts +1 -0
  123. package/dist/types-ts4.5/plugins/table/nodeviews/types.d.ts +4 -3
  124. package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/plugin.d.ts +2 -1
  125. package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts +1 -1
  126. package/dist/types-ts4.5/plugins/table/pm-plugins/default-table-selection.d.ts +12 -0
  127. package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/actions.d.ts +5 -1
  128. package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/commands.d.ts +6 -1
  129. package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/utils/index.d.ts +1 -0
  130. package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/utils/monitor.d.ts +3 -0
  131. package/dist/types-ts4.5/plugins/table/pm-plugins/main.d.ts +1 -1
  132. package/dist/types-ts4.5/plugins/table/types.d.ts +35 -2
  133. package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts +11 -0
  134. package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/NumberColumn/index.d.ts +4 -1
  135. package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.d.ts +17 -0
  136. package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts +16 -0
  137. package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts +2 -17
  138. package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts +3 -2
  139. package/dist/types-ts4.5/plugins/table/ui/consts.d.ts +2 -0
  140. package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -0
  141. package/dist/types-ts4.5/plugins/table/utils/decoration.d.ts +4 -2
  142. package/dist/types-ts4.5/plugins/table/utils/dom.d.ts +2 -0
  143. package/dist/types-ts4.5/plugins/table/utils/index.d.ts +3 -2
  144. package/dist/types-ts4.5/plugins/table/utils/merged-cells.d.ts +3 -0
  145. package/package.json +6 -2
  146. package/src/__tests__/unit/event-handlers.ts +74 -1
  147. package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts +35 -15
  148. package/src/__tests__/unit/pm-plugins/decorations/plugin.ts +146 -42
  149. package/src/__tests__/unit/ui/NumberColumn.tsx +148 -0
  150. package/src/__tests__/unit/ui/RowControls.tsx +4 -4
  151. package/src/__tests__/unit/ui/RowDragControls.tsx +118 -0
  152. package/src/__tests__/unit/ui/TableFloatingControls.tsx +9 -5
  153. package/src/plugins/table/commands/hover.ts +16 -7
  154. package/src/plugins/table/commands/index.ts +1 -0
  155. package/src/plugins/table/commands/misc.ts +0 -5
  156. package/src/plugins/table/event-handlers.ts +49 -2
  157. package/src/plugins/table/index.tsx +1 -1
  158. package/src/plugins/table/nodeviews/TableComponent.tsx +3 -2
  159. package/src/plugins/table/nodeviews/table.tsx +2 -0
  160. package/src/plugins/table/nodeviews/types.ts +4 -3
  161. package/src/plugins/table/pm-plugins/decorations/plugin.ts +13 -4
  162. package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts +10 -5
  163. package/src/plugins/table/pm-plugins/default-table-selection.ts +10 -0
  164. package/src/plugins/table/pm-plugins/drag-and-drop/actions.ts +6 -1
  165. package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts +58 -8
  166. package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts +77 -4
  167. package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts +2 -0
  168. package/src/plugins/table/pm-plugins/drag-and-drop/utils/index.ts +1 -0
  169. package/src/plugins/table/pm-plugins/drag-and-drop/utils/monitor.ts +72 -0
  170. package/src/plugins/table/pm-plugins/main.ts +9 -4
  171. package/src/plugins/table/reducer.ts +2 -1
  172. package/src/plugins/table/types.ts +37 -3
  173. package/src/plugins/table/ui/DragHandle/index.tsx +57 -0
  174. package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx +68 -30
  175. package/src/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.tsx +129 -0
  176. package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +75 -0
  177. package/src/plugins/table/ui/TableFloatingControls/RowControls/index.tsx +2 -135
  178. package/src/plugins/table/ui/TableFloatingControls/index.tsx +43 -24
  179. package/src/plugins/table/ui/common-styles.ts +54 -11
  180. package/src/plugins/table/ui/consts.ts +2 -0
  181. package/src/plugins/table/ui/ui-styles.ts +173 -14
  182. package/src/plugins/table/utils/decoration.ts +176 -27
  183. package/src/plugins/table/utils/dom.ts +8 -0
  184. package/src/plugins/table/utils/index.ts +5 -0
  185. package/src/plugins/table/utils/merged-cells.ts +67 -0
  186. package/tsconfig.app.json +3 -0
@@ -0,0 +1,104 @@
1
+ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
+ import _createClass from "@babel/runtime/helpers/createClass";
3
+ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
4
+ import _inherits from "@babel/runtime/helpers/inherits";
5
+ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
6
+ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
9
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
10
+ import React, { Component } from 'react';
11
+ import { defineMessages, injectIntl } from 'react-intl-next';
12
+ import { clearHoverSelection } from '../../../commands';
13
+ import { TableCssClassName as ClassName } from '../../../types';
14
+ import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
15
+ import { tableControlsSpacing, tableToolbarSize } from '../../consts';
16
+ var messages = defineMessages({
17
+ rowControl: {
18
+ id: 'fabric.editor.rowControl',
19
+ defaultMessage: 'Highlight row',
20
+ description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
21
+ }
22
+ });
23
+ var RowControlsComponent = /*#__PURE__*/function (_Component) {
24
+ _inherits(RowControlsComponent, _Component);
25
+ var _super = _createSuper(RowControlsComponent);
26
+ function RowControlsComponent() {
27
+ var _this;
28
+ _classCallCheck(this, RowControlsComponent);
29
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
30
+ args[_key] = arguments[_key];
31
+ }
32
+ _this = _super.call.apply(_super, [this].concat(args));
33
+ _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
34
+ var _this$props$editorVie = _this.props.editorView,
35
+ state = _this$props$editorVie.state,
36
+ dispatch = _this$props$editorVie.dispatch;
37
+ clearHoverSelection()(state, dispatch);
38
+ });
39
+ return _this;
40
+ }
41
+ _createClass(RowControlsComponent, [{
42
+ key: "render",
43
+ value: function render() {
44
+ var _this2 = this;
45
+ var _this$props = this.props,
46
+ editorView = _this$props.editorView,
47
+ tableRef = _this$props.tableRef,
48
+ hoveredRows = _this$props.hoveredRows,
49
+ isInDanger = _this$props.isInDanger,
50
+ isResizing = _this$props.isResizing,
51
+ formatMessage = _this$props.intl.formatMessage;
52
+ if (!tableRef) {
53
+ return null;
54
+ }
55
+ var selection = editorView.state.selection;
56
+ var rowHeights = getRowHeights(tableRef);
57
+ var rowsParams = getRowsParams(rowHeights);
58
+ var firstRow = tableRef.querySelector('tr');
59
+ var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
60
+ return /*#__PURE__*/React.createElement("div", {
61
+ className: ClassName.ROW_CONTROLS
62
+ }, /*#__PURE__*/React.createElement("div", {
63
+ className: ClassName.ROW_CONTROLS_INNER
64
+ }, rowsParams.map(function (_ref, index) {
65
+ var startIndex = _ref.startIndex,
66
+ endIndex = _ref.endIndex,
67
+ height = _ref.height;
68
+ // if previous row was header row, add its height to our margin
69
+ var marginTop = -1;
70
+ if (index === 1 && hasHeaderRow && _this2.props.stickyTop !== undefined) {
71
+ marginTop += rowHeights[index - 1] + tableToolbarSize;
72
+ }
73
+ var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
74
+ return /*#__PURE__*/React.createElement("div", {
75
+ className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
76
+ key: startIndex,
77
+ style: {
78
+ height: height,
79
+ marginTop: "".concat(marginTop, "px"),
80
+ top: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
81
+ paddingTop: thisRowSticky ? "".concat(tableControlsSpacing, "px") : undefined
82
+ }
83
+ }, /*#__PURE__*/React.createElement("button", {
84
+ "aria-label": formatMessage(messages.rowControl),
85
+ type: "button",
86
+ className: "".concat(ClassName.ROW_CONTROLS_BUTTON, " ").concat(ClassName.CONTROLS_BUTTON),
87
+ onClick: function onClick(event) {
88
+ return _this2.props.selectRow(startIndex, event.shiftKey);
89
+ },
90
+ onMouseOver: function onMouseOver() {
91
+ return _this2.props.hoverRows([startIndex]);
92
+ },
93
+ onMouseOut: _this2.clearHoverSelection,
94
+ "data-start-index": startIndex,
95
+ "data-end-index": endIndex
96
+ }), /*#__PURE__*/React.createElement("div", {
97
+ className: ClassName.CONTROLS_INSERT_MARKER
98
+ }));
99
+ })));
100
+ }
101
+ }]);
102
+ return RowControlsComponent;
103
+ }(Component);
104
+ export var RowControls = injectIntl(RowControlsComponent);
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+ import { injectIntl } from 'react-intl-next';
3
+ import { findTable } from '@atlaskit/editor-tables/utils';
4
+ import { TableCssClassName as ClassName } from '../../../types';
5
+ import { getRowHeights } from '../../../utils';
6
+ import { DragHandle } from '../../DragHandle';
7
+ var DragControlsComponent = function DragControlsComponent(_ref) {
8
+ var tableRef = _ref.tableRef,
9
+ hoveredCell = _ref.hoveredCell,
10
+ hoverRows = _ref.hoverRows,
11
+ selectRow = _ref.selectRow,
12
+ tableActive = _ref.tableActive,
13
+ editorView = _ref.editorView;
14
+ var rowHeights = getRowHeights(tableRef);
15
+ var heights = rowHeights.map(function (height) {
16
+ return "".concat(height - 1, "px");
17
+ }).join(' ');
18
+ var _onClick = function onClick(index, event) {};
19
+ var onMouseOver = function onMouseOver() {};
20
+ var onMouseOut = function onMouseOut() {};
21
+ var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
22
+ var getLocalId = function getLocalId() {
23
+ var _tableNode$node;
24
+ var tableNode = findTable(editorView.state.selection);
25
+ return (tableNode === null || tableNode === void 0 || (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 || (_tableNode$node = _tableNode$node.attrs) === null || _tableNode$node === void 0 ? void 0 : _tableNode$node.localId) || '';
26
+ };
27
+ return /*#__PURE__*/React.createElement("div", {
28
+ className: ClassName.ROW_CONTROLS_WITH_DRAG,
29
+ style: {
30
+ gridTemplateRows: heights
31
+ }
32
+ }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
33
+ style: {
34
+ gridRow: "".concat(rowIndex + 1, " / span 1")
35
+ }
36
+ }, /*#__PURE__*/React.createElement(DragHandle, {
37
+ onClick: function onClick(event) {
38
+ return _onClick(rowIndex, event);
39
+ },
40
+ onMouseOver: onMouseOver,
41
+ onMouseOut: onMouseOut,
42
+ tableLocalId: getLocalId(),
43
+ indexes: []
44
+ })));
45
+ };
46
+ export var DragControls = injectIntl(DragControlsComponent);
@@ -1,104 +1,2 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
4
- import _inherits from "@babel/runtime/helpers/inherits";
5
- import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
6
- import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
9
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
10
- import React, { Component } from 'react';
11
- import { defineMessages, injectIntl } from 'react-intl-next';
12
- import { clearHoverSelection } from '../../../commands';
13
- import { TableCssClassName as ClassName } from '../../../types';
14
- import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
15
- import { tableControlsSpacing, tableToolbarSize } from '../../consts';
16
- var messages = defineMessages({
17
- rowControl: {
18
- id: 'fabric.editor.rowControl',
19
- defaultMessage: 'Highlight row',
20
- description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
21
- }
22
- });
23
- var RowControlsComponent = /*#__PURE__*/function (_Component) {
24
- _inherits(RowControlsComponent, _Component);
25
- var _super = _createSuper(RowControlsComponent);
26
- function RowControlsComponent() {
27
- var _this;
28
- _classCallCheck(this, RowControlsComponent);
29
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
30
- args[_key] = arguments[_key];
31
- }
32
- _this = _super.call.apply(_super, [this].concat(args));
33
- _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
34
- var _this$props$editorVie = _this.props.editorView,
35
- state = _this$props$editorVie.state,
36
- dispatch = _this$props$editorVie.dispatch;
37
- clearHoverSelection()(state, dispatch);
38
- });
39
- return _this;
40
- }
41
- _createClass(RowControlsComponent, [{
42
- key: "render",
43
- value: function render() {
44
- var _this2 = this;
45
- var _this$props = this.props,
46
- editorView = _this$props.editorView,
47
- tableRef = _this$props.tableRef,
48
- hoveredRows = _this$props.hoveredRows,
49
- isInDanger = _this$props.isInDanger,
50
- isResizing = _this$props.isResizing,
51
- formatMessage = _this$props.intl.formatMessage;
52
- if (!tableRef) {
53
- return null;
54
- }
55
- var selection = editorView.state.selection;
56
- var rowHeights = getRowHeights(tableRef);
57
- var rowsParams = getRowsParams(rowHeights);
58
- var firstRow = tableRef.querySelector('tr');
59
- var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
60
- return /*#__PURE__*/React.createElement("div", {
61
- className: ClassName.ROW_CONTROLS
62
- }, /*#__PURE__*/React.createElement("div", {
63
- className: ClassName.ROW_CONTROLS_INNER
64
- }, rowsParams.map(function (_ref, index) {
65
- var startIndex = _ref.startIndex,
66
- endIndex = _ref.endIndex,
67
- height = _ref.height;
68
- // if previous row was header row, add its height to our margin
69
- var marginTop = -1;
70
- if (index === 1 && hasHeaderRow && _this2.props.stickyTop !== undefined) {
71
- marginTop += rowHeights[index - 1] + tableToolbarSize;
72
- }
73
- var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
74
- return /*#__PURE__*/React.createElement("div", {
75
- className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
76
- key: startIndex,
77
- style: {
78
- height: height,
79
- marginTop: "".concat(marginTop, "px"),
80
- top: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
81
- paddingTop: thisRowSticky ? "".concat(tableControlsSpacing, "px") : undefined
82
- }
83
- }, /*#__PURE__*/React.createElement("button", {
84
- "aria-label": formatMessage(messages.rowControl),
85
- type: "button",
86
- className: "".concat(ClassName.ROW_CONTROLS_BUTTON, "\n ").concat(ClassName.CONTROLS_BUTTON, "\n "),
87
- onClick: function onClick(event) {
88
- return _this2.props.selectRow(startIndex, event.shiftKey);
89
- },
90
- onMouseOver: function onMouseOver() {
91
- return _this2.props.hoverRows([startIndex]);
92
- },
93
- onMouseOut: _this2.clearHoverSelection,
94
- "data-start-index": startIndex,
95
- "data-end-index": endIndex
96
- }), /*#__PURE__*/React.createElement("div", {
97
- className: ClassName.CONTROLS_INSERT_MARKER
98
- }));
99
- })));
100
- }
101
- }]);
102
- return RowControlsComponent;
103
- }(Component);
104
- export var RowControls = injectIntl(RowControlsComponent);
1
+ export { RowControls } from './ClassicControls';
2
+ export { DragControls } from './DragControls';
@@ -16,7 +16,7 @@ import { hoverRows, selectRow } from '../../commands';
16
16
  import { isSelectionUpdated } from '../../utils';
17
17
  import { CornerControls } from './CornerControls';
18
18
  import NumberColumn from './NumberColumn';
19
- import { RowControls } from './RowControls';
19
+ import { DragControls, RowControls } from './RowControls';
20
20
  var TableFloatingControls = /*#__PURE__*/function (_Component) {
21
21
  _inherits(TableFloatingControls, _Component);
22
22
  var _super = _createSuper(TableFloatingControls);
@@ -101,10 +101,11 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
101
101
  isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
102
102
  ordering = _this$props.ordering,
103
103
  headerRowHeight = _this$props.headerRowHeight,
104
- stickyHeader = _this$props.stickyHeader;
104
+ stickyHeader = _this$props.stickyHeader,
105
+ hoveredCell = _this$props.hoveredCell;
105
106
  var tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
106
107
  var nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
107
- return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
108
+ return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
108
109
  }
109
110
  }, {
110
111
  key: "componentWillUnmount",
@@ -127,7 +128,9 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
127
128
  tableActive = _this$props2.tableActive,
128
129
  hasHeaderRow = _this$props2.hasHeaderRow,
129
130
  hoveredRows = _this$props2.hoveredRows,
130
- stickyHeader = _this$props2.stickyHeader;
131
+ stickyHeader = _this$props2.stickyHeader,
132
+ isDragAndDropEnabled = _this$props2.isDragAndDropEnabled,
133
+ hoveredCell = _this$props2.hoveredCell;
131
134
  if (!tableRef) {
132
135
  return null;
133
136
  }
@@ -146,8 +149,15 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
146
149
  isInDanger: isInDanger,
147
150
  isResizing: isResizing,
148
151
  selectRow: this.selectRow,
149
- stickyTop: stickyTop
150
- }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
152
+ stickyTop: stickyTop,
153
+ isDragAndDropEnabled: isDragAndDropEnabled
154
+ }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
155
+ tableRef: tableRef,
156
+ hoveredCell: hoveredCell,
157
+ editorView: editorView,
158
+ hoverRows: this.hoverRows,
159
+ selectRow: this.selectRow
160
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
151
161
  editorView: editorView,
152
162
  tableRef: tableRef,
153
163
  isInDanger: isInDanger,
@@ -165,7 +175,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
165
175
  isResizing: isResizing,
166
176
  selectRow: this.selectRow,
167
177
  stickyTop: tableActive ? stickyTop : undefined
168
- })));
178
+ }))));
169
179
  }
170
180
  }]);
171
181
  return TableFloatingControls;
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
3
3
  import { css } from '@emotion/react';
4
4
  import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
5
5
  import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
@@ -8,8 +8,8 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
8
  import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
9
9
  import { fontSize } from '@atlaskit/theme/constants';
10
10
  import { TableCssClassName as ClassName } from '../types';
11
- import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
12
- import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
11
+ import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
12
+ import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
13
13
  var cornerControlHeight = tableToolbarSize + 1;
14
14
 
15
15
  /*
@@ -47,18 +47,21 @@ var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeader
47
47
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " .", " {\n z-index: 0;\n }\n "])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS);
48
48
  }
49
49
  };
50
+ var tableRowControlStyles = function tableRowControlStyles() {
51
+ return getBooleanFF('platform.editor.table.drag-and-drop') ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n margin-top: ", "px;\n left: -", "px;\n z-index: ", ";\n }\n "])), ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n left: -", "px;\n }\n "])), ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize);
52
+ };
50
53
  var tableWrapperStyles = function tableWrapperStyles() {
51
54
  if (getBooleanFF('platform.editor.custom-table-width')) {
52
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " {\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n\n > table[data-number-column='true'] {\n width: calc(100% - 1px);\n }\n }\n "])), ClassName.TABLE_NODE_WRAPPER);
55
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", " {\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n\n > table[data-number-column='true'] {\n width: calc(100% - 1px);\n }\n }\n "])), ClassName.TABLE_NODE_WRAPPER);
53
56
  } else {
54
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n "])), ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset);
57
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n "])), ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset);
55
58
  }
56
59
  };
57
60
 
58
61
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
59
62
  export var tableStyles = function tableStyles(props) {
60
63
  var _props$featureFlags;
61
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.COLUMN_CONTROLS_WRAPPER, tableMarginTop + 1, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
64
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n ", "\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.ROW_CONTROLS_WITH_DRAG, floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.COLUMN_CONTROLS_WRAPPER, tableMarginTop + 1, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
62
65
  };
63
- export var tableFullPageEditorStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
64
- export var tableCommentEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
66
+ export var tableFullPageEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
67
+ export var tableCommentEditorStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
@@ -88,7 +88,9 @@ export var lineMarkerSize = 4;
88
88
  export var columnControlsDecorationHeight = 25;
89
89
  export var columnControlsZIndex = akEditorUnitZIndex * 10;
90
90
  export var columnControlsSelectedZIndex = columnControlsZIndex + 1;
91
+ export var rowControlsZIndex = akEditorUnitZIndex * 10;
91
92
  export var columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
93
+ export var insertLineWidth = 3;
92
94
  export var resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
93
95
  export var resizeLineWidth = 2;
94
96
  export var resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;