@blocknote/core 0.2.2 → 0.2.4-alpha.7

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,
             });
           }
         }

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

@@ -0,0 +1,95 @@
+import { InputRule, mergeAttributes, Node } from "@tiptap/core";
+import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
+import styles from "../../../Block.module.css";
+import { handleEnter } from "../ListItemKeyboardShortcuts";
+
+export const NumberedListItemBlockContent = Node.create({
+  name: "numberedListItem",
+  group: "blockContent",
+  content: "inline*",
+
+  addAttributes() {
+    return {
+      index: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-index"),
+        renderHTML: (attributes) => {
+          return {
+            "data-index": attributes.index,
+          };
+        },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      // Creates an ordered list when starting with "1.".
+      new InputRule({
+        find: new RegExp(`^1\\.\\s$`),
+        handler: ({ state, chain, range }) => {
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: "numberedListItem",
+              props: {},
+            })
+            // Removes the "1." characters used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleEnter(this.editor),
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [NumberedListIndexingPlugin()];
+  },
+
+  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") === "numberedListItem") {
+            return {};
+          }
+
+          // Case for regular HTML list structure.
+          if (parent.tagName === "OL") {
+            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/{BlockTypes/TextBlock/TextContent.ts → BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts}

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

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

@@ -3,6 +3,8 @@ import styles from "./Block.module.css";
 
 export const BlockGroup = Node.create({
   name: "blockGroup",
+  group: "blockGroup",
+  content: "blockContainer+",
 
   addOptions() {
     return {
@@ -10,8 +12,6 @@ export const BlockGroup = Node.create({
     };
   },
 
-  content: "block+",
-
   parseHTML() {
     return [
       {
@@ -21,7 +21,7 @@ export const BlockGroup = Node.create({
             return false;
           }
 
-          if (element.getAttribute("data-node-type") === "block-group") {
+          if (element.getAttribute("data-node-type") === "blockGroup") {
             // Null means the element matches, but we don't want to add any attributes to the node.
             return null;
           }
@@ -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": "blockGroup",
       }),
       0,
     ];

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -3,14 +3,22 @@ import { EditorElement, ElementFactory } from "../../shared/EditorElement";
 export type BlockSideMenuStaticParams = {
   addBlock: () => void;
   deleteBlock: () => void;
+
   blockDragStart: (event: DragEvent) => void;
   blockDragEnd: () => void;
+
   freezeMenu: () => void;
   unfreezeMenu: () => void;
+
+  setBlockTextColor: (color: string) => void;
+  setBlockBackgroundColor: (color: string) => void;
 };
 
 export type BlockSideMenuDynamicParams = {
-  blockBoundingBox: DOMRect;
+  blockTextColor: string;
+  blockBackgroundColor: string;
+
+  referenceRect: DOMRect;
 };
 
 export type BlockSideMenu = EditorElement<BlockSideMenuDynamicParams>;