@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

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

@@ -5,10 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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 var fireAnalytics = function fireAnalytics() {
   var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

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

@@ -148,8 +148,7 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
     key: "shouldComponentUpdate",
     value: function 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
-
+    }
   }]);
 
   return FloatingContextualButtonInner;

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

@@ -293,14 +293,14 @@ export var ContextualMenu = /*#__PURE__*/function (_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();
 
@@ -447,10 +447,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           targetCellPosition = _getPluginState4.targetCellPosition;
 
       var state = editorView.state,
-          dispatch = editorView.dispatch; // setColorWithAnalytics(color, targetCellPosition)(state, dispatch);
-      // TODO: restore
-
-      setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
+          dispatch = editorView.dispatch;
+      setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
 
       _this.toggleOpen();
     });

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

@@ -20,8 +20,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';
@@ -122,7 +121,8 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
       return clearHoverSelection()(state, dispatch);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+      event.preventDefault();
       var editorAnalyticsAPI = _this.props.editorAnalyticsAPI;
       var _this$props$editorVie3 = _this.props.editorView,
           state = _this$props$editorVie3.state,

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

@@ -17,8 +17,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/esm/plugins/table/ui/LayoutButton/index.js

@@ -127,8 +127,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSticky",
     value: function renderSticky(button, targetRef, tableRef) {
-      // const title = this.getTitle();
-      var title = 'TODO MISSING TITLE';
+      var title = this.getTitle();
 
       if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
         return null;
@@ -157,10 +156,9 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
 
       if (!targetRef) {
         return null;
-      } // const title = this.getTitle();
-
+      }
 
-      var title = 'TODO MISSING TITLE';
+      var title = this.getTitle();
       return /*#__PURE__*/React.createElement(Popup, {
         ariaLabel: title,
         target: targetRef,

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

@@ -102,7 +102,8 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         }),
         style: {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
-        }
+        },
+        contentEditable: false
       }, /*#__PURE__*/React.createElement("button", {
         "aria-label": formatMessage(messages.cornerControl),
         type: "button",

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

@@ -3,7 +3,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/esm/plugins/table/utils/decoration.js

@@ -1,7 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
 
@@ -26,8 +26,54 @@ export var createCellHoverDecoration = function createCellHoverDecoration(cells,
     });
   });
 };
-export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger, selected) {
-  return cells.map(function (cell) {
+export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
+  var table = findTable(tr.selection);
+
+  if (!table) {
+    return [];
+  }
+
+  var map = TableMap.get(table.node);
+
+  var _cells$reduce = cells.reduce(function (_ref, cell) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        min = _ref2[0],
+        max = _ref2[1];
+
+    if (min === null || cell.pos < min) {
+      min = cell.pos;
+    }
+
+    if (max === null || cell.pos > max) {
+      max = cell.pos;
+    }
+
+    return [min, max];
+  }, [null, null]),
+      _cells$reduce2 = _slicedToArray(_cells$reduce, 2),
+      min = _cells$reduce2[0],
+      max = _cells$reduce2[1];
+
+  if (min === null || max === null) {
+    return [];
+  }
+
+  var updatedCells = cells.map(function (x) {
+    return 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
+
+  if (danger) {
+    var rect = map.rectBetween(min - table.start, max - table.start);
+    updatedCells = map.cellsInRect(rect).map(function (x) {
+      return x + table.start;
+    });
+  }
+
+  return updatedCells.map(function (pos) {
+    var cell = tr.doc.nodeAt(pos);
     var classes = [ClassName.HOVERED_CELL];
 
     if (danger) {
@@ -55,7 +101,7 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
         break;
     }
 
-    return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+    return Decoration.node(pos, pos + cell.nodeSize, {
       class: classes.join(' ')
     }, {
       key: key

package/dist/esm/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/esm/plugins/table/utils/paste.js

@@ -1,7 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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/esm/plugins/table/utils/row-controls.js

@@ -7,8 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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/esm/version.json

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

package/dist/types/plugins/table/commands-with-analytics.d.ts

@@ -7,9 +7,9 @@ import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB, targetCellPosition?: number | undefined) => Command;
-export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => Command;
-export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
-export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (cellColor: string, targetCellPosition?: number | undefined) => Command;
+export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
+export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
+export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB, cellColor: string, targetCellPosition?: number | undefined) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
 export declare const insertColumnWithAnalytics: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB, position: number) => Command;
@@ -21,6 +21,6 @@ export declare const toggleHeaderRowWithAnalytics: (editorAnalyticsAPI: EditorAn
 export declare const toggleHeaderColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const toggleNumberColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const toggleTableLayoutWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
-export declare const sortColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU, columnIndex: number, sortOrder: SortOrder) => Command;
-export declare const distributeColumnsWidthsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU, { resizeState, table, attributes }: ResizeStateWithAnalytics) => Command;
+export declare const sortColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB, columnIndex: number, sortOrder: SortOrder) => Command;
+export declare const distributeColumnsWidthsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB, { resizeState, table, attributes }: ResizeStateWithAnalytics) => Command;
 export declare const wrapTableInExpandWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;

package/dist/types/plugins/table/pm-plugins/table-resizing/index.d.ts

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

package/dist/types/plugins/table/toolbar.d.ts

@@ -1,4 +1,4 @@
-import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ToolbarMenuConfig, ToolbarMenuState, ToolbarMenuContext, PluginConfig } from './types';
 import { EditorState } from 'prosemirror-state';
@@ -33,4 +33,4 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
-export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags) => (config: PluginConfig) => FloatingToolbarHandler;

package/dist/types/plugins/table/transforms/fix-tables.d.ts

@@ -2,7 +2,7 @@ import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { ReportInvalidNodeAttrs } from '../types';
-export declare const fireAnalytics: (properties?: {}) => void;
+export declare const fireAnalytics: (properties?: {}) => Promise<Response>;
 export declare const removeExtraneousColumnWidths: (node: PMNode, basePos: number, tr: Transaction, reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs | undefined) => boolean;
 export declare const fixTables: (tr: Transaction, reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs | undefined) => Transaction | undefined;
 export declare const fixAutoSizedTable: (view: EditorView, tableNode: PMNode, tableRef: HTMLTableElement, tablePos: number, opts: {

package/dist/types/plugins/table/utils/decoration.d.ts

@@ -5,7 +5,7 @@ import { Cell, CellColumnPositioning, TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[], type: 'warning') => Decoration[];
-export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', danger?: boolean | undefined, selected?: boolean | undefined) => Decoration[];
+export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean | undefined, selected?: boolean | undefined) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/examples/99-testing.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import { customInsertMenuItems } from '@atlaskit/editor-test-helpers/mock-insert-menu';
 import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';
@@ -52,28 +53,30 @@ const editorSelectionAPI = {
     // IT IS DANGEROUS AND YOU WILL BREAK SOMETHING
     return (state as any)['selection$'];
   },
-  setSelectionRelativeToNode: ({
-    selectionRelativeToNode,
-    selection,
-  }: {
-    selectionRelativeToNode?: RelativeSelectionPos;
-    selection?: Selection | null;
-  }) => (state: EditorState) => {
-    const tr = state.tr;
-
-    // THE CODE BELOW IS REALLY WRONG
-    // DO NOT EVEN THINK TO USE THIS ANYWHERE ELSE
-    tr.setMeta('selection$', {
-      type: 'SET_RELATIVE_SELECTION',
+  setSelectionRelativeToNode:
+    ({
       selectionRelativeToNode,
-    });
+      selection,
+    }: {
+      selectionRelativeToNode?: RelativeSelectionPos;
+      selection?: Selection | null;
+    }) =>
+    (state: EditorState) => {
+      const tr = state.tr;
+
+      // THE CODE BELOW IS REALLY WRONG
+      // DO NOT EVEN THINK TO USE THIS ANYWHERE ELSE
+      tr.setMeta('selection$', {
+        type: 'SET_RELATIVE_SELECTION',
+        selectionRelativeToNode,
+      });
 
-    if (selection) {
-      tr.setSelection(selection);
-    }
+      if (selection) {
+        tr.setSelection(selection);
+      }
 
-    return tr;
-  },
+      return tr;
+    },
 };
 
 export default function EditorExampleForIntegrationTests({ clipboard = true }) {
@@ -189,17 +192,19 @@ export default function EditorExampleForIntegrationTests({ clipboard = true }) {
         const collabEdit = sessionId ? createCollabEdit(sessionId) : undefined;
 
         return (
-          <Editor
-            {...mapProvidersToProps(nonSerializableProps.providers, props)}
-            {...nonSerializableProps.providers}
-            insertMenuItems={customInsertMenuItems}
-            extensionHandlers={nonSerializableProps.extensionHandlers}
-            onEditorReady={onMount}
-            onChange={onChange}
-            onDestroy={onDestroy}
-            collabEdit={collabEdit}
-            dangerouslyAppendPlugins={dangerouslyAppendPlugins}
-          />
+          <IntlProvider locale="en">
+            <Editor
+              {...mapProvidersToProps(nonSerializableProps.providers, props)}
+              {...nonSerializableProps.providers}
+              insertMenuItems={customInsertMenuItems}
+              extensionHandlers={nonSerializableProps.extensionHandlers}
+              onEditorReady={onMount}
+              onChange={onChange}
+              onDestroy={onDestroy}
+              collabEdit={collabEdit}
+              dangerouslyAppendPlugins={dangerouslyAppendPlugins}
+            />
+          </IntlProvider>
         );
       };
       const editorContent = withCollab ? (

package/examples/config.jsonc

@@ -0,0 +1,14 @@
+/**
+ * This file is used by the test scaling project to optimise test result caching
+ * Examples that are used by tests affect the outcome of tests so must be included when hashing
+ * They are defined here so the hashing algorithm doesn't need to search test files for example usage each time
+ */
+{
+  "exampleDependencies": [
+    "@atlaskit/button",
+    "@atlaskit/link-provider",
+    "@atlaskit/logo",
+    "@atlaskit/media-integration-test-helpers",
+    "@atlaskit/synchrony-test-helpers"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.0.10",
+  "version": "0.1.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -11,21 +11,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Editor",
-    "releaseModel": "continuous"
+    "releaseModel": "scheduled"
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^24.0.0",
-    "@atlaskit/editor-common": "^70.1.0",
+    "@atlaskit/editor-common": "^70.2.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
@@ -52,32 +45,34 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.3.3",
-    "@atlaskit/button": "^16.3.0",
-    "@atlaskit/editor-core": "^173.0.0",
+    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/editor-core": "^175.0.0",
     "@atlaskit/editor-test-helpers": "^17.2.0",
-    "@atlaskit/link-provider": "^1.2.6",
+    "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
-    "@atlaskit/util-data-test": "^17.5.5",
+    "@atlaskit/util-data-test": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@types/prosemirror-history": "^1.0.1",
-    "enzyme": "^3.10.0",
     "prosemirror-history": "^1.1.3",
     "raf-stub": "^2.0.1",
     "typescript": "4.5.5"
   },
   "af:exports": {
-    "./types": "./src/types.ts",
-    ".": "./src/index.ts"
+    "./types": "./src/plugins/table/types.ts",
+    ".": "./src/index.ts",
+    "./ui/common-styles": "./src/plugins/table/ui/common-styles.ts",
+    "./ui/consts": "./src/plugins/table/ui/consts.ts",
+    "./plugin-key": "./src/plugins/table/pm-plugins/plugin-key.ts",
+    "./commands": "./src/plugins/table/commands/index.ts"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "techstack": {

package/plugin-key/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@atlaskit/editor-plugin-table/plugin-key",
+  "main": "../dist/cjs/plugins/table/pm-plugins/plugin-key.js",
+  "module": "../dist/esm/plugins/table/pm-plugins/plugin-key.js",
+  "module:es2019": "../dist/es2019/plugins/table/pm-plugins/plugin-key.js",
+  "types": "../dist/types/plugins/table/pm-plugins/plugin-key.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/plugins/table/pm-plugins/plugin-key.d.ts"
+      ]
+    }
+  }
+}

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/editor-plugin-table"
 

package/src/{plugins/table/__tests__ → __tests__}/integration/__fixtures__/auto-size-documents.ts

@@ -169,8 +169,7 @@ const autoSizeToWideLayout = {
                   content: [
                     {
                       type: 'text',
-                      text:
-                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                     },
                   ],
                 },
@@ -195,8 +194,7 @@ const autoSizeToWideLayout = {
                   content: [
                     {
                       type: 'text',
-                      text:
-                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                     },
                   ],
                 },
@@ -316,8 +314,7 @@ const autoSizeToFullWidthLayout = {
                   content: [
                     {
                       type: 'text',
-                      text:
-                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
+                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
                     },
                   ],
                 },
@@ -367,8 +364,7 @@ const autoSizeToFullWidthLayout = {
                   content: [
                     {
                       type: 'text',
-                      text:
-                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
+                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
                     },
                   ],
                 },
@@ -418,8 +414,7 @@ const autoSizeToFullWidthLayout = {
                   content: [
                     {
                       type: 'text',
-                      text:
-                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
+                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
                     },
                   ],
                 },

package/src/{plugins/table/__tests__ → __tests__}/integration/__fixtures__/layout-documents.ts

@@ -271,8 +271,7 @@ const nestedTables = {
       content: [
         {
           type: 'text',
-          text:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi nisl, venenatis eget auctor vitae, venenatis quis lorem. Suspendisse maximus tortor vel dui tincidunt cursus. Vestibulum magna nibh, auctor non auctor id, finibus vitae orci. Nulla viverra ipsum et nunc fringilla ultricies. Pellentesque vitae felis molestie justo finibus accumsan. Suspendisse potenti. Nulla facilisi. Integer dignissim quis velit quis elementum. Sed sit amet varius ante. Duis vestibulum porta augue eu laoreet. Morbi id risus et augue sollicitudin aliquam. In et ligula dolor. Nam ac aliquet diam.',
         },
       ],
     },