@blocknote/core 0.1.0-alpha.3 → 0.1.1

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

@@ -7,12 +7,13 @@ import { OrderedListPlugin } from "../OrderedListPlugin";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import { textblockTypeInputRuleSameNodeType } from "../rule";
 import styles from "./Block.module.css";
+import BlockAttributes from "../BlockAttributes";
 
 export interface IBlock {
   HTMLAttributes: Record<string, any>;
 }
 
-export type Level = 1 | 2 | 3;
+export type Level = "1" | "2" | "3";
 export type ListType = "li" | "oli";
 
 declare module "@tiptap/core" {
@@ -43,7 +44,7 @@ declare module "@tiptap/core" {
  * The main "Block node" documents consist of
  */
 export const Block = Node.create<IBlock>({
-  name: "tcblock",
+  name: "block",
   group: "block",
   addOptions() {
     return {
@@ -52,7 +53,7 @@ export const Block = Node.create<IBlock>({
   },
 
   // A block always contains content, and optionally a blockGroup which contains nested blocks
-  content: "tccontent blockgroup?",
+  content: "content blockgroup?",
 
   defining: true,
 
@@ -60,63 +61,107 @@ export const Block = Node.create<IBlock>({
     return {
       listType: {
         default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-listType": attributes.listType,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-listType"),
       },
       blockColor: {
         default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-blockColor": attributes.blockColor,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-blockColor"),
       },
       blockStyle: {
         default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-blockStyle": attributes.blockStyle,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-blockStyle"),
       },
       headingType: {
         default: undefined,
         keepOnSplit: false,
-        renderHTML: (attributes) => {
-          return {
-            "data-headingType": attributes.headingType,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-headingType"),
       },
     };
   },
 
-  // TODO: should we parse <li>, <ol>, <h1>, etc?
   parseHTML() {
     return [
+      // For parsing blocks within the editor.
       {
         tag: "div",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          const attrs: Record<string, string> = {};
+          for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
+            if (element.getAttribute(HTMLAttr)) {
+              attrs[nodeAttr] = element.getAttribute(HTMLAttr)!;
+            }
+          }
+
+          if (element.getAttribute("data-node-type") === "block") {
+            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;
+        },
       },
     ];
   },
 
   renderHTML({ HTMLAttributes }) {
+    const attrs: Record<string, string> = {};
+    for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
+      attrs[HTMLAttr] = HTMLAttributes[nodeAttr];
+    }
+
     return [
       "div",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+      mergeAttributes(attrs, {
         class: styles.blockOuter,
+        "data-node-type": "block-outer",
       }),
       [
         "div",
-        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        mergeAttributes(attrs, {
           class: styles.block,
+          "data-node-type": "block",
         }),
         0,
       ],
@@ -125,7 +170,7 @@ export const Block = Node.create<IBlock>({
 
   addInputRules() {
     return [
-      ...[1, 2, 3].map((level) => {
+      ...["1", "2", "3"].map((level) => {
         // Create a heading when starting with "#", "##", or "###""
         return textblockTypeInputRuleSameNodeType({
           find: new RegExp(`^(#{1,${level}})\\s$`),
@@ -172,7 +217,7 @@ export const Block = Node.create<IBlock>({
           const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
 
           // const node2 = tr.doc.nodeAt(nodePos);
-          if (node.type.name === "tcblock" && node.attrs["listType"]) {
+          if (node.type.name === "block" && node.attrs["listType"]) {
             if (dispatch) {
               tr.setNodeMarkup(nodePos, undefined, {
                 ...node.attrs,
@@ -203,8 +248,7 @@ export const Block = Node.create<IBlock>({
 
           // Create new block after current block
           const endOfBlock = currentBlock.pos + currentBlock.node.nodeSize;
-          let newBlock =
-            state.schema.nodes["tcblock"].createAndFill(attributes)!;
+          let newBlock = state.schema.nodes["block"].createAndFill(attributes)!;
           if (dispatch) {
             tr.insert(endOfBlock, newBlock);
             tr.setSelection(new TextSelection(tr.doc.resolve(endOfBlock + 1)));
@@ -218,7 +262,7 @@ export const Block = Node.create<IBlock>({
           const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
 
           // const node2 = tr.doc.nodeAt(nodePos);
-          if (node.type.name === "tcblock") {
+          if (node.type.name === "block") {
             if (dispatch) {
               tr.setNodeMarkup(nodePos, undefined, {
                 ...node.attrs,
@@ -268,11 +312,11 @@ export const Block = Node.create<IBlock>({
           commands.command(({ tr }) => {
             const isAtStartOfNode = tr.selection.$anchor.parentOffset === 0;
             const node = tr.selection.$anchor.node(-1);
-            if (isAtStartOfNode && node.type.name === "tcblock") {
+            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("tcblock"), // then try to remove a level of indentation
+                () => commands.liftListItem("block"), // then try to remove a level of indentation
               ]);
             }
             return false;
@@ -292,7 +336,7 @@ export const Block = Node.create<IBlock>({
               const isAtStartOfNode = tr.selection.$anchor.parentOffset === 0;
               const anchor = tr.selection.$anchor;
               const node = anchor.node(-1);
-              if (isAtStartOfNode && node.type.name === "tcblock") {
+              if (isAtStartOfNode && node.type.name === "block") {
                 if (node.childCount === 2) {
                   // BlockB has children. We want to go from this:
                   //
@@ -337,7 +381,7 @@ export const Block = Node.create<IBlock>({
     const handleEnter = () =>
       this.editor.commands.first(({ commands }) => [
         // Try to split the current block into 2 items:
-        () => commands.splitListItem("tcblock"),
+        () => 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;
@@ -348,7 +392,7 @@ export const Block = Node.create<IBlock>({
           const node = tr.selection.$anchor.node(-1);
           const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
 
-          if (node.type.name === "tcblock" && node.attrs["listType"]) {
+          if (node.type.name === "block" && node.attrs["listType"]) {
             if (dispatch) {
               tr.setNodeMarkup(nodePos, undefined, {
                 ...node.attrs,
@@ -373,15 +417,15 @@ export const Block = Node.create<IBlock>({
     return {
       Backspace: handleBackspace,
       Enter: handleEnter,
-      Tab: () => this.editor.commands.sinkListItem("tcblock"),
+      Tab: () => this.editor.commands.sinkListItem("block"),
       "Shift-Tab": () => {
-        return this.editor.commands.liftListItem("tcblock");
+        return 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-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

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

@@ -10,10 +10,26 @@ export const BlockGroup = Node.create({
     };
   },
 
-  content: "tcblock+",
+  content: "block+",
 
   parseHTML() {
-    return [{ tag: "div" }];
+    return [
+      {
+        tag: "div",
+        getAttrs: (element) => {
+          if(typeof element === "string") {
+            return false;
+          }
+
+          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;
+        }
+      }
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -21,6 +37,7 @@ export const BlockGroup = Node.create({
       "div",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
         class: styles.blockGroup,
+        "data-node-type": "block-group"
       }),
       0,
     ];

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

@@ -5,7 +5,7 @@ export interface IBlock {
 }
 
 export const ContentBlock = Node.create<IBlock>({
-  name: "tccontent",
+  name: "content",
 
   addOptions() {
     return {
@@ -32,7 +32,19 @@ export const ContentBlock = Node.create<IBlock>({
     return [
       {
         tag: "div",
-      },
+        getAttrs: (element) => {
+          if(typeof element === "string") {
+            return false;
+          }
+
+          if(element.getAttribute("data-node-type") === "block-content") {
+            // Null means the element matches, but we don't want to add any attributes to the node.
+            return null;
+          }
+
+          return false;
+        }
+      }
     ];
   },
 
@@ -41,6 +53,7 @@ export const ContentBlock = Node.create<IBlock>({
       "div",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
         class: styles.blockContent,
+        "data-node-type": "block-content"
       }),
       // TODO: The extra nested div is only needed for placeholders, different solution (without extra div) would be preferable
       // We can't use the other div because the ::before attribute on that one is already reserved for list-bullets

package/src/extensions/BubbleMenu/BubbleMenuExtension.tsx

@@ -1,9 +1,12 @@
+import { MantineProvider } from "@mantine/core";
 import { Extension } from "@tiptap/core";
 import { PluginKey } from "prosemirror-state";
 import ReactDOM from "react-dom";
+import { BlockNoteTheme } from "../../BlockNoteTheme";
+import rootStyles from "../../root.module.css";
 import { createBubbleMenuPlugin } from "./BubbleMenuPlugin";
 import { BubbleMenu } from "./component/BubbleMenu";
-import rootStyles from "../../root.module.css";
+
 /**
  * The menu that is displayed when selecting a piece of text.
  */
@@ -13,7 +16,12 @@ export const BubbleMenuExtension = Extension.create<{}>({
   addProseMirrorPlugins() {
     const element = document.createElement("div");
     element.className = rootStyles.bnRoot;
-    ReactDOM.render(<BubbleMenu editor={this.editor} />, element);
+    ReactDOM.render(
+      <MantineProvider theme={BlockNoteTheme}>
+        <BubbleMenu editor={this.editor} />
+      </MantineProvider>,
+      element
+    );
     return [
       createBubbleMenuPlugin({
         editor: this.editor,

package/src/extensions/BubbleMenu/component/BubbleMenu.tsx

@@ -4,24 +4,24 @@ import {
   RiH1,
   RiH2,
   RiH3,
+  RiIndentDecrease,
+  RiIndentIncrease,
   RiItalic,
   RiLink,
-  RiStrikethrough,
-  RiUnderline,
-  RiIndentIncrease,
-  RiIndentDecrease,
-  RiText,
   RiListOrdered,
   RiListUnordered,
+  RiStrikethrough,
+  RiText,
+  RiUnderline,
 } from "react-icons/ri";
-import { SimpleToolbarButton } from "../../../shared/components/toolbar/SimpleToolbarButton";
+import { ToolbarButton } from "../../../shared/components/toolbar/ToolbarButton";
+import { ToolbarDropdown } from "../../../shared/components/toolbar/ToolbarDropdown";
 import { Toolbar } from "../../../shared/components/toolbar/Toolbar";
 import { useEditorForceUpdate } from "../../../shared/hooks/useEditorForceUpdate";
 import { findBlock } from "../../Blocks/helpers/findBlock";
-import formatKeyboardShortcut from "../../helpers/formatKeyboardShortcut";
+import { formatKeyboardShortcut } from "../../../utils";
 import LinkToolbarButton from "./LinkToolbarButton";
-import DropdownMenu, { DropdownItemGroup } from "@atlaskit/dropdown-menu";
-import DropdownBlockItem from "./DropdownBlockItem";
+import { IconType } from "react-icons";
 
 type ListType = "li" | "oli";
 
@@ -59,127 +59,151 @@ export const BubbleMenu = (props: { editor: Editor }) => {
     currentBlockListType
   );
 
+  const blockIconMap: Record<string, IconType> = {
+    Text: RiText,
+    "Heading 1": RiH1,
+    "Heading 2": RiH2,
+    "Heading 3": RiH3,
+    "Bullet List": RiListUnordered,
+    "Numbered List": RiListOrdered,
+  };
+
   return (
     <Toolbar>
-      <DropdownMenu trigger={currentBlockName}>
-        <DropdownItemGroup>
-          <DropdownBlockItem
-            title="Text"
-            icon={RiText}
-            isSelected={currentBlockName === "Paragraph"}
-            onClick={() =>
-              props.editor.chain().focus().unsetBlockHeading().unsetList().run()
-            }
-          />
-          <DropdownBlockItem
-            title="Heading 1"
-            icon={RiH1}
-            isSelected={currentBlockName === "Heading 1"}
-            onClick={() =>
+      <ToolbarDropdown
+        text={currentBlockName}
+        icon={blockIconMap[currentBlockName]}
+        items={[
+          {
+            onClick: () => {
+              // Setting editor focus using a chained command instead causes bubble menu to flicker on click.
+              props.editor.view.focus();
+              props.editor.chain().unsetBlockHeading().unsetList().run();
+            },
+            text: "Text",
+            icon: RiText,
+            isSelected: currentBlockName === "Text",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
               props.editor
                 .chain()
-                .focus()
                 .unsetList()
-                .setBlockHeading({ level: 1 })
-                .run()
-            }
-          />
-          <DropdownBlockItem
-            title="Heading 2"
-            icon={RiH2}
-            isSelected={currentBlockName === "Heading 2"}
-            onClick={() =>
+                .setBlockHeading({ level: "1" })
+                .run();
+            },
+            text: "Heading 1",
+            icon: RiH1,
+            isSelected: currentBlockName === "Heading 1",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
               props.editor
                 .chain()
-                .focus()
                 .unsetList()
-                .setBlockHeading({ level: 2 })
-                .run()
-            }
-          />
-          <DropdownBlockItem
-            title="Heading 3"
-            icon={RiH3}
-            isSelected={currentBlockName === "Heading 3"}
-            onClick={() =>
+                .setBlockHeading({ level: "2" })
+                .run();
+            },
+            text: "Heading 2",
+            icon: RiH2,
+            isSelected: currentBlockName === "Heading 2",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
               props.editor
                 .chain()
-                .focus()
                 .unsetList()
-                .setBlockHeading({ level: 3 })
-                .run()
-            }
-          />
-          <DropdownBlockItem
-            title="Bullet List"
-            icon={RiListUnordered}
-            isSelected={currentBlockName === "Bullet List"}
-            onClick={() =>
-              props.editor
-                .chain()
-                .focus()
-                .unsetBlockHeading()
-                .setBlockList("li")
-                .run()
-            }
-          />
-          <DropdownBlockItem
-            title="Numbered List"
-            icon={RiListOrdered}
-            isSelected={currentBlockName === "Numbered List"}
-            onClick={() =>
+                .setBlockHeading({ level: "3" })
+                .run();
+            },
+            text: "Heading 3",
+            icon: RiH3,
+            isSelected: currentBlockName === "Heading 3",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
+              props.editor.chain().unsetBlockHeading().setBlockList("li").run();
+            },
+            text: "Bullet List",
+            icon: RiListUnordered,
+            isSelected: currentBlockName === "Bullet List",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
               props.editor
                 .chain()
-                .focus()
                 .unsetBlockHeading()
                 .setBlockList("oli")
-                .run()
-            }
-          />
-        </DropdownItemGroup>
-      </DropdownMenu>
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleBold().run()}
+                .run();
+            },
+            text: "Numbered List",
+            icon: RiListOrdered,
+            isSelected: currentBlockName === "Numbered List",
+          },
+        ]}
+      />
+      <ToolbarButton
+        onClick={() => {
+          // Setting editor focus using a chained command instead causes bubble menu to flicker on click.
+          props.editor.view.focus();
+          props.editor.commands.toggleBold();
+        }}
         isSelected={props.editor.isActive("bold")}
         mainTooltip="Bold"
         secondaryTooltip={formatKeyboardShortcut("Mod+B")}
         icon={RiBold}
       />
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleItalic().run()}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.toggleItalic();
+        }}
         isSelected={props.editor.isActive("italic")}
         mainTooltip="Italic"
         secondaryTooltip={formatKeyboardShortcut("Mod+I")}
         icon={RiItalic}
       />
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleUnderline().run()}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.toggleUnderline();
+        }}
         isSelected={props.editor.isActive("underline")}
         mainTooltip="Underline"
         secondaryTooltip={formatKeyboardShortcut("Mod+U")}
         icon={RiUnderline}
       />
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleStrike().run()}
-        isDisabled={props.editor.isActive("strike")}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.toggleStrike();
+        }}
+        isSelected={props.editor.isActive("strike")}
         mainTooltip="Strike-through"
         secondaryTooltip={formatKeyboardShortcut("Mod+Shift+X")}
         icon={RiStrikethrough}
       />
-      <SimpleToolbarButton
-        onClick={() =>
-          props.editor.chain().focus().sinkListItem("tcblock").run()
-        }
-        isDisabled={!props.editor.can().sinkListItem("tcblock")}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.sinkListItem("block");
+        }}
+        isDisabled={!props.editor.can().sinkListItem("block")}
         mainTooltip="Indent"
         secondaryTooltip={formatKeyboardShortcut("Tab")}
         icon={RiIndentIncrease}
       />
 
-      <SimpleToolbarButton
-        onClick={() =>
-          props.editor.chain().focus().liftListItem("tcblock").run()
-        }
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.liftListItem("block");
+        }}
         isDisabled={
           !props.editor.can().command(({ state }) => {
             const block = findBlock(state.selection);
@@ -204,13 +228,13 @@ export const BubbleMenu = (props: { editor: Editor }) => {
         editor={props.editor}
       />
       {/* <SimpleBubbleMenuButton
-        editor={props.editor}
-        onClick={() => {
-          const comment = this.props.commentStore.createComment();
-          props.editor.chain().focus().setComment(comment.id).run();
-        }}
-        styleDetails={comment}
-      /> */}
+          editor={props.editor}
+          onClick={() => {
+            const comment = this.props.commentStore.createComment();
+            props.editor.chain().focus().setComment(comment.id).run();
+          }}
+          styleDetails={comment}
+        /> */}
     </Toolbar>
   );
 };