@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

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);
 };

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

@@ -1,4 +1,5 @@
 // #region Imports
+
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { isTextInput } from '@atlaskit/editor-common/utils';
@@ -8,59 +9,51 @@ import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing
 import { TableSortStep } from '@atlaskit/adf-schema/steps';
 // #endregion
 import { checkIfNumberColumnEnabled, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled } from './utils/nodes';
-
 const nextTableSorting = (tr, table) => {
   const tableSortStep = tr.steps.find(step => step instanceof TableSortStep);
   return tableSortStep && table && table.pos === tableSortStep.pos ? tableSortStep.next : undefined;
 };
-
 const nextResizeHandleColumnIndex = (tr, resizeHandleColumnIndex) => {
   if (tr.getMeta(tableResizingPluginKey)) {
     return undefined;
   }
-
   return resizeHandleColumnIndex;
 };
-
 const updateTargetCellPosition = ({
   tr,
   table
 }) => pluginState => {
   const tableNode = table && table.node;
-
   if (!tableNode) {
-    return { ...pluginState,
+    return {
+      ...pluginState,
       targetCellPosition: undefined
     };
   }
-
   const {
     tableCell,
     tableHeader
   } = tr.doc.type.schema.nodes;
   const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
   const targetCellPosition = cell ? cell.pos : undefined;
-
   if (pluginState.targetCellPosition === targetCellPosition) {
     return pluginState;
   }
-
-  return { ...pluginState,
+  return {
+    ...pluginState,
     targetCellPosition
   };
 };
-
 const updateTableNodePluginState = ({
   tr,
   table
 }) => pluginState => {
   const tableNode = table && table.node;
-
   if (!tableNode || isTextInput(tr)) {
     return pluginState;
   }
-
-  return { ...pluginState,
+  return {
+    ...pluginState,
     ...defaultTableSelection,
     tableNode,
     ordering: nextTableSorting(tr, table),
@@ -70,7 +63,6 @@ const updateTableNodePluginState = ({
     isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection)
   };
 };
-
 const updateCollapseHandler = ({
   tr,
   table
@@ -80,42 +72,40 @@ const updateCollapseHandler = ({
   const allowCollapse = pluginState.pluginConfig.allowCollapse;
   const isExpandInSchema = schema.nodes.expand !== undefined;
   const isCollapseEnabled = allowCollapse && isExpandInSchema;
+
   /**
    * If we don't have focus, or collapse isn't allowed, or a table node doesn't
    * exist, we don't need to waste extra checks below
    */
-
   if (!pluginState.editorHasFocus || !isCollapseEnabled || !tableNode) {
     return pluginState;
   }
-
   const expandNodeType = schema.nodes.expand;
   const isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
-  const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible; // We're focused on a table + we're not inside an expand
+  const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible;
 
-  const canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
+  // We're focused on a table + we're not inside an expand
+  const canCollapseTable = !!pluginState.tableNode &&
+  // is it already collapsed?
   !isTableCollapsed && !!trCanBeCollapsed;
-
   if (pluginState.isTableCollapsed !== isTableCollapsed || pluginState.canCollapseTable !== canCollapseTable) {
-    return { ...pluginState,
+    return {
+      ...pluginState,
       isTableCollapsed,
       canCollapseTable
     };
   }
-
   return pluginState;
 };
-
 const buildPluginState = builders => props => pluginState => {
   if (!props.table) {
-    return pluginState.targetCellPosition ? { ...pluginState,
+    return pluginState.targetCellPosition ? {
+      ...pluginState,
       targetCellPosition: undefined
     } : pluginState;
   }
-
   return builders.reduce((_pluginState, transform) => transform(props)(_pluginState), pluginState);
 };
-
 export const handleDocOrSelectionChanged = (tr, pluginState) => buildPluginState([updateTargetCellPosition, updateTableNodePluginState, updateCollapseHandler])({
   tr,
   table: findTable(tr.selection)

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

@@ -28,37 +28,31 @@ import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-
 const defaultGetEditorFeatureFlags = () => ({});
-
 const tablesPlugin = options => {
   const editorViewRef = {
     current: null
   };
-
   const defaultGetEditorContainerWidth = () => {
     if (!editorViewRef.current) {
       var _document, _document$body;
-
       return {
         width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
       };
     }
-
     const {
       current: {
         state
       }
-    } = editorViewRef; // TODO: ED-15663
+    } = editorViewRef;
+
+    // TODO: ED-15663
     // Please, do not copy or use this kind of code below
     // @ts-ignore
-
     return state['widthPlugin$'];
   };
-
   return {
     name: 'table',
-
     nodes() {
       return [{
         name: 'table',
@@ -74,7 +68,6 @@ const tablesPlugin = options => {
         node: tableCell
       }];
     },
-
     pmPlugins() {
       const plugins = [{
         name: 'table',
@@ -115,7 +108,8 @@ const tablesPlugin = options => {
       }, {
         name: 'tableEditing',
         plugin: () => createDecorationsPlugin()
-      }, // Needs to be lower priority than editor-tables.tableEditing
+      },
+      // Needs to be lower priority than editor-tables.tableEditing
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
@@ -132,7 +126,6 @@ const tablesPlugin = options => {
             reason
           }) => {
             var _options$editorAnalyt;
-
             options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
               action: TABLE_ACTION.FIXED,
               actionSubject: ACTION_SUBJECT.TABLE,
@@ -169,12 +162,14 @@ const tablesPlugin = options => {
             }
           });
         }
-      }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
+      }];
+
+      // workaround for prosemirrors delayed dom selection syncing during pointer drag
       // causing issues with table selections in Safari
       // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+
       // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
       // https://github.com/ProseMirror/prosemirror-view/pull/116
-
       if (browser.safari) {
         plugins.push({
           name: 'tableSafariDelayedDomSelectionSyncingWorkaround',
@@ -182,10 +177,10 @@ const tablesPlugin = options => {
             return createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin();
           }
         });
-      } // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
-      // https://github.com/ProseMirror/prosemirror/issues/934
-
+      }
 
+      // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
+      // https://github.com/ProseMirror/prosemirror/issues/934
       if (browser.safari) {
         plugins.push({
           name: 'tableSafariDeleteCompositionTextIssueWorkaround',
@@ -194,10 +189,8 @@ const tablesPlugin = options => {
           }
         });
       }
-
       return plugins;
     },
-
     contentComponent({
       editorView,
       popupsMountPoint,
@@ -301,7 +294,6 @@ const tablesPlugin = options => {
         }
       }));
     },
-
     pluginsOptions: {
       // TODO: ED-14676 This is not the final API design
       // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
@@ -313,7 +305,6 @@ const tablesPlugin = options => {
         if (nodeName !== 'table') {
           return null;
         }
-
         const table = createTable({
           schema
         });
@@ -329,10 +320,8 @@ const tablesPlugin = options => {
         priority: 600,
         keyshortcut: tooltip(toggleTable),
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
-
         action(insert, state) {
           var _options$editorAnalyt2;
-
           const tr = insert(createTable({
             schema: state.schema
           }));
@@ -347,11 +336,9 @@ const tablesPlugin = options => {
           })(tr);
           return tr;
         }
-
       }],
       floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };
-
 export default tablesPlugin;