@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 0.1.1
+
+### Patch Changes
+
+- [`2ce5df13885`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ce5df13885) - [ux] Prevent cursor selection from being reset when delete button is clicked
+  The fix ensures that when removing a row or column via the delete button, the cursor will stay within the table.
+  Reference https://discuss.prosemirror.net/t/setting-selection-to-newly-inserted-text-node/3615/6
+
 ## 0.1.0
 
 ### Minor Changes

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

@@ -154,7 +154,8 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           dispatch = _this$props$editorVie2.dispatch;
       return (0, _commands.clearHoverSelection)()(state, dispatch);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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/cjs/version.json

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

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

@@ -96,7 +96,8 @@ class FloatingDeleteButton extends Component {
       return clearHoverSelection()(state, dispatch);
     });
 
-    _defineProperty(this, "handleClick", () => {
+    _defineProperty(this, "handleClick", event => {
+      event.preventDefault();
       const {
         editorAnalyticsAPI
       } = this.props;

package/dist/es2019/version.json

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

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

@@ -121,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/version.json

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -11,14 +11,6 @@
   "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/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Editor",
@@ -64,13 +56,12 @@
     "@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"

package/src/__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/__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.',
         },
       ],
     },

package/src/__tests__/integration/__fixtures__/resize-documents.ts

@@ -212,8 +212,7 @@ export const twoColFullWidthTableWithContent = {
                     },
                     {
                       type: 'text',
-                      text:
-                        '2. Paste a jira link in for the href and immediately close the bracket to complete the markdown',
+                      text: '2. Paste a jira link in for the href and immediately close the bracket to complete the markdown',
                     },
                   ],
                 },
@@ -229,8 +228,7 @@ export const twoColFullWidthTableWithContent = {
                     },
                     {
                       type: 'text',
-                      text:
-                        'markdown for URL works correctly? or smartcard overrides it?',
+                      text: 'markdown for URL works correctly? or smartcard overrides it?',
                     },
                   ],
                 },
@@ -246,8 +244,7 @@ export const twoColFullWidthTableWithContent = {
                     },
                     {
                       type: 'text',
-                      text:
-                        'Smartcard link for Jira is still being processed and is entered as the value for the markdown for the URL ',
+                      text: 'Smartcard link for Jira is still being processed and is entered as the value for the markdown for the URL ',
                     },
                     {
                       type: 'emoji',
@@ -262,8 +259,7 @@ export const twoColFullWidthTableWithContent = {
                     },
                     {
                       type: 'text',
-                      text:
-                        'URL ends up pointing to the confluence edit link but without a page ID so 404s',
+                      text: 'URL ends up pointing to the confluence edit link but without a page ID so 404s',
                     },
                   ],
                 },
@@ -302,8 +298,7 @@ export const twoColFullWidthTableWithContent = {
                   content: [
                     {
                       type: 'text',
-                      text:
-                        "Publishing somewhat big pages doesn't really provide any indication to the user that their page is actually being published and they're going to be navigated away",
+                      text: "Publishing somewhat big pages doesn't really provide any indication to the user that their page is actually being published and they're going to be navigated away",
                     },
                   ],
                 },

package/src/__tests__/integration/resize.ts

@@ -185,8 +185,7 @@ BrowserTestCase(
     featureFlags: {},
   },
   {
-    test:
-      'Should stack columns to the right and go to overflow with overflowShadowsOptimisation',
+    test: 'Should stack columns to the right and go to overflow with overflowShadowsOptimisation',
     featureFlags: {
       tableOverflowShadowsOptimization: true,
     },

package/src/__tests__/unit/analytics.ts

@@ -1,5 +1,9 @@
 import { Rect } from '@atlaskit/editor-tables/table-map';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -14,7 +18,7 @@ import {
 import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
 import { B50 } from '@atlaskit/theme/colors';
 
-import { TablePluginState, PluginConfig } from '../../plugins/table/types';
+import { PluginConfig } from '../../plugins/table/types';
 import {
   deleteTableWithAnalytics,
   emptyMultipleCellsWithAnalytics,
@@ -37,11 +41,15 @@ import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { replaceSelectedTable } from '../../plugins/table/transforms';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import tablePlugin from '../../plugins/table-plugin';
-
-const defaultTable = table()(
-  tr(thEmpty, thEmpty, thEmpty),
-  tr(tdEmpty, tdEmpty, tdEmpty),
-  tr(tdEmpty, tdEmpty, tdCursor),
+import typeAheadPlugin from '@atlaskit/editor-core/src/plugins/type-ahead';
+import quickInsertPlugin from '@atlaskit/editor-core/src/plugins/quick-insert';
+
+const defaultTableDoc = doc(
+  table()(
+    tr(thEmpty, thEmpty, thEmpty),
+    tr(tdEmpty, tdEmpty, tdEmpty),
+    tr(tdEmpty, tdEmpty, tdCursor),
+  ),
 );
 
 const secondRow: Rect = { left: 0, top: 1, bottom: 2, right: 3 };
@@ -57,7 +65,7 @@ describe('Table analytic events', () => {
     };
   });
 
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder) => {
     const tableOptions = {
@@ -69,20 +77,13 @@ describe('Table analytic events', () => {
 
     const _editor = createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        allowAnalyticsGASV3: true,
-        appearance: 'full-page',
-        quickInsert: true,
-        dangerouslyAppendPlugins: {
-          __plugins: [
-            tablePlugin({
-              tableOptions,
-              editorAnalyticsAPI: editorAnalyticsAPIFake,
-            }),
-          ],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>()
+        .add(typeAheadPlugin)
+        .add(quickInsertPlugin)
+        .add([
+          tablePlugin,
+          { tableOptions, editorAnalyticsAPI: editorAnalyticsAPIFake },
+        ]),
       pluginKey,
     });
 
@@ -108,7 +109,7 @@ describe('Table analytic events', () => {
 
   describe('table deleted', () => {
     beforeEach(() => {
-      const { editorView } = editor(doc(defaultTable));
+      const { editorView } = editor(defaultTableDoc);
       deleteTableWithAnalytics(editorAnalyticsAPIFake)(
         editorView.state,
         editorView.dispatch,
@@ -334,7 +335,7 @@ describe('Table analytic events', () => {
 
   describe('header row toggled', () => {
     beforeEach(() => {
-      const { editorView } = editor(defaultTable);
+      const { editorView } = editor(defaultTableDoc);
       toggleHeaderRowWithAnalytics(editorAnalyticsAPIFake)(
         editorView.state,
         editorView.dispatch,
@@ -358,7 +359,7 @@ describe('Table analytic events', () => {
 
   describe('header column toggled', () => {
     beforeEach(() => {
-      const { editorView } = editor(defaultTable);
+      const { editorView } = editor(defaultTableDoc);
       toggleHeaderColumnWithAnalytics(editorAnalyticsAPIFake)(
         editorView.state,
         editorView.dispatch,
@@ -382,7 +383,7 @@ describe('Table analytic events', () => {
 
   describe('number column toggled', () => {
     beforeEach(() => {
-      const { editorView } = editor(defaultTable);
+      const { editorView } = editor(defaultTableDoc);
       toggleNumberColumnWithAnalytics(editorAnalyticsAPIFake)(
         editorView.state,
         editorView.dispatch,
@@ -407,7 +408,7 @@ describe('Table analytic events', () => {
   describe('layout changed', () => {
     describe('normal', () => {
       it('should fire v3 analytics', () => {
-        const { editorView } = editor(defaultTable);
+        const { editorView } = editor(defaultTableDoc);
         toggleTableLayoutWithAnalytics(editorAnalyticsAPIFake)(
           editorView.state,
           editorView.dispatch,
@@ -536,7 +537,7 @@ describe('Table analytic events', () => {
   describe('row added', () => {
     describe('context menu', () => {
       beforeEach(() => {
-        const { editorView } = editor(defaultTable);
+        const { editorView } = editor(defaultTableDoc);
         insertRowWithAnalytics(editorAnalyticsAPIFake)(
           INPUT_METHOD.CONTEXT_MENU,
           {
@@ -565,7 +566,7 @@ describe('Table analytic events', () => {
     describe('keyboard', () => {
       describe('Tab', () => {
         beforeEach(() => {
-          const { editorView } = editor(defaultTable);
+          const { editorView } = editor(defaultTableDoc);
           sendKeyToPm(editorView, 'Tab');
         });
 
@@ -622,7 +623,7 @@ describe('Table analytic events', () => {
       return { width: 500 };
     };
     beforeEach(() => {
-      const { editorView } = editor(defaultTable);
+      const { editorView } = editor(defaultTableDoc);
       insertColumnWithAnalytics(
         getEditorContainerWidth,
         editorAnalyticsAPIFake,
@@ -651,7 +652,7 @@ describe('Table analytic events', () => {
 
   describe('row deleted', () => {
     beforeEach(() => {
-      const { editorView } = editor(defaultTable);
+      const { editorView } = editor(defaultTableDoc);
       deleteRowsWithAnalytics(editorAnalyticsAPIFake)(
         INPUT_METHOD.CONTEXT_MENU,
         secondRow,
@@ -678,7 +679,7 @@ describe('Table analytic events', () => {
 
   describe('column deleted', () => {
     beforeEach(() => {
-      const { editorView } = editor(defaultTable);
+      const { editorView } = editor(defaultTableDoc);
       deleteColumnsWithAnalytics(editorAnalyticsAPIFake)(
         INPUT_METHOD.CONTEXT_MENU,
         secondColumn,

package/src/__tests__/unit/collab.ts

@@ -8,16 +8,22 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { removeColumnAt } from '@atlaskit/editor-tables/utils';
-import { TablePluginState, PluginConfig } from '../../plugins/table/types';
+import { PluginConfig } from '../../plugins/table/types';
 
 import { setResizeHandlePos } from '../../plugins/table/pm-plugins/table-resizing/commands';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import tablePlugin from '../../plugins/table-plugin';
+import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
 describe('Tables with Collab editing', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
   const tableOptions = {
     allowNumberColumn: true,
     allowHeaderRow: true,
@@ -29,12 +35,9 @@ describe('Tables with Collab editing', () => {
   const editor = (doc: DocBuilder) => {
     return createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>()
+        .add([tablePlugin, { tableOptions }])
+        .add(widthPlugin),
       pluginKey: tablePluginKey,
     });
   };

package/src/__tests__/unit/commands/sort.ts

@@ -1,4 +1,8 @@
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -12,11 +16,14 @@ import {
   status,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { EditorView } from 'prosemirror-view';
-import { mentionResourceProvider } from '@atlaskit/util-data-test/mention-story-data';
 import { sortByColumn } from '../../../plugins/table/commands/sort';
 import { uuid } from '@atlaskit/adf-schema';
 import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import tablePlugin from '../../../plugins/table-plugin';
+import statusPlugin from '@atlaskit/editor-core/src/plugins/status';
+import mentionsPlugin from '@atlaskit/editor-core/src/plugins/mentions';
+import hyperlinkPlugin from '@atlaskit/editor-core/src/plugins/hyperlink';
+import datePlugin from '@atlaskit/editor-core/src/plugins/date';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -29,14 +36,13 @@ describe('Sort Table', () => {
     uuid.setStatic(false);
   });
 
-  const createEditor = createEditorFactory();
+  const createEditor = createProsemirrorEditorFactory();
   it('should test a basic table with heading', () => {
     const { editorView } = createEditor({
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowHeaderRow: true } },
+      ]),
       doc: doc(
         table()(
           tr(th({})(p('Number{<>}'))),
@@ -62,11 +68,10 @@ describe('Sort Table', () => {
 
   it('should test a basic table descending', () => {
     const { editorView } = createEditor({
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowHeaderRow: true } },
+      ]),
       doc: doc(
         table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
       ),
@@ -86,11 +91,10 @@ describe('Sort Table', () => {
 
   it('should test a basic table ascending', () => {
     const { editorView } = createEditor({
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowHeaderRow: true } },
+      ]),
       doc: doc(
         table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
       ),
@@ -113,16 +117,12 @@ describe('Sort Table', () => {
 
     beforeEach(() => {
       ({ editorView } = createEditor({
-        editorProps: {
-          allowStatus: true,
-          allowDate: true,
-          dangerouslyAppendPlugins: {
-            __plugins: [
-              tablePlugin({ tableOptions: { allowHeaderRow: true } }),
-            ],
-          },
-          mentionProvider: Promise.resolve(mentionResourceProvider),
-        },
+        preset: new Preset<LightEditorPlugin>()
+          .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }])
+          .add([statusPlugin, { menuDisabled: false }])
+          .add(mentionsPlugin)
+          .add(hyperlinkPlugin)
+          .add(datePlugin),
         doc: doc(
           table()(
             tr(th({})(p('Mixed{<>}'))),

package/src/__tests__/unit/copy-paste.ts

@@ -49,14 +49,12 @@ const array = (...args: any): Node[] => args.map((i: any) => i(defaultSchema));
 const fragment = (...args: any) =>
   Fragment.from(args.map((i: any) => i(defaultSchema)));
 
-const selectCell = (cell: {
-  pos: number;
-  start: number;
-  node: ProsemirrorNode;
-}) => (tr: Transaction) => {
-  const $anchor = tr.doc.resolve(cell.pos);
-  return tr.setSelection(new CellSelection($anchor, $anchor) as any);
-};
+const selectCell =
+  (cell: { pos: number; start: number; node: ProsemirrorNode }) =>
+  (tr: Transaction) => {
+    const $anchor = tr.doc.resolve(cell.pos);
+    return tr.setSelection(new CellSelection($anchor, $anchor) as any);
+  };
 
 const copySelectionAndPasteAtPos = ({
   editorView,