@atlaskit/editor-plugin-table/dist/esm/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.
var getDecorations = function getDecorations(state) {
  var _pluginKey$getState;
  return ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || DecorationSet.empty;
};
var updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
  return updateDecorations(state.doc, getDecorations(state), decorations, key);
};
export var setDropTarget = function setDropTarget(type, index, hasMergedCells, tr) {
  return createCommand(function (state) {
    var _getPluginState = getPluginState(state),
      dropTargetType = _getPluginState.dropTargetType,
      dropTargetIndex = _getPluginState.dropTargetIndex;
    if (dropTargetType === type && dropTargetIndex === index) {
      return false;
    }
    var 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: decorationSet,
        type: type,
        index: index
      }
    };
  }, function (originalTr) {
    return (tr || originalTr).setMeta('addToHistory', false);
  });
};
export var clearDropTarget = function clearDropTarget(tr) {
  return createCommand(function (state) {
    var _getPluginState2 = getPluginState(state),
      dropTargetType = _getPluginState2.dropTargetType,
      dropTargetIndex = _getPluginState2.dropTargetIndex;
    if (dropTargetType === DropTargetType.NONE && dropTargetIndex === 0) {
      return false;
    }
    return {
      type: DragAndDropActionType.CLEAR_DROP_TARGET,
      data: {
        decorationSet: DecorationSet.empty
      }
    };
  }, function (originalTr) {
    return (tr || originalTr).setMeta('addToHistory', false);
  });
};
export var moveSource = function moveSource(sourceType, sourceIndexes, targetIndex, tr) {
  return createCommand(function (state) {
    return {
      type: DragAndDropActionType.CLEAR_DROP_TARGET,
      data: {
        decorationSet: DecorationSet.empty
      }
    };
  }, function (originalTr, state) {
    var nextTr = tr || originalTr;
    if (sourceIndexes.includes(targetIndex)) {
      return nextTr.setMeta('addToHistory', false);
    }
    var move = sourceType === 'table-row' ? moveRow : moveColumn;
    return move(state, sourceIndexes, targetIndex, {
      selectAfterMove: true
    })(nextTr);
  });
};
export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
  var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
  return createCommand(function (state) {
    var _getPluginState3 = getPluginState(state),
      previousOpenState = _getPluginState3.isDragMenuOpen,
      previousDragMenuDirection = _getPluginState3.dragMenuDirection,
      previousDragMenuIndex = _getPluginState3.dragMenuIndex;
    if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
      return false;
    }
    var 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'
      }
    };
  }, function (tr) {
    return tr.setMeta('addToHistory', false);
  });
};
export var cloneSource = function cloneSource(sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
  return createCommand(function (state) {
    return {
      type: DragAndDropActionType.CLEAR_DROP_TARGET,
      data: {
        decorationSet: DecorationSet.empty
      }
    };
  }, function (originalTr, state) {
    var nextTr = tr || originalTr;
    var clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
    return clone(state, sourceIndexes, targetIndex, targetDirection, {
      selectAfterClone: true
    })(nextTr);
  });
};