@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,131 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { EditorState } from 'prosemirror-state';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import {
+  findCellRectClosestToPos,
+  getSelectionRect,
+  isSelectionType,
+} from '@atlaskit/editor-tables/utils';
+import { EditorView } from 'prosemirror-view';
+
+import { Popup } from '@atlaskit/editor-common/ui';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+
+import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { pluginKey } from '../../pm-plugins/plugin-key';
+import { PluginConfig } from '../../types';
+import {
+  contextualMenuDropdownWidth,
+  contextualMenuTriggerSize,
+} from '../consts';
+import { tablePopupStyles } from './styles';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import ContextualMenu from './ContextualMenu';
+
+// offset of the contextual menu dropdown
+const calculateOffset = (targetCellRef: HTMLElement, state: EditorState) => {
+  const { tableRef } = pluginKey.getState(state);
+  let top = -contextualMenuTriggerSize;
+
+  if (tableRef && targetCellRef) {
+    const targetOffset = targetCellRef.getBoundingClientRect();
+    const tableOffset = tableRef.getBoundingClientRect();
+    let topDiff = targetOffset.top - tableOffset.top;
+    if (topDiff < 200) {
+      top -= topDiff + 2;
+    }
+  }
+  return [contextualMenuTriggerSize / 2, top];
+};
+
+export interface Props {
+  editorView: EditorView;
+  isOpen: boolean;
+  getEditorContainerWidth: GetEditorContainerWidth;
+  targetCellPosition?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  pluginConfig?: PluginConfig;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
+}
+
+const FloatingContextualMenu = ({
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  editorView,
+  isOpen,
+  pluginConfig,
+  editorAnalyticsAPI,
+  getEditorContainerWidth,
+}: Props) => {
+  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+  const { targetCellPosition } = getPluginState(editorView.state);
+  if (
+    !isOpen ||
+    !targetCellPosition ||
+    editorView.state.doc.nodeSize <= targetCellPosition
+  ) {
+    return null;
+  }
+
+  const { selection } = editorView.state;
+  const selectionRect = isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : findCellRectClosestToPos(selection.$from);
+
+  if (!selectionRect) {
+    return null;
+  }
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef) {
+    return null;
+  }
+
+  return (
+    <Popup
+      alignX="right"
+      alignY="top"
+      target={targetCellRef as HTMLElement}
+      mountTo={mountPoint}
+      boundariesElement={boundariesElement}
+      scrollableElement={scrollableElement}
+      fitHeight={188}
+      fitWidth={contextualMenuDropdownWidth}
+      // z-index value below is to ensure that this menu is above other floating menu
+      // in table, but below floating dialogs like typeaheads, pickers, etc.
+      zIndex={akEditorFloatingOverlapPanelZIndex}
+      forcePlacement={true}
+      offset={[-7, 0]}
+    >
+      <div css={tablePopupStyles}>
+        <ContextualMenu
+          editorView={editorView}
+          offset={calculateOffset(
+            targetCellRef as HTMLElement,
+            editorView.state,
+          )}
+          isOpen={isOpen}
+          targetCellPosition={targetCellPosition}
+          allowColumnSorting={pluginConfig && pluginConfig.allowColumnSorting}
+          allowMergeCells={pluginConfig!.allowMergeCells}
+          allowBackgroundColor={pluginConfig!.allowBackgroundColor}
+          selectionRect={selectionRect}
+          boundariesElement={boundariesElement}
+          editorAnalyticsAPI={editorAnalyticsAPI}
+          getEditorContainerWidth={getEditorContainerWidth}
+        />
+      </div>
+    </Popup>
+  );
+};
+
+FloatingContextualMenu.displayName = 'FloatingContextualMenu';
+
+export default FloatingContextualMenu;

package/src/plugins/table/ui/FloatingContextualMenu/styles.ts

@@ -0,0 +1,53 @@
+import { css } from '@emotion/react';
+import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
+import { N60A, N90 } from '@atlaskit/theme/colors';
+import { contextualMenuDropdownWidth } from '../consts';
+import { TableCssClassName as ClassName } from '../../types';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+
+export const cellColourPreviewStyles = (selectedColor: string) => css`
+  &::before {
+    background: ${selectedColor};
+  }
+`;
+
+export const tablePopupStyles = css`
+  .${ClassName.CONTEXTUAL_SUBMENU} {
+    border-radius: ${borderRadius()}px;
+    background: ${token('elevation.surface.overlay', 'white')};
+    box-shadow: ${token(
+      'elevation.shadow.overlay',
+      `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`,
+    )};
+    display: block;
+    position: absolute;
+    top: 0;
+    left: ${contextualMenuDropdownWidth}px;
+    padding: 8px;
+
+    > div {
+      padding: 0;
+    }
+  }
+
+  .${ClassName.CONTEXTUAL_MENU_ICON} {
+    display: flex;
+
+    &::before {
+      content: '';
+      display: block;
+      border: 1px solid ${tableBackgroundBorderColor};
+      border-radius: ${borderRadius()}px;
+      width: 20px;
+      height: 20px;
+    }
+
+    &::after {
+      content: '›';
+      margin-left: 4px;
+      line-height: 20px;
+      color: ${token('color.icon', N90)};
+    }
+  }
+`;

package/src/plugins/table/ui/FloatingDeleteButton/DeleteButton.tsx

@@ -0,0 +1,49 @@
+import React, { SyntheticEvent } from 'react';
+
+import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+
+// import { MessageDescriptor } from '../../../../types/i18n';
+import { MessageDescriptor } from 'react-intl-next';
+import { TableCssClassName as ClassName } from '../../types';
+
+export interface ButtonProps {
+  removeLabel: MessageDescriptor;
+  style?: object;
+  onClick?: (event: SyntheticEvent) => void;
+  onMouseEnter?: (event: SyntheticEvent) => void;
+  onMouseLeave?: (event: SyntheticEvent) => void;
+}
+
+const DeleteButton = ({
+  style,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  removeLabel,
+  intl: { formatMessage },
+}: ButtonProps & WrappedComponentProps) => (
+  <div
+    className={ClassName.CONTROLS_DELETE_BUTTON_WRAP}
+    style={style}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
+    <button
+      type="button"
+      title={formatMessage(removeLabel, { 0: 1 })}
+      className={ClassName.CONTROLS_DELETE_BUTTON}
+      onMouseDown={onClick}
+      onMouseMove={(e) => e.preventDefault()}
+    >
+      <svg className={ClassName.CONTROLS_BUTTON_ICON}>
+        <path
+          d="M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+  </div>
+);
+
+export default injectIntl(DeleteButton);

package/src/plugins/table/ui/FloatingDeleteButton/getPopUpOptions.ts

@@ -0,0 +1,75 @@
+import type { PopupProps } from '@atlaskit/editor-common/ui';
+
+import {
+  tableDeleteButtonOffset,
+  tableDeleteButtonSize,
+  tableToolbarSize,
+} from '../consts';
+
+import { CellSelectionType } from './types';
+
+interface GetPopupOptions {
+  left: number;
+  top: number;
+  selectionType?: CellSelectionType;
+  tableWrapper: HTMLElement | null;
+}
+
+const DELETE_BUTTON_CONTROLS_OFFSET =
+  tableToolbarSize + tableDeleteButtonSize + tableDeleteButtonOffset;
+
+function getColumnOptions(
+  left: number,
+  tableWrapper: HTMLElement | null,
+): Partial<PopupProps> {
+  return {
+    alignX: 'left',
+    alignY: 'start',
+    offset: [left, DELETE_BUTTON_CONTROLS_OFFSET],
+    shouldRenderPopup() {
+      if (tableWrapper) {
+        const rect = tableWrapper.getBoundingClientRect();
+        const maxVisibleLeftPosition =
+          rect.width + tableWrapper.scrollLeft - tableDeleteButtonSize;
+        const minVisibleLeftPosition = tableWrapper.scrollLeft;
+        return (
+          maxVisibleLeftPosition - left > 0 && left > minVisibleLeftPosition
+        );
+      }
+      return true;
+    },
+  };
+}
+
+function getRowOptions(top: number): Partial<PopupProps> {
+  return {
+    alignX: 'left',
+    alignY: 'start',
+    forcePlacement: true,
+    offset: [0, -top],
+    onPositionCalculated(position) {
+      return {
+        ...position,
+        // We need to force left to always be the offset to not be affected by overflow
+        left: -DELETE_BUTTON_CONTROLS_OFFSET,
+      };
+    },
+  };
+}
+
+export default function getPopupOptions({
+  left,
+  top,
+  selectionType,
+  tableWrapper,
+}: GetPopupOptions): Partial<PopupProps> {
+  switch (selectionType) {
+    case 'column':
+      return getColumnOptions(left, tableWrapper);
+    case 'row':
+      return getRowOptions(top);
+    default: {
+      return {};
+    }
+  }
+}

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

@@ -0,0 +1,384 @@
+import React, { Component } from 'react';
+
+import { Selection } from 'prosemirror-state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import {
+  getSelectionRect,
+  isTableSelected,
+} from '@atlaskit/editor-tables/utils';
+import { EditorView } from 'prosemirror-view';
+import { createPortal } from 'react-dom';
+
+import { Popup } from '@atlaskit/editor-common/ui';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+
+// import { closestElement } from '../../../../utils/dom';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
+import {
+  deleteColumnsWithAnalytics,
+  deleteRowsWithAnalytics,
+} from '../../commands-with-analytics';
+import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
+import { RowStickyState } from '../../pm-plugins/sticky-headers';
+import { TableCssClassName as ClassName } from '../../types';
+import {
+  getColumnDeleteButtonParams,
+  getColumnsWidths,
+  getRowDeleteButtonParams,
+  getRowHeights,
+} from '../../utils';
+import tableMessages from '../messages';
+import { stickyRowZIndex } from '../consts';
+
+import DeleteButton from './DeleteButton';
+import getPopupOptions from './getPopUpOptions';
+import { CellSelectionType } from './types';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+
+export interface Props {
+  editorView: EditorView;
+  selection: Selection;
+  tableRef?: HTMLTableElement;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  stickyHeaders?: RowStickyState;
+  isNumberColumnEnabled?: boolean;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
+}
+
+export interface State {
+  selectionType?: CellSelectionType;
+  left: number;
+  top: number;
+  indexes: number[];
+  position?: string;
+  scrollLeft: number;
+}
+
+export function getSelectionType(
+  selection: Selection,
+): 'column' | 'row' | undefined {
+  if (!isTableSelected(selection) && selection instanceof CellSelection) {
+    if (selection.isRowSelection()) {
+      return 'row';
+    }
+    if (selection.isColSelection()) {
+      return 'column';
+    }
+  }
+
+  return;
+}
+
+class FloatingDeleteButton extends Component<Props, State> {
+  static displayName = 'FloatingDeleteButton';
+
+  wrapper: HTMLElement | null = null;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      selectionType: undefined,
+      top: 0,
+      left: 0,
+      indexes: [],
+      scrollLeft: 0,
+    };
+  }
+
+  shouldComponentUpdate(_: Props, nextState: State) {
+    return (
+      this.state.selectionType !== nextState.selectionType ||
+      this.state.left !== nextState.left ||
+      this.state.top !== nextState.top ||
+      this.state.scrollLeft !== nextState.scrollLeft
+    );
+  }
+
+  componentDidMount() {
+    this.updateWrapper();
+  }
+
+  componentDidUpdate() {
+    this.updateWrapper();
+  }
+
+  updateWrapper = () => {
+    const tableWrapper = closestElement(
+      this.props.tableRef,
+      `.${ClassName.TABLE_NODE_WRAPPER}`,
+    );
+    if (tableWrapper) {
+      this.wrapper = tableWrapper;
+      this.wrapper.addEventListener('scroll', this.onWrapperScrolled);
+
+      this.setState({
+        scrollLeft: tableWrapper.scrollLeft,
+      });
+    } else {
+      if (this.wrapper) {
+        // unsubscribe if we previously had one and it just went away
+        this.wrapper.removeEventListener('scroll', this.onWrapperScrolled);
+
+        // and reset scroll position
+        this.setState({
+          scrollLeft: 0,
+        });
+      }
+
+      this.wrapper = null;
+    }
+  };
+
+  componentWillUnmount() {
+    if (this.wrapper) {
+      this.wrapper.removeEventListener('scroll', this.onWrapperScrolled);
+    }
+  }
+
+  onWrapperScrolled = (e: Event) => {
+    const wrapper = e.target as HTMLElement;
+    this.setState({
+      scrollLeft: wrapper.scrollLeft,
+    });
+  };
+
+  /**
+   * We derivate the button state from the properties passed.
+   * We do this in here because we need this information in different places
+   * and this prevent to do multiple width calculations in the same component.
+   */
+  static getDerivedStateFromProps(
+    nextProps: Readonly<Props>,
+    prevState: State,
+  ): Partial<State> | null {
+    const selectionType = getSelectionType(nextProps.selection);
+
+    const inStickyMode =
+      nextProps.stickyHeaders && nextProps.stickyHeaders.sticky;
+
+    const rect = getSelectionRect(nextProps.selection);
+
+    // only tie row delete to sticky header if it's the only thing
+    // in the selection, otherwise the row delete will hover around
+    // the rest of the selection
+    const firstRowInSelection = rect && rect.top === 0 && rect.bottom === 1;
+    const shouldStickyButton = inStickyMode && firstRowInSelection;
+    const stickyTop = nextProps.stickyHeaders
+      ? nextProps.stickyHeaders.top + nextProps.stickyHeaders.padding
+      : 0;
+
+    if (selectionType) {
+      switch (selectionType) {
+        case 'column': {
+          // Calculate the button position and indexes for columns
+          const columnsWidths = getColumnsWidths(nextProps.editorView);
+          const deleteBtnParams = getColumnDeleteButtonParams(
+            columnsWidths,
+            nextProps.editorView.state.selection,
+          );
+          if (deleteBtnParams) {
+            return {
+              ...deleteBtnParams,
+              top: inStickyMode ? nextProps.stickyHeaders!.top : 0,
+              position: inStickyMode ? 'sticky' : undefined,
+              selectionType,
+            };
+          }
+          return null;
+        }
+        case 'row': {
+          // Calculate the button position and indexes for rows
+          if (nextProps.tableRef) {
+            const rowHeights = getRowHeights(nextProps.tableRef);
+            const offsetTop = inStickyMode ? -rowHeights[0] : 0;
+
+            const deleteBtnParams = getRowDeleteButtonParams(
+              rowHeights,
+              nextProps.editorView.state.selection,
+              shouldStickyButton ? stickyTop : offsetTop,
+            );
+
+            if (deleteBtnParams) {
+              return {
+                ...deleteBtnParams,
+                position: shouldStickyButton ? 'sticky' : undefined,
+                left: 0,
+                selectionType: selectionType,
+              };
+            }
+          }
+
+          return null;
+        }
+      }
+    }
+
+    // Clean state if no type
+    if (prevState.selectionType !== selectionType) {
+      return {
+        selectionType: undefined,
+        top: 0,
+        left: 0,
+        indexes: [],
+      };
+    }
+
+    // Do nothing if doesn't change anything
+    return null;
+  }
+
+  private handleMouseEnter = () => {
+    const { state, dispatch } = this.props.editorView;
+    switch (this.state.selectionType) {
+      case 'row': {
+        return hoverRows(this.state.indexes!, true)(
+          state,
+          dispatch,
+          this.props.editorView,
+        );
+      }
+      case 'column': {
+        return hoverColumns(this.state.indexes!, true)(
+          state,
+          dispatch,
+          this.props.editorView,
+        );
+      }
+    }
+    return false;
+  };
+
+  private handleMouseLeave = () => {
+    const { state, dispatch } = this.props.editorView;
+    return clearHoverSelection()(state, dispatch);
+  };
+
+  /**
+   *
+   *
+   * @private
+   * @memberof FloatingDeleteButton
+   */
+  private handleClick = () => {
+    const { editorAnalyticsAPI } = this.props;
+    let { state, dispatch } = this.props.editorView;
+    const {
+      pluginConfig: { isHeaderRowRequired },
+    } = getTablePluginState(state);
+
+    const rect = getSelectionRect(state.selection);
+    if (rect) {
+      switch (this.state.selectionType) {
+        case 'column': {
+          deleteColumnsWithAnalytics(editorAnalyticsAPI)(
+            INPUT_METHOD.BUTTON,
+            rect,
+          )(state, dispatch);
+          return;
+        }
+        case 'row': {
+          deleteRowsWithAnalytics(editorAnalyticsAPI)(
+            INPUT_METHOD.BUTTON,
+            rect,
+            !!isHeaderRowRequired,
+          )(state, dispatch);
+          return;
+        }
+      }
+    }
+    ({ state, dispatch } = this.props.editorView);
+    clearHoverSelection()(state, dispatch);
+  };
+
+  render() {
+    const { mountPoint, boundariesElement, tableRef } = this.props;
+    const { selectionType } = this.state;
+
+    if (!selectionType || !tableRef) {
+      return null;
+    }
+
+    const tableContainerWrapper = closestElement(
+      tableRef,
+      `.${ClassName.TABLE_CONTAINER}`,
+    );
+
+    const button = (
+      <DeleteButton
+        removeLabel={
+          selectionType === 'column'
+            ? tableMessages.removeColumns
+            : tableMessages.removeRows
+        }
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      />
+    );
+
+    const popupOpts = getPopupOptions({
+      left: this.state.left,
+      top: this.state.top,
+      selectionType: this.state.selectionType,
+      tableWrapper: this.wrapper,
+    });
+
+    const mountTo = tableContainerWrapper || mountPoint;
+    if (this.state.position === 'sticky' && mountTo) {
+      const headerRow = tableRef.querySelector('tr.sticky');
+      if (headerRow) {
+        const rect = headerRow!.getBoundingClientRect();
+
+        const calculatePosition =
+          popupOpts.onPositionCalculated || ((pos) => pos);
+        const pos = calculatePosition({
+          left: this.state.left,
+          top: this.state.top,
+        });
+
+        return createPortal(
+          <div
+            style={{
+              position: 'fixed',
+              top: pos.top,
+              zIndex: stickyRowZIndex,
+              left:
+                rect.left +
+                (pos.left || 0) -
+                (this.state.selectionType === 'column'
+                  ? this.state.scrollLeft
+                  : 0) -
+                (this.props.isNumberColumnEnabled
+                  ? akEditorTableNumberColumnWidth
+                  : 0),
+            }}
+          >
+            {button}
+          </div>,
+          mountTo,
+        );
+      }
+    }
+
+    return (
+      <Popup
+        target={tableRef}
+        mountTo={mountTo}
+        boundariesElement={tableContainerWrapper || boundariesElement}
+        scrollableElement={this.wrapper || undefined}
+        forcePlacement={true}
+        allowOutOfBounds
+        {...popupOpts}
+      >
+        {button}
+      </Popup>
+    );
+  }
+}
+
+export default FloatingDeleteButton;

package/src/plugins/table/ui/FloatingDeleteButton/types.ts

@@ -0,0 +1 @@
+export type CellSelectionType = 'column' | 'row' | undefined;