@blocknote/core 0.7.1-alpha.0 → 0.8.1

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

@@ -1,117 +1,120 @@
-import { InputRule, mergeAttributes, Node } from "@tiptap/core";
-import styles from "../../../Block.module.css";
+import { InputRule, mergeAttributes } from "@tiptap/core";
+import { createTipTapBlock } from "../../../../api/block";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
+import styles from "../../../Block.module.css";
 
-export const NumberedListItemBlockContent = Node.create({
-  name: "numberedListItem",
-  group: "blockContent",
-  content: "inline*",
+export const NumberedListItemBlockContent =
+  createTipTapBlock<"numberedListItem">({
+    name: "numberedListItem",
+    content: "inline*",
 
-  addAttributes() {
-    return {
-      index: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("data-index"),
-        renderHTML: (attributes) => {
-          return {
-            "data-index": attributes.index,
-          };
+    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 });
-        },
-      }),
-    ];
-  },
+    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),
-    };
-  },
+    addKeyboardShortcuts() {
+      return {
+        Enter: () => handleEnter(this.editor),
+      };
+    },
 
-  addProseMirrorPlugins() {
-    return [NumberedListIndexingPlugin()];
-  },
+    addProseMirrorPlugins() {
+      return [NumberedListIndexingPlugin()];
+    },
 
-  parseHTML() {
-    return [
-      // Case for regular HTML list structure.
-      // (e.g.: when pasting from other apps)
-      {
-        tag: "li",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
+    parseHTML() {
+      return [
+        // Case for regular HTML list structure.
+        // (e.g.: when pasting from other apps)
+        {
+          tag: "li",
+          getAttrs: (element) => {
+            if (typeof element === "string") {
+              return false;
+            }
 
-          const parent = element.parentElement;
+            const parent = element.parentElement;
 
-          if (parent === null) {
-            return false;
-          }
+            if (parent === null) {
+              return false;
+            }
 
-          if (parent.tagName === "OL") {
-            return {};
-          }
+            if (parent.tagName === "OL") {
+              return {};
+            }
 
-          return false;
-        },
-        node: "numberedListItem",
-      },
-      // Case for BlockNote list structure.
-      // (e.g.: when pasting from blocknote)
-      {
-        tag: "p",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
             return false;
-          }
+          },
+          node: "numberedListItem",
+        },
+        // Case for BlockNote list structure.
+        // (e.g.: when pasting from blocknote)
+        {
+          tag: "p",
+          getAttrs: (element) => {
+            if (typeof element === "string") {
+              return false;
+            }
 
-          const parent = element.parentElement;
+            const parent = element.parentElement;
 
-          if (parent === null) {
-            return false;
-          }
+            if (parent === null) {
+              return false;
+            }
 
-          if (parent.getAttribute("data-content-type") === "numberedListItem") {
-            return {};
-          }
+            if (
+              parent.getAttribute("data-content-type") === "numberedListItem"
+            ) {
+              return {};
+            }
 
-          return false;
+            return false;
+          },
+          priority: 300,
+          node: "numberedListItem",
         },
-        priority: 300,
-        node: "numberedListItem",
-      },
-    ];
-  },
+      ];
+    },
 
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      mergeAttributes(HTMLAttributes, {
-        class: styles.blockContent,
-        "data-content-type": this.name,
-      }),
-      // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
-      // which would be quite cumbersome
-      ["p", 0],
-    ];
-  },
-});
+    renderHTML({ HTMLAttributes }) {
+      return [
+        "div",
+        mergeAttributes(HTMLAttributes, {
+          class: styles.blockContent,
+          "data-content-type": this.name,
+        }),
+        // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
+        // which would be quite cumbersome
+        ["p", { class: styles.inlineContent }, 0],
+      ];
+    },
+  });

package/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -1,9 +1,9 @@
-import { mergeAttributes, Node } from "@tiptap/core";
+import { mergeAttributes } from "@tiptap/core";
+import { createTipTapBlock } from "../../../api/block";
 import styles from "../../Block.module.css";
 
-export const ParagraphBlockContent = Node.create({
+export const ParagraphBlockContent = createTipTapBlock<"paragraph">({
   name: "paragraph",
-  group: "blockContent",
   content: "inline*",
 
   parseHTML() {
@@ -23,7 +23,7 @@ export const ParagraphBlockContent = Node.create({
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["p", 0],
+      ["p", { class: styles.inlineContent }, 0],
     ];
   },
 });

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -1,9 +1,9 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { Block } from "../Blocks/api/blockTypes";
+import { Block, BlockSchema } from "../Blocks/api/blockTypes";
 
-export type BlockSideMenuStaticParams = {
-  editor: BlockNoteEditor;
+export type BlockSideMenuStaticParams<BSchema extends BlockSchema> = {
+  editor: BlockNoteEditor<BSchema>;
 
   addBlock: () => void;
 
@@ -14,14 +14,16 @@ export type BlockSideMenuStaticParams = {
   unfreezeMenu: () => void;
 };
 
-export type BlockSideMenuDynamicParams = {
-  block: Block;
+export type BlockSideMenuDynamicParams<BSchema extends BlockSchema> = {
+  block: Block<BSchema>;
 
   referenceRect: DOMRect;
 };
 
-export type BlockSideMenu = EditorElement<BlockSideMenuDynamicParams>;
-export type BlockSideMenuFactory = ElementFactory<
-  BlockSideMenuStaticParams,
-  BlockSideMenuDynamicParams
+export type BlockSideMenu<BSchema extends BlockSchema> = EditorElement<
+  BlockSideMenuDynamicParams<BSchema>
+>;
+export type BlockSideMenuFactory<BSchema extends BlockSchema> = ElementFactory<
+  BlockSideMenuStaticParams<BSchema>,
+  BlockSideMenuDynamicParams<BSchema>
 >;

package/src/extensions/DraggableBlocks/DraggableBlocksExtension.ts

@@ -2,11 +2,12 @@ import { Editor, Extension } from "@tiptap/core";
 import { BlockSideMenuFactory } from "./BlockSideMenuFactoryTypes";
 import { createDraggableBlocksPlugin } from "./DraggableBlocksPlugin";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
 
-export type DraggableBlocksOptions = {
+export type DraggableBlocksOptions<BSchema extends BlockSchema> = {
   tiptapEditor: Editor;
-  editor: BlockNoteEditor;
-  blockSideMenuFactory: BlockSideMenuFactory;
+  editor: BlockNoteEditor<BSchema>;
+  blockSideMenuFactory: BlockSideMenuFactory<BSchema>;
 };
 
 /**
@@ -15,8 +16,8 @@ export type DraggableBlocksOptions = {
  *
  * code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
  */
-export const DraggableBlocksExtension =
-  Extension.create<DraggableBlocksOptions>({
+export const createDraggableBlocksExtension = <BSchema extends BlockSchema>() =>
+  Extension.create<DraggableBlocksOptions<BSchema>>({
     name: "DraggableBlocksExtension",
     priority: 1000, // Need to be high, in order to hide menu when typing slash
     addProseMirrorPlugins() {

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -15,6 +15,7 @@ import {
 import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
 import { MultipleNodeSelection } from "./MultipleNodeSelection";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
@@ -223,15 +224,15 @@ function dragStart(e: DragEvent, view: EditorView) {
   }
 }
 
-export type BlockMenuViewProps = {
+export type BlockMenuViewProps<BSchema extends BlockSchema> = {
   tiptapEditor: Editor;
-  editor: BlockNoteEditor;
-  blockMenuFactory: BlockSideMenuFactory;
+  editor: BlockNoteEditor<BSchema>;
+  blockMenuFactory: BlockSideMenuFactory<BSchema>;
   horizontalPosAnchoredAtRoot: boolean;
 };
 
-export class BlockMenuView {
-  editor: BlockNoteEditor;
+export class BlockMenuView<BSchema extends BlockSchema> {
+  editor: BlockNoteEditor<BSchema>;
   private ttEditor: Editor;
 
   // When true, the drag handle with be anchored at the same level as root elements
@@ -240,7 +241,7 @@ export class BlockMenuView {
 
   horizontalPosAnchor: number;
 
-  blockMenu: BlockSideMenu;
+  blockMenu: BlockSideMenu<BSchema>;
 
   hoveredBlock: HTMLElement | undefined;
 
@@ -254,7 +255,7 @@ export class BlockMenuView {
     editor,
     blockMenuFactory,
     horizontalPosAnchoredAtRoot,
-  }: BlockMenuViewProps) {
+  }: BlockMenuViewProps<BSchema>) {
     this.editor = editor;
     this.ttEditor = tiptapEditor;
     this.horizontalPosAnchoredAtRoot = horizontalPosAnchoredAtRoot;
@@ -319,7 +320,7 @@ export class BlockMenuView {
   };
 
   /**
-   * If the event is outside of the editor contents,
+   * If the event is outside the editor contents,
    * we dispatch a fake event, so that we can still drop the content
    * when dragging / dropping to the side of the editor
    */
@@ -374,11 +375,45 @@ export class BlockMenuView {
       return;
     }
 
-    // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of
-    // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box.
+    // Editor itself may have padding or other styling which affects
+    // size/position, so we get the boundingRect of the first child (i.e. the
+    // blockGroup that wraps all blocks in the editor) for more accurate side
+    // menu placement.
     const editorBoundingBox = (
       this.ttEditor.view.dom.firstChild! as HTMLElement
     ).getBoundingClientRect();
+    // We want the full area of the editor to check if the cursor is hovering
+    // above it though.
+    const editorOuterBoundingBox =
+      this.ttEditor.view.dom.getBoundingClientRect();
+    const cursorWithinEditor =
+      event.clientX >= editorOuterBoundingBox.left &&
+      event.clientX <= editorOuterBoundingBox.right &&
+      event.clientY >= editorOuterBoundingBox.top &&
+      event.clientY <= editorOuterBoundingBox.bottom;
+
+    // Doesn't update if the mouse hovers an element that's over the editor but
+    // isn't a part of it or the side menu.
+    if (
+      // Cursor is within the editor area
+      cursorWithinEditor &&
+      // An element is hovered
+      event &&
+      event.target &&
+      // Element is outside the editor
+      this.ttEditor.view.dom !== event.target &&
+      !this.ttEditor.view.dom.contains(event.target as HTMLElement) &&
+      // Element is outside the side menu
+      this.blockMenu.element !== event.target &&
+      !this.blockMenu.element?.contains(event.target as HTMLElement)
+    ) {
+      if (this.menuOpen) {
+        this.menuOpen = false;
+        this.blockMenu.hide();
+      }
+
+      return;
+    }
 
     this.horizontalPosAnchor = editorBoundingBox.x;
 
@@ -429,6 +464,14 @@ export class BlockMenuView {
   };
 
   onScroll = () => {
+    // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of
+    // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box.
+    const editorBoundingBox = (
+      this.ttEditor.view.dom.firstChild! as HTMLElement
+    ).getBoundingClientRect();
+
+    this.horizontalPosAnchor = editorBoundingBox.x;
+
     if (this.menuOpen) {
       this.blockMenu.render(this.getDynamicParams(), false);
     }
@@ -497,7 +540,7 @@ export class BlockMenuView {
     );
   }
 
-  getStaticParams(): BlockSideMenuStaticParams {
+  getStaticParams(): BlockSideMenuStaticParams<BSchema> {
     return {
       editor: this.editor,
       addBlock: () => this.addBlock(),
@@ -516,7 +559,7 @@ export class BlockMenuView {
     };
   }
 
-  getDynamicParams(): BlockSideMenuDynamicParams {
+  getDynamicParams(): BlockSideMenuDynamicParams<BSchema> {
     const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
     const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
@@ -534,8 +577,8 @@ export class BlockMenuView {
   }
 }
 
-export const createDraggableBlocksPlugin = (
-  options: DraggableBlocksOptions
+export const createDraggableBlocksPlugin = <BSchema extends BlockSchema>(
+  options: DraggableBlocksOptions<BSchema>
 ) => {
   return new Plugin({
     key: new PluginKey("DraggableBlocksPlugin"),

package/src/extensions/FormattingToolbar/FormattingToolbarExtension.ts

@@ -1,17 +1,22 @@
 import { Extension } from "@tiptap/core";
 import { PluginKey } from "prosemirror-state";
-import { BlockNoteEditor } from "../..";
+import { BlockNoteEditor, BlockSchema } from "../..";
 import { FormattingToolbarFactory } from "./FormattingToolbarFactoryTypes";
 import { createFormattingToolbarPlugin } from "./FormattingToolbarPlugin";
 
+export type FormattingToolbarOptions<BSchema extends BlockSchema> = {
+  formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
+  editor: BlockNoteEditor<BSchema>;
+};
+
 /**
  * The menu that is displayed when selecting a piece of text.
  */
-export const FormattingToolbarExtension = Extension.create<{
-  formattingToolbarFactory: FormattingToolbarFactory;
-  editor: BlockNoteEditor;
-}>({
-  name: "FormattingToolbarExtension",
+export const createFormattingToolbarExtension = <
+  BSchema extends BlockSchema
+>() =>
+  Extension.create<FormattingToolbarOptions<BSchema>>({
+    name: "FormattingToolbarExtension",
 
   addProseMirrorPlugins() {
     if (!this.options.formattingToolbarFactory || !this.options.editor) {
@@ -20,13 +25,13 @@ export const FormattingToolbarExtension = Extension.create<{
       );
     }
 
-    return [
-      createFormattingToolbarPlugin({
-        tiptapEditor: this.editor,
-        editor: this.options.editor,
-        formattingToolbarFactory: this.options.formattingToolbarFactory,
-        pluginKey: new PluginKey("FormattingToolbarPlugin"),
-      }),
-    ];
-  },
-});
+      return [
+        createFormattingToolbarPlugin({
+          tiptapEditor: this.editor,
+          editor: this.options.editor,
+          formattingToolbarFactory: this.options.formattingToolbarFactory,
+          pluginKey: new PluginKey("FormattingToolbarPlugin"),
+        }),
+      ];
+    },
+  });

package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -1,16 +1,20 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
 
-export type FormattingToolbarStaticParams = {
-  editor: BlockNoteEditor;
+export type FormattingToolbarStaticParams<BSchema extends BlockSchema> = {
+  editor: BlockNoteEditor<BSchema>;
 };
 
 export type FormattingToolbarDynamicParams = {
   referenceRect: DOMRect;
 };
 
-export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
-export type FormattingToolbarFactory = ElementFactory<
-  FormattingToolbarStaticParams,
+export type FormattingToolbar = EditorElement<
   FormattingToolbarDynamicParams
 >;
+export type FormattingToolbarFactory<BSchema extends BlockSchema> =
+  ElementFactory<
+    FormattingToolbarStaticParams<BSchema>,
+    FormattingToolbarDynamicParams
+  >;