@blocknote/core 0.2.2-alpha.0 → 0.2.3

package/src/extensions/Blocks/nodes/{Block.ts → BlockContainer.ts}

@@ -1,23 +1,17 @@
 import { mergeAttributes, Node } from "@tiptap/core";
 import { Slice } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
-import BlockAttributes from "../BlockAttributes";
+import { BlockUpdate } from "../apiTypes";
 import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import styles from "./Block.module.css";
-import { TextContentType } from "./BlockTypes/TextBlock/TextContent";
-import { HeadingContentType } from "./BlockTypes/HeadingBlock/HeadingContent";
-import { ListItemContentType } from "./BlockTypes/ListItemBlock/ListItemContent";
+import BlockAttributes from "./BlockAttributes";
 
+// TODO
 export interface IBlock {
   HTMLAttributes: Record<string, any>;
 }
 
-export type BlockContentType =
-  | TextContentType
-  | HeadingContentType
-  | ListItemContentType;
-
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     block: {
@@ -25,13 +19,13 @@ declare module "@tiptap/core" {
       BNDeleteBlock: (posInBlock: number) => ReturnType;
       BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
       BNSplitBlock: (posInBlock: number, keepType: boolean) => ReturnType;
-      BNSetContentType: (
+      BNUpdateBlock: (
         posInBlock: number,
-        type: BlockContentType
+        blockUpdate: BlockUpdate
       ) => ReturnType;
-      BNCreateBlockOrSetContentType: (
+      BNCreateOrUpdateBlock: (
         posInBlock: number,
-        type: BlockContentType
+        blockUpdate: BlockUpdate
       ) => ReturnType;
     };
   }
@@ -40,9 +34,9 @@ declare module "@tiptap/core" {
 /**
  * The main "Block node" documents consist of
  */
-export const Block = Node.create<IBlock>({
-  name: "block",
-  group: "block",
+export const BlockContainer = Node.create<IBlock>({
+  name: "blockContainer",
+  group: "blockContainer",
   // A block always contains content, and optionally a blockGroup which contains nested blocks
   content: "blockContent blockGroup?",
   // Ensures content-specific keyboard handlers trigger first.
@@ -82,7 +76,7 @@ export const Block = Node.create<IBlock>({
             }
           }
 
-          if (element.getAttribute("data-node-type") === "block") {
+          if (element.getAttribute("data-node-type") === "blockContainer") {
             return attrs;
           }
 
@@ -93,23 +87,15 @@ export const Block = Node.create<IBlock>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    const attrs: Record<string, string> = {};
-    for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
-      // Ensure falsy values are not misinterpreted.
-      if (HTMLAttributes[nodeAttr] !== undefined) {
-        attrs[HTMLAttr] = HTMLAttributes[nodeAttr];
-      }
-    }
-
     return [
       "div",
-      mergeAttributes(attrs, {
+      mergeAttributes(HTMLAttributes, {
         class: styles.blockOuter,
         "data-node-type": "block-outer",
       }),
       [
         "div",
-        mergeAttributes(attrs, {
+        mergeAttributes(HTMLAttributes, {
           // TODO: maybe remove html attributes from inner block
           class: styles.block,
           "data-node-type": this.name,
@@ -125,7 +111,8 @@ export const Block = Node.create<IBlock>({
       BNCreateBlock:
         (pos) =>
         ({ state, dispatch }) => {
-          const newBlock = state.schema.nodes["block"].createAndFill()!;
+          const newBlock =
+            state.schema.nodes["blockContainer"].createAndFill()!;
 
           if (dispatch) {
             state.tr.insert(pos, newBlock);
@@ -176,10 +163,10 @@ export const Block = Node.create<IBlock>({
         ({ state, dispatch }) => {
           const nextNodeIsBlock =
             state.doc.resolve(posBetweenBlocks + 1).node().type.name ===
-            "block";
+            "blockContainer";
           const prevNodeIsBlock =
             state.doc.resolve(posBetweenBlocks - 1).node().type.name ===
-            "block";
+            "blockContainer";
 
           if (!nextNodeIsBlock || !prevNodeIsBlock) {
             return false;
@@ -252,7 +239,8 @@ export const Block = Node.create<IBlock>({
           // Only text content is transferred to the new block.
           const secondBlockContent = state.doc.textBetween(posInBlock, endPos);
 
-          const newBlock = state.schema.nodes["block"].createAndFill()!;
+          const newBlock =
+            state.schema.nodes["blockContainer"].createAndFill()!;
           const newBlockContentPos = newBlockInsertionPos + 2;
 
           if (dispatch) {
@@ -283,22 +271,25 @@ export const Block = Node.create<IBlock>({
           return true;
         },
       // Changes the content of a block at a given position to a given type.
-      BNSetContentType:
-        (posInBlock, type) =>
+      BNUpdateBlock:
+        (posInBlock, blockUpdate) =>
         ({ state, dispatch }) => {
           const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
           if (blockInfo === undefined) {
             return false;
           }
 
-          const { startPos, contentNode } = blockInfo;
+          const { node, startPos, contentNode } = blockInfo;
 
           if (dispatch) {
             state.tr.setBlockType(
               startPos + 1,
               startPos + contentNode.nodeSize + 1,
-              state.schema.node(type.name).type,
-              type.attrs
+              state.schema.node(blockUpdate.type).type,
+              {
+                ...node.attrs,
+                ...blockUpdate.props,
+              }
             );
           }
 
@@ -306,8 +297,8 @@ export const Block = Node.create<IBlock>({
         },
       // 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) =>
+      BNCreateOrUpdateBlock:
+        (posInBlock, blockUpdate) =>
         ({ state, chain }) => {
           const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
           if (blockInfo === undefined) {
@@ -320,7 +311,7 @@ export const Block = Node.create<IBlock>({
             const oldBlockContentPos = startPos + 1;
 
             return chain()
-              .BNSetContentType(posInBlock, type)
+              .BNUpdateBlock(posInBlock, blockUpdate)
               .setTextSelection(oldBlockContentPos)
               .run();
           } else {
@@ -329,7 +320,7 @@ export const Block = Node.create<IBlock>({
 
             return chain()
               .BNCreateBlock(newBlockInsertionPos)
-              .BNSetContentType(newBlockContentPos, type)
+              .BNUpdateBlock(newBlockContentPos, blockUpdate)
               .setTextSelection(newBlockContentPos)
               .run();
           }
@@ -349,7 +340,7 @@ export const Block = Node.create<IBlock>({
         () => commands.deleteSelection(),
         // Undoes an input rule if one was triggered in the last editor state change.
         () => commands.undoInputRule(),
-        // Changes block type to a text block if it's not already, while the selection is at the start of the block.
+        // Reverts block content type to a paragraph if the selection is at the start of the block.
         () =>
           commands.command(({ state }) => {
             const { contentType } = getBlockInfoFromPos(
@@ -359,11 +350,12 @@ export const Block = Node.create<IBlock>({
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;
-            const isTextBlock = contentType.name === "textContent";
+            const isParagraph = contentType.name === "paragraph";
 
-            if (selectionAtBlockStart && !isTextBlock) {
-              return commands.BNSetContentType(state.selection.from, {
-                name: "textContent",
+            if (selectionAtBlockStart && !isParagraph) {
+              return commands.BNUpdateBlock(state.selection.from, {
+                type: "paragraph",
+                props: {},
               });
             }
 
@@ -376,7 +368,7 @@ export const Block = Node.create<IBlock>({
               state.selection.$anchor.parentOffset === 0;
 
             if (selectionAtBlockStart) {
-              return commands.liftListItem("block");
+              return commands.liftListItem("blockContainer");
             }
 
             return false;
@@ -435,7 +427,7 @@ export const Block = Node.create<IBlock>({
               blockEmpty &&
               blockIndented
             ) {
-              return commands.liftListItem("block");
+              return commands.liftListItem("blockContainer");
             }
 
             return false;
@@ -496,62 +488,51 @@ export const Block = Node.create<IBlock>({
     return {
       Backspace: handleBackspace,
       Enter: handleEnter,
-      Tab: () => this.editor.commands.sinkListItem("block"),
-      "Shift-Tab": () => this.editor.commands.liftListItem("block"),
+      // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
+      // editor since the browser will try to use tab for keyboard navigation.
+      Tab: () => {
+        this.editor.commands.sinkListItem("blockContainer");
+        return true;
+      },
+      "Shift-Tab": () => {
+        this.editor.commands.liftListItem("blockContainer");
+        return true;
+      },
       "Mod-Alt-0": () =>
         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",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: "1",
+          },
+        }),
       "Mod-Alt-2": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "headingContent",
-            attrs: {
-              headingLevel: "2",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: "2",
+          },
+        }),
       "Mod-Alt-3": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "headingContent",
-            attrs: {
-              headingLevel: "3",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: "3",
+          },
+        }),
       "Mod-Shift-7": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "listItemContent",
-            attrs: {
-              listItemType: "unordered",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "bulletListItem",
+          props: {},
+        }),
       "Mod-Shift-8": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "listItemContent",
-            attrs: {
-              listItemType: "ordered",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "numberedListItem",
+          props: {},
+        }),
     };
   },
 });

package/src/extensions/Blocks/nodes/{BlockTypes/HeadingBlock/HeadingContent.ts → BlockContent/HeadingBlockContent/HeadingBlockContent.ts}

@@ -1,27 +1,20 @@
 import { InputRule, mergeAttributes, Node } from "@tiptap/core";
 import styles from "../../Block.module.css";
 
-export type HeadingContentType = {
-  name: "headingContent";
-  attrs?: {
-    headingLevel: string;
-  };
-};
-
-export const HeadingContent = Node.create({
-  name: "headingContent",
+export const HeadingBlockContent = Node.create({
+  name: "heading",
   group: "blockContent",
   content: "inline*",
 
   addAttributes() {
     return {
-      headingLevel: {
+      level: {
         default: "1",
         // instead of "level" attributes, use "data-level"
-        parseHTML: (element) => element.getAttribute("data-heading-level"),
+        parseHTML: (element) => element.getAttribute("data-level"),
         renderHTML: (attributes) => {
           return {
-            "data-heading-level": attributes.headingLevel,
+            "data-level": attributes.level,
           };
         },
       },
@@ -36,10 +29,10 @@ export const HeadingContent = Node.create({
           find: new RegExp(`^(#{${parseInt(level)}})\\s$`),
           handler: ({ state, chain, range }) => {
             chain()
-              .BNSetContentType(state.selection.from, {
-                name: "headingContent",
-                attrs: {
-                  headingLevel: level,
+              .BNUpdateBlock(state.selection.from, {
+                type: "heading",
+                props: {
+                  level: level as "1" | "2" | "3",
                 },
               })
               // Removes the "#" character(s) used to set the heading.
@@ -54,31 +47,30 @@ export const HeadingContent = Node.create({
     return [
       {
         tag: "h1",
-        attrs: { headingLevel: "1" },
-        node: "block",
+        attrs: { level: "1" },
+        node: "blockContainer",
       },
       {
         tag: "h2",
-        attrs: { headingLevel: "2" },
-        node: "block",
+        attrs: { level: "2" },
+        node: "blockContainer",
       },
       {
         tag: "h3",
-        attrs: { headingLevel: "3" },
-        node: "block",
+        attrs: { level: "3" },
+        node: "blockContainer",
       },
     ];
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    console.log(node.attrs);
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["h" + node.attrs["headingLevel"], 0],
+      ["h" + node.attrs.level, 0],
     ];
   },
 });

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -0,0 +1,76 @@
+import { InputRule, mergeAttributes, Node } from "@tiptap/core";
+import styles from "../../../Block.module.css";
+import { handleEnter } from "../ListItemKeyboardShortcuts";
+
+export const BulletListItemBlockContent = Node.create({
+  name: "bulletListItem",
+  group: "blockContent",
+  content: "inline*",
+
+  addInputRules() {
+    return [
+      // Creates an unordered list when starting with "-", "+", or "*".
+      new InputRule({
+        find: new RegExp(`^[-+*]\\s$`),
+        handler: ({ state, chain, range }) => {
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: "bulletListItem",
+              props: {},
+            })
+            // Removes the "-", "+", or "*" character used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleEnter(this.editor),
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "li",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          const parent = element.parentElement;
+
+          if (parent === null) {
+            return false;
+          }
+
+          // Case for BlockNote list structure.
+          if (parent.getAttribute("data-content-type") === "bulletListItem") {
+            return {};
+          }
+
+          // Case for regular HTML list structure.
+          if (parent.tagName === "UL") {
+            return {};
+          }
+
+          return false;
+        },
+        node: "blockContainer",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: styles.blockContent,
+        "data-content-type": this.name,
+      }),
+      ["li", 0],
+    ];
+  },
+});

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -0,0 +1,47 @@
+import { Editor } from "@tiptap/core";
+import { getBlockInfoFromPos } from "../../../helpers/getBlockInfoFromPos";
+
+export const handleEnter = (editor: Editor) => {
+  const { node, contentType } = getBlockInfoFromPos(
+    editor.state.doc,
+    editor.state.selection.from
+  )!;
+
+  const selectionEmpty =
+    editor.state.selection.anchor === editor.state.selection.head;
+
+  if (!contentType.name.endsWith("ListItem") || !selectionEmpty) {
+    return false;
+  }
+
+  return editor.commands.first(({ state, chain, commands }) => [
+    () =>
+      // Changes list item block to a text block if the content is empty.
+      commands.command(() => {
+        if (node.textContent.length === 0) {
+          return commands.BNUpdateBlock(state.selection.from, {
+            type: "paragraph",
+            props: {},
+          });
+        }
+
+        return false;
+      }),
+
+    () =>
+      // Splits the current block, moving content inside that's after the cursor to a new block of the same type
+      // below.
+      commands.command(() => {
+        if (node.textContent.length > 0) {
+          chain()
+            .deleteSelection()
+            .BNSplitBlock(state.selection.from, true)
+            .run();
+
+          return true;
+        }
+
+        return false;
+      }),
+  ]);
+};

package/src/extensions/Blocks/nodes/{BlockTypes/ListItemBlock/OrderedListItemIndexPlugin.ts → BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts}

@@ -1,14 +1,14 @@
 import { Plugin, PluginKey } from "prosemirror-state";
-import { getBlockInfoFromPos } from "../../../helpers/getBlockInfoFromPos";
+import { getBlockInfoFromPos } from "../../../../helpers/getBlockInfoFromPos";
 
 // ProseMirror Plugin which automatically assigns indices to ordered list items per nesting level.
-const PLUGIN_KEY = new PluginKey(`ordered-list-item-index`);
-export const OrderedListItemIndexPlugin = () => {
+const PLUGIN_KEY = new PluginKey(`numbered-list-indexing`);
+export const NumberedListIndexingPlugin = () => {
   return new Plugin({
     key: PLUGIN_KEY,
     appendTransaction: (_transactions, _oldState, newState) => {
       const tr = newState.tr;
-      tr.setMeta("orderedListIndexing", true);
+      tr.setMeta("numberedListIndexing", true);
 
       let modified = false;
 
@@ -17,9 +17,8 @@ export const OrderedListItemIndexPlugin = () => {
       // index of the previous list item block.
       newState.doc.descendants((node, pos) => {
         if (
-          node.type.name === "block" &&
-          node.firstChild!.type.name === "listItemContent" &&
-          node.firstChild!.attrs["listItemType"] === "ordered"
+          node.type.name === "blockContainer" &&
+          node.firstChild!.type.name === "numberedListItem"
         ) {
           let newIndex = "1";
           const isFirstBlockInDoc = pos === 1;
@@ -45,12 +44,10 @@ export const OrderedListItemIndexPlugin = () => {
               const prevBlockContentType = prevBlockInfo.contentType;
 
               const isPrevBlockOrderedListItem =
-                prevBlockContentType.name === "listItemContent" &&
-                prevBlockContentNode.attrs["listItemType"] === "ordered";
+                prevBlockContentType.name === "numberedListItem";
 
               if (isPrevBlockOrderedListItem) {
-                const prevBlockIndex =
-                  prevBlockContentNode.attrs["listItemIndex"];
+                const prevBlockIndex = prevBlockContentNode.attrs["index"];
 
                 newIndex = (parseInt(prevBlockIndex) + 1).toString();
               }
@@ -58,14 +55,13 @@ export const OrderedListItemIndexPlugin = () => {
           }
 
           const contentNode = blockInfo.contentNode;
-          const index = contentNode.attrs["listItemIndex"];
+          const index = contentNode.attrs["index"];
 
           if (index !== newIndex) {
             modified = true;
 
             tr.setNodeMarkup(pos + 1, undefined, {
-              listItemType: "ordered",
-              listItemIndex: newIndex,
+              index: newIndex,
             });
           }
         }