@atlaskit/editor-plugin-table 0.2.6 → 1.0.1

package/dist/cjs/plugins/table/ui/ui-styles.js

@@ -81,17 +81,12 @@ var columnControlsLineMarker = function columnControlsLineMarker(props) {
 };
 
 exports.columnControlsLineMarker = columnControlsLineMarker;
-var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat((0, _tokens.token)('color.background.neutral', _colors.N20A), ";\n        color: ").concat((0, _tokens.token)('color.icon', _colors.N300), ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _tokens.token)('color.background.danger.bold', _colors.R300), (0, _tokens.token)('color.icon.inverse', 'white')); // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat((0, _tokens.token)('color.background.neutral', _colors.N20A), ";\n        color: ").concat((0, _tokens.token)('color.icon', _colors.N300), ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _tokens.token)('color.background.danger.bold', _colors.R300), (0, _tokens.token)('color.icon.inverse', 'white'));
 exports.DeleteButton = DeleteButton;
 
 var OverflowShadow = function OverflowShadow(props) {
-  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(\n      100% - ", "px\n    );\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom + _consts.tableToolbarSize - 2, _styles.tableMarginTop + _consts.tableToolbarSize - 1, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, _colors.N40A, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _colors.N40A, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom - 2, _styles.tableMarginTop - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom, _styles.tableMarginTop, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
 
 exports.OverflowShadow = OverflowShadow;
 

package/dist/cjs/plugins/table/utils/decoration.js

@@ -163,16 +163,21 @@ var createColumnControlsDecoration = function createColumnControlsDecoration(sel
   var cells = (0, _utils.getCellsInRow)(0)(selection) || [];
   var index = 0;
   return cells.map(function (cell) {
-    var colspan = cell.node.attrs.colspan || 1;
-    var element = document.createElement('div');
-    element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
-    element.dataset.startIndex = "".concat(index);
-    index += colspan;
-    element.dataset.endIndex = "".concat(index);
+    var colspan = cell.node.attrs.colspan || 1; // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+
+    var startIndex = index;
+    var endIndex = startIndex + colspan; // The next cell start index will commence from the current cell end index.
+
+    index = endIndex;
     return _prosemirrorView.Decoration.widget(cell.pos + 1, function () {
+      var element = document.createElement('div');
+      element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = "".concat(startIndex);
+      element.dataset.endIndex = "".concat(endIndex);
       return element;
     }, {
-      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(index),
+      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
       // this decoration should be the first one, even before gap cursor.
       side: -100
     });
@@ -288,12 +293,14 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
   }
 
   var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
-    var element = document.createElement('div');
-    element.classList.add(_types.TableCssClassName.RESIZE_HANDLE_DECORATION);
-    element.dataset.startIndex = "".concat(cellColumnPositioning.left);
-    element.dataset.endIndex = "".concat(cellColumnPositioning.right);
     var position = cellPos + cellNode.nodeSize - 1;
-    return _prosemirrorView.Decoration.widget(position, element, {
+    return _prosemirrorView.Decoration.widget(position, function () {
+      var element = document.createElement('div');
+      element.classList.add(_types.TableCssClassName.RESIZE_HANDLE_DECORATION);
+      element.dataset.startIndex = "".concat(cellColumnPositioning.left);
+      element.dataset.endIndex = "".concat(cellColumnPositioning.right);
+      return element;
+    }, {
       key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
     });
   };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.2.6",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/commands/index.js

@@ -4,4 +4,5 @@ export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRo
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations } from './misc';
 export { sortByColumn } from './sort';
-export { goToNextCell } from './go-to-next-cell';
+export { goToNextCell } from './go-to-next-cell';
+export { removeDescendantNodes } from './referentiality';

package/dist/es2019/plugins/table/commands/referentiality.js

@@ -0,0 +1,10 @@
+import { createCommand } from '../pm-plugins/plugin-factory';
+import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
+export const removeDescendantNodes = sourceNode => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    element: undefined
+  }
+}, (tr, state) => {
+  return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
+});

package/dist/es2019/plugins/table/event-handlers.js

@@ -18,6 +18,8 @@ const isFocusingCalendar = event => event instanceof FocusEvent && event.related
 
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
 
+const isFocusingFloatingToolbar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
+
 export const handleBlur = (view, event) => {
   const {
     state,
@@ -25,7 +27,7 @@ export const handleBlur = (view, event) => {
   } = view; // IE version check for ED-4665
   // Calendar focus check for ED-10466
 
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
     setEditorFocus(false)(state, dispatch);
   }
 

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -164,7 +164,19 @@ export default class TableView extends ReactNodeView {
     return super.viewShouldUpdate(nextNode);
   }
 
-  ignoreMutation() {
+  ignoreMutation(mutation) {
+    const {
+      type,
+      target: {
+        nodeName,
+        firstChild
+      }
+    } = mutation;
+
+    if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
+      return false;
+    }
+
     return true;
   }
 

package/dist/es2019/plugins/table/nodeviews/tableCell.js

@@ -63,7 +63,11 @@ export default class TableCellNodeView {
 
   update(node) {
     const didUpdate = this.updateNodeView(node);
-    this.node = node;
+
+    if (didUpdate) {
+      this.node = node;
+    }
+
     return didUpdate;
   }
 

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -38,6 +38,7 @@ export const createPlugin = () => {
         }
 
         if (tr.docChanged || tr.selectionSet) {
+          pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState);
         }
 

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -1,6 +1,5 @@
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { DecorationSet } from 'prosemirror-view';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
 import { composeDecorations } from './compose-decorations';
@@ -61,7 +60,7 @@ export const buildColumnControlsDecorations = ({
   tr
 }) => {
   return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
-    decorationSet: DecorationSet.empty,
+    decorationSet,
     tr
   });
 };

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -138,14 +138,6 @@ export class TableRowNodeView {
 
       if (!tree) {
         return;
-      } // make it non-sticky initially to avoid making it look separated
-
-
-      if (!this.isTableInit) {
-        if (this.tree) {
-          this.makeRowHeaderNotSticky(this.tree.table);
-          this.isTableInit = true;
-        }
       } // when header rows are toggled off - mark sentinels as unobserved
 
 
@@ -157,7 +149,11 @@ export class TableRowNodeView {
         });
       }
 
-      const isCurrentTableSelected = tableRef === tree.table;
+      const isCurrentTableSelected = tableRef === tree.table; // If current table selected and header row is toggled off, turn off sticky header
+
+      if (isCurrentTableSelected && !state.isHeaderRowEnabled && this.tree) {
+        this.makeRowHeaderNotSticky(this.tree.table);
+      }
 
       if (isCurrentTableSelected !== this.focused) {
         focusChanged = true;
@@ -236,6 +232,8 @@ export class TableRowNodeView {
     });
 
     _defineProperty(this, "makeHeaderRowSticky", tree => {
+      var _tbody$firstChild;
+
       // If header row height is more than 50% of viewport height don't do this
       if (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
@@ -243,7 +241,15 @@ export class TableRowNodeView {
 
       const {
         table
-      } = tree;
+      } = tree; // ED-16035 Make sure sticky header is only applied to first row
+
+      const tbody = this.dom.parentElement;
+      const isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(this.dom);
+
+      if (!isFirstHeader) {
+        return;
+      }
+
       const currentTableTop = this.getCurrentTableTop(tree);
       const domTop = currentTableTop > 0 ? this.topPosEditorElement : this.topPosEditorElement + currentTableTop;
 
@@ -335,7 +341,6 @@ export class TableRowNodeView {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
-    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');

package/dist/es2019/plugins/table/toolbar.js

@@ -3,13 +3,13 @@ import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
-import { clearHoverSelection, hoverTable, hoverColumns, hoverRows } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes } from './commands';
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
-import { isReferencedSource } from './utils/referentiality';
+import { isReferencedSource, getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { canMergeCells } from './transforms';
@@ -83,6 +83,7 @@ export const getToolbarMenuConfig = (config, state, {
   return {
     id: 'editor.table.tableOptions',
     type: 'dropdown',
+    testId: 'table_options',
     title: formatMessage(messages.tableOptions),
     hidden: options.every(option => option.hidden),
     options
@@ -158,16 +159,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
 
       return true;
     },
-    onMouseOver: (state, dispatch) => {
-      const selectionRect = getClosestSelectionRect(state);
-
-      if (selectionRect) {
-        hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
-        return true;
-      }
-
-      return false;
-    },
+    onFocus: highlightColumnsHandler,
+    onBlur: clearHoverSelection(),
+    onMouseOver: highlightColumnsHandler,
     onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
@@ -185,16 +179,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
 
       return true;
     },
-    onMouseOver: (state, dispatch) => {
-      const selectionRect = getClosestSelectionRect(state);
-
-      if (selectionRect) {
-        hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
-        return true;
-      }
-
-      return false;
-    },
+    onFocus: highlightRowsHandler,
+    onBlur: clearHoverSelection(),
+    onMouseOver: highlightRowsHandler,
     onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
@@ -283,6 +270,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
   });
   return {
     id: 'editor.table.cellOptions',
+    testId: 'cell_options',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
     options,
@@ -312,13 +300,20 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
     let confirmDialog;
-    const localId = tableObject.node.attrs.localId;
 
-    if (localId && isReferencedSource(state, localId)) {
-      confirmDialog = {
+    if (isReferencedSource(state, tableObject.node)) {
+      confirmDialog = () => ({
+        title: intl.formatMessage(tableMessages.deleteElementTitle),
         okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
-        message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
-      };
+        message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage, {
+          nodeName: getNodeName(state, tableObject.node)
+        }),
+        messagePrefix: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessagePrefix),
+        isReferentialityDialog: true,
+        getChildrenInfo: () => getChildrenInfo(state, tableObject.node),
+        checkboxLabel: intl.formatMessage(tableMessages.confirmModalCheckboxLabel),
+        onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, tableObject.node)
+      });
     }
 
     const getDomRef = editorView => {
@@ -354,7 +349,9 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
           formatMessage: intl.formatMessage,
           nodeType,
           onMouseEnter: hoverTable(false, true),
-          onMouseLeave: clearHoverSelection()
+          onMouseLeave: clearHoverSelection(),
+          onFocus: hoverTable(false, true),
+          onBlur: clearHoverSelection()
         }, {
           type: 'separator'
         }]
@@ -366,8 +363,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
         onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
         disabled: !!resizeState && !!resizeState.dragging,
         onMouseEnter: hoverTable(true),
+        onFocus: hoverTable(true),
+        onBlur: clearHoverSelection(),
         onMouseLeave: clearHoverSelection(),
         title: intl.formatMessage(commonMessages.remove),
+        focusEditoronEnter: true,
         confirmDialog
       }],
       scrollable: true
@@ -423,7 +423,7 @@ const getColorPicker = (state, menu, {
     border: DEFAULT_BORDER_COLOR
   };
   return [{
-    id: 'editor.panel.colorPicker',
+    id: 'editor.table.colorPicker',
     title: formatMessage(ContextualMenuMessages.cellBackground),
     type: 'select',
     selectType: 'color',
@@ -431,4 +431,40 @@ const getColorPicker = (state, menu, {
     options: cellBackgroundColorPalette,
     onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
   }, separator(menu.hidden)];
+};
+
+const clickWithCheckboxHandler = (isChecked, node, editorAnalyticsAPI) => (state, dispatch) => {
+  if (!node) {
+    return false;
+  }
+
+  if (!isChecked) {
+    return deleteTableWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  } else {
+    removeDescendantNodes(node)(state, dispatch);
+  }
+
+  return true;
+};
+
+const highlightRowsHandler = (state, dispatch) => {
+  const selectionRect = getClosestSelectionRect(state);
+
+  if (selectionRect) {
+    hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
+    return true;
+  }
+
+  return false;
+};
+
+const highlightColumnsHandler = (state, dispatch) => {
+  const selectionRect = getClosestSelectionRect(state);
+
+  if (selectionRect) {
+    hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
+    return true;
+  }
+
+  return false;
 };

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -47,10 +47,17 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
       margin-bottom: ${columnControlsDecorationHeight}px;
     }
   }
-}`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+}`; // previous styles to add spacing to numbered lists with
+// large item markers (e.g. 101, 102, ...) when nested inside tables
+
+const listLargeNumericMarkersOldStyles = `
+  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
+    padding-left: revert;
+  }
+`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 
 export const tableStyles = props => {
-  var _props$featureFlags;
+  var _props$featureFlags, _props$featureFlags2;
 
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
@@ -625,9 +632,12 @@ export const tableStyles = props => {
     cursor: col-resize;
   }
 
-  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
-    padding-left: revert;
-  }
+  /* 
+  ED-15882: When custom start numbers is enabled for lists, we have
+  styles that handle this generally (in editor-common) so we can
+  throw away the older table-specific styles here.
+  */
+  ${props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
 `;
 };
 export const tableFullPageEditorStyles = css`

package/dist/es2019/plugins/table/ui/messages.js

@@ -27,12 +27,27 @@ export default defineMessages({
   },
   confirmDeleteLinkedModalOKButton: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
-    defaultMessage: 'Remove table and data',
+    defaultMessage: 'Delete',
     description: 'Action button label for confirm modal when deleting a table linked to an extension.'
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this table will break all the charts connected to it.',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
     description: 'Message for confirm modal when deleting a table linked to an extension.'
+  },
+  confirmDeleteLinkedModalMessagePrefix: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix',
+    defaultMessage: 'Deleting',
+    description: 'prefix for confirmation dialog text'
+  },
+  confirmModalCheckboxLabel: {
+    id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
+    defaultMessage: 'Also delete connected elements',
+    description: 'checkbox label text'
+  },
+  deleteElementTitle: {
+    id: 'fabric.editor.extension.deleteElementTitle',
+    defaultMessage: 'Delete element',
+    description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
   }
 });

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -186,24 +186,28 @@ export const DeleteButton = css`
     color: ${token('color.icon.inverse', 'white')};
     cursor: pointer;
   }
-`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+`;
 export const OverflowShadow = props => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(
-      100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px
-    );
+    height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
     position: absolute;
     pointer-events: none;
-    top: ${tableMarginTop + tableToolbarSize - 1}px;
+    top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
     width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
+    background: linear-gradient(
+        to left,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to right,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: 0px;
   }
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
@@ -211,23 +215,27 @@ export const OverflowShadow = props => css`
   }
   .${ClassName.TABLE_RIGHT_SHADOW} {
     background: linear-gradient(
-      to right,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+        to right,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to left,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: calc(100% + 2px);
   }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-      top: ${tableMarginTop - 1}px;
+      height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
+      top: ${tableMarginTop}px;
     }
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
     }
   }
 `;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const columnHeaderButton = (props, cssString) => css`
   background: ${tableToolbarColor(props)};

package/dist/es2019/plugins/table/utils/decoration.js

@@ -110,14 +110,21 @@ export const createColumnControlsDecoration = selection => {
   const cells = getCellsInRow(0)(selection) || [];
   let index = 0;
   return cells.map(cell => {
-    const colspan = cell.node.attrs.colspan || 1;
-    const element = document.createElement('div');
-    element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
-    element.dataset.startIndex = `${index}`;
-    index += colspan;
-    element.dataset.endIndex = `${index}`;
-    return Decoration.widget(cell.pos + 1, () => element, {
-      key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${index}`,
+    const colspan = cell.node.attrs.colspan || 1; // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+
+    const startIndex = index;
+    const endIndex = startIndex + colspan; // The next cell start index will commence from the current cell end index.
+
+    index = endIndex;
+    return Decoration.widget(cell.pos + 1, () => {
+      const element = document.createElement('div');
+      element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = `${startIndex}`;
+      element.dataset.endIndex = `${endIndex}`;
+      return element;
+    }, {
+      key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
       // this decoration should be the first one, even before gap cursor.
       side: -100
     });
@@ -226,12 +233,14 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
   }
 
   const createResizerHandleDecoration = (cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) => {
-    const element = document.createElement('div');
-    element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-    element.dataset.startIndex = `${cellColumnPositioning.left}`;
-    element.dataset.endIndex = `${cellColumnPositioning.right}`;
     const position = cellPos + cellNode.nodeSize - 1;
-    return Decoration.widget(position, element, {
+    return Decoration.widget(position, () => {
+      const element = document.createElement('div');
+      element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+      element.dataset.startIndex = `${cellColumnPositioning.left}`;
+      element.dataset.endIndex = `${cellColumnPositioning.right}`;
+      return element;
+    }, {
       key: `${TableDecorations.COLUMN_RESIZING_HANDLE}_${rowIndex}_${columnIndex}`
     });
   };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.2.6",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/commands/index.js

@@ -4,4 +4,5 @@ export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRo
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations } from './misc';
 export { sortByColumn } from './sort';
-export { goToNextCell } from './go-to-next-cell';
+export { goToNextCell } from './go-to-next-cell';
+export { removeDescendantNodes } from './referentiality';

package/dist/esm/plugins/table/commands/referentiality.js

@@ -0,0 +1,12 @@
+import { createCommand } from '../pm-plugins/plugin-factory';
+import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
+export var removeDescendantNodes = function removeDescendantNodes(sourceNode) {
+  return createCommand({
+    type: 'UPDATE_STATE',
+    data: {
+      element: undefined
+    }
+  }, function (tr, state) {
+    return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
+  });
+};