@atlaskit/editor-plugin-table 5.4.7 → 5.4.8
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 +6 -0
- package/dist/cjs/plugins/table/commands/misc.js +14 -12
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +2 -4
- package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js +9 -3
- package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js +8 -3
- package/dist/cjs/plugins/table/types.js +2 -1
- package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js +4 -1
- package/dist/cjs/plugins/table/ui/common-styles.js +6 -9
- package/dist/cjs/plugins/table/ui/ui-styles.js +12 -16
- package/dist/cjs/plugins/table/utils/decoration.js +20 -25
- package/dist/es2019/plugins/table/commands/misc.js +5 -4
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +2 -4
- package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js +9 -3
- package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js +8 -3
- package/dist/es2019/plugins/table/types.js +2 -1
- package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js +4 -1
- package/dist/es2019/plugins/table/ui/common-styles.js +20 -20
- package/dist/es2019/plugins/table/ui/ui-styles.js +18 -21
- package/dist/es2019/plugins/table/utils/decoration.js +20 -25
- package/dist/esm/plugins/table/commands/misc.js +13 -13
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +2 -4
- package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js +9 -3
- package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js +8 -3
- package/dist/esm/plugins/table/types.js +2 -1
- package/dist/esm/plugins/table/ui/TableFloatingControls/index.js +4 -1
- package/dist/esm/plugins/table/ui/common-styles.js +6 -9
- package/dist/esm/plugins/table/ui/ui-styles.js +12 -16
- package/dist/esm/plugins/table/utils/decoration.js +20 -25
- package/dist/types/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts +3 -2
- package/dist/types/plugins/table/pm-plugins/decorations/utils/compose-decorations.d.ts +1 -1
- package/dist/types/plugins/table/pm-plugins/decorations/utils/types.d.ts +10 -4
- package/dist/types/plugins/table/types.d.ts +2 -1
- package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts +3 -2
- package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/compose-decorations.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/types.d.ts +10 -4
- package/dist/types-ts4.5/plugins/table/types.d.ts +2 -1
- package/package.json +1 -1
- package/src/__tests__/unit/event-handlers.ts +37 -38
- package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts +46 -36
- package/src/plugins/table/commands/misc.ts +9 -7
- package/src/plugins/table/nodeviews/TableComponent.tsx +20 -22
- package/src/plugins/table/pm-plugins/decorations/plugin.ts +7 -2
- package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts +20 -11
- package/src/plugins/table/pm-plugins/decorations/utils/compose-decorations.ts +2 -4
- package/src/plugins/table/pm-plugins/decorations/utils/types.ts +14 -7
- package/src/plugins/table/types.ts +2 -1
- package/src/plugins/table/ui/TableFloatingControls/index.tsx +73 -67
- package/src/plugins/table/ui/common-styles.ts +20 -23
- package/src/plugins/table/ui/ui-styles.ts +18 -21
- package/src/plugins/table/utils/decoration.ts +27 -32
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
|
|
5
5
|
import { browser } from '@atlaskit/editor-common/utils';
|
|
@@ -58,21 +58,18 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
58
58
|
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " > tbody::before {\n content: '';\n }\n "])), ClassName.TABLE_STICKY);
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
|
-
var tableRowControlStyles = function tableRowControlStyles() {
|
|
62
|
-
return getBooleanFF('platform.editor.table.drag-and-drop') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n margin-top: ", "px;\n left: -", "px;\n z-index: ", ";\n }\n "])), ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n left: -", "px;\n }\n "])), ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize);
|
|
63
|
-
};
|
|
64
61
|
var tableWrapperStyles = function tableWrapperStyles() {
|
|
65
62
|
if (getBooleanFF('platform.editor.custom-table-width')) {
|
|
66
|
-
return css(
|
|
63
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", " {\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n\n > table[data-number-column='true'] {\n width: calc(100% - 1px);\n }\n }\n "])), ClassName.TABLE_NODE_WRAPPER);
|
|
67
64
|
} else {
|
|
68
|
-
return css(
|
|
65
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n "])), ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset);
|
|
69
66
|
}
|
|
70
67
|
};
|
|
71
68
|
|
|
72
69
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
73
70
|
export var tableStyles = function tableStyles(props) {
|
|
74
71
|
var _props$featureFlags;
|
|
75
|
-
return css(_templateObject9 || (_templateObject9 = _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 .", "\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 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: 2px;\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 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 &.", " {\n & > svg {\n & > rect.", " {\n fill: ", ";\n }\n & > rect {\n fill: ", ";\n }\n & > g > rect {\n fill: ", ";\n }\n }\n }\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 &.", ".", "::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), tableStickyHeaderFirefoxFixStyle(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.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "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, ClassName.HOVERED_NO_HIGHLIGHT, 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);
|
|
72
|
+
return css(_templateObject7 || (_templateObject7 = _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 .", "\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 .", " {\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 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: 2px;\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 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 &.", " {\n & > svg {\n & > rect.", " {\n fill: ", ";\n }\n & > rect {\n fill: ", ";\n }\n & > g > rect {\n fill: ", ";\n }\n }\n }\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 &.", ".", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n\n // override for DnD controls\n .", " {\n position: absolute;\n margin-top: ", "px;\n left: -", "px;\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n left: -", "px;\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), tableStickyHeaderFirefoxFixStyle(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.DRAG_ROW_CONTROLS_WRAPPER, 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.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "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, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, 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);
|
|
76
73
|
};
|
|
77
|
-
export var tableFullPageEditorStyles = css(
|
|
78
|
-
export var tableCommentEditorStyles = css(
|
|
74
|
+
export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _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);
|
|
75
|
+
export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
|
|
@@ -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;
|
|
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';
|
|
@@ -78,42 +78,38 @@ export var floatingColumnControls = function floatingColumnControls(props) {
|
|
|
78
78
|
return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\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 "])), ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER);
|
|
79
79
|
};
|
|
80
80
|
export var rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle(props) {
|
|
81
|
-
|
|
82
|
-
return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n div.", ">.", "::after {\n display: none;\n }\n "])), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER);
|
|
83
|
-
} else {
|
|
84
|
-
return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\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 "])), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth);
|
|
85
|
-
}
|
|
81
|
+
return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n // override for DnD controls\n div.", ">.", "::after {\n display: none;\n }\n\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 "])), ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth);
|
|
86
82
|
};
|
|
87
83
|
export var columnControlsDecoration = function columnControlsDecoration(props) {
|
|
88
84
|
if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
|
|
89
|
-
return css(
|
|
85
|
+
return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\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 "])), ClassName.COLUMN_CONTROLS_DECORATIONS, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-top: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-bottom: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n box-sizing: content-box;\n height: ").concat(tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), tableCellBorderWidth, tableBorderSelectedColor(props), tableCellBorderWidth, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), tableCellBorderWidth, tableBorderDeleteColor(props), tableCellBorderWidth, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
90
86
|
} else {
|
|
91
|
-
return css(
|
|
87
|
+
return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\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 "])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-bottom: none;\n height: ").concat(tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
92
88
|
}
|
|
93
89
|
};
|
|
94
90
|
export var hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
95
|
-
return css(
|
|
91
|
+
return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n\n .", " > table {\n td.", "::after {\n background: ", ";\n border: 1px solid ", ";\n }\n th.", " {\n background-color: unset;\n }\n th.", "::after {\n background: ", ";\n border: 1px solid ", ";\n }\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), ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor(props), tableBorderDeleteColor(props), ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor(props), tableBorderDeleteColor(props));
|
|
96
92
|
};
|
|
97
93
|
export var hoveredCell = function hoveredCell(props) {
|
|
98
|
-
return css(
|
|
94
|
+
return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\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), ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor(props));
|
|
99
95
|
};
|
|
100
|
-
export var hoveredWarningCell = css(
|
|
96
|
+
export var hoveredWarningCell = css(_templateObject28 || (_templateObject28 = _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, ")"));
|
|
101
97
|
|
|
102
98
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
103
99
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
104
|
-
return getBooleanFF('platform.editor.custom-table-width') ? css(
|
|
100
|
+
return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject29 || (_templateObject29 = _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) : '';
|
|
105
101
|
};
|
|
106
102
|
var resizeHandleOverrides = function resizeHandleOverrides(props) {
|
|
107
103
|
if (getBooleanFF('platform.editor.table.drag-and-drop')) {
|
|
108
|
-
return css(
|
|
104
|
+
return css(_templateObject30 || (_templateObject30 = _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);
|
|
109
105
|
}
|
|
110
|
-
return css(
|
|
106
|
+
return css(_templateObject31 || (_templateObject31 = _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);
|
|
111
107
|
};
|
|
112
108
|
export var resizeHandle = function resizeHandle(props) {
|
|
113
|
-
return css(
|
|
109
|
+
return css(_templateObject32 || (_templateObject32 = _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);
|
|
114
110
|
};
|
|
115
111
|
|
|
116
112
|
// Drag and Drop: drop target insert line
|
|
117
113
|
export var insertLine = function insertLine(props) {
|
|
118
|
-
return css(
|
|
114
|
+
return css(_templateObject33 || (_templateObject33 = _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);
|
|
119
115
|
};
|
|
@@ -9,7 +9,6 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
|
|
|
9
9
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
10
10
|
import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
|
|
11
11
|
import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
12
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
13
12
|
import { TableCssClassName as ClassName, TableDecorations } from '../types';
|
|
14
13
|
import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
|
|
15
14
|
var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
|
|
@@ -157,32 +156,28 @@ export var createColumnSelectedDecoration = function createColumnSelectedDecorat
|
|
|
157
156
|
};
|
|
158
157
|
export var createColumnControlsDecoration = function createColumnControlsDecoration(selection) {
|
|
159
158
|
var cells = getCellsInRow(0)(selection) || [];
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
// and we want to avoid value leak
|
|
168
|
-
var startIndex = index;
|
|
169
|
-
var endIndex = startIndex + colspan;
|
|
159
|
+
var index = 0;
|
|
160
|
+
return cells.map(function (cell) {
|
|
161
|
+
var colspan = cell.node.attrs.colspan || 1;
|
|
162
|
+
// It's important these values are scoped locally as the widget callback could be executed anytime in the future
|
|
163
|
+
// and we want to avoid value leak
|
|
164
|
+
var startIndex = index;
|
|
165
|
+
var endIndex = startIndex + colspan;
|
|
170
166
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
});
|
|
167
|
+
// The next cell start index will commence from the current cell end index.
|
|
168
|
+
index = endIndex;
|
|
169
|
+
return Decoration.widget(cell.pos + 1, function () {
|
|
170
|
+
var element = document.createElement('div');
|
|
171
|
+
element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
|
|
172
|
+
element.dataset.startIndex = "".concat(startIndex);
|
|
173
|
+
element.dataset.endIndex = "".concat(endIndex);
|
|
174
|
+
return element;
|
|
175
|
+
}, {
|
|
176
|
+
key: "".concat(TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
|
|
177
|
+
// this decoration should be the first one, even before gap cursor.
|
|
178
|
+
side: -100
|
|
184
179
|
});
|
|
185
|
-
}
|
|
180
|
+
});
|
|
186
181
|
};
|
|
187
182
|
export var updateDecorations = function updateDecorations(node, decorationSet, decorations, key) {
|
|
188
183
|
var filteredDecorations = filterDecorationByKey(key, decorationSet);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
+
import type { BuildDecorationTransformerParams, DecorationTransformer } from './types';
|
|
2
3
|
export declare const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer;
|
|
3
|
-
export declare const buildColumnControlsDecorations:
|
|
4
|
+
export declare const buildColumnControlsDecorations: ({ decorationSet, tr, options, }: BuildDecorationTransformerParams) => DecorationSet;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DecorationTransformer } from './types';
|
|
1
|
+
import type { DecorationTransformer } from './types';
|
|
2
2
|
export declare const composeDecorations: (transformers: Array<DecorationTransformer>) => DecorationTransformer;
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
export type DecorationTransformer = (
|
|
1
|
+
import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
+
export type DecorationTransformer = (params: DecorationTransformerParams) => DecorationSet;
|
|
4
|
+
export type DecorationTransformerParams = {
|
|
4
5
|
decorationSet: DecorationSet;
|
|
5
6
|
tr: Transaction | ReadonlyTransaction;
|
|
6
|
-
}
|
|
7
|
+
};
|
|
8
|
+
export type BuildDecorationTransformerParams = DecorationTransformerParams & {
|
|
9
|
+
options: {
|
|
10
|
+
isDragAndDropEnabled: boolean;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
@@ -282,7 +282,8 @@ export declare const TableCssClassName: {
|
|
|
282
282
|
CORNER_CONTROLS_INSERT_ROW_MARKER: string;
|
|
283
283
|
CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
|
|
284
284
|
CONTROLS_CORNER_BUTTON: string;
|
|
285
|
-
/**
|
|
285
|
+
/** drag and drop controls */
|
|
286
|
+
DRAG_ROW_CONTROLS_WRAPPER: string;
|
|
286
287
|
DRAG_ROW_CONTROLS: string;
|
|
287
288
|
DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
|
|
288
289
|
DRAG_ROW_FLOATING_INSERT_DOT: string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
+
import type { BuildDecorationTransformerParams, DecorationTransformer } from './types';
|
|
2
3
|
export declare const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer;
|
|
3
|
-
export declare const buildColumnControlsDecorations:
|
|
4
|
+
export declare const buildColumnControlsDecorations: ({ decorationSet, tr, options, }: BuildDecorationTransformerParams) => DecorationSet;
|
package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/compose-decorations.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DecorationTransformer } from './types';
|
|
1
|
+
import type { DecorationTransformer } from './types';
|
|
2
2
|
export declare const composeDecorations: (transformers: Array<DecorationTransformer>) => DecorationTransformer;
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
export type DecorationTransformer = (
|
|
1
|
+
import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
+
export type DecorationTransformer = (params: DecorationTransformerParams) => DecorationSet;
|
|
4
|
+
export type DecorationTransformerParams = {
|
|
4
5
|
decorationSet: DecorationSet;
|
|
5
6
|
tr: Transaction | ReadonlyTransaction;
|
|
6
|
-
}
|
|
7
|
+
};
|
|
8
|
+
export type BuildDecorationTransformerParams = DecorationTransformerParams & {
|
|
9
|
+
options: {
|
|
10
|
+
isDragAndDropEnabled: boolean;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
@@ -282,7 +282,8 @@ export declare const TableCssClassName: {
|
|
|
282
282
|
CORNER_CONTROLS_INSERT_ROW_MARKER: string;
|
|
283
283
|
CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
|
|
284
284
|
CONTROLS_CORNER_BUTTON: string;
|
|
285
|
-
/**
|
|
285
|
+
/** drag and drop controls */
|
|
286
|
+
DRAG_ROW_CONTROLS_WRAPPER: string;
|
|
286
287
|
DRAG_ROW_CONTROLS: string;
|
|
287
288
|
DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
|
|
288
289
|
DRAG_ROW_FLOATING_INSERT_DOT: string;
|
package/package.json
CHANGED
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
tdEmpty,
|
|
27
27
|
tr,
|
|
28
28
|
} from '@atlaskit/editor-test-helpers/doc-builder';
|
|
29
|
-
import {
|
|
29
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
30
30
|
|
|
31
31
|
import tablePlugin from '../../plugins/table-plugin';
|
|
32
32
|
import {
|
|
@@ -44,6 +44,15 @@ import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
|
|
|
44
44
|
import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
|
|
45
45
|
import { TableCssClassName as ClassName } from '../../plugins/table/types';
|
|
46
46
|
|
|
47
|
+
// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
|
|
48
|
+
jest.mock('@atlaskit/platform-feature-flags', () => ({
|
|
49
|
+
getBooleanFF: jest.fn().mockImplementation(() => false),
|
|
50
|
+
}));
|
|
51
|
+
|
|
52
|
+
afterEach(() => {
|
|
53
|
+
(getBooleanFF as jest.Mock).mockReset();
|
|
54
|
+
});
|
|
55
|
+
|
|
47
56
|
describe('table plugin: decorations', () => {
|
|
48
57
|
const createEditor = createProsemirrorEditorFactory();
|
|
49
58
|
const editor = (doc: DocBuilder) =>
|
|
@@ -263,49 +272,39 @@ describe('withCellTracking', () => {
|
|
|
263
272
|
});
|
|
264
273
|
|
|
265
274
|
describe('should fire event handler passed in', () => {
|
|
266
|
-
|
|
267
|
-
'platform.editor.table.drag-and-drop',
|
|
268
|
-
() => {
|
|
269
|
-
const { editorView } = editor(
|
|
270
|
-
doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
|
|
271
|
-
true,
|
|
272
|
-
);
|
|
273
|
-
const eventHandlerSpy = jest.fn();
|
|
274
|
-
withCellTracking(eventHandlerSpy)(editorView, {} as any);
|
|
275
|
-
|
|
276
|
-
expect(eventHandlerSpy).toHaveBeenCalled();
|
|
277
|
-
},
|
|
278
|
-
() => {
|
|
279
|
-
const { editorView } = editor(
|
|
280
|
-
doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
|
|
281
|
-
);
|
|
282
|
-
const eventHandlerSpy = jest.fn();
|
|
283
|
-
withCellTracking(eventHandlerSpy)(editorView, {} as any);
|
|
284
|
-
|
|
285
|
-
expect(eventHandlerSpy).toHaveBeenCalled();
|
|
286
|
-
},
|
|
275
|
+
(getBooleanFF as jest.Mock).mockImplementation(
|
|
276
|
+
(name) => name === 'platform.editor.table.drag-and-drop',
|
|
287
277
|
);
|
|
278
|
+
const { editorView } = editor(
|
|
279
|
+
doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
|
|
280
|
+
true,
|
|
281
|
+
);
|
|
282
|
+
const eventHandlerSpy = jest.fn();
|
|
283
|
+
withCellTracking(eventHandlerSpy)(editorView, {} as any);
|
|
284
|
+
|
|
285
|
+
expect(eventHandlerSpy).toHaveBeenCalled();
|
|
288
286
|
});
|
|
289
287
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
)
|
|
296
|
-
|
|
288
|
+
it('should correctly set table cell coordinates based on mouse location', () => {
|
|
289
|
+
(getBooleanFF as jest.Mock).mockImplementation(
|
|
290
|
+
(name) => name === 'platform.editor.table.drag-and-drop',
|
|
291
|
+
);
|
|
292
|
+
const { editorView, refs } = editor(
|
|
293
|
+
doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
|
|
294
|
+
true,
|
|
295
|
+
);
|
|
296
|
+
const firstCell = editorView.domAtPos(refs['<>']);
|
|
297
297
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
298
|
+
const event = {
|
|
299
|
+
target: firstCell.node,
|
|
300
|
+
};
|
|
301
301
|
|
|
302
|
-
|
|
302
|
+
withCellTracking(jest.fn())(editorView, event as any);
|
|
303
303
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
});
|
|
304
|
+
const pluginState = getPluginState(editorView.state);
|
|
305
|
+
expect(pluginState.hoveredCell).toEqual({
|
|
306
|
+
colIndex: undefined,
|
|
307
|
+
rowIndex: undefined,
|
|
309
308
|
});
|
|
310
309
|
});
|
|
311
310
|
});
|