@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

package/src/plugins/table/commands/go-to-next-cell.ts

@@ -15,42 +15,45 @@ import { insertRowWithAnalytics } from '../commands-with-analytics';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
 
-export const goToNextCell = (
-  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) => (direction: Direction): Command => (state, dispatch) => {
-  const table = findTable(state.selection);
-  if (!table) {
-    return false;
-  }
-
-  const map = TableMap.get(table.node);
-  const { tableCell, tableHeader } = state.schema.nodes;
-  const cell = findParentNodeOfType([tableCell, tableHeader])(state.selection)!;
-  const firstCellPos = map.positionAt(0, 0, table.node) + table.start;
-  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(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
-      index: 0,
-      moveCursorToInsertedRow: true,
-    })(state, dispatch);
-    return true;
-  }
-
-  // when tabbing forwards at last cell (bottom right), insert row at the end of table
-  if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
-    insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
-      index: map.height,
-      moveCursorToInsertedRow: true,
-    })(state, dispatch);
-    return true;
-  }
+export const goToNextCell =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (direction: Direction): Command =>
+  (state, dispatch) => {
+    const table = findTable(state.selection);
+    if (!table) {
+      return false;
+    }
+
+    const map = TableMap.get(table.node);
+    const { tableCell, tableHeader } = state.schema.nodes;
+    const cell = findParentNodeOfType([tableCell, tableHeader])(
+      state.selection,
+    )!;
+    const firstCellPos = map.positionAt(0, 0, table.node) + table.start;
+    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(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
+        index: 0,
+        moveCursorToInsertedRow: true,
+      })(state, dispatch);
+      return true;
+    }
+
+    // when tabbing forwards at last cell (bottom right), insert row at the end of table
+    if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
+      insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
+        index: map.height,
+        moveCursorToInsertedRow: true,
+      })(state, dispatch);
+      return true;
+    }
+
+    if (dispatch) {
+      return baseGotoNextCell(direction)(state, dispatch);
+    }
 
-  if (dispatch) {
-    return baseGotoNextCell(direction)(state, dispatch);
-  }
-
-  return true;
-};
+    return true;
+  };

package/src/plugins/table/commands/insert.ts

@@ -57,109 +57,109 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-export const addColumnBefore = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-): Command => (state, dispatch, view) => {
-  const table = findTable(state.selection);
-  if (!table) {
-    return false;
-  }
-  if (dispatch) {
-    let rect = selectedRect(state);
-    dispatch(
-      addColumnAt(getEditorContainerWidth)(
-        rect.left,
-        getAllowAddColumnCustomStep(state),
-        view,
-      )(state.tr),
-    );
-  }
-  return true;
-};
+export const addColumnBefore =
+  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (state, dispatch, view) => {
+    const table = findTable(state.selection);
+    if (!table) {
+      return false;
+    }
+    if (dispatch) {
+      let rect = selectedRect(state);
+      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 = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-): Command => (state, dispatch, view) => {
-  const table = findTable(state.selection);
-  if (!table) {
-    return false;
-  }
-  if (dispatch) {
-    let rect = selectedRect(state);
-    dispatch(
-      addColumnAt(getEditorContainerWidth)(
-        rect.right,
-        getAllowAddColumnCustomStep(state),
-        view,
-      )(state.tr),
-    );
-  }
-  return true;
-};
+export const addColumnAfter =
+  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (state, dispatch, view) => {
+    const table = findTable(state.selection);
+    if (!table) {
+      return false;
+    }
+    if (dispatch) {
+      let rect = selectedRect(state);
+      dispatch(
+        addColumnAt(getEditorContainerWidth)(
+          rect.right,
+          getAllowAddColumnCustomStep(state),
+          view,
+        )(state.tr),
+      );
+    }
+    return true;
+  };
 
 // #region Commands
-export const insertColumn = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-) => (column: number): Command => (state, dispatch, view) => {
-  let tr = addColumnAt(getEditorContainerWidth)(
-    column,
-    getAllowAddColumnCustomStep(state),
-    view,
-  )(state.tr);
-  const table = findTable(tr.selection);
-  if (!table) {
-    return false;
-  }
-  // move the cursor to the newly created column
-  const pos = TableMap.get(table.node).positionAt(0, column, table.node);
+export const insertColumn =
+  (getEditorContainerWidth: GetEditorContainerWidth) =>
+  (column: number): Command =>
+  (state, dispatch, view) => {
+    let tr = addColumnAt(getEditorContainerWidth)(
+      column,
+      getAllowAddColumnCustomStep(state),
+      view,
+    )(state.tr);
+    const table = findTable(tr.selection);
+    if (!table) {
+      return false;
+    }
+    // move the cursor to the newly created column
+    const pos = TableMap.get(table.node).positionAt(0, column, table.node);
 
-  if (dispatch) {
-    dispatch(
-      tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos))),
-    );
-  }
-  return true;
-};
+    if (dispatch) {
+      dispatch(
+        tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos))),
+      );
+    }
+    return true;
+  };
 
-export const insertRow = (
-  row: number,
-  moveCursorToTheNewRow: boolean,
-): Command => (state, dispatch) => {
-  // Don't clone the header row
-  const headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
-  const clonePreviousRow =
-    (headerRowEnabled && row > 1) || (!headerRowEnabled && row > 0);
+export const insertRow =
+  (row: number, moveCursorToTheNewRow: boolean): Command =>
+  (state, dispatch) => {
+    // Don't clone the header row
+    const headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
+    const clonePreviousRow =
+      (headerRowEnabled && row > 1) || (!headerRowEnabled && row > 0);
 
-  // When the table have header row
-  // we should not add row on the position zero
-  if (row === 0 && headerRowEnabled) {
-    return false;
-  }
+    // When the table have header row
+    // we should not add row on the position zero
+    if (row === 0 && headerRowEnabled) {
+      return false;
+    }
 
-  const tr = clonePreviousRow
-    ? copyPreviousRow(state.schema)(row)(state.tr)
-    : addRowAt(row)(state.tr);
+    const tr = clonePreviousRow
+      ? copyPreviousRow(state.schema)(row)(state.tr)
+      : addRowAt(row)(state.tr);
 
-  const table = findTable(tr.selection);
-  if (!table) {
-    return false;
-  }
-  if (dispatch) {
-    const { selection } = state;
-    if (moveCursorToTheNewRow) {
-      // move the cursor to the newly created row
-      const pos = TableMap.get(table.node).positionAt(row, 0, table.node);
-      tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
-    } else {
-      tr.setSelection(selection.map(tr.doc, tr.mapping));
+    const table = findTable(tr.selection);
+    if (!table) {
+      return false;
     }
+    if (dispatch) {
+      const { selection } = state;
+      if (moveCursorToTheNewRow) {
+        // move the cursor to the newly created row
+        const pos = TableMap.get(table.node).positionAt(row, 0, table.node);
+        tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
+      } else {
+        tr.setSelection(selection.map(tr.doc, tr.mapping));
+      }
 
-    dispatch(tr);
-  }
-  return true;
-};
+      dispatch(tr);
+    }
+    return true;
+  };
 
 export const createTable = (): Command => (state, dispatch) => {
   const table = createTableNode({

package/src/plugins/table/commands/misc.ts

@@ -97,70 +97,67 @@ export const setTableRef = (ref?: HTMLTableElement) =>
     (tr) => tr.setMeta('addToHistory', false),
   );
 
-export const setCellAttr = (name: string, value: any): Command => (
-  state,
-  dispatch,
-) => {
-  const { tr, selection } = state;
-  if (selection instanceof CellSelection) {
-    let updated = false;
-    selection.forEachCell((cell, pos) => {
-      if (cell.attrs[name] !== value) {
-        tr.setNodeMarkup(pos, cell.type, { ...cell.attrs, [name]: value });
-        updated = true;
+export const setCellAttr =
+  (name: string, value: any): Command =>
+  (state, dispatch) => {
+    const { tr, selection } = state;
+    if (selection instanceof CellSelection) {
+      let updated = false;
+      selection.forEachCell((cell, pos) => {
+        if (cell.attrs[name] !== value) {
+          tr.setNodeMarkup(pos, cell.type, { ...cell.attrs, [name]: value });
+          updated = true;
+        }
+      });
+      if (updated) {
+        if (dispatch) {
+          dispatch(tr);
+        }
+        return true;
       }
-    });
-    if (updated) {
-      if (dispatch) {
-        dispatch(tr);
+    } else {
+      const cell = selectionCell(state.selection);
+      if (cell) {
+        if (dispatch) {
+          dispatch(
+            tr.setNodeMarkup(cell.pos, cell.nodeAfter?.type, {
+              ...cell.nodeAfter?.attrs,
+              [name]: value,
+            }),
+          );
+        }
+        return true;
       }
-      return true;
     }
-  } else {
-    const cell = selectionCell(state.selection);
-    if (cell) {
-      if (dispatch) {
-        dispatch(
-          tr.setNodeMarkup(cell.pos, cell.nodeAfter?.type, {
-            ...cell.nodeAfter?.attrs,
-            [name]: value,
-          }),
-        );
+    return false;
+  };
+
+export const triggerUnlessTableHeader =
+  (command: Command): Command =>
+  (state, dispatch, view) => {
+    const {
+      selection,
+      schema: {
+        nodes: { tableHeader },
+      },
+    } = state;
+
+    if (selection instanceof TextSelection) {
+      const cell = findCellClosestToPos(selection.$from);
+      if (cell && cell.node.type !== tableHeader) {
+        return command(state, dispatch, view);
       }
-      return true;
     }
-  }
-  return false;
-};
 
-export const triggerUnlessTableHeader = (command: Command): Command => (
-  state,
-  dispatch,
-  view,
-) => {
-  const {
-    selection,
-    schema: {
-      nodes: { tableHeader },
-    },
-  } = state;
-
-  if (selection instanceof TextSelection) {
-    const cell = findCellClosestToPos(selection.$from);
-    if (cell && cell.node.type !== tableHeader) {
-      return command(state, dispatch, view);
-    }
-  }
-
-  if (selection instanceof CellSelection) {
-    const rect = getSelectionRect(selection);
-    if (!checkIfHeaderRowEnabled(selection) || (rect && rect.top > 0)) {
-      return command(state, dispatch, view);
+    if (selection instanceof CellSelection) {
+      const rect = getSelectionRect(selection);
+      if (!checkIfHeaderRowEnabled(selection) || (rect && rect.top > 0)) {
+        return command(state, dispatch, view);
+      }
     }
-  }
 
-  return false;
-};
+    return false;
+  };
 
 export const transformSliceRemoveCellBackgroundColor = (
   slice: Slice,
@@ -248,21 +245,21 @@ export const deleteTableIfSelected: Command = (state, dispatch) => {
   return false;
 };
 
-export const convertFirstRowToHeader = (schema: Schema) => (
-  tr: Transaction,
-): Transaction => {
-  const table = findTable(tr.selection)!;
-  const map = TableMap.get(table.node);
-  for (let i = 0; i < map.width; i++) {
-    const cell = table.node.child(0).child(i);
-    tr.setNodeMarkup(
-      table.start + map.map[i],
-      schema.nodes.tableHeader,
-      cell.attrs,
-    );
-  }
-  return tr;
-};
+export const convertFirstRowToHeader =
+  (schema: Schema) =>
+  (tr: Transaction): Transaction => {
+    const table = findTable(tr.selection)!;
+    const map = TableMap.get(table.node);
+    for (let i = 0; i < map.width; i++) {
+      const cell = table.node.child(0).child(i);
+      tr.setNodeMarkup(
+        table.start + map.map[i],
+        schema.nodes.tableHeader,
+        cell.attrs,
+      );
+    }
+    return tr;
+  };
 
 export const moveCursorBackward: Command = (state, dispatch) => {
   const { $cursor } = state.selection as TextSelection;
@@ -332,36 +329,37 @@ export const moveCursorBackward: Command = (state, dispatch) => {
   return true;
 };
 
-export const setMultipleCellAttrs = (
-  attrs: Object,
-  targetCellPosition?: number,
-): Command => (state, dispatch) => {
-  let cursorPos: number | undefined;
-  let { tr } = state;
-
-  if (isSelectionType(tr.selection, 'cell')) {
-    const selection = (tr.selection as any) as CellSelection;
-    selection.forEachCell((_cell, pos) => {
-      const $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
-      tr = setCellAttrs(findCellClosestToPos($pos)!, attrs)(tr);
-    });
-    cursorPos = selection.$headCell.pos;
-  } else if (targetCellPosition) {
-    const cell = findCellClosestToPos(tr.doc.resolve(targetCellPosition + 1))!;
-    tr = setCellAttrs(cell, attrs)(tr);
-    cursorPos = cell.pos;
-  }
+export const setMultipleCellAttrs =
+  (attrs: Object, targetCellPosition?: number): Command =>
+  (state, dispatch) => {
+    let cursorPos: number | undefined;
+    let { tr } = state;
+
+    if (isSelectionType(tr.selection, 'cell')) {
+      const selection = tr.selection as any as CellSelection;
+      selection.forEachCell((_cell, pos) => {
+        const $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
+        tr = setCellAttrs(findCellClosestToPos($pos)!, attrs)(tr);
+      });
+      cursorPos = selection.$headCell.pos;
+    } else if (targetCellPosition) {
+      const cell = findCellClosestToPos(
+        tr.doc.resolve(targetCellPosition + 1),
+      )!;
+      tr = setCellAttrs(cell, attrs)(tr);
+      cursorPos = cell.pos;
+    }
 
-  if (tr.docChanged && cursorPos !== undefined) {
-    const $pos = tr.doc.resolve(tr.mapping.map(cursorPos!));
+    if (tr.docChanged && cursorPos !== undefined) {
+      const $pos = tr.doc.resolve(tr.mapping.map(cursorPos!));
 
-    if (dispatch) {
-      dispatch(tr.setSelection(Selection.near($pos)));
+      if (dispatch) {
+        dispatch(tr.setSelection(Selection.near($pos)));
+      }
+      return true;
     }
-    return true;
-  }
-  return false;
-};
+    return false;
+  };
 
 export const selectColumn = (column: number, expand?: boolean) =>
   createCommand(
@@ -473,34 +471,34 @@ export const autoSizeTable = (
   return true;
 };
 
-export const addBoldInEmptyHeaderCells = (
-  tableCellHeader: ContentNodeWithPos,
-): Command => (state, dispatch): boolean => {
-  const { tr } = state;
-  if (
-    // Avoid infinite loop when the current selection is not a TextSelection
-    isTextSelection(tr.selection) &&
-    tr.selection.$cursor &&
-    // When storedMark is null that means this is the initial state
-    // if the user press to remove the mark storedMark will be an empty array
-    // and we shouldn't apply the strong mark
-    tr.storedMarks == null &&
-    // Check if the current node is a direct child from paragraph
-    tr.selection.$from.depth === tableCellHeader.depth + 1 &&
-    // this logic is applied only for empty paragraph
-    tableCellHeader.node.nodeSize === 4 &&
-    isParagraph(tableCellHeader.node.firstChild, state.schema)
-  ) {
-    const { strong } = state.schema.marks;
-    tr.setStoredMarks([strong.create()]).setMeta('addToHistory', false);
+export const addBoldInEmptyHeaderCells =
+  (tableCellHeader: ContentNodeWithPos): Command =>
+  (state, dispatch): boolean => {
+    const { tr } = state;
+    if (
+      // Avoid infinite loop when the current selection is not a TextSelection
+      isTextSelection(tr.selection) &&
+      tr.selection.$cursor &&
+      // When storedMark is null that means this is the initial state
+      // if the user press to remove the mark storedMark will be an empty array
+      // and we shouldn't apply the strong mark
+      tr.storedMarks == null &&
+      // Check if the current node is a direct child from paragraph
+      tr.selection.$from.depth === tableCellHeader.depth + 1 &&
+      // this logic is applied only for empty paragraph
+      tableCellHeader.node.nodeSize === 4 &&
+      isParagraph(tableCellHeader.node.firstChild, state.schema)
+    ) {
+      const { strong } = state.schema.marks;
+      tr.setStoredMarks([strong.create()]).setMeta('addToHistory', false);
 
-    if (dispatch) {
-      dispatch(tr);
-    }
+      if (dispatch) {
+        dispatch(tr);
+      }
 
-    return true;
-  }
+      return true;
+    }
 
-  return false;
-};
+    return false;
+  };
 // #endregion