@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/getPopUpOptions.js

@@ -0,0 +1,59 @@
+import { tableDeleteButtonOffset, tableDeleteButtonSize, tableToolbarSize } from '../consts';
+const DELETE_BUTTON_CONTROLS_OFFSET = tableToolbarSize + tableDeleteButtonSize + tableDeleteButtonOffset;
+
+function getColumnOptions(left, tableWrapper) {
+  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) {
+  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
+}) {
+  switch (selectionType) {
+    case 'column':
+      return getColumnOptions(left, tableWrapper);
+
+    case 'row':
+      return getRowOptions(top);
+
+    default:
+      {
+        return {};
+      }
+  }
+}

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/index.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { getSelectionRect, isTableSelected } from '@atlaskit/editor-tables/utils';
+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 { 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';
+export function getSelectionType(selection) {
+  if (!isTableSelected(selection) && selection instanceof CellSelection) {
+    if (selection.isRowSelection()) {
+      return 'row';
+    }
+
+    if (selection.isColSelection()) {
+      return 'column';
+    }
+  }
+
+  return;
+}
+
+class FloatingDeleteButton extends Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "wrapper", null);
+
+    _defineProperty(this, "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;
+      }
+    });
+
+    _defineProperty(this, "onWrapperScrolled", e => {
+      const wrapper = e.target;
+      this.setState({
+        scrollLeft: wrapper.scrollLeft
+      });
+    });
+
+    _defineProperty(this, "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;
+    });
+
+    _defineProperty(this, "handleMouseLeave", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      return clearHoverSelection()(state, dispatch);
+    });
+
+    _defineProperty(this, "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);
+    });
+
+    this.state = {
+      selectionType: undefined,
+      top: 0,
+      left: 0,
+      indexes: [],
+      scrollLeft: 0
+    };
+  }
+
+  shouldComponentUpdate(_, nextState) {
+    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();
+  }
+
+  componentWillUnmount() {
+    if (this.wrapper) {
+      this.wrapper.removeEventListener('scroll', this.onWrapperScrolled);
+    }
+  }
+
+  /**
+   * 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, prevState) {
+    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;
+  }
+
+  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 = /*#__PURE__*/React.createElement(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 /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("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), mountTo);
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(Popup, _extends({
+      target: tableRef,
+      mountTo: mountTo,
+      boundariesElement: tableContainerWrapper || boundariesElement,
+      scrollableElement: this.wrapper || undefined,
+      forcePlacement: true,
+      allowOutOfBounds: true
+    }, popupOpts), button);
+  }
+
+}
+
+_defineProperty(FloatingDeleteButton, "displayName", 'FloatingDeleteButton');
+
+export default FloatingDeleteButton;

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { 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';
+
+const getInsertLineHeight = (tableRef, hasStickyHeaders) => {
+  // 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 => {
+  const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
+
+  if (parent) {
+    return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`) ? tableToolbarSize + akEditorTableNumberColumnWidth - 1 : tableToolbarSize;
+  }
+
+  return tableToolbarSize;
+};
+
+const getInsertLineWidth = tableRef => {
+  // 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 => {
+  return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
+};
+
+const InsertButton = ({
+  onMouseDown,
+  tableRef,
+  type,
+  intl: {
+    formatMessage
+  },
+  hasStickyHeaders
+}) => {
+  const content = /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(keymaps.ToolTipContent, {
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? keymaps.addRowAfter : keymaps.addColumnAfter
+    }),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.CONTROLS_INSERT_BUTTON_INNER
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: ClassName.CONTROLS_INSERT_BUTTON,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: ClassName.CONTROLS_BUTTON_ICON
+  }, /*#__PURE__*/React.createElement("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"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.CONTROLS_INSERT_LINE,
+    style: type === 'row' ? {
+      width: getInsertLineWidth(tableRef)
+    } : {
+      height: getInsertLineHeight(tableRef, hasStickyHeaders)
+    }
+  })));
+  const floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  return /*#__PURE__*/React.createElement("div", {
+    className: floatingButtonClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
+  }, content));
+};
+
+export default injectIntl(InsertButton);

package/dist/es2019/plugins/table/ui/FloatingInsertButton/getPopupOptions.js

@@ -0,0 +1,96 @@
+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) {
+  let defaultOptions = {
+    alignX: 'left',
+    alignY: 'bottom',
+    offset: [0, VERTICAL_ALIGN_ROW_BUTTON]
+  };
+
+  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, tableContainer, hasNumberedColumns) {
+  const options = {
+    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, index, hasNumberedColumns, tableContainer) {
+  switch (type) {
+    case 'column':
+      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+
+    case 'row':
+      return getRowOptions(index);
+
+    default:
+      return {};
+  }
+}
+
+export default getPopupOptions;