@atlaskit/editor-plugin-table 3.1.3 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/plugins/table/nodeviews/TableComponent.js +36 -2
  3. package/dist/cjs/plugins/table/nodeviews/TableStickyScrollbar.js +154 -0
  4. package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +37 -4
  5. package/dist/cjs/plugins/table/toolbar.js +6 -0
  6. package/dist/cjs/plugins/table/ui/common-styles.js +9 -2
  7. package/dist/es2019/plugins/table/nodeviews/TableComponent.js +37 -3
  8. package/dist/es2019/plugins/table/nodeviews/TableStickyScrollbar.js +112 -0
  9. package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +39 -6
  10. package/dist/es2019/plugins/table/toolbar.js +6 -0
  11. package/dist/es2019/plugins/table/ui/common-styles.js +33 -1
  12. package/dist/esm/plugins/table/nodeviews/TableComponent.js +37 -3
  13. package/dist/esm/plugins/table/nodeviews/TableStickyScrollbar.js +146 -0
  14. package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +37 -4
  15. package/dist/esm/plugins/table/toolbar.js +6 -0
  16. package/dist/esm/plugins/table/ui/common-styles.js +8 -2
  17. package/dist/types/plugins/table/nodeviews/TableComponent.d.ts +1 -0
  18. package/dist/types/plugins/table/nodeviews/TableStickyScrollbar.d.ts +24 -0
  19. package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts +5 -0
  20. package/dist/types/plugins/table/toolbar.d.ts +4 -4
  21. package/dist/types/plugins/table/types.d.ts +3 -0
  22. package/dist/types/plugins/table/ui/common-styles.d.ts +1 -0
  23. package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts +1 -0
  24. package/dist/types-ts4.5/plugins/table/nodeviews/TableStickyScrollbar.d.ts +24 -0
  25. package/dist/types-ts4.5/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts +5 -0
  26. package/dist/types-ts4.5/plugins/table/toolbar.d.ts +4 -4
  27. package/dist/types-ts4.5/plugins/table/types.d.ts +3 -0
  28. package/dist/types-ts4.5/plugins/table/ui/common-styles.d.ts +1 -0
  29. package/package.json +6 -3
  30. package/src/plugins/table/nodeviews/TableComponent.tsx +54 -3
  31. package/src/plugins/table/nodeviews/TableStickyScrollbar.ts +204 -0
  32. package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts +40 -3
  33. package/src/plugins/table/toolbar.tsx +10 -6
  34. package/src/plugins/table/ui/common-styles.ts +38 -0
package/dist/esm/plugins/table/ui/common-styles.js CHANGED
@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
3
  import { css } from '@emotion/react';
4
4
  import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
5
- import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
5
+ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
6
6
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
7
7
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
8
  import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
@@ -18,8 +18,14 @@ var cornerControlHeight = tableToolbarSize + 1;
18
18
  its center should be aligned with the edge
19
19
  */
20
20
  export var insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
21
+ export var tableRowHeight = 44;
21
22
  var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n th,td {\n ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n }\n}\n");
22
23
  var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n position: absolute;\n width: 100%;\n height: 1px;\n margin-top: -1px;\n // need this to avoid sentinel being focused via keyboard\n // this still allows it to be detected by intersection observer\n visibility: hidden;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: ").concat(columnControlsDecorationHeight, "px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n }\n &.").concat(ClassName.WITH_CONTROLS, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: 0px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n }\n }\n}");
24
+ var stickyScrollbarSentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n position: absolute;\n width: 100%;\n height: 1px;\n margin-top: -1px;\n // need this to avoid sentinel being focused via keyboard\n // this still allows it to be detected by intersection observer\n visibility: hidden;\n }\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n top: ").concat(columnControlsDecorationHeight + tableRowHeight * 3, "px;\n }\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n bottom: ").concat(MAX_BROWSER_SCROLLBAR_HEIGHT, "px;\n }\n}");
25
+ var stickyScrollbarContainerStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n width: 100%;\n display: none;\n overflow-x: auto;\n position: sticky;\n bottom: 0;\n }\n}");
26
+ var stickyScrollbarStyles = function stickyScrollbarStyles() {
27
+ return getBooleanFF('platform.editor.table-sticky-scrollbar') ? "".concat(stickyScrollbarContainerStyles, " ").concat(stickyScrollbarSentinelStyles) : '';
28
+ };
23
29
  var shadowSentinelStyles = "\n .".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT, ",\n .").concat(ClassName.TABLE_SHADOW_SENTINEL_RIGHT, " {\n position: absolute;\n top: 0;\n height: 100%;\n width: 1px;\n visibility: hidden;\n }\n .").concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT, " {\n left: 0;\n }\n .").concat(ClassName.TABLE_SHADOW_SENTINEL_RIGHT, " {\n right: 0;\n }\n");
24
30
  // previous styles to add spacing to numbered lists with
25
31
  // large item markers (e.g. 101, 102, ...) when nested inside tables
@@ -38,7 +44,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
38
44
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
39
45
  export var tableStyles = function tableStyles(props) {
40
46
  var _props$featureFlags;
41
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\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 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 &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, 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), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, 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);
47
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\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 &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, 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.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, 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);
42
48
  };
43
49
  export var tableFullPageEditorStyles = css(_templateObject5 || (_templateObject5 = _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);
44
50
  export var tableCommentEditorStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
package/dist/types/plugins/table/nodeviews/TableComponent.d.ts CHANGED
@@ -43,6 +43,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
43
43
  private containerWidth?;
44
44
  private layoutSize?;
45
45
  private overflowShadowsObserver?;
46
+ private stickyScrollbar?;
46
47
  private isInitialOverflowSent;
47
48
  private initialOverflowCaptureTimerId?;
48
49
  constructor(props: ComponentProps);
package/dist/types/plugins/table/nodeviews/TableStickyScrollbar.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export declare class TableStickyScrollbar {
3
+ private wrapper;
4
+ private view;
5
+ private editorScrollableElement?;
6
+ private intersectionObserver?;
7
+ private stickyScrollbarContainerElement?;
8
+ private sentinels;
9
+ private topSentinelState?;
10
+ private bottomSentinelState?;
11
+ constructor(wrapper: HTMLDivElement, view: EditorView);
12
+ dispose(): void;
13
+ scrollLeft(left: number): void;
14
+ private init;
15
+ private createIntersectionObserver;
16
+ private deleteIntesactionObserver;
17
+ private sentenialBottomCallback;
18
+ private sentenialTopCallback;
19
+ private toggle;
20
+ private hide;
21
+ private show;
22
+ private handleScroll;
23
+ private handleScrollDebounced;
24
+ }
package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts CHANGED
@@ -55,6 +55,11 @@ export declare class TableRowNodeView implements NodeView {
55
55
  onTablePluginState: (state: TablePluginState) => void;
56
56
  updateStickyHeaderWidth: () => void;
57
57
  shouldHeaderStick: (tree: TableDOMElements) => boolean;
58
+ /**
59
+ * Manually refire the intersection observers.
60
+ * Useful when the header may have detached from the table.
61
+ */
62
+ refireIntersectionObservers: () => void;
58
63
  makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number) => void;
59
64
  makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
60
65
  getWrapperoffset: (inverse?: boolean) => number;
package/dist/types/plugins/table/toolbar.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
2
  import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
3
- import { EditorState } from '@atlaskit/editor-prosemirror/state';
4
- import { EditorView } from '@atlaskit/editor-prosemirror/view';
5
- import { Rect } from '@atlaskit/editor-tables/table-map';
6
- import { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
3
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
4
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
+ import type { Rect } from '@atlaskit/editor-tables/table-map';
6
+ import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
7
7
  export declare const messages: {
8
8
  tableOptions: {
9
9
  id: string;
package/dist/types/plugins/table/types.d.ts CHANGED
@@ -295,8 +295,11 @@ export declare const TableCssClassName: {
295
295
  TABLE_RIGHT_SHADOW: string;
296
296
  TABLE_STICKY_SHADOW: string;
297
297
  TABLE_STICKY_WRAPPER: string;
298
+ TABLE_STICKY_SCROLLBAR_CONTAINER: string;
298
299
  TABLE_STICKY_SENTINEL_TOP: string;
299
300
  TABLE_STICKY_SENTINEL_BOTTOM: string;
301
+ TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: string;
302
+ TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: string;
300
303
  TABLE_SHADOW_SENTINEL_LEFT: string;
301
304
  TABLE_SHADOW_SENTINEL_RIGHT: string;
302
305
  TABLE_CELL_NODEVIEW_CONTENT_DOM: string;
package/dist/types/plugins/table/ui/common-styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { FeatureFlags } from '@atlaskit/editor-common/types';
2
2
  import type { ThemeProps } from '@atlaskit/theme/types';
3
3
  export declare const insertColumnButtonOffset: number;
4
+ export declare const tableRowHeight = 44;
4
5
  export declare const tableStyles: (props: ThemeProps & {
5
6
  featureFlags?: FeatureFlags;
6
7
  }) => import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts CHANGED
@@ -43,6 +43,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
43
43
  private containerWidth?;
44
44
  private layoutSize?;
45
45
  private overflowShadowsObserver?;
46
+ private stickyScrollbar?;
46
47
  private isInitialOverflowSent;
47
48
  private initialOverflowCaptureTimerId?;
48
49
  constructor(props: ComponentProps);
package/dist/types-ts4.5/plugins/table/nodeviews/TableStickyScrollbar.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export declare class TableStickyScrollbar {
3
+ private wrapper;
4
+ private view;
5
+ private editorScrollableElement?;
6
+ private intersectionObserver?;
7
+ private stickyScrollbarContainerElement?;
8
+ private sentinels;
9
+ private topSentinelState?;
10
+ private bottomSentinelState?;
11
+ constructor(wrapper: HTMLDivElement, view: EditorView);
12
+ dispose(): void;
13
+ scrollLeft(left: number): void;
14
+ private init;
15
+ private createIntersectionObserver;
16
+ private deleteIntesactionObserver;
17
+ private sentenialBottomCallback;
18
+ private sentenialTopCallback;
19
+ private toggle;
20
+ private hide;
21
+ private show;
22
+ private handleScroll;
23
+ private handleScrollDebounced;
24
+ }
package/dist/types-ts4.5/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts CHANGED
@@ -55,6 +55,11 @@ export declare class TableRowNodeView implements NodeView {
55
55
  onTablePluginState: (state: TablePluginState) => void;
56
56
  updateStickyHeaderWidth: () => void;
57
57
  shouldHeaderStick: (tree: TableDOMElements) => boolean;
58
+ /**
59
+ * Manually refire the intersection observers.
60
+ * Useful when the header may have detached from the table.
61
+ */
62
+ refireIntersectionObservers: () => void;
58
63
  makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number) => void;
59
64
  makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
60
65
  getWrapperoffset: (inverse?: boolean) => number;
package/dist/types-ts4.5/plugins/table/toolbar.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
2
  import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
3
- import { EditorState } from '@atlaskit/editor-prosemirror/state';
4
- import { EditorView } from '@atlaskit/editor-prosemirror/view';
5
- import { Rect } from '@atlaskit/editor-tables/table-map';
6
- import { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
3
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
4
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
+ import type { Rect } from '@atlaskit/editor-tables/table-map';
6
+ import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
7
7
  export declare const messages: {
8
8
  tableOptions: {
9
9
  id: string;
package/dist/types-ts4.5/plugins/table/types.d.ts CHANGED
@@ -295,8 +295,11 @@ export declare const TableCssClassName: {
295
295
  TABLE_RIGHT_SHADOW: string;
296
296
  TABLE_STICKY_SHADOW: string;
297
297
  TABLE_STICKY_WRAPPER: string;
298
+ TABLE_STICKY_SCROLLBAR_CONTAINER: string;
298
299
  TABLE_STICKY_SENTINEL_TOP: string;
299
300
  TABLE_STICKY_SENTINEL_BOTTOM: string;
301
+ TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: string;
302
+ TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: string;
300
303
  TABLE_SHADOW_SENTINEL_LEFT: string;
301
304
  TABLE_SHADOW_SENTINEL_RIGHT: string;
302
305
  TABLE_CELL_NODEVIEW_CONTENT_DOM: string;
package/dist/types-ts4.5/plugins/table/ui/common-styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { FeatureFlags } from '@atlaskit/editor-common/types';
2
2
  import type { ThemeProps } from '@atlaskit/theme/types';
3
3
  export declare const insertColumnButtonOffset: number;
4
+ export declare const tableRowHeight = 44;
4
5
  export declare const tableStyles: (props: ThemeProps & {
5
6
  featureFlags?: FeatureFlags;
6
7
  }) => import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "3.1.3",
3
+ "version": "3.2.1",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,12 +28,12 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@atlaskit/adf-schema": "^29.1.0",
31
- "@atlaskit/editor-common": "^75.6.0",
31
+ "@atlaskit/editor-common": "^75.8.0",
32
32
  "@atlaskit/editor-palette": "1.5.1",
33
33
  "@atlaskit/editor-plugin-analytics": "^0.2.0",
34
34
  "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
35
35
  "@atlaskit/editor-prosemirror": "1.1.0",
36
- "@atlaskit/editor-shared-styles": "^2.7.0",
36
+ "@atlaskit/editor-shared-styles": "^2.8.0",
37
37
  "@atlaskit/editor-tables": "^2.3.0",
38
38
  "@atlaskit/icon": "^21.12.0",
39
39
  "@atlaskit/platform-feature-flags": "^0.2.1",
@@ -102,6 +102,9 @@
102
102
  "platform.editor.custom-table-width": {
103
103
  "type": "boolean"
104
104
  },
105
+ "platform.editor.table-sticky-scrollbar": {
106
+ "type": "boolean"
107
+ },
105
108
  "platform.editor.update-table-cell-width-via-step": {
106
109
  "type": "boolean"
107
110
  },
package/src/plugins/table/nodeviews/TableComponent.tsx CHANGED
@@ -27,7 +27,10 @@ import {
27
27
  } from '@atlaskit/editor-common/utils';
28
28
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
29
29
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
30
- import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
30
+ import {
31
+ MAX_BROWSER_SCROLLBAR_HEIGHT,
32
+ akEditorTableToolbarSize as tableToolbarSize,
33
+ } from '@atlaskit/editor-shared-styles';
31
34
  import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
32
35
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
33
36
 
@@ -65,6 +68,7 @@ import {
65
68
 
66
69
  import { OverflowShadowsObserver } from './OverflowShadowsObserver';
67
70
  import { TableContainer } from './TableContainer';
71
+ import { TableStickyScrollbar } from './TableStickyScrollbar';
68
72
  import type { TableOptions } from './types';
69
73
 
70
74
  const isIE11 = browser.ie_version === 11;
@@ -72,6 +76,7 @@ const isIE11 = browser.ie_version === 11;
72
76
  // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
73
77
  // To make sure we capture the last update, we use setTimeout.
74
78
  const initialOverflowCaptureTimeroutDelay = 300;
79
+
75
80
  export interface ComponentProps {
76
81
  view: EditorView;
77
82
  getNode: () => PmNode;
@@ -117,6 +122,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
117
122
  private containerWidth?: EditorContainerWidth;
118
123
  private layoutSize?: number;
119
124
  private overflowShadowsObserver?: OverflowShadowsObserver;
125
+ private stickyScrollbar?: TableStickyScrollbar;
120
126
 
121
127
  private isInitialOverflowSent: boolean;
122
128
  private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
@@ -154,7 +160,18 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
154
160
  componentDidMount() {
155
161
  const { allowColumnResizing, eventDispatcher, options } = this.props;
156
162
  if (allowColumnResizing && this.wrapper && !isIE11) {
157
- this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
163
+ this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
164
+ passive: true,
165
+ });
166
+
167
+ if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
168
+ if (this.table) {
169
+ this.stickyScrollbar = new TableStickyScrollbar(
170
+ this.wrapper,
171
+ this.props.view,
172
+ );
173
+ }
174
+ }
158
175
  }
159
176
 
160
177
  if (allowColumnResizing) {
@@ -193,6 +210,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
193
210
  this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
194
211
  }
195
212
 
213
+ if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
214
+ if (this.stickyScrollbar) {
215
+ this.stickyScrollbar.dispose();
216
+ }
217
+ }
218
+
196
219
  this.handleScrollDebounced.cancel();
197
220
  this.scaleTableDebounced.cancel();
198
221
  this.handleTableResizingDebounced.cancel();
@@ -453,6 +476,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
453
476
  className={ClassName.TABLE_STICKY_SENTINEL_TOP}
454
477
  data-testid="sticky-sentinel-top"
455
478
  />
479
+ {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
480
+ <div
481
+ className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP}
482
+ data-testid="sticky-scrollbar-sentinel-top"
483
+ />
484
+ )}
456
485
  {allowControls && rowControls}
457
486
  <div
458
487
  style={shadowStyle(showBeforeShadow)}
@@ -473,7 +502,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
473
502
  }}
474
503
  />
475
504
  )}
476
-
477
505
  <div
478
506
  className={classnames(ClassName.TABLE_NODE_WRAPPER)}
479
507
  ref={(elem) => {
@@ -488,6 +516,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
488
516
  }
489
517
  }}
490
518
  />
519
+ {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
520
+ <div
521
+ className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
522
+ style={{
523
+ height: MAX_BROWSER_SCROLLBAR_HEIGHT,
524
+ display: 'none',
525
+ }}
526
+ >
527
+ <div style={{ width: tableRef?.clientWidth }}></div>
528
+ </div>
529
+ )}
491
530
  <div
492
531
  style={shadowStyle(showAfterShadow)}
493
532
  className={ClassName.TABLE_RIGHT_SHADOW}
@@ -526,6 +565,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
526
565
  className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
527
566
  data-testid="sticky-sentinel-bottom"
528
567
  />
568
+ {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
569
+ <div
570
+ className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM}
571
+ data-testid="sticky-scrollbar-sentinel-bottom"
572
+ />
573
+ )}
529
574
  </TableContainer>
530
575
  );
531
576
  }
@@ -535,6 +580,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
535
580
  return;
536
581
  }
537
582
 
583
+ if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
584
+ if (this.stickyScrollbar) {
585
+ this.stickyScrollbar.scrollLeft(this.wrapper.scrollLeft);
586
+ }
587
+ }
588
+
538
589
  if (this.table) {
539
590
  // sync sticky header row to table scroll
540
591
  const headers = this.table.querySelectorAll('tr[data-header-row]');