@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

package/dist/es2019/plugins/table/commands/sort.js

@@ -5,24 +5,20 @@ import { convertArrayOfRowsToTableNode, convertTableNodeToArrayOfRows, findTable
 import { createCompareNodes } from '@atlaskit/editor-common/utils';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { TableSortStep, TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
-
 function createGetInlineCardTextFromStore(state) {
   return attrs => {
     const {
       data
     } = attrs;
-
     if (data && (data.name || data.title)) {
       return data.name || data.title;
     }
-
     const {
       url: cardUrl
     } = attrs;
     return cardUrl;
   };
 }
-
 export const sortByColumn = (columnIndex, order = SortOrder.DESC) => createCommand(state => ({
   type: 'SORT_TABLE',
   data: {
@@ -33,34 +29,26 @@ export const sortByColumn = (columnIndex, order = SortOrder.DESC) => createComma
   }
 }), (tr, state) => {
   const table = findTable(tr.selection);
-
   if (!table || !table.node) {
     return tr;
   }
-
   const selectionRect = isSelectionType(tr.selection, 'cell') ? getSelectionRect(tr.selection) : findCellRectClosestToPos(tr.selection.$from);
-
   if (!selectionRect) {
     return tr;
   }
-
   const tablePluginState = getPluginState(state);
   const tableArray = convertTableNodeToArrayOfRows(table.node);
   let headerRow;
-
   if (tablePluginState.isHeaderRowEnabled) {
     headerRow = tableArray.shift();
   }
-
   const compareNodesInOrder = createCompareNodes({
     getInlineCardTextFromStore: createGetInlineCardTextFromStore(state)
   }, order);
   const sortedTable = tableArray.sort((rowA, rowB) => compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]));
-
   if (headerRow) {
     sortedTable.unshift(headerRow);
   }
-
   const newTableNode = convertArrayOfRowsToTableNode(table.node, sortedTable);
   tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTableNode);
   const pos = TableMap.get(table.node).positionAt(selectionRect.top, columnIndex, table.node);

package/dist/es2019/plugins/table/commands/split-cell.js

@@ -1,6 +1,5 @@
 import { splitCellWithType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
-
 /**
  * We need to split cell keeping the right type of cell given current table configuration.
  * We are using editor-tables splitCellWithType that allows you to choose what cell type should be.
@@ -11,7 +10,6 @@ export const splitCell = (state, dispatch) => {
     tableHeader,
     tableCell
   } = state.schema.nodes;
-
   if (dispatch) {
     return splitCellWithType(({
       row,
@@ -20,10 +18,8 @@ export const splitCell = (state, dispatch) => {
       if (row === 0 && tableState.isHeaderRowEnabled || col === 0 && tableState.isHeaderColumnEnabled) {
         return tableHeader;
       }
-
       return tableCell;
     })(state, dispatch);
   }
-
   return true;
 };

package/dist/es2019/plugins/table/commands/toggle.js

@@ -1,31 +1,30 @@
 //#region Imports
+
 import { toggleHeader } from '@atlaskit/editor-tables/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { createCommand } from '../pm-plugins/plugin-factory'; //#endregion
-// #region Utils
+import { createCommand } from '../pm-plugins/plugin-factory';
+//#endregion
 
+// #region Utils
 /**
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-
 export const getNextLayout = currentLayout => {
   switch (currentLayout) {
     case 'default':
       return 'wide';
-
     case 'wide':
       return 'full-width';
-
     case 'full-width':
       return 'default';
-
     default:
       return 'default';
   }
-}; // #endregion
-// #region Actions
+};
+// #endregion
 
+// #region Actions
 export const toggleHeaderRow = (state, dispatch) => toggleHeader('row')(state, tr => createCommand({
   type: 'TOGGLE_HEADER_ROW'
 }, () => tr.setMeta('scrollIntoView', false))(state, dispatch));
@@ -40,24 +39,21 @@ export const toggleNumberColumn = (state, dispatch) => {
     node,
     pos
   } = findTable(state.selection);
-  tr.setNodeMarkup(pos, state.schema.nodes.table, { ...node.attrs,
+  tr.setNodeMarkup(pos, state.schema.nodes.table, {
+    ...node.attrs,
     isNumberColumnEnabled: !node.attrs.isNumberColumnEnabled
   });
   tr.setMeta('scrollIntoView', false);
-
   if (dispatch) {
     dispatch(tr);
   }
-
   return true;
 };
 export const toggleTableLayout = (state, dispatch) => {
   const table = findTable(state.selection);
-
   if (!table) {
     return false;
   }
-
   const layout = getNextLayout(table.node.attrs.layout);
   return createCommand({
     type: 'SET_TABLE_LAYOUT',
@@ -65,7 +61,8 @@ export const toggleTableLayout = (state, dispatch) => {
       layout
     }
   }, tr => {
-    tr.setNodeMarkup(table.pos, state.schema.nodes.table, { ...table.node.attrs,
+    tr.setNodeMarkup(table.pos, state.schema.nodes.table, {
+      ...table.node.attrs,
       layout
     });
     return tr.setMeta('scrollIntoView', false);
@@ -73,4 +70,5 @@ export const toggleTableLayout = (state, dispatch) => {
 };
 export const toggleContextualMenu = () => createCommand({
   type: 'TOGGLE_CONTEXTUAL_MENU'
-}, tr => tr.setMeta('addToHistory', false)); // #endregion
+}, tr => tr.setMeta('addToHistory', false));
+// #endregion

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -19,8 +19,9 @@ const TABLE_BREAKOUT_NAME_MAPPING = {
   default: TABLE_BREAKOUT.NORMAL,
   wide: TABLE_BREAKOUT.WIDE,
   'full-width': TABLE_BREAKOUT.FULL_WIDTH
-}; // #region Analytics wrappers
+};
 
+// #region Analytics wrappers
 export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMethod, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {
@@ -72,7 +73,6 @@ export const mergeCellsWithAnalytics = editorAnalyticsAPI => inputMethod => with
   if (dispatch) {
     dispatch(mergeCells(state.tr));
   }
-
   return true;
 });
 export const splitCellWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
@@ -83,7 +83,6 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => inputMethod => withE
     totalColumnCount
   } = getSelectedCellInfo(selection);
   const cell = findCellClosestToPos(selection.$anchor);
-
   if (cell) {
     const {
       rowspan: verticalCells,
@@ -104,7 +103,6 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => inputMethod => withE
       eventType: EVENT_TYPE.TRACK
     };
   }
-
   return;
 })(editorAnalyticsAPI)(splitCell);
 export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
@@ -141,11 +139,9 @@ export const addRowAroundSelection = editorAnalyticsAPI => side => (state, dispa
   } = state;
   const isCellSelection = selection instanceof CellSelection;
   const rect = isCellSelection ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-
   if (!rect) {
     return false;
   }
-
   const position = isCellSelection && side === 'TOP' ? rect.top : rect.bottom - 1;
   const offset = side === 'BOTTOM' ? 1 : 0;
   return insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, {
@@ -213,7 +209,6 @@ export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect,
   if (dispatch) {
     dispatch(deleteRows(rect, isHeaderRowRequired)(state.tr));
   }
-
   return true;
 });
 export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect) => withEditorAnalyticsAPI(({
@@ -240,10 +235,8 @@ export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, re
   if (dispatch) {
     dispatch(deleteColumns(rect, getAllowAddColumnCustomStep(state))(state.tr));
   }
-
   return true;
 });
-
 const getTableDeletedAnalytics = (selection, inputMethod) => {
   const {
     totalRowCount,
@@ -260,7 +253,6 @@ const getTableDeletedAnalytics = (selection, inputMethod) => {
     eventType: EVENT_TYPE.TRACK
   };
 };
-
 export const deleteTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
   selection
 }) => getTableDeletedAnalytics(selection, INPUT_METHOD.FLOATING_TB))(editorAnalyticsAPI)(deleteTable);
@@ -330,7 +322,6 @@ export const toggleTableLayoutWithAnalytics = editorAnalyticsAPI => withEditorAn
     totalRowCount,
     totalColumnCount
   } = getSelectedTableInfo(state.selection);
-
   if (table) {
     const {
       layout
@@ -348,7 +339,6 @@ export const toggleTableLayoutWithAnalytics = editorAnalyticsAPI => withEditorAn
       eventType: EVENT_TYPE.TRACK
     };
   }
-
   return;
 })(editorAnalyticsAPI)(toggleTableLayout);
 export const sortColumnWithAnalytics = editorAnalyticsAPI => (inputMethod, columnIndex, sortOrder) => withEditorAnalyticsAPI(state => {
@@ -390,7 +380,6 @@ export const distributeColumnsWidthsWithAnalytics = editorAnalyticsAPI => (input
     if (dispatch) {
       distributeColumnsWidths(resizeState, table)(state, dispatch);
     }
-
     return true;
   });
 };
@@ -409,4 +398,5 @@ export const wrapTableInExpandWithAnalytics = editorAnalyticsAPI => withEditorAn
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(wrapTableInExpand); // #endregion
+})(editorAnalyticsAPI)(wrapTableInExpand);
+// #endregion

package/dist/es2019/plugins/table/event-handlers.js

@@ -13,24 +13,19 @@ import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper, hasResizeHandler } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
-
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
-
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
-
 const isFocusingFloatingToolbar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
-
 export const handleBlur = (view, event) => {
   const {
     state,
     dispatch
-  } = view; // IE version check for ED-4665
+  } = view;
+  // IE version check for ED-4665
   // Calendar focus check for ED-10466
-
   if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
     setEditorFocus(false)(state, dispatch);
   }
-
   event.preventDefault();
   return false;
 };
@@ -47,10 +42,8 @@ export const handleClick = (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
-
   const element = event.target;
   const table = findTable(view.state.selection);
-
   if (event instanceof MouseEvent && isColumnControlsDecorations(element)) {
     const [startIndex] = getColumnOrRowIndex(element);
     const {
@@ -59,16 +52,15 @@ export const handleClick = (view, event) => {
     } = view;
     return selectColumn(startIndex, event.shiftKey)(state, dispatch);
   }
+  const matchfn = element.matches ? element.matches : element.msMatchesSelector;
 
-  const matchfn = element.matches ? element.matches : element.msMatchesSelector; // check if the table cell with an image is clicked and its not the image itself
-
+  // check if the table cell with an image is clicked and its not the image itself
   if (!table || !isElementInTableCell(element) || !matchfn || matchfn.call(element, 'table .image, table p, table .image div')) {
     return false;
   }
-
   const map = TableMap.get(table.node);
-  /** Getting the offset of current item clicked */
 
+  /** Getting the offset of current item clicked */
   const colElement = closestElement(element, 'td') || closestElement(element, 'th');
   const colIndex = colElement && colElement.cellIndex;
   const rowElement = closestElement(element, 'tr');
@@ -86,28 +78,23 @@ export const handleClick = (view, event) => {
     }
   } = view;
   const cellPos = map.map[cellIndex];
-
   if (isNaN(cellPos) || cellPos === undefined || typeof cellPos !== 'number') {
     return false;
   }
-
   const editorElement = table.node.nodeAt(cellPos);
   /** Only if the last item is media group, insert a paragraph */
-
   if (isLastItemMediaGroup(editorElement)) {
     const posInTable = map.map[cellIndex] + editorElement.nodeSize;
     tr.insert(posInTable + table.pos, paragraph.create());
     dispatch(tr);
     setNodeSelection(view, posInTable + table.pos);
   }
-
   return true;
 };
 export const handleMouseOver = (view, mouseEvent) => {
   if (!(mouseEvent.target instanceof HTMLElement)) {
     return false;
   }
-
   const {
     state,
     dispatch
@@ -117,13 +104,11 @@ export const handleMouseOver = (view, mouseEvent) => {
     insertColumnButtonIndex,
     insertRowButtonIndex
   } = getPluginState(state);
-
   if (isInsertRowButton(target)) {
     const [startIndex, endIndex] = getColumnOrRowIndex(target);
     const positionRow = getMousePositionVerticalRelativeByElement(mouseEvent) === 'bottom' ? endIndex : startIndex;
     return showInsertRowButton(positionRow)(state, dispatch);
   }
-
   if (isColumnControlsDecorations(target)) {
     const [startIndex] = getColumnOrRowIndex(target);
     const {
@@ -132,11 +117,9 @@ export const handleMouseOver = (view, mouseEvent) => {
     } = view;
     return hoverColumns([startIndex], false)(state, dispatch);
   }
-
   if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return hideInsertColumnOrRowButton()(state, dispatch);
   }
-
   if (isResizeHandleDecoration(target)) {
     const [startIndex, endIndex] = getColumnOrRowIndex(target);
     return showResizeHandleLine({
@@ -144,27 +127,23 @@ export const handleMouseOver = (view, mouseEvent) => {
       right: endIndex
     })(state, dispatch);
   }
-
   return false;
-}; // Ignore any `mousedown` `event` from control and numbered column buttons
-// PM end up changing selection during shift selection if not prevented
+};
 
+// Ignore any `mousedown` `event` from control and numbered column buttons
+// PM end up changing selection during shift selection if not prevented
 export const handleMouseDown = (_, event) => {
   const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target)));
-
   if (isControl) {
     event.preventDefault();
   }
-
   return isControl;
 };
 export const handleMouseOut = (view, mouseEvent) => {
   if (!(mouseEvent instanceof MouseEvent) || !(mouseEvent.target instanceof HTMLElement)) {
     return false;
   }
-
   const target = mouseEvent.target;
-
   if (isColumnControlsDecorations(target)) {
     const {
       state,
@@ -172,10 +151,9 @@ export const handleMouseOut = (view, mouseEvent) => {
     } = view;
     return clearHoverSelection()(state, dispatch);
   }
-
-  const relatedTarget = mouseEvent.relatedTarget; // In case the user is moving between cell at the same column
+  const relatedTarget = mouseEvent.relatedTarget;
+  // In case the user is moving between cell at the same column
   // we don't need to hide the resize handle decoration
-
   if (isResizeHandleDecoration(target) && !isResizeHandleDecoration(relatedTarget)) {
     const {
       state,
@@ -183,14 +161,12 @@ export const handleMouseOut = (view, mouseEvent) => {
     } = view;
     return hideResizeHandleLine()(state, dispatch);
   }
-
   return false;
 };
 export const handleMouseLeave = (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
-
   const {
     state,
     dispatch
@@ -200,24 +176,19 @@ export const handleMouseLeave = (view, event) => {
     insertRowButtonIndex
   } = getPluginState(state);
   const target = event.target;
-
   if (isTableControlsButton(target)) {
     return true;
   }
-
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
   }
-
   return false;
 };
 export const handleMouseMove = getEditorFeatureFlags => (view, event, elementContentRects) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
-
   const element = event.target;
-
   if (isColumnControlsDecorations(element)) {
     const {
       state,
@@ -228,12 +199,10 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, elementCon
     } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
     const positionColumn = getMousePositionHorizontalRelativeByElement(event, false, elementContentRects) === 'right' ? endIndex : startIndex;
-
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }
   }
-
   if (isRowControlsButton(element)) {
     const {
       state,
@@ -244,19 +213,15 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, elementCon
     } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
     const positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? endIndex : startIndex;
-
     if (positionRow !== insertRowButtonIndex) {
       return showInsertRowButton(positionRow)(state, dispatch);
     }
   }
-
   const {
     mouseMoveOptimization
   } = getEditorFeatureFlags();
-
   if (!isResizeHandleDecoration(element) && isCell(element)) {
     const positionColumn = getMousePositionHorizontalRelativeByElement(event, mouseMoveOptimization, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
-
     if (positionColumn !== null) {
       const {
         state,
@@ -269,11 +234,9 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, elementCon
       const tableCell = closestElement(element, 'td, th');
       const cellStartPosition = view.posAtDOM(tableCell, 0);
       const rect = findCellRectClosestToPos(state.doc.resolve(cellStartPosition));
-
       if (rect) {
         const columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
         const rowIndexTarget = rect.top;
-
         if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
           target: element,
           columnEndIndexTarget
@@ -283,7 +246,6 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, elementCon
       }
     }
   }
-
   return false;
 };
 export function handleTripleClick(view, pos) {
@@ -292,23 +254,18 @@ export function handleTripleClick(view, pos) {
     dispatch
   } = view;
   const $cellPos = cellAround(state.doc.resolve(pos));
-
   if (!$cellPos) {
     return false;
   }
-
   const cell = state.doc.nodeAt($cellPos.pos);
-
   if (cell) {
     const selFrom = Selection.findFrom($cellPos, 1, true);
     const selTo = Selection.findFrom(state.doc.resolve($cellPos.pos + cell.nodeSize), -1, true);
-
     if (selFrom && selTo) {
       dispatch(state.tr.setSelection(new TextSelection(selFrom.$from, selTo.$to)));
       return true;
     }
   }
-
   return false;
 }
 export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
@@ -316,16 +273,13 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
   let {
     tr
   } = newState;
-
   if (oldSelection instanceof CellSelection) {
     const $anchorCell = oldTr.doc.resolve(oldTr.mapping.map(oldSelection.$anchorCell.pos));
     const $headCell = oldTr.doc.resolve(oldTr.mapping.map(oldSelection.$headCell.pos));
     const cellSelection = new CellSelection($anchorCell, $headCell);
     tr.setSelection(cellSelection);
-
     if (tr.selection instanceof CellSelection) {
       const rect = getSelectionRect(cellSelection);
-
       if (rect) {
         const {
           verticalCells,
@@ -333,8 +287,9 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
           totalCells,
           totalRowCount,
           totalColumnCount
-        } = getSelectedCellInfo(tr.selection); // Reassigning to make it more obvious and consistent
+        } = getSelectedCellInfo(tr.selection);
 
+        // Reassigning to make it more obvious and consistent
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
           action: TABLE_ACTION.CUT,
           actionSubject: ACTION_SUBJECT.TABLE,
@@ -347,11 +302,11 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
             totalColumnCount
           },
           eventType: EVENT_TYPE.TRACK
-        })(tr); // Need this check again since we are overriding the tr in previous statement
+        })(tr);
 
+        // Need this check again since we are overriding the tr in previous statement
         if (tr.selection instanceof CellSelection) {
           const isTableSelected = tr.selection.isRowSelection() && tr.selection.isColSelection();
-
           if (isTableSelected) {
             tr = removeTable(tr);
           } else if (tr.selection.isRowSelection()) {
@@ -368,7 +323,6 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
       }
     }
   }
-
   return tr;
 };
 export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
@@ -376,10 +330,8 @@ export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mo
   const tablePluginState = getPluginState(view.state);
   const isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
   const hasTableNode = tablePluginState && tablePluginState.tableNode;
-
   if (!hasTableNode || isDragging) {
     return false;
   }
-
   return eventHandler(view, mouseEvent, elementContentRects);
 };