@blocknote/core 0.1.2 → 0.2.0

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

@@ -2,7 +2,7 @@ import { mergeAttributes, Node } from "@tiptap/core";
 import styles from "./Block.module.css";
 
 export const BlockGroup = Node.create({
-  name: "blockgroup",
+  name: "blockGroup",
 
   addOptions() {
     return {
@@ -17,18 +17,18 @@ export const BlockGroup = Node.create({
       {
         tag: "div",
         getAttrs: (element) => {
-          if(typeof element === "string") {
+          if (typeof element === "string") {
             return false;
           }
 
-          if(element.getAttribute("data-node-type") === "block-group") {
+          if (element.getAttribute("data-node-type") === "block-group") {
             // Null means the element matches, but we don't want to add any attributes to the node.
             return null;
           }
 
           return false;
-        }
-      }
+        },
+      },
     ];
   },
 
@@ -37,7 +37,7 @@ export const BlockGroup = Node.create({
       "div",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
         class: styles.blockGroup,
-        "data-node-type": "block-group"
+        "data-node-type": "block-group",
       }),
       0,
     ];

package/src/extensions/Blocks/nodes/BlockTypes/HeadingBlock/HeadingContent.ts

@@ -0,0 +1,84 @@
+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",
+  group: "blockContent",
+  content: "inline*",
+
+  addAttributes() {
+    return {
+      headingLevel: {
+        default: "1",
+        // instead of "level" attributes, use "data-level"
+        parseHTML: (element) => element.getAttribute("data-heading-level"),
+        renderHTML: (attributes) => {
+          return {
+            "data-heading-level": attributes.headingLevel,
+          };
+        },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      ...["1", "2", "3"].map((level) => {
+        // Creates a heading of appropriate level when starting with "#", "##", or "###".
+        return new InputRule({
+          find: new RegExp(`^(#{${parseInt(level)}})\\s$`),
+          handler: ({ state, chain, range }) => {
+            chain()
+              .BNSetContentType(state.selection.from, {
+                name: "headingContent",
+                attrs: {
+                  headingLevel: level,
+                },
+              })
+              // Removes the "#" character(s) used to set the heading.
+              .deleteRange({ from: range.from, to: range.to });
+          },
+        });
+      }),
+    ];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "h1",
+        attrs: { headingLevel: "1" },
+        node: "block",
+      },
+      {
+        tag: "h2",
+        attrs: { headingLevel: "2" },
+        node: "block",
+      },
+      {
+        tag: "h3",
+        attrs: { headingLevel: "3" },
+        node: "block",
+      },
+    ];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    console.log(node.attrs);
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: styles.blockContent,
+        "data-content-type": this.name,
+      }),
+      ["h" + node.attrs["headingLevel"], 0],
+    ];
+  },
+});

package/src/extensions/Blocks/nodes/BlockTypes/ListItemBlock/ListItemContent.ts

@@ -0,0 +1,177 @@
+import { InputRule, mergeAttributes, Node } from "@tiptap/core";
+import { OrderedListItemIndexPlugin } from "./OrderedListItemIndexPlugin";
+import { getBlockInfoFromPos } from "../../../helpers/getBlockInfoFromPos";
+import styles from "../../Block.module.css";
+
+export type ListItemContentType = {
+  name: "listItemContent";
+  attrs?: {
+    listItemType: string;
+  };
+};
+
+export const ListItemContent = Node.create({
+  name: "listItemContent",
+  group: "blockContent",
+  content: "inline*",
+
+  addAttributes() {
+    return {
+      listItemType: {
+        default: "unordered",
+        parseHTML: (element) => element.getAttribute("data-list-item-type"),
+        renderHTML: (attributes) => {
+          return {
+            "data-list-item-type": attributes.listItemType,
+          };
+        },
+      },
+      listItemIndex: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-list-item-index"),
+        renderHTML: (attributes) => {
+          return {
+            "data-list-item-index": attributes.listItemIndex,
+          };
+        },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      // Creates an unordered list when starting with "-", "+", or "*".
+      new InputRule({
+        find: new RegExp(`^[-+*]\\s$`),
+        handler: ({ state, chain, range }) => {
+          chain()
+            .BNSetContentType(state.selection.from, {
+              name: "listItemContent",
+              attrs: {
+                listItemType: "unordered",
+              },
+            })
+            // Removes the "-", "+", or "*" character used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+      // Creates an ordered list when starting with "1.".
+      new InputRule({
+        find: new RegExp(`^1\\.\\s$`),
+        handler: ({ state, chain, range }) => {
+          chain()
+            .BNSetContentType(state.selection.from, {
+              name: "listItemContent",
+              attrs: {
+                listItemType: "ordered",
+              },
+            })
+            // Removes the "1." characters used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    const handleEnter = () => {
+      const { node, contentType } = getBlockInfoFromPos(
+        this.editor.state.doc,
+        this.editor.state.selection.from
+      )!;
+
+      const selectionEmpty =
+        this.editor.state.selection.anchor === this.editor.state.selection.head;
+
+      if (contentType.name !== "listItemContent" || !selectionEmpty) {
+        return false;
+      }
+
+      return this.editor.commands.first(({ state, chain, commands }) => [
+        () =>
+          // Changes list item block to a text block if both the content is empty.
+          commands.command(() => {
+            if (node.textContent.length === 0) {
+              return commands.BNSetContentType(state.selection.from, {
+                name: "textContent",
+              });
+            }
+
+            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;
+          }),
+      ]);
+    };
+
+    return {
+      Enter: handleEnter,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [OrderedListItemIndexPlugin()];
+  },
+
+  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.
+          // Gets type of list item (ordered/unordered) based on the block content's listItemType attribute.
+          if (parent.getAttribute("data-content-type") === "listItemContent") {
+            return { listItemType: parent.getAttribute("data-list-item-type") };
+          }
+
+          // Case for regular HTML list structure.
+          // Gets type of list item (ordered/unordered) based on parent element's tag ("ol"/"ul").
+          if (parent.tagName === "UL") {
+            return { listItemType: "unordered" };
+          }
+          if (parent.tagName === "OL") {
+            return { listItemType: "ordered" };
+          }
+
+          return false;
+        },
+        node: "block",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: styles.blockContent,
+        "data-content-type": this.name,
+      }),
+      ["li", 0],
+    ];
+  },
+});

package/src/extensions/Blocks/nodes/BlockTypes/ListItemBlock/OrderedListItemIndexPlugin.ts

@@ -0,0 +1,77 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+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 = () => {
+  return new Plugin({
+    key: PLUGIN_KEY,
+    appendTransaction: (_transactions, _oldState, newState) => {
+      const tr = newState.tr;
+      tr.setMeta("orderedListIndexing", true);
+
+      let modified = false;
+
+      // Traverses each node the doc using DFS, so blocks which are on the same nesting level will be traversed in the
+      // same order they appear. This means the index of each list item block can be calculated by incrementing the
+      // 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"
+        ) {
+          let newIndex = "1";
+          const isFirstBlockInDoc = pos === 1;
+
+          const blockInfo = getBlockInfoFromPos(tr.doc, pos + 1)!;
+          if (blockInfo === undefined) {
+            return;
+          }
+
+          // Checks if this block is the start of a new ordered list, i.e. if it's the first block in the document, the
+          // first block in its nesting level, or the previous block is not an ordered list item.
+          if (!isFirstBlockInDoc) {
+            const prevBlockInfo = getBlockInfoFromPos(tr.doc, pos - 2)!;
+            if (prevBlockInfo === undefined) {
+              return;
+            }
+
+            const isFirstBlockInNestingLevel =
+              blockInfo.depth !== prevBlockInfo.depth;
+
+            if (!isFirstBlockInNestingLevel) {
+              const prevBlockContentNode = prevBlockInfo.contentNode;
+              const prevBlockContentType = prevBlockInfo.contentType;
+
+              const isPrevBlockOrderedListItem =
+                prevBlockContentType.name === "listItemContent" &&
+                prevBlockContentNode.attrs["listItemType"] === "ordered";
+
+              if (isPrevBlockOrderedListItem) {
+                const prevBlockIndex =
+                  prevBlockContentNode.attrs["listItemIndex"];
+
+                newIndex = (parseInt(prevBlockIndex) + 1).toString();
+              }
+            }
+          }
+
+          const contentNode = blockInfo.contentNode;
+          const index = contentNode.attrs["listItemIndex"];
+
+          if (index !== newIndex) {
+            modified = true;
+
+            tr.setNodeMarkup(pos + 1, undefined, {
+              listItemType: "ordered",
+              listItemIndex: newIndex,
+            });
+          }
+        }
+      });
+
+      return modified ? tr : null;
+    },
+  });
+};

package/src/extensions/Blocks/nodes/BlockTypes/TextBlock/TextContent.ts

@@ -0,0 +1,34 @@
+import { Node } from "@tiptap/core";
+import styles from "../../Block.module.css";
+
+export type TextContentType = {
+  name: "textContent";
+  attrs?: {};
+};
+
+export const TextContent = Node.create({
+  name: "textContent",
+  group: "blockContent",
+  content: "inline*",
+
+  parseHTML() {
+    return [
+      {
+        tag: "p",
+        priority: 200,
+        node: "block",
+      },
+    ];
+  },
+
+  renderHTML() {
+    return [
+      "div",
+      {
+        class: styles.blockContent,
+        "data-content-type": this.name,
+      },
+      ["p", 0],
+    ];
+  },
+});

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -0,0 +1,20 @@
+import { EditorElement, ElementFactory } from "../../shared/EditorElement";
+
+export type BlockSideMenuStaticParams = {
+  addBlock: () => void;
+  deleteBlock: () => void;
+  blockDragStart: (event: DragEvent) => void;
+  blockDragEnd: () => void;
+  freezeMenu: () => void;
+  unfreezeMenu: () => void;
+};
+
+export type BlockSideMenuDynamicParams = {
+  blockBoundingBox: DOMRect;
+};
+
+export type BlockSideMenu = EditorElement<BlockSideMenuDynamicParams>;
+export type BlockSideMenuFactory = ElementFactory<
+  BlockSideMenuStaticParams,
+  BlockSideMenuDynamicParams
+>;

package/src/extensions/DraggableBlocks/DraggableBlocksExtension.ts

@@ -1,15 +1,33 @@
-import { Extension } from "@tiptap/core";
+import { Editor, Extension } from "@tiptap/core";
+import { BlockSideMenuFactory } from "./BlockSideMenuFactoryTypes";
 import { createDraggableBlocksPlugin } from "./DraggableBlocksPlugin";
 
+export type DraggableBlocksOptions = {
+  editor: Editor;
+  blockSideMenuFactory: BlockSideMenuFactory;
+};
+
 /**
- * This extension adds a drag handle in front of all nodes with a "data-id" attribute
+ * This extension adds a menu to the side of blocks which features various BlockNote functions such as adding and
+ * removing blocks. More importantly, it adds a drag handle which allows the user to drag and drop blocks.
  *
  * code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
  */
-export const DraggableBlocksExtension = Extension.create<{}>({
-  name: "DraggableBlocksExtension",
-  priority: 1000, // Need to be high, in order to hide draghandle when typing slash
-  addProseMirrorPlugins() {
-    return [createDraggableBlocksPlugin()];
-  },
-});
+export const DraggableBlocksExtension =
+  Extension.create<DraggableBlocksOptions>({
+    name: "DraggableBlocksExtension",
+    priority: 1000, // Need to be high, in order to hide menu when typing slash
+    addProseMirrorPlugins() {
+      if (!this.options.blockSideMenuFactory) {
+        throw new Error(
+          "UI Element factory not defined for DraggableBlocksExtension"
+        );
+      }
+      return [
+        createDraggableBlocksPlugin({
+          editor: this.editor,
+          blockSideMenuFactory: this.options.blockSideMenuFactory,
+        }),
+      ];
+    },
+  });