@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/es2019/plugins/table/commands/selection.js

@@ -0,0 +1,369 @@
+import { TextSelection, Selection } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { RelativeSelectionPos, GapCursorSelection, Side, isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
+export let TableSelectionDirection;
+
+(function (TableSelectionDirection) {
+  TableSelectionDirection["TopToBottom"] = "TopToBottom";
+  TableSelectionDirection["BottomToTop"] = "BottomToTop";
+})(TableSelectionDirection || (TableSelectionDirection = {}));
+
+export const arrowLeftFromTable = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+
+  if (selection instanceof CellSelection) {
+    return arrowLeftFromCellSelection(editorSelectionAPI)(selection)(state, dispatch);
+  } else if (selection instanceof GapCursorSelection) {
+    return arrowLeftFromGapCursor(editorSelectionAPI)(selection)(state, dispatch);
+  } else if (selection instanceof TextSelection) {
+    return arrowLeftFromText(editorSelectionAPI)(selection)(state, dispatch);
+  }
+
+  return false;
+};
+export const arrowRightFromTable = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+
+  if (selection instanceof CellSelection) {
+    return arrowRightFromCellSelection(editorSelectionAPI)(selection)(state, dispatch);
+  } else if (selection instanceof GapCursorSelection) {
+    return arrowRightFromGapCursor(editorSelectionAPI)(selection)(state, dispatch);
+  } else if (selection instanceof TextSelection) {
+    return arrowRightFromText(editorSelectionAPI)(selection)(state, dispatch);
+  }
+
+  return false;
+};
+
+const arrowLeftFromCellSelection = editorSelectionAPI => selection => (state, dispatch) => {
+  if (isTableSelected(state.selection) && editorSelectionAPI) {
+    const {
+      selectionRelativeToNode
+    } = editorSelectionAPI.getSelectionPluginState(state);
+
+    if (selectionRelativeToNode === RelativeSelectionPos.Start) {
+      // we have full table cell selection and want to set gap cursor selection before table
+      return setGapCursorBeforeTable(editorSelectionAPI)()(state, dispatch);
+    } else if (selectionRelativeToNode === RelativeSelectionPos.End) {
+      // we have full table cell selection and want to set selection at end of last cell
+      return setSelectionAtEndOfLastCell(editorSelectionAPI)(selection)(state, dispatch);
+    } else if (selectionRelativeToNode === undefined) {
+      // we have full table cell selection and want to set selection at start of first cell
+      return setSelectionAtStartOfFirstCell(editorSelectionAPI)(selection, RelativeSelectionPos.Before)(state, dispatch);
+    }
+  }
+
+  return false;
+};
+
+const arrowRightFromCellSelection = editorSelectionAPI => selection => (state, dispatch) => {
+  if (isTableSelected(state.selection) && editorSelectionAPI) {
+    const {
+      selectionRelativeToNode
+    } = editorSelectionAPI.getSelectionPluginState(state);
+
+    if (selectionRelativeToNode === RelativeSelectionPos.Start) {
+      // we have full table cell selection and want to set selection at start of first cell
+      return setSelectionAtStartOfFirstCell(editorSelectionAPI)(selection)(state, dispatch);
+    } else if (selectionRelativeToNode === RelativeSelectionPos.End || selectionRelativeToNode === undefined) {
+      // we have full table cell selection and want to set gap cursor selection after table
+      return setGapCursorAfterTable(editorSelectionAPI)()(state, dispatch);
+    }
+  }
+
+  return false;
+};
+
+const arrowLeftFromGapCursor = editorSelectionAPI => selection => (state, dispatch) => {
+  const {
+    doc
+  } = state;
+  const {
+    $from,
+    from,
+    side
+  } = selection;
+
+  if (side === Side.RIGHT) {
+    if ($from.nodeBefore && $from.nodeBefore.type.name === 'table') {
+      // we have a gap cursor after a table node and want to set a full table cell selection
+      return selectFullTable(editorSelectionAPI)({
+        node: $from.nodeBefore,
+        startPos: doc.resolve(from - 1).start($from.depth + 1),
+        dir: TableSelectionDirection.TopToBottom
+      })(state, dispatch);
+    }
+  } else if (side === Side.LEFT) {
+    const table = findTable(selection);
+
+    if (table && isSelectionAtStartOfTable($from, selection) && editorSelectionAPI) {
+      const {
+        selectionRelativeToNode
+      } = editorSelectionAPI.getSelectionPluginState(state);
+
+      if (selectionRelativeToNode === RelativeSelectionPos.Before) {
+        // we have a gap cursor at start of first table cell and want to set a gap cursor selection before table
+        return setGapCursorBeforeTable(editorSelectionAPI)()(state, dispatch);
+      } else {
+        // we have a gap cursor at start of first table cell and want to set a full table cell selection
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+    }
+  }
+
+  return false;
+};
+
+const arrowRightFromGapCursor = editorSelectionAPI => selection => (state, dispatch) => {
+  const {
+    $from,
+    from,
+    $to,
+    side
+  } = selection;
+
+  if (side === Side.LEFT) {
+    if ($from.nodeAfter && $from.nodeAfter.type.name === 'table') {
+      // we have a gap cursor before a table node and want to set a full table cell selection
+      return selectFullTable(editorSelectionAPI)({
+        node: $from.nodeAfter,
+        startPos: from + 1,
+        dir: TableSelectionDirection.BottomToTop
+      })(state, dispatch);
+    }
+  } else if (side === Side.RIGHT) {
+    const table = findTable(selection);
+
+    if (table && isSelectionAtEndOfTable($to, selection)) {
+      // we have a gap cursor at end of last table cell and want to set a full table cell selection
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.TopToBottom
+      })(state, dispatch);
+    }
+  }
+
+  return false;
+};
+
+const arrowLeftFromText = editorSelectionAPI => selection => (state, dispatch) => {
+  const table = findTable(selection);
+
+  if (table) {
+    const {
+      $from
+    } = selection;
+
+    if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 && // + 3 for: row, cell & paragraph nodes
+    editorSelectionAPI) {
+      const {
+        selectionRelativeToNode
+      } = editorSelectionAPI.getSelectionPluginState(state);
+
+      if (selectionRelativeToNode === RelativeSelectionPos.Before) {
+        // we have a text selection at start of first table cell, directly inside a top level paragraph,
+        // and want to set gap cursor selection before table
+        return setGapCursorBeforeTable(editorSelectionAPI)()(state, dispatch);
+      } else {
+        // we have a text selection at start of first table cell, directly inside a top level paragraph,
+        // and want to set a full table cell selection
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+    }
+  }
+
+  return false;
+};
+
+const arrowRightFromText = editorSelectionAPI => selection => (state, dispatch) => {
+  const table = findTable(selection);
+
+  if (table) {
+    const {
+      $to
+    } = selection;
+
+    if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
+    ) {
+      // we have a text selection at end of last table cell, directly inside a top level paragraph,
+      // and want to set a full table cell selection
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.TopToBottom
+      })(state, dispatch);
+    }
+  }
+
+  return false;
+};
+/**
+ * Sets a cell selection over all the cells in the table node
+ * We use this instead of selectTable from prosemirror-utils so we can control which
+ * cell is the anchor and which is the head, and also so we can set the relative selection
+ * pos in the selection plugin
+ */
+
+
+const selectFullTable = editorSelectionAPI => ({
+  node,
+  startPos,
+  dir
+}) => (state, dispatch) => {
+  const {
+    doc
+  } = state;
+  const {
+    map
+  } = TableMap.get(node);
+  const $firstCell = doc.resolve(startPos + map[0]);
+  const $lastCell = doc.resolve(startPos + map[map.length - 1]);
+  let fullTableSelection;
+  let selectionRelativeToNode;
+
+  if (dir === TableSelectionDirection.TopToBottom) {
+    fullTableSelection = new CellSelection($firstCell, $lastCell);
+    selectionRelativeToNode = RelativeSelectionPos.End;
+  } else {
+    fullTableSelection = new CellSelection($lastCell, $firstCell);
+    selectionRelativeToNode = RelativeSelectionPos.Start;
+  }
+
+  if (editorSelectionAPI) {
+    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+      selectionRelativeToNode,
+      selection: fullTableSelection
+    })(state);
+
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const setSelectionAtStartOfFirstCell = editorSelectionAPI => (selection, selectionRelativeToNode) => (state, dispatch) => {
+  const {
+    $anchorCell,
+    $headCell
+  } = selection;
+  const $firstCell = $anchorCell.pos < $headCell.pos ? $anchorCell : $headCell;
+  const $firstPosInsideCell = state.doc.resolve($firstCell.pos + 1); // check if first pos should have a gap cursor, otherwise find closest text selection
+
+  const selectionAtStartOfCell = GapCursorSelection.valid($firstPosInsideCell) ? new GapCursorSelection($firstPosInsideCell, Side.LEFT) : Selection.findFrom($firstPosInsideCell, 1);
+
+  if (editorSelectionAPI) {
+    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+      selectionRelativeToNode,
+      selection: selectionAtStartOfCell
+    })(state);
+
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const setSelectionAtEndOfLastCell = editorSelectionAPI => (selection, selectionRelativeToNode) => (state, dispatch) => {
+  const {
+    $anchorCell,
+    $headCell
+  } = selection;
+  const $lastCell = $anchorCell.pos > $headCell.pos ? $anchorCell : $headCell;
+  const lastPosInsideCell = $lastCell.pos + ($lastCell.nodeAfter ? $lastCell.nodeAfter.content.size : 0) + 1;
+  const $lastPosInsideCell = state.doc.resolve(lastPosInsideCell); // check if last pos should have a gap cursor, otherwise find closest text selection
+
+  const selectionAtEndOfCell = GapCursorSelection.valid($lastPosInsideCell) ? new GapCursorSelection($lastPosInsideCell, Side.RIGHT) : Selection.findFrom($lastPosInsideCell, -1);
+
+  if (editorSelectionAPI) {
+    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+      selectionRelativeToNode,
+      selection: selectionAtEndOfCell
+    })(state);
+
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const setGapCursorBeforeTable = editorSelectionAPI => () => (state, dispatch) => {
+  const table = findTable(state.selection);
+
+  if (table) {
+    const $beforeTablePos = state.doc.resolve(table.pos);
+
+    if (GapCursorSelection.valid($beforeTablePos)) {
+      const selectionBeforeTable = new GapCursorSelection($beforeTablePos, Side.LEFT);
+
+      if (editorSelectionAPI) {
+        const tr = editorSelectionAPI.setSelectionRelativeToNode({
+          selectionRelativeToNode: undefined,
+          selection: selectionBeforeTable
+        })(state);
+
+        if (dispatch) {
+          dispatch(tr);
+          return true;
+        }
+      }
+    }
+  }
+
+  return false;
+};
+
+const setGapCursorAfterTable = editorSelectionAPI => () => (state, dispatch) => {
+  const table = findTable(state.selection);
+
+  if (table) {
+    const $afterTablePos = state.doc.resolve(table.pos + table.node.nodeSize);
+
+    if (GapCursorSelection.valid($afterTablePos)) {
+      const selectionAfterTable = new GapCursorSelection($afterTablePos, Side.RIGHT);
+
+      if (editorSelectionAPI) {
+        const tr = editorSelectionAPI.setSelectionRelativeToNode({
+          selectionRelativeToNode: undefined,
+          selection: selectionAfterTable
+        })(state);
+
+        if (dispatch) {
+          dispatch(tr);
+          return true;
+        }
+      }
+
+      return false;
+    }
+  }
+
+  return false;
+};
+
+const isSelectionAtStartOfTable = ($pos, selection) => isSelectionAtStartOfNode($pos, findTable(selection));
+
+const isSelectionAtEndOfTable = ($pos, selection) => isSelectionAtEndOfNode($pos, findTable(selection));

package/dist/es2019/plugins/table/commands/sort.js

@@ -0,0 +1,74 @@
+import { Selection } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findCellRectClosestToPos } from '@atlaskit/editor-tables/utils';
+import { convertArrayOfRowsToTableNode, convertTableNodeToArrayOfRows, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { createCompareNodes } from '@atlaskit/editor-common/utils';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
+import { TableSortStep, TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+
+function createGetInlineCardTextFromStore(state) {
+  return attrs => {
+    const {
+      data
+    } = attrs;
+
+    if (data && (data.name || data.title)) {
+      return data.name || data.title;
+    }
+
+    const {
+      url: cardUrl
+    } = attrs;
+    return cardUrl;
+  };
+}
+
+export const sortByColumn = (columnIndex, order = SortOrder.DESC) => createCommand(state => ({
+  type: 'SORT_TABLE',
+  data: {
+    ordering: {
+      columnIndex,
+      order
+    }
+  }
+}), (tr, state) => {
+  const table = findTable(tr.selection);
+
+  if (!table || !table.node) {
+    return tr;
+  }
+
+  const selectionRect = isSelectionType(tr.selection, 'cell') ? getSelectionRect(tr.selection) : findCellRectClosestToPos(tr.selection.$from);
+
+  if (!selectionRect) {
+    return tr;
+  }
+
+  const tablePluginState = getPluginState(state);
+  const tableArray = convertTableNodeToArrayOfRows(table.node);
+  let headerRow;
+
+  if (tablePluginState.isHeaderRowEnabled) {
+    headerRow = tableArray.shift();
+  }
+
+  const compareNodesInOrder = createCompareNodes({
+    getInlineCardTextFromStore: createGetInlineCardTextFromStore(state)
+  }, order);
+  const sortedTable = tableArray.sort((rowA, rowB) => compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]));
+
+  if (headerRow) {
+    sortedTable.unshift(headerRow);
+  }
+
+  const newTableNode = convertArrayOfRowsToTableNode(table.node, sortedTable);
+  tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTableNode);
+  const pos = TableMap.get(table.node).positionAt(selectionRect.top, columnIndex, table.node);
+  const prev = tablePluginState.ordering;
+  const next = {
+    columnIndex,
+    order
+  };
+  tr.step(new TableSortStep(table.pos, prev, next));
+  return tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
+});

package/dist/es2019/plugins/table/commands/split-cell.js

@@ -0,0 +1,29 @@
+import { splitCellWithType } from '@atlaskit/editor-tables/utils';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+
+/**
+ * We need to split cell keeping the right type of cell given current table configuration.
+ * We are using editor-tables splitCellWithType that allows you to choose what cell type should be.
+ */
+export const splitCell = (state, dispatch) => {
+  const tableState = getPluginState(state);
+  const {
+    tableHeader,
+    tableCell
+  } = state.schema.nodes;
+
+  if (dispatch) {
+    return splitCellWithType(({
+      row,
+      col
+    }) => {
+      if (row === 0 && tableState.isHeaderRowEnabled || col === 0 && tableState.isHeaderColumnEnabled) {
+        return tableHeader;
+      }
+
+      return tableCell;
+    })(state, dispatch);
+  }
+
+  return true;
+};

package/dist/es2019/plugins/table/commands/toggle.js

@@ -0,0 +1,76 @@
+//#region Imports
+import { toggleHeader } from '@atlaskit/editor-tables/utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { createCommand } from '../pm-plugins/plugin-factory'; //#endregion
+// #region Utils
+
+/**
+ * Table layout toggle logic
+ * default -> wide -> full-width -> default
+ */
+
+export const getNextLayout = currentLayout => {
+  switch (currentLayout) {
+    case 'default':
+      return 'wide';
+
+    case 'wide':
+      return 'full-width';
+
+    case 'full-width':
+      return 'default';
+
+    default:
+      return 'default';
+  }
+}; // #endregion
+// #region Actions
+
+export const toggleHeaderRow = (state, dispatch) => toggleHeader('row')(state, tr => createCommand({
+  type: 'TOGGLE_HEADER_ROW'
+}, () => tr.setMeta('scrollIntoView', false))(state, dispatch));
+export const toggleHeaderColumn = (state, dispatch) => toggleHeader('column')(state, tr => createCommand({
+  type: 'TOGGLE_HEADER_COLUMN'
+}, () => tr.setMeta('scrollIntoView', false))(state, dispatch));
+export const toggleNumberColumn = (state, dispatch) => {
+  const {
+    tr
+  } = state;
+  const {
+    node,
+    pos
+  } = findTable(state.selection);
+  tr.setNodeMarkup(pos, state.schema.nodes.table, { ...node.attrs,
+    isNumberColumnEnabled: !node.attrs.isNumberColumnEnabled
+  });
+  tr.setMeta('scrollIntoView', false);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+export const toggleTableLayout = (state, dispatch) => {
+  const table = findTable(state.selection);
+
+  if (!table) {
+    return false;
+  }
+
+  const layout = getNextLayout(table.node.attrs.layout);
+  return createCommand({
+    type: 'SET_TABLE_LAYOUT',
+    data: {
+      layout
+    }
+  }, tr => {
+    tr.setNodeMarkup(table.pos, state.schema.nodes.table, { ...table.node.attrs,
+      layout
+    });
+    return tr.setMeta('scrollIntoView', false);
+  })(state, dispatch);
+};
+export const toggleContextualMenu = () => createCommand({
+  type: 'TOGGLE_CONTEXTUAL_MENU'
+}, tr => tr.setMeta('addToHistory', false)); // #endregion