@blocknote/core 0.7.0 → 0.8.0

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;
@@ -497,7 +498,7 @@ export class BlockMenuView {
     );
   }
 
-  getStaticParams(): BlockSideMenuStaticParams {
+  getStaticParams(): BlockSideMenuStaticParams<BSchema> {
     return {
       editor: this.editor,
       addBlock: () => this.addBlock(),
@@ -516,7 +517,7 @@ export class BlockMenuView {
     };
   }
 
-  getDynamicParams(): BlockSideMenuDynamicParams {
+  getDynamicParams(): BlockSideMenuDynamicParams<BSchema> {
     const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
     const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
@@ -534,8 +535,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
+  >;

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -6,7 +6,7 @@ import {
 } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { BlockNoteEditor } from "../..";
+import { BlockNoteEditor, BlockSchema } from "../..";
 import {
   FormattingToolbar,
   FormattingToolbarDynamicParams,
@@ -16,29 +16,20 @@ import {
 
 // Same as TipTap bubblemenu plugin, but with these changes:
 // https://github.com/ueberdosis/tiptap/pull/2596/files
-export interface FormattingToolbarPluginProps {
+export interface FormattingToolbarPluginProps<BSchema extends BlockSchema> {
   pluginKey: PluginKey;
   tiptapEditor: Editor;
-  editor: BlockNoteEditor;
-  formattingToolbarFactory: FormattingToolbarFactory;
-  shouldShow?:
-    | ((props: {
-        editor: BlockNoteEditor;
-        view: EditorView;
-        state: EditorState;
-        oldState?: EditorState;
-        from: number;
-        to: number;
-      }) => boolean)
-    | null;
+  editor: BlockNoteEditor<BSchema>;
+  formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
 }
 
-export type FormattingToolbarViewProps = FormattingToolbarPluginProps & {
-  view: EditorView;
-};
+export type FormattingToolbarViewProps<BSchema extends BlockSchema> =
+  FormattingToolbarPluginProps<BSchema> & {
+    view: EditorView;
+  };
 
-export class FormattingToolbarView {
-  public editor: BlockNoteEditor;
+export class FormattingToolbarView<BSchema extends BlockSchema> {
+  public editor: BlockNoteEditor<BSchema>;
   private ttEditor: Editor;
 
   public view: EditorView;
@@ -53,44 +44,43 @@ export class FormattingToolbarView {
 
   public prevWasEditable: boolean | null = null;
 
-  public shouldShow: Exclude<FormattingToolbarPluginProps["shouldShow"], null> =
-    ({ view, state, from, to }) => {
-      const { doc, selection } = state;
-      const { empty } = selection;
+  public shouldShow: (props: {
+    view: EditorView;
+    state: EditorState;
+    from: number;
+    to: number;
+  }) => boolean = ({ view, state, from, to }) => {
+    const { doc, selection } = state;
+    const { empty } = selection;
 
-      // Sometime check for `empty` is not enough.
-      // Doubleclick an empty paragraph returns a node size of 2.
-      // So we check also for an empty text size.
-      const isEmptyTextBlock =
-        !doc.textBetween(from, to).length && isTextSelection(state.selection);
+    // Sometime check for `empty` is not enough.
+    // Doubleclick an empty paragraph returns a node size of 2.
+    // So we check also for an empty text size.
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
-      return !(!view.hasFocus() || empty || isEmptyTextBlock);
-    };
+    return !(!view.hasFocus() || empty || isEmptyTextBlock);
+  };
 
   constructor({
     editor,
     tiptapEditor,
     formattingToolbarFactory,
     view,
-    shouldShow,
-  }: FormattingToolbarViewProps) {
+  }: FormattingToolbarViewProps<BSchema>) {
     this.editor = editor;
     this.ttEditor = tiptapEditor;
     this.view = view;
 
     this.formattingToolbar = formattingToolbarFactory(this.getStaticParams());
 
-    if (shouldShow) {
-      this.shouldShow = shouldShow;
-    }
-
     this.view.dom.addEventListener("mousedown", this.viewMousedownHandler);
     this.view.dom.addEventListener("mouseup", this.viewMouseupHandler);
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
 
     this.ttEditor.on("focus", this.focusHandler);
     this.ttEditor.on("blur", this.blurHandler);
-    
+
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -163,10 +153,8 @@ export class FormattingToolbarView {
     const to = Math.max(...ranges.map((range) => range.$to.pos));
 
     const shouldShow = this.shouldShow?.({
-      editor: this.editor,
       view,
       state,
-      oldState,
       from,
       to,
     });
@@ -250,7 +238,7 @@ export class FormattingToolbarView {
     return posToDOMRect(this.ttEditor.view, from, to);
   }
 
-  getStaticParams(): FormattingToolbarStaticParams {
+  getStaticParams(): FormattingToolbarStaticParams<BSchema> {
     return {
       editor: this.editor,
     };
@@ -263,8 +251,8 @@ export class FormattingToolbarView {
   }
 }
 
-export const createFormattingToolbarPlugin = (
-  options: FormattingToolbarPluginProps
+export const createFormattingToolbarPlugin = <BSchema extends BlockSchema>(
+  options: FormattingToolbarPluginProps<BSchema>
 ) => {
   return new Plugin({
     key: new PluginKey("FormattingToolbarPlugin"),

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -72,6 +72,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const classes = [this.options.emptyNodeClass];
 
+                // TODO: Doesn't work?
                 if (this.editor.isEmpty) {
                   classes.push(this.options.emptyEditorClass);
                 }

package/src/extensions/SlashMenu/BaseSlashMenuItem.ts

@@ -1,12 +1,15 @@
 import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
 
 /**
  * A class that defines a slash command (/<command>).
  *
  * (Not to be confused with ProseMirror commands nor TipTap commands.)
  */
-export class BaseSlashMenuItem extends SuggestionItem {
+export class BaseSlashMenuItem<
+  BSchema extends BlockSchema
+> extends SuggestionItem {
   /**
    * Constructs a new slash-command.
    *
@@ -16,7 +19,7 @@ export class BaseSlashMenuItem extends SuggestionItem {
    */
   constructor(
     public readonly name: string,
-    public readonly execute: (editor: BlockNoteEditor) => void,
+    public readonly execute: (editor: BlockNoteEditor<BSchema>) => void,
     public readonly aliases: string[] = []
   ) {
     super(name, (query: string): boolean => {