@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

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

@@ -0,0 +1,387 @@
+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';
+
+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"]');
+
+export const handleBlur = (view, event) => {
+  const {
+    state,
+    dispatch
+  } = view; // 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 const handleFocus = (view, event) => {
+  const {
+    state,
+    dispatch
+  } = view;
+  setEditorFocus(true)(state, dispatch);
+  event.preventDefault();
+  return false;
+};
+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 {
+      state,
+      dispatch
+    } = view;
+    return selectColumn(startIndex, event.shiftKey)(state, dispatch);
+  }
+
+  const 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;
+  }
+
+  const map = TableMap.get(table.node);
+  /** 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');
+  const rowIndex = rowElement && rowElement.rowIndex;
+  const cellIndex = map.width * rowIndex + colIndex;
+  const {
+    dispatch,
+    state: {
+      tr,
+      schema: {
+        nodes: {
+          paragraph
+        }
+      }
+    }
+  } = view;
+  const editorElement = table.node.nodeAt(map.map[cellIndex]);
+  /** 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
+  } = view;
+  const target = mouseEvent.target;
+  const {
+    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 {
+      state,
+      dispatch
+    } = 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({
+      left: startIndex,
+      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 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,
+      dispatch
+    } = view;
+    return clearHoverSelection()(state, dispatch);
+  }
+
+  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,
+      dispatch
+    } = view;
+    return hideResizeHandleLine()(state, dispatch);
+  }
+
+  return false;
+};
+export const handleMouseLeave = (view, event) => {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    insertColumnButtonIndex,
+    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, tableCellOptimization, elementContentRects) => {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const element = event.target;
+
+  if (isColumnControlsDecorations(element)) {
+    const {
+      state,
+      dispatch
+    } = view;
+    const {
+      insertColumnButtonIndex
+    } = getPluginState(state);
+    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+    const positionColumn = getMousePositionHorizontalRelativeByElement(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+
+    if (positionColumn !== insertColumnButtonIndex) {
+      return showInsertColumnButton(positionColumn)(state, dispatch);
+    }
+  }
+
+  if (isRowControlsButton(element)) {
+    const {
+      state,
+      dispatch
+    } = view;
+    const {
+      insertRowButtonIndex
+    } = 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(); // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
+  // because it relies on tableCell node view that is added  via tableCellOptimization
+
+  const useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
+
+  if (!isResizeHandleDecoration(element) && isCell(element)) {
+    const positionColumn = getMousePositionHorizontalRelativeByElement(event, useMouseMoveOptimisation, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+
+    if (positionColumn !== null) {
+      const {
+        state,
+        dispatch
+      } = view;
+      const {
+        resizeHandleColumnIndex
+      } = getPluginState(state);
+      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;
+
+        if (columnEndIndexTarget !== resizeHandleColumnIndex || !hasResizeHandler({
+          target: element,
+          columnEndIndexTarget
+        })) {
+          return addResizeHandleDecorations(columnEndIndexTarget)(state, dispatch);
+        }
+      }
+    }
+  }
+
+  return false;
+};
+export function handleTripleClick(view, pos) {
+  const {
+    state,
+    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) => {
+  const oldSelection = oldState.tr.selection;
+  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,
+          horizontalCells,
+          totalCells,
+          totalRowCount,
+          totalColumnCount
+        } = 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,
+          actionSubjectId: null,
+          attributes: {
+            verticalCells,
+            horizontalCells,
+            totalCells,
+            totalRowCount,
+            totalColumnCount
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(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()) {
+            const {
+              pluginConfig: {
+                isHeaderRowRequired
+              }
+            } = getPluginState(newState);
+            tr = deleteRows(rect, isHeaderRowRequired)(tr);
+          } else if (tr.selection.isColSelection()) {
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState))(tr);
+          }
+        }
+      }
+    }
+  }
+
+  return tr;
+};
+export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+  var _tablePluginState$plu;
+
+  const tableResizePluginState = getResizePluginState(view.state);
+  const tablePluginState = getPluginState(view.state);
+  const isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
+  const hasTableNode = tablePluginState && tablePluginState.tableNode;
+  const 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/es2019/plugins/table/handlers.js

@@ -0,0 +1,123 @@
+// #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';
+
+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,
+      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,
+    targetCellPosition
+  };
+};
+
+const updateTableNodePluginState = ({
+  tr,
+  table
+}) => pluginState => {
+  const tableNode = table && table.node;
+
+  if (!tableNode || isTextInput(tr)) {
+    return pluginState;
+  }
+
+  return { ...pluginState,
+    ...defaultTableSelection,
+    tableNode,
+    ordering: nextTableSorting(tr, table),
+    resizeHandleColumnIndex: nextResizeHandleColumnIndex(tr, pluginState.resizeHandleColumnIndex),
+    isNumberColumnEnabled: checkIfNumberColumnEnabled(tr.selection),
+    isHeaderColumnEnabled: checkIfHeaderColumnEnabled(tr.selection),
+    isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection)
+  };
+};
+
+const updateCollapseHandler = ({
+  tr,
+  table
+}) => pluginState => {
+  const tableNode = table && table.node;
+  const schema = tr.doc.type.schema;
+  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 canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
+  !isTableCollapsed && !!trCanBeCollapsed;
+
+  if (pluginState.isTableCollapsed !== isTableCollapsed || pluginState.canCollapseTable !== canCollapseTable) {
+    return { ...pluginState,
+      isTableCollapsed,
+      canCollapseTable
+    };
+  }
+
+  return pluginState;
+};
+
+const buildPluginState = builders => props => pluginState => {
+  if (!props.table) {
+    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)
+})(pluginState);