@atlaskit/editor-plugin-table 5.3.13 → 5.3.15
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 +16 -0
- package/dist/cjs/plugins/table/event-handlers.js +6 -3
- package/dist/cjs/plugins/table/index.js +6 -4
- package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js +3 -7
- package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -3
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js +11 -0
- package/dist/cjs/plugins/table/types.js +9 -2
- package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js +49 -11
- package/dist/cjs/plugins/table/ui/FloatingDragMenu/index.js +10 -5
- package/dist/cjs/plugins/table/ui/FloatingInsertButton/InsertButton.js +57 -9
- package/dist/cjs/plugins/table/ui/FloatingInsertButton/getPopupOptions.js +9 -7
- package/dist/cjs/plugins/table/ui/FloatingInsertButton/index.js +13 -4
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +44 -5
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/index.js +6 -4
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +35 -13
- package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js +2 -0
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/icons/AddColLeftIcon.js +44 -0
- package/dist/cjs/plugins/table/ui/icons/AddColRightIcon.js +44 -0
- package/dist/cjs/plugins/table/ui/icons/AddRowAboveIcon.js +45 -0
- package/dist/cjs/plugins/table/ui/icons/AddRowBelowIcon.js +40 -0
- package/dist/cjs/plugins/table/ui/icons/index.js +29 -1
- package/dist/cjs/plugins/table/ui/ui-styles.js +27 -24
- package/dist/cjs/plugins/table/utils/dom.js +12 -4
- package/dist/cjs/plugins/table/utils/drag-menu.js +122 -10
- package/dist/cjs/plugins/table/utils/index.js +12 -0
- package/dist/es2019/plugins/table/event-handlers.js +5 -4
- package/dist/es2019/plugins/table/index.js +6 -4
- package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js +3 -7
- package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -3
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js +12 -0
- package/dist/es2019/plugins/table/types.js +9 -2
- package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js +52 -8
- package/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js +10 -5
- package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js +58 -7
- package/dist/es2019/plugins/table/ui/FloatingInsertButton/getPopupOptions.js +9 -7
- package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js +10 -4
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +46 -6
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js +7 -5
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +35 -14
- package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js +2 -0
- package/dist/es2019/plugins/table/ui/common-styles.js +51 -3
- package/dist/es2019/plugins/table/ui/icons/AddColLeftIcon.js +35 -0
- package/dist/es2019/plugins/table/ui/icons/AddColRightIcon.js +35 -0
- package/dist/es2019/plugins/table/ui/icons/AddRowAboveIcon.js +36 -0
- package/dist/es2019/plugins/table/ui/icons/AddRowBelowIcon.js +31 -0
- package/dist/es2019/plugins/table/ui/icons/index.js +5 -1
- package/dist/es2019/plugins/table/ui/ui-styles.js +23 -1
- package/dist/es2019/plugins/table/utils/dom.js +5 -1
- package/dist/es2019/plugins/table/utils/drag-menu.js +118 -8
- package/dist/es2019/plugins/table/utils/index.js +1 -1
- package/dist/esm/plugins/table/event-handlers.js +7 -4
- package/dist/esm/plugins/table/index.js +6 -4
- package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js +3 -7
- package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -3
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js +11 -0
- package/dist/esm/plugins/table/types.js +9 -2
- package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js +46 -8
- package/dist/esm/plugins/table/ui/FloatingDragMenu/index.js +10 -5
- package/dist/esm/plugins/table/ui/FloatingInsertButton/InsertButton.js +56 -8
- package/dist/esm/plugins/table/ui/FloatingInsertButton/getPopupOptions.js +9 -7
- package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js +10 -4
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +45 -6
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js +7 -5
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +36 -14
- package/dist/esm/plugins/table/ui/TableFloatingControls/index.js +2 -0
- package/dist/esm/plugins/table/ui/common-styles.js +2 -2
- package/dist/esm/plugins/table/ui/icons/AddColLeftIcon.js +37 -0
- package/dist/esm/plugins/table/ui/icons/AddColRightIcon.js +37 -0
- package/dist/esm/plugins/table/ui/icons/AddRowAboveIcon.js +38 -0
- package/dist/esm/plugins/table/ui/icons/AddRowBelowIcon.js +33 -0
- package/dist/esm/plugins/table/ui/icons/index.js +5 -1
- package/dist/esm/plugins/table/ui/ui-styles.js +26 -23
- package/dist/esm/plugins/table/utils/dom.js +11 -3
- package/dist/esm/plugins/table/utils/drag-menu.js +120 -8
- package/dist/esm/plugins/table/utils/index.js +1 -1
- package/dist/types/plugins/table/types.d.ts +9 -2
- package/dist/types/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts +5 -2
- package/dist/types/plugins/table/ui/FloatingDragMenu/index.d.ts +3 -1
- package/dist/types/plugins/table/ui/FloatingInsertButton/InsertButton.d.ts +5 -1
- package/dist/types/plugins/table/ui/FloatingInsertButton/getPopupOptions.d.ts +1 -1
- package/dist/types/plugins/table/ui/FloatingInsertButton/index.d.ts +1 -0
- package/dist/types/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +2 -1
- package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddColLeftIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddColRightIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddRowAboveIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddRowBelowIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/index.d.ts +4 -0
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types/plugins/table/utils/dom.d.ts +4 -1
- package/dist/types/plugins/table/utils/drag-menu.d.ts +6 -3
- package/dist/types/plugins/table/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/types.d.ts +9 -2
- package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts +5 -2
- package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/index.d.ts +3 -1
- package/dist/types-ts4.5/plugins/table/ui/FloatingInsertButton/InsertButton.d.ts +5 -1
- package/dist/types-ts4.5/plugins/table/ui/FloatingInsertButton/getPopupOptions.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/ui/FloatingInsertButton/index.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +2 -1
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddColLeftIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddColRightIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddRowAboveIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddRowBelowIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/index.d.ts +4 -0
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/utils/dom.d.ts +4 -1
- package/dist/types-ts4.5/plugins/table/utils/drag-menu.d.ts +6 -3
- package/dist/types-ts4.5/plugins/table/utils/index.d.ts +1 -1
- package/package.json +2 -1
- package/src/__tests__/unit/pm-plugins/decorations/plugin.ts +40 -194
- package/src/__tests__/unit/ui/RowDragControls.tsx +9 -11
- package/src/plugins/table/event-handlers.ts +15 -3
- package/src/plugins/table/index.tsx +4 -2
- package/src/plugins/table/pm-plugins/decorations/plugin.ts +2 -9
- package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts +1 -3
- package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts +9 -0
- package/src/plugins/table/types.ts +12 -2
- package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx +73 -6
- package/src/plugins/table/ui/FloatingDragMenu/index.tsx +15 -3
- package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx +82 -8
- package/src/plugins/table/ui/FloatingInsertButton/getPopupOptions.ts +28 -5
- package/src/plugins/table/ui/FloatingInsertButton/index.tsx +19 -7
- package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx +47 -3
- package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx +11 -4
- package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +49 -18
- package/src/plugins/table/ui/TableFloatingControls/index.tsx +2 -0
- package/src/plugins/table/ui/common-styles.ts +57 -2
- package/src/plugins/table/ui/icons/AddColLeftIcon.tsx +43 -0
- package/src/plugins/table/ui/icons/AddColRightIcon.tsx +43 -0
- package/src/plugins/table/ui/icons/AddRowAboveIcon.tsx +42 -0
- package/src/plugins/table/ui/icons/AddRowBelowIcon.tsx +36 -0
- package/src/plugins/table/ui/icons/index.ts +4 -0
- package/src/plugins/table/ui/ui-styles.ts +27 -1
- package/src/plugins/table/utils/dom.ts +11 -4
- package/src/plugins/table/utils/drag-menu.ts +158 -5
- package/src/plugins/table/utils/index.ts +2 -0
- package/tsconfig.app.json +3 -0
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
7
|
+
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
14
14
|
var _constants = require("@atlaskit/theme/constants");
|
|
15
15
|
var _types = require("../types");
|
|
16
16
|
var _consts = require("./consts");
|
|
17
|
-
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;
|
|
17
|
+
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;
|
|
18
18
|
var InsertLine = function InsertLine(props, cssString) {
|
|
19
19
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
|
|
20
20
|
};
|
|
@@ -42,72 +42,75 @@ var InsertButton = function InsertButton() {
|
|
|
42
42
|
var InsertButtonHover = function InsertButtonHover() {
|
|
43
43
|
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
44
44
|
};
|
|
45
|
+
var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper(props) {
|
|
46
|
+
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: -5px;\n left: 3px;\n }\n .", " {\n ", "\n }\n .", ":hover {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
47
|
+
};
|
|
45
48
|
var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
|
|
46
|
-
return (0, _react.css)(
|
|
49
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n width: 2px;\n left: 9px;\n "));
|
|
47
50
|
};
|
|
48
51
|
var insertRowButtonWrapper = exports.insertRowButtonWrapper = function insertRowButtonWrapper(props) {
|
|
49
|
-
return (0, _react.css)(
|
|
52
|
+
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n height: 2px;\n top: -11px;\n left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
50
53
|
};
|
|
51
54
|
var columnControlsLineMarker = exports.columnControlsLineMarker = function columnControlsLineMarker() {
|
|
52
|
-
return (0, _react.css)(
|
|
55
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
|
|
53
56
|
};
|
|
54
57
|
var DeleteButton = exports.DeleteButton = function DeleteButton(props) {
|
|
55
|
-
return (0, _react.css)(
|
|
58
|
+
return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat((0, _consts.tableCellSelectedDeleteIconBackground)(props), ";\n color: ").concat((0, _consts.tableCellSelectedDeleteIconColor)(props), ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _consts.tableCellHoverDeleteIconBackground)(props), (0, _consts.tableCellHoverDeleteIconColor)(props));
|
|
56
59
|
};
|
|
57
60
|
var OverflowShadow = exports.OverflowShadow = function OverflowShadow(props) {
|
|
58
|
-
return (0, _react.css)(
|
|
61
|
+
return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px)") : "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide - 10 : -2, "px)"), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
|
|
59
62
|
};
|
|
60
63
|
var columnHeaderButton = function columnHeaderButton(props, cssString) {
|
|
61
64
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
62
|
-
return (0, _react.css)(
|
|
65
|
+
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n "])), (0, _consts.tableHeaderCellBackgroundColor)(props), cssString);
|
|
63
66
|
} else {
|
|
64
|
-
return (0, _react.css)(
|
|
67
|
+
return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n "])), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), cssString);
|
|
65
68
|
}
|
|
66
69
|
};
|
|
67
70
|
var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
|
|
68
|
-
return (0, _react.css)(
|
|
71
|
+
return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsSelectedZIndex);
|
|
69
72
|
};
|
|
70
73
|
var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
|
|
71
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
74
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n tr\n th:last-child\n .", "::before,\n tr\n td:last-child\n .", "::before {\n content: '';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: ", ";\n right: 0px;\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)") : '';
|
|
72
75
|
};
|
|
73
76
|
var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls(props) {
|
|
74
|
-
return (0, _react.css)(
|
|
77
|
+
return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n\n .", " {\n display: flex;\n flex-direction: row;\n }\n }\n\n .", " {\n box-sizing: border-box;\n\n .", " {\n display: grid;\n justify-items: center;\n }\n }\n "])), _types.TableCssClassName.COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_INNER);
|
|
75
78
|
};
|
|
76
79
|
var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle(props) {
|
|
77
80
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
78
|
-
return (0, _react.css)(
|
|
81
|
+
return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n display: none;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER);
|
|
79
82
|
} else {
|
|
80
|
-
return (0, _react.css)(
|
|
83
|
+
return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
81
84
|
}
|
|
82
85
|
};
|
|
83
86
|
var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration(props) {
|
|
84
87
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
85
|
-
return (0, _react.css)(
|
|
88
|
+
return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: 100%;\n left: 0;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n box-sizing: content-box;\n height: ").concat(_consts.tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
86
89
|
} else {
|
|
87
|
-
return (0, _react.css)(
|
|
90
|
+
return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: none;\n height: ").concat(_consts.tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
88
91
|
}
|
|
89
92
|
};
|
|
90
93
|
var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
91
|
-
return (0, _react.css)(
|
|
94
|
+
return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
|
|
92
95
|
};
|
|
93
96
|
var hoveredCell = exports.hoveredCell = function hoveredCell(props) {
|
|
94
|
-
return (0, _react.css)(
|
|
97
|
+
return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
|
|
95
98
|
};
|
|
96
|
-
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(
|
|
99
|
+
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
|
|
97
100
|
|
|
98
101
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
99
102
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
100
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
103
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\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 "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
|
|
101
104
|
};
|
|
102
105
|
var resizeHandleOverrides = function resizeHandleOverrides(props) {
|
|
103
106
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
104
|
-
return (0, _react.css)(
|
|
107
|
+
return (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\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 "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
|
|
105
108
|
}
|
|
106
|
-
return (0, _react.css)(
|
|
109
|
+
return (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\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 "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
107
110
|
};
|
|
108
111
|
var resizeHandle = exports.resizeHandle = function resizeHandle(props) {
|
|
109
|
-
return (0, _react.css)(
|
|
112
|
+
return (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
110
113
|
};
|
|
111
114
|
var insertLine = exports.insertLine = function insertLine(props) {
|
|
112
|
-
return (0, _react.css)(
|
|
115
|
+
return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
|
|
113
116
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowDragControlsButton = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
|
|
6
|
+
exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowDragControlsButton = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
|
|
7
7
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
8
8
|
var _types = require("../types");
|
|
9
9
|
var _consts = require("../ui/consts");
|
|
@@ -26,9 +26,6 @@ var isColumnControlsDecorations = exports.isColumnControlsDecorations = function
|
|
|
26
26
|
var isRowControlsButton = exports.isRowControlsButton = function isRowControlsButton(node) {
|
|
27
27
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.ROW_CONTROLS_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON);
|
|
28
28
|
};
|
|
29
|
-
var isRowDragControlsButton = exports.isRowDragControlsButton = function isRowDragControlsButton(node) {
|
|
30
|
-
return (0, _utils.containsClassName)(node, _types.TableCssClassName.ROW_CONTROLS_WITH_DRAG) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.ROW_CONTROLS_WITH_DRAG));
|
|
31
|
-
};
|
|
32
29
|
var isResizeHandleDecoration = exports.isResizeHandleDecoration = function isResizeHandleDecoration(node) {
|
|
33
30
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.RESIZE_HANDLE_DECORATION);
|
|
34
31
|
};
|
|
@@ -39,6 +36,17 @@ var isTableContainerOrWrapper = exports.isTableContainerOrWrapper = function isT
|
|
|
39
36
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.TABLE_CONTAINER) || (0, _utils.containsClassName)(node, _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
40
37
|
};
|
|
41
38
|
|
|
39
|
+
/** drag-and-drop classes */
|
|
40
|
+
var isRowDragControlsButton = exports.isRowDragControlsButton = function isRowDragControlsButton(node) {
|
|
41
|
+
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_ROW_CONTROLS) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
|
|
42
|
+
};
|
|
43
|
+
var isDragRowFloatingInsertDot = exports.isDragRowFloatingInsertDot = function isDragRowFloatingInsertDot(node) {
|
|
44
|
+
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
|
|
45
|
+
};
|
|
46
|
+
var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = function isDragColumnFloatingInsertDot(node) {
|
|
47
|
+
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
|
|
48
|
+
};
|
|
49
|
+
|
|
42
50
|
/*
|
|
43
51
|
* This function returns which side of a given element the mouse cursor is,
|
|
44
52
|
* using as a base the half of the width by default, for example:
|
|
@@ -6,7 +6,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.getDragMenuConfig = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var
|
|
9
|
+
var _customSteps = require("@atlaskit/custom-steps");
|
|
10
|
+
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
11
|
+
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
|
|
12
|
+
var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
|
|
13
|
+
var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right"));
|
|
14
|
+
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-up"));
|
|
15
|
+
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
|
|
16
|
+
var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
|
|
17
|
+
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
18
|
+
var _chevronDoubleDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-down"));
|
|
19
|
+
var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-up"));
|
|
20
|
+
var _commands = require("../commands");
|
|
21
|
+
var _delete = require("../commands/delete");
|
|
22
|
+
var _commands2 = require("../pm-plugins/drag-and-drop/commands");
|
|
23
|
+
var _transforms = require("../transforms");
|
|
24
|
+
var _icons = require("../ui/icons");
|
|
10
25
|
var canDecrease = function canDecrease(index) {
|
|
11
26
|
var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
12
27
|
return index !== undefined && index > min;
|
|
@@ -15,45 +30,142 @@ var canIncrease = function canIncrease(index) {
|
|
|
15
30
|
var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
16
31
|
return index !== undefined && index < max;
|
|
17
32
|
};
|
|
18
|
-
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, tableMap, index) {
|
|
33
|
+
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) {
|
|
34
|
+
var addOptions = direction === 'row' ? [{
|
|
35
|
+
label: 'above',
|
|
36
|
+
offset: 0,
|
|
37
|
+
icon: _icons.AddRowAboveIcon,
|
|
38
|
+
keymap: _keymaps.addRowBefore
|
|
39
|
+
}, {
|
|
40
|
+
label: 'below',
|
|
41
|
+
offset: 1,
|
|
42
|
+
icon: _icons.AddRowBelowIcon,
|
|
43
|
+
keymap: _keymaps.addRowAfter
|
|
44
|
+
}] : [{
|
|
45
|
+
label: 'left',
|
|
46
|
+
offset: 0,
|
|
47
|
+
icon: _icons.AddColLeftIcon,
|
|
48
|
+
keymap: _keymaps.addColumnBefore
|
|
49
|
+
}, {
|
|
50
|
+
label: 'right',
|
|
51
|
+
offset: 1,
|
|
52
|
+
icon: _icons.AddColRightIcon,
|
|
53
|
+
keymap: _keymaps.addColumnAfter
|
|
54
|
+
}];
|
|
19
55
|
var moveOptions = direction === 'row' ? [{
|
|
20
56
|
label: 'up',
|
|
21
57
|
offset: -1,
|
|
22
|
-
canMove: canDecrease
|
|
58
|
+
canMove: canDecrease,
|
|
59
|
+
icon: _arrowUp.default
|
|
23
60
|
}, {
|
|
24
61
|
label: 'down',
|
|
25
62
|
offset: 1,
|
|
26
63
|
canMove: function canMove(index) {
|
|
27
64
|
var _tableMap$height;
|
|
28
65
|
return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
|
|
29
|
-
}
|
|
66
|
+
},
|
|
67
|
+
icon: _arrowDown.default
|
|
30
68
|
}] : [{
|
|
31
69
|
label: 'left',
|
|
32
70
|
offset: -1,
|
|
33
|
-
canMove: canDecrease
|
|
71
|
+
canMove: canDecrease,
|
|
72
|
+
icon: _arrowLeft.default
|
|
34
73
|
}, {
|
|
35
74
|
label: 'right',
|
|
36
75
|
offset: 1,
|
|
37
76
|
canMove: function canMove(index) {
|
|
38
77
|
var _tableMap$width;
|
|
39
78
|
return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
|
|
40
|
-
}
|
|
79
|
+
},
|
|
80
|
+
icon: _arrowRight.default
|
|
41
81
|
}];
|
|
42
|
-
|
|
82
|
+
var sortOptions = direction === 'column' ? [{
|
|
83
|
+
label: 'increasing',
|
|
84
|
+
order: _customSteps.TableSortOrder.ASC,
|
|
85
|
+
icon: _chevronDoubleUp.default
|
|
86
|
+
}, {
|
|
87
|
+
label: 'decreasing',
|
|
88
|
+
order: _customSteps.TableSortOrder.DESC,
|
|
89
|
+
icon: _chevronDoubleDown.default
|
|
90
|
+
}] : [];
|
|
91
|
+
return [].concat((0, _toConsumableArray2.default)(addOptions.map(function (_ref) {
|
|
43
92
|
var label = _ref.label,
|
|
44
93
|
offset = _ref.offset,
|
|
45
|
-
|
|
94
|
+
icon = _ref.icon,
|
|
95
|
+
keymap = _ref.keymap;
|
|
96
|
+
return {
|
|
97
|
+
id: "add_".concat(direction, "_").concat(label),
|
|
98
|
+
title: "Add ".concat(direction, " ").concat(label),
|
|
99
|
+
icon: icon,
|
|
100
|
+
onClick: function onClick(state, dispatch) {
|
|
101
|
+
if (direction === 'row') {
|
|
102
|
+
(0, _commands.insertRow)(index + offset, true)(state, dispatch);
|
|
103
|
+
} else {
|
|
104
|
+
(0, _commands.insertColumn)(getEditorContainerWidth)(index + offset)(state, dispatch);
|
|
105
|
+
}
|
|
106
|
+
return true;
|
|
107
|
+
},
|
|
108
|
+
keymap: keymap && (0, _keymaps.tooltip)(keymap)
|
|
109
|
+
};
|
|
110
|
+
})), [direction === 'column' ? {
|
|
111
|
+
id: 'distribute_columns',
|
|
112
|
+
title: 'Distribute columns',
|
|
113
|
+
disabled: true,
|
|
114
|
+
onClick: function onClick() {
|
|
115
|
+
return false;
|
|
116
|
+
},
|
|
117
|
+
icon: _layoutThreeEqual.default
|
|
118
|
+
} : undefined, {
|
|
119
|
+
id: 'clear_cells',
|
|
120
|
+
title: 'Clear cells',
|
|
121
|
+
onClick: function onClick(state, dispatch) {
|
|
122
|
+
(0, _commands.clearMultipleCells)(targetCellPosition)(state, dispatch);
|
|
123
|
+
return true;
|
|
124
|
+
},
|
|
125
|
+
icon: _crossCircle.default,
|
|
126
|
+
keymap: (0, _keymaps.tooltip)(_keymaps.backspace)
|
|
127
|
+
}, {
|
|
128
|
+
id: "delete_".concat(direction),
|
|
129
|
+
title: "Delete ".concat(direction),
|
|
130
|
+
onClick: function onClick(state, dispatch) {
|
|
131
|
+
if (direction === 'row') {
|
|
132
|
+
dispatch === null || dispatch === void 0 || dispatch((0, _transforms.deleteRows)(selectionRect, false)(state.tr));
|
|
133
|
+
} else {
|
|
134
|
+
(0, _delete.deleteColumnsCommand)(selectionRect)(state, dispatch);
|
|
135
|
+
}
|
|
136
|
+
return true;
|
|
137
|
+
},
|
|
138
|
+
icon: _remove.default
|
|
139
|
+
}], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref2) {
|
|
140
|
+
var label = _ref2.label,
|
|
141
|
+
offset = _ref2.offset,
|
|
142
|
+
canMove = _ref2.canMove,
|
|
143
|
+
icon = _ref2.icon;
|
|
46
144
|
return {
|
|
47
145
|
id: "move_".concat(direction, "_").concat(label),
|
|
48
146
|
title: "Move ".concat(direction, " ").concat(label),
|
|
49
147
|
disabled: !canMove(index),
|
|
148
|
+
icon: icon,
|
|
50
149
|
onClick: function onClick(state, dispatch) {
|
|
51
150
|
if (canMove(index)) {
|
|
52
|
-
(0,
|
|
151
|
+
(0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
|
|
53
152
|
return true;
|
|
54
153
|
}
|
|
55
154
|
return false;
|
|
56
155
|
}
|
|
57
156
|
};
|
|
58
|
-
}))
|
|
157
|
+
})), (0, _toConsumableArray2.default)(sortOptions.map(function (_ref3) {
|
|
158
|
+
var label = _ref3.label,
|
|
159
|
+
order = _ref3.order,
|
|
160
|
+
icon = _ref3.icon;
|
|
161
|
+
return {
|
|
162
|
+
id: "sort_column_".concat(order),
|
|
163
|
+
title: "Sort ".concat(label),
|
|
164
|
+
icon: icon,
|
|
165
|
+
onClick: function onClick(state, dispatch) {
|
|
166
|
+
(0, _commands.sortByColumn)(index, order)(state, dispatch);
|
|
167
|
+
return true;
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
}))).filter(Boolean);
|
|
59
171
|
};
|
|
@@ -237,6 +237,18 @@ Object.defineProperty(exports, "isCornerButton", {
|
|
|
237
237
|
return _dom.isCornerButton;
|
|
238
238
|
}
|
|
239
239
|
});
|
|
240
|
+
Object.defineProperty(exports, "isDragColumnFloatingInsertDot", {
|
|
241
|
+
enumerable: true,
|
|
242
|
+
get: function get() {
|
|
243
|
+
return _dom.isDragColumnFloatingInsertDot;
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
Object.defineProperty(exports, "isDragRowFloatingInsertDot", {
|
|
247
|
+
enumerable: true,
|
|
248
|
+
get: function get() {
|
|
249
|
+
return _dom.isDragRowFloatingInsertDot;
|
|
250
|
+
}
|
|
251
|
+
});
|
|
240
252
|
Object.defineProperty(exports, "isInsertRowButton", {
|
|
241
253
|
enumerable: true,
|
|
242
254
|
get: function get() {
|
|
@@ -9,11 +9,12 @@ import { getPluginState } from './pm-plugins/plugin-factory';
|
|
|
9
9
|
import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
|
|
10
10
|
import { deleteColumns, deleteRows } from './transforms';
|
|
11
11
|
import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
|
|
12
|
-
import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
|
|
12
|
+
import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
|
|
13
13
|
import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
|
|
14
14
|
const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
|
|
15
15
|
const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
|
|
16
16
|
const isFocusingFloatingToolbar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
|
|
17
|
+
const isFocusingDragHandles = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
|
|
17
18
|
export const handleBlur = (view, event) => {
|
|
18
19
|
const {
|
|
19
20
|
state,
|
|
@@ -21,7 +22,7 @@ export const handleBlur = (view, event) => {
|
|
|
21
22
|
} = view;
|
|
22
23
|
// IE version check for ED-4665
|
|
23
24
|
// Calendar focus check for ED-10466
|
|
24
|
-
if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
|
|
25
|
+
if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event)) {
|
|
25
26
|
setEditorFocus(false)(state, dispatch);
|
|
26
27
|
}
|
|
27
28
|
event.preventDefault();
|
|
@@ -191,7 +192,7 @@ export const handleMouseMove = (view, event, elementContentRects) => {
|
|
|
191
192
|
return false;
|
|
192
193
|
}
|
|
193
194
|
const element = event.target;
|
|
194
|
-
if (isColumnControlsDecorations(element)) {
|
|
195
|
+
if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
|
|
195
196
|
const {
|
|
196
197
|
state,
|
|
197
198
|
dispatch
|
|
@@ -205,7 +206,7 @@ export const handleMouseMove = (view, event, elementContentRects) => {
|
|
|
205
206
|
return showInsertColumnButton(positionColumn)(state, dispatch);
|
|
206
207
|
}
|
|
207
208
|
}
|
|
208
|
-
if (isRowControlsButton(element)) {
|
|
209
|
+
if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
|
|
209
210
|
const {
|
|
210
211
|
state,
|
|
211
212
|
dispatch
|
|
@@ -264,8 +264,8 @@ const tablesPlugin = ({
|
|
|
264
264
|
insertRowButtonIndex,
|
|
265
265
|
isHeaderColumnEnabled,
|
|
266
266
|
isHeaderRowEnabled,
|
|
267
|
-
|
|
268
|
-
|
|
267
|
+
isDragAndDropEnabled,
|
|
268
|
+
tableWrapperTarget
|
|
269
269
|
} = tablePluginState;
|
|
270
270
|
const {
|
|
271
271
|
allowControls
|
|
@@ -301,6 +301,7 @@ const tablesPlugin = ({
|
|
|
301
301
|
insertRowButtonIndex: insertRowButtonIndex,
|
|
302
302
|
isHeaderColumnEnabled: isHeaderColumnEnabled,
|
|
303
303
|
isHeaderRowEnabled: isHeaderRowEnabled,
|
|
304
|
+
isDragAndDropEnabled: isDragAndDropEnabled,
|
|
304
305
|
editorView: editorView,
|
|
305
306
|
mountPoint: popupsMountPoint,
|
|
306
307
|
boundariesElement: popupsBoundariesElement,
|
|
@@ -328,8 +329,9 @@ const tablesPlugin = ({
|
|
|
328
329
|
targetCellPosition: targetCellPosition,
|
|
329
330
|
direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
|
|
330
331
|
index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
|
|
331
|
-
isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
|
|
332
|
-
|
|
332
|
+
isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
|
|
333
|
+
getEditorContainerWidth: defaultGetEditorContainerWidth
|
|
334
|
+
}), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
|
|
333
335
|
editorView: editorView,
|
|
334
336
|
selection: editorView.state.selection,
|
|
335
337
|
tableRef: tableRef,
|
|
@@ -9,7 +9,7 @@ import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecora
|
|
|
9
9
|
export const pluginKey = new PluginKey('tableDecorationsPlugin');
|
|
10
10
|
export const getDecorations = state => pluginKey.getState(state);
|
|
11
11
|
export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
|
|
12
|
-
var _tableWidthPluginKey$, _tableWidthPluginKey$2
|
|
12
|
+
var _tableWidthPluginKey$, _tableWidthPluginKey$2;
|
|
13
13
|
const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
|
|
14
14
|
const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
|
|
15
15
|
const changedResizing = isResizing !== wasResizing;
|
|
@@ -17,7 +17,7 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
|
|
|
17
17
|
// Remove column controls when resizing and don't add column decoration controls when DnD enabled
|
|
18
18
|
if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
|
|
19
19
|
return DecorationSet.empty;
|
|
20
|
-
} else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing
|
|
20
|
+
} else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
|
|
21
21
|
return buildColumnControlsDecorations({
|
|
22
22
|
decorationSet,
|
|
23
23
|
tr
|
|
@@ -38,16 +38,12 @@ export const createPlugin = () => {
|
|
|
38
38
|
state: {
|
|
39
39
|
init: () => DecorationSet.empty,
|
|
40
40
|
apply: (tr, decorationSet, oldState, newState) => {
|
|
41
|
-
var _tablePluginKey$getSt, _tablePluginKey$getSt2;
|
|
42
41
|
let pluginState = decorationSet;
|
|
43
42
|
const meta = tr.getMeta(tablePluginKey);
|
|
44
|
-
const previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
|
|
45
|
-
const newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
|
|
46
|
-
const changedCellHover = (previousHover === null || previousHover === void 0 ? void 0 : previousHover.colIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.colIndex) || (previousHover === null || previousHover === void 0 ? void 0 : previousHover.rowIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.rowIndex);
|
|
47
43
|
if (meta && meta.data && meta.data.decorationSet) {
|
|
48
44
|
pluginState = meta.data.decorationSet;
|
|
49
45
|
}
|
|
50
|
-
if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)
|
|
46
|
+
if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
|
|
51
47
|
pluginState = pluginState.map(tr.mapping, tr.doc);
|
|
52
48
|
return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
|
|
53
49
|
}
|
|
@@ -4,7 +4,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
|
4
4
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
5
5
|
import { TableDecorations } from '../../../types';
|
|
6
6
|
import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
|
|
7
|
-
import { pluginKey as tablePluginKey } from '../../plugin-key';
|
|
8
7
|
import { composeDecorations } from './compose-decorations';
|
|
9
8
|
const isColumnSelected = tr => tr.selection instanceof CellSelection && tr.selection.isColSelection();
|
|
10
9
|
|
|
@@ -26,10 +25,9 @@ const maybeUpdateColumnControlsDecoration = ({
|
|
|
26
25
|
tr
|
|
27
26
|
}) => {
|
|
28
27
|
const table = findTable(tr.selection);
|
|
29
|
-
const meta = tr.getMeta(tablePluginKey);
|
|
30
28
|
|
|
31
29
|
// avoid re-drawing state if dnd decorations don't need to be updated
|
|
32
|
-
if (!table
|
|
30
|
+
if (!table) {
|
|
33
31
|
return decorationSet;
|
|
34
32
|
}
|
|
35
33
|
return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
|