@atlaskit/editor-plugin-table 7.6.2 → 7.6.3

package/src/plugin.tsx

@@ -28,6 +28,7 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
   NextEditorPlugin,
+  OptionalPlugin,
 } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
@@ -64,6 +65,7 @@ import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import {
   createPlugin as createFlexiResizingPlugin,
+  getPluginState as getFlexiResizingPlugin,
   pluginKey as tableResizingPluginKey,
 } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -72,7 +74,11 @@ import {
   pluginKey as tableWidthPluginKey,
 } from './pm-plugins/table-width';
 import { getToolbarConfig } from './toolbar';
-import type { ColumnResizingPluginState, PluginConfig } from './types';
+import type {
+  ColumnResizingPluginState,
+  PluginConfig,
+  TableSharedState,
+} from './types';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -100,6 +106,17 @@ type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 
 const defaultGetEditorFeatureFlags = () => ({});
 
+// TODO: duplicating type instead of importing media plugin causing a circular dependency
+type MediaPlugin = NextEditorPlugin<
+  'media',
+  {
+    pluginConfiguration: any;
+    dependencies: any;
+    sharedState: any;
+    actions: any;
+  }
+>;
+
 export type TablePlugin = NextEditorPlugin<
   'table',
   {
@@ -107,10 +124,7 @@ export type TablePlugin = NextEditorPlugin<
     actions: {
       insertTable: InsertTableAction;
     };
-    sharedState: {
-      isFullWidthModeEnabled: boolean;
-      wasFullWidthModeEnabled: boolean;
-    };
+    sharedState?: TableSharedState;
     commands: {
       insertTableWithSize: (
         rowsCount: number,
@@ -124,6 +138,7 @@ export type TablePlugin = NextEditorPlugin<
       WidthPlugin,
       GuidelinePlugin,
       SelectionPlugin,
+      OptionalPlugin<MediaPlugin>,
     ];
   }
 >;
@@ -148,10 +163,35 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
     // to most up to date values - passing to createPluginState will not re-initialise the state
-    getSharedState: () => {
+    getSharedState: (editorState) => {
+      if (!editorState) {
+        return undefined;
+      }
+
+      const tablePluginState = getPluginState(editorState);
+      const tableResizingPluginState = getFlexiResizingPlugin(editorState);
+      const tableWidthResizingPluginState =
+        tableWidthPluginKey.getState(editorState);
+
       return {
         isFullWidthModeEnabled: !!options?.fullWidthEnabled,
         wasFullWidthModeEnabled: !!options?.wasFullWidthEnabled,
+        isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
+        isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
+        ordering: tablePluginState.ordering,
+        isResizing: !!(
+          tableResizingPluginState?.dragging ||
+          tableWidthResizingPluginState?.resizing
+        ),
+        isTableResizing: tableWidthResizingPluginState?.resizing,
+        isInDanger: tablePluginState.isInDanger,
+        hoveredRows: tablePluginState.hoveredRows,
+        hoveredCell: tablePluginState.hoveredCell,
+        isTableHovered: tablePluginState.isTableHovered,
+        isWholeTableInDanger: tablePluginState.isWholeTableInDanger,
+        // IMPORTANT: Need to continue to pass tableNode to control re-renders
+        // TableComponent listens for node attribute changes to update colgroups
+        tableNode: tablePluginState.tableNode,
       };
     },
 

package/src/types.ts

@@ -16,7 +16,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 
-import type tablePlugin from './plugin';
+import type { TablePlugin } from './plugin';
 
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,7 +33,32 @@ export interface InsertRowOptions {
   moveCursorToInsertedRow: boolean;
 }
 
-export type PluginInjectionAPI = ExtractInjectionAPI<typeof tablePlugin>;
+export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
+
+// override getPluginState but do not expose publicly as this type is experimental and will change
+// in the future
+export type TableSharedStateInternal = Pick<
+  TablePluginState,
+  | 'isFullWidthModeEnabled'
+  | 'wasFullWidthModeEnabled'
+  | 'isHeaderRowEnabled'
+  | 'isHeaderColumnEnabled'
+  | 'ordering'
+  | 'isInDanger'
+  | 'hoveredRows'
+  | 'hoveredCell'
+  | 'isTableHovered'
+  | 'tableNode'
+> & {
+  isResizing: boolean;
+  isTableResizing?: boolean;
+  isWholeTableInDanger?: boolean;
+};
+
+export type TableSharedState = Pick<
+  TablePluginState,
+  'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'
+>;
 
 export type InsertRowMethods =
   | INPUT_METHOD.CONTEXT_MENU

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -2,7 +2,9 @@
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -16,6 +18,7 @@ import {
   selectColumn,
   selectColumns,
 } from '../../../commands';
+import type { TablePlugin } from '../../../plugin';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
 import type { CellHoverMeta, HandleTypes } from '../../../types';
@@ -69,8 +72,11 @@ export const ColumnControls = ({
   isNumberColumnEnabled,
   isDragging,
   getScrollOffset,
-}: ColumnControlsProps) => {
+  api,
+}: ColumnControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
   const columnControlsRef = useRef<HTMLDivElement>(null);
+  const { selectionState } = useSharedPluginState(api, ['selection']);
+
   const widths =
     colWidths
       ?.map((width) =>
@@ -82,7 +88,9 @@ export const ColumnControls = ({
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths ?? []);
   const colIndex = hoveredCell?.colIndex;
-  const selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  const selectedColIndexes = getSelectedColumns(
+    selectionState?.selection || editorView.state.selection,
+  );
 
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -5,10 +5,15 @@ import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverMeta, DraggableSourceData } from '../../types';
+import type {
+  CellHoverMeta,
+  DraggableSourceData,
+  PluginInjectionAPI,
+} from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
   containsHeaderColumn,
@@ -39,6 +44,7 @@ export interface Props {
   isNumberColumnEnabled?: boolean;
   getScrollOffset?: () => number;
   tableWrapperHeight?: number;
+  api?: PluginInjectionAPI;
 }
 
 export const TableFloatingColumnControls = ({
@@ -57,6 +63,7 @@ export const TableFloatingColumnControls = ({
   isNumberColumnEnabled,
   getScrollOffset,
   tableWrapperHeight,
+  api,
 }: Props) => {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -136,6 +143,11 @@ export const TableFloatingColumnControls = ({
         isNumberColumnEnabled={isNumberColumnEnabled}
         isDragging={isDragging}
         getScrollOffset={getScrollOffset}
+        api={
+          getBooleanFF('platform.editor.table.use-shared-state-hook')
+            ? api
+            : undefined
+        }
       />
       {isDragging && (
         <ColumnDropTargets

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -4,7 +4,9 @@ import classnames from 'classnames';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import {
   findTable,
   isTableSelected,
@@ -12,6 +14,7 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { clearHoverSelection } from '../../../commands';
+import type { TablePlugin } from '../../../plugin';
 import { TableCssClassName as ClassName } from '../../../types';
 
 import type { CornerControlProps } from './types';
@@ -62,4 +65,59 @@ const DragCornerControlsComponent = ({
   );
 };
 
+const DragCornerControlsComponentWithSelection = ({
+  editorView,
+  isInDanger,
+  isResizing,
+  intl: { formatMessage },
+  api,
+}: CornerControlProps &
+  WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
+  const { selectionState } = useSharedPluginState(api, ['selection']);
+
+  const handleOnClick = () => {
+    const { state, dispatch } = editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+
+  const handleMouseOut = () => {
+    const { state, dispatch } = editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+  const isActive = useMemo(() => {
+    if (!selectionState?.selection) {
+      return;
+    }
+    const table = findTable(selectionState.selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selectionState.selection);
+  }, [selectionState]);
+
+  if (isResizing) {
+    return null;
+  }
+
+  return (
+    <button
+      className={classnames(ClassName.DRAG_CORNER_BUTTON, {
+        active: isActive,
+        danger: isActive && isInDanger,
+      })}
+      aria-label={formatMessage(messages.cornerControl)}
+      type="button"
+      onClick={handleOnClick}
+      onMouseOut={handleMouseOut}
+      contentEditable={false}
+    >
+      <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
+    </button>
+  );
+};
+
+export const DragCornerControlsWithSelection = injectIntl(
+  DragCornerControlsComponentWithSelection,
+);
+
 export const DragCornerControls = injectIntl(DragCornerControlsComponent);

package/src/ui/TableFloatingControls/CornerControls/index.tsx

@@ -1,2 +1,5 @@
 export { CornerControls } from './ClassicCornerControls';
-export { DragCornerControls } from './DragCornerControls';
+export {
+  DragCornerControls,
+  DragCornerControlsWithSelection,
+} from './DragCornerControls';

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import type { TablePlugin } from '../../plugin';
+
+import { CornerControls } from './CornerControls';
+import { RowControls } from './RowControls';
+
+type FloatingControlsWithSelectionProps = {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  isHeaderRowEnabled?: boolean;
+  isHeaderColumnEnabled?: boolean;
+  hoveredRows?: number[];
+  stickyTop?: number;
+  hoverRows: (rows: number[]) => void;
+  selectRow: (row: number, expand: boolean) => void;
+  tableActive: boolean;
+  api?: ExtractInjectionAPI<TablePlugin>;
+};
+
+export const FloatingControlsWithSelection = ({
+  editorView,
+  tableRef,
+  isInDanger,
+  isResizing,
+  isHeaderRowEnabled,
+  isHeaderColumnEnabled,
+  hoveredRows,
+  stickyTop,
+  hoverRows,
+  selectRow,
+  tableActive,
+  api,
+}: FloatingControlsWithSelectionProps) => {
+  const { selectionState } = useSharedPluginState(api, ['selection']);
+
+  return (
+    <>
+      <CornerControls
+        editorView={editorView}
+        tableRef={tableRef}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        isHeaderRowEnabled={isHeaderRowEnabled}
+        isHeaderColumnEnabled={isHeaderColumnEnabled}
+        hoveredRows={hoveredRows}
+        stickyTop={tableActive ? stickyTop : undefined}
+      />
+      <RowControls
+        selection={selectionState?.selection}
+        editorView={editorView}
+        tableRef={tableRef}
+        hoverRows={hoverRows}
+        hoveredRows={hoveredRows}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        selectRow={selectRow}
+        stickyTop={tableActive ? stickyTop : undefined}
+      />
+    </>
+  );
+};

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -4,6 +4,7 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { clearHoverSelection } from '../../../commands';
@@ -22,6 +23,7 @@ export interface Props {
   isResizing?: boolean;
   insertRowButtonIndex?: number;
   stickyTop?: number;
+  selection?: Selection;
 }
 
 class RowControlsComponent extends Component<Props & WrappedComponentProps> {
@@ -33,6 +35,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
       isInDanger,
       isResizing,
       intl: { formatMessage },
+      selection: selectionState,
     } = this.props;
     if (!tableRef) {
       return null;
@@ -72,7 +75,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
                     ClassName.ROW_CONTROLS_BUTTON_WRAP
                   } ${getRowClassNames(
                     startIndex,
-                    selection,
+                    selectionState || selection,
                     hoveredRows,
                     isInDanger,
                     isResizing,

package/src/ui/TableFloatingControls/index.tsx

@@ -1,17 +1,25 @@
 import React, { useCallback } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
+import type { TablePlugin } from '../../plugin';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
 
-import { CornerControls, DragCornerControls } from './CornerControls';
+import {
+  CornerControls,
+  DragCornerControls,
+  DragCornerControlsWithSelection,
+} from './CornerControls';
+import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 
@@ -55,7 +63,8 @@ export const TableFloatingControls = ({
   hoveredCell,
   isTableHovered,
   tableWrapperWidth,
-}: TableFloatingControlsProps) => {
+  api,
+}: TableFloatingControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
   const _selectRow = useCallback(
     (row: number, expand: boolean) => {
       const { state, dispatch } = editorView;
@@ -141,12 +150,22 @@ export const TableFloatingControls = ({
           <>
             {isDragAndDropEnabled ? (
               <>
-                <DragCornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                />
+                {getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+                  <DragCornerControlsWithSelection
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    api={api}
+                  />
+                ) : (
+                  <DragCornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                  />
+                )}
                 <DragControls
                   tableRef={tableRef}
                   tableNode={tableNode}
@@ -163,6 +182,21 @@ export const TableFloatingControls = ({
                   updateCellHoverLocation={updateCellHoverLocation}
                 />
               </>
+            ) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+              <FloatingControlsWithSelection
+                editorView={editorView}
+                tableRef={tableRef}
+                isInDanger={isInDanger}
+                isResizing={isResizing}
+                isHeaderRowEnabled={isHeaderRowEnabled}
+                isHeaderColumnEnabled={isHeaderColumnEnabled}
+                hoveredRows={hoveredRows}
+                stickyTop={tableActive ? stickyTop : undefined}
+                tableActive={tableActive}
+                hoverRows={_hoverRows}
+                selectRow={_selectRow}
+                api={api}
+              />
             ) : (
               <>
                 <CornerControls