@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/src/plugins/table/event-handlers.ts

@@ -0,0 +1,514 @@
+import { Node as PmNode } from 'prosemirror-model';
+import {
+  EditorState,
+  Selection,
+  TextSelection,
+  Transaction,
+} 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 { EditorView } from 'prosemirror-view';
+
+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 type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+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,
+  ElementContentRects,
+} 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';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+
+const isFocusingCalendar = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.getAttribute('aria-label') === 'calendar';
+
+const isFocusingModal = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('[role="dialog"]');
+
+export const handleBlur = (view: EditorView, event: Event): boolean => {
+  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: EditorView, event: Event): boolean => {
+  const { state, dispatch } = view;
+  setEditorFocus(true)(state, dispatch);
+  event.preventDefault();
+  return false;
+};
+
+type HTMLElementIE9 = Omit<HTMLElement, 'matches'> & {
+  matches?: HTMLElement['matches']; // WARNING: 'matches' is optional in IE9
+  msMatchesSelector?: (selectors: string) => boolean;
+};
+
+export const handleClick = (view: EditorView, event: Event): boolean => {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+  const element = event.target as HTMLElementIE9;
+  const table = findTable(view.state.selection)!;
+
+  if (
+    event instanceof MouseEvent &&
+    isColumnControlsDecorations(element as HTMLElement)
+  ) {
+    const [startIndex] = getColumnOrRowIndex(element as HTMLElement);
+    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 as HTMLElement) ||
+    !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 as HTMLElement, 'td') ||
+    closestElement(element as HTMLElement, 'th')) as HTMLTableDataCellElement;
+  const colIndex = colElement && colElement.cellIndex;
+  const rowElement = closestElement(
+    element as HTMLElement,
+    'tr',
+  ) as HTMLTableRowElement;
+  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]) as PmNode;
+
+  /** 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: EditorView,
+  mouseEvent: Event,
+): boolean => {
+  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 as 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 = (_: EditorView, event: 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: EditorView,
+  mouseEvent: Event,
+): boolean => {
+  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 as HTMLElement | null;
+  // 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: EditorView, event: Event): boolean => {
+  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: GetEditorFeatureFlags,
+) => (
+  view: EditorView,
+  event: Event,
+  tableCellOptimization?: boolean,
+  elementContentRects?: 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 as MouseEvent,
+        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 as MouseEvent) ===
+      '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 as MouseEvent,
+      useMouseMoveOptimisation,
+      elementContentRects,
+      RESIZE_HANDLE_AREA_DECORATION_GAP,
+    );
+
+    if (positionColumn !== null) {
+      const { state, dispatch } = view;
+      const { resizeHandleColumnIndex } = getPluginState(state);
+      const tableCell = closestElement(
+        element,
+        'td, th',
+      ) as HTMLTableCellElement;
+      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: EditorView, pos: number) {
+  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: Transaction,
+  oldState: EditorState,
+  newState: EditorState,
+  editorAnalyticsAPI?: EditorAnalyticsAPI,
+): Transaction => {
+  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?.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: (
+    view: EditorView,
+    mouseEvent: Event,
+    tableCellOptimization?: boolean,
+    elementContentRects?: ElementContentRects,
+  ) => boolean,
+  elementContentRects?: ElementContentRects,
+) => (view: EditorView, mouseEvent: Event): boolean => {
+  const tableResizePluginState = getResizePluginState(view.state);
+  const tablePluginState = getPluginState(view.state);
+  const isDragging =
+    tableResizePluginState && !!tableResizePluginState.dragging;
+  const hasTableNode = tablePluginState && tablePluginState.tableNode;
+  const tableCellOptimization =
+    tablePluginState?.pluginConfig?.tableCellOptimization;
+
+  if (!hasTableNode || isDragging) {
+    return false;
+  }
+
+  return eventHandler(
+    view,
+    mouseEvent,
+    tableCellOptimization,
+    elementContentRects,
+  );
+};

package/src/plugins/table/handlers.ts

@@ -0,0 +1,169 @@
+// #region Imports
+import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
+import { ContentNodeWithPos, 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 { TablePluginState } from './types';
+import { TableColumnOrdering, TableSortStep } from '@atlaskit/adf-schema/steps';
+import { NodeType } from 'prosemirror-model';
+// #endregion
+import {
+  checkIfNumberColumnEnabled,
+  checkIfHeaderColumnEnabled,
+  checkIfHeaderRowEnabled,
+} from './utils/nodes';
+
+const nextTableSorting = (
+  tr: Transaction | ReadonlyTransaction,
+  table?: ContentNodeWithPos,
+): TableColumnOrdering | undefined => {
+  const tableSortStep: TableSortStep = tr.steps.find(
+    (step) => step instanceof TableSortStep,
+  ) as TableSortStep;
+
+  return tableSortStep && table && table.pos === tableSortStep.pos
+    ? tableSortStep.next
+    : undefined;
+};
+
+const nextResizeHandleColumnIndex = (
+  tr: Transaction | ReadonlyTransaction,
+  resizeHandleColumnIndex?: number,
+): number | undefined => {
+  if (tr.getMeta(tableResizingPluginKey)) {
+    return undefined;
+  }
+
+  return resizeHandleColumnIndex;
+};
+
+type BuilderTablePluginState = (props: {
+  tr: Transaction | ReadonlyTransaction;
+  table?: ContentNodeWithPos;
+}) => (pluginState: TablePluginState) => TablePluginState;
+
+const updateTargetCellPosition: BuilderTablePluginState = ({ tr, table }) => (
+  pluginState: TablePluginState,
+) => {
+  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: BuilderTablePluginState = ({ 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: BuilderTablePluginState = ({ 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 as NodeType;
+  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: boolean =
+    !!pluginState.tableNode &&
+    // is it already collapsed?
+    !isTableCollapsed &&
+    !!trCanBeCollapsed;
+
+  if (
+    pluginState.isTableCollapsed !== isTableCollapsed ||
+    pluginState.canCollapseTable !== canCollapseTable
+  ) {
+    return {
+      ...pluginState,
+      isTableCollapsed,
+      canCollapseTable,
+    };
+  }
+
+  return pluginState;
+};
+
+const buildPluginState = (
+  builders: Array<BuilderTablePluginState>,
+): BuilderTablePluginState => (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: Transaction | ReadonlyTransaction,
+  pluginState: TablePluginState,
+): TablePluginState =>
+  buildPluginState([
+    updateTargetCellPosition,
+    updateTableNodePluginState,
+    updateCollapseHandler,
+  ])({
+    tr,
+    table: findTable(tr.selection),
+  })(pluginState);