@atlaskit/editor-core 173.0.1 → 175.0.0

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,480 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @jsx jsx */
-import { Component } from 'react';
-import { jsx } from '@emotion/react';
-import { splitCell } from '@atlaskit/editor-tables/utils';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import { addColumnAfter, addRowAfter, backspace, tooltip } from '../../../../keymaps';
-import ColorPalette from '../../../../ui/ColorPalette';
-import cellBackgroundColorPalette from '../../../../ui/ColorPalette/Palettes/cellBackgroundColorPalette';
-import DropdownMenu from '../../../../ui/DropdownMenu';
-import { shortcutStyle, cellColourPreviewStyles } from '../../../../ui/styles';
-import { closestElement } from '../../../../utils/dom';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
-import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, distributeColumnsWidthsWithAnalytics } from '../../commands-with-analytics';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { canMergeCells } from '../../transforms';
-import { TableCssClassName as ClassName } from '../../types';
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
-import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
-import tableMessages from '../messages';
-import { contextualMenuDropdownWidth } from '../consts';
-import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
-export const messages = defineMessages({
-  cellBackground: {
-    id: 'fabric.editor.cellBackground',
-    defaultMessage: 'Cell background',
-    description: 'Change the background color of a table cell.'
-  },
-  mergeCells: {
-    id: 'fabric.editor.mergeCells',
-    defaultMessage: 'Merge cells',
-    description: 'Merge tables cells together.'
-  },
-  splitCell: {
-    id: 'fabric.editor.splitCell',
-    defaultMessage: 'Split cell',
-    description: 'Split a merged table cell.'
-  },
-  clearCells: {
-    id: 'fabric.editor.clearCells',
-    defaultMessage: 'Clear {0, plural, one {cell} other {cells}}',
-    description: 'Clears the contents of the selected cells (this does not delete the cells themselves).'
-  },
-  sortColumnASC: {
-    id: 'fabric.editor.sortColumnASC',
-    defaultMessage: 'Sort column A → Z',
-    description: 'Sort column in ascending order'
-  },
-  sortColumnDESC: {
-    id: 'fabric.editor.sortColumnDESC',
-    defaultMessage: 'Sort column Z → A',
-    description: 'Sort column in descending order'
-  },
-  canNotSortTable: {
-    id: 'fabric.editor.canNotSortTable',
-    defaultMessage: `⚠️ You can't sort a table with merged cells`,
-    description: `Split your cells to enable this feature`
-  },
-  distributeColumns: {
-    id: 'fabric.editor.distributeColumns',
-    defaultMessage: `Distribute columns`,
-    description: `Distribute widths between selected columns`
-  }
-});
-export class ContextualMenu extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      isSubmenuOpen: false
-    });
-
-    _defineProperty(this, "handleSubMenuRef", ref => {
-      const parent = closestElement(this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
-
-      if (!(parent && ref)) {
-        return;
-      }
-
-      const boundariesRect = parent.getBoundingClientRect();
-      const rect = ref.getBoundingClientRect();
-
-      if (rect.left + rect.width > boundariesRect.width) {
-        ref.style.left = `-${rect.width}px`;
-      }
-    });
-
-    _defineProperty(this, "createItems", () => {
-      const {
-        allowMergeCells,
-        allowColumnSorting,
-        allowBackgroundColor,
-        editorView: {
-          state
-        },
-        isOpen,
-        selectionRect,
-        intl: {
-          formatMessage
-        },
-        editorView
-      } = this.props;
-      const items = [];
-      const {
-        isSubmenuOpen
-      } = this.state; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-
-      const {
-        targetCellPosition,
-        pluginConfig: {
-          allowDistributeColumns
-        }
-      } = getPluginState(editorView.state);
-
-      if (allowBackgroundColor) {
-        var _node$attrs;
-
-        const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
-        const background = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
-        items.push({
-          content: formatMessage(messages.cellBackground),
-          value: {
-            name: 'background'
-          },
-          elemAfter: jsx("div", null, jsx("div", {
-            css: cellColourPreviewStyles(background),
-            className: ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && jsx("div", {
-            className: ClassName.CONTEXTUAL_SUBMENU,
-            ref: this.handleSubMenuRef
-          }, jsx(ColorPalette, {
-            cols: 7,
-            palette: cellBackgroundColorPalette,
-            onClick: this.setColor,
-            selectedColor: background
-          })))
-        });
-      }
-
-      items.push({
-        content: formatMessage(tableMessages.insertColumn),
-        value: {
-          name: 'insert_column'
-        },
-        elemAfter: jsx("div", {
-          css: shortcutStyle
-        }, tooltip(addColumnAfter))
-      });
-      items.push({
-        content: formatMessage(tableMessages.insertRow),
-        value: {
-          name: 'insert_row'
-        },
-        elemAfter: jsx("div", {
-          css: shortcutStyle
-        }, tooltip(addRowAfter))
-      });
-      const {
-        top,
-        bottom,
-        right,
-        left
-      } = selectionRect;
-      const noOfColumns = right - left;
-      const noOfRows = bottom - top;
-      items.push({
-        content: formatMessage(tableMessages.removeColumns, {
-          0: noOfColumns
-        }),
-        value: {
-          name: 'delete_column'
-        }
-      });
-      items.push({
-        content: formatMessage(tableMessages.removeRows, {
-          0: noOfRows
-        }),
-        value: {
-          name: 'delete_row'
-        }
-      });
-
-      if (allowMergeCells) {
-        items.push({
-          content: formatMessage(messages.mergeCells),
-          value: {
-            name: 'merge'
-          },
-          isDisabled: !canMergeCells(state.tr)
-        });
-        items.push({
-          content: formatMessage(messages.splitCell),
-          value: {
-            name: 'split'
-          },
-          isDisabled: !splitCell(state)
-        });
-      }
-
-      if (allowDistributeColumns) {
-        var _newResizeState$chang;
-
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), this.props.getEditorContainerWidth);
-        const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        items.push({
-          content: formatMessage(messages.distributeColumns),
-          value: {
-            name: 'distribute_columns'
-          },
-          isDisabled: !wouldChange
-        });
-      }
-
-      if (allowColumnSorting) {
-        const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
-        const warning = hasMergedCellsInTable ? {
-          tooltipDescription: formatMessage(messages.canNotSortTable),
-          isDisabled: true
-        } : {};
-        items.push({
-          content: formatMessage(messages.sortColumnASC),
-          value: {
-            name: 'sort_column_asc'
-          },
-          ...warning
-        });
-        items.push({
-          content: formatMessage(messages.sortColumnDESC),
-          value: {
-            name: 'sort_column_desc'
-          },
-          ...warning
-        });
-      }
-
-      items.push({
-        content: formatMessage(messages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
-        value: {
-          name: 'clear'
-        },
-        elemAfter: jsx("div", {
-          css: shortcutStyle
-        }, tooltip(backspace))
-      });
-      return items.length ? [{
-        items
-      }] : null;
-    });
-
-    _defineProperty(this, "onMenuItemActivated", ({
-      item
-    }) => {
-      const {
-        editorView,
-        selectionRect,
-        editorAnalyticsAPI,
-        getEditorContainerWidth
-      } = this.props; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-
-      const {
-        state,
-        dispatch
-      } = editorView;
-      const {
-        targetCellPosition
-      } = getPluginState(state);
-
-      switch (item.value.name) {
-        case 'sort_column_desc':
-          sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'sort_column_asc':
-          sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.ASC)(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'merge':
-          mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'split':
-          splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'distribute_columns':
-          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), this.props.getEditorContainerWidth);
-
-          if (newResizeStateWithAnalytics) {
-            distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
-            this.toggleOpen();
-          }
-
-          break;
-
-        case 'clear':
-          emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, targetCellPosition)(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'insert_column':
-          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
-          this.toggleOpen();
-          break;
-
-        case 'insert_row':
-          insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, {
-            index: selectionRect.bottom,
-            moveCursorToInsertedRow: true
-          })(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'delete_column':
-          deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
-          this.toggleOpen();
-          break;
-
-        case 'delete_row':
-          const {
-            pluginConfig: {
-              isHeaderRowRequired
-            }
-          } = getPluginState(state);
-          deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
-          this.toggleOpen();
-          break;
-      }
-    });
-
-    _defineProperty(this, "toggleOpen", () => {
-      const {
-        isOpen,
-        editorView: {
-          state,
-          dispatch
-        }
-      } = this.props;
-      toggleContextualMenu()(state, dispatch);
-
-      if (!isOpen) {
-        this.setState({
-          isSubmenuOpen: false
-        });
-      }
-    });
-
-    _defineProperty(this, "handleOpenChange", () => {
-      const {
-        editorView: {
-          state,
-          dispatch
-        }
-      } = this.props;
-      toggleContextualMenu()(state, dispatch);
-      this.setState({
-        isSubmenuOpen: false
-      });
-    });
-
-    _defineProperty(this, "handleItemMouseEnter", ({
-      item
-    }) => {
-      const {
-        editorView: {
-          state,
-          dispatch
-        },
-        selectionRect
-      } = this.props;
-
-      if (item.value.name === 'background') {
-        if (!this.state.isSubmenuOpen) {
-          this.setState({
-            isSubmenuOpen: true
-          });
-        }
-      }
-
-      if (item.value.name === 'delete_column') {
-        hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
-      }
-
-      if (item.value.name === 'delete_row') {
-        hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
-      }
-
-      if (['sort_column_asc', 'sort_column_desc'].indexOf(item.value.name) > -1 && getMergedCellsPositions(state.tr).length !== 0) {
-        hoverMergedCells()(state, dispatch);
-      }
-    });
-
-    _defineProperty(this, "handleItemMouseLeave", ({
-      item
-    }) => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-
-      if (item.value.name === 'background') {
-        this.closeSubmenu();
-      }
-
-      if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
-        clearHoverSelection()(state, dispatch);
-      }
-    });
-
-    _defineProperty(this, "closeSubmenu", () => {
-      if (this.state.isSubmenuOpen) {
-        this.setState({
-          isSubmenuOpen: false
-        });
-      }
-    });
-
-    _defineProperty(this, "setColor", color => {
-      const {
-        editorView,
-        editorAnalyticsAPI
-      } = this.props; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-
-      const {
-        targetCellPosition
-      } = getPluginState(editorView.state);
-      const {
-        state,
-        dispatch
-      } = editorView;
-      setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
-      this.toggleOpen();
-    });
-  }
-
-  render() {
-    const {
-      isOpen,
-      mountPoint,
-      offset,
-      boundariesElement
-    } = this.props;
-    const items = this.createItems();
-
-    if (!items) {
-      return null;
-    }
-
-    return jsx("div", {
-      "data-testid": "table-cell-contextual-menu",
-      onMouseLeave: this.closeSubmenu
-    }, jsx(DropdownMenu, {
-      mountTo: mountPoint,
-      items: items,
-      isOpen: isOpen,
-      onOpenChange: this.handleOpenChange,
-      onItemActivated: this.onMenuItemActivated,
-      onMouseEnter: this.handleItemMouseEnter,
-      onMouseLeave: this.handleItemMouseLeave,
-      fitHeight: 188,
-      fitWidth: contextualMenuDropdownWidth,
-      boundariesElement: boundariesElement,
-      offset: offset
-    }));
-  }
-
-}
-
-_defineProperty(ContextualMenu, "defaultProps", {
-  boundariesElement: document.body
-});
-
-export default injectIntl(ContextualMenu);

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

@@ -1,99 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { findDomRefAtPos } from 'prosemirror-utils';
-import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-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 { contextualMenuDropdownWidth, contextualMenuTriggerSize } from '../consts';
-import { tablePopupStyles } from './styles';
-import ContextualMenu from './ContextualMenu'; // offset of the contextual menu dropdown
-
-const calculateOffset = (targetCellRef, state) => {
-  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];
-};
-
-const FloatingContextualMenu = ({
-  mountPoint,
-  boundariesElement,
-  scrollableElement,
-  editorView,
-  isOpen,
-  pluginConfig,
-  editorAnalyticsAPI,
-  getEditorContainerWidth
-}) => {
-  // 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 jsx(Popup, {
-    alignX: "right",
-    alignY: "top",
-    target: targetCellRef,
-    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]
-  }, jsx("div", {
-    css: tablePopupStyles
-  }, jsx(ContextualMenu, {
-    editorView: editorView,
-    offset: calculateOffset(targetCellRef, editorView.state),
-    isOpen: isOpen,
-    targetCellPosition: targetCellPosition,
-    allowColumnSorting: pluginConfig && pluginConfig.allowColumnSorting,
-    allowMergeCells: pluginConfig.allowMergeCells,
-    allowBackgroundColor: pluginConfig.allowBackgroundColor,
-    selectionRect: selectionRect,
-    boundariesElement: boundariesElement,
-    editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
-  })));
-};
-
-FloatingContextualMenu.displayName = 'FloatingContextualMenu';
-export default FloatingContextualMenu;

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/styles.js

@@ -1,43 +0,0 @@
-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 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/dist/es2019/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { injectIntl } from 'react-intl-next';
-import { TableCssClassName as ClassName } from '../../types';
-
-const DeleteButton = ({
-  style,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  removeLabel,
-  intl: {
-    formatMessage
-  }
-}) => /*#__PURE__*/React.createElement("div", {
-  className: ClassName.CONTROLS_DELETE_BUTTON_WRAP,
-  style: style,
-  onMouseEnter: onMouseEnter,
-  onMouseLeave: onMouseLeave
-}, /*#__PURE__*/React.createElement("button", {
-  type: "button",
-  title: formatMessage(removeLabel, {
-    0: 1
-  }),
-  className: ClassName.CONTROLS_DELETE_BUTTON,
-  onMouseDown: onClick,
-  onMouseMove: e => e.preventDefault()
-}, /*#__PURE__*/React.createElement("svg", {
-  className: ClassName.CONTROLS_BUTTON_ICON
-}, /*#__PURE__*/React.createElement("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"
-}))));
-
-export default injectIntl(DeleteButton);