@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

package/dist/types-ts4.5/types.d.ts

@@ -305,6 +305,8 @@ export declare const TableCssClassName: {
     DRAG_HANDLE_DISABLED: string;
     /** minimised handle class */
     DRAG_HANDLE_MINIMISED: string;
+    DRAG_SUBMENU: string;
+    DRAG_SUBMENU_ICON: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;
@@ -338,12 +340,17 @@ export declare const TableCssClassName: {
     TOP_LEFT_CELL: string;
     LAST_ITEM_IN_CELL: string;
     WITH_COLUMN_INSERT_LINE: string;
+    WITH_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_FIRST_COLUMN_INSERT_LINE: string;
+    WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_LAST_COLUMN_INSERT_LINE: string;
+    WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_RESIZE_LINE: string;
     WITH_RESIZE_LINE_LAST_COLUMN: string;
     WITH_ROW_INSERT_LINE: string;
+    WITH_ROW_INSERT_LINE_INACTIVE: string;
     WITH_LAST_ROW_INSERT_LINE: string;
+    WITH_LAST_ROW_INSERT_LINE_INACTIVE: string;
     TABLE_CONTAINER: string;
     TABLE_NODE_WRAPPER: string;
     TABLE_LEFT_SHADOW: string;

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -21,5 +20,5 @@ type DragMenuProps = {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts

@@ -4,7 +4,7 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { TableDirection } from '../../types';
+import type { PluginConfig, TableDirection } from '../../types';
 export interface Props {
     editorView: EditorView;
     isOpen: boolean;
@@ -20,9 +20,10 @@ export interface Props {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     stickyHeaders?: RowStickyState;
+    pluginConfig?: PluginConfig;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, pluginConfig, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/ui/FloatingDragMenu/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
+export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -40,7 +40,7 @@ export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;
 export declare const contextualMenuTriggerSize = 16;
-export declare const contextualMenuDropdownWidth = 180;
+export declare const contextualMenuDropdownWidth: number;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;

package/dist/types-ts4.5/utils/decoration.d.ts

@@ -17,5 +17,5 @@ export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTr
     Decoration[]
 ];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];
-export declare const createColumnInsertLine: (columnIndex: number, selection: Selection) => Decoration[];
-export declare const createRowInsertLine: (rowIndex: number, selection: Selection) => Decoration[];
+export declare const createColumnInsertLine: (columnIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];
+export declare const createRowInsertLine: (rowIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.9",
+  "version": "5.8.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^76.35.0",
+    "@atlaskit/editor-common": "^76.38.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -45,8 +45,9 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.16.0",
+    "@atlaskit/primitives": "^1.17.0",
     "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
@@ -67,7 +68,7 @@
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-grid": "^0.3.0",
-    "@atlaskit/editor-plugin-hyperlink": "^0.6.0",
+    "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.1.2",
@@ -144,6 +145,9 @@
     },
     "platform.editor.table.in-danger-hover-merged-cells-fix": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-column-resizing_emcvz": {
+      "type": "boolean"
     }
   }
 }

package/src/__tests__/unit/analytics.ts

@@ -802,7 +802,11 @@ describe('Table analytic events', () => {
       beforeEach(() => {
         editorView = editor(defaultTableDoc).editorView;
         // Note: we cannot clean a drop target, util one has been set.
-        setDropTarget('column', 0)(editorView.state, editorView.dispatch);
+        setDropTarget(
+          'column',
+          0,
+          false,
+        )(editorView.state, editorView.dispatch);
       });
 
       it.each([

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

@@ -188,5 +188,300 @@ describe('FloatingDragMenu', () => {
           ]
         `);
     });
+    // first row menu item check
+    ffTest(
+      'platform.editor.table.new-cell-context-menu-styling',
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+                "Header row",
+                "Row numbers",
+              ]
+            `);
+      },
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+              ]
+            `);
+      },
+    );
+    // second row menu item check
+    ffTest(
+      'platform.editor.table.new-cell-context-menu-styling',
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={1}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+                "Row numbers",
+              ]
+            `);
+      },
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={1}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+              ]
+            `);
+      },
+    );
+    // first column menu item check
+    ffTest(
+      'platform.editor.table.new-cell-context-menu-styling',
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="column"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add column leftCtrl+Alt+←",
+                "Add column rightCtrl+Alt+→",
+                "Distribute columns",
+                "Clear cells⌫",
+                "Delete columnCtrl+⌫",
+                "Move column leftCtrl+Alt+Shift+←",
+                "Move column rightCtrl+Alt+Shift+→",
+                "Sort increasing",
+                "Sort decreasing",
+                "Header column",
+              ]
+            `);
+      },
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="column"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add column leftCtrl+Alt+←",
+                "Add column rightCtrl+Alt+→",
+                "Distribute columns",
+                "Clear cells⌫",
+                "Delete columnCtrl+⌫",
+                "Move column leftCtrl+Alt+Shift+←",
+                "Move column rightCtrl+Alt+Shift+→",
+                "Sort increasing",
+                "Sort decreasing",
+              ]
+            `);
+      },
+    );
+    // second column menu item check
+    ffTest('platform.editor.table.new-cell-context-menu-styling', () => {
+      // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+      const tableRef = editorView.dom.querySelector('table');
+      const editorRef = {
+        current: document.createElement('div'),
+      };
+      render(
+        <ReactEditorViewContext.Provider
+          value={{
+            editorRef,
+          }}
+        >
+          <div id="drag-handle-button-row">dragmenu anchor</div>
+          <DragMenu
+            editorView={editorView}
+            isOpen={true}
+            getEditorContainerWidth={jest.fn()}
+            tableRef={tableRef as HTMLTableElement}
+            tableNode={tableNode?.node}
+            direction="column"
+            index={1}
+          />
+        </ReactEditorViewContext.Provider>,
+      );
+
+      const items = screen.getAllByRole('menuitem');
+      const menuitemTextArray = items.map((item) => item.textContent);
+      expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add column leftCtrl+Alt+←",
+                "Add column rightCtrl+Alt+→",
+                "Distribute columns",
+                "Clear cells⌫",
+                "Delete columnCtrl+⌫",
+                "Move column leftCtrl+Alt+Shift+←",
+                "Move column rightCtrl+Alt+Shift+→",
+                "Sort increasing",
+                "Sort decreasing",
+              ]
+            `);
+    });
   });
 });

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

@@ -30,10 +30,9 @@ import {
 
 import tablePlugin from '../../../plugin';
 import { pluginKey } from '../../../pm-plugins/plugin-key';
-// import { TableCssClassName as ClassName } from '../../../types';
 import { DragControls } from '../../../ui/TableFloatingControls/RowControls';
 
-describe('NumberColumn', () => {
+describe('RowDragControls', () => {
   const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder, tableOptions = {}) =>
@@ -81,7 +80,9 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandle = screen.getAllByTestId('table-floating-row-drag-handle');
+    const dragHandle = screen.getAllByTestId(
+      /^table-floating-row-\d-drag-handle$/,
+    );
 
     expect(dragHandle.length).toBe(1);
   });
@@ -120,7 +121,7 @@ describe('NumberColumn', () => {
     );
 
     const dragHandle = screen.queryAllByTestId(
-      'table-floating-row-drag-handle',
+      /^table-floating-row-\d-drag-handle$/,
     );
 
     expect(dragHandle.length).toBe(0);