@atlaskit/editor-plugin-table 2.3.0 → 2.4.0

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

@@ -1,5 +1,11 @@
 // #region Imports
 import { Selection, Transaction } from 'prosemirror-state';
+import { safeInsert } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+
+import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { Command } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   addColumnAt as addColumnAtPMUtils,
@@ -8,16 +14,11 @@ import {
   findTable,
   selectedRect,
 } from '@atlaskit/editor-tables/utils';
-import { safeInsert } from 'prosemirror-utils';
 
-import { AddColumnStep } from '@atlaskit/adf-schema/steps';
-
-import { Command } from '@atlaskit/editor-common/types';
+import { rescaleColumns } from '../transforms/column-width';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
-import { rescaleColumns } from '../transforms/column-width';
-import { EditorView } from 'prosemirror-view';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+
 // #endregion
 
 function addColumnAtCustomStep(column: number) {

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

@@ -1,36 +1,33 @@
 // #region Imports
 import { Node as PMNode, Schema, Slice } from 'prosemirror-model';
 import { TextSelection, Transaction } from 'prosemirror-state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { ContentNodeWithPos } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+
+import { CellAttributes } from '@atlaskit/adf-schema';
+import { Command } from '@atlaskit/editor-common/types';
+import {
+  closestElement,
+  isParagraph,
+  isTextSelection,
+  mapSlice,
+} from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
-  selectionCell,
   findCellClosestToPos,
   findTable,
   getCellsInColumn,
   getCellsInRow,
   getSelectionRect,
   isSelectionType,
+  isTableSelected,
   removeTable,
   selectColumn as selectColumnTransform,
+  selectionCell,
   selectRow as selectRowTransform,
   setCellAttrs,
-  isTableSelected,
 } from '@atlaskit/editor-tables/utils';
-import { ContentNodeWithPos } from 'prosemirror-utils';
-
-import { EditorView } from 'prosemirror-view';
-
-import { CellAttributes } from '@atlaskit/adf-schema';
-
-import { Command } from '@atlaskit/editor-common/types';
-
-import {
-  isParagraph,
-  isTextSelection,
-  closestElement,
-  mapSlice,
-} from '@atlaskit/editor-common/utils';
 
 import { getDecorations } from '../pm-plugins/decorations/plugin';
 import { buildColumnResizingDecorations } from '../pm-plugins/decorations/utils';
@@ -42,9 +39,9 @@ import {
   createColumnSelectedDecoration,
 } from '../utils/decoration';
 import {
-  checkIfNumberColumnEnabled,
   checkIfHeaderColumnEnabled,
   checkIfHeaderRowEnabled,
+  checkIfNumberColumnEnabled,
   isIsolating,
 } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';

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

@@ -1,7 +1,9 @@
-import { createCommand } from '../pm-plugins/plugin-factory';
 import { Node as PMNode } from 'prosemirror-model';
+
 import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
 
+import { createCommand } from '../pm-plugins/plugin-factory';
+
 export const removeDescendantNodes = (sourceNode: PMNode) =>
   createCommand(
     {

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

@@ -1,17 +1,18 @@
-import { TextSelection, Selection } from 'prosemirror-state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { ResolvedPos, Node as PmNode } from 'prosemirror-model';
-import type { Command } from '@atlaskit/editor-common/types';
+import { Node as PmNode, ResolvedPos } from 'prosemirror-model';
+import { Selection, TextSelection } from 'prosemirror-state';
+
 import {
-  RelativeSelectionPos,
+  EditorSelectionAPI,
   GapCursorSelection,
-  Side,
-  isSelectionAtStartOfNode,
   isSelectionAtEndOfNode,
-  EditorSelectionAPI,
+  isSelectionAtStartOfNode,
+  RelativeSelectionPos,
+  Side,
 } from '@atlaskit/editor-common/selection';
+import type { Command } from '@atlaskit/editor-common/types';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 
 export enum TableSelectionDirection {
   TopToBottom = 'TopToBottom',

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

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

package/src/plugins/table/commands/split-cell.ts

@@ -1,6 +1,6 @@
+import { Command } from '@atlaskit/editor-common/types';
 import { splitCellWithType } from '@atlaskit/editor-tables/utils';
 
-import { Command } from '@atlaskit/editor-common/types';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TablePluginState } from '../types';
 

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

@@ -1,11 +1,10 @@
 //#region Imports
 import { Transaction } from 'prosemirror-state';
-import { toggleHeader } from '@atlaskit/editor-tables/utils';
-import { findTable } from '@atlaskit/editor-tables/utils';
 
 import { TableLayout } from '@atlaskit/adf-schema';
-
 import { Command } from '@atlaskit/editor-common/types';
+import { findTable, toggleHeader } from '@atlaskit/editor-tables/utils';
+
 import { createCommand } from '../pm-plugins/plugin-factory';
 //#endregion
 

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

@@ -1,15 +1,7 @@
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { Rect } from '@atlaskit/editor-tables/table-map';
-import {
-  findCellClosestToPos,
-  findCellRectClosestToPos,
-  getSelectionRect,
-} from '@atlaskit/editor-tables/utils';
 import { Selection } from 'prosemirror-state';
 
 import { tableBackgroundColorPalette, TableLayout } from '@atlaskit/adf-schema';
-
-import type { Command } from '@atlaskit/editor-common/types';
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
@@ -21,14 +13,25 @@ import type {
   AnalyticsEventPayload,
   EditorAnalyticsAPI,
 } from '@atlaskit/editor-common/analytics';
+import type {
+  Command,
+  GetEditorContainerWidth,
+} from '@atlaskit/editor-common/types';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+import {
+  findCellClosestToPos,
+  findCellRectClosestToPos,
+  getSelectionRect,
+} from '@atlaskit/editor-tables/utils';
 
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
 import { insertColumn, insertRow } from './commands/insert';
 import {
   deleteTable,
-  setMultipleCellAttrs,
   deleteTableIfSelected,
+  setMultipleCellAttrs,
 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
@@ -39,12 +42,11 @@ import {
   toggleNumberColumn,
   toggleTableLayout,
 } from './commands/toggle';
-import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
 import { getPluginState } from './pm-plugins/plugin-factory';
+import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
+import { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
 import { deleteColumns, deleteRows, mergeCells } from './transforms';
 import { InsertRowMethods, InsertRowOptions, RowInsertPosition } from './types';
-
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import {
   checkIfNumberColumnEnabled,
   getSelectedCellInfo,
@@ -52,8 +54,6 @@ import {
 } from './utils';
 import { withEditorAnalyticsAPI } from './utils/analytics';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
-import { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 
 const TABLE_BREAKOUT_NAME_MAPPING = {
   default: TABLE_BREAKOUT.NORMAL,

package/src/plugins/table/event-handlers.ts

@@ -5,6 +5,22 @@ import {
   TextSelection,
   Transaction,
 } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import {
+  browser,
+  closestElement,
+  isElementInTableCell,
+  isLastItemMediaGroup,
+  setNodeSelection,
+} from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
@@ -14,22 +30,6 @@ import {
   getSelectionRect,
   removeTable,
 } from '@atlaskit/editor-tables/utils';
-import { EditorView } from 'prosemirror-view';
-
-import { browser } from '@atlaskit/editor-common/utils';
-
-import {
-  isElementInTableCell,
-  isLastItemMediaGroup,
-  setNodeSelection,
-} from '@atlaskit/editor-common/utils';
-import { closestElement } from '@atlaskit/editor-common/utils';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import {
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  TABLE_ACTION,
-} from '@atlaskit/editor-common/analytics';
 
 import {
   addResizeHandleDecorations,
@@ -47,26 +47,25 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import {
-  RESIZE_HANDLE_AREA_DECORATION_GAP,
   ElementContentRects,
+  RESIZE_HANDLE_AREA_DECORATION_GAP,
 } from './types';
 import {
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,
   getSelectedCellInfo,
+  hasResizeHandler,
   isCell,
   isColumnControlsDecorations,
   isCornerButton,
   isInsertRowButton,
   isResizeHandleDecoration,
   isRowControlsButton,
-  isTableControlsButton,
   isTableContainerOrWrapper,
-  hasResizeHandler,
+  isTableControlsButton,
 } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
 const isFocusingCalendar = (event: Event) =>
   event instanceof FocusEvent &&

package/src/plugins/table/handlers.ts

@@ -1,22 +1,21 @@
 // #region Imports
+import { NodeType } from 'prosemirror-model';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
+import { ReadonlyTransaction, Transaction } from 'prosemirror-state';
 import { ContentNodeWithPos, findParentNodeOfType } from 'prosemirror-utils';
-import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { TableColumnOrdering, TableSortStep } from '@atlaskit/adf-schema/steps';
 import { isTextInput } from '@atlaskit/editor-common/utils';
-import { isTableCollapsible } from './utils/collapse';
+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 { TableColumnOrdering, TableSortStep } from '@atlaskit/adf-schema/steps';
-import { NodeType } from 'prosemirror-model';
-// #endregion
+import { isTableCollapsible } from './utils/collapse';
 import {
-  checkIfNumberColumnEnabled,
   checkIfHeaderColumnEnabled,
   checkIfHeaderRowEnabled,
+  checkIfNumberColumnEnabled,
 } from './utils/nodes';
 
 const nextTableSorting = (

package/src/plugins/table/index.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
 
+import { Transaction } from 'prosemirror-state';
 import type { EditorView } from 'prosemirror-view';
 
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { browser } from '@atlaskit/editor-common/utils';
-import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
-import { createTable } from '@atlaskit/editor-tables/utils';
-
 import {
   table,
   tableCell,
@@ -14,11 +10,6 @@ import {
   tableRow,
   tableWithCustomWidth,
 } from '@atlaskit/adf-schema';
-
-import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
-
-import type { EditorPlugin, Command } from '@atlaskit/editor-common/types';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import {
   ACTION,
   ACTION_SUBJECT,
@@ -28,33 +19,49 @@ import {
   INPUT_METHOD,
   TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
-
+import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
+import type {
+  Command,
+  EditorPlugin,
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+  NextEditorPlugin,
+} from '@atlaskit/editor-common/types';
+import { browser } from '@atlaskit/editor-common/utils';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
+import { createTable } from '@atlaskit/editor-tables/utils';
 
 import { pluginConfig } from './create-plugin-config';
-import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import {
-  pluginKey as tableWidthPluginKey,
-  createPlugin as createTableWidthPlugin,
-} from './pm-plugins/table-width';
-import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
-import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import {
   createPlugin as createStickyHeadersPlugin,
   findStickyHeaderForTable,
   pluginKey as stickyHeadersPluginKey,
 } from './pm-plugins/sticky-headers';
+import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import {
   createPlugin as createFlexiResizingPlugin,
   pluginKey as tableResizingPluginKey,
 } from './pm-plugins/table-resizing';
+import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
+import {
+  createPlugin as createTableWidthPlugin,
+  pluginKey as tableWidthPluginKey,
+} from './pm-plugins/table-width';
 import { getToolbarConfig } from './toolbar';
 import { ColumnResizingPluginState, PluginConfig } from './types';
 import FloatingContextualButton from './ui/FloatingContextualButton';
@@ -63,21 +70,12 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
-import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-  NextEditorPlugin,
-} from '@atlaskit/editor-common/types';
-import { Transaction } from 'prosemirror-state';
-import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import type { widthPlugin } from '@atlaskit/editor-plugin-width';
-import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
+  // experimental custom table resizing experience, set inside editor-core behind a feature flag
+  // will eventually replace breakoutEnabled
+  tableResizingEnabled?: boolean;
   breakoutEnabled?: boolean;
   allowContextualMenu?: boolean;
   // TODO these two need to be rethought
@@ -142,7 +140,7 @@ const tablesPlugin: NextEditorPlugin<
     },
 
     nodes() {
-      const tableNode = getBooleanFF('platform.editor.custom-table-width')
+      const tableNode = options?.tableResizingEnabled
         ? tableWithCustomWidth
         : table;
 
@@ -167,6 +165,7 @@ const tablesPlugin: NextEditorPlugin<
             const {
               fullWidthEnabled,
               wasFullWidthEnabled,
+              tableResizingEnabled,
               breakoutEnabled,
               tableOptions,
               getEditorFeatureFlags,
@@ -181,6 +180,7 @@ const tablesPlugin: NextEditorPlugin<
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
               breakoutEnabled,
               fullWidthEnabled,
+              tableResizingEnabled,
               wasFullWidthEnabled,
               editorAnalyticsAPI,
               api,
@@ -262,7 +262,7 @@ const tablesPlugin: NextEditorPlugin<
         {
           name: 'tableWidth',
           plugin: ({ dispatch }) =>
-            getBooleanFF('platform.editor.custom-table-width')
+            options?.tableResizingEnabled
               ? createTableWidthPlugin(
                   dispatch,
                   options?.fullWidthEnabled ?? false,
@@ -353,25 +353,25 @@ const tablesPlugin: NextEditorPlugin<
                 ? findStickyHeaderForTable(stickyHeadersState, tablePos)
                 : undefined;
 
-              const LayoutContent = getBooleanFF(
-                'platform.editor.custom-table-width',
-              ) ? null : isLayoutSupported(state) &&
+              const LayoutContent =
                 options &&
+                !options.tableResizingEnabled &&
+                isLayoutSupported(state) &&
                 options.breakoutEnabled ? (
-                <LayoutButton
-                  editorView={editorView}
-                  mountPoint={popupsMountPoint}
-                  boundariesElement={popupsBoundariesElement}
-                  scrollableElement={popupsScrollableElement}
-                  targetRef={tableWrapperTarget!}
-                  layout={layout}
-                  isResizing={
-                    !!resizingPluginState && !!resizingPluginState.dragging
-                  }
-                  stickyHeader={stickyHeader}
-                  editorAnalyticsAPI={editorAnalyticsAPI}
-                />
-              ) : null;
+                  <LayoutButton
+                    editorView={editorView}
+                    mountPoint={popupsMountPoint}
+                    boundariesElement={popupsBoundariesElement}
+                    scrollableElement={popupsScrollableElement}
+                    targetRef={tableWrapperTarget!}
+                    layout={layout}
+                    isResizing={
+                      !!resizingPluginState && !!resizingPluginState.dragging
+                    }
+                    stickyHeader={stickyHeader}
+                    editorAnalyticsAPI={editorAnalyticsAPI}
+                  />
+                ) : null;
 
               return (
                 <>

package/src/plugins/table/nodeviews/OverflowShadowsObserver.ts

@@ -1,5 +1,6 @@
-import { ShadowEvent, TableCssClassName as ClassName } from '../types';
+import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
+
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
 
 export class OverflowShadowsObserver {