@atlaskit/editor-plugin-table 5.3.26 → 5.3.28
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 +9 -3
- package/dist/cjs/plugins/table/event-handlers.js +17 -13
- package/dist/cjs/plugins/table/types.js +3 -0
- package/dist/cjs/plugins/table/ui/DragHandle/index.js +16 -4
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +2 -1
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +2 -1
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/consts.js +2 -1
- package/dist/cjs/plugins/table/ui/icons/DragHandleDisabledIcon.js +45 -0
- package/dist/cjs/plugins/table/ui/icons/index.js +7 -0
- package/dist/cjs/plugins/table/ui/ui-styles.js +12 -9
- package/dist/cjs/plugins/table/utils/decoration.js +7 -1
- package/dist/es2019/plugins/table/commands/hover.js +13 -4
- package/dist/es2019/plugins/table/event-handlers.js +6 -1
- package/dist/es2019/plugins/table/types.js +3 -0
- package/dist/es2019/plugins/table/ui/DragHandle/index.js +19 -6
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +2 -1
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +2 -1
- package/dist/es2019/plugins/table/ui/common-styles.js +30 -38
- package/dist/es2019/plugins/table/ui/consts.js +1 -0
- package/dist/es2019/plugins/table/ui/icons/DragHandleDisabledIcon.js +37 -0
- package/dist/es2019/plugins/table/ui/icons/index.js +1 -0
- package/dist/es2019/plugins/table/ui/ui-styles.js +13 -1
- package/dist/es2019/plugins/table/utils/decoration.js +7 -1
- package/dist/esm/plugins/table/commands/hover.js +10 -4
- package/dist/esm/plugins/table/event-handlers.js +5 -1
- package/dist/esm/plugins/table/types.js +3 -0
- package/dist/esm/plugins/table/ui/DragHandle/index.js +18 -6
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +2 -1
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +2 -1
- package/dist/esm/plugins/table/ui/common-styles.js +2 -2
- package/dist/esm/plugins/table/ui/consts.js +1 -0
- package/dist/esm/plugins/table/ui/icons/DragHandleDisabledIcon.js +38 -0
- package/dist/esm/plugins/table/ui/icons/index.js +1 -0
- package/dist/esm/plugins/table/ui/ui-styles.js +12 -9
- package/dist/esm/plugins/table/utils/decoration.js +7 -1
- package/dist/types/plugins/table/types.d.ts +3 -0
- package/dist/types/plugins/table/ui/DragHandle/index.d.ts +3 -1
- package/dist/types/plugins/table/ui/consts.d.ts +1 -0
- package/dist/types/plugins/table/ui/icons/DragHandleDisabledIcon.d.ts +6 -0
- package/dist/types/plugins/table/ui/icons/index.d.ts +1 -0
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types/plugins/table/utils/decoration.d.ts +1 -1
- package/dist/types/plugins/table/utils/selection.d.ts +2 -2
- package/dist/types-ts4.5/plugins/table/types.d.ts +3 -0
- package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts +3 -1
- package/dist/types-ts4.5/plugins/table/ui/consts.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/DragHandleDisabledIcon.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/index.d.ts +1 -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 +1 -1
- package/dist/types-ts4.5/plugins/table/utils/selection.d.ts +2 -2
- package/package.json +2 -2
- package/src/plugins/table/commands/hover.ts +12 -1
- package/src/plugins/table/event-handlers.ts +4 -1
- package/src/plugins/table/types.ts +4 -0
- package/src/plugins/table/ui/DragHandle/index.tsx +36 -5
- package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx +1 -0
- package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +1 -0
- package/src/plugins/table/ui/common-styles.ts +33 -40
- package/src/plugins/table/ui/consts.ts +6 -0
- package/src/plugins/table/ui/icons/DragHandleDisabledIcon.tsx +53 -0
- package/src/plugins/table/ui/icons/index.ts +1 -0
- package/src/plugins/table/ui/ui-styles.ts +13 -0
- package/src/plugins/table/utils/decoration.ts +14 -0
- package/src/plugins/table/utils/selection.ts +6 -2
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
5
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
|
|
6
6
|
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
|
|
7
|
+
import { getPluginState } from '../../pm-plugins/plugin-factory';
|
|
7
8
|
import { TableCssClassName as ClassName } from '../../types';
|
|
9
|
+
import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
|
|
8
10
|
import { DragPreview } from '../DragPreview';
|
|
9
|
-
import { DragHandleIcon } from '../icons';
|
|
11
|
+
import { DragHandleDisabledIcon, DragHandleIcon } from '../icons';
|
|
10
12
|
export var DragHandle = function DragHandle(_ref) {
|
|
11
13
|
var tableLocalId = _ref.tableLocalId,
|
|
12
14
|
_ref$direction = _ref.direction,
|
|
@@ -19,17 +21,27 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
19
21
|
onMouseOver = _ref.onMouseOver,
|
|
20
22
|
onMouseOut = _ref.onMouseOut,
|
|
21
23
|
onMouseUp = _ref.onMouseUp,
|
|
22
|
-
onClick = _ref.onClick
|
|
24
|
+
onClick = _ref.onClick,
|
|
25
|
+
editorView = _ref.editorView;
|
|
23
26
|
var dragHandleDivRef = useRef(null);
|
|
24
27
|
var _useState = useState(null),
|
|
25
28
|
_useState2 = _slicedToArray(_useState, 2),
|
|
26
29
|
previewContainer = _useState2[0],
|
|
27
30
|
setPreviewContainer = _useState2[1];
|
|
31
|
+
var _getPluginState = getPluginState(editorView.state),
|
|
32
|
+
isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
|
|
33
|
+
var selection = editorView.state.selection;
|
|
34
|
+
var hasMergedCells = useMemo(function () {
|
|
35
|
+
return direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
|
|
36
|
+
}, [indexes, direction, selection]);
|
|
28
37
|
useEffect(function () {
|
|
29
38
|
var dragHandleDivRefCurrent = dragHandleDivRef.current;
|
|
30
39
|
if (dragHandleDivRefCurrent) {
|
|
31
40
|
return draggable({
|
|
32
41
|
element: dragHandleDivRefCurrent,
|
|
42
|
+
canDrag: function canDrag() {
|
|
43
|
+
return !hasMergedCells;
|
|
44
|
+
},
|
|
33
45
|
getInitialData: function getInitialData() {
|
|
34
46
|
return {
|
|
35
47
|
localId: tableLocalId,
|
|
@@ -67,9 +79,9 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
67
79
|
}
|
|
68
80
|
});
|
|
69
81
|
}
|
|
70
|
-
}, [tableLocalId, direction, indexes]);
|
|
82
|
+
}, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
|
|
71
83
|
return /*#__PURE__*/React.createElement("button", {
|
|
72
|
-
className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance),
|
|
84
|
+
className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, isDragAndDropEnabled && hasMergedCells && ClassName.DRAG_HANDLE_DISABLED),
|
|
73
85
|
ref: dragHandleDivRef,
|
|
74
86
|
style: {
|
|
75
87
|
transform: direction === 'column' ? 'none' : 'rotate(90deg)',
|
|
@@ -80,7 +92,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
80
92
|
onMouseOut: onMouseOut,
|
|
81
93
|
onMouseUp: onMouseUp,
|
|
82
94
|
onClick: onClick
|
|
83
|
-
}, /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
|
|
95
|
+
}, hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
|
|
84
96
|
direction: direction,
|
|
85
97
|
width: previewWidth,
|
|
86
98
|
height: previewHeight
|
|
@@ -115,7 +115,8 @@ export var ColumnControls = function ColumnControls(_ref) {
|
|
|
115
115
|
onClick: handleClick,
|
|
116
116
|
onMouseOver: handleMouseOver,
|
|
117
117
|
onMouseOut: handleMouseOut,
|
|
118
|
-
onMouseUp: handleMouseUp
|
|
118
|
+
onMouseUp: handleMouseUp,
|
|
119
|
+
editorView: editorView
|
|
119
120
|
}))));
|
|
120
121
|
};
|
|
121
122
|
export default ColumnControls;
|
|
@@ -110,7 +110,8 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
|
|
|
110
110
|
onClick: handleClick,
|
|
111
111
|
onMouseOver: handleMouseOver,
|
|
112
112
|
onMouseOut: handleMouseOut,
|
|
113
|
-
onMouseUp: onMouseUp
|
|
113
|
+
onMouseUp: onMouseUp,
|
|
114
|
+
editorView: editorView
|
|
114
115
|
})));
|
|
115
116
|
};
|
|
116
117
|
export var DragControls = injectIntl(DragControlsComponent);
|
|
@@ -9,7 +9,7 @@ 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
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, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
|
|
12
|
+
import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, disabledCell, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
|
|
13
13
|
var cornerControlHeight = tableToolbarSize + 1;
|
|
14
14
|
|
|
15
15
|
/*
|
|
@@ -61,7 +61,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
|
|
|
61
61
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
62
62
|
export var tableStyles = function tableStyles(props) {
|
|
63
63
|
var _props$featureFlags;
|
|
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 ", "\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\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 left: -4px;\n z-index: ", ";\n\n .", " {\n align-self: end;\n position: absolute;\n height: 100%;\n width: 24px;\n }\n\n .", " {\n position: absolute;\n bottom: -3px;\n left: 6px;\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n }\n }\n\n .", " {\n .", " {\n height: 24px;\n position: absolute;\n top: ", ";\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n height: 24px;\n width: 100%;\n }\n\n .", " {\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n position: absolute;\n right: -2px;\n }\n }\n\n .", "\n .", " {\n bottom: -1px;\n }\n\n .", " {\n cursor: grab;\n padding: 0;\n\n border-radius: 6px;\n width: max-content;\n height: max-content;\n border: 2px solid ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n outline: none !important;\n\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n\n &:hover {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.selected {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.danger {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.disabled {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\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 // 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 * 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), dragInsertButtonWrapper(props), dragCornerControlButton(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.DRAG_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), rowControlsWrapperDotStyle(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.DRAG_ROW_CONTROLS, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", akEditorUnitZIndex * 13, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.CONTROLS_FLOATING_BUTTON_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-border-inverse, #FFF)", 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.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.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, 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 .", " {\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 ", "\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\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 left: -4px;\n z-index: ", ";\n\n .", " {\n align-self: end;\n position: absolute;\n height: 100%;\n width: 24px;\n }\n\n .", " {\n position: absolute;\n bottom: -3px;\n left: 6px;\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n }\n }\n\n .", " {\n .", " {\n height: 24px;\n position: absolute;\n top: ", ";\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n height: 24px;\n width: 100%;\n }\n\n .", " {\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n position: absolute;\n right: -2px;\n }\n }\n\n .", "\n .", " {\n bottom: -1px;\n }\n\n .", " {\n cursor: grab;\n padding: 0;\n\n border-radius: 6px;\n width: max-content;\n height: max-content;\n border: 2px solid ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n outline: none !important;\n\n &:not(.", ") {\n & > svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n\n &:hover {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.selected {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.danger {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\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 // 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 * 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), disabledCell(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), dragInsertButtonWrapper(props), dragCornerControlButton(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.DRAG_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), rowControlsWrapperDotStyle(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.DRAG_ROW_CONTROLS, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", akEditorUnitZIndex * 13, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.CONTROLS_FLOATING_BUTTON_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", 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.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.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, 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);
|
|
65
65
|
};
|
|
66
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
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);
|
|
@@ -56,6 +56,7 @@ export var tableCellDeleteColor = themed({
|
|
|
56
56
|
light: "var(--ds-blanket-danger, ".concat(akEditorTableCellBlanketDeleted, ")"),
|
|
57
57
|
dark: "var(--ds-blanket-danger, ".concat(akEditorTableCellBlanketDeleted, ")")
|
|
58
58
|
});
|
|
59
|
+
export var tableCellDisabledColor = "var(--ds-background-accent-gray-subtler-hovered, #C1C7D0)";
|
|
59
60
|
export var tableBorderDeleteColor = themed({
|
|
60
61
|
light: "var(--ds-border-danger, ".concat(R400, ")"),
|
|
61
62
|
dark: "var(--ds-border-danger, ".concat(R400, ")")
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var DragHandleDisabledIcon = function DragHandleDisabledIcon(_ref) {
|
|
3
|
+
var style = _ref.style;
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
5
|
+
width: "24",
|
|
6
|
+
height: "16",
|
|
7
|
+
viewBox: "0 0 24 16",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
style: style
|
|
11
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
12
|
+
width: "24",
|
|
13
|
+
height: "16",
|
|
14
|
+
rx: "4",
|
|
15
|
+
fill: "var(--ds-background-accent-gray-subtlest, Neutral200)"
|
|
16
|
+
}), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
|
|
17
|
+
x: "7",
|
|
18
|
+
y: "4",
|
|
19
|
+
width: "2",
|
|
20
|
+
height: "8",
|
|
21
|
+
rx: "1",
|
|
22
|
+
fill: "var(--ds-icon-disabled, #091E424F)"
|
|
23
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
24
|
+
x: "11",
|
|
25
|
+
y: "4",
|
|
26
|
+
width: "2",
|
|
27
|
+
height: "8",
|
|
28
|
+
rx: "1",
|
|
29
|
+
fill: "var(--ds-icon-disabled, #091E424F)"
|
|
30
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
31
|
+
x: "15",
|
|
32
|
+
y: "4",
|
|
33
|
+
width: "2",
|
|
34
|
+
height: "8",
|
|
35
|
+
rx: "1",
|
|
36
|
+
fill: "var(--ds-icon-disabled, #091E424F)"
|
|
37
|
+
})));
|
|
38
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { DragHandleIcon } from './DragHandleIcon';
|
|
2
2
|
export { DragInMotionIcon } from './DragInMotionIcon';
|
|
3
|
+
export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
|
|
3
4
|
export { AddRowAboveIcon } from './AddRowAboveIcon';
|
|
4
5
|
export { AddRowBelowIcon } from './AddRowBelowIcon';
|
|
5
6
|
export { AddColLeftIcon } from './AddColLeftIcon';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
|
|
5
5
|
import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
@@ -7,7 +7,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
7
7
|
import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
|
|
8
8
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
9
9
|
import { TableCssClassName as ClassName } from '../types';
|
|
10
|
-
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
10
|
+
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
11
11
|
var InsertLine = function InsertLine(props, cssString) {
|
|
12
12
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor(props), akEditorUnitZIndex, cssString);
|
|
13
13
|
};
|
|
@@ -89,24 +89,27 @@ export var columnControlsDecoration = function columnControlsDecoration(props) {
|
|
|
89
89
|
export var hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
90
90
|
return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor(props), ClassName.SELECTED_CELL, tableCellDeleteColor(props));
|
|
91
91
|
};
|
|
92
|
+
export var disabledCell = function disabledCell(props) {
|
|
93
|
+
return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", ".", " {\n position: relative;\n border: 1px solid ", ";\n }\n .", ".", "::after {\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, ClassName.HOVERED_DISABLED_CELL, tableCellDisabledColor, ClassName.HOVERED_CELL, ClassName.HOVERED_DISABLED_CELL, tableCellDisabledColor);
|
|
94
|
+
};
|
|
92
95
|
export var hoveredCell = function hoveredCell(props) {
|
|
93
|
-
return css(
|
|
96
|
+
return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props));
|
|
94
97
|
};
|
|
95
|
-
export var hoveredWarningCell = css(
|
|
98
|
+
export var hoveredWarningCell = css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n td.", " {\n background-color: ", " !important; // We need to override the background-color added to the cell\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
|
|
96
99
|
|
|
97
100
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
98
101
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
99
|
-
return getBooleanFF('platform.editor.custom-table-width') ? css(
|
|
102
|
+
return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n tr\n th:last-child\n .", ",\n tr\n td:last-child\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: 0;\n cursor: col-resize;\n z-index: ", ";\n }\n "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
|
|
100
103
|
};
|
|
101
104
|
var resizeHandleOverrides = function resizeHandleOverrides(props) {
|
|
102
105
|
if (getBooleanFF('platform.editor.table.drag-and-drop')) {
|
|
103
|
-
return css(
|
|
106
|
+
return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n "])), ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2);
|
|
104
107
|
}
|
|
105
|
-
return css(
|
|
108
|
+
return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n "])), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
|
|
106
109
|
};
|
|
107
110
|
export var resizeHandle = function resizeHandle(props) {
|
|
108
|
-
return css(
|
|
111
|
+
return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n ", "\n\n ", "\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
|
|
109
112
|
};
|
|
110
113
|
export var insertLine = function insertLine(props) {
|
|
111
|
-
return css(
|
|
114
|
+
return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n .", " {\n td.", "::before {\n content: ' ';\n position: absolute;\n left: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -1px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n bottom: 0;\n height: ", "px;\n width: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n bottom: 0;\n position: absolute;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2);
|
|
112
115
|
};
|
|
@@ -12,6 +12,7 @@ import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tab
|
|
|
12
12
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
13
13
|
import { TableCssClassName as ClassName, TableDecorations } from '../types';
|
|
14
14
|
import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
|
|
15
|
+
import { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';
|
|
15
16
|
var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
|
|
16
17
|
return decorationSet.find(undefined, undefined, function (spec) {
|
|
17
18
|
return spec.key.indexOf(key) > -1;
|
|
@@ -32,7 +33,7 @@ export var createCellHoverDecoration = function createCellHoverDecoration(cells)
|
|
|
32
33
|
});
|
|
33
34
|
});
|
|
34
35
|
};
|
|
35
|
-
export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
|
|
36
|
+
export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, isDragAndDropEnable, hoveredIndexes, danger, selected) {
|
|
36
37
|
var table = findTable(tr.selection);
|
|
37
38
|
if (!table) {
|
|
38
39
|
return [];
|
|
@@ -59,6 +60,8 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
|
|
|
59
60
|
var updatedCells = cells.map(function (x) {
|
|
60
61
|
return x.pos;
|
|
61
62
|
});
|
|
63
|
+
var hasMergedCells = type === 'row' ? hasMergedCellsInRow(hoveredIndexes[0])(tr.selection) : hasMergedCellsInColumn(hoveredIndexes[0])(tr.selection);
|
|
64
|
+
var disabled = hasMergedCells;
|
|
62
65
|
|
|
63
66
|
// ED-15246 fixed trello card table overflow issue
|
|
64
67
|
// If columns / rows have been merged the hovered selection is different to the actual selection
|
|
@@ -109,6 +112,9 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
|
|
|
109
112
|
if (selected) {
|
|
110
113
|
classes.push(ClassName.SELECTED_CELL);
|
|
111
114
|
}
|
|
115
|
+
if (isDragAndDropEnable && disabled) {
|
|
116
|
+
classes.push(ClassName.HOVERED_DISABLED_CELL);
|
|
117
|
+
}
|
|
112
118
|
classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
|
|
113
119
|
var key;
|
|
114
120
|
switch (type) {
|
|
@@ -293,6 +293,8 @@ export declare const TableCssClassName: {
|
|
|
293
293
|
DRAG_HANDLE_BUTTON_CONTAINER: string;
|
|
294
294
|
DRAG_CORNER_BUTTON: string;
|
|
295
295
|
DRAG_CORNER_BUTTON_INNER: string;
|
|
296
|
+
/** disabled classes */
|
|
297
|
+
DRAG_HANDLE_DISABLED: string;
|
|
296
298
|
/** Other classes */
|
|
297
299
|
NUMBERED_COLUMN: string;
|
|
298
300
|
NUMBERED_COLUMN_BUTTON: string;
|
|
@@ -301,6 +303,7 @@ export declare const TableCssClassName: {
|
|
|
301
303
|
HOVERED_ROW: string;
|
|
302
304
|
HOVERED_TABLE: string;
|
|
303
305
|
HOVERED_CELL: string;
|
|
306
|
+
HOVERED_DISABLED_CELL: string;
|
|
304
307
|
HOVERED_CELL_IN_DANGER: string;
|
|
305
308
|
HOVERED_CELL_ACTIVE: string;
|
|
306
309
|
HOVERED_CELL_WARNING: string;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { MouseEventHandler } from 'react';
|
|
2
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
3
|
import type { TableDirection } from '../../types';
|
|
3
4
|
type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
|
|
4
5
|
type DragHandleProps = {
|
|
@@ -12,6 +13,7 @@ type DragHandleProps = {
|
|
|
12
13
|
onMouseOver?: MouseEventHandler;
|
|
13
14
|
onMouseOut?: MouseEventHandler;
|
|
14
15
|
onMouseUp?: MouseEventHandler;
|
|
16
|
+
editorView: EditorView;
|
|
15
17
|
};
|
|
16
|
-
export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
|
|
18
|
+
export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
|
|
17
19
|
export {};
|
|
@@ -13,6 +13,7 @@ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedV
|
|
|
13
13
|
export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
|
|
14
14
|
export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
|
|
15
15
|
export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
|
|
16
|
+
export declare const tableCellDisabledColor: "var(--ds-background-accent-gray-subtler-hovered)";
|
|
16
17
|
export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
|
|
17
18
|
export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
|
|
18
19
|
export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { DragHandleIcon } from './DragHandleIcon';
|
|
2
2
|
export { DragInMotionIcon } from './DragInMotionIcon';
|
|
3
|
+
export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
|
|
3
4
|
export { AddRowAboveIcon } from './AddRowAboveIcon';
|
|
4
5
|
export { AddRowBelowIcon } from './AddRowBelowIcon';
|
|
5
6
|
export { AddColLeftIcon } from './AddColLeftIcon';
|
|
@@ -14,6 +14,7 @@ export declare const floatingColumnControls: (props: ThemeProps) => import("@emo
|
|
|
14
14
|
export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
15
15
|
export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
16
16
|
export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
17
|
+
export declare const disabledCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
17
18
|
export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
18
19
|
export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
|
|
19
20
|
export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
@@ -8,7 +8,7 @@ import { TableDecorations } from '../types';
|
|
|
8
8
|
export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
|
|
9
9
|
export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
|
|
10
10
|
export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
|
|
11
|
-
export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
|
|
11
|
+
export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, isDragAndDropEnable: boolean | undefined, hoveredIndexes: number[], danger?: boolean, selected?: boolean) => Decoration[];
|
|
12
12
|
export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
|
|
13
13
|
export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
|
|
14
14
|
export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { Rect } from '@atlaskit/editor-tables/table-map';
|
|
1
|
+
import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import type { Rect } from '@atlaskit/editor-tables/table-map';
|
|
3
3
|
export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
|
|
4
4
|
export declare const normalizeSelection: (tr: Transaction) => Transaction;
|
|
5
5
|
export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
|
|
@@ -293,6 +293,8 @@ export declare const TableCssClassName: {
|
|
|
293
293
|
DRAG_HANDLE_BUTTON_CONTAINER: string;
|
|
294
294
|
DRAG_CORNER_BUTTON: string;
|
|
295
295
|
DRAG_CORNER_BUTTON_INNER: string;
|
|
296
|
+
/** disabled classes */
|
|
297
|
+
DRAG_HANDLE_DISABLED: string;
|
|
296
298
|
/** Other classes */
|
|
297
299
|
NUMBERED_COLUMN: string;
|
|
298
300
|
NUMBERED_COLUMN_BUTTON: string;
|
|
@@ -301,6 +303,7 @@ export declare const TableCssClassName: {
|
|
|
301
303
|
HOVERED_ROW: string;
|
|
302
304
|
HOVERED_TABLE: string;
|
|
303
305
|
HOVERED_CELL: string;
|
|
306
|
+
HOVERED_DISABLED_CELL: string;
|
|
304
307
|
HOVERED_CELL_IN_DANGER: string;
|
|
305
308
|
HOVERED_CELL_ACTIVE: string;
|
|
306
309
|
HOVERED_CELL_WARNING: string;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { MouseEventHandler } from 'react';
|
|
2
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
3
|
import type { TableDirection } from '../../types';
|
|
3
4
|
type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
|
|
4
5
|
type DragHandleProps = {
|
|
@@ -12,6 +13,7 @@ type DragHandleProps = {
|
|
|
12
13
|
onMouseOver?: MouseEventHandler;
|
|
13
14
|
onMouseOut?: MouseEventHandler;
|
|
14
15
|
onMouseUp?: MouseEventHandler;
|
|
16
|
+
editorView: EditorView;
|
|
15
17
|
};
|
|
16
|
-
export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
|
|
18
|
+
export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
|
|
17
19
|
export {};
|
|
@@ -13,6 +13,7 @@ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedV
|
|
|
13
13
|
export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
|
|
14
14
|
export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
|
|
15
15
|
export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
|
|
16
|
+
export declare const tableCellDisabledColor: "var(--ds-background-accent-gray-subtler-hovered)";
|
|
16
17
|
export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
|
|
17
18
|
export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
|
|
18
19
|
export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { DragHandleIcon } from './DragHandleIcon';
|
|
2
2
|
export { DragInMotionIcon } from './DragInMotionIcon';
|
|
3
|
+
export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
|
|
3
4
|
export { AddRowAboveIcon } from './AddRowAboveIcon';
|
|
4
5
|
export { AddRowBelowIcon } from './AddRowBelowIcon';
|
|
5
6
|
export { AddColLeftIcon } from './AddColLeftIcon';
|
|
@@ -14,6 +14,7 @@ export declare const floatingColumnControls: (props: ThemeProps) => import("@emo
|
|
|
14
14
|
export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
15
15
|
export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
16
16
|
export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
17
|
+
export declare const disabledCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
17
18
|
export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
18
19
|
export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
|
|
19
20
|
export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
|
|
@@ -8,7 +8,7 @@ import { TableDecorations } from '../types';
|
|
|
8
8
|
export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
|
|
9
9
|
export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
|
|
10
10
|
export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
|
|
11
|
-
export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
|
|
11
|
+
export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, isDragAndDropEnable: boolean | undefined, hoveredIndexes: number[], danger?: boolean, selected?: boolean) => Decoration[];
|
|
12
12
|
export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
|
|
13
13
|
export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
|
|
14
14
|
export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { Rect } from '@atlaskit/editor-tables/table-map';
|
|
1
|
+
import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import type { Rect } from '@atlaskit/editor-tables/table-map';
|
|
3
3
|
export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
|
|
4
4
|
export declare const normalizeSelection: (tr: Transaction) => Transaction;
|
|
5
5
|
export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
|