@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx

@@ -0,0 +1,132 @@
+import React, { SyntheticEvent } from 'react';
+
+import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+
+import { tableMarginTop } from '@atlaskit/editor-common/styles';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import Tooltip from '@atlaskit/tooltip';
+
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName } from '../../types';
+import tableMessages from '../messages';
+import { tableToolbarSize } from '../consts';
+
+export interface ButtonProps {
+  type: 'row' | 'column';
+  tableRef: HTMLElement;
+  onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
+  hasStickyHeaders: boolean;
+}
+
+const getInsertLineHeight = (
+  tableRef: HTMLElement,
+  hasStickyHeaders: boolean,
+) => {
+  // The line gets height 100% from the table,
+  // but since we have an overflow on the left,
+  // we should add an offset to make up for it.
+  const LINE_OFFSET = 3;
+
+  const ADDITIONAL_HEIGHT = hasStickyHeaders
+    ? tableRef.getBoundingClientRect().top - tableMarginTop * 4 - LINE_OFFSET
+    : tableToolbarSize + LINE_OFFSET;
+  return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
+};
+
+const getToolbarSize = (tableRef: HTMLElement): number => {
+  const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
+  if (parent) {
+    return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`)
+      ? tableToolbarSize + akEditorTableNumberColumnWidth - 1
+      : tableToolbarSize;
+  }
+
+  return tableToolbarSize;
+};
+
+const getInsertLineWidth = (tableRef: HTMLElement) => {
+  // The line gets width 100% from the table,
+  // but since we have an overflow on the left,
+  // we should add an offset to make up for it.
+  const LINE_OFFSET = 4;
+  const { parentElement, offsetWidth } = tableRef;
+  const parentOffsetWidth = parentElement!.offsetWidth;
+  const { scrollLeft } = parentElement!;
+  const diff = offsetWidth - parentOffsetWidth;
+  const toolbarSize = getToolbarSize(tableRef);
+  return (
+    Math.min(
+      offsetWidth + toolbarSize,
+      parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0),
+    ) + LINE_OFFSET
+  );
+};
+
+const tooltipMessageByType = (type: string) => {
+  return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
+};
+
+const InsertButton = ({
+  onMouseDown,
+  tableRef,
+  type,
+  intl: { formatMessage },
+  hasStickyHeaders,
+}: ButtonProps & WrappedComponentProps) => {
+  const content = (
+    <Tooltip
+      content={
+        <keymaps.ToolTipContent
+          description={formatMessage(tooltipMessageByType(type))}
+          keymap={type === 'row' ? keymaps.addRowAfter : keymaps.addColumnAfter}
+        />
+      }
+      position="top"
+    >
+      <>
+        <div className={ClassName.CONTROLS_INSERT_BUTTON_INNER}>
+          <button
+            type="button"
+            className={ClassName.CONTROLS_INSERT_BUTTON}
+            onMouseDown={onMouseDown}
+          >
+            <svg className={ClassName.CONTROLS_BUTTON_ICON}>
+              <path
+                d="M10 4a1 1 0 0 1 1 1v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1z"
+                fill="currentColor"
+                fillRule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          className={ClassName.CONTROLS_INSERT_LINE}
+          style={
+            type === 'row'
+              ? { width: getInsertLineWidth(tableRef) }
+              : { height: getInsertLineHeight(tableRef, hasStickyHeaders) }
+          }
+        />
+      </>
+    </Tooltip>
+  );
+
+  const floatingButtonClassName =
+    type === 'column'
+      ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
+      : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+
+  return (
+    <div className={floatingButtonClassName}>
+      <div
+        className={`${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
+      >
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export default injectIntl(InsertButton);

package/src/plugins/table/ui/FloatingInsertButton/getPopupOptions.ts

@@ -0,0 +1,122 @@
+import type { PopupProps } from '@atlaskit/editor-common/ui';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+
+import {
+  tableInsertColumnButtonOffset,
+  tableInsertColumnButtonSize,
+  tableToolbarSize,
+} from '../consts';
+
+const HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
+const HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON =
+  HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
+const VERTICAL_ALIGN_COLUMN_BUTTON =
+  tableToolbarSize + tableInsertColumnButtonOffset;
+
+const HORIZONTAL_ALIGN_ROW_BUTTON = -(
+  tableToolbarSize +
+  tableInsertColumnButtonOffset +
+  tableInsertColumnButtonSize
+);
+const VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
+
+function getRowOptions(index: number): Partial<PopupProps> {
+  let defaultOptions = {
+    alignX: 'left',
+    alignY: 'bottom',
+    offset: [0, VERTICAL_ALIGN_ROW_BUTTON],
+  } as PopupProps;
+
+  if (index === 0) {
+    defaultOptions = {
+      ...defaultOptions,
+      alignY: 'top',
+      // The offset is the inverse the original, because is align top nop bottom.
+      offset: [0, -VERTICAL_ALIGN_ROW_BUTTON],
+    };
+  }
+
+  return {
+    ...defaultOptions,
+    onPositionCalculated(position) {
+      return {
+        ...position,
+        // Left position should be always the offset (To place in the correct position even if the table has overflow).
+        left: HORIZONTAL_ALIGN_ROW_BUTTON,
+      };
+    },
+  };
+}
+
+function getColumnOptions(
+  index: number,
+  tableContainer: HTMLElement | null,
+  hasNumberedColumns: boolean,
+): Partial<PopupProps> {
+  const options: Partial<PopupProps> = {
+    alignX: 'end',
+    alignY: 'top',
+    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON],
+    // :: (position: PopupPosition) -> PopupPosition
+    // Limit the InsertButton position to the table container
+    // if the left position starts before it
+    // we should always set the InsertButton on the start,
+    // considering the offset from the first column
+    onPositionCalculated(position) {
+      const { left } = position;
+      if (!left) {
+        // If not left, lest skip expensive next calculations.
+        return position;
+      }
+
+      if (index === 0) {
+        return {
+          ...position,
+          left: hasNumberedColumns
+            ? HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON
+            : HORIZONTAL_ALIGN_COLUMN_BUTTON,
+        };
+      }
+
+      // Check if current position is greater than the available container width
+      const rect = tableContainer
+        ? tableContainer.getBoundingClientRect()
+        : null;
+
+      return {
+        ...position,
+        left: rect && left > rect.width ? rect.width : left,
+      };
+    },
+  };
+
+  // We need to change the popup position when
+  // the column index is zero
+  if (index === 0) {
+    return {
+      ...options,
+      alignX: 'left',
+      alignY: 'top',
+    };
+  }
+
+  return options;
+}
+
+function getPopupOptions(
+  type: 'column' | 'row',
+  index: number,
+  hasNumberedColumns: boolean,
+  tableContainer: HTMLElement | null,
+): Partial<PopupProps> {
+  switch (type) {
+    case 'column':
+      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+    case 'row':
+      return getRowOptions(index);
+    default:
+      return {};
+  }
+}
+
+export default getPopupOptions;

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

@@ -0,0 +1,268 @@
+import React from 'react';
+
+import { Node as PmNode } from 'prosemirror-model';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { EditorView } from 'prosemirror-view';
+import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+
+import { Popup } from '@atlaskit/editor-common/ui';
+
+// import { closestElement } from '../../../../utils/dom';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import {
+  insertColumnWithAnalytics,
+  insertRowWithAnalytics,
+} from '../../commands-with-analytics';
+import { TableCssClassName as ClassName } from '../../types';
+import { checkIfNumberColumnEnabled } from '../../utils';
+
+import getPopupOptions from './getPopupOptions';
+import InsertButton from './InsertButton';
+import {
+  DispatchAnalyticsEvent,
+  AnalyticsEventPayload,
+} from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+
+export interface Props {
+  editorView: EditorView;
+  getEditorContainerWidth: GetEditorContainerWidth;
+  tableRef?: HTMLElement;
+  tableNode?: PmNode;
+  insertColumnButtonIndex?: number;
+  insertRowButtonIndex?: number;
+  isHeaderColumnEnabled?: boolean;
+  isHeaderRowEnabled?: boolean;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  hasStickyHeaders?: boolean;
+  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
+}
+import {
+  ACTION,
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  CONTENT_COMPONENT,
+} from '@atlaskit/editor-common/analytics';
+
+export class FloatingInsertButton extends React.Component<
+  Props & WrappedComponentProps,
+  any
+> {
+  static displayName = 'FloatingInsertButton';
+
+  constructor(props: Props & WrappedComponentProps) {
+    super(props);
+    this.insertColumn = this.insertColumn.bind(this);
+    this.insertRow = this.insertRow.bind(this);
+  }
+
+  render() {
+    const {
+      tableNode,
+      editorView,
+      insertColumnButtonIndex,
+      insertRowButtonIndex,
+      tableRef,
+      mountPoint,
+      boundariesElement,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled,
+      dispatchAnalyticsEvent,
+    } = this.props;
+
+    const type =
+      typeof insertColumnButtonIndex !== 'undefined'
+        ? 'column'
+        : typeof insertRowButtonIndex !== 'undefined'
+        ? 'row'
+        : null;
+
+    if (!tableNode || !tableRef || !type) {
+      return null;
+    }
+
+    // We can’t display the insert button for row|colum index 0
+    // when the header row|colum is enabled, this feature will be change on the future
+    if (
+      (type === 'column' &&
+        isHeaderColumnEnabled &&
+        insertColumnButtonIndex === 0) ||
+      (type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0)
+    ) {
+      return null;
+    }
+
+    const {
+      state: { tr },
+    } = editorView;
+    if (
+      tr.selection instanceof CellSelection &&
+      ((tr.selection as CellSelection).isColSelection() ||
+        (tr.selection as CellSelection).isRowSelection())
+    ) {
+      return null;
+    }
+
+    const cellPosition = this.getCellPosition(type);
+    if (!cellPosition) {
+      return null;
+    }
+
+    const tablePos = findTable(editorView.state.selection);
+    if (!tablePos) {
+      return null;
+    }
+
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    const pos = cellPosition + tablePos.start + 1;
+
+    let target: Node | undefined;
+    try {
+      target = findDomRefAtPos(pos, domAtPos);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error);
+      if (dispatchAnalyticsEvent) {
+        const payload: AnalyticsEventPayload = {
+          action: ACTION.ERRORED,
+          actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            component: CONTENT_COMPONENT.FLOATING_INSERT_BUTTON,
+            selection: editorView.state.selection.toJSON(),
+            position: pos,
+            docSize: editorView.state.doc.nodeSize,
+            error: (error as any)?.toString(),
+            errorStack: (error as any).stack || undefined,
+          },
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+    }
+
+    if (!target || !(target instanceof HTMLElement)) {
+      return null;
+    }
+
+    const targetCellRef =
+      type === 'row'
+        ? closestElement(target, 'tr')
+        : closestElement(target, 'td, th');
+
+    if (!targetCellRef) {
+      return null;
+    }
+
+    const tableContainerWrapper = closestElement(
+      targetCellRef,
+      `.${ClassName.TABLE_CONTAINER}`,
+    );
+    const tableWrapper = closestElement(
+      targetCellRef,
+      `.${ClassName.TABLE_NODE_WRAPPER}`,
+    );
+
+    const index: number =
+      type === 'column' ? insertColumnButtonIndex! : insertRowButtonIndex!;
+
+    const hasNumberedColumns = checkIfNumberColumnEnabled(
+      editorView.state.selection,
+    );
+
+    return (
+      <Popup
+        target={targetCellRef}
+        mountTo={tableContainerWrapper || mountPoint}
+        boundariesElement={tableContainerWrapper || boundariesElement}
+        scrollableElement={tableWrapper!}
+        forcePlacement={true}
+        allowOutOfBounds
+        {...getPopupOptions(
+          type,
+          index,
+          hasNumberedColumns,
+          tableContainerWrapper,
+        )}
+      >
+        <InsertButton
+          type={type}
+          tableRef={tableRef}
+          onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+          hasStickyHeaders={this.props.hasStickyHeaders || false}
+        />
+      </Popup>
+    );
+  }
+
+  private getCellPosition(type: 'column' | 'row'): number | null {
+    const {
+      tableNode,
+      insertColumnButtonIndex,
+      insertRowButtonIndex,
+    } = this.props;
+    const tableMap = TableMap.get(tableNode!);
+
+    if (type === 'column') {
+      const columnIndex =
+        insertColumnButtonIndex === 0 ? 0 : insertColumnButtonIndex! - 1;
+
+      if (columnIndex > tableMap.width - 1) {
+        return null;
+      }
+
+      return tableMap.positionAt(0, columnIndex!, tableNode!);
+    } else {
+      const rowIndex =
+        insertRowButtonIndex === 0 ? 0 : insertRowButtonIndex! - 1;
+
+      if (rowIndex > tableMap.height - 1) {
+        return null;
+      }
+
+      return tableMap.positionAt(rowIndex!, 0, tableNode!);
+    }
+  }
+
+  private insertRow(event: React.SyntheticEvent) {
+    const { editorView, insertRowButtonIndex, editorAnalyticsAPI } = this.props;
+
+    if (typeof insertRowButtonIndex !== 'undefined') {
+      event.preventDefault();
+
+      const { state, dispatch } = editorView;
+      insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+        index: insertRowButtonIndex,
+        moveCursorToInsertedRow: true,
+      })(state, dispatch);
+    }
+  }
+
+  private insertColumn(event: React.SyntheticEvent) {
+    const {
+      editorView,
+      insertColumnButtonIndex,
+      editorAnalyticsAPI,
+      getEditorContainerWidth,
+    } = this.props;
+
+    if (typeof insertColumnButtonIndex !== 'undefined') {
+      event.preventDefault();
+
+      const { state, dispatch } = editorView;
+      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(
+        INPUT_METHOD.BUTTON,
+        insertColumnButtonIndex,
+      )(state, dispatch, editorView);
+    }
+  }
+}
+
+export default injectIntl(FloatingInsertButton);