@blocknote/core 0.8.5 → 0.9.2

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.8.5",
+  "version": "0.9.2",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "5bdbc6a60d4142a6a6a5d85cc8f8a74fdbecf78f"
+  "gitHead": "4d18bc8a01e841954672b9e522f20ce12f4ada10"
 }

package/src/BlockNoteEditor.ts

@@ -11,9 +11,9 @@ import {
   updateBlock,
 } from "./api/blockManipulation/blockManipulation";
 import {
-  HTMLToBlocks,
   blocksToHTML,
   blocksToMarkdown,
+  HTMLToBlocks,
   markdownToBlocks,
 } from "./api/formatConversions/formatConversions";
 import {
@@ -25,6 +25,7 @@ import styles from "./editor.module.css";
 import {
   Block,
   BlockIdentifier,
+  BlockNoteDOMAttributes,
   BlockSchema,
   PartialBlock,
 } from "./extensions/Blocks/api/blockTypes";
@@ -48,6 +49,7 @@ import { BaseSlashMenuItem } from "./extensions/SlashMenu/BaseSlashMenuItem";
 import { SlashMenuProsemirrorPlugin } from "./extensions/SlashMenu/SlashMenuPlugin";
 import { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
 import { UniqueID } from "./extensions/UniqueID/UniqueID";
+import { mergeCSSClasses } from "./shared/utils";
 
 export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
@@ -67,11 +69,11 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
    */
   parentElement: HTMLElement;
   /**
-   * An object containing attributes that should be added to the editor's HTML element.
+   * An object containing attributes that should be added to HTML elements of the editor.
    *
-   * @example { class: "my-editor-class" }
+   * @example { editor: { class: "my-editor-class" } }
    */
-  editorDOMAttributes: Record<string, string>;
+  domAttributes: Partial<BlockNoteDOMAttributes>;
   /**
    *  A callback function that runs when the editor is ready to be used.
    */
@@ -98,12 +100,6 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
    * @default true
    */
   defaultStyles: boolean;
-  /**
-   * Whether to use the light or dark theme.
-   *
-   * @default "light"
-   */
-  theme: "light" | "dark";
 
   /**
    * A list of block types that should be available in the editor.
@@ -185,6 +181,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
     const extensions = getBlockNoteExtensions<BSchema>({
       editor: this,
+      domAttributes: newOptions.domAttributes || {},
       blockSchema: newOptions.blockSchema,
       collaboration: newOptions.collaboration,
     });
@@ -266,14 +263,13 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
           : [...(newOptions._tiptapOptions?.extensions || []), ...extensions],
       editorProps: {
         attributes: {
-          "data-theme": options.theme || "light",
-          ...(newOptions.editorDOMAttributes || {}),
-          class: [
+          ...newOptions.domAttributes?.editor,
+          class: mergeCSSClasses(
             styles.bnEditor,
             styles.bnRoot,
             newOptions.defaultStyles ? styles.defaultStyles : "",
-            newOptions.editorDOMAttributes?.class || "",
-          ].join(" "),
+            newOptions.domAttributes?.editor?.class || ""
+          ),
         },
       },
     };
@@ -357,7 +353,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public forEachBlock(
     callback: (block: Block<BSchema>) => boolean,
-    reverse: boolean = false
+    reverse = false
   ): void {
     const blocks = this.topLevelBlocks.slice();
 
@@ -696,7 +692,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       return;
     }
 
-    let { from, to } = this._tiptapEditor.state.selection;
+    const { from, to } = this._tiptapEditor.state.selection;
 
     if (!text) {
       text = this._tiptapEditor.state.doc.textBetween(from, to);

package/src/BlockNoteExtensions.ts

@@ -19,8 +19,11 @@ import * as Y from "yjs";
 import styles from "./editor.module.css";
 import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
 import { BackgroundColorMark } from "./extensions/BackgroundColor/BackgroundColorMark";
-import { blocks } from "./extensions/Blocks";
-import { BlockSchema } from "./extensions/Blocks/api/blockTypes";
+import { BlockContainer, BlockGroup, Doc } from "./extensions/Blocks";
+import {
+  BlockNoteDOMAttributes,
+  BlockSchema,
+} from "./extensions/Blocks/api/blockTypes";
 import { CustomBlockSerializerExtension } from "./extensions/Blocks/api/serialization";
 import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
@@ -35,6 +38,7 @@ import UniqueID from "./extensions/UniqueID/UniqueID";
  */
 export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
   editor: BlockNoteEditor<BSchema>;
+  domAttributes: Partial<BlockNoteDOMAttributes>;
   blockSchema: BSchema;
   collaboration?: {
     fragment: Y.XmlFragment;
@@ -86,10 +90,19 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     BackgroundColorExtension,
     TextAlignmentExtension,
 
-    // custom blocks:
-    ...blocks,
+    // nodes
+    Doc,
+    BlockContainer.configure({
+      domAttributes: opts.domAttributes,
+    }),
+    BlockGroup.configure({
+      domAttributes: opts.domAttributes,
+    }),
     ...Object.values(opts.blockSchema).map((blockSpec) =>
-      blockSpec.node.configure({ editor: opts.editor })
+      blockSpec.node.configure({
+        editor: opts.editor,
+        domAttributes: opts.domAttributes,
+      })
     ),
     CustomBlockSerializerExtension,
 
@@ -105,32 +118,34 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
         fragment: opts.collaboration.fragment,
       })
     );
-    const defaultRender = (user: { color: string; name: string }) => {
-      const cursor = document.createElement("span");
+    if (opts.collaboration.provider?.awareness) {
+      const defaultRender = (user: { color: string; name: string }) => {
+        const cursor = document.createElement("span");
 
-      cursor.classList.add(styles["collaboration-cursor__caret"]);
-      cursor.setAttribute("style", `border-color: ${user.color}`);
+        cursor.classList.add(styles["collaboration-cursor__caret"]);
+        cursor.setAttribute("style", `border-color: ${user.color}`);
 
-      const label = document.createElement("span");
+        const label = document.createElement("span");
 
-      label.classList.add(styles["collaboration-cursor__label"]);
-      label.setAttribute("style", `background-color: ${user.color}`);
-      label.insertBefore(document.createTextNode(user.name), null);
+        label.classList.add(styles["collaboration-cursor__label"]);
+        label.setAttribute("style", `background-color: ${user.color}`);
+        label.insertBefore(document.createTextNode(user.name), null);
 
-      const nonbreakingSpace1 = document.createTextNode("\u2060");
-      const nonbreakingSpace2 = document.createTextNode("\u2060");
-      cursor.insertBefore(nonbreakingSpace1, null);
-      cursor.insertBefore(label, null);
-      cursor.insertBefore(nonbreakingSpace2, null);
-      return cursor;
-    };
-    ret.push(
-      CollaborationCursor.configure({
-        user: opts.collaboration.user,
-        render: opts.collaboration.renderCursor || defaultRender,
-        provider: opts.collaboration.provider,
-      })
-    );
+        const nonbreakingSpace1 = document.createTextNode("\u2060");
+        const nonbreakingSpace2 = document.createTextNode("\u2060");
+        cursor.insertBefore(nonbreakingSpace1, null);
+        cursor.insertBefore(label, null);
+        cursor.insertBefore(nonbreakingSpace2, null);
+        return cursor;
+      };
+      ret.push(
+        CollaborationCursor.configure({
+          user: opts.collaboration.user,
+          render: opts.collaboration.renderCursor || defaultRender,
+          provider: opts.collaboration.provider,
+        })
+      );
+    }
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
     ret.push(History);

package/src/api/blockManipulation/blockManipulation.test.ts

@@ -24,7 +24,7 @@ let insert: (
 ) => Block<DefaultBlockSchema>[];
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 
@@ -80,7 +80,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Inserting Blocks with Different Placements", () => {

package/src/api/blockManipulation/blockManipulation.ts

@@ -107,7 +107,7 @@ export function removeBlocks(
   });
 
   if (idsOfBlocksToRemove.size > 0) {
-    let notFoundIds = [...idsOfBlocksToRemove].join("\n");
+    const notFoundIds = [...idsOfBlocksToRemove].join("\n");
 
     throw Error(
       "Blocks with the following IDs could not be found in the editor: " +

package/src/api/formatConversions/formatConversions.test.ts

@@ -579,7 +579,7 @@ function removeInlineContentClass(html: string) {
 }
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 });
@@ -588,7 +588,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Non-Nested Block/HTML/Markdown Conversions", () => {

package/src/api/formatConversions/formatConversions.ts

@@ -4,7 +4,7 @@ import rehypeRemark from "rehype-remark";
 import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
+import remarkRehype, { defaultHandlers } from "remark-rehype";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
 import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
@@ -47,7 +47,7 @@ export async function HTMLToBlocks<BSchema extends BlockSchema>(
   htmlNode.innerHTML = html.trim();
 
   const parser = DOMParser.fromSchema(schema);
-  const parentNode = parser.parse(htmlNode);
+  const parentNode = parser.parse(htmlNode); //, { preserveWhitespace: "full" });
 
   const blocks: Block<BSchema>[] = [];
 
@@ -73,6 +73,45 @@ export async function blocksToMarkdown<BSchema extends BlockSchema>(
   return markdownString.value as string;
 }
 
+// modefied version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
+// that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
+function code(state: any, node: any) {
+  const value = node.value ? node.value + "\n" : "";
+  /** @type {Properties} */
+  const properties: any = {};
+
+  if (node.lang) {
+    // changed line
+    properties["data-language"] = node.lang;
+  }
+
+  // Create `<code>`.
+  /** @type {Element} */
+  let result: any = {
+    type: "element",
+    tagName: "code",
+    properties,
+    children: [{ type: "text", value }],
+  };
+
+  if (node.meta) {
+    result.data = { meta: node.meta };
+  }
+
+  state.patch(node, result);
+  result = state.applyData(node, result);
+
+  // Create `<pre>`.
+  result = {
+    type: "element",
+    tagName: "pre",
+    properties: {},
+    children: [result],
+  };
+  state.patch(node, result);
+  return result;
+}
+
 export async function markdownToBlocks<BSchema extends BlockSchema>(
   markdown: string,
   blockSchema: BSchema,
@@ -81,7 +120,12 @@ export async function markdownToBlocks<BSchema extends BlockSchema>(
   const htmlString = await unified()
     .use(remarkParse)
     .use(remarkGfm)
-    .use(remarkRehype)
+    .use(remarkRehype, {
+      handlers: {
+        ...(defaultHandlers as any),
+        code,
+      },
+    })
     .use(rehypeStringify)
     .process(markdown);
 

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -1,19 +1,19 @@
 import { Editor } from "@tiptap/core";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { BlockNoteEditor, PartialBlock } from "../..";
-import UniqueID from "../../extensions/UniqueID/UniqueID";
-import { blockToNode, nodeToBlock } from "./nodeConversions";
-import { partialBlockToBlockForTesting } from "./testUtil";
 import {
-  defaultBlockSchema,
   DefaultBlockSchema,
+  defaultBlockSchema,
 } from "../../extensions/Blocks/api/defaultBlocks";
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import { blockToNode, nodeToBlock } from "./nodeConversions";
+import { partialBlockToBlockForTesting } from "./testUtil";
 
 let editor: BlockNoteEditor;
 let tt: Editor;
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
   tt = editor._tiptapEditor;
@@ -24,7 +24,7 @@ afterEach(() => {
   editor = undefined as any;
   tt = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Simple ProseMirror Node Conversions", () => {

package/src/api/nodeConversions/nodeConversions.ts

@@ -16,9 +16,9 @@ import {
   Styles,
   ToggledStyle,
 } from "../../extensions/Blocks/api/inlineContentTypes";
-import { getBlockInfoFromPos } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { UnreachableCaseError } from "../../shared/utils";
+import { getBlockInfo } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 
 const toggleStyles = new Set<ToggledStyle>([
   "bold",
@@ -91,7 +91,7 @@ function styledTextArrayToNodes(
   content: string | StyledText[],
   schema: Schema
 ): Node[] {
-  let nodes: Node[] = [];
+  const nodes: Node[] = [];
 
   if (typeof content === "string") {
     nodes.push(
@@ -113,7 +113,7 @@ export function inlineContentToNodes(
   blockContent: PartialInlineContent[],
   schema: Schema
 ): Node[] {
-  let nodes: Node[] = [];
+  const nodes: Node[] = [];
 
   for (const content of blockContent) {
     if (content.type === "link") {
@@ -369,7 +369,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
     return cachedBlock;
   }
 
-  const blockInfo = getBlockInfoFromPos(node, 0)!;
+  const blockInfo = getBlockInfo(node);
 
   let id = blockInfo.id;
 
@@ -380,7 +380,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
 
   const props: any = {};
   for (const [attr, value] of Object.entries({
-    ...blockInfo.node.attrs,
+    ...node.attrs,
     ...blockInfo.contentNode.attrs,
   })) {
     const blockSpec = blockSchema[blockInfo.contentType.name];
@@ -414,7 +414,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
   const children: Block<BSchema>[] = [];
   for (let i = 0; i < blockInfo.numChildBlocks; i++) {
     children.push(
-      nodeToBlock(blockInfo.node.lastChild!.child(i), blockSchema, blockCache)
+      nodeToBlock(node.lastChild!.child(i), blockSchema, blockCache)
     );
   }
 

package/src/editor.module.css

@@ -3,7 +3,6 @@
 .bnEditor {
   outline: none;
   padding-inline: 54px;
-  border-radius: 8px;
 
   /* Define a set of colors to be used throughout the app for consistency
   see https://atlassian.design/foundations/color for more info */
@@ -55,16 +54,6 @@ Tippy popups that are appended to document.body directly
   -moz-osx-font-smoothing: grayscale;
 }
 
-[data-theme="light"] {
-  background-color: #FFFFFF;
-  color: #3F3F3F;
-}
-
-[data-theme="dark"] {
-  background-color: #1F1F1F;
-  color: #CFCFCF;
-}
-
 .dragPreview {
   position: absolute;
   top: -1000px;

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -96,7 +96,7 @@ export const PreviousBlockTypePlugin = () => {
         const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
 
         // Traverses all block containers in the new editor state.
-        for (let node of newNodes) {
+        for (const node of newNodes) {
           const oldNode = oldNodesById.get(node.node.attrs.id);
 
           const oldContentNode = oldNode?.node.firstChild;
@@ -192,7 +192,7 @@ export const PreviousBlockTypePlugin = () => {
             pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
           const decorationAttrs: any = {};
 
-          for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
+          for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
             decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
               val || "none";
           }

package/src/extensions/Blocks/api/block.ts

@@ -1,5 +1,5 @@
 import { Attribute, Node } from "@tiptap/core";
-import { BlockNoteEditor } from "../../..";
+import { BlockNoteDOMAttributes, BlockNoteEditor } from "../../..";
 import styles from "../nodes/Block.module.css";
 import {
   BlockConfig,
@@ -9,6 +9,7 @@ import {
   TipTapNode,
   TipTapNodeConfig,
 } from "./blockTypes";
+import { mergeCSSClasses } from "../../../shared/utils";
 
 export function camelToDataKebab(str: string): string {
   return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -124,17 +125,17 @@ export function createBlockSpec<
 >(
   blockConfig: BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>
 ): BlockSpec<BType, PSchema> {
-  const node = createTipTapBlock<BType>({
+  const node = createTipTapBlock<
+    BType,
+    {
+      editor: BlockNoteEditor<BSchema>;
+      domAttributes?: BlockNoteDOMAttributes;
+    }
+  >({
     name: blockConfig.type,
     content: blockConfig.containsInlineContent ? "inline*" : "",
     selectable: blockConfig.containsInlineContent,
 
-    addOptions() {
-      return {
-        editor: undefined,
-      };
-    },
-
     addAttributes() {
       return propsToAttributes(blockConfig);
     },
@@ -151,8 +152,21 @@ export function createBlockSpec<
       return ({ HTMLAttributes, getPos }) => {
         // Create blockContent element
         const blockContent = document.createElement("div");
-        // Sets blockContent class
-        blockContent.className = styles.blockContent;
+        // Add custom HTML attributes
+        const blockContentDOMAttributes =
+          this.options.domAttributes?.blockContent || {};
+        for (const [attribute, value] of Object.entries(
+          blockContentDOMAttributes
+        )) {
+          if (attribute !== "class") {
+            blockContent.setAttribute(attribute, value);
+          }
+        }
+        // Set blockContent & custom classes
+        blockContent.className = mergeCSSClasses(
+          styles.blockContent,
+          blockContentDOMAttributes.class
+        );
         // Add blockContent HTML attribute
         blockContent.setAttribute("data-content-type", blockConfig.type);
         // Add props as HTML attributes in kebab-case with "data-" prefix
@@ -186,13 +200,24 @@ export function createBlockSpec<
 
         // Render elements
         const rendered = blockConfig.render(block as any, editor);
-        // Add inlineContent class to inline content
+        // Add HTML attributes to contentDOM
         if ("contentDOM" in rendered) {
-          rendered.contentDOM.className = `${
-            rendered.contentDOM.className
-              ? rendered.contentDOM.className + " "
-              : ""
-          }${styles.inlineContent}`;
+          const inlineContentDOMAttributes =
+            this.options.domAttributes?.inlineContent || {};
+          // Add custom HTML attributes
+          for (const [attribute, value] of Object.entries(
+            inlineContentDOMAttributes
+          )) {
+            if (attribute !== "class") {
+              rendered.contentDOM.setAttribute(attribute, value);
+            }
+          }
+          // Merge existing classes with inlineContent & custom classes
+          rendered.contentDOM.className = mergeCSSClasses(
+            rendered.contentDOM.className,
+            styles.inlineContent,
+            inlineContentDOMAttributes.class
+          );
         }
         // Add elements to blockContent
         blockContent.appendChild(rendered.dom);
@@ -210,20 +235,28 @@ export function createBlockSpec<
   });
 
   return {
-    node: node,
+    node: node as TipTapNode<BType>,
     propSchema: blockConfig.propSchema,
   };
 }
 
-export function createTipTapBlock<Type extends string>(
-  config: TipTapNodeConfig<Type>
-): TipTapNode<Type> {
+export function createTipTapBlock<
+  Type extends string,
+  Options extends {
+    domAttributes?: BlockNoteDOMAttributes;
+  } = {
+    domAttributes?: BlockNoteDOMAttributes;
+  },
+  Storage = any
+>(
+  config: TipTapNodeConfig<Type, Options, Storage>
+): TipTapNode<Type, Options, Storage> {
   // Type cast is needed as Node.name is mutable, though there is basically no
   // reason to change it after creation. Alternative is to wrap Node in a new
   // class, which I don't think is worth it since we'd only be changing 1
   // attribute to be read only.
-  return Node.create({
+  return Node.create<Options, Storage>({
     ...config,
     group: "blockContent",
-  }) as TipTapNode<Type>;
+  }) as TipTapNode<Type, Options, Storage>;
 }

package/src/extensions/Blocks/api/blockTypes.ts

@@ -4,13 +4,28 @@ import { BlockNoteEditor } from "../../../BlockNoteEditor";
 import { InlineContent, PartialInlineContent } from "./inlineContentTypes";
 import { DefaultBlockSchema } from "./defaultBlocks";
 
+export type BlockNoteDOMElement =
+  | "editor"
+  | "blockContainer"
+  | "blockGroup"
+  | "blockContent"
+  | "inlineContent";
+
+export type BlockNoteDOMAttributes = Partial<{
+  [DOMElement in BlockNoteDOMElement]: Record<string, string>;
+}>;
+
 // A configuration for a TipTap node, but with stricter type constraints on the
 // "name" and "group" properties. The "name" property is now always a string
 // literal type, and the "blockGroup" property cannot be configured as it should
 // always be "blockContent". Used as the parameter in `createTipTapNode`.
 export type TipTapNodeConfig<
   Name extends string,
-  Options = any,
+  Options extends {
+    domAttributes?: BlockNoteDOMAttributes;
+  } = {
+    domAttributes?: BlockNoteDOMAttributes;
+  },
   Storage = any
 > = {
   [K in keyof NodeConfig<Options, Storage>]: K extends "name"
@@ -25,7 +40,11 @@ export type TipTapNodeConfig<
 // "blockGroup" property is now "blockContent". Returned by `createTipTapNode`.
 export type TipTapNode<
   Name extends string,
-  Options = any,
+  Options extends {
+    domAttributes?: BlockNoteDOMAttributes;
+  } = {
+    domAttributes?: BlockNoteDOMAttributes;
+  },
   Storage = any
 > = Node<Options, Storage> & {
   name: Name;
@@ -104,7 +123,7 @@ export type BlockConfig<
 // allowing for more advanced custom blocks.
 export type BlockSpec<Type extends string, PSchema extends PropSchema> = {
   readonly propSchema: PSchema;
-  node: TipTapNode<Type>;
+  node: TipTapNode<Type, any>;
 };
 
 // Utility type. For a given object block schema, ensures that the key of each