@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,387 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Selection, TextSelection } from 'prosemirror-state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { browser } from '@atlaskit/editor-common/utils'; // import {
+//   isElementInTableCell,
+//   isLastItemMediaGroup,
+//   setNodeSelection,
+// } from '@atlaskit/editor-core/src/utils';
+
+import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils'; // import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
+
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { getPluginState } from './pm-plugins/plugin-factory';
+import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
+import { deleteColumns, deleteRows } from './transforms';
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper } from './utils';
+import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
+
+var isFocusingCalendar = function isFocusingCalendar(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
+};
+
+var isFocusingModal = function isFocusingModal(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
+};
+
+export var handleBlur = function handleBlur(view, event) {
+  var state = view.state,
+      dispatch = view.dispatch; // IE version check for ED-4665
+  // Calendar focus check for ED-10466
+
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
+    setEditorFocus(false)(state, dispatch);
+  }
+
+  event.preventDefault();
+  return false;
+};
+export var handleFocus = function handleFocus(view, event) {
+  var state = view.state,
+      dispatch = view.dispatch;
+  setEditorFocus(true)(state, dispatch);
+  event.preventDefault();
+  return false;
+};
+export var handleClick = function handleClick(view, event) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  var element = event.target;
+  var table = findTable(view.state.selection);
+
+  if (event instanceof MouseEvent && isColumnControlsDecorations(element)) {
+    var _getColumnOrRowIndex = getColumnOrRowIndex(element),
+        _getColumnOrRowIndex2 = _slicedToArray(_getColumnOrRowIndex, 1),
+        startIndex = _getColumnOrRowIndex2[0];
+
+    var state = view.state,
+        _dispatch = view.dispatch;
+    return selectColumn(startIndex, event.shiftKey)(state, _dispatch);
+  }
+
+  var matchfn = element.matches ? element.matches : element.msMatchesSelector; // 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;
+  }
+
+  var map = TableMap.get(table.node);
+  /** Getting the offset of current item clicked */
+
+  var colElement = closestElement(element, 'td') || closestElement(element, 'th');
+  var colIndex = colElement && colElement.cellIndex;
+  var rowElement = closestElement(element, 'tr');
+  var rowIndex = rowElement && rowElement.rowIndex;
+  var cellIndex = map.width * rowIndex + colIndex;
+  var dispatch = view.dispatch,
+      _view$state = view.state,
+      tr = _view$state.tr,
+      paragraph = _view$state.schema.nodes.paragraph;
+  var editorElement = table.node.nodeAt(map.map[cellIndex]);
+  /** Only if the last item is media group, insert a paragraph */
+
+  if (isLastItemMediaGroup(editorElement)) {
+    var posInTable = map.map[cellIndex] + editorElement.nodeSize;
+    tr.insert(posInTable + table.pos, paragraph.create());
+    dispatch(tr);
+    setNodeSelection(view, posInTable + table.pos);
+  }
+
+  return true;
+};
+export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
+  if (!(mouseEvent.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  var state = view.state,
+      dispatch = view.dispatch;
+  var target = mouseEvent.target;
+
+  var _getPluginState = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState.insertColumnButtonIndex,
+      insertRowButtonIndex = _getPluginState.insertRowButtonIndex;
+
+  if (isInsertRowButton(target)) {
+    var _getColumnOrRowIndex3 = getColumnOrRowIndex(target),
+        _getColumnOrRowIndex4 = _slicedToArray(_getColumnOrRowIndex3, 2),
+        startIndex = _getColumnOrRowIndex4[0],
+        endIndex = _getColumnOrRowIndex4[1];
+
+    var positionRow = getMousePositionVerticalRelativeByElement(mouseEvent) === 'bottom' ? endIndex : startIndex;
+    return showInsertRowButton(positionRow)(state, dispatch);
+  }
+
+  if (isColumnControlsDecorations(target)) {
+    var _getColumnOrRowIndex5 = getColumnOrRowIndex(target),
+        _getColumnOrRowIndex6 = _slicedToArray(_getColumnOrRowIndex5, 1),
+        _startIndex = _getColumnOrRowIndex6[0];
+
+    var _state = view.state,
+        _dispatch2 = view.dispatch;
+    return hoverColumns([_startIndex], false)(_state, _dispatch2);
+  }
+
+  if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+    return hideInsertColumnOrRowButton()(state, dispatch);
+  }
+
+  if (isResizeHandleDecoration(target)) {
+    var _getColumnOrRowIndex7 = getColumnOrRowIndex(target),
+        _getColumnOrRowIndex8 = _slicedToArray(_getColumnOrRowIndex7, 2),
+        _startIndex2 = _getColumnOrRowIndex8[0],
+        _endIndex = _getColumnOrRowIndex8[1];
+
+    return showResizeHandleLine({
+      left: _startIndex2,
+      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
+
+export var handleMouseDown = function handleMouseDown(_, event) {
+  var isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target)));
+
+  if (isControl) {
+    event.preventDefault();
+  }
+
+  return isControl;
+};
+export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
+  if (!(mouseEvent instanceof MouseEvent) || !(mouseEvent.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  var target = mouseEvent.target;
+
+  if (isColumnControlsDecorations(target)) {
+    var state = view.state,
+        dispatch = view.dispatch;
+    return clearHoverSelection()(state, dispatch);
+  }
+
+  var 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)) {
+    var _state2 = view.state,
+        _dispatch3 = view.dispatch;
+    return hideResizeHandleLine()(_state2, _dispatch3);
+  }
+
+  return false;
+};
+export var handleMouseLeave = function handleMouseLeave(view, event) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  var state = view.state,
+      dispatch = view.dispatch;
+
+  var _getPluginState2 = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState2.insertColumnButtonIndex,
+      insertRowButtonIndex = _getPluginState2.insertRowButtonIndex;
+
+  var target = event.target;
+
+  if (isTableControlsButton(target)) {
+    return true;
+  }
+
+  if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
+    return true;
+  }
+
+  return false;
+};
+export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
+  return function (view, event, tableCellOptimization, elementContentRects) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
+
+    var element = event.target;
+
+    if (isColumnControlsDecorations(element)) {
+      var state = view.state,
+          dispatch = view.dispatch;
+
+      var _getPluginState3 = getPluginState(state),
+          insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+
+      var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
+          _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
+          startIndex = _getColumnOrRowIndex10[0],
+          endIndex = _getColumnOrRowIndex10[1];
+
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
+    }
+
+    if (isRowControlsButton(element)) {
+      var _state3 = view.state,
+          _dispatch4 = view.dispatch;
+
+      var _getPluginState4 = getPluginState(_state3),
+          insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+
+      var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
+          _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
+          _startIndex3 = _getColumnOrRowIndex12[0],
+          _endIndex2 = _getColumnOrRowIndex12[1];
+
+      var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
+
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(_state3, _dispatch4);
+      }
+    }
+
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization; // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
+    // because it relies on tableCell node view that is added  via tableCellOptimization
+
+
+    var useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
+
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, useMouseMoveOptimisation, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+
+      if (positionColumn !== null) {
+        var _state4 = view.state,
+            _dispatch5 = view.dispatch;
+
+        var _getPluginState5 = getPluginState(_state4),
+            resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex;
+
+        var tableCell = closestElement(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
+
+        if (rect) {
+          var columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
+
+          if (columnEndIndexTarget !== resizeHandleColumnIndex || !hasResizeHandler({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) {
+            return addResizeHandleDecorations(columnEndIndexTarget)(_state4, _dispatch5);
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+};
+export function handleTripleClick(view, pos) {
+  var state = view.state,
+      dispatch = view.dispatch;
+  var $cellPos = cellAround(state.doc.resolve(pos));
+
+  if (!$cellPos) {
+    return false;
+  }
+
+  var cell = state.doc.nodeAt($cellPos.pos);
+
+  if (cell) {
+    var selFrom = Selection.findFrom($cellPos, 1, true);
+    var 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 var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI) {
+  var oldSelection = oldState.tr.selection;
+  var tr = newState.tr;
+
+  if (oldSelection instanceof CellSelection) {
+    var $anchorCell = oldTr.doc.resolve(oldTr.mapping.map(oldSelection.$anchorCell.pos));
+    var $headCell = oldTr.doc.resolve(oldTr.mapping.map(oldSelection.$headCell.pos));
+    var cellSelection = new CellSelection($anchorCell, $headCell);
+    tr.setSelection(cellSelection);
+
+    if (tr.selection instanceof CellSelection) {
+      var rect = getSelectionRect(cellSelection);
+
+      if (rect) {
+        var _getSelectedCellInfo = getSelectedCellInfo(tr.selection),
+            verticalCells = _getSelectedCellInfo.verticalCells,
+            horizontalCells = _getSelectedCellInfo.horizontalCells,
+            totalCells = _getSelectedCellInfo.totalCells,
+            totalRowCount = _getSelectedCellInfo.totalRowCount,
+            totalColumnCount = _getSelectedCellInfo.totalColumnCount; // 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,
+          actionSubjectId: null,
+          attributes: {
+            verticalCells: verticalCells,
+            horizontalCells: horizontalCells,
+            totalCells: totalCells,
+            totalRowCount: totalRowCount,
+            totalColumnCount: totalColumnCount
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(tr); // Need this check again since we are overriding the tr in previous statement
+
+        if (tr.selection instanceof CellSelection) {
+          var isTableSelected = tr.selection.isRowSelection() && tr.selection.isColSelection();
+
+          if (isTableSelected) {
+            tr = removeTable(tr);
+          } else if (tr.selection.isRowSelection()) {
+            var _getPluginState6 = getPluginState(newState),
+                isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
+
+            tr = deleteRows(rect, isHeaderRowRequired)(tr);
+          } else if (tr.selection.isColSelection()) {
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState))(tr);
+          }
+        }
+      }
+    }
+  }
+
+  return tr;
+};
+export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
+  return function (view, mouseEvent) {
+    var _tablePluginState$plu;
+
+    var tableResizePluginState = getResizePluginState(view.state);
+    var tablePluginState = getPluginState(view.state);
+    var isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
+    var hasTableNode = tablePluginState && tablePluginState.tableNode;
+    var tableCellOptimization = tablePluginState === null || tablePluginState === void 0 ? void 0 : (_tablePluginState$plu = tablePluginState.pluginConfig) === null || _tablePluginState$plu === void 0 ? void 0 : _tablePluginState$plu.tableCellOptimization;
+
+    if (!hasTableNode || isDragging) {
+      return false;
+    }
+
+    return eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects);
+  };
+};

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

@@ -0,0 +1,140 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// #region Imports
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { findTable } from '@atlaskit/editor-tables/utils'; // import { isTextInput } from '../../utils/is-text-input';
+
+import { isTextInput } from '@atlaskit/editor-common/utils';
+import { isTableCollapsible } from './utils/collapse';
+import { defaultTableSelection } from './pm-plugins/default-table-selection';
+import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { TableSortStep } from '@atlaskit/adf-schema/steps';
+// #endregion
+import { checkIfNumberColumnEnabled, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled } from './utils/nodes';
+
+var nextTableSorting = function nextTableSorting(tr, table) {
+  var tableSortStep = tr.steps.find(function (step) {
+    return step instanceof TableSortStep;
+  });
+  return tableSortStep && table && table.pos === tableSortStep.pos ? tableSortStep.next : undefined;
+};
+
+var nextResizeHandleColumnIndex = function nextResizeHandleColumnIndex(tr, resizeHandleColumnIndex) {
+  if (tr.getMeta(tableResizingPluginKey)) {
+    return undefined;
+  }
+
+  return resizeHandleColumnIndex;
+};
+
+var updateTargetCellPosition = function updateTargetCellPosition(_ref) {
+  var tr = _ref.tr,
+      table = _ref.table;
+  return function (pluginState) {
+    var tableNode = table && table.node;
+
+    if (!tableNode) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        targetCellPosition: undefined
+      });
+    }
+
+    var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+        tableCell = _tr$doc$type$schema$n.tableCell,
+        tableHeader = _tr$doc$type$schema$n.tableHeader;
+    var cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
+    var targetCellPosition = cell ? cell.pos : undefined;
+
+    if (pluginState.targetCellPosition === targetCellPosition) {
+      return pluginState;
+    }
+
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      targetCellPosition: targetCellPosition
+    });
+  };
+};
+
+var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
+  var tr = _ref2.tr,
+      table = _ref2.table;
+  return function (pluginState) {
+    var tableNode = table && table.node;
+
+    if (!tableNode || isTextInput(tr)) {
+      return pluginState;
+    }
+
+    return _objectSpread(_objectSpread(_objectSpread({}, pluginState), defaultTableSelection), {}, {
+      tableNode: tableNode,
+      ordering: nextTableSorting(tr, table),
+      resizeHandleColumnIndex: nextResizeHandleColumnIndex(tr, pluginState.resizeHandleColumnIndex),
+      isNumberColumnEnabled: checkIfNumberColumnEnabled(tr.selection),
+      isHeaderColumnEnabled: checkIfHeaderColumnEnabled(tr.selection),
+      isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection)
+    });
+  };
+};
+
+var updateCollapseHandler = function updateCollapseHandler(_ref3) {
+  var tr = _ref3.tr,
+      table = _ref3.table;
+  return function (pluginState) {
+    var tableNode = table && table.node;
+    var schema = tr.doc.type.schema;
+    var allowCollapse = pluginState.pluginConfig.allowCollapse;
+    var isExpandInSchema = schema.nodes.expand !== undefined;
+    var 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;
+    }
+
+    var expandNodeType = schema.nodes.expand;
+    var isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
+    var trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible; // We're focused on a table + we're not inside an expand
+
+    var canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
+    !isTableCollapsed && !!trCanBeCollapsed;
+
+    if (pluginState.isTableCollapsed !== isTableCollapsed || pluginState.canCollapseTable !== canCollapseTable) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isTableCollapsed: isTableCollapsed,
+        canCollapseTable: canCollapseTable
+      });
+    }
+
+    return pluginState;
+  };
+};
+
+var buildPluginState = function buildPluginState(builders) {
+  return function (props) {
+    return function (pluginState) {
+      if (!props.table) {
+        return pluginState.targetCellPosition ? _objectSpread(_objectSpread({}, pluginState), {}, {
+          targetCellPosition: undefined
+        }) : pluginState;
+      }
+
+      return builders.reduce(function (_pluginState, transform) {
+        return transform(props)(_pluginState);
+      }, pluginState);
+    };
+  };
+};
+
+export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, pluginState) {
+  return buildPluginState([updateTargetCellPosition, updateTableNodePluginState, updateCollapseHandler])({
+    tr: tr,
+    table: findTable(tr.selection)
+  })(pluginState);
+};