@atlaskit/editor-plugin-table 5.3.1 → 5.3.2

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

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
+
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import type { RowParams } from '../../../utils';
+import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
+import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+
+const messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description:
+      'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.',
+  },
+});
+
+export interface Props {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  selectRow: (row: number, expand: boolean) => void;
+  hoverRows: (rows: number[], danger?: boolean) => void;
+  hoveredRows?: number[];
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  insertRowButtonIndex?: number;
+  stickyTop?: number;
+}
+
+class RowControlsComponent extends Component<Props & WrappedComponentProps> {
+  render() {
+    const {
+      editorView,
+      tableRef,
+      hoveredRows,
+      isInDanger,
+      isResizing,
+      intl: { formatMessage },
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const { selection } = editorView.state;
+    const rowHeights = getRowHeights(tableRef);
+    const rowsParams = getRowsParams(rowHeights);
+
+    const firstRow = tableRef.querySelector('tr');
+    const hasHeaderRow = firstRow
+      ? firstRow.getAttribute('data-header-row')
+      : false;
+
+    return (
+      <div className={ClassName.ROW_CONTROLS}>
+        <div className={ClassName.ROW_CONTROLS_INNER}>
+          {rowsParams.map(
+            ({ startIndex, endIndex, height }: RowParams, index) => {
+              // if previous row was header row, add its height to our margin
+              let marginTop = -1;
+              if (
+                index === 1 &&
+                hasHeaderRow &&
+                this.props.stickyTop !== undefined
+              ) {
+                marginTop += rowHeights[index - 1] + tableToolbarSize;
+              }
+
+              const thisRowSticky =
+                this.props.stickyTop !== undefined &&
+                index === 0 &&
+                hasHeaderRow;
+
+              return (
+                <div
+                  className={`${
+                    ClassName.ROW_CONTROLS_BUTTON_WRAP
+                  } ${getRowClassNames(
+                    startIndex,
+                    selection,
+                    hoveredRows,
+                    isInDanger,
+                    isResizing,
+                  )} ${thisRowSticky ? 'sticky' : ''}`}
+                  key={startIndex}
+                  style={{
+                    height: height,
+                    marginTop: `${marginTop}px`,
+                    top: thisRowSticky
+                      ? `${this.props.stickyTop! + 3}px`
+                      : undefined,
+                    paddingTop: thisRowSticky
+                      ? `${tableControlsSpacing}px`
+                      : undefined,
+                  }}
+                >
+                  <button
+                    aria-label={formatMessage(messages.rowControl)}
+                    type="button"
+                    className={`${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`}
+                    onClick={(event) =>
+                      this.props.selectRow(startIndex, event.shiftKey)
+                    }
+                    onMouseOver={() => this.props.hoverRows([startIndex])}
+                    onMouseOut={this.clearHoverSelection}
+                    data-start-index={startIndex}
+                    data-end-index={endIndex}
+                  />
+
+                  <div className={ClassName.CONTROLS_INSERT_MARKER} />
+                </div>
+              );
+            },
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  private clearHoverSelection = () => {
+    const { state, dispatch } = this.props.editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+}
+
+export const RowControls = injectIntl(RowControlsComponent);

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { injectIntl } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
+
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import type { CellHoverCoordinates } from '../../../types';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils';
+import { DragHandle } from '../../DragHandle';
+
+type DragControlsProps = {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  tableActive?: boolean;
+  hoveredCell?: CellHoverCoordinates;
+  hoverRows?: (rows: number[], danger?: boolean) => void;
+  selectRow?: (row: number, expand: boolean) => void;
+};
+
+const DragControlsComponent = ({
+  tableRef,
+  hoveredCell,
+  hoverRows,
+  selectRow,
+  tableActive,
+  editorView,
+}: DragControlsProps & WrappedComponentProps) => {
+  const rowHeights = getRowHeights(tableRef);
+  const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
+
+  const onClick = (
+    index: number,
+    event: React.MouseEvent<Element, MouseEvent>,
+  ) => {};
+
+  const onMouseOver = () => {};
+  const onMouseOut = () => {};
+
+  const rowIndex = hoveredCell?.rowIndex;
+
+  const getLocalId = () => {
+    const tableNode = findTable(editorView.state.selection);
+    return tableNode?.node?.attrs?.localId || '';
+  };
+
+  return (
+    <div
+      className={ClassName.ROW_CONTROLS_WITH_DRAG}
+      style={{
+        gridTemplateRows: heights,
+      }}
+    >
+      {Number.isFinite(rowIndex) && (
+        <div
+          style={{
+            gridRow: `${(rowIndex as number) + 1} / span 1`,
+          }}
+        >
+          <DragHandle
+            onClick={(event) => onClick(rowIndex as number, event)}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+            tableLocalId={getLocalId()}
+            indexes={[]}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const DragControls = injectIntl(DragControlsComponent);

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

@@ -1,135 +1,2 @@
-import React, { Component } from 'react';
-
-import type { WrappedComponentProps } from 'react-intl-next';
-import { defineMessages, injectIntl } from 'react-intl-next';
-
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-import { clearHoverSelection } from '../../../commands';
-import { TableCssClassName as ClassName } from '../../../types';
-import {
-  getRowClassNames,
-  getRowHeights,
-  getRowsParams,
-  RowParams,
-} from '../../../utils';
-import { tableControlsSpacing, tableToolbarSize } from '../../consts';
-
-const messages = defineMessages({
-  rowControl: {
-    id: 'fabric.editor.rowControl',
-    defaultMessage: 'Highlight row',
-    description:
-      'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.',
-  },
-});
-
-export interface Props {
-  editorView: EditorView;
-  tableRef: HTMLTableElement;
-  selectRow: (row: number, expand: boolean) => void;
-  hoverRows: (rows: number[], danger?: boolean) => void;
-  hoveredRows?: number[];
-  isInDanger?: boolean;
-  isResizing?: boolean;
-  insertRowButtonIndex?: number;
-  stickyTop?: number;
-}
-
-class RowControlsComponent extends Component<Props & WrappedComponentProps> {
-  render() {
-    const {
-      editorView,
-      tableRef,
-      hoveredRows,
-      isInDanger,
-      isResizing,
-      intl: { formatMessage },
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const { selection } = editorView.state;
-    const rowHeights = getRowHeights(tableRef);
-    const rowsParams = getRowsParams(rowHeights);
-
-    const firstRow = tableRef.querySelector('tr');
-    const hasHeaderRow = firstRow
-      ? firstRow.getAttribute('data-header-row')
-      : false;
-
-    return (
-      <div className={ClassName.ROW_CONTROLS}>
-        <div className={ClassName.ROW_CONTROLS_INNER}>
-          {rowsParams.map(
-            ({ startIndex, endIndex, height }: RowParams, index) => {
-              // if previous row was header row, add its height to our margin
-              let marginTop = -1;
-              if (
-                index === 1 &&
-                hasHeaderRow &&
-                this.props.stickyTop !== undefined
-              ) {
-                marginTop += rowHeights[index - 1] + tableToolbarSize;
-              }
-
-              const thisRowSticky =
-                this.props.stickyTop !== undefined &&
-                index === 0 &&
-                hasHeaderRow;
-
-              return (
-                <div
-                  className={`${
-                    ClassName.ROW_CONTROLS_BUTTON_WRAP
-                  } ${getRowClassNames(
-                    startIndex,
-                    selection,
-                    hoveredRows,
-                    isInDanger,
-                    isResizing,
-                  )} ${thisRowSticky ? 'sticky' : ''}`}
-                  key={startIndex}
-                  style={{
-                    height: height,
-                    marginTop: `${marginTop}px`,
-                    top: thisRowSticky
-                      ? `${this.props.stickyTop! + 3}px`
-                      : undefined,
-                    paddingTop: thisRowSticky
-                      ? `${tableControlsSpacing}px`
-                      : undefined,
-                  }}
-                >
-                  <button
-                    aria-label={formatMessage(messages.rowControl)}
-                    type="button"
-                    className={`${ClassName.ROW_CONTROLS_BUTTON}
-                  ${ClassName.CONTROLS_BUTTON}
-                `}
-                    onClick={(event) =>
-                      this.props.selectRow(startIndex, event.shiftKey)
-                    }
-                    onMouseOver={() => this.props.hoverRows([startIndex])}
-                    onMouseOut={this.clearHoverSelection}
-                    data-start-index={startIndex}
-                    data-end-index={endIndex}
-                  />
-
-                  <div className={ClassName.CONTROLS_INSERT_MARKER} />
-                </div>
-              );
-            },
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  private clearHoverSelection = () => {
-    const { state, dispatch } = this.props.editorView;
-    clearHoverSelection()(state, dispatch);
-  };
-}
-
-export const RowControls = injectIntl(RowControlsComponent);
+export { RowControls } from './ClassicControls';
+export { DragControls } from './DragControls';

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

@@ -1,22 +1,21 @@
 import React, { Component } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverRows, selectRow } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { CellHoverCoordinates } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import { RowControls } from './RowControls';
+import { DragControls, RowControls } from './RowControls';
 
 export interface Props {
   editorView: EditorView;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
   selection?: Selection;
   tableRef?: HTMLTableElement;
   tableActive?: boolean;
@@ -25,9 +24,11 @@ export interface Props {
   isHeaderRowEnabled?: boolean;
   isHeaderColumnEnabled?: boolean;
   isNumberColumnEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
+  hoveredCell?: CellHoverCoordinates;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
 }
@@ -77,6 +78,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       ordering,
       headerRowHeight,
       stickyHeader,
+      hoveredCell,
     } = this.props;
     const tableHeight = this.state?.tableHeight;
     const nextTableHeight = nextState?.tableHeight;
@@ -93,7 +95,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       isNumberColumnEnabled !== nextProps.isNumberColumnEnabled ||
       isSelectionUpdated(selection!, nextProps.selection) ||
       headerRowHeight !== nextProps.headerRowHeight ||
-      stickyHeader !== nextProps.stickyHeader
+      stickyHeader !== nextProps.stickyHeader ||
+      hoveredCell !== nextProps.hoveredCell
     );
   }
 
@@ -116,6 +119,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       hasHeaderRow,
       hoveredRows,
       stickyHeader,
+      isDragAndDropEnabled,
+      hoveredCell,
     } = this.props;
 
     if (!tableRef) {
@@ -126,6 +131,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader && stickyHeader.sticky && hasHeaderRow
         ? stickyHeader.top
         : undefined;
+
     return (
       <div onMouseDown={(e) => e.preventDefault()}>
         {isNumberColumnEnabled ? (
@@ -140,31 +146,44 @@ export default class TableFloatingControls extends Component<Props, State> {
             isResizing={isResizing}
             selectRow={this.selectRow}
             stickyTop={stickyTop}
+            isDragAndDropEnabled={isDragAndDropEnabled}
           />
         ) : null}
 
         {tableActive && (
           <>
-            <CornerControls
-              editorView={editorView}
-              tableRef={tableRef}
-              isInDanger={isInDanger}
-              isResizing={isResizing}
-              isHeaderRowEnabled={isHeaderRowEnabled}
-              isHeaderColumnEnabled={isHeaderColumnEnabled}
-              hoveredRows={hoveredRows}
-              stickyTop={tableActive ? stickyTop : undefined}
-            />
-            <RowControls
-              editorView={editorView}
-              tableRef={tableRef}
-              hoverRows={this.hoverRows}
-              hoveredRows={hoveredRows}
-              isInDanger={isInDanger}
-              isResizing={isResizing}
-              selectRow={this.selectRow}
-              stickyTop={tableActive ? stickyTop : undefined}
-            />
+            {isDragAndDropEnabled ? (
+              <DragControls
+                tableRef={tableRef}
+                hoveredCell={hoveredCell}
+                editorView={editorView}
+                hoverRows={this.hoverRows}
+                selectRow={this.selectRow}
+              />
+            ) : (
+              <>
+                <CornerControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  isHeaderRowEnabled={isHeaderRowEnabled}
+                  isHeaderColumnEnabled={isHeaderColumnEnabled}
+                  hoveredRows={hoveredRows}
+                  stickyTop={tableActive ? stickyTop : undefined}
+                />
+                <RowControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  hoverRows={this.hoverRows}
+                  hoveredRows={hoveredRows}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  selectRow={this.selectRow}
+                  stickyTop={tableActive ? stickyTop : undefined}
+                />
+              </>
+            )}
           </>
         )}
       </div>

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

@@ -31,6 +31,7 @@ import {
   columnControlsDecorationHeight,
   resizeHandlerAreaWidth,
   resizeLineWidth,
+  rowControlsZIndex,
   stickyHeaderBorderBottomWidth,
   stickyRowOffsetTop,
   tableBorderColor,
@@ -240,6 +241,26 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
   }
 };
 
+const tableRowControlStyles = () => {
+  return getBooleanFF('platform.editor.table.drag-and-drop')
+    ? css`
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
+          position: absolute;
+          margin-top: ${tableMarginTop}px;
+          left: -${tableToolbarSize + 1}px;
+          z-index: ${rowControlsZIndex};
+        }
+      `
+    : css`
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
+          position: absolute;
+          /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+          top: ${tableMarginTop - cornerControlHeight + 1}px;
+          left: -${tableToolbarSize}px;
+        }
+      `;
+};
+
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -677,6 +698,12 @@ export const tableStyles = (
       )}
     }
 
+    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+      display: grid;
+      align-items: center;
+      position: absolute;
+    }
+
     ${floatingColumnControls(props)}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
@@ -691,7 +718,9 @@ export const tableStyles = (
       margin-left: ${getBooleanFF('platform.editor.custom-table-width')
         ? akEditorTableToolbarSize
         : akEditorTableToolbarSize - 1}px;
-      top: ${akEditorTableToolbarSize}px;
+      top: ${getBooleanFF('platform.editor.table.drag-and-drop')
+        ? 0
+        : akEditorTableToolbarSize}px;
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
@@ -717,6 +746,21 @@ export const tableStyles = (
       }
     }
 
+    // add a background above the first numbered column cell when sticky header is engaged
+    // which hides the table when scrolling
+    .${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
+      content: '';
+      display: block;
+      height: 33px;
+      width: 100%;
+      background-color: ${token('elevation.surface', 'white')};
+      position: absolute;
+
+      // the extra pixel is accounting for borders
+      top: -34px;
+      left: -1px;
+    }
+
     .${ClassName.WITH_CONTROLS} {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
         display: block;
@@ -741,10 +785,10 @@ export const tableStyles = (
       }
     }
     :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
-      .${ClassName.NUMBERED_COLUMN_BUTTON} {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
         cursor: pointer;
       }
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
         border-bottom: 1px solid ${tableBorderSelectedColor(props)};
         border-color: ${tableBorderSelectedColor(props)};
         background-color: ${tableToolbarSelectedColor(props)};
@@ -780,6 +824,10 @@ export const tableStyles = (
         margin-top: 0;
       }
 
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} + * {
+        margin-top: 0;
+      }
+
       /*
        * Headings have a top margin by default, but we don't want this on the
        * first heading within table header cells.
@@ -853,17 +901,10 @@ export const tableStyles = (
         }
       }
     }
-    .${ClassName.ROW_CONTROLS_WRAPPER} {
-      position: absolute;
-      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-      top: ${tableMarginTop - cornerControlHeight + 1}px;
-    }
+    ${tableRowControlStyles()}
     .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }
-    .${ClassName.ROW_CONTROLS_WRAPPER} {
-      left: -${tableToolbarSize}px;
-    }
 
     .${ClassName.COLUMN_CONTROLS_WRAPPER} {
       position: absolute;

package/src/plugins/table/ui/consts.ts

@@ -130,6 +130,7 @@ export const lineMarkerSize = 4;
 export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export const rowControlsZIndex = akEditorUnitZIndex * 10;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
 export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;