chore: Upgrade all of prosemirror (#5366)

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>
2023-05-24 22:24:05 -04:00
parent e340e568e2
commit d5341a486c
77 changed files with 875 additions and 675 deletions
--- a/shared/editor/nodes/Blockquote.ts
+++ b/shared/editor/nodes/Blockquote.ts
@@ -1,10 +1,9 @@
 import { wrappingInputRule } from "prosemirror-inputrules";
 import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { Command } from "prosemirror-state";
 import toggleWrap from "../commands/toggleWrap";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import isNodeActive from "../queries/isNodeActive";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class Blockquote extends Node {
@@ -34,17 +33,17 @@ export default class Blockquote extends Node {
    return () => toggleWrap(type);
  }

-  keys({ type }: { type: NodeType }) {
+  keys({ type }: { type: NodeType }): Record<string, Command> {
    return {
      "Ctrl->": toggleWrap(type),
      "Mod-]": toggleWrap(type),
-      "Shift-Enter": (state: EditorState, dispatch: Dispatch) => {
+      "Shift-Enter": (state, dispatch) => {
        if (!isNodeActive(type)(state)) {
          return false;
        }

        const { tr, selection } = state;
-        dispatch(tr.split(selection.to));
+        dispatch?.(tr.split(selection.to));
        return true;
      },
    };
--- a/shared/editor/nodes/Embed.tsx
+++ b/shared/editor/nodes/Embed.tsx
@@ -1,12 +1,12 @@
 import Token from "markdown-it/lib/token";
 import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { Command } from "prosemirror-state";
 import * as React from "react";
 import { sanitizeUrl } from "../../utils/urls";
 import DisabledEmbed from "../components/DisabledEmbed";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import embedsRule from "../rules/embeds";
-import { ComponentProps, Dispatch } from "../types";
+import { ComponentProps } from "../types";
 import Node from "./Node";

 const cache = {};
@@ -114,9 +114,9 @@ export default class Embed extends Node {
  }

  commands({ type }: { type: NodeType }) {
-    return (attrs: Record<string, any>) =>
-      (state: EditorState, dispatch: Dispatch) => {
-        dispatch(
+    return (attrs: Record<string, any>): Command =>
+      (state, dispatch) => {
+        dispatch?.(
          state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView()
        );
        return true;
--- a/shared/editor/nodes/Emoji.tsx
+++ b/shared/editor/nodes/Emoji.tsx
@@ -6,12 +6,11 @@ import {
  NodeType,
  Schema,
 } from "prosemirror-model";
-import { EditorState, TextSelection } from "prosemirror-state";
+import { Command, TextSelection } from "prosemirror-state";
 import Suggestion from "../extensions/Suggestion";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import { SuggestionsMenuType } from "../plugins/Suggestions";
 import emojiRule from "../rules/emoji";
-import { Dispatch } from "../types";

 export default class Emoji extends Suggestion {
  get type() {
@@ -78,8 +77,8 @@ export default class Emoji extends Suggestion {
  }

  commands({ type }: { type: NodeType; schema: Schema }) {
-    return (attrs: Record<string, string>) =>
-      (state: EditorState, dispatch: Dispatch) => {
+    return (attrs: Record<string, string>): Command =>
+      (state, dispatch) => {
        const { selection } = state;
        const position =
          selection instanceof TextSelection
@@ -91,7 +90,7 @@ export default class Emoji extends Suggestion {

        const node = type.create(attrs);
        const transaction = state.tr.insert(position, node);
-        dispatch(transaction);
+        dispatch?.(transaction);
        return true;
      };
  }
--- a/shared/editor/nodes/HardBreak.ts
+++ b/shared/editor/nodes/HardBreak.ts
@@ -1,10 +1,9 @@
 import { NodeSpec, NodeType } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { Command } from "prosemirror-state";
 import { isInTable } from "prosemirror-tables";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import isNodeActive from "../queries/isNodeActive";
 import breakRule from "../rules/breaks";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class HardBreak extends Node {
@@ -28,22 +27,24 @@ export default class HardBreak extends Node {
  }

  commands({ type }: { type: NodeType }) {
-    return () => (state: EditorState, dispatch: Dispatch) => {
-      dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+    return (): Command => (state, dispatch) => {
+      dispatch?.(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
      return true;
    };
  }

-  keys({ type }: { type: NodeType }) {
+  keys({ type }: { type: NodeType }): Record<string, Command> {
    return {
-      "Shift-Enter": (state: EditorState, dispatch: Dispatch) => {
+      "Shift-Enter": (state, dispatch) => {
        if (
          !isInTable(state) &&
          !isNodeActive(state.schema.nodes.paragraph)(state)
        ) {
          return false;
        }
-        dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+        dispatch?.(
+          state.tr.replaceSelectionWith(type.create()).scrollIntoView()
+        );
        return true;
      },
    };
--- a/shared/editor/nodes/Heading.ts
+++ b/shared/editor/nodes/Heading.ts
@@ -6,13 +6,12 @@ import {
  NodeType,
  Schema,
 } from "prosemirror-model";
-import { Plugin, Selection } from "prosemirror-state";
+import { Command, Plugin, Selection } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import Storage from "../../utils/Storage";
 import backspaceToParagraph from "../commands/backspaceToParagraph";
 import splitHeading from "../commands/splitHeading";
 import toggleBlockType from "../commands/toggleBlockType";
-import { Command } from "../lib/Extension";
 import headingToSlug, { headingToPersistenceKey } from "../lib/headingToSlug";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import { FoldingHeadersPlugin } from "../plugins/FoldingHeaders";
@@ -119,7 +118,10 @@ export default class Heading extends Node {

  handleFoldContent = (event: MouseEvent) => {
    event.preventDefault();
-    if (!(event.currentTarget instanceof HTMLButtonElement)) {
+    if (
+      !(event.currentTarget instanceof HTMLButtonElement) ||
+      event.button !== 0
+    ) {
      return;
    }

--- a/shared/editor/nodes/HorizontalRule.ts
+++ b/shared/editor/nodes/HorizontalRule.ts
@@ -1,9 +1,8 @@
 import Token from "markdown-it/lib/token";
 import { InputRule } from "prosemirror-inputrules";
 import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { Command } from "prosemirror-state";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class HorizontalRule extends Node {
@@ -28,19 +27,21 @@ export default class HorizontalRule extends Node {
  }

  commands({ type }: { type: NodeType }) {
-    return (attrs: Record<string, any>) =>
-      (state: EditorState, dispatch: Dispatch) => {
-        dispatch(
+    return (attrs: Record<string, any>): Command =>
+      (state, dispatch) => {
+        dispatch?.(
          state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView()
        );
        return true;
      };
  }

-  keys({ type }: { type: NodeType }) {
+  keys({ type }: { type: NodeType }): Record<string, Command> {
    return {
-      "Mod-_": (state: EditorState, dispatch: Dispatch) => {
-        dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+      "Mod-_": (state, dispatch) => {
+        dispatch?.(
+          state.tr.replaceSelectionWith(type.create()).scrollIntoView()
+        );
        return true;
      },
    };
--- a/shared/editor/nodes/Image.tsx
+++ b/shared/editor/nodes/Image.tsx
@@ -1,12 +1,12 @@
 import Token from "markdown-it/lib/token";
 import { InputRule } from "prosemirror-inputrules";
 import { Node as ProsemirrorNode, NodeSpec, NodeType } from "prosemirror-model";
-import { NodeSelection, EditorState, Plugin } from "prosemirror-state";
+import { NodeSelection, Plugin, Command } from "prosemirror-state";
 import * as React from "react";
 import { sanitizeUrl } from "../../utils/urls";
 import { default as ImageComponent, Caption } from "../components/Image";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
-import { ComponentProps, Dispatch } from "../types";
+import { ComponentProps } from "../types";
 import SimpleImage from "./SimpleImage";

 const imageSizeRegex = /\s=(\d+)?x(\d+)?$/;
@@ -282,7 +282,7 @@ export default class Image extends SimpleImage {
  commands({ type }: { type: NodeType }) {
    return {
      ...super.commands({ type }),
-      downloadImage: () => (state: EditorState) => {
+      downloadImage: (): Command => (state) => {
        if (!(state.selection instanceof NodeSelection)) {
          return false;
        }
@@ -296,7 +296,7 @@ export default class Image extends SimpleImage {

        return true;
      },
-      alignRight: () => (state: EditorState, dispatch: Dispatch) => {
+      alignRight: (): Command => (state, dispatch) => {
        if (!(state.selection instanceof NodeSelection)) {
          return false;
        }
@@ -306,10 +306,10 @@ export default class Image extends SimpleImage {
          layoutClass: "right-50",
        };
        const { selection } = state;
-        dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
+        dispatch?.(state.tr.setNodeMarkup(selection.from, undefined, attrs));
        return true;
      },
-      alignLeft: () => (state: EditorState, dispatch: Dispatch) => {
+      alignLeft: (): Command => (state, dispatch) => {
        if (!(state.selection instanceof NodeSelection)) {
          return false;
        }
@@ -319,10 +319,10 @@ export default class Image extends SimpleImage {
          layoutClass: "left-50",
        };
        const { selection } = state;
-        dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
+        dispatch?.(state.tr.setNodeMarkup(selection.from, undefined, attrs));
        return true;
      },
-      alignFullWidth: () => (state: EditorState, dispatch: Dispatch) => {
+      alignFullWidth: (): Command => (state, dispatch) => {
        if (!(state.selection instanceof NodeSelection)) {
          return false;
        }
@@ -332,16 +332,16 @@ export default class Image extends SimpleImage {
          layoutClass: "full-width",
        };
        const { selection } = state;
-        dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
+        dispatch?.(state.tr.setNodeMarkup(selection.from, undefined, attrs));
        return true;
      },
-      alignCenter: () => (state: EditorState, dispatch: Dispatch) => {
+      alignCenter: (): Command => (state, dispatch) => {
        if (!(state.selection instanceof NodeSelection)) {
          return false;
        }
        const attrs = { ...state.selection.node.attrs, layoutClass: null };
        const { selection } = state;
-        dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
+        dispatch?.(state.tr.setNodeMarkup(selection.from, undefined, attrs));
        return true;
      },
    };
--- a/shared/editor/nodes/ListItem.ts
+++ b/shared/editor/nodes/ListItem.ts
@@ -9,14 +9,14 @@ import {
  EditorState,
  Plugin,
  TextSelection,
+  Command,
 } from "prosemirror-state";
-import { findParentNodeClosestToPos } from "prosemirror-utils";
 import { DecorationSet, Decoration } from "prosemirror-view";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
+import { findParentNodeClosestToPos } from "../queries/findParentNode";
 import getParentListItem from "../queries/getParentListItem";
 import isInList from "../queries/isInList";
 import isList from "../queries/isList";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class ListItem extends Node {
@@ -200,14 +200,14 @@ export default class ListItem extends Node {
    };
  }

-  keys({ type }: { type: NodeType }) {
+  keys({ type }: { type: NodeType }): Record<string, Command> {
    return {
      Enter: splitListItem(type),
      Tab: sinkListItem(type),
      "Shift-Tab": liftListItem(type),
      "Mod-]": sinkListItem(type),
      "Mod-[": liftListItem(type),
-      "Shift-Enter": (state: EditorState, dispatch: Dispatch) => {
+      "Shift-Enter": (state, dispatch) => {
        if (!isInList(state)) {
          return false;
        }
@@ -216,10 +216,10 @@ export default class ListItem extends Node {
        }

        const { tr, selection } = state;
-        dispatch(tr.split(selection.to));
+        dispatch?.(tr.split(selection.to));
        return true;
      },
-      "Alt-ArrowUp": (state: EditorState, dispatch: Dispatch) => {
+      "Alt-ArrowUp": (state, dispatch) => {
        if (!state.selection.empty) {
          return false;
        }
@@ -241,7 +241,7 @@ export default class ListItem extends Node {
        const { tr } = state;
        const newPos = pos - $pos.nodeBefore.nodeSize;

-        dispatch(
+        dispatch?.(
          tr
            .delete(pos, pos + li.nodeSize)
            .insert(newPos, li)
@@ -249,7 +249,7 @@ export default class ListItem extends Node {
        );
        return true;
      },
-      "Alt-ArrowDown": (state: EditorState, dispatch: Dispatch) => {
+      "Alt-ArrowDown": (state, dispatch) => {
        if (!state.selection.empty) {
          return false;
        }
@@ -271,7 +271,7 @@ export default class ListItem extends Node {
        const { tr } = state;
        const newPos = pos + li.nodeSize + $pos.nodeAfter.nodeSize;

-        dispatch(
+        dispatch?.(
          tr
            .insert(newPos, li)
            .setSelection(TextSelection.near(tr.doc.resolve(newPos)))
--- a/shared/editor/nodes/Math.ts
+++ b/shared/editor/nodes/Math.ts
@@ -17,11 +17,10 @@ import {
  Schema,
  Node as ProsemirrorNode,
 } from "prosemirror-model";
-import { EditorState, Plugin } from "prosemirror-state";
+import { Command, Plugin } from "prosemirror-state";
 import MathPlugin from "../extensions/Math";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import mathRule, { REGEX_INLINE_MATH_DOLLARS } from "../rules/math";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class Math extends Node {
@@ -34,8 +33,8 @@ export default class Math extends Node {
  }

  commands({ type }: { type: NodeType }) {
-    return () => (state: EditorState, dispatch: Dispatch) => {
-      dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+    return (): Command => (state, dispatch) => {
+      dispatch?.(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
      return true;
    };
  }
--- a/shared/editor/nodes/MathBlock.ts
+++ b/shared/editor/nodes/MathBlock.ts
@@ -4,10 +4,9 @@ import {
 } from "@benrbray/prosemirror-math";
 import { PluginSimple } from "markdown-it";
 import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { Command } from "prosemirror-state";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import mathRule, { REGEX_BLOCK_MATH_DOLLARS } from "../rules/math";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class MathBlock extends Node {
@@ -24,8 +23,8 @@ export default class MathBlock extends Node {
  }

  commands({ type }: { type: NodeType }) {
-    return () => (state: EditorState, dispatch: Dispatch) => {
-      dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+    return (): Command => (state, dispatch) => {
+      dispatch?.(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
      return true;
    };
  }
--- a/shared/editor/nodes/Mention.ts
+++ b/shared/editor/nodes/Mention.ts
@@ -5,12 +5,11 @@ import {
  NodeType,
  Schema,
 } from "prosemirror-model";
-import { EditorState, TextSelection } from "prosemirror-state";
+import { Command, TextSelection } from "prosemirror-state";
 import Suggestion from "../extensions/Suggestion";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import { SuggestionsMenuType } from "../plugins/Suggestions";
 import mentionRule from "../rules/mention";
-import { Dispatch } from "../types";

 export default class Mention extends Suggestion {
  get type() {
@@ -80,8 +79,8 @@ export default class Mention extends Suggestion {
  }

  commands({ type }: { type: NodeType; schema: Schema }) {
-    return (attrs: Record<string, string>) =>
-      (state: EditorState, dispatch: Dispatch) => {
+    return (attrs: Record<string, string>): Command =>
+      (state, dispatch) => {
        const { selection } = state;
        const position =
          selection instanceof TextSelection
@@ -93,7 +92,7 @@ export default class Mention extends Suggestion {

        const node = type.create(attrs);
        const transaction = state.tr.insert(position, node);
-        dispatch(transaction);
+        dispatch?.(transaction);
        return true;
      };
  }
--- a/shared/editor/nodes/Node.ts
+++ b/shared/editor/nodes/Node.ts
@@ -1,12 +1,13 @@
 import { InputRule } from "prosemirror-inputrules";
-import { TokenConfig } from "prosemirror-markdown";
+import { ParseSpec } from "prosemirror-markdown";
 import {
  NodeSpec,
  Node as ProsemirrorNode,
  NodeType,
  Schema,
 } from "prosemirror-model";
-import Extension, { Command, CommandFactory } from "../lib/Extension";
+import { Command } from "prosemirror-state";
+import Extension, { CommandFactory } from "../lib/Extension";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";

 export default abstract class Node extends Extension {
@@ -41,7 +42,7 @@ export default abstract class Node extends Extension {
    throw new Error("toMarkdown not implemented");
  }

-  parseMarkdown(): TokenConfig | void {
+  parseMarkdown(): ParseSpec | void {
    return undefined;
  }
 }
--- a/shared/editor/nodes/Paragraph.ts
+++ b/shared/editor/nodes/Paragraph.ts
@@ -1,5 +1,6 @@
 import { setBlockType } from "prosemirror-commands";
 import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
+import deleteEmptyFirstParagraph from "../commands/deleteEmptyFirstParagraph";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import Node from "./Node";

@@ -20,6 +21,7 @@ export default class Paragraph extends Node {
  keys({ type }: { type: NodeType }) {
    return {
      "Shift-Ctrl-0": setBlockType(type),
+      Backspace: deleteEmptyFirstParagraph,
    };
  }

--- a/shared/editor/nodes/SimpleImage.tsx
+++ b/shared/editor/nodes/SimpleImage.tsx
@@ -1,7 +1,7 @@
 import Token from "markdown-it/lib/token";
 import { InputRule } from "prosemirror-inputrules";
 import { Node as ProsemirrorNode, NodeSpec, NodeType } from "prosemirror-model";
-import { TextSelection, NodeSelection, EditorState } from "prosemirror-state";
+import { TextSelection, NodeSelection, Command } from "prosemirror-state";
 import * as React from "react";
 import { getEventFiles } from "../../utils/files";
 import { sanitizeUrl } from "../../utils/urls";
@@ -11,7 +11,7 @@ import { default as ImageComponent } from "../components/Image";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import uploadPlaceholderPlugin from "../lib/uploadPlaceholder";
 import uploadPlugin from "../lib/uploadPlugin";
-import { ComponentProps, Dispatch } from "../types";
+import { ComponentProps } from "../types";
 import Node from "./Node";

 export default class SimpleImage extends Node {
@@ -171,11 +171,11 @@ export default class SimpleImage extends Node {

  commands({ type }: { type: NodeType }) {
    return {
-      deleteImage: () => (state: EditorState, dispatch: Dispatch) => {
-        dispatch(state.tr.deleteSelection());
+      deleteImage: (): Command => (state, dispatch) => {
+        dispatch?.(state.tr.deleteSelection());
        return true;
      },
-      replaceImage: () => (state: EditorState) => {
+      replaceImage: (): Command => (state) => {
        if (!(state.selection instanceof NodeSelection)) {
          return false;
        }
@@ -214,8 +214,8 @@ export default class SimpleImage extends Node {
        return true;
      },
      createImage:
-        (attrs: Record<string, any>) =>
-        (state: EditorState, dispatch: Dispatch) => {
+        (attrs: Record<string, any>): Command =>
+        (state, dispatch) => {
          const { selection } = state;
          const position =
            selection instanceof TextSelection
@@ -227,7 +227,7 @@ export default class SimpleImage extends Node {

          const node = type.create(attrs);
          const transaction = state.tr.insert(position, node);
-          dispatch(transaction);
+          dispatch?.(transaction);
          return true;
        },
    };
--- a/shared/editor/nodes/Table.ts
+++ b/shared/editor/nodes/Table.ts
@@ -1,5 +1,6 @@
-import { NodeSpec, Node as ProsemirrorNode, Schema } from "prosemirror-model";
-import { EditorState, Plugin, TextSelection } from "prosemirror-state";
+import { chainCommands } from "prosemirror-commands";
+import { NodeSpec, Node as ProsemirrorNode } from "prosemirror-model";
+import { Command, Plugin, TextSelection } from "prosemirror-state";
 import {
  addColumnAfter,
  addColumnBefore,
@@ -7,25 +8,19 @@ import {
  deleteRow,
  deleteTable,
  goToNextCell,
-  isInTable,
  tableEditing,
  toggleHeaderCell,
  toggleHeaderColumn,
  toggleHeaderRow,
-  CellSelection,
 } from "prosemirror-tables";
-import {
-  addRowAt,
-  createTable,
-  getCellsInColumn,
-  moveRow,
-  setTextSelection,
-} from "prosemirror-utils";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import {
+  addRowAfterAndMoveSelection,
+  setColumnAttr,
+  createTable,
+} from "../commands/table";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
-import { getRowIndexFromText } from "../queries/getRowIndex";
 import tablesRule from "../rules/tables";
-import { Dispatch } from "../types";
 import Node from "./Node";

 export default class Table extends Node {
@@ -58,49 +53,32 @@ export default class Table extends Node {
    return [tablesRule];
  }

-  commands({ schema }: { schema: Schema }) {
+  commands() {
    return {
      createTable:
-        ({ rowsCount, colsCount }: { rowsCount: number; colsCount: number }) =>
-        (state: EditorState, dispatch: Dispatch) => {
-          const offset = state.tr.selection.anchor + 1;
-          const nodes = createTable(schema, rowsCount, colsCount);
-          const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
-          const resolvedPos = tr.doc.resolve(offset);
-
-          tr.setSelection(TextSelection.near(resolvedPos));
-          dispatch(tr);
-          return true;
-        },
-      setColumnAttr:
-        ({ index, alignment }: { index: number; alignment: string }) =>
-        (state: EditorState, dispatch: Dispatch) => {
-          const cells = getCellsInColumn(index)(state.selection) || [];
-          let transaction = state.tr;
-          cells.forEach(({ pos }) => {
-            transaction = transaction.setNodeMarkup(pos, undefined, {
-              alignment,
-            });
-          });
-          dispatch(transaction);
-          return true;
-        },
-      addColumnBefore: () => addColumnBefore,
-      addColumnAfter: () => addColumnAfter,
-      deleteColumn: () => deleteColumn,
-      addRowAfter:
-        ({ index }: { index: number }) =>
-        (state: EditorState, dispatch: Dispatch) => {
-          if (index === 0) {
-            // A little hack to avoid cloning the heading row by cloning the row
-            // beneath and then moving it to the right index.
-            const tr = addRowAt(index + 2, true)(state.tr);
-            dispatch(moveRow(index + 2, index + 1)(tr));
-          } else {
-            dispatch(addRowAt(index + 1, true)(state.tr));
+        ({
+          rowsCount,
+          colsCount,
+        }: {
+          rowsCount: number;
+          colsCount: number;
+        }): Command =>
+        (state, dispatch) => {
+          if (dispatch) {
+            const offset = state.tr.selection.anchor + 1;
+            const nodes = createTable(state, rowsCount, colsCount);
+            const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
+            const resolvedPos = tr.doc.resolve(offset);
+            tr.setSelection(TextSelection.near(resolvedPos));
+            dispatch(tr);
          }
          return true;
        },
+      setColumnAttr,
+      addColumnBefore: () => addColumnBefore,
+      addColumnAfter: () => addColumnAfter,
+      deleteColumn: () => deleteColumn,
+      addRowAfter: addRowAfterAndMoveSelection,
      deleteRow: () => deleteRow,
      deleteTable: () => deleteTable,
      toggleHeaderColumn: () => toggleHeaderColumn,
@@ -111,31 +89,9 @@ export default class Table extends Node {

  keys() {
    return {
-      Tab: goToNextCell(1),
+      Tab: chainCommands(goToNextCell(1), addRowAfterAndMoveSelection()),
      "Shift-Tab": goToNextCell(-1),
-      Enter: (state: EditorState, dispatch: Dispatch) => {
-        if (!isInTable(state)) {
-          return false;
-        }
-        const index = getRowIndexFromText(
-          state.selection as unknown as CellSelection
-        );
-
-        if (index === 0) {
-          const cells = getCellsInColumn(0)(state.selection);
-          if (!cells) {
-            return false;
-          }
-
-          const tr = addRowAt(index + 2, true)(state.tr);
-          dispatch(
-            setTextSelection(cells[1].pos)(moveRow(index + 2, index + 1)(tr))
-          );
-        } else {
-          dispatch(addRowAt(index + 1, true)(state.tr));
-        }
-        return true;
-      },
+      Enter: addRowAfterAndMoveSelection(),
    };
  }

--- a/shared/editor/nodes/TableCell.ts
+++ b/shared/editor/nodes/TableCell.ts
@@ -1,14 +1,13 @@
 import Token from "markdown-it/lib/token";
 import { NodeSpec } from "prosemirror-model";
 import { Plugin } from "prosemirror-state";
-import {
-  isTableSelected,
-  isRowSelected,
-  getCellsInColumn,
-  selectRow,
-  selectTable,
-} from "prosemirror-utils";
 import { DecorationSet, Decoration } from "prosemirror-view";
+import { selectRow, selectTable } from "../commands/table";
+import {
+  getCellsInColumn,
+  isRowSelected,
+  isTableSelected,
+} from "../queries/table";
 import Node from "./Node";

 export default class TableCell extends Node {
@@ -55,17 +54,17 @@ export default class TableCell extends Node {
      new Plugin({
        props: {
          decorations: (state) => {
-            const { doc, selection } = state;
+            const { doc } = state;
            const decorations: Decoration[] = [];
-            const cells = getCellsInColumn(0)(selection);
+            const cells = getCellsInColumn(0)(state);

            if (cells) {
-              cells.forEach(({ pos }, index) => {
+              cells.forEach((pos, index) => {
                if (index === 0) {
                  decorations.push(
                    Decoration.widget(pos + 1, () => {
                      let className = "grip-table";
-                      const selected = isTableSelected(selection);
+                      const selected = isTableSelected(state);
                      if (selected) {
                        className += " selected";
                      }
@@ -74,7 +73,7 @@ export default class TableCell extends Node {
                      grip.addEventListener("mousedown", (event) => {
                        event.preventDefault();
                        event.stopImmediatePropagation();
-                        this.editor.view.dispatch(selectTable(state.tr));
+                        this.editor.view.dispatch(selectTable(state));
                      });
                      return grip;
                    })
@@ -82,7 +81,7 @@ export default class TableCell extends Node {
                }
                decorations.push(
                  Decoration.widget(pos + 1, () => {
-                    const rowSelected = isRowSelected(index)(selection);
+                    const rowSelected = isRowSelected(index)(state);

                    let className = "grip-row";
                    if (rowSelected) {
@@ -100,10 +99,7 @@ export default class TableCell extends Node {
                      event.preventDefault();
                      event.stopImmediatePropagation();
                      this.editor.view.dispatch(
-                        selectRow(
-                          index,
-                          event.metaKey || event.shiftKey
-                        )(state.tr)
+                        selectRow(index, event.metaKey || event.shiftKey)(state)
                      );
                    });
                    return grip;
--- a/shared/editor/nodes/TableHeadCell.ts
+++ b/shared/editor/nodes/TableHeadCell.ts
@@ -1,12 +1,10 @@
 import Token from "markdown-it/lib/token";
 import { NodeSpec } from "prosemirror-model";
 import { Plugin } from "prosemirror-state";
-import {
-  isColumnSelected,
-  getCellsInRow,
-  selectColumn,
-} from "prosemirror-utils";
 import { DecorationSet, Decoration } from "prosemirror-view";
+import { selectColumn } from "../commands/table";
+import { getCellsInRow, isColumnSelected } from "../queries/table";
+
 import Node from "./Node";

 export default class TableHeadCell extends Node {
@@ -53,15 +51,15 @@ export default class TableHeadCell extends Node {
      new Plugin({
        props: {
          decorations: (state) => {
-            const { doc, selection } = state;
+            const { doc } = state;
            const decorations: Decoration[] = [];
-            const cells = getCellsInRow(0)(selection);
+            const cells = getCellsInRow(0)(state);

            if (cells) {
-              cells.forEach(({ pos }, index) => {
+              cells.forEach((pos, index) => {
                decorations.push(
                  Decoration.widget(pos + 1, () => {
-                    const colSelected = isColumnSelected(index)(selection);
+                    const colSelected = isColumnSelected(index)(state);
                    let className = "grip-column";
                    if (colSelected) {
                      className += " selected";
@@ -80,7 +78,7 @@ export default class TableHeadCell extends Node {
                        selectColumn(
                          index,
                          event.metaKey || event.shiftKey
-                        )(state.tr)
+                        )(state)
                      );
                    });
                    return grip;