@atlaskit/editor-plugin-table 0.0.9 → 0.1.0

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

@@ -6,7 +6,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
@@ -125,7 +125,25 @@ const tablesPlugin = options => {
         plugin: () => tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI)
       }, {
         name: 'tableEditing',
-        plugin: () => tableEditing()
+        plugin: () => tableEditing({
+          reportFixedTable: ({
+            state,
+            tr,
+            reason
+          }) => {
+            var _options$editorAnalyt;
+
+            options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+              action: TABLE_ACTION.FIXED,
+              actionSubject: ACTION_SUBJECT.TABLE,
+              actionSubjectId: null,
+              attributes: {
+                reason
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+          }
+        })
       }, {
         name: 'tableStickyHeaders',
         plugin: ({
@@ -313,12 +331,12 @@ const tablesPlugin = options => {
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
 
         action(insert, state) {
-          var _options$editorAnalyt;
+          var _options$editorAnalyt2;
 
           const tr = insert(createTable({
             schema: state.schema
           }));
-          options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+          options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -331,7 +349,7 @@ const tablesPlugin = options => {
         }
 
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/es2019/plugins/table/pm-plugins/keymap.js

@@ -2,7 +2,7 @@ import { keymap } from 'prosemirror-keymap';
 import { chainCommands } from 'prosemirror-commands';
 import * as keymaps from '@atlaskit/editor-common/keymaps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { triggerUnlessTableHeader, createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, emptyMultipleCellsWithAnalytics, deleteTableIfSelectedWithAnalytics } from '../commands-with-analytics';
 import { addColumnAfter, addColumnBefore } from '../commands/insert';
 import { withEditorAnalyticsAPI } from '../utils/analytics';

package/dist/es2019/plugins/table/pm-plugins/table-local-id.js

@@ -10,12 +10,10 @@
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-// import { Dispatch } from '../../../event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
-import { uuid } from '@atlaskit/adf-schema'; // import { stepAddsOneOf } from '../../../utils/step';
-
+import { uuid } from '@atlaskit/adf-schema';
 import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 const pluginKey = new PluginKey('tableLocalIdPlugin');
 

package/dist/es2019/plugins/table/pm-plugins/table-resizing/index.js

@@ -1,3 +1,4 @@
 export { createPlugin } from './plugin';
 export { scaleTable } from './commands';
-export { pluginKey } from './plugin-key';
+export { pluginKey } from './plugin-key';
+export { getPluginState } from './plugin-factory';

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

@@ -1,11 +1,14 @@
+/** @jsx jsx */
+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 } from './commands';
-import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+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 } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -15,6 +18,11 @@ import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { closestElement } from '@atlaskit/editor-common/utils';
+import { addColumnAfter, addRowAfter, tooltip, backspace } from '@atlaskit/editor-common/keymaps';
+import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',
@@ -85,6 +93,8 @@ export const getToolbarMenuConfig = (config, state, {
 export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   formatMessage
 }, getEditorContainerWidth, editorAnalyticsAPI) => {
+  var _pluginState$pluginCo, _pluginState$pluginCo2;
+
   const {
     top,
     bottom,
@@ -93,6 +103,7 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   } = initialSelectionRect;
   const numberOfColumns = right - left;
   const numberOfRows = bottom - top;
+  const pluginState = getPluginState(editorState);
   const options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
@@ -107,7 +118,10 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addColumnAfter))
   }, {
     id: 'editor.table.insertRow',
     title: formatMessage(tableMessages.insertRow),
@@ -125,7 +139,10 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addRowAfter))
   }, {
     id: 'editor.table.removeColumns',
     title: formatMessage(tableMessages.removeColumns, {
@@ -161,16 +178,63 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   }, {
     id: 'editor.table.mergeCells',
     title: formatMessage(ContextualMenuMessages.mergeCells),
-    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
+    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !canMergeCells(editorState.tr)
   }, {
     id: 'editor.table.splitCell',
     title: formatMessage(ContextualMenuMessages.splitCell),
-    onClick: splitCellWithAnalytics(editorAnalyticsAPI),
+    onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !splitCell(editorState)
-  }, {
+  }];
+
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
+    const distributeColumnWidths = (state, dispatch, view) => {
+      const newResizeStateWithAnalytics = view ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+
+      if (newResizeStateWithAnalytics) {
+        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    };
+
+    options.push({
+      id: 'editor.table.distributeColumns',
+      title: formatMessage(ContextualMenuMessages.distributeColumns),
+      onClick: distributeColumnWidths,
+      selected: false,
+      disabled: numberOfColumns <= 1
+    });
+  }
+
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
+    const hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
+    options.push({
+      id: 'editor.table.sortColumnAsc',
+      title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onClick: (state, dispatch) => {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+    options.push({
+      id: 'editor.table.sortColumnDesc',
+      title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onClick: (state, dispatch) => {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+  }
+
+  options.push({
     id: 'editor.table.clearCells',
     title: formatMessage(ContextualMenuMessages.clearCells, {
       0: Math.max(numberOfColumns, numberOfRows)
@@ -183,14 +247,19 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       return true;
     },
     selected: false,
-    disabled: false
-  }];
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(backspace))
+  });
   return {
     id: 'editor.table.cellOptions',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
-    hidden: true,
-    options
+    options,
+    // Increased dropdown item width to prevent labels from being truncated
+    dropdownWidth: 230,
+    showSelected: false
   };
 };
 
@@ -199,7 +268,7 @@ const getClosestSelectionRect = state => {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
 
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -207,7 +276,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) =>
   if (tableObject && pluginState.editorHasFocus) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-    const cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
+    const {
+      tableCellOptionsInFloatingToolbar
+    } = getEditorFeatureFlags() || {};
+    const cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+    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;
@@ -240,9 +313,20 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) =>
       getDomRef,
       nodeType,
       offset: [0, 3],
-      items: [menu, separator(menu.hidden), ...cellItems, {
+      items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {
         type: 'extensions-placeholder',
         separator: 'end'
+      }, {
+        type: 'copy-button',
+        items: [{
+          state,
+          formatMessage: intl.formatMessage,
+          nodeType,
+          onMouseEnter: hoverTable(false, true),
+          onMouseLeave: clearHoverSelection()
+        }, {
+          type: 'separator'
+        }]
       }, {
         id: 'editor.table.delete',
         type: 'button',
@@ -254,7 +338,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) =>
         onMouseLeave: clearHoverSelection(),
         title: intl.formatMessage(commonMessages.remove),
         confirmDialog
-      }]
+      }],
+      scrollable: true
     };
   }
 
@@ -270,8 +355,8 @@ const separator = hidden => {
 
 const getCellItems = (pluginConfig, state, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI) => {
-  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+}, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
+  if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     const initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
@@ -283,4 +368,36 @@ const getCellItems = (pluginConfig, state, {
   }
 
   return [];
+};
+
+const getColorPicker = (state, menu, {
+  formatMessage
+}, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
+  var _node$attrs;
+
+  const {
+    targetCellPosition,
+    pluginConfig
+  } = getPluginState(state);
+
+  if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
+    return [];
+  }
+
+  const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
+  const currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
+  const defaultPalette = cellBackgroundColorPalette.find(item => item.value === currentBackground) || {
+    label: 'Custom',
+    value: currentBackground,
+    border: DEFAULT_BORDER_COLOR
+  };
+  return [{
+    id: 'editor.panel.colorPicker',
+    title: formatMessage(ContextualMenuMessages.cellBackground),
+    type: 'select',
+    selectType: 'color',
+    defaultValue: defaultPalette,
+    options: cellBackgroundColorPalette,
+    onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
+  }, separator(menu.hidden)];
 };

package/dist/es2019/plugins/table/transforms/fix-tables.js

@@ -1,8 +1,6 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles'; // import { sendLogs } from '../../../utils/sendLogs';
-// import { sendLogs } from '@atlaskit/editor-core/src/utils/sendLogs';
-
-import { sendLogs } from '../todo-stubs';
+import { akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { sendLogs } from '@atlaskit/editor-common/utils';
 import { calculateColumnWidth, contentWidth, getCellsRefsInColumn, getLayoutSize } from '../pm-plugins/table-resizing/utils';
 export const fireAnalytics = (properties = {}) => sendLogs({
   events: [{

package/dist/es2019/plugins/table/ui/FloatingContextualButton/index.js

@@ -125,8 +125,7 @@ export class FloatingContextualButtonInner extends React.Component {
 
   shouldComponentUpdate(nextProps) {
     return this.props.tableNode !== nextProps.tableNode || this.props.targetCellPosition !== nextProps.targetCellPosition || this.props.layout !== nextProps.layout || this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen || this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || this.props.stickyHeader !== nextProps.stickyHeader;
-  } // TODO: restore
-
+  }
 
 }
 

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -281,12 +281,12 @@ export class ContextualMenu extends Component {
           break;
 
         case 'merge':
-          mergeCellsWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+          mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
           this.toggleOpen();
           break;
 
         case 'split':
-          splitCellWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+          splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
           this.toggleOpen();
           break;
 
@@ -434,10 +434,8 @@ export class ContextualMenu extends Component {
       const {
         state,
         dispatch
-      } = editorView; // setColorWithAnalytics(color, targetCellPosition)(state, dispatch);
-      // TODO: restore
-
-      setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
+      } = editorView;
+      setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
       this.toggleOpen();
     });
   }

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl-next'; // import { MessageDescriptor } from '../../../../types/i18n';
-
+import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 const DeleteButton = ({
@@ -19,7 +18,7 @@ const DeleteButton = ({
   onMouseLeave: onMouseLeave
 }, /*#__PURE__*/React.createElement("button", {
   type: "button",
-  title: formatMessage(removeLabel, {
+  "aria-label": formatMessage(removeLabel, {
     0: 1
   }),
   className: ClassName.CONTROLS_DELETE_BUTTON,

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/index.js

@@ -5,8 +5,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getSelectionRect, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { createPortal } from 'react-dom';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles'; // import { closestElement } from '../../../../utils/dom';
-
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';

package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -6,8 +6,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { injectIntl } from 'react-intl-next';
-import { Popup } from '@atlaskit/editor-common/ui'; // import { closestElement } from '../../../../utils/dom';
-
+import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';

package/dist/es2019/plugins/table/ui/LayoutButton/index.js

@@ -98,8 +98,7 @@ class LayoutButton extends React.Component {
   }
 
   renderSticky(button, targetRef, tableRef) {
-    // const title = this.getTitle();
-    const title = 'TODO MISSING TITLE';
+    const title = this.getTitle();
 
     if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
       return null;
@@ -128,10 +127,9 @@ class LayoutButton extends React.Component {
 
     if (!targetRef) {
       return null;
-    } // const title = this.getTitle();
-
+    }
 
-    const title = 'TODO MISSING TITLE';
+    const title = this.getTitle();
     return /*#__PURE__*/React.createElement(Popup, {
       ariaLabel: title,
       target: targetRef,

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -84,7 +84,8 @@ class CornerControlComponent extends Component {
       }),
       style: {
         top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
-      }
+      },
+      contentEditable: false
     }, /*#__PURE__*/React.createElement("button", {
       "aria-label": formatMessage(messages.cornerControl),
       type: "button",

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

@@ -2,7 +2,6 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { findTable, getCellsInColumn, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
-// import { maphElem } from '@atlaskit/editor-core/src/utils/dom';
 import { maphElem } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';

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

@@ -1,7 +1,6 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { Decoration } from 'prosemirror-view';
-// import { nonNullable } from '@atlaskit/editor-core/src/utils';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 
@@ -14,40 +13,76 @@ export const createCellHoverDecoration = (cells, type) => cells.map(cell => Deco
 }, {
   key: TableDecorations.CELL_CONTROLS_HOVER
 }));
-export const createControlsHoverDecoration = (cells, type, danger, selected) => cells.map(cell => {
-  const classes = [ClassName.HOVERED_CELL];
+export const createControlsHoverDecoration = (cells, type, tr, danger, selected) => {
+  const table = findTable(tr.selection);
 
-  if (danger) {
-    classes.push(ClassName.HOVERED_CELL_IN_DANGER);
+  if (!table) {
+    return [];
   }
 
-  if (selected) {
-    classes.push(ClassName.SELECTED_CELL);
-  }
+  const map = TableMap.get(table.node);
+  const [min, max] = cells.reduce(([min, max], cell) => {
+    if (min === null || cell.pos < min) {
+      min = cell.pos;
+    }
 
-  classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
-  let key;
+    if (max === null || cell.pos > max) {
+      max = cell.pos;
+    }
+
+    return [min, max];
+  }, [null, null]);
 
-  switch (type) {
-    case 'row':
-      key = TableDecorations.ROW_CONTROLS_HOVER;
-      break;
+  if (min === null || max === null) {
+    return [];
+  }
 
-    case 'column':
-      key = TableDecorations.COLUMN_CONTROLS_HOVER;
-      break;
+  let updatedCells = cells.map(x => x.pos); // ED-15246 fixed trello card table overflow issue
+  // If columns / rows have been merged the hovered selection is different to the actual selection
+  // So If the table cells are in danger we want to create a "rectangle" selection
+  // to match the "clicked" selection
 
-    default:
-      key = TableDecorations.TABLE_CONTROLS_HOVER;
-      break;
+  if (danger) {
+    const rect = map.rectBetween(min - table.start, max - table.start);
+    updatedCells = map.cellsInRect(rect).map(x => x + table.start);
   }
 
-  return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
-    class: classes.join(' ')
-  }, {
-    key
+  return updatedCells.map(pos => {
+    const cell = tr.doc.nodeAt(pos);
+    const classes = [ClassName.HOVERED_CELL];
+
+    if (danger) {
+      classes.push(ClassName.HOVERED_CELL_IN_DANGER);
+    }
+
+    if (selected) {
+      classes.push(ClassName.SELECTED_CELL);
+    }
+
+    classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
+    let key;
+
+    switch (type) {
+      case 'row':
+        key = TableDecorations.ROW_CONTROLS_HOVER;
+        break;
+
+      case 'column':
+        key = TableDecorations.COLUMN_CONTROLS_HOVER;
+        break;
+
+      default:
+        key = TableDecorations.TABLE_CONTROLS_HOVER;
+        break;
+    }
+
+    return Decoration.node(pos, pos + cell.nodeSize, {
+      class: classes.join(' ')
+    }, {
+      key
+    });
   });
-});
+};
 export const createColumnSelectedDecoration = tr => {
   const {
     selection,

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

@@ -1,5 +1,3 @@
-// import { containsClassName } from '@atlaskit/editor-core/src/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 import { closestElement, containsClassName } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { tableToolbarSize } from '../ui/consts';

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

@@ -1,6 +1,5 @@
 import { Fragment, Slice } from 'prosemirror-model';
-import { flatten } from 'prosemirror-utils'; // import { flatmap, mapSlice } from '@atlaskit/editor-core/src/utils/slice';
-
+import { flatten } from 'prosemirror-utils';
 import { flatmap, mapSlice } from '@atlaskit/editor-common/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory'; // lifts up the content of each cell, returning an array of nodes
 

package/dist/es2019/plugins/table/utils/row-controls.js

@@ -1,8 +1,7 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { safeInsert } from 'prosemirror-utils';
-import { findTable, getSelectionRect, isRowSelected, isTableSelected } from '@atlaskit/editor-tables/utils'; // import { parsePx } from '@atlaskit/editor-core/src/utils/dom';
-
+import { findTable, getSelectionRect, isRowSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { parsePx } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.9"
+	"version": "0.1.0"
 }