@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

package/dist/es2019/plugins/table/transforms/split.js

@@ -1,5 +1,4 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-
 /**
  * Helper to split all the cells in a range of columns
  * @param tr
@@ -10,63 +9,61 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 export function splitCellsInColumns(tr, tablePos, columnStart, columnEnd) {
   let mapStart = tr.mapping.maps.length;
   const table = tr.doc.nodeAt(tablePos);
-
   if (!table) {
     return tr;
   }
-
   const tableStart = tr.doc.resolve(tablePos).start(1);
   const map = TableMap.get(table);
-
   for (let column = columnStart; column < columnEnd; column++) {
     for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
       const cellIndex = rowIndex * map.width + column;
-      const cellPos = map.map[cellIndex]; // Check if the cell is contained by another by another row/column
-
-      const hasMergedCellsBefore = column > 0 && map.map[cellIndex - 1] === cellPos || rowIndex > 0 && map.map[(rowIndex - 1) * map.width + column] === cellPos; // Check if the cell contains another row/column
+      const cellPos = map.map[cellIndex];
 
+      // Check if the cell is contained by another by another row/column
+      const hasMergedCellsBefore = column > 0 && map.map[cellIndex - 1] === cellPos || rowIndex > 0 && map.map[(rowIndex - 1) * map.width + column] === cellPos;
+      // Check if the cell contains another row/column
       const hasMergedCellsAfter = column < map.width - 1 && map.map[cellIndex + 1] === cellPos || rowIndex < map.height - 1 && map.map[(rowIndex + 1) * map.width + column] === cellPos;
-
       if (!hasMergedCellsBefore && hasMergedCellsAfter) {
         // Is a merged cell that start in this row/column
         const cellNode = table.nodeAt(cellPos);
-
         if (!cellNode) {
           continue;
         }
-
         const {
           colwidth,
           colspan = 1,
           rowspan = 1
         } = cellNode.attrs;
-        let mapping = tr.mapping.slice(mapStart); // Update current node with the simple colspan
+        let mapping = tr.mapping.slice(mapStart);
 
-        const baseAttrs = { ...cellNode.attrs,
+        // Update current node with the simple colspan
+        const baseAttrs = {
+          ...cellNode.attrs,
           colspan: 1,
           rowspan: 1
-        }; // Add the new cells
-
+        };
+        // Add the new cells
         for (let cellRowIndex = rowIndex; cellRowIndex < rowIndex + rowspan; cellRowIndex++) {
           for (let i = 0; i < colspan; i++) {
             let mapping = tr.mapping.slice(mapStart);
             const cellPos = map.positionAt(cellRowIndex, column + i, table);
-            tr.insert(mapping.map(cellPos + tableStart), cellNode.type.createAndFill({ ...baseAttrs,
+            tr.insert(mapping.map(cellPos + tableStart), cellNode.type.createAndFill({
+              ...baseAttrs,
               colwidth: colwidth ? [colwidth[i]] : undefined
             }));
           }
-        } // Delete the original cell
-
+        }
 
+        // Delete the original cell
         mapping = tr.mapping.slice(mapStart);
-        tr.delete(mapping.map(cellPos + tableStart), mapping.map(cellPos + tableStart + cellNode.nodeSize)); // Skip rows based on rowspan
+        tr.delete(mapping.map(cellPos + tableStart), mapping.map(cellPos + tableStart + cellNode.nodeSize));
 
+        // Skip rows based on rowspan
         if (rowspan && rowspan > 1) {
           rowIndex += rowspan - 1;
         }
       }
     }
   }
-
   return tr;
 }

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

@@ -2,7 +2,6 @@ import { tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@at
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export let TableDecorations;
-
 (function (TableDecorations) {
   TableDecorations["ALL_CONTROLS_HOVER"] = "CONTROLS_HOVER";
   TableDecorations["ROW_CONTROLS_HOVER"] = "ROW_CONTROLS_HOVER";
@@ -15,8 +14,8 @@ export let TableDecorations;
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
 })(TableDecorations || (TableDecorations = {}));
-
-export const TableCssClassName = { ...TableSharedCssClassName,
+export const TableCssClassName = {
+  ...TableSharedCssClassName,
   COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
@@ -78,7 +77,6 @@ export const TableCssClassName = { ...TableSharedCssClassName,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`
 };
 export let ShadowEvent;
-
 (function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -20,23 +19,21 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 export class FloatingContextualButtonInner extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "handleClick", () => {
       const {
         state,
         dispatch
-      } = this.props.editorView; // Clicking outside the dropdown handles toggling the menu closed
+      } = this.props.editorView;
+      // Clicking outside the dropdown handles toggling the menu closed
       // (otherwise these two toggles combat each other).
       // In the event a user clicks the chevron button again
       // That will count as clicking outside the dropdown and
       // will be toggled appropriately
-
       if (!this.props.isContextualMenuOpen) {
         toggleContextualMenu()(state, dispatch);
       }
     });
   }
-
   render() {
     const {
       mountPoint,
@@ -49,16 +46,13 @@ export class FloatingContextualButtonInner extends React.Component {
       },
       dispatchAnalyticsEvent
     } = this.props; //  : Props & WrappedComponentProps
-
     const domAtPos = editorView.domAtPos.bind(editorView);
     let targetCellRef;
-
     try {
       targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.warn(error);
-
       if (dispatchAnalyticsEvent) {
         const payload = {
           action: ACTION.ERRORED,
@@ -78,11 +72,9 @@ export class FloatingContextualButtonInner extends React.Component {
         dispatchAnalyticsEvent(payload);
       }
     }
-
     if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
       return null;
     }
-
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const labelCellOptions = formatMessage(messages.cellOptions);
     const button = jsx("div", {
@@ -102,7 +94,6 @@ export class FloatingContextualButtonInner extends React.Component {
       "aria-label": labelCellOptions
     }));
     const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-
     if (this.props.stickyHeader && parentSticky) {
       const pos = targetCellRef.getBoundingClientRect();
       return jsx("div", {
@@ -114,7 +105,6 @@ export class FloatingContextualButtonInner extends React.Component {
         }
       }, button);
     }
-
     return jsx(Popup, {
       alignX: "right",
       alignY: "start",
@@ -128,15 +118,11 @@ export class FloatingContextualButtonInner extends React.Component {
       zIndex: akEditorSmallZIndex
     }, button);
   }
-
   shouldComponentUpdate(nextProps) {
     return this.props.tableNode !== nextProps.tableNode || this.props.targetCellPosition !== nextProps.targetCellPosition || this.props.layout !== nextProps.layout || this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen || this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || this.props.stickyHeader !== nextProps.stickyHeader;
   }
-
 }
-
 _defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
-
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
   return jsx(ErrorBoundary, {

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
@@ -67,26 +66,20 @@ export const messages = defineMessages({
 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,
@@ -105,18 +98,16 @@ export class ContextualMenu extends Component {
       const items = [];
       const {
         isSubmenuOpen
-      } = this.state; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-
+      } = 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({
@@ -138,7 +129,6 @@ export class ContextualMenu extends Component {
           })))
         });
       }
-
       items.push({
         content: formatMessage(tableMessages.insertColumn),
         value: {
@@ -181,7 +171,6 @@ export class ContextualMenu extends Component {
           name: 'delete_row'
         }
       });
-
       if (allowMergeCells) {
         items.push({
           content: formatMessage(messages.mergeCells),
@@ -198,10 +187,8 @@ export class ContextualMenu extends Component {
           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({
@@ -212,7 +199,6 @@ export class ContextualMenu extends Component {
           isDisabled: !wouldChange
         });
       }
-
       if (allowColumnSorting) {
         const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
         const warning = hasMergedCellsInTable ? {
@@ -234,7 +220,6 @@ export class ContextualMenu extends Component {
           ...warning
         });
       }
-
       items.push({
         content: formatMessage(messages.clearCells, {
           0: Math.max(noOfColumns, noOfRows)
@@ -250,7 +235,6 @@ export class ContextualMenu extends Component {
         items
       }] : null;
     });
-
     _defineProperty(this, "onMenuItemActivated", ({
       item
     }) => {
@@ -259,8 +243,8 @@ export class ContextualMenu extends Component {
         selectionRect,
         editorAnalyticsAPI,
         getEditorContainerWidth
-      } = this.props; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-
+      } = this.props;
+      // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         state,
         dispatch
@@ -268,48 +252,38 @@ export class ContextualMenu extends Component {
       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), 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,
@@ -317,12 +291,10 @@ export class ContextualMenu extends Component {
           })(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: {
@@ -334,7 +306,6 @@ export class ContextualMenu extends Component {
           break;
       }
     });
-
     _defineProperty(this, "toggleOpen", () => {
       const {
         isOpen,
@@ -344,14 +315,12 @@ export class ContextualMenu extends Component {
         }
       } = this.props;
       toggleContextualMenu()(state, dispatch);
-
       if (!isOpen) {
         this.setState({
           isSubmenuOpen: false
         });
       }
     });
-
     _defineProperty(this, "handleOpenChange", () => {
       const {
         editorView: {
@@ -364,7 +333,6 @@ export class ContextualMenu extends Component {
         isSubmenuOpen: false
       });
     });
-
     _defineProperty(this, "handleItemMouseEnter", ({
       item
     }) => {
@@ -375,7 +343,6 @@ export class ContextualMenu extends Component {
         },
         selectionRect
       } = this.props;
-
       if (item.value.name === 'background') {
         if (!this.state.isSubmenuOpen) {
           this.setState({
@@ -383,20 +350,16 @@ export class ContextualMenu extends Component {
           });
         }
       }
-
       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
     }) => {
@@ -404,16 +367,13 @@ export class ContextualMenu extends Component {
         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({
@@ -421,13 +381,12 @@ export class ContextualMenu extends Component {
         });
       }
     });
-
     _defineProperty(this, "setColor", color => {
       const {
         editorView,
         editorAnalyticsAPI
-      } = this.props; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-
+      } = this.props;
+      // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         targetCellPosition
       } = getPluginState(editorView.state);
@@ -439,7 +398,6 @@ export class ContextualMenu extends Component {
       this.toggleOpen();
     });
   }
-
   render() {
     const {
       isOpen,
@@ -448,16 +406,15 @@ export class ContextualMenu extends Component {
       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 //This needs be removed when the a11y is completely handled
+      mountTo: mountPoint
+      //This needs be removed when the a11y is completely handled
       //Disabling key navigation now as it works only partially
       ,
       disableArrowKeyNavigation: true,
@@ -473,11 +430,8 @@ export class ContextualMenu extends Component {
       offset: offset
     }));
   }
-
 }
-
 _defineProperty(ContextualMenu, "defaultProps", {
   boundariesElement: document.body
 });
-
 export default injectIntl(ContextualMenu);

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

@@ -8,27 +8,24 @@ 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
+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,
@@ -43,27 +40,21 @@ const FloatingContextualMenu = ({
   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",
@@ -72,7 +63,8 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: 188,
-    fitWidth: contextualMenuDropdownWidth // z-index value below is to ensure that this menu is above other floating menu
+    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,
@@ -94,6 +86,5 @@ const FloatingContextualMenu = ({
     getEditorContainerWidth: getEditorContainerWidth
   })));
 };
-
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';
 export default FloatingContextualMenu;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
-
 const DeleteButton = ({
   style,
   onClick,
@@ -31,5 +30,4 @@ const DeleteButton = ({
   fill: "currentColor",
   fillRule: "evenodd"
 }))));
-
 export default injectIntl(DeleteButton);

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

@@ -1,12 +1,10 @@
 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();
@@ -14,30 +12,25 @@ function getColumnOptions(left, tableWrapper) {
         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,
+      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,
@@ -47,10 +40,8 @@ export default function getPopupOptions({
   switch (selectionType) {
     case 'column':
       return getColumnOptions(left, tableWrapper);
-
     case 'row':
       return getRowOptions(top);
-
     default:
       {
         return {};