@atlaskit/editor-core 172.1.1 → 172.2.0

package/dist/es2019/plugins/selection/utils.js

@@ -4,9 +4,9 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { selectedRect } from '@atlaskit/editor-tables/utils';
 import { flatten, findParentNode } from 'prosemirror-utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
 import { selectNode } from '../../utils/commands';
 import { isEmptyParagraph } from '../../utils/document';
-import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '../../utils/selection';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
 import { isIgnored as isIgnoredByGapCursor } from '../selection/gap-cursor/utils/is-ignored';
 import { selectionPluginKey } from './types';

package/dist/es2019/plugins/table/commands/go-to-next-cell.js

@@ -2,11 +2,11 @@
 import { findTable, goToNextCell as baseGotoNextCell } from '@atlaskit/editor-tables/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findParentNodeOfType } from 'prosemirror-utils';
-import { INPUT_METHOD } from '../../analytics/types';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { insertRowWithAnalytics } from '../commands-with-analytics';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
-export const goToNextCell = direction => (state, dispatch) => {
+export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch) => {
   const table = findTable(state.selection);
 
   if (!table) {
@@ -23,7 +23,7 @@ export const goToNextCell = direction => (state, dispatch) => {
   const lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start; // when tabbing backwards at first cell (top left), insert row at the start of table
 
   if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
-    insertRowWithAnalytics(INPUT_METHOD.KEYBOARD, {
+    insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
       index: 0,
       moveCursorToInsertedRow: true
     })(state, dispatch);
@@ -32,7 +32,7 @@ export const goToNextCell = direction => (state, dispatch) => {
 
 
   if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
-    insertRowWithAnalytics(INPUT_METHOD.KEYBOARD, {
+    insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
       index: map.height,
       moveCursorToInsertedRow: true
     })(state, dispatch);

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

@@ -21,29 +21,31 @@ function addColumnAtCustomStep(column) {
   };
 }
 
-export function addColumnAt(column, allowAddColumnCustomStep = false, view) {
-  return tr => {
-    let updatedTr = tr;
-
-    if (allowAddColumnCustomStep) {
-      updatedTr = addColumnAtCustomStep(column)(updatedTr);
-    } else {
-      updatedTr = addColumnAtPMUtils(column)(updatedTr);
-    }
-
-    const table = findTable(updatedTr.selection);
-
-    if (table) {
-      // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-      updatedTr = rescaleColumns(table, view)(updatedTr);
-    }
-
-    return updatedTr;
+export function addColumnAt(getEditorContainerWidth) {
+  return (column, allowAddColumnCustomStep = false, view) => {
+    return tr => {
+      let updatedTr = tr;
+
+      if (allowAddColumnCustomStep) {
+        updatedTr = addColumnAtCustomStep(column)(updatedTr);
+      } else {
+        updatedTr = addColumnAtPMUtils(column)(updatedTr);
+      }
+
+      const table = findTable(updatedTr.selection);
+
+      if (table) {
+        // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
+        updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
+      }
+
+      return updatedTr;
+    };
   };
 } // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 
-export const addColumnBefore = (state, dispatch, view) => {
+export const addColumnBefore = getEditorContainerWidth => (state, dispatch, view) => {
   const table = findTable(state.selection);
 
   if (!table) {
@@ -52,14 +54,14 @@ export const addColumnBefore = (state, dispatch, view) => {
 
   if (dispatch) {
     let rect = selectedRect(state);
-    dispatch(addColumnAt(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
+    dispatch(addColumnAt(getEditorContainerWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
 
   return true;
 }; // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 
-export const addColumnAfter = (state, dispatch, view) => {
+export const addColumnAfter = getEditorContainerWidth => (state, dispatch, view) => {
   const table = findTable(state.selection);
 
   if (!table) {
@@ -68,14 +70,14 @@ export const addColumnAfter = (state, dispatch, view) => {
 
   if (dispatch) {
     let rect = selectedRect(state);
-    dispatch(addColumnAt(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
+    dispatch(addColumnAt(getEditorContainerWidth)(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
 
   return true;
 }; // #region Commands
 
-export const insertColumn = column => (state, dispatch, view) => {
-  let tr = addColumnAt(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+export const insertColumn = getEditorContainerWidth => column => (state, dispatch, view) => {
+  let tr = addColumnAt(getEditorContainerWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
 
   if (!table) {

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

@@ -2,11 +2,7 @@ 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 { GapCursorSelection, Side } from '../../selection/gap-cursor-selection';
-import { setSelectionRelativeToNode } from '../../selection/commands';
-import { RelativeSelectionPos } from '../../selection/types';
-import { getPluginState as getSelectionPluginState } from '../../selection/plugin-factory';
-import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '../../../utils/selection';
+import { RelativeSelectionPos, GapCursorSelection, Side, isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
 export let TableSelectionDirection;
 
 (function (TableSelectionDirection) {
@@ -14,77 +10,77 @@ export let TableSelectionDirection;
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
 })(TableSelectionDirection || (TableSelectionDirection = {}));
 
-export const arrowLeftFromTable = (state, dispatch) => {
+export const arrowLeftFromTable = editorSelectionAPI => () => (state, dispatch) => {
   const {
     selection
   } = state;
 
   if (selection instanceof CellSelection) {
-    return arrowLeftFromCellSelection(selection)(state, dispatch);
+    return arrowLeftFromCellSelection(editorSelectionAPI)(selection)(state, dispatch);
   } else if (selection instanceof GapCursorSelection) {
-    return arrowLeftFromGapCursor(selection)(state, dispatch);
+    return arrowLeftFromGapCursor(editorSelectionAPI)(selection)(state, dispatch);
   } else if (selection instanceof TextSelection) {
-    return arrowLeftFromText(selection)(state, dispatch);
+    return arrowLeftFromText(editorSelectionAPI)(selection)(state, dispatch);
   }
 
   return false;
 };
-export const arrowRightFromTable = (state, dispatch) => {
+export const arrowRightFromTable = editorSelectionAPI => () => (state, dispatch) => {
   const {
     selection
   } = state;
 
   if (selection instanceof CellSelection) {
-    return arrowRightFromCellSelection(selection)(state, dispatch);
+    return arrowRightFromCellSelection(editorSelectionAPI)(selection)(state, dispatch);
   } else if (selection instanceof GapCursorSelection) {
-    return arrowRightFromGapCursor(selection)(state, dispatch);
+    return arrowRightFromGapCursor(editorSelectionAPI)(selection)(state, dispatch);
   } else if (selection instanceof TextSelection) {
-    return arrowRightFromText(selection)(state, dispatch);
+    return arrowRightFromText(editorSelectionAPI)(selection)(state, dispatch);
   }
 
   return false;
 };
 
-const arrowLeftFromCellSelection = selection => (state, dispatch) => {
-  if (isTableSelected(state.selection)) {
+const arrowLeftFromCellSelection = editorSelectionAPI => selection => (state, dispatch) => {
+  if (isTableSelected(state.selection) && editorSelectionAPI) {
     const {
       selectionRelativeToNode
-    } = getSelectionPluginState(state);
+    } = editorSelectionAPI.getSelectionPluginState(state);
 
     if (selectionRelativeToNode === RelativeSelectionPos.Start) {
       // we have full table cell selection and want to set gap cursor selection before table
-      return setGapCursorBeforeTable()(state, dispatch);
+      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(selection)(state, dispatch);
+      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(selection, RelativeSelectionPos.Before)(state, dispatch);
+      return setSelectionAtStartOfFirstCell(editorSelectionAPI)(selection, RelativeSelectionPos.Before)(state, dispatch);
     }
   }
 
   return false;
 };
 
-const arrowRightFromCellSelection = selection => (state, dispatch) => {
-  if (isTableSelected(state.selection)) {
+const arrowRightFromCellSelection = editorSelectionAPI => selection => (state, dispatch) => {
+  if (isTableSelected(state.selection) && editorSelectionAPI) {
     const {
       selectionRelativeToNode
-    } = getSelectionPluginState(state);
+    } = 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(selection)(state, dispatch);
+      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()(state, dispatch);
+      return setGapCursorAfterTable(editorSelectionAPI)()(state, dispatch);
     }
   }
 
   return false;
 };
 
-const arrowLeftFromGapCursor = selection => (state, dispatch) => {
+const arrowLeftFromGapCursor = editorSelectionAPI => selection => (state, dispatch) => {
   const {
     doc
   } = state;
@@ -97,7 +93,7 @@ const arrowLeftFromGapCursor = selection => (state, dispatch) => {
   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({
+      return selectFullTable(editorSelectionAPI)({
         node: $from.nodeBefore,
         startPos: doc.resolve(from - 1).start($from.depth + 1),
         dir: TableSelectionDirection.TopToBottom
@@ -106,17 +102,17 @@ const arrowLeftFromGapCursor = selection => (state, dispatch) => {
   } else if (side === Side.LEFT) {
     const table = findTable(selection);
 
-    if (table && isSelectionAtStartOfTable($from, selection)) {
+    if (table && isSelectionAtStartOfTable($from, selection) && editorSelectionAPI) {
       const {
         selectionRelativeToNode
-      } = getSelectionPluginState(state);
+      } = 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()(state, dispatch);
+        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({
+        return selectFullTable(editorSelectionAPI)({
           node: table.node,
           startPos: table.start,
           dir: TableSelectionDirection.BottomToTop
@@ -128,7 +124,7 @@ const arrowLeftFromGapCursor = selection => (state, dispatch) => {
   return false;
 };
 
-const arrowRightFromGapCursor = selection => (state, dispatch) => {
+const arrowRightFromGapCursor = editorSelectionAPI => selection => (state, dispatch) => {
   const {
     $from,
     from,
@@ -139,7 +135,7 @@ const arrowRightFromGapCursor = selection => (state, dispatch) => {
   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({
+      return selectFullTable(editorSelectionAPI)({
         node: $from.nodeAfter,
         startPos: from + 1,
         dir: TableSelectionDirection.BottomToTop
@@ -150,7 +146,7 @@ const arrowRightFromGapCursor = selection => (state, dispatch) => {
 
     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({
+      return selectFullTable(editorSelectionAPI)({
         node: table.node,
         startPos: table.start,
         dir: TableSelectionDirection.TopToBottom
@@ -161,7 +157,7 @@ const arrowRightFromGapCursor = selection => (state, dispatch) => {
   return false;
 };
 
-const arrowLeftFromText = selection => (state, dispatch) => {
+const arrowLeftFromText = editorSelectionAPI => selection => (state, dispatch) => {
   const table = findTable(selection);
 
   if (table) {
@@ -169,20 +165,20 @@ const arrowLeftFromText = selection => (state, dispatch) => {
       $from
     } = selection;
 
-    if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
-    ) {
+    if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 && // + 3 for: row, cell & paragraph nodes
+    editorSelectionAPI) {
       const {
         selectionRelativeToNode
-      } = getSelectionPluginState(state);
+      } = 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()(state, dispatch);
+        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({
+        return selectFullTable(editorSelectionAPI)({
           node: table.node,
           startPos: table.start,
           dir: TableSelectionDirection.BottomToTop
@@ -194,7 +190,7 @@ const arrowLeftFromText = selection => (state, dispatch) => {
   return false;
 };
 
-const arrowRightFromText = selection => (state, dispatch) => {
+const arrowRightFromText = editorSelectionAPI => selection => (state, dispatch) => {
   const table = findTable(selection);
 
   if (table) {
@@ -206,7 +202,7 @@ const arrowRightFromText = selection => (state, dispatch) => {
     ) {
       // 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({
+      return selectFullTable(editorSelectionAPI)({
         node: table.node,
         startPos: table.start,
         dir: TableSelectionDirection.TopToBottom
@@ -224,7 +220,7 @@ const arrowRightFromText = selection => (state, dispatch) => {
  */
 
 
-const selectFullTable = ({
+const selectFullTable = editorSelectionAPI => ({
   node,
   startPos,
   dir
@@ -248,10 +244,22 @@ const selectFullTable = ({
     selectionRelativeToNode = RelativeSelectionPos.Start;
   }
 
-  return setSelectionRelativeToNode(selectionRelativeToNode, fullTableSelection)(state, dispatch);
+  if (editorSelectionAPI) {
+    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+      selectionRelativeToNode,
+      selection: fullTableSelection
+    })(state);
+
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
 };
 
-const setSelectionAtStartOfFirstCell = (selection, selectionRelativeToNode) => (state, dispatch) => {
+const setSelectionAtStartOfFirstCell = editorSelectionAPI => (selection, selectionRelativeToNode) => (state, dispatch) => {
   const {
     $anchorCell,
     $headCell
@@ -260,10 +268,23 @@ const setSelectionAtStartOfFirstCell = (selection, selectionRelativeToNode) => (
   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);
-  return setSelectionRelativeToNode(selectionRelativeToNode, selectionAtStartOfCell)(state, dispatch);
+
+  if (editorSelectionAPI) {
+    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+      selectionRelativeToNode,
+      selection: selectionAtStartOfCell
+    })(state);
+
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
 };
 
-const setSelectionAtEndOfLastCell = (selection, selectionRelativeToNode) => (state, dispatch) => {
+const setSelectionAtEndOfLastCell = editorSelectionAPI => (selection, selectionRelativeToNode) => (state, dispatch) => {
   const {
     $anchorCell,
     $headCell
@@ -273,10 +294,23 @@ const setSelectionAtEndOfLastCell = (selection, selectionRelativeToNode) => (sta
   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);
-  return setSelectionRelativeToNode(selectionRelativeToNode, selectionAtEndOfCell)(state, dispatch);
+
+  if (editorSelectionAPI) {
+    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+      selectionRelativeToNode,
+      selection: selectionAtEndOfCell
+    })(state);
+
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
 };
 
-const setGapCursorBeforeTable = () => (state, dispatch) => {
+const setGapCursorBeforeTable = editorSelectionAPI => () => (state, dispatch) => {
   const table = findTable(state.selection);
 
   if (table) {
@@ -284,14 +318,25 @@ const setGapCursorBeforeTable = () => (state, dispatch) => {
 
     if (GapCursorSelection.valid($beforeTablePos)) {
       const selectionBeforeTable = new GapCursorSelection($beforeTablePos, Side.LEFT);
-      return setSelectionRelativeToNode(undefined, selectionBeforeTable)(state, dispatch);
+
+      if (editorSelectionAPI) {
+        const tr = editorSelectionAPI.setSelectionRelativeToNode({
+          selectionRelativeToNode: undefined,
+          selection: selectionBeforeTable
+        })(state);
+
+        if (dispatch) {
+          dispatch(tr);
+          return true;
+        }
+      }
     }
   }
 
   return false;
 };
 
-const setGapCursorAfterTable = () => (state, dispatch) => {
+const setGapCursorAfterTable = editorSelectionAPI => () => (state, dispatch) => {
   const table = findTable(state.selection);
 
   if (table) {
@@ -299,7 +344,20 @@ const setGapCursorAfterTable = () => (state, dispatch) => {
 
     if (GapCursorSelection.valid($afterTablePos)) {
       const selectionAfterTable = new GapCursorSelection($afterTablePos, Side.RIGHT);
-      return setSelectionRelativeToNode(undefined, selectionAfterTable)(state, dispatch);
+
+      if (editorSelectionAPI) {
+        const tr = editorSelectionAPI.setSelectionRelativeToNode({
+          selectionRelativeToNode: undefined,
+          selection: selectionAfterTable
+        })(state);
+
+        if (dispatch) {
+          dispatch(tr);
+          return true;
+        }
+      }
+
+      return false;
     }
   }