@atlaskit/editor-plugin-table 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-table
 
+## 1.1.0
+
+### Minor Changes
+
+- [`a0a35fe7fb1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a0a35fe7fb1) - Renaming contentComponent event subject to contentComponentv2. Move errorStack attribute to nonPrivacySafeAttributes
+
+### Patch Changes
+
+- [`cb6dc027c6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb6dc027c6d) - [ux] Disable content editable on a table number column to prevent selection on the number column.
+- Updated dependencies
+
 ## 1.0.3
 
 ### Patch Changes

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

@@ -118,7 +118,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
               selection: editorView.state.selection.toJSON(),
               position: targetCellPosition,
               docSize: editorView.state.doc.nodeSize,
-              error: error instanceof Error ? error.message : String(error),
+              error: error instanceof Error ? error.message : String(error)
+            },
+            nonPrivacySafeAttributes: {
               errorStack: error instanceof Error ? error.stack : undefined
             }
           };

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

@@ -134,7 +134,9 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
               selection: editorView.state.selection.toJSON(),
               position: pos,
               docSize: editorView.state.doc.nodeSize,
-              error: error === null || error === void 0 ? void 0 : error.toString(),
+              error: error === null || error === void 0 ? void 0 : error.toString()
+            },
+            nonPrivacySafeAttributes: {
               errorStack: error.stack || undefined
             }
           };

package/dist/cjs/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -119,7 +119,8 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         className: _types.TableCssClassName.NUMBERED_COLUMN,
         style: {
           marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
-        }
+        },
+        contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {
         return /*#__PURE__*/_react.default.createElement("div", {
           key: "wrapper-".concat(index),

package/dist/cjs/version.json

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

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

@@ -69,7 +69,9 @@ export class FloatingContextualButtonInner extends React.Component {
             selection: editorView.state.selection.toJSON(),
             position: targetCellPosition,
             docSize: editorView.state.doc.nodeSize,
-            error: error instanceof Error ? error.message : String(error),
+            error: error instanceof Error ? error.message : String(error)
+          },
+          nonPrivacySafeAttributes: {
             errorStack: error instanceof Error ? error.stack : undefined
           }
         };

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

@@ -89,7 +89,9 @@ export class FloatingInsertButton extends React.Component {
             selection: editorView.state.selection.toJSON(),
             position: pos,
             docSize: editorView.state.doc.nodeSize,
-            error: error === null || error === void 0 ? void 0 : error.toString(),
+            error: error === null || error === void 0 ? void 0 : error.toString()
+          },
+          nonPrivacySafeAttributes: {
             errorStack: error.stack || undefined
           }
         };

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

@@ -73,7 +73,8 @@ export default class NumberColumn extends Component {
       className: ClassName.NUMBERED_COLUMN,
       style: {
         marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
-      }
+      },
+      contentEditable: false
     }, rowHeights.map((rowHeight, index) => /*#__PURE__*/React.createElement("div", {
       key: `wrapper-${index}`,
       className: this.getClassNames(index),

package/dist/es2019/version.json

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

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

@@ -91,7 +91,9 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
               selection: editorView.state.selection.toJSON(),
               position: targetCellPosition,
               docSize: editorView.state.doc.nodeSize,
-              error: error instanceof Error ? error.message : String(error),
+              error: error instanceof Error ? error.message : String(error)
+            },
+            nonPrivacySafeAttributes: {
               errorStack: error instanceof Error ? error.stack : undefined
             }
           };

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

@@ -106,7 +106,9 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
               selection: editorView.state.selection.toJSON(),
               position: pos,
               docSize: editorView.state.doc.nodeSize,
-              error: error === null || error === void 0 ? void 0 : error.toString(),
+              error: error === null || error === void 0 ? void 0 : error.toString()
+            },
+            nonPrivacySafeAttributes: {
               errorStack: error.stack || undefined
             }
           };

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

@@ -98,7 +98,8 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         className: ClassName.NUMBERED_COLUMN,
         style: {
           marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
-        }
+        },
+        contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {
         return /*#__PURE__*/React.createElement("div", {
           key: "wrapper-".concat(index),

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^25.1.0",
-    "@atlaskit/editor-common": "^72.1.0",
+    "@atlaskit/editor-common": "^72.2.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.3.3",
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/editor-core": "^178.0.0",
+    "@atlaskit/editor-core": "^178.1.0",
     "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",

package/src/__tests__/integration/__fixtures__/paragraph-and-table-adf.ts

@@ -0,0 +1,132 @@
+export const documentWithParagraphAndTable = (
+  isNumberColumnEnabled: boolean,
+) => ({
+  version: 1,
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'text',
+        },
+      ],
+    },
+    {
+      type: 'table',
+      attrs: {
+        isNumberColumnEnabled,
+        layout: 'default',
+        localId: 'e1365400-6226-4bb9-b3f1-b80fd3ae640a',
+      },
+      content: [
+        {
+          type: 'tableRow',
+          content: [
+            {
+              type: 'tableHeader',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableHeader',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableHeader',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'tableRow',
+          content: [
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'tableRow',
+          content: [
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+});

package/src/__tests__/integration/arrow-down-into-table.ts

@@ -8,19 +8,10 @@ import {
   goToEditorTestingWDExample,
   mountEditor,
 } from '@atlaskit/editor-test-helpers/testing-example-page';
-import tableAdf from './__fixtures__/paragraph-and-table-adf.json';
+import { documentWithParagraphAndTable } from './__fixtures__/paragraph-and-table-adf';
 
-// This keyboard navigation is actually browser functionality
-// But there was a div on our end that caused a bug where the
-// cursor would go behind the table when pressing arrow down
-// https://product-fabric.atlassian.net/browse/ED-14046
-//
-// Skipping in firefox as there is a known bug
-// Needs to be fixed in https://product-fabric.atlassian.net/servicedesk/customer/portal/99/DTR-155?created=true
-BrowserTestCase(
-  'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row',
-  { skip: ['firefox'] },
-  async (client: any) => {
+const testArrowDown =
+  (isNumberedColumnEnabled: boolean) => async (client: any) => {
     const page = await goToEditorTestingWDExample(
       client,
       'editor-plugin-table',
@@ -28,11 +19,29 @@ BrowserTestCase(
     await mountEditor(page, {
       appearance: fullpage.appearance,
       allowTables: {},
-      defaultValue: tableAdf,
+      defaultValue: documentWithParagraphAndTable(isNumberedColumnEnabled),
     });
 
     await setProseMirrorTextSelection(page, { anchor: 5 });
     await page.keys('ArrowDown');
-    await expectToMatchSelection(page, { type: 'text', to: 10, from: 10 });
-  },
+    await expectToMatchSelection(page, { type: 'text', anchor: 10, head: 10 });
+  };
+
+// This keyboard navigation is actually browser functionality
+// But there was a div on our end that caused a bug where the
+// cursor would go behind the table when pressing arrow down
+// https://product-fabric.atlassian.net/browse/ED-14046
+//
+// Skipping in firefox as there is a known bug
+// Needs to be fixed in https://product-fabric.atlassian.net/servicedesk/customer/portal/99/DTR-155?created=true
+BrowserTestCase(
+  'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row',
+  { skip: ['firefox'] },
+  testArrowDown(false),
+);
+
+BrowserTestCase(
+  'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row for a numbered table',
+  { skip: ['firefox'] },
+  testArrowDown(true),
 );

package/src/__tests__/integration/deleting-empty-paragraph-under-table.ts

@@ -33,7 +33,7 @@ BrowserTestCase(
 
     await setProseMirrorTextSelection(page, { anchor: 45 });
     await page.keys('Backspace');
-    await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
+    await expectToMatchSelection(page, { type: 'text', anchor: 40, head: 40 });
     const doc = await page.$eval(editable, getDocFromElement);
     expect(doc).toMatchCustomDocSnapshot(testName);
   },
@@ -56,7 +56,7 @@ BrowserTestCase(
 
     await setProseMirrorTextSelection(page, { anchor: 45 });
     await page.keys('Backspace');
-    await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
+    await expectToMatchSelection(page, { type: 'text', anchor: 40, head: 40 });
     const doc = await page.$eval(editable, getDocFromElement);
     expect(doc).toMatchCustomDocSnapshot(testName);
   },
@@ -79,7 +79,7 @@ BrowserTestCase(
 
     await setProseMirrorTextSelection(page, { anchor: 45 });
     await page.keys('Backspace');
-    await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
+    await expectToMatchSelection(page, { type: 'text', anchor: 40, head: 40 });
     const doc = await page.$eval(editable, getDocFromElement);
     expect(doc).toMatchCustomDocSnapshot(testName);
   },

package/src/__tests__/integration/meta-arrowup-cursor-in-first-row.ts

@@ -32,6 +32,6 @@ BrowserTestCase(
 
     await page.keys(keys, true);
 
-    await expectToMatchSelection(page, { type: 'text', to: 4, from: 4 });
+    await expectToMatchSelection(page, { type: 'text', anchor: 4, head: 4 });
   },
 );

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

@@ -154,7 +154,7 @@ describe('table plugin', () => {
             table({ localId: TABLE_LOCAL_ID })(
               tr(th()(p('1')), th()(p('2')), th()(p('3'))),
               tr(td()(p('4')), td()(p('5')), td()(p('6'))),
-              tr(td()(p('7')), th()(p('1')), td()(p('9'))),
+              tr(td()(p('7')), td()(p('1')), td()(p('9'))),
             ),
           ),
         );

package/src/__tests__/unit/toolbar.ts

@@ -14,6 +14,10 @@ import {
   tr as row,
   table,
   td,
+  tr,
+  tdEmpty,
+  thEmpty,
+  th,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import type {
   Command,
@@ -146,8 +150,7 @@ describe('getToolbarMenuConfig', () => {
 
 describe('getToolbarCellOptionsConfig', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const { editorView } = createEditor({
-    doc: doc(table()(row(td()(p('1{cursor}'))))),
+  const props = {
     preset: new Preset<LightEditorPlugin>().add([
       tablePlugin,
       {
@@ -159,6 +162,10 @@ describe('getToolbarCellOptionsConfig', () => {
       },
     ]),
     pluginKey,
+  };
+  const { editorView } = createEditor({
+    doc: doc(table()(row(td()(p('1{cursor}'))))),
+    ...props,
   });
   const { state } = editorView;
   const getEditorContainerWidth = () => ({ width: 500 });
@@ -177,6 +184,13 @@ describe('getToolbarCellOptionsConfig', () => {
     undefined,
   );
 
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+      () => () => [],
+    );
+  });
+
   it('is a dropdown with the following dropdown items with the given order', () => {
     const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
     expect(items[0]).toMatchObject({
@@ -407,4 +421,74 @@ describe('getToolbarCellOptionsConfig', () => {
     const isDisabled = distributeColumns.every((item) => item.disabled);
     expect(isDisabled).toBeTruthy();
   });
+
+  it('should disable distribute columns if selected cells are without colwidths', () => {
+    const { editorView } = createEditor({
+      doc: doc(
+        table()(
+          tr(th({})(p('{<cell}')), thEmpty, thEmpty),
+          tr(tdEmpty, td({})(p('{cell>}')), tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      ),
+      ...props,
+    });
+
+    const { state } = editorView;
+    const rect = new Rect(1, 1, 2, 2);
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeTruthy();
+  });
+
+  it('should disable distribute columns if selection is on a single column', () => {
+    const { editorView } = createEditor({
+      doc: doc(
+        table()(
+          tr(th({})(p('{<cell}')), thEmpty, thEmpty),
+          tr(td({})(p('{cell>}')), tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      ),
+      ...props,
+    });
+
+    const { state } = editorView;
+    const rect = new Rect(1, 1, 1, 2);
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeTruthy();
+  });
 });

package/src/__tests__/unit/ui/FloatingInsertButton.tsx

@@ -81,7 +81,10 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
 
     const mock = jest.spyOn(prosemirrorUtils, 'findDomRefAtPos');
     mock.mockImplementation(() => {
-      throw new Error('Error message from mock');
+      const error = new Error('Error message from mock');
+      error.stack = 'stack trace';
+
+      throw error;
     });
   });
 
@@ -123,6 +126,9 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
         docSize: 46,
         error: 'Error: Error message from mock',
       }),
+      nonPrivacySafeAttributes: expect.objectContaining({
+        errorStack: 'stack trace',
+      }),
     });
   });
 

package/src/plugins/table/ui/FloatingContextualButton/index.tsx

@@ -88,6 +88,8 @@ export class FloatingContextualButtonInner extends React.Component<
             position: targetCellPosition,
             docSize: editorView.state.doc.nodeSize,
             error: error instanceof Error ? error.message : String(error),
+          },
+          nonPrivacySafeAttributes: {
             errorStack: error instanceof Error ? error.stack : undefined,
           },
         };

package/src/plugins/table/ui/FloatingInsertButton/index.tsx

@@ -140,6 +140,8 @@ export class FloatingInsertButton extends React.Component<
             position: pos,
             docSize: editorView.state.doc.nodeSize,
             error: (error as any)?.toString(),
+          },
+          nonPrivacySafeAttributes: {
             errorStack: (error as any).stack || undefined,
           },
         };

package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -35,6 +35,7 @@ export default class NumberColumn extends Component<Props, any> {
               ? rowHeights[0]
               : undefined,
         }}
+        contentEditable={false}
       >
         {rowHeights.map((rowHeight, index) => (
           <div

package/src/__tests__/integration/__fixtures__/paragraph-and-table-adf.json

@@ -1,130 +0,0 @@
-{
-    "version": 1,
-    "type": "doc",
-    "content": [
-        {
-            "type": "paragraph",
-            "content": [
-                {
-                    "type": "text",
-                    "text": "text"
-                }
-            ]
-        },
-        {
-            "type": "table",
-            "attrs": {
-                "isNumberColumnEnabled": false,
-                "layout": "default",
-                "localId": "e1365400-6226-4bb9-b3f1-b80fd3ae640a"
-            },
-            "content": [
-                {
-                    "type": "tableRow",
-                    "content": [
-                        {
-                            "type": "tableHeader",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableHeader",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableHeader",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "type": "tableRow",
-                    "content": [
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "type": "tableRow",
-                    "content": [
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}