@atlaskit/editor-plugin-table/dist/es2019/pm-plugins/drag-and-drop/commands.js

Table plugin for the @atlaskit/editor

import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
import { cloneColumn, cloneRow, moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
import { TableDecorations } from '../../types';
import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../utils/decoration';
import { DragAndDropActionType } from './actions';
import { DropTargetType } from './consts';
import { createCommand, getPluginState } from './plugin-factory';
import { pluginKey } from './plugin-key';
// TODO: ED-26961 - This command is a placeholder example. Please replace this if required.
const getDecorations = state => {
  var _pluginKey$getState;
  return ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || DecorationSet.empty;
};
const updatePluginStateDecorations = (state, decorations, key) => updateDecorations(state.doc, getDecorations(state), decorations, key);
export const setDropTarget = (type, index, hasMergedCells, tr) => createCommand(state => {
  const {
    dropTargetType,
    dropTargetIndex
  } = getPluginState(state);
  if (dropTargetType === type && dropTargetIndex === index) {
    return false;
  }
  let decorationSet = DecorationSet.empty;
  if (type === 'column') {
    decorationSet = updatePluginStateDecorations(state, createColumnInsertLine(index, state.selection, hasMergedCells), TableDecorations.COLUMN_INSERT_LINE);
  } else if (type === 'row') {
    decorationSet = updatePluginStateDecorations(state, createRowInsertLine(index, state.selection, hasMergedCells), TableDecorations.ROW_INSERT_LINE);
  }
  return {
    type: DragAndDropActionType.SET_DROP_TARGET,
    data: {
      decorationSet,
      type,
      index
    }
  };
}, originalTr => (tr || originalTr).setMeta('addToHistory', false));
export const clearDropTarget = tr => createCommand(state => {
  const {
    dropTargetType,
    dropTargetIndex
  } = getPluginState(state);
  if (dropTargetType === DropTargetType.NONE && dropTargetIndex === 0) {
    return false;
  }
  return {
    type: DragAndDropActionType.CLEAR_DROP_TARGET,
    data: {
      decorationSet: DecorationSet.empty
    }
  };
}, originalTr => (tr || originalTr).setMeta('addToHistory', false));
export const moveSource = (sourceType, sourceIndexes, targetIndex, tr) => createCommand(state => {
  return {
    type: DragAndDropActionType.CLEAR_DROP_TARGET,
    data: {
      decorationSet: DecorationSet.empty
    }
  };
}, (originalTr, state) => {
  const nextTr = tr || originalTr;
  if (sourceIndexes.includes(targetIndex)) {
    return nextTr.setMeta('addToHistory', false);
  }
  const move = sourceType === 'table-row' ? moveRow : moveColumn;
  return move(state, sourceIndexes, targetIndex, {
    selectAfterMove: true
  })(nextTr);
});
export const toggleDragMenu = (isDragMenuOpen, direction, index, trigger = 'mouse') => createCommand(state => {
  const {
    isDragMenuOpen: previousOpenState,
    dragMenuDirection: previousDragMenuDirection,
    dragMenuIndex: previousDragMenuIndex
  } = getPluginState(state);
  if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
    return false;
  }
  let updatedMenuOpenState;
  if (isDragMenuOpen !== undefined) {
    updatedMenuOpenState = isDragMenuOpen;
  } else {
    // menu open but menu direction changed, means user clicked on drag handle of different row/column
    // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
    // 2 scenarios above , menu should remain open.
    if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
      updatedMenuOpenState = true;
    } else {
      updatedMenuOpenState = !previousOpenState;
    }
  }
  return {
    type: DragAndDropActionType.TOGGLE_DRAG_MENU,
    data: {
      isDragMenuOpen: updatedMenuOpenState,
      direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
      index: index !== null && index !== void 0 ? index : previousDragMenuIndex,
      isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard'
    }
  };
}, tr => {
  return tr.setMeta('addToHistory', false);
});
export const cloneSource = (sourceType, sourceIndexes, targetIndex, targetDirection, tr) => createCommand(state => {
  return {
    type: DragAndDropActionType.CLEAR_DROP_TARGET,
    data: {
      decorationSet: DecorationSet.empty
    }
  };
}, (originalTr, state) => {
  const nextTr = tr || originalTr;
  const clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
  return clone(state, sourceIndexes, targetIndex, targetDirection, {
    selectAfterClone: true
  })(nextTr);
});