@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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/plugins/table/commands/hover.js +17 -8
- package/dist/cjs/plugins/table/commands/index.js +6 -0
- package/dist/cjs/plugins/table/commands/misc.js +1 -7
- package/dist/cjs/plugins/table/event-handlers.js +29 -2
- package/dist/cjs/plugins/table/index.js +1 -1
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +5 -3
- package/dist/cjs/plugins/table/nodeviews/table.js +4 -2
- package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js +7 -3
- package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js +7 -2
- package/dist/cjs/plugins/table/pm-plugins/default-table-selection.js +14 -1
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/commands.js +36 -7
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js +69 -7
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/reducer.js +2 -0
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/utils/index.js +12 -0
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js +59 -0
- package/dist/cjs/plugins/table/pm-plugins/main.js +5 -5
- package/dist/cjs/plugins/table/reducer.js +2 -1
- package/dist/cjs/plugins/table/types.js +14 -1
- package/dist/cjs/plugins/table/ui/DragHandle/index.js +50 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +53 -14
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +114 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +53 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/index.js +11 -106
- package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js +16 -6
- package/dist/cjs/plugins/table/ui/common-styles.js +9 -6
- package/dist/cjs/plugins/table/ui/consts.js +3 -1
- package/dist/cjs/plugins/table/ui/ui-styles.js +21 -9
- package/dist/cjs/plugins/table/utils/decoration.js +111 -19
- package/dist/cjs/plugins/table/utils/dom.js +7 -1
- package/dist/cjs/plugins/table/utils/index.js +38 -1
- package/dist/cjs/plugins/table/utils/merged-cells.js +66 -0
- package/dist/es2019/plugins/table/commands/hover.js +12 -8
- package/dist/es2019/plugins/table/commands/index.js +1 -1
- package/dist/es2019/plugins/table/commands/misc.js +1 -7
- package/dist/es2019/plugins/table/event-handlers.js +28 -2
- package/dist/es2019/plugins/table/index.js +1 -1
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +5 -3
- package/dist/es2019/plugins/table/nodeviews/table.js +4 -2
- package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js +8 -6
- package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js +7 -2
- package/dist/es2019/plugins/table/pm-plugins/default-table-selection.js +13 -0
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js +35 -7
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js +69 -4
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/reducer.js +2 -0
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/utils/index.js +1 -0
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js +56 -0
- package/dist/es2019/plugins/table/pm-plugins/main.js +6 -5
- package/dist/es2019/plugins/table/reducer.js +2 -1
- package/dist/es2019/plugins/table/types.js +14 -1
- package/dist/es2019/plugins/table/ui/DragHandle/index.js +41 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +54 -10
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +86 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +43 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/index.js +2 -88
- package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js +17 -7
- package/dist/es2019/plugins/table/ui/common-styles.js +49 -13
- package/dist/es2019/plugins/table/ui/consts.js +2 -0
- package/dist/es2019/plugins/table/ui/ui-styles.js +171 -15
- package/dist/es2019/plugins/table/utils/decoration.js +106 -18
- package/dist/es2019/plugins/table/utils/dom.js +2 -0
- package/dist/es2019/plugins/table/utils/index.js +4 -3
- package/dist/es2019/plugins/table/utils/merged-cells.js +48 -0
- package/dist/esm/plugins/table/commands/hover.js +16 -8
- package/dist/esm/plugins/table/commands/index.js +1 -1
- package/dist/esm/plugins/table/commands/misc.js +1 -7
- package/dist/esm/plugins/table/event-handlers.js +29 -2
- package/dist/esm/plugins/table/index.js +1 -1
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +5 -3
- package/dist/esm/plugins/table/nodeviews/table.js +4 -2
- package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js +8 -6
- package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js +7 -2
- package/dist/esm/plugins/table/pm-plugins/default-table-selection.js +13 -0
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js +36 -7
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js +65 -4
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/reducer.js +2 -0
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/utils/index.js +1 -0
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js +53 -0
- package/dist/esm/plugins/table/pm-plugins/main.js +7 -7
- package/dist/esm/plugins/table/reducer.js +2 -1
- package/dist/esm/plugins/table/types.js +14 -1
- package/dist/esm/plugins/table/ui/DragHandle/index.js +41 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +54 -15
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +104 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +46 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/index.js +2 -104
- package/dist/esm/plugins/table/ui/TableFloatingControls/index.js +17 -7
- package/dist/esm/plugins/table/ui/common-styles.js +11 -8
- package/dist/esm/plugins/table/ui/consts.js +2 -0
- package/dist/esm/plugins/table/ui/ui-styles.js +21 -9
- package/dist/esm/plugins/table/utils/decoration.js +110 -18
- package/dist/esm/plugins/table/utils/dom.js +6 -0
- package/dist/esm/plugins/table/utils/index.js +4 -3
- package/dist/esm/plugins/table/utils/merged-cells.js +60 -0
- package/dist/types/plugins/table/commands/hover.d.ts +2 -1
- package/dist/types/plugins/table/commands/index.d.ts +1 -1
- package/dist/types/plugins/table/event-handlers.d.ts +1 -0
- package/dist/types/plugins/table/nodeviews/types.d.ts +4 -3
- package/dist/types/plugins/table/pm-plugins/decorations/plugin.d.ts +2 -1
- package/dist/types/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts +1 -1
- package/dist/types/plugins/table/pm-plugins/default-table-selection.d.ts +12 -0
- package/dist/types/plugins/table/pm-plugins/drag-and-drop/actions.d.ts +5 -1
- package/dist/types/plugins/table/pm-plugins/drag-and-drop/commands.d.ts +6 -1
- package/dist/types/plugins/table/pm-plugins/drag-and-drop/utils/index.d.ts +1 -0
- package/dist/types/plugins/table/pm-plugins/drag-and-drop/utils/monitor.d.ts +3 -0
- package/dist/types/plugins/table/pm-plugins/main.d.ts +1 -1
- package/dist/types/plugins/table/types.d.ts +35 -2
- package/dist/types/plugins/table/ui/DragHandle/index.d.ts +11 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/NumberColumn/index.d.ts +4 -1
- package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.d.ts +17 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts +16 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts +2 -17
- package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts +3 -2
- package/dist/types/plugins/table/ui/consts.d.ts +2 -0
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types/plugins/table/utils/decoration.d.ts +4 -2
- package/dist/types/plugins/table/utils/dom.d.ts +2 -0
- package/dist/types/plugins/table/utils/index.d.ts +3 -2
- package/dist/types/plugins/table/utils/merged-cells.d.ts +3 -0
- package/dist/types-ts4.5/plugins/table/commands/hover.d.ts +2 -1
- package/dist/types-ts4.5/plugins/table/commands/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/event-handlers.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/nodeviews/types.d.ts +4 -3
- package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/plugin.d.ts +2 -1
- package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/pm-plugins/default-table-selection.d.ts +12 -0
- package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/actions.d.ts +5 -1
- package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/commands.d.ts +6 -1
- package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/utils/index.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/utils/monitor.d.ts +3 -0
- package/dist/types-ts4.5/plugins/table/pm-plugins/main.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/types.d.ts +35 -2
- package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts +11 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/NumberColumn/index.d.ts +4 -1
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.d.ts +17 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts +16 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts +2 -17
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts +3 -2
- package/dist/types-ts4.5/plugins/table/ui/consts.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/utils/decoration.d.ts +4 -2
- package/dist/types-ts4.5/plugins/table/utils/dom.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/utils/index.d.ts +3 -2
- package/dist/types-ts4.5/plugins/table/utils/merged-cells.d.ts +3 -0
- package/package.json +6 -2
- package/src/__tests__/unit/event-handlers.ts +74 -1
- package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts +35 -15
- package/src/__tests__/unit/pm-plugins/decorations/plugin.ts +146 -42
- package/src/__tests__/unit/ui/NumberColumn.tsx +148 -0
- package/src/__tests__/unit/ui/RowControls.tsx +4 -4
- package/src/__tests__/unit/ui/RowDragControls.tsx +118 -0
- package/src/__tests__/unit/ui/TableFloatingControls.tsx +9 -5
- package/src/plugins/table/commands/hover.ts +16 -7
- package/src/plugins/table/commands/index.ts +1 -0
- package/src/plugins/table/commands/misc.ts +0 -5
- package/src/plugins/table/event-handlers.ts +49 -2
- package/src/plugins/table/index.tsx +1 -1
- package/src/plugins/table/nodeviews/TableComponent.tsx +3 -2
- package/src/plugins/table/nodeviews/table.tsx +2 -0
- package/src/plugins/table/nodeviews/types.ts +4 -3
- package/src/plugins/table/pm-plugins/decorations/plugin.ts +13 -4
- package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts +10 -5
- package/src/plugins/table/pm-plugins/default-table-selection.ts +10 -0
- package/src/plugins/table/pm-plugins/drag-and-drop/actions.ts +6 -1
- package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts +58 -8
- package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts +77 -4
- package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts +2 -0
- package/src/plugins/table/pm-plugins/drag-and-drop/utils/index.ts +1 -0
- package/src/plugins/table/pm-plugins/drag-and-drop/utils/monitor.ts +72 -0
- package/src/plugins/table/pm-plugins/main.ts +9 -4
- package/src/plugins/table/reducer.ts +2 -1
- package/src/plugins/table/types.ts +37 -3
- package/src/plugins/table/ui/DragHandle/index.tsx +57 -0
- package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx +68 -30
- package/src/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.tsx +129 -0
- package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +75 -0
- package/src/plugins/table/ui/TableFloatingControls/RowControls/index.tsx +2 -135
- package/src/plugins/table/ui/TableFloatingControls/index.tsx +43 -24
- package/src/plugins/table/ui/common-styles.ts +54 -11
- package/src/plugins/table/ui/consts.ts +2 -0
- package/src/plugins/table/ui/ui-styles.ts +173 -14
- package/src/plugins/table/utils/decoration.ts +176 -27
- package/src/plugins/table/utils/dom.ts +8 -0
- package/src/plugins/table/utils/index.ts +5 -0
- package/src/plugins/table/utils/merged-cells.ts +67 -0
- 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
|
-
|
|
2
|
-
|
|
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
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
64
|
-
export var tableCommentEditorStyles = css(
|
|
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;
|