@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,59 +0,0 @@
-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

@@ -1,302 +0,0 @@
-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 { 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, getRowDeleteButtonParams, getRowHeights } from '../../utils';
-import { getColumnsWidths } from '../../utils/column-controls';
-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

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

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

@@ -1,96 +0,0 @@
-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 '../../../../keymaps';
-import { closestElement } from '../../../../utils/dom';
-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

@@ -1,96 +0,0 @@
-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;