@atlaskit/editor-plugin-table 4.0.1 → 4.0.3

package/src/__tests__/integration/__snapshots__/resize.ts.snap

@@ -9,6 +9,7 @@ Object {
         "isNumberColumnEnabled": true,
         "layout": "full-width",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -248,6 +249,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -405,6 +407,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -566,6 +569,7 @@ Object {
                 "isNumberColumnEnabled": false,
                 "layout": "default",
                 "localId": "abc-123",
+                "width": null,
               },
               "content": Array [
                 Object {
@@ -761,6 +765,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -1035,6 +1040,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -1261,6 +1267,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -1631,6 +1638,7 @@ Object {
         "isNumberColumnEnabled": true,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -1860,6 +1868,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -2134,6 +2143,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -2408,6 +2418,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {

package/src/__tests__/integration/__snapshots__/scale.ts.snap

@@ -9,6 +9,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {
@@ -718,6 +719,7 @@ Object {
         "isNumberColumnEnabled": false,
         "layout": "default",
         "localId": "abc-123",
+        "width": null,
       },
       "content": Array [
         Object {

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

@@ -1,5 +1,5 @@
 import { uuid } from '@atlaskit/adf-schema';
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';

package/src/__tests__/unit/pm-plugins/table-width.ts

@@ -6,6 +6,7 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { undo } from '@atlaskit/editor-prosemirror/history';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
@@ -26,6 +27,42 @@ import {
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey as tablePluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 
+const createDoc = (attrs: any) =>
+  doc(
+    table(attrs)(
+      tr(tdEmpty, tdEmpty, tdEmpty),
+      tr(tdEmpty, tdEmpty, tdEmpty),
+      tr(tdEmpty, tdEmpty, tdEmpty),
+    ),
+  );
+
+const expectedDocuments = {
+  fullWidthAppearanceLayoutDefault: createDoc({
+    localId: 'localId',
+    isNumberColumnEnabled: false,
+    layout: 'default',
+    width: 1800,
+  }),
+  fixedWidthAppearanceLayoutDefault: createDoc({
+    localId: 'localId',
+    isNumberColumnEnabled: false,
+    layout: 'default',
+    width: 760,
+  }),
+  fixedWidthAppearanceLayoutWide: createDoc({
+    localId: 'localId',
+    isNumberColumnEnabled: false,
+    layout: 'wide',
+    width: 960,
+  }),
+  fixedWidthAppearanceLayoutFullWidth: createDoc({
+    localId: 'localId',
+    isNumberColumnEnabled: false,
+    layout: 'full-width',
+    width: 1800,
+  }),
+};
+
 describe('table width', () => {
   const createEditor = createProsemirrorEditorFactory();
 
@@ -34,7 +71,7 @@ describe('table width', () => {
     global['fetch'] = jest.fn();
   });
 
-  const editor = (doc: DocBuilder) => {
+  const editor = (doc: DocBuilder, isFullWidthEnabled = false) => {
     return createEditor({
       doc,
       attachTo: document.body,
@@ -48,6 +85,7 @@ describe('table width', () => {
         .add([
           tablePlugin,
           {
+            fullWidthEnabled: isFullWidthEnabled,
             tableResizingEnabled: true, // so table-width plugin is enabled
             tableOptions: {
               advanced: true,
@@ -99,4 +137,155 @@ describe('table width', () => {
       );
     });
   });
+
+  describe('Load an existing table with width attr equal null', () => {
+    describe('full-width editor appearance', () => {
+      it('should translate table width attr to 1800', () => {
+        const { editorView } = editor(
+          doc(
+            // @ts-ignore
+            table({ localId: 'localId', layout: 'default', width: null })(
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+          true,
+        );
+
+        // create `replaceDocument` step
+        editorView.dispatch(
+          editorView.state.tr.setMeta('replaceDocument', true),
+        );
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fullWidthAppearanceLayoutDefault,
+        );
+      });
+
+      it('should not remove width when undo is sent', () => {
+        const { editorView } = editor(
+          doc(
+            // @ts-ignore
+            table({ localId: 'localId', layout: 'default', width: null })(
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+          true,
+        );
+
+        // create `replaceDocument` step
+        editorView.dispatch(
+          editorView.state.tr.setMeta('replaceDocument', true),
+        );
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fullWidthAppearanceLayoutDefault,
+        );
+
+        undo(editorView.state, editorView.dispatch);
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fullWidthAppearanceLayoutDefault,
+        );
+      });
+    });
+    describe('fixed-width editor appearance', () => {
+      it('should translate table width attr to 760 for default layout', () => {
+        const { editorView } = editor(
+          doc(
+            // @ts-ignore
+            table({ localId: 'localId', layout: 'default', width: null })(
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        // create `replaceDocument` step
+        editorView.dispatch(
+          editorView.state.tr.setMeta('replaceDocument', true),
+        );
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fixedWidthAppearanceLayoutDefault,
+        );
+      });
+
+      it('should not remove width when undo is sent', () => {
+        const { editorView } = editor(
+          doc(
+            // @ts-ignore
+            table({ localId: 'localId', layout: 'default', width: null })(
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        // create `replaceDocument` step
+        editorView.dispatch(
+          editorView.state.tr.setMeta('replaceDocument', true),
+        );
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fixedWidthAppearanceLayoutDefault,
+        );
+
+        undo(editorView.state, editorView.dispatch);
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fixedWidthAppearanceLayoutDefault,
+        );
+      });
+
+      it('should translate table width attr to 960 for wide layout', () => {
+        const { editorView } = editor(
+          doc(
+            // @ts-ignore
+            table({ localId: 'localId', layout: 'wide', width: null })(
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        // create `replaceDocument` step
+        editorView.dispatch(
+          editorView.state.tr.setMeta('replaceDocument', true),
+        );
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fixedWidthAppearanceLayoutWide,
+        );
+      });
+
+      it('should translate table width attr to 1800 for full-width layout', () => {
+        const { editorView } = editor(
+          doc(
+            // @ts-ignore
+            table({ localId: 'localId', layout: 'full-width', width: null })(
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        // create `replaceDocument` step
+        editorView.dispatch(
+          editorView.state.tr.setMeta('replaceDocument', true),
+        );
+
+        expect(editorView.state.doc).toEqualDocument(
+          expectedDocuments.fixedWidthAppearanceLayoutFullWidth,
+        );
+      });
+    });
+  });
 });

package/src/__tests__/unit/sort-column.ts

@@ -1,5 +1,5 @@
 import { uuid } from '@atlaskit/adf-schema';
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import type { DocBuilder } from '@atlaskit/editor-common/types';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';

package/src/plugins/table/commands/insert.ts

@@ -1,5 +1,5 @@
 // #region Imports
-import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { AddColumnStep } from '@atlaskit/custom-steps';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import type {
   Command,

package/src/plugins/table/commands/sort.ts

@@ -1,16 +1,16 @@
-import { CardAttributes, DataType, UrlType } from '@atlaskit/adf-schema';
+import type { CardAttributes, DataType, UrlType } from '@atlaskit/adf-schema';
 import {
   TableSortOrder as SortOrder,
   TableSortStep,
-} from '@atlaskit/adf-schema/steps';
-import { Command } from '@atlaskit/editor-common/types';
+} from '@atlaskit/custom-steps';
+import type { Command } from '@atlaskit/editor-common/types';
 import { createCompareNodes } from '@atlaskit/editor-common/utils';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import {
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type {
   EditorState,
-  Selection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   convertArrayOfRowsToTableNode,
@@ -22,7 +22,7 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
-import { TablePluginState } from '../types';
+import type { TablePluginState } from '../types';
 
 const createGetInlineCardTextFromStore = (
   attrs: CardAttributes,

package/src/plugins/table/commands-with-analytics.ts

@@ -1,5 +1,6 @@
-import { tableBackgroundColorPalette, TableLayout } from '@atlaskit/adf-schema';
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
@@ -15,9 +16,9 @@ import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 import {
   findCellClosestToPos,
   findCellRectClosestToPos,
@@ -43,9 +44,13 @@ import {
 } from './commands/toggle';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
-import { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
+import type { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
 import { deleteColumns, deleteRows, mergeCells } from './transforms';
-import { InsertRowMethods, InsertRowOptions, RowInsertPosition } from './types';
+import type {
+  InsertRowMethods,
+  InsertRowOptions,
+  RowInsertPosition,
+} from './types';
 import {
   checkIfNumberColumnEnabled,
   getSelectedCellInfo,

package/src/plugins/table/handlers.ts

@@ -1,21 +1,20 @@
 // #region Imports
-import { TableColumnOrdering, TableSortStep } from '@atlaskit/adf-schema/steps';
+import { TableSortStep } from '@atlaskit/custom-steps';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import { isTextInput } from '@atlaskit/editor-common/utils';
-import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import {
-  ContentNodeWithPos,
-  findParentNodeOfType,
-} from '@atlaskit/editor-prosemirror/utils';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
 import { defaultTableSelection } from './pm-plugins/default-table-selection';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
-import { TablePluginState } from './types';
+import type { TablePluginState } from './types';
 import { isTableCollapsible } from './utils/collapse';
 import {
   checkIfHeaderColumnEnabled,

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 
-import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,

package/src/plugins/table/nodeviews/table.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';

package/src/plugins/table/toolbar.tsx

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {

package/src/plugins/table/transforms/delete-columns.ts

@@ -1,5 +1,5 @@
 import type { CellAttributes } from '@atlaskit/adf-schema';
-import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { AddColumnStep } from '@atlaskit/custom-steps';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';

package/src/plugins/table/types.ts

@@ -6,7 +6,7 @@ import {
   tableHeaderSelector,
   tablePrefixSelector,
 } from '@atlaskit/adf-schema';
-import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -11,7 +11,7 @@ type DropdownItem = MenuItem & {
   };
 };
 
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {

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

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 
-import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverRows, selectRow } from '../../commands';
-import { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';

package/src/plugins/table/ui/common-styles.ts

@@ -194,6 +194,50 @@ const breakoutWidthStyling = () => {
   `;
 };
 
+const tableBorderStyles = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return `border-color: ${tableBorderDeleteColor(props)}`;
+  } else {
+    return `border: 1px solid ${tableBorderDeleteColor(props)}`;
+  }
+};
+
+const tableStickyHeaderColumnControlsDecorationsStyle = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css`
+      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        z-index: 0;
+        left: -1px;
+      }
+
+      .${ClassName.TABLE_STICKY}
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+        border-left: 1px solid ${tableBorderColor(props)};
+      }
+
+      .${ClassName.TABLE_STICKY}
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            left: 0;
+          }
+        }
+      }
+    `;
+  } else {
+    return css`
+      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        z-index: 0;
+      }
+    `;
+  }
+};
+
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -323,9 +367,7 @@ export const tableStyles = (
       width: ${tableToolbarSize}px;
     }
 
-    .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-      z-index: 0;
-    }
+    ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
@@ -798,7 +840,7 @@ export const tableStyles = (
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          border: 1px solid ${tableBorderDeleteColor(props)};
+          ${tableBorderStyles(props)};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }