@atlaskit/editor-plugin-table 7.5.3 → 7.5.5

package/src/nodeviews/table.tsx

@@ -102,7 +102,7 @@ export default class TableView extends ReactNodeView<Props> {
   private resizeObserver?: ResizeObserver;
   eventDispatcher?: EventDispatcher;
   getPos: getPosHandlerNode;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
+  options;
 
   constructor(props: Props) {
     super(
@@ -119,7 +119,7 @@ export default class TableView extends ReactNodeView<Props> {
     );
     this.getPos = props.getPos;
     this.eventDispatcher = props.eventDispatcher;
-    this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    this.options = props.options;
   }
 
   getContentDOM() {
@@ -133,9 +133,8 @@ export default class TableView extends ReactNodeView<Props> {
 
     if (rendered.dom) {
       this.table = rendered.dom;
-      const { tablePreserveWidth = false } = this.getEditorFeatureFlags();
       // Preserve Table Width cannot have inline width set on the table
-      if (!tablePreserveWidth) {
+      if (!this.options?.isTableScalingEnabled) {
         const tableInlineWidth = getInlineWidth(
           this.node,
           this.reactComponentProps.options,
@@ -255,6 +254,7 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
+              isTableScalingEnabled={pluginState!.isTableScalingEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}
@@ -264,7 +264,6 @@ export default class TableView extends ReactNodeView<Props> {
               getEditorFeatureFlags={props.getEditorFeatureFlags}
               dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
               pluginInjectionApi={props.pluginInjectionApi}
-              tableRef={this.table}
             />
           );
         }}
@@ -362,6 +361,7 @@ export const createTableView = (
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
     isDragAndDropEnabled,
+    isTableScalingEnabled,
   } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
@@ -379,6 +379,7 @@ export const createTableView = (
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
       isDragAndDropEnabled,
+      isTableScalingEnabled,
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/src/nodeviews/types.ts

@@ -16,6 +16,7 @@ export type TableOptions = {
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
+  isTableScalingEnabled?: boolean;
 };
 
 export interface Props {

package/src/plugin.tsx

@@ -52,6 +52,7 @@ import {
 } from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
+import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import {
@@ -92,6 +93,7 @@ export interface TablePluginOptions {
   fullWidthEnabled?: boolean;
   wasFullWidthEnabled?: boolean;
   getEditorFeatureFlags?: GetEditorFeatureFlags;
+  isTableScalingEnabled?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -157,8 +159,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         (analyticsPayload): Command =>
         (state, dispatch) => {
           const node = createTableWithWidth(
+            options?.isTableScalingEnabled,
             options?.fullWidthEnabled,
-            options?.getEditorFeatureFlags,
           )(state.schema);
 
           return (
@@ -179,7 +181,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     commands: {
       insertTableWithSize: insertTableWithSize(
         options?.fullWidthEnabled,
-        options?.getEditorFeatureFlags,
+        options?.isTableScalingEnabled,
         api?.analytics?.actions,
       ),
     },
@@ -216,6 +218,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               tableOptions,
               getEditorFeatureFlags,
               dragAndDropEnabled,
+              isTableScalingEnabled,
             } = options || ({} as TablePluginOptions);
             return createPlugin(
               dispatchAnalyticsEvent,
@@ -233,6 +236,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               dragAndDropEnabled,
               editorAnalyticsAPI,
               api,
+              isTableScalingEnabled,
             );
           },
         },
@@ -261,14 +265,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tableKeymap',
           plugin: () => {
-            const { dragAndDropEnabled, getEditorFeatureFlags } =
+            const { dragAndDropEnabled, isTableScalingEnabled = false } =
               options || ({} as TablePluginOptions);
 
             return keymapPlugin(
               defaultGetEditorContainerWidth,
               editorAnalyticsAPI,
-              getEditorFeatureFlags,
               dragAndDropEnabled,
+              isTableScalingEnabled,
             );
           },
         },
@@ -308,26 +312,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           name: 'tableStickyHeaders',
           plugin: ({ dispatch, eventDispatcher }) =>
             options && options.tableOptions.stickyHeaders
-              ? createStickyHeadersPlugin(
-                  dispatch,
-                  eventDispatcher,
-                  () => [],
-                  options?.getEditorFeatureFlags ||
-                    defaultGetEditorFeatureFlags,
-                )
+              ? createStickyHeadersPlugin(dispatch, () => [])
               : undefined,
         },
         {
           name: 'tableDragAndDrop',
           plugin: ({ dispatch }) => {
-            const { getEditorFeatureFlags } =
-              options || ({} as TablePluginOptions);
             return options?.dragAndDropEnabled
-              ? createDragAndDropPlugin(
-                  dispatch,
-                  getEditorFeatureFlags,
-                  editorAnalyticsAPI,
-                )
+              ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI)
               : undefined;
           },
         },
@@ -343,7 +335,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   dispatch,
                   dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
-                  options?.getEditorFeatureFlags,
                 )
               : undefined,
         },
@@ -511,10 +502,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       dispatchAnalyticsEvent={dispatchAnalyticsEvent}
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
-                      getEditorFeatureFlags={
-                        options?.getEditorFeatureFlags ||
-                        defaultGetEditorFeatureFlags
-                      }
                     />
                   )}
                   {options?.allowContextualMenu && (
@@ -548,10 +535,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       stickyHeaders={stickyHeader}
                       pluginConfig={pluginConfig}
-                      getEditorFeatureFlags={
-                        options?.getEditorFeatureFlags ||
-                        defaultGetEditorFeatureFlags
-                      }
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (
@@ -591,11 +574,12 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           action(insert, state) {
             // see comment on tablesPlugin.getSharedState on usage
             const tableState = api?.table?.sharedState.currentState();
+            const { isTableScalingEnabled = false } = getPluginState(state);
 
             const tr = insert(
               createTableWithWidth(
+                isTableScalingEnabled,
                 tableState?.isFullWidthModeEnabled,
-                options?.getEditorFeatureFlags,
               )(state.schema),
             );
             editorAnalyticsAPI?.attachAnalyticsEvent({

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -2,7 +2,6 @@ import { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -34,11 +33,7 @@ import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
 
-const destroyFn = (
-  editorView: EditorView,
-  editorAnalyticsAPI: any,
-  getEditorFeatureFlags?: GetEditorFeatureFlags,
-) => {
+const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
   const editorPageScrollContainer = document.querySelector(
     '.fabric-editor-popup-scroll-parent',
   );
@@ -223,9 +218,14 @@ const destroyFn = (
               editorView.state,
             );
             if (tableRef && tableNode) {
-              const { tablePreserveWidth = false } =
-                getEditorFeatureFlags?.() || {};
-              insertColgroupFromNode(tableRef, tableNode, tablePreserveWidth);
+              const { isTableScalingEnabled = false } = getTablePluginState(
+                editorView.state,
+              );
+              insertColgroupFromNode(
+                tableRef,
+                tableNode,
+                isTableScalingEnabled,
+              );
             }
           }
 
@@ -238,7 +238,6 @@ const destroyFn = (
 
 export const createPlugin = (
   dispatch: Dispatch,
-  getEditorFeatureFlags?: GetEditorFeatureFlags,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
 ) => {
   return new SafePlugin({
@@ -311,11 +310,7 @@ export const createPlugin = (
     },
     view: (editorView: EditorView) => {
       return {
-        destroy: destroyFn(
-          editorView,
-          editorAnalyticsAPI,
-          getEditorFeatureFlags,
-        ),
+        destroy: destroyFn(editorView, editorAnalyticsAPI),
       };
     },
     props: {

package/src/pm-plugins/keymap.ts

@@ -30,10 +30,7 @@ import {
   toggleTable,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -72,8 +69,8 @@ const createTableWithAnalytics = (
 export function keymapPlugin(
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-  getEditorFeatureFlags?: GetEditorFeatureFlags,
   dragAndDropEnabled?: boolean,
+  isTableScalingEnabled = false,
 ): SafePlugin {
   const list = {};
 
@@ -121,13 +118,13 @@ export function keymapPlugin(
 
   bindKeymapWithCommand(
     addColumnBefore.common!,
-    addColumnBeforeCommand(getEditorContainerWidth),
+    addColumnBeforeCommand(isTableScalingEnabled),
     list,
   );
 
   bindKeymapWithCommand(
     addColumnAfter.common!,
-    addColumnAfterCommand(getEditorContainerWidth),
+    addColumnAfterCommand(isTableScalingEnabled),
     list,
   );
 
@@ -182,10 +179,6 @@ export function keymapPlugin(
   }
 
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    const { tablePreserveWidth = false } = getEditorFeatureFlags
-      ? getEditorFeatureFlags()
-      : {};
-
     bindKeymapWithCommand(
       startColumnResizing.common!,
       initiateKeyboardColumnResizing,
@@ -201,7 +194,7 @@ export function keymapPlugin(
       changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
         -10,
         getEditorContainerWidth,
-        tablePreserveWidth,
+        isTableScalingEnabled,
         INPUT_METHOD.SHORTCUT,
       ),
       list,
@@ -212,7 +205,7 @@ export function keymapPlugin(
       changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
         10,
         getEditorContainerWidth,
-        tablePreserveWidth,
+        isTableScalingEnabled,
         INPUT_METHOD.SHORTCUT,
       ),
       list,

package/src/pm-plugins/main.ts

@@ -114,6 +114,7 @@ export const createPlugin = (
   dragAndDropEnabled?: boolean,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   pluginInjectionApi?: PluginInjectionAPI,
+  isTableScalingEnabled?: boolean,
 ) => {
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -127,6 +128,7 @@ export const createPlugin = (
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     isDragAndDropEnabled: dragAndDropEnabled,
+    isTableScalingEnabled: isTableScalingEnabled,
     ...defaultHoveredCell,
     ...defaultTableSelection,
     getIntl,
@@ -188,8 +190,6 @@ export const createPlugin = (
         });
       }
 
-      const { tablePreserveWidth = false } = getEditorFeatureFlags();
-
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
         const updatedTr = handleCut(
@@ -198,7 +198,7 @@ export const createPlugin = (
           newState,
           editorAnalyticsAPI,
           editorViewRef || undefined,
-          tablePreserveWidth,
+          isTableScalingEnabled,
         );
         return fixTables(updatedTr) || updatedTr;
       }

package/src/pm-plugins/sticky-headers/plugin.ts

@@ -1,19 +1,10 @@
-import type {
-  Dispatch,
-  EventDispatcher,
-} from '@atlaskit/editor-common/event-dispatcher';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-state';
 
-export const createPlugin = (
-  dispatch: Dispatch,
-  eventDispatcher: EventDispatcher,
-  initialState = () => [],
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => {
+export const createPlugin = (dispatch: Dispatch, initialState = () => []) => {
   return new SafePlugin({
     state: createPluginState(dispatch, initialState),
     key: pluginKey,

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

@@ -49,7 +49,7 @@ export const handleMouseDown = (
   const { state, dispatch } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
-  const { tablePreserveWidth = false } = getEditorFeatureFlags();
+  const { isTableScalingEnabled = false } = getTablePluginState(state);
 
   if (
     editorDisabled ||
@@ -119,7 +119,7 @@ export const handleMouseDown = (
     tableRef: dom,
     start,
     domAtPos,
-    tablePreserveWidth,
+    isTableScalingEnabled: isTableScalingEnabled,
   });
 
   if (
@@ -209,8 +209,9 @@ export const handleMouseDown = (
           colIndex,
           clientX - startX,
           dom,
+          originalTable,
           resizingSelectedColumns ? selectedColumns : undefined,
-          tablePreserveWidth,
+          isTableScalingEnabled,
         );
 
         const resizedDelta = clientX - startX;
@@ -292,8 +293,9 @@ export const handleMouseDown = (
       colIndex,
       clientX - dragging.startX,
       dom,
+      table,
       undefined,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     );
 
     updateControls()(state);

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

@@ -95,7 +95,7 @@ export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
 export const insertColgroupFromNode = (
   tableRef: HTMLTableElement,
   table: PmNode,
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
   shouldRemove = true,
 ): HTMLCollection => {
   let colgroup = tableRef.querySelector('colgroup') as HTMLElement;
@@ -105,7 +105,7 @@ export const insertColgroupFromNode = (
 
   colgroup = renderColgroupFromNode(
     table,
-    tablePreserveWidth ? tableRef : undefined,
+    isTableScalingEnabled ? tableRef : undefined,
   );
   if (shouldRemove) {
     tableRef.insertBefore(colgroup, tableRef.firstChild);

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

@@ -2,3 +2,5 @@ export const COLUMN_MIN_WIDTH = 48;
 export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;
+// Used to calculate the width of a table using the Editor width
+export const TABLE_EDITOR_MARGIN = 76;

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

@@ -31,7 +31,7 @@ export {
   domCellAround,
   getTableMaxWidth,
   getTableElementWidth,
-  getTableContainerElement,
+  getTableContainerElementWidth,
 } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export {

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

@@ -150,9 +150,9 @@ export const getTableElementWidth = (table: PMNode) => {
     return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
   }
 
-  return getTableContainerElement(table);
+  return getTableContainerElementWidth(table);
 };
 
-export const getTableContainerElement = (table: PMNode) => {
+export const getTableContainerElementWidth = (table: PMNode) => {
   return getTableContainerWidth(table);
 };

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,4 +1,6 @@
 // Resize a given column by an amount from the current state
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+
 import { growColumn, shrinkColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 import type { ResizeState } from './types';
@@ -8,8 +10,9 @@ export const resizeColumn = (
   colIndex: number,
   amount: number,
   tableRef: HTMLElement,
+  tableNode: PmNode,
   selectedColumns?: number[],
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
 ): ResizeState => {
   const newState =
     amount > 0
@@ -18,7 +21,7 @@ export const resizeColumn = (
       ? shrinkColumn(resizeState, colIndex, amount, selectedColumns)
       : resizeState;
 
-  updateColgroup(newState, tableRef, tablePreserveWidth);
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
 
   return newState;
 };

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -20,10 +20,14 @@ import {
 import type { ColumnState } from './column-state';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
-import { getTableMaxWidth } from './misc';
+import { getTableContainerElementWidth, getTableMaxWidth } from './misc';
 import type { ResizeState, ResizeStateWithAnalytics } from './types';
 
-import { MAX_SCALING_PERCENT, TABLE_DEFAULT_WIDTH } from './index';
+import {
+  COLUMN_MIN_WIDTH,
+  MAX_SCALING_PERCENT,
+  TABLE_DEFAULT_WIDTH,
+} from './index';
 
 export const getResizeState = ({
   minWidth,
@@ -32,7 +36,7 @@ export const getResizeState = ({
   tableRef,
   start,
   domAtPos,
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
 }: {
   minWidth: number;
   maxSize: number;
@@ -40,7 +44,7 @@ export const getResizeState = ({
   tableRef: HTMLTableElement;
   start: number;
   domAtPos: (pos: number) => { node: Node; offset: number };
-  tablePreserveWidth: boolean;
+  isTableScalingEnabled: boolean;
 }): ResizeState => {
   // If the table has been resized, we can use the column widths from the table node
   if (hasTableBeenResized(table)) {
@@ -63,23 +67,23 @@ export const getResizeState = ({
     };
   }
 
-  const shouldReinsertColgroup = !tablePreserveWidth;
+  const shouldReinsertColgroup = !isTableScalingEnabled;
 
   // Getting the resize state from DOM
   const colgroupChildren = insertColgroupFromNode(
     tableRef,
     table,
-    tablePreserveWidth,
+    isTableScalingEnabled,
     shouldReinsertColgroup, // don't reinsert colgroup when preserving table width - this causes widths to jump
   );
   const cols = Array.from(colgroupChildren).map((_, index) => {
     // If the table hasn't been resized and we have a table width attribute, we can use it
     // to calculate the widths of the columns
-    if (tablePreserveWidth && table.attrs.width) {
+    if (isTableScalingEnabled && table.attrs.width) {
       return {
         index,
         width: table.attrs.width / colgroupChildren.length,
-        minWidth: 48,
+        minWidth: COLUMN_MIN_WIDTH,
       };
     }
     const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
@@ -104,14 +108,15 @@ export const getResizeState = ({
 export const updateColgroup = (
   state: ResizeState,
   tableRef: HTMLElement,
-  tablePreserveWidth?: boolean,
+  tableNode?: PMNode,
+  isTableScalingEnabled?: boolean,
 ): void => {
   const cols = tableRef.querySelectorAll('col');
 
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const columnsCount = cols.length;
-    if (tablePreserveWidth) {
-      const tableWidth = parseInt(tableRef.dataset?.tableWidth || ''); // TODO - get this value from the table node, not the dom
+    if (isTableScalingEnabled && tableNode) {
+      const tableWidth = getTableContainerElementWidth(tableNode);
       if (tableWidth) {
         let renderWidth =
           tableRef.parentElement?.clientWidth || TABLE_DEFAULT_WIDTH;
@@ -349,7 +354,7 @@ export const getNewResizeStateFromSelectedColumns = (
   state: EditorState,
   domAtPos: (pos: number) => { node: Node; offset: number },
   getEditorContainerWidth: GetEditorContainerWidth,
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
 ): ResizeStateWithAnalytics | undefined => {
   // Fail early so that we don't do complex calculations for no reason
   const numColumnsSelected = rect.right - rect.left;
@@ -394,7 +399,7 @@ export const getNewResizeStateFromSelectedColumns = (
     tableRef,
     start: table.start,
     domAtPos,
-    tablePreserveWidth,
+    isTableScalingEnabled,
   });
 
   const newResizeState = evenSelectedColumnsWidths(resizeState, rect);