@atlaskit/editor-plugin-table 9.5.0 → 9.5.5

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 (22) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/cjs/nodeviews/TableRow.js +59 -13
  3. package/dist/cjs/nodeviews/TableStickyScrollbar.js +9 -5
  4. package/dist/cjs/nodeviews/lazy-node-views.js +9 -4
  5. package/dist/cjs/pm-plugins/utils/paste.js +15 -11
  6. package/dist/cjs/ui/common-styles.js +9 -8
  7. package/dist/es2019/nodeviews/TableRow.js +53 -12
  8. package/dist/es2019/nodeviews/TableStickyScrollbar.js +8 -5
  9. package/dist/es2019/nodeviews/lazy-node-views.js +9 -4
  10. package/dist/es2019/pm-plugins/utils/paste.js +13 -8
  11. package/dist/es2019/ui/common-styles.js +55 -23
  12. package/dist/esm/nodeviews/TableRow.js +59 -13
  13. package/dist/esm/nodeviews/TableStickyScrollbar.js +9 -5
  14. package/dist/esm/nodeviews/lazy-node-views.js +9 -4
  15. package/dist/esm/pm-plugins/utils/paste.js +15 -11
  16. package/dist/esm/ui/common-styles.js +9 -8
  17. package/package.json +17 -5
  18. package/src/nodeviews/TableRow.ts +62 -19
  19. package/src/nodeviews/TableStickyScrollbar.ts +13 -5
  20. package/src/nodeviews/lazy-node-views.ts +21 -4
  21. package/src/pm-plugins/utils/paste.ts +9 -8
  22. package/src/ui/common-styles.ts +57 -23
package/dist/esm/ui/common-styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
3
3
  /* eslint-disable @atlaskit/editor/no-re-export */
4
4
  // Entry file in package.json
5
5
 
@@ -12,6 +12,7 @@ import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles
12
12
  import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
13
13
  import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
14
14
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
15
16
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
16
17
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
18
  import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -37,7 +38,7 @@ var breakoutWidthStyling = function breakoutWidthStyling() {
37
38
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
38
39
  };
39
40
  var viewModeSortStyles = function viewModeSortStyles() {
40
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\tth {\n\t\t\t.", " {\n\t\t\t\t+ p {\n\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:has(.is-active) {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\topacity: 0;\n\t\t\t\t&:focus {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
41
+ return fg('platform_editor_nested_tables_view_mode_sort') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, ClassName.TABLE_CONTAINER, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
41
42
  };
42
43
  var tableBorderStyles = function tableBorderStyles() {
43
44
  return "border-color: ".concat(tableBorderDeleteColor);
@@ -45,7 +46,7 @@ var tableBorderStyles = function tableBorderStyles() {
45
46
 
46
47
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
47
48
  var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeaderColumnControlsDecorationsStyle() {
48
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
49
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
49
50
  };
50
51
  var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle() {
51
52
  /*
@@ -54,23 +55,23 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
54
55
  see https://product-fabric.atlassian.net/browse/ED-19177
55
56
  */
56
57
  if (browser.gecko) {
57
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), ClassName.TABLE_STICKY);
58
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), ClassName.TABLE_STICKY);
58
59
  }
59
60
  };
60
61
 
61
62
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
62
63
  export var baseTableStyles = function baseTableStyles(props) {
63
64
  var _props$featureFlags, _props$featureFlags2;
64
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\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\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t.", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t// the extra pixel is accounting for borders\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t// nested tables should be ignored when we apply border-left: 0 to the parent table\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\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\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* 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\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), 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, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), 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, 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$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\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, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\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("\n border-bottom: 1px solid ".concat(tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.DRAG_ROW_CONTROLS, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.tableDragAndDrop || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, 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, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_NODE_WRAPPER);
65
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\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\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t.", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t// the extra pixel is accounting for borders\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t// nested tables should be ignored when we apply border-left: 0 to the parent table\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\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\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* 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\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), 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, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), 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, 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$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\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, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\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("\n border-bottom: 1px solid ".concat(tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.DRAG_ROW_CONTROLS, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.tableDragAndDrop || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, 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, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_NODE_WRAPPER);
65
66
  };
66
67
 
67
68
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
68
69
  export var tableStyles = function tableStyles(props) {
69
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
70
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
70
71
  };
71
72
 
72
73
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
73
- export var tableFullPageEditorStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
74
+ export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
74
75
 
75
76
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
76
- export var tableCommentEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
77
+ export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "9.5.0",
3
+ "version": "9.5.5",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
30
30
  "@atlaskit/adf-schema": "^47.2.1",
31
31
  "@atlaskit/button": "^20.5.0",
32
32
  "@atlaskit/custom-steps": "^0.10.0",
33
- "@atlaskit/editor-common": "^99.14.0",
33
+ "@atlaskit/editor-common": "^99.17.0",
34
34
  "@atlaskit/editor-palette": "1.7.0",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.4.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.12.0",
@@ -41,16 +41,16 @@
41
41
  "@atlaskit/editor-plugin-selection": "^1.8.0",
42
42
  "@atlaskit/editor-plugin-width": "^2.1.0",
43
43
  "@atlaskit/editor-prosemirror": "7.0.0",
44
- "@atlaskit/editor-shared-styles": "^3.2.0",
44
+ "@atlaskit/editor-shared-styles": "^3.3.0",
45
45
  "@atlaskit/editor-tables": "^2.9.0",
46
46
  "@atlaskit/icon": "^23.9.0",
47
47
  "@atlaskit/menu": "^2.14.0",
48
- "@atlaskit/platform-feature-flags": "^1.0.0",
48
+ "@atlaskit/platform-feature-flags": "^1.1.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
50
50
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
52
52
  "@atlaskit/primitives": "^13.5.0",
53
- "@atlaskit/theme": "^15.0.0",
53
+ "@atlaskit/theme": "^16.0.0",
54
54
  "@atlaskit/tmp-editor-statsig": "^2.46.0",
55
55
  "@atlaskit/toggle": "^14.1.0",
56
56
  "@atlaskit/tokens": "^3.3.0",
@@ -141,6 +141,9 @@
141
141
  "platform_editor_nested_tables_resizing": {
142
142
  "type": "boolean"
143
143
  },
144
+ "platform_editor_disable_table_lnv": {
145
+ "type": "boolean"
146
+ },
144
147
  "platform_editor_nested_tables_paste_wrap_fix": {
145
148
  "type": "boolean"
146
149
  },
@@ -149,6 +152,15 @@
149
152
  },
150
153
  "platform_editor_advanced_layouts_post_fix_patch_4": {
151
154
  "type": "boolean"
155
+ },
156
+ "platform_editor_nested_tables_view_mode_sort": {
157
+ "type": "boolean"
158
+ },
159
+ "platform_editor_nested_tables_bottom_sentinel": {
160
+ "type": "boolean"
161
+ },
162
+ "platform_editor_react18_stickyheaders_fix": {
163
+ "type": "boolean"
152
164
  }
153
165
  }
154
166
  }
package/src/nodeviews/TableRow.ts CHANGED
@@ -57,7 +57,6 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
57
57
  const { pluginConfig } = getPluginState(view.state);
58
58
 
59
59
  this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
60
-
61
60
  if (this.isHeaderRow) {
62
61
  this.dom.setAttribute('data-header-row', 'true');
63
62
  if (this.isStickyHeaderEnabled) {
@@ -286,25 +285,69 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
286
285
  `.${TableCssClassName.NODEVIEW_WRAPPER}`,
287
286
  );
288
287
  if (tableContainer) {
289
- // Ignored via go/ees005
290
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
291
- this.sentinels.top = tableContainer
292
- .getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP)
293
- .item(0) as HTMLElement;
294
- // Ignored via go/ees005
295
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
296
- this.sentinels.bottom = tableContainer
297
- .getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)
298
- .item(0) as HTMLElement;
299
- [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
300
- // skip if already observed for another row on this table
301
- if (el && !el.dataset.isObserved) {
302
- el.dataset.isObserved = 'true';
303
- // Ignored via go/ees005
304
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
305
- this.intersectionObserver!.observe(el);
288
+ const getSentinelTop = () =>
289
+ // Ignored via go/ees005
290
+ // eslint-disable-next-line @atlaskit/editor/no-as-casting
291
+ tableContainer
292
+ .getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP)
293
+ .item(0) as HTMLElement;
294
+ const getSentinelBottom = () => {
295
+ // Multiple bottom sentinels may be found if there are nested tables.
296
+ // We need to make sure we get the last one which will belong to the parent table.
297
+ const bottomSentinels = tableContainer.getElementsByClassName(
298
+ ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
299
+ );
300
+ // Ignored via go/ees005
301
+ // eslint-disable-next-line @atlaskit/editor/no-as-casting
302
+ return fg('platform_editor_nested_tables_bottom_sentinel')
303
+ ? // eslint-disable-next-line @atlaskit/editor/no-as-casting
304
+ (bottomSentinels.item(bottomSentinels.length - 1) as HTMLElement)
305
+ : // eslint-disable-next-line @atlaskit/editor/no-as-casting
306
+ (tableContainer
307
+ .getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)
308
+ .item(0) as HTMLElement);
309
+ };
310
+
311
+ const sentinelsInDom = () => getSentinelTop() !== null && getSentinelBottom() !== null;
312
+
313
+ const observeStickySentinels = () => {
314
+ this.sentinels.top = getSentinelTop();
315
+ this.sentinels.bottom = getSentinelBottom();
316
+ [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
317
+ // skip if already observed for another row on this table
318
+ if (el && !el.dataset.isObserved) {
319
+ el.dataset.isObserved = 'true';
320
+ // Ignored via go/ees005
321
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
322
+ this.intersectionObserver!.observe(el);
323
+ }
324
+ });
325
+ };
326
+
327
+ if (fg('platform_editor_react18_stickyheaders_fix')) {
328
+ if (sentinelsInDom()) {
329
+ // great - DOM ready, observe as normal
330
+ observeStickySentinels();
331
+ } else {
332
+ // concurrent loading issue - here TableRow is too eager trying to
333
+ // observe sentinels before they are in the DOM, use MutationObserver
334
+ // to wait for sentinels to be added to the parent Table node DOM
335
+ // then attach the IntersectionObserver
336
+ const tableContainerObserver = new MutationObserver(() => {
337
+ if (sentinelsInDom()) {
338
+ observeStickySentinels();
339
+ tableContainerObserver.disconnect();
340
+ }
341
+ });
342
+
343
+ const mutatingNode = tableContainer;
344
+ if (mutatingNode) {
345
+ tableContainerObserver.observe(mutatingNode, { subtree: true, childList: true });
346
+ }
306
347
  }
307
- });
348
+ } else {
349
+ observeStickySentinels();
350
+ }
308
351
  }
309
352
  });
310
353
  }
package/src/nodeviews/TableStickyScrollbar.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
2
2
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
5
 
5
6
  import { TableCssClassName as ClassName } from '../types';
@@ -107,11 +108,18 @@ export class TableStickyScrollbar {
107
108
  { root: this.editorScrollableElement },
108
109
  );
109
110
 
110
- // Ignored via go/ees005
111
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
112
- this.sentinels.bottom = this.wrapper?.parentElement
113
- ?.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)
114
- ?.item(0) as HTMLElement;
111
+ // Multiple bottom sentinels may be found if there are nested tables. We need to make sure we get the last one which will belong to the parent table.
112
+ const bottomSentinels = this.wrapper?.parentElement?.getElementsByClassName(
113
+ ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
114
+ );
115
+
116
+ this.sentinels.bottom = fg('platform_editor_nested_tables_bottom_sentinel')
117
+ ? // eslint-disable-next-line @atlaskit/editor/no-as-casting
118
+ (bottomSentinels?.item(bottomSentinels.length - 1) as HTMLElement)
119
+ : // eslint-disable-next-line @atlaskit/editor/no-as-casting
120
+ (this.wrapper?.parentElement
121
+ ?.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)
122
+ ?.item(0) as HTMLElement);
115
123
 
116
124
  // Ignored via go/ees005
117
125
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
package/src/nodeviews/lazy-node-views.ts CHANGED
@@ -5,6 +5,7 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
5
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
6
6
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
10
 
10
11
  import type { PluginInjectionAPI } from '../types';
@@ -26,7 +27,11 @@ type TableViewOptions = {
26
27
  };
27
28
 
28
29
  export const lazyTableView = (options: TableViewOptions) => {
29
- if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
30
+ // LNV tables are broken in concurrent mode - temporarily disable to unblock concurrent mode
31
+ if (
32
+ editorExperiment('platform_editor_exp_lazy_node_views', false) ||
33
+ fg('platform_editor_disable_table_lnv')
34
+ ) {
30
35
  return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
31
36
  return createTableView(
32
37
  node,
@@ -97,7 +102,11 @@ type TableCellViewOptions = {
97
102
  pluginInjectionApi?: PluginInjectionAPI;
98
103
  };
99
104
  export const lazyTableCellView = (options: TableCellViewOptions) => {
100
- if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
105
+ // LNV tables are broken in concurrent mode - temporarily disable to unblock concurrent mode
106
+ if (
107
+ editorExperiment('platform_editor_exp_lazy_node_views', false) ||
108
+ fg('platform_editor_disable_table_lnv')
109
+ ) {
101
110
  return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
102
111
  return new TableCell(
103
112
  node,
@@ -144,7 +153,11 @@ export const lazyTableCellView = (options: TableCellViewOptions) => {
144
153
  };
145
154
 
146
155
  export const lazyTableHeaderView = (options: TableCellViewOptions) => {
147
- if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
156
+ // LNV tables are broken in concurrent mode - temporarily disable to unblock concurrent mode
157
+ if (
158
+ editorExperiment('platform_editor_exp_lazy_node_views', false) ||
159
+ fg('platform_editor_disable_table_lnv')
160
+ ) {
148
161
  return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
149
162
  return new TableCell(
150
163
  node,
@@ -191,7 +204,11 @@ export const lazyTableHeaderView = (options: TableCellViewOptions) => {
191
204
  };
192
205
 
193
206
  export const lazyTableRowView = (options: TableCellViewOptions) => {
194
- if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
207
+ // LNV tables are broken in concurrent mode - temporarily disable to unblock concurrent mode
208
+ if (
209
+ editorExperiment('platform_editor_exp_lazy_node_views', false) ||
210
+ fg('platform_editor_disable_table_lnv')
211
+ ) {
195
212
  return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
196
213
  return new TableRow(node, view, getPos, options.eventDispatcher);
197
214
  };
package/src/pm-plugins/utils/paste.ts CHANGED
@@ -229,16 +229,17 @@ const isFragmentSingleCellTable = (fragment: Fragment, schema: Schema): boolean
229
229
  );
230
230
  };
231
231
 
232
- const containsTextBlockChildren = (fragment: Fragment, schema: Schema): boolean => {
233
- let containsTextBlock = false;
232
+ const containsNonTableBlockChildren = (fragment: Fragment, schema: Schema): boolean => {
233
+ let containsNonTableBlock = false;
234
+ const { table, tableCell, tableHeader } = schema.nodes;
234
235
 
235
236
  fragment.forEach((node) => {
236
- if (node.isTextblock) {
237
- containsTextBlock = true;
237
+ if (node.isBlock && ![table, tableCell, tableHeader].includes(node.type)) {
238
+ containsNonTableBlock = true;
238
239
  }
239
240
  });
240
241
 
241
- return containsTextBlock;
242
+ return containsNonTableBlock;
242
243
  };
243
244
 
244
245
  export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): Slice => {
@@ -248,7 +249,7 @@ export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): S
248
249
  // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
249
250
 
250
251
  // slice starts and ends inside a nested table at the same depth
251
- if (slice.openStart >= 7 && slice.openEnd >= 7 && slice.openStart === slice.openEnd) {
252
+ if (slice.openStart >= 7 && slice.openEnd >= 7) {
252
253
  let cleaned = slice;
253
254
  let descendedDepth = 0;
254
255
  const tableDepthDecrement = 2;
@@ -260,9 +261,9 @@ export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): S
260
261
  descendedDepth += tableDepthDecrement;
261
262
  } else if (node.type === schema.nodes.table) {
262
263
  return false;
263
- } else if (containsTextBlockChildren(node.content, schema)) {
264
+ } else if (containsNonTableBlockChildren(node.content, schema)) {
264
265
  descendedDepth += tableDepthDecrement;
265
- // create a new slice with the content of the textblock children and the depth of the nested tables subtracted
266
+ // create a new slice with the content of non-table block children and the depth of the nested tables subtracted
266
267
  cleaned = new Slice(
267
268
  node.content,
268
269
  slice.openStart - descendedDepth - tableDepthDecrement,
package/src/ui/common-styles.ts CHANGED
@@ -24,6 +24,7 @@ import {
24
24
  SelectionStyle,
25
25
  } from '@atlaskit/editor-shared-styles';
26
26
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
27
+ import { fg } from '@atlaskit/platform-feature-flags';
27
28
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
28
29
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
29
30
  import { token } from '@atlaskit/tokens';
@@ -195,34 +196,67 @@ const breakoutWidthStyling = () => {
195
196
  };
196
197
 
197
198
  const viewModeSortStyles = () => {
198
- return css`
199
- th {
200
- .${SORTING_ICON_CLASS_NAME} {
201
- + p {
202
- margin-top: 0 !important;
203
- }
204
- }
199
+ return fg('platform_editor_nested_tables_view_mode_sort')
200
+ ? css`
201
+ // new styles
202
+ th {
203
+ .${SORTING_ICON_CLASS_NAME} {
204
+ + p {
205
+ margin-top: 0 !important;
206
+ }
207
+ }
205
208
 
206
- &:has(.is-active) {
207
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
208
- opacity: 1;
209
- }
210
- }
209
+ &:has(.is-active) {
210
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
211
+ opacity: 1;
212
+ }
213
+ }
214
+
215
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
216
+ opacity: 0;
217
+ &:focus {
218
+ opacity: 1;
219
+ }
220
+ }
211
221
 
212
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
213
- opacity: 0;
214
- &:focus {
215
- opacity: 1;
222
+ &:hover:not(:has(.${ClassName.TABLE_CONTAINER}:hover)) {
223
+ > .${SORTING_ICON_CLASS_NAME} {
224
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
225
+ opacity: 1;
226
+ }
227
+ }
228
+ }
216
229
  }
217
- }
230
+ `
231
+ : css`
232
+ // old styles
233
+ th {
234
+ .${SORTING_ICON_CLASS_NAME} {
235
+ + p {
236
+ margin-top: 0 !important;
237
+ }
238
+ }
218
239
 
219
- &:hover {
220
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
221
- opacity: 1;
240
+ &:has(.is-active) {
241
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
242
+ opacity: 1;
243
+ }
244
+ }
245
+
246
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
247
+ opacity: 0;
248
+ &:focus {
249
+ opacity: 1;
250
+ }
251
+ }
252
+
253
+ &:hover {
254
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
255
+ opacity: 1;
256
+ }
257
+ }
222
258
  }
223
- }
224
- }
225
- `;
259
+ `;
226
260
  };
227
261
 
228
262
  const tableBorderStyles = () => {