@blocknote/core 0.1.2 → 0.2.1-alpha.0

package/src/extensions/Blocks/nodes/Block.ts

@@ -1,41 +1,38 @@
 import { mergeAttributes, Node } from "@tiptap/core";
-import { Selection, TextSelection } from "prosemirror-state";
-import { joinBackward } from "../commands/joinBackward";
-import { findBlock } from "../helpers/findBlock";
-import { setBlockHeading } from "../helpers/setBlockHeading";
-import { OrderedListPlugin } from "../OrderedListPlugin";
+import { Slice } from "prosemirror-model";
+import { TextSelection } from "prosemirror-state";
+import BlockAttributes from "../BlockAttributes";
+import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
-import { textblockTypeInputRuleSameNodeType } from "../rule";
 import styles from "./Block.module.css";
-import BlockAttributes from "../BlockAttributes";
+import { TextContentType } from "./BlockTypes/TextBlock/TextContent";
+import { HeadingContentType } from "./BlockTypes/HeadingBlock/HeadingContent";
+import { ListItemContentType } from "./BlockTypes/ListItemBlock/ListItemContent";
 
 export interface IBlock {
   HTMLAttributes: Record<string, any>;
 }
 
-export type Level = "1" | "2" | "3";
-export type ListType = "li" | "oli";
+export type BlockContentType =
+  | TextContentType
+  | HeadingContentType
+  | ListItemContentType;
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
-    blockHeading: {
-      /**
-       * Set a heading node
-       */
-      setBlockHeading: (attributes: { level: Level }) => ReturnType;
-      /**
-       * Unset a heading node
-       */
-      unsetBlockHeading: () => ReturnType;
-
-      unsetList: () => ReturnType;
-
-      addNewBlockAsSibling: (attributes?: {
-        headingType?: Level;
-        listType?: ListType;
-      }) => ReturnType;
-
-      setBlockList: (type: ListType) => ReturnType;
+    block: {
+      BNCreateBlock: (pos: number) => ReturnType;
+      BNDeleteBlock: (posInBlock: number) => ReturnType;
+      BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
+      BNSplitBlock: (posInBlock: number, keepType: boolean) => ReturnType;
+      BNSetContentType: (
+        posInBlock: number,
+        type: BlockContentType
+      ) => ReturnType;
+      BNCreateBlockOrSetContentType: (
+        posInBlock: number,
+        type: BlockContentType
+      ) => ReturnType;
     };
   }
 }
@@ -46,38 +43,31 @@ declare module "@tiptap/core" {
 export const Block = Node.create<IBlock>({
   name: "block",
   group: "block",
+  // A block always contains content, and optionally a blockGroup which contains nested blocks
+  content: "blockContent blockGroup?",
+  // Ensures content-specific keyboard handlers trigger first.
+  priority: 50,
+  defining: true,
+
   addOptions() {
     return {
       HTMLAttributes: {},
     };
   },
 
-  // A block always contains content, and optionally a blockGroup which contains nested blocks
-  content: "content blockgroup?",
-
-  defining: true,
-
   addAttributes() {
     return {
-      listType: {
-        default: undefined,
-      },
       blockColor: {
         default: undefined,
       },
       blockStyle: {
         default: undefined,
       },
-      headingType: {
-        default: undefined,
-        keepOnSplit: false,
-      },
     };
   },
 
   parseHTML() {
     return [
-      // For parsing blocks within the editor.
       {
         tag: "div",
         getAttrs: (element) => {
@@ -96,49 +86,6 @@ export const Block = Node.create<IBlock>({
             return attrs;
           }
 
-          return false;
-        },
-      },
-      // For parsing headings & paragraphs copied from outside the editor.
-      {
-        tag: "p",
-        priority: 100,
-      },
-      {
-        tag: "h1",
-        attrs: { headingType: "1" },
-      },
-      {
-        tag: "h2",
-        attrs: { headingType: "2" },
-      },
-      {
-        tag: "h3",
-        attrs: { headingType: "3" },
-      },
-      // For parsing list items copied from outside the editor.
-      {
-        tag: "li",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          const parent = element.parentElement;
-
-          if (parent === null) {
-            return false;
-          }
-
-          // Gets type of list item (ordered/unordered) based on parent element's tag ("ol"/"ul").
-          if (parent.tagName === "UL") {
-            return { listType: "li" };
-          }
-
-          if (parent.tagName === "OL") {
-            return { listType: "oli" };
-          }
-
           return false;
         },
       },
@@ -148,7 +95,8 @@ export const Block = Node.create<IBlock>({
   renderHTML({ HTMLAttributes }) {
     const attrs: Record<string, string> = {};
     for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
-      if (HTMLAttributes[nodeAttr]) {
+      // Ensure falsy values are not misinterpreted.
+      if (HTMLAttributes[nodeAttr] !== undefined) {
         attrs[HTMLAttr] = HTMLAttributes[nodeAttr];
       }
     }
@@ -162,275 +110,448 @@ export const Block = Node.create<IBlock>({
       [
         "div",
         mergeAttributes(attrs, {
+          // TODO: maybe remove html attributes from inner block
           class: styles.block,
-          "data-node-type": "block",
+          "data-node-type": this.name,
         }),
         0,
       ],
     ];
   },
 
-  addInputRules() {
-    return [
-      ...["1", "2", "3"].map((level) => {
-        // Create a heading when starting with "#", "##", or "###""
-        return textblockTypeInputRuleSameNodeType({
-          find: new RegExp(`^(#{1,${level}})\\s$`),
-          type: this.type,
-          getAttributes: {
-            headingType: level,
-          },
-        });
-      }),
-      // Create a list when starting with "-"
-      textblockTypeInputRuleSameNodeType({
-        find: /^\s*([-+*])\s$/,
-        type: this.type,
-        getAttributes: {
-          listType: "li",
-        },
-      }),
-      textblockTypeInputRuleSameNodeType({
-        find: new RegExp(/^1.\s/),
-        type: this.type,
-        getAttributes: {
-          listType: "oli",
-        },
-      }),
-    ];
-  },
-
   addCommands() {
     return {
-      setBlockHeading:
-        (attributes) =>
-        ({ tr, dispatch }) => {
-          return setBlockHeading(tr, dispatch, attributes.level);
+      // Creates a new text block at a given position.
+      BNCreateBlock:
+        (pos) =>
+        ({ state, dispatch }) => {
+          const newBlock = state.schema.nodes["block"].createAndFill()!;
+
+          if (dispatch) {
+            state.tr.insert(pos, newBlock);
+          }
+
+          return true;
         },
-      unsetBlockHeading:
-        () =>
-        ({ tr, dispatch }) => {
-          return setBlockHeading(tr, dispatch, undefined);
+      // Deletes a block at a given position and sets the selection to where the block was.
+      BNDeleteBlock:
+        (posInBlock) =>
+        ({ state, view, dispatch }) => {
+          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
+          if (blockInfo === undefined) {
+            return false;
+          }
+
+          const { startPos, endPos } = blockInfo;
+
+          if (dispatch) {
+            state.tr.deleteRange(startPos, endPos);
+            state.tr.setSelection(
+              new TextSelection(state.doc.resolve(startPos + 1))
+            );
+            view.focus();
+          }
+
+          return true;
         },
-      unsetList:
-        () =>
-        ({ tr, dispatch }) => {
-          const node = tr.selection.$anchor.node(-1);
-          const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
+      // Appends the text contents of a block to the nearest previous block, given a position between them. Children of
+      // the merged block are moved out of it first, rather than also being merged.
+      //
+      // In the example below, the position passed into the function is between Block1 and Block2.
+      //
+      // Block1
+      //    Block2
+      // Block3
+      //    Block4
+      //        Block5
+      //
+      // Becomes:
+      //
+      // Block1
+      //    Block2Block3
+      // Block4
+      //     Block5
+      BNMergeBlocks:
+        (posBetweenBlocks) =>
+        ({ state, dispatch }) => {
+          const nextNodeIsBlock =
+            state.doc.resolve(posBetweenBlocks + 1).node().type.name ===
+            "block";
+          const prevNodeIsBlock =
+            state.doc.resolve(posBetweenBlocks - 1).node().type.name ===
+            "block";
+
+          if (!nextNodeIsBlock || !prevNodeIsBlock) {
+            return false;
+          }
+
+          const nextBlockInfo = getBlockInfoFromPos(
+            state.doc,
+            posBetweenBlocks + 1
+          );
+
+          const { node, contentNode, startPos, endPos, depth } = nextBlockInfo!;
+
+          // Removes a level of nesting all children of the next block by 1 level, if it contains both content and block
+          // group nodes.
+          if (node.childCount === 2) {
+            const childBlocksStart = state.doc.resolve(
+              startPos + contentNode.nodeSize + 1
+            );
+            const childBlocksEnd = state.doc.resolve(endPos - 1);
+            const childBlocksRange =
+              childBlocksStart.blockRange(childBlocksEnd);
 
-          // const node2 = tr.doc.nodeAt(nodePos);
-          if (node.type.name === "block" && node.attrs["listType"]) {
+            // Moves the block group node inside the block into the block group node that the current block is in.
             if (dispatch) {
-              tr.setNodeMarkup(nodePos, undefined, {
-                ...node.attrs,
-                listType: undefined,
-              });
-              return true;
+              state.tr.lift(childBlocksRange!, depth - 1);
             }
           }
-          return false;
-        },
 
-      addNewBlockAsSibling:
-        (attributes) =>
-        ({ tr, dispatch, state }) => {
-          // Get current block
-          const currentBlock = findBlock(tr.selection);
-          if (!currentBlock) {
+          let prevBlockEndPos = posBetweenBlocks - 1;
+          let prevBlockInfo = getBlockInfoFromPos(state.doc, prevBlockEndPos);
+
+          // Finds the nearest previous block, regardless of nesting level.
+          while (prevBlockInfo!.numChildBlocks > 0) {
+            prevBlockEndPos--;
+            prevBlockInfo = getBlockInfoFromPos(state.doc, prevBlockEndPos);
+            if (prevBlockInfo === undefined) {
+              return false;
+            }
+          }
+
+          // Deletes next block and adds its text content to the nearest previous block.
+          // TODO: Is there any situation where we need the whole block content, not just text? Implementation for this
+          //  is trickier.
+          if (dispatch) {
+            state.tr.deleteRange(startPos, startPos + contentNode.nodeSize);
+            state.tr.insertText(contentNode.textContent, prevBlockEndPos - 1);
+            state.tr.setSelection(
+              new TextSelection(state.doc.resolve(prevBlockEndPos - 1))
+            );
+          }
+
+          return true;
+        },
+      // Splits a block at a given position. Content after the position is moved to a new block below, at the same
+      // nesting level.
+      BNSplitBlock:
+        (posInBlock, keepType) =>
+        ({ state, dispatch }) => {
+          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
+          if (blockInfo === undefined) {
             return false;
           }
 
-          // If current blocks content is empty dont create a new block
-          if (currentBlock.node.firstChild?.textContent.length === 0) {
-            if (dispatch) {
-              tr.setNodeMarkup(currentBlock.pos, undefined, attributes);
+          const { contentNode, contentType, startPos, endPos, depth } =
+            blockInfo;
+
+          const newBlockInsertionPos = endPos + 1;
+
+          // Creates new block first, otherwise positions get changed due to the original block's content changing.
+          // Only text content is transferred to the new block.
+          const secondBlockContent = state.doc.textBetween(posInBlock, endPos);
+
+          const newBlock = state.schema.nodes["block"].createAndFill()!;
+          const newBlockContentPos = newBlockInsertionPos + 2;
+
+          if (dispatch) {
+            state.tr.insert(newBlockInsertionPos, newBlock);
+            state.tr.insertText(secondBlockContent, newBlockContentPos);
+
+            if (keepType) {
+              state.tr.setBlockType(
+                newBlockContentPos,
+                newBlockContentPos,
+                state.schema.node(contentType).type,
+                contentNode.attrs
+              );
             }
-            return true;
           }
 
-          // Create new block after current block
-          const endOfBlock = currentBlock.pos + currentBlock.node.nodeSize;
-          let newBlock = state.schema.nodes["block"].createAndFill(attributes)!;
+          // Updates content of original block.
+          const firstBlockContent = state.doc.content.cut(startPos, posInBlock);
+
           if (dispatch) {
-            tr.insert(endOfBlock, newBlock);
-            tr.setSelection(new TextSelection(tr.doc.resolve(endOfBlock + 1)));
+            state.tr.replace(
+              startPos,
+              endPos,
+              new Slice(firstBlockContent, depth, depth)
+            );
           }
+
           return true;
         },
-      setBlockList:
-        (type) =>
-        ({ tr, dispatch }) => {
-          const node = tr.selection.$anchor.node(-1);
-          const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
-
-          // const node2 = tr.doc.nodeAt(nodePos);
-          if (node.type.name === "block") {
-            if (dispatch) {
-              tr.setNodeMarkup(nodePos, undefined, {
-                ...node.attrs,
-                listType: type,
-              });
-            }
-            return true;
+      // Changes the content of a block at a given position to a given type.
+      BNSetContentType:
+        (posInBlock, type) =>
+        ({ state, dispatch }) => {
+          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
+          if (blockInfo === undefined) {
+            return false;
+          }
+
+          const { startPos, contentNode } = blockInfo;
+
+          if (dispatch) {
+            state.tr.setBlockType(
+              startPos + 1,
+              startPos + contentNode.nodeSize + 1,
+              state.schema.node(type.name).type,
+              type.attrs
+            );
+          }
+
+          return true;
+        },
+      // Changes the block at a given position to a given content type if it's empty, otherwise creates a new block of
+      // that type below it.
+      BNCreateBlockOrSetContentType:
+        (posInBlock, type) =>
+        ({ state, chain }) => {
+          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
+          if (blockInfo === undefined) {
+            return false;
+          }
+
+          const { node, startPos, endPos } = blockInfo;
+
+          if (node.textContent.length === 0) {
+            const oldBlockContentPos = startPos + 1;
+
+            return chain()
+              .BNSetContentType(posInBlock, type)
+              .setTextSelection(oldBlockContentPos)
+              .run();
+          } else {
+            const newBlockInsertionPos = endPos + 1;
+            const newBlockContentPos = newBlockInsertionPos + 1;
+
+            return chain()
+              .BNCreateBlock(newBlockInsertionPos)
+              .BNSetContentType(newBlockContentPos, type)
+              .setTextSelection(newBlockContentPos)
+              .run();
           }
-          return false;
         },
-      joinBackward:
-        () =>
-        ({ view, dispatch, state }) =>
-          joinBackward(state, dispatch, view), // Override default joinBackward with edited command
     };
   },
+
   addProseMirrorPlugins() {
-    return [PreviousBlockTypePlugin(), OrderedListPlugin()];
+    return [PreviousBlockTypePlugin()];
   },
+
   addKeyboardShortcuts() {
     // handleBackspace is partially adapted from https://github.com/ueberdosis/tiptap/blob/ed56337470efb4fd277128ab7ef792b37cfae992/packages/core/src/extensions/keymap.ts
     const handleBackspace = () =>
       this.editor.commands.first(({ commands }) => [
-        // Maybe the user wants to undo an auto formatting input rule (e.g.: - or #, and then hit backspace) (source: tiptap)
+        // Deletes the selection if it's not empty.
+        () => commands.deleteSelection(),
+        // Undoes an input rule if one was triggered in the last editor state change.
         () => commands.undoInputRule(),
-        // maybe convert first text block node to default node (source: tiptap)
+        // Changes block type to a text block if it's not already, while the selection is at the start of the block.
+        () =>
+          commands.command(({ state }) => {
+            const { contentType } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
+            const isTextBlock = contentType.name === "textContent";
+
+            if (selectionAtBlockStart && !isTextBlock) {
+              return commands.BNSetContentType(state.selection.from, {
+                name: "textContent",
+              });
+            }
+
+            return false;
+          }),
+        // Removes a level of nesting if the block is indented if the selection is at the start of the block.
         () =>
-          commands.command(({ tr }) => {
-            const { selection, doc } = tr;
-            const { empty, $anchor } = selection;
-            const { pos, parent } = $anchor;
-            const isAtStart = Selection.atStart(doc).from === pos;
+          commands.command(({ state }) => {
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
 
-            if (
-              !empty ||
-              !isAtStart ||
-              !parent.type.isTextblock ||
-              parent.textContent.length
-            ) {
-              return false;
+            if (selectionAtBlockStart) {
+              return commands.liftListItem("block");
             }
 
-            return commands.clearNodes();
+            return false;
           }),
-        () => commands.deleteSelection(), // (source: tiptap)
+        // Merges block with the previous one if it isn't indented, isn't the first block in the doc, and the selection
+        // is at the start of the block.
         () =>
-          commands.command(({ tr }) => {
-            const isAtStartOfNode = tr.selection.$anchor.parentOffset === 0;
-            const node = tr.selection.$anchor.node(-1);
-            if (isAtStartOfNode && node.type.name === "block") {
-              // we're at the start of the block, so we're trying to "backspace" the bullet or indentation
-              return commands.first([
-                () => commands.unsetList(), // first try to remove the "list" property
-                () => commands.liftListItem("block"), // then try to remove a level of indentation
-              ]);
+          commands.command(({ state }) => {
+            const { depth, startPos } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
+            const selectionEmpty =
+              state.selection.anchor === state.selection.head;
+            const blockAtDocStart = startPos === 2;
+
+            const posBetweenBlocks = startPos - 1;
+
+            if (
+              !blockAtDocStart &&
+              selectionAtBlockStart &&
+              selectionEmpty &&
+              depth === 2
+            ) {
+              return commands.BNMergeBlocks(posBetweenBlocks);
             }
+
             return false;
           }),
-        ({ chain }) =>
-          // we are at the start of a block at the root level. The user hits backspace to "merge it" to the end of the block above
-          //
-          // BlockA
-          // BlockB
-
-          // Becomes:
-
-          // BlockABlockB
-
-          chain()
-            .command(({ tr, state, dispatch }) => {
-              const isAtStartOfNode = tr.selection.$anchor.parentOffset === 0;
-              const anchor = tr.selection.$anchor;
-              const node = anchor.node(-1);
-              if (isAtStartOfNode && node.type.name === "block") {
-                if (node.childCount === 2) {
-                  // BlockB has children. We want to go from this:
-                  //
-                  // BlockA
-                  // BlockB
-                  //    BlockC
-                  //        BlockD
-                  //
-                  // to:
-                  //
-                  // BlockABlockB
-                  // BlockC
-                  //     BlockD
-
-                  // This parts moves the children of BlockB to the top level
-                  const startSecondChild = anchor.posAtIndex(1, -1) + 1; // start of blockgroup
-                  const endSecondChild = anchor.posAtIndex(2, -1) - 1;
-                  const range = state.doc
-                    .resolve(startSecondChild)
-                    .blockRange(state.doc.resolve(endSecondChild));
-
-                  if (dispatch) {
-                    tr.lift(range!, anchor.depth - 2);
-                  }
-                }
-                return true;
-              }
-              return false;
-            })
-            // use joinBackward to merge BlockB to BlockA (i.e.: turn it into BlockABlockB)
-            // The standard JoinBackward would break here, and would turn it into:
-            // BlockA
-            //     BlockB
-            //
-            // joinBackward has been patched with our custom version to fix this (see commands/joinBackward)
-            .joinBackward()
-            .run(),
-
-        () => commands.selectNodeBackward(), // (source: tiptap)
       ]);
 
     const handleEnter = () =>
       this.editor.commands.first(({ commands }) => [
-        // Try to split the current block into 2 items:
-        () => commands.splitListItem("block"),
-        // Otherwise, maybe we are in an empty list item. "Enter" should remove the list bullet
-        ({ tr, dispatch }) => {
-          const $from = tr.selection.$from;
-          if ($from.depth !== 3) {
-            // only needed at root level, at deeper levels it should be handled already by splitListItem
+        // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
+        // of the block.
+        () =>
+          commands.command(({ state }) => {
+            const { node, depth } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
+            const selectionEmpty =
+              state.selection.anchor === state.selection.head;
+            const blockEmpty = node.textContent.length === 0;
+            const blockIndented = depth > 2;
+
+            if (
+              selectionAtBlockStart &&
+              selectionEmpty &&
+              blockEmpty &&
+              blockIndented
+            ) {
+              return commands.liftListItem("block");
+            }
+
             return false;
-          }
-          const node = tr.selection.$anchor.node(-1);
-          const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
+          }),
+        // Creates a new block and moves the selection to it if the current one is empty, while the selection is also
+        // empty & at the start of the block.
+        () =>
+          commands.command(({ state, chain }) => {
+            const { node, endPos } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
+            const selectionEmpty =
+              state.selection.anchor === state.selection.head;
+            const blockEmpty = node.textContent.length === 0;
+
+            if (selectionAtBlockStart && selectionEmpty && blockEmpty) {
+              const newBlockInsertionPos = endPos + 1;
+              const newBlockContentPos = newBlockInsertionPos + 2;
+
+              chain()
+                .BNCreateBlock(newBlockInsertionPos)
+                .setTextSelection(newBlockContentPos)
+                .run();
 
-          if (node.type.name === "block" && node.attrs["listType"]) {
-            if (dispatch) {
-              tr.setNodeMarkup(nodePos, undefined, {
-                ...node.attrs,
-                listType: undefined,
-              });
+              return true;
             }
-            return true;
-          }
-          return false;
-        },
-        // Otherwise, we might be on an empty line and hit "Enter" to create a new line:
-        ({ tr, dispatch }) => {
-          const $from = tr.selection.$from;
 
-          if (dispatch) {
-            tr.split($from.pos, 2).scrollIntoView();
-          }
-          return true;
-        },
+            return false;
+          }),
+        // Splits the current block, moving content inside that's after the cursor to a new text block below. Also
+        // deletes the selection beforehand, if it's not empty.
+        () =>
+          commands.command(({ state, chain }) => {
+            const { node } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const blockEmpty = node.textContent.length === 0;
+
+            if (!blockEmpty) {
+              chain()
+                .deleteSelection()
+                .BNSplitBlock(state.selection.from, false)
+                .run();
+
+              return true;
+            }
+
+            return false;
+          }),
       ]);
 
     return {
       Backspace: handleBackspace,
       Enter: handleEnter,
       Tab: () => this.editor.commands.sinkListItem("block"),
-      "Shift-Tab": () => {
-        return this.editor.commands.liftListItem("block");
-      },
+      "Shift-Tab": () => this.editor.commands.liftListItem("block"),
       "Mod-Alt-0": () =>
-        this.editor.chain().unsetList().unsetBlockHeading().run(),
-      "Mod-Alt-1": () => this.editor.commands.setBlockHeading({ level: "1" }),
-      "Mod-Alt-2": () => this.editor.commands.setBlockHeading({ level: "2" }),
-      "Mod-Alt-3": () => this.editor.commands.setBlockHeading({ level: "3" }),
-      "Mod-Shift-7": () => this.editor.commands.setBlockList("li"),
-      "Mod-Shift-8": () => this.editor.commands.setBlockList("oli"),
-      // TODO: Add shortcuts for numbered and bullet list
+        this.editor.commands.BNCreateBlock(
+          this.editor.state.selection.anchor + 2
+        ),
+      "Mod-Alt-1": () =>
+        this.editor.commands.BNSetContentType(
+          this.editor.state.selection.anchor,
+          {
+            name: "headingContent",
+            attrs: {
+              headingLevel: "1",
+            },
+          }
+        ),
+      "Mod-Alt-2": () =>
+        this.editor.commands.BNSetContentType(
+          this.editor.state.selection.anchor,
+          {
+            name: "headingContent",
+            attrs: {
+              headingLevel: "2",
+            },
+          }
+        ),
+      "Mod-Alt-3": () =>
+        this.editor.commands.BNSetContentType(
+          this.editor.state.selection.anchor,
+          {
+            name: "headingContent",
+            attrs: {
+              headingLevel: "3",
+            },
+          }
+        ),
+      "Mod-Shift-7": () =>
+        this.editor.commands.BNSetContentType(
+          this.editor.state.selection.anchor,
+          {
+            name: "listItemContent",
+            attrs: {
+              listItemType: "unordered",
+            },
+          }
+        ),
+      "Mod-Shift-8": () =>
+        this.editor.commands.BNSetContentType(
+          this.editor.state.selection.anchor,
+          {
+            name: "listItemContent",
+            attrs: {
+              listItemType: "ordered",
+            },
+          }
+        ),
     };
   },
 });