@atlaskit/editor-plugin-table 2.0.0 → 2.1.0

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

@@ -7,11 +7,9 @@ import {
   doc,
   p,
   table,
-  h1,
   tr,
   td,
   th,
-  strong,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
@@ -20,8 +18,6 @@ import {
 } from '../../plugins/table/types';
 import { uuid } from '@atlaskit/adf-schema';
 import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
-import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatting';
-import blockTypePlugin from '@atlaskit/editor-core/src/plugins/block-type';
 import { sortByColumn } from '../../plugins/table/commands';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../plugins/table-plugin';
@@ -56,9 +52,7 @@ describe('table plugin', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
-    .add([tablePlugin, { tableOptions }])
-    .add(textFormattingPlugin)
-    .add(blockTypePlugin);
+    .add([tablePlugin, { tableOptions }]);
 
   const editor = (doc: DocBuilder) => {
     return createEditor<TablePluginState, PluginKey>({
@@ -75,11 +69,11 @@ describe('table plugin', () => {
           doc(
             table({ isNumberColumnEnabled: false, layout: 'default' })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('c')),
@@ -139,11 +133,11 @@ describe('table plugin', () => {
               localId: TABLE_LOCAL_ID,
             })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('1')),
@@ -196,11 +190,11 @@ describe('table plugin', () => {
           doc(
             table({ isNumberColumnEnabled: false, layout: 'default' })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('c')),
@@ -260,11 +254,11 @@ describe('table plugin', () => {
               localId: TABLE_LOCAL_ID,
             })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('c')),
@@ -312,127 +306,6 @@ describe('table plugin', () => {
           ),
         );
       });
-      it('sorts the given column with header text in ascending order', () => {
-        const { editorView } = editor(
-          doc(
-            table({ isNumberColumnEnabled: false, layout: 'default' })(
-              tr(
-                th({})(h1(strong('asdasdasd'))),
-                th({})(p(strong('asdasd'))),
-                th({})(p(strong('sdfsdf'))),
-                th({})(p('sdfsdfsdf')),
-                th({})(p(strong('asdasda'))),
-              ),
-              tr(
-                td({})(h1(strong('c'))),
-                td({})(p('cda')),
-                td({})(p()),
-                td({})(p('cz')),
-                td({})(p()),
-              ),
-              tr(
-                td({})(h1(strong('b'))),
-                td({})(p()),
-                td({})(p('dfsf')),
-                td({})(p()),
-                td({})(p('cvsd')),
-              ),
-              tr(
-                td({})(p(strong('a'))),
-                td({})(p('zc')),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('fsdf')),
-              ),
-              tr(
-                td({})(p(strong('2'))),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p(strong('1'))),
-                td({})(p()),
-                td({})(p('cxzcz')),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('sdfs')),
-                td({})(p()),
-              ),
-            ),
-          ),
-        );
-
-        const sortByColumnCommand = sortByColumn(0, SortOrder.ASC);
-
-        sortByColumnCommand(editorView.state, editorView.dispatch);
-
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            table({
-              isNumberColumnEnabled: false,
-              layout: 'default',
-              localId: TABLE_LOCAL_ID,
-            })(
-              tr(
-                th({})(h1(strong('asdasdasd'))),
-                th({})(p(strong('asdasd'))),
-                th({})(p(strong('sdfsdf'))),
-                th({})(p('sdfsdfsdf')),
-                th({})(p(strong('asdasda'))),
-              ),
-              tr(
-                td({})(p(strong('1'))),
-                td({})(p()),
-                td({})(p('cxzcz')),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p(strong('2'))),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p(strong('a'))),
-                td({})(p('zc')),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('fsdf')),
-              ),
-              tr(
-                td({})(h1(strong('b'))),
-                td({})(p()),
-                td({})(p('dfsf')),
-                td({})(p()),
-                td({})(p('cvsd')),
-              ),
-              tr(
-                td({})(h1(strong('c'))),
-                td({})(p('cda')),
-                td({})(p()),
-                td({})(p('cz')),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('sdfs')),
-                td({})(p()),
-              ),
-            ),
-          ),
-        );
-      });
 
       describe('case sensitivity', () => {
         describe('ascending order', () => {

package/src/__tests__/unit/utils/collapse.ts

@@ -12,22 +12,17 @@ import {
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
 import tablePlugin from '../../../plugins/table';
-import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
-import {
-  isTableCollapsible,
-  collapseSelectedTable,
-} from '../../../plugins/table/utils/collapse';
+import { isTableCollapsible } from '../../../plugins/table/utils/collapse';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();
 
-  const editor = (doc: DocBuilder, expandInPlugins?: boolean) => {
+  const editor = (doc: DocBuilder) => {
     const preset = new Preset<LightEditorPlugin>()
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
@@ -35,11 +30,7 @@ describe('collapse', () => {
       .add(widthPlugin)
       .add(tablePlugin);
 
-    const finalPreset = expandInPlugins
-      ? preset.add(decorationsPlugin).add(expandPlugin)
-      : preset;
-
-    return createEditor({ doc, preset: finalPreset });
+    return createEditor({ doc, preset });
   };
 
   describe('isTableCollapsible', () => {
@@ -55,32 +46,5 @@ describe('collapse', () => {
       expect(newTr.steps.length).toEqual(0);
       expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(false);
     });
-
-    it('should allow collapsing a table when expands are in schema', () => {
-      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))), true);
-      const editorView = editorData.editorView;
-      const newTr = editorView.state.tr;
-
-      expect(newTr.steps.length).toEqual(0);
-
-      const isTableCollapsibleRes = isTableCollapsible(newTr);
-
-      expect(newTr.steps.length).toEqual(0);
-      expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(true);
-    });
-  });
-
-  describe('collapseSelectedTable', () => {
-    it('should add steps to tr when called', () => {
-      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))), true);
-      const editorView = editorData.editorView;
-      const newTr = editorView.state.tr;
-
-      expect(newTr.steps.length).toEqual(0);
-
-      const collapseTr = collapseSelectedTable(newTr);
-      expect(collapseTr).toBeDefined();
-      expect(collapseTr!.steps.length).toEqual(1);
-    });
   });
 });

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

@@ -48,7 +48,6 @@ import {
 import type { TableOptions } from './types';
 import { updateOverflowShadows } from './update-overflow-shadows';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
@@ -151,7 +150,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
        * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
        * Instead we use the resize event to only trigger updates when necessary.
        */
-      window.addEventListener('resize', this.handleWindowResizeDebounced);
+      if (!getBooleanFF('platform.editor.custom-table-width')) {
+        window.addEventListener('resize', this.handleWindowResizeDebounced);
+      }
       this.handleTableResizingDebounced();
     }
 
@@ -175,9 +176,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.scaleTableDebounced.cancel();
     this.handleTableResizingDebounced.cancel();
     this.handleAutoSizeDebounced.cancel();
-    this.handleWindowResizeDebounced.cancel();
+    if (!getBooleanFF('platform.editor.custom-table-width')) {
+      this.handleWindowResizeDebounced.cancel();
+    }
 
-    if (this.props.allowColumnResizing) {
+    if (
+      !getBooleanFF('platform.editor.custom-table-width') &&
+      this.props.allowColumnResizing
+    ) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
 

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

@@ -14,6 +14,7 @@ import { calcTableWidth } from '@atlaskit/editor-common/styles';
 
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 
 interface GetMarginLeftOpts {
   lineLength: number;
@@ -35,22 +36,21 @@ const getMarginLeft = ({ lineLength, tableWidth }: GetMarginLeftOpts) => {
 
 type InnerContainerProps = {
   className: string;
-  marginLeft: number | undefined;
-  width: number | 'inherit';
+  style?: {
+    width: number | 'inherit';
+    marginLeft: number | undefined;
+  };
   node: PMNode;
 };
 
 export const InnerContainer = forwardRef<
   HTMLDivElement,
   PropsWithChildren<InnerContainerProps>
->(({ marginLeft, className, width, node, children }, ref) => {
+>(({ className, style, node, children }, ref) => {
   return (
     <div
       ref={ref}
-      style={{
-        width,
-        marginLeft,
-      }}
+      style={style}
       className={className}
       data-number-column={node.attrs.isNumberColumnEnabled}
       data-layout={node.attrs.layout}
@@ -76,6 +76,7 @@ export const ResizableTableContainer = ({
   className,
   node,
   lineLength,
+  containerWidth,
   editorView,
   getPos,
   tableRef,
@@ -89,25 +90,32 @@ export const ResizableTableContainer = ({
         return;
       }
 
-      innerContainerRef.current.style.width = `${width}px`;
-
       const marginLeft = getMarginLeft({
         lineLength,
         tableWidth: width,
       });
 
-      containerRef.current.style.width = `${width}px`;
-      containerRef.current.style.marginLeft = `${marginLeft}px`;
+      if (marginLeft) {
+        containerRef.current.style.marginLeft = `${marginLeft}px`;
+      }
     },
     [lineLength],
   );
 
-  const width = getTableContainerWidth(node);
+  const tableWidth = getTableContainerWidth(node);
+
+  // 76 is currently an accepted padding value considering the spacing for resizer handle
+  const responsiveContainerWidth = containerWidth - 76;
+
+  const width = Math.min(tableWidth, responsiveContainerWidth);
+
   const marginLeft = getMarginLeft({
     lineLength,
     tableWidth: width,
   });
 
+  const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+
   return (
     <div
       style={{ marginLeft, width }}
@@ -116,6 +124,7 @@ export const ResizableTableContainer = ({
     >
       <TableResizer
         width={width}
+        maxWidth={maxResizerWidth}
         updateWidth={updateWidth}
         editorView={editorView}
         getPos={getPos}
@@ -126,8 +135,6 @@ export const ResizableTableContainer = ({
           ref={innerContainerRef}
           className={className}
           node={node}
-          width={width}
-          marginLeft={0}
         >
           {children}
         </InnerContainer>
@@ -188,11 +195,13 @@ export const TableContainer = ({
     <InnerContainer
       node={node}
       className={className}
-      width={tableWidth}
-      marginLeft={getMarginLeft({
-        lineLength: lineLength!,
-        tableWidth,
-      })}
+      style={{
+        width: tableWidth,
+        marginLeft: getMarginLeft({
+          lineLength: lineLength!,
+          tableWidth,
+        }),
+      }}
     >
       {children}
     </InnerContainer>

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

@@ -10,11 +10,11 @@ import {
   previewScaleTable,
   getColgroupChildrenLength,
   COLUMN_MIN_WIDTH,
-  TABLE_MAX_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
 
 interface TableResizerProps {
   width: number;
+  maxWidth: number;
   updateWidth: (width: number) => void;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -27,6 +27,7 @@ const handles = { right: true };
 export const TableResizer = ({
   children,
   width,
+  maxWidth,
   updateWidth,
   editorView,
   getPos,
@@ -99,7 +100,7 @@ export const TableResizer = ({
       }}
       resizeRatio={2}
       minWidth={minColumnWidth}
-      maxWidth={TABLE_MAX_WIDTH}
+      maxWidth={maxWidth}
     >
       {children}
     </ResizerNext>

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

@@ -29,16 +29,22 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
 import { Props, TableOptions } from './types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
 const tableAttributes = (node: PmNode) => {
+  const style = getBooleanFF('platform.editor.custom-table-width')
+    ? `width: ${getTableContainerWidth(node)}px`
+    : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width,
+    style,
   };
 };
 

package/src/plugins/table/pm-plugins/table-resizing/utils/scale-table.ts

@@ -5,6 +5,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
 import type { DomAtPos } from 'prosemirror-utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
@@ -152,7 +153,15 @@ export const previewScaleTable = (
 ) => {
   const { node, start, parentWidth } = options;
 
-  if (!tableRef || !hasTableBeenResized(node)) {
+  if (!tableRef) {
+    return;
+  }
+
+  if (getBooleanFF('platform.editor.custom-table-width') && parentWidth) {
+    tableRef.style.width = `${parentWidth}px`;
+  }
+
+  if (!hasTableBeenResized(node)) {
     return;
   }
 

package/.eslintrc.js

@@ -1,37 +0,0 @@
-module.exports = {
-  rules: {
-    // Ensure the table plugin is not coupled to editor-core and avoid circular dependencies
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          {
-            group: ['@atlaskit/editor-core/*', '@atlaskit/editor-core'],
-            message:
-              'Importing editor-core is not allowed in editor-plugin-table. Consider using editor-common instead.',
-          },
-        ],
-      },
-    ],
-    'react/no-danger': 'error',
-  },
-  // Disable restricted import for tests
-  overrides: [
-    {
-      files: ['**/__tests__/**/*.{js,ts,tsx}', 'examples/**/*.{js,ts,tsx}'],
-      rules: {
-        'no-restricted-imports': [
-          'off',
-          {
-            patterns: [
-              {
-                group: ['@atlaskit/editor-core/*', '@atlaskit/editor-core'],
-              },
-            ],
-          },
-        ],
-        'react/no-danger': 'off',
-      },
-    },
-  ],
-};

package/src/__tests__/unit/color-picker.ts

@@ -1,110 +0,0 @@
-import {
-  doc,
-  DocBuilder,
-  p,
-  table,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-import {
-  createProsemirrorEditorFactory,
-  LightEditorPlugin,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type {
-  FloatingToolbarButton,
-  FloatingToolbarItem,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
-import dataConsumerPlugin from '@atlaskit/editor-core/src/plugins/data-consumer';
-import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
-import tablePlugin from '../../plugins/table';
-import { setEditorFocus, setTableRef } from '../../plugins/table/commands';
-import { getToolbarConfig } from '../../plugins/table/toolbar';
-import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-
-const formatMessage: (t: { id: string }) => string = (message) =>
-  `${message.id}`;
-
-describe('color picker', () => {
-  /**
-   * Use `createEditorFactory` here to enable referentiality as
-   * `createProsemirrorEditorFactory` has some issues with correctly mimicking
-   * old state for the unique localId plugin
-   */
-  const createEditorFn = createProsemirrorEditorFactory();
-  const createEditor = (doc: DocBuilder) => {
-    const output = createEditorFn({
-      doc,
-
-      attachTo: document.body,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(decorationsPlugin)
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(dataConsumerPlugin)
-        .add(extensionPlugin)
-        .add(tablePlugin),
-    });
-
-    // Prep the table plugin state a little
-    const { editorView } = output;
-    const { dispatch } = editorView;
-    const tableRef = document.querySelector(
-      '.ProseMirror table',
-    ) as HTMLTableElement;
-    setEditorFocus(true)(output.editorView.state, dispatch);
-    setTableRef(tableRef)(output.editorView.state, dispatch);
-
-    return output;
-  };
-
-  it('should return a corect color picker option if allowBackgroundColor enabled', async () => {
-    const { editorView } = createEditor(
-      doc(p('text'), table()(tr(tdCursor, tdEmpty))),
-    );
-    const getEditorContainerWidth = () => ({ width: 500 });
-    const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
-      attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
-    };
-
-    // Enable tableCellOptionsInFloatingToolbar
-    const getEditorFeatureFlags: GetEditorFeatureFlags = jest
-      .fn()
-      .mockReturnValue({
-        tableCellOptionsInFloatingToolbar: true,
-      });
-
-    // Enable allowBackgroundColor feature flag
-    const { state } = editorView;
-    (state as any).tablePlugin$.pluginConfig.allowBackgroundColor = true;
-
-    // Create the editor
-    const config = getToolbarConfig(
-      getEditorContainerWidth,
-      editorAnalyticsAPIFake,
-      getEditorFeatureFlags,
-      () => editorView,
-    )({})(state, { formatMessage } as any, {} as any)!;
-
-    // Let's find the colorPicker from the option items list
-    const items =
-      typeof config.items === 'function'
-        ? config.items(state.doc.firstChild!)
-        : config.items;
-
-    const option = items.find(
-      (item: FloatingToolbarItem<any>) =>
-        item.type === 'select' && item.id === 'editor.table.colorPicker',
-    )! as FloatingToolbarButton<any>;
-    expect(option).not.toBeUndefined();
-  });
-});