@atlaskit/editor-plugin-table 1.2.2 → 1.2.3

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 (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/plugins/table/ui/common-styles.js +11 -5
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/plugins/table/ui/common-styles.js +30 -7
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/plugins/table/ui/common-styles.js +11 -5
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +1 -1
  9. package/src/plugins/table/ui/common-styles.ts +34 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 1.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9f9b4b1cf60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f9b4b1cf60) - [ux] [HOT-103036] Fix table width styling when broken out with fragment mark
8
+
3
9
  ## 1.2.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/plugins/table/ui/common-styles.js CHANGED
@@ -15,7 +15,7 @@ var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
15
15
  var _types = require("../types");
16
16
  var _consts = require("./consts");
17
17
  var _uiStyles = require("./ui-styles");
18
- var _templateObject, _templateObject2, _templateObject3;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
19
  var cornerControlHeight = _consts.tableToolbarSize + 1;
20
20
 
21
21
  /*
@@ -31,14 +31,20 @@ var shadowSentinelStyles = "\n .".concat(_types.TableCssClassName.TABLE_SHADOW_
31
31
  // previous styles to add spacing to numbered lists with
32
32
  // large item markers (e.g. 101, 102, ...) when nested inside tables
33
33
  var listLargeNumericMarkersOldStyles = "\n .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n padding-left: revert;\n }\n";
34
+ var breakoutWidthStyling = function breakoutWidthStyling(useFragmentMarkBreakoutWidthStylingFix) {
35
+ if (useFragmentMarkBreakoutWidthStylingFix) {
36
+ return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n > *:not([data-mark-type='fragment'])\n .", "\n .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n\n > [data-mark-type='fragment']\n *\n .", "\n .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n "])), _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER);
37
+ }
38
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n "])), _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER);
39
+ };
34
40
 
35
41
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
36
42
  var tableStyles = function tableStyles(props) {
37
- var _props$featureFlags, _props$featureFlags2;
38
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 */\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: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\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 .", " {\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 */\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\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: 1px;\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 td.", ", td.", " {\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 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 }\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"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(_colors.N40A), ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
43
+ var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
44
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 */\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: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\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 .", " {\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: 1px;\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 td.", ", td.", " {\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 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 }\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"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(_colors.N40A), ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
39
45
  };
40
46
  exports.tableStyles = tableStyles;
41
- var tableFullPageEditorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
47
+ var tableFullPageEditorStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
42
48
  exports.tableFullPageEditorStyles = tableFullPageEditorStyles;
43
- var tableCommentEditorStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
49
+ var tableCommentEditorStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
44
50
  exports.tableCommentEditorStyles = tableCommentEditorStyles;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/plugins/table/ui/common-styles.js CHANGED
@@ -70,10 +70,36 @@ const listLargeNumericMarkersOldStyles = `
70
70
  padding-left: revert;
71
71
  }
72
72
  `;
73
+ const breakoutWidthStyling = useFragmentMarkBreakoutWidthStylingFix => {
74
+ if (useFragmentMarkBreakoutWidthStylingFix) {
75
+ return css`
76
+ > *:not([data-mark-type='fragment'])
77
+ .${ClassName.NODEVIEW_WRAPPER}
78
+ .${ClassName.TABLE_CONTAINER} {
79
+ margin-left: unset !important;
80
+ width: 100% !important;
81
+ }
82
+
83
+ > [data-mark-type='fragment']
84
+ *
85
+ .${ClassName.NODEVIEW_WRAPPER}
86
+ .${ClassName.TABLE_CONTAINER} {
87
+ margin-left: unset !important;
88
+ width: 100% !important;
89
+ }
90
+ `;
91
+ }
92
+ return css`
93
+ > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
94
+ margin-left: unset !important;
95
+ width: 100% !important;
96
+ }
97
+ `;
98
+ };
73
99
 
74
100
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
75
101
  export const tableStyles = props => {
76
- var _props$featureFlags, _props$featureFlags2;
102
+ var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
77
103
  return css`
78
104
  .${ClassName.LAYOUT_BUTTON} button {
79
105
  background: ${`var(--ds-background-neutral, ${N20A})`};
@@ -341,11 +367,8 @@ export const tableStyles = props => {
341
367
  */
342
368
  }
343
369
 
344
- /* Breakout only works on top level */
345
- > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
346
- margin-left: unset !important;
347
- width: 100% !important;
348
- }
370
+ /* Breakout only works on top level unless wrapped in fragment mark */
371
+ ${breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true)}
349
372
 
350
373
  ${columnControlsDecoration(props)};
351
374
 
@@ -663,7 +686,7 @@ export const tableStyles = props => {
663
686
  styles that handle this generally (in editor-common) so we can
664
687
  throw away the older table-specific styles here.
665
688
  */
666
- ${props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
689
+ ${props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
667
690
 
668
691
  ${shadowSentinelStyles}
669
692
  `;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/plugins/table/ui/common-styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  import { css } from '@emotion/react';
4
4
  import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
5
5
  import { fontSize } from '@atlaskit/theme/constants';
@@ -23,11 +23,17 @@ var shadowSentinelStyles = "\n .".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT,
23
23
  // previous styles to add spacing to numbered lists with
24
24
  // large item markers (e.g. 101, 102, ...) when nested inside tables
25
25
  var listLargeNumericMarkersOldStyles = "\n .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n padding-left: revert;\n }\n";
26
+ var breakoutWidthStyling = function breakoutWidthStyling(useFragmentMarkBreakoutWidthStylingFix) {
27
+ if (useFragmentMarkBreakoutWidthStylingFix) {
28
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n > *:not([data-mark-type='fragment'])\n .", "\n .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n\n > [data-mark-type='fragment']\n *\n .", "\n .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n "])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
29
+ }
30
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n "])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
31
+ };
26
32
 
27
33
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
28
34
  export var tableStyles = function tableStyles(props) {
29
- var _props$featureFlags, _props$featureFlags2;
30
- return css(_templateObject || (_templateObject = _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 */\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: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\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 .", " {\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 */\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\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: 1px;\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 td.", ", td.", " {\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 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 }\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(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, 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, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, 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, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, 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)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? 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, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, 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, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), 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(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "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, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
35
+ var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
36
+ return css(_templateObject3 || (_templateObject3 = _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 */\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: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\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 .", " {\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: 1px;\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 td.", ", td.", " {\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 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 }\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(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, 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, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, 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, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, 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)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? 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, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), 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, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), 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(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "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, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
31
37
  };
32
- export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _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);
33
- export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
38
+ export var tableFullPageEditorStyles = css(_templateObject4 || (_templateObject4 = _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);
39
+ export var tableCommentEditorStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/src/plugins/table/ui/common-styles.ts CHANGED
@@ -137,6 +137,36 @@ const listLargeNumericMarkersOldStyles = `
137
137
  }
138
138
  `;
139
139
 
140
+ const breakoutWidthStyling = (
141
+ useFragmentMarkBreakoutWidthStylingFix: boolean,
142
+ ) => {
143
+ if (useFragmentMarkBreakoutWidthStylingFix) {
144
+ return css`
145
+ > *:not([data-mark-type='fragment'])
146
+ .${ClassName.NODEVIEW_WRAPPER}
147
+ .${ClassName.TABLE_CONTAINER} {
148
+ margin-left: unset !important;
149
+ width: 100% !important;
150
+ }
151
+
152
+ > [data-mark-type='fragment']
153
+ *
154
+ .${ClassName.NODEVIEW_WRAPPER}
155
+ .${ClassName.TABLE_CONTAINER} {
156
+ margin-left: unset !important;
157
+ width: 100% !important;
158
+ }
159
+ `;
160
+ }
161
+
162
+ return css`
163
+ > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
164
+ margin-left: unset !important;
165
+ width: 100% !important;
166
+ }
167
+ `;
168
+ };
169
+
140
170
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
141
171
  export const tableStyles = (
142
172
  props: ThemeProps & { featureFlags?: FeatureFlags },
@@ -410,11 +440,10 @@ export const tableStyles = (
410
440
  */
411
441
  }
412
442
 
413
- /* Breakout only works on top level */
414
- > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
415
- margin-left: unset !important;
416
- width: 100% !important;
417
- }
443
+ /* Breakout only works on top level unless wrapped in fragment mark */
444
+ ${breakoutWidthStyling(
445
+ props.featureFlags?.useFragmentMarkBreakoutWidthStylingFix ?? true,
446
+ )}
418
447
 
419
448
  ${columnControlsDecoration(props)};
420
449