@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

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

@@ -0,0 +1,482 @@
+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 '@atlaskit/editor-common/keymaps';
+import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { cellColourPreviewStyles } from './styles';
+import { closestElement } from '@atlaskit/editor-common/utils';
+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)(state, dispatch);
+          this.toggleOpen();
+          break;
+
+        case 'split':
+          splitCellWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+          this.toggleOpen();
+          break;
+
+        case 'distribute_columns':
+          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), 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(color, targetCellPosition)(state, dispatch);
+      // TODO: restore
+
+      setColorWithAnalytics(editorAnalyticsAPI)(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

@@ -0,0 +1,99 @@
+/** @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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next'; // import { MessageDescriptor } from '../../../../types/i18n';
+
+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);