refactor: remove the strongly typed tiptap node abstraction

Author: nperez0111

packages/core/src/blocks/Table/block.ts

@@ -4,12 +4,8 @@ import { TableHeader } from "@tiptap/extension-table-header";
 import { DOMParser, Fragment, Node as PMNode, Schema } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
 import { NodeView } from "prosemirror-view";
-import {
-  BlockSpec,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-} from "../../schema/index.js";
 import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockSpecFromTiptapNode } from "../../schema/index.js";
 import { mergeCSSClasses } from "../../util/browser.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
@@ -19,7 +15,7 @@ export const tablePropSchema = {
   textColor: defaultProps.textColor,
 };
 
-export const TableNode = createStronglyTypedTiptapNode({
+export const TableNode = Node.create({
   name: "table",
   content: "tableRow+",
   group: "blockContent",
@@ -136,7 +132,7 @@ export const TableNode = createStronglyTypedTiptapNode({
   },
 });
 
-const TableParagraphNode = createStronglyTypedTiptapNode({
+const TableParagraphNode = Node.create({
   name: "tableParagraph",
   group: "tableContent",
   content: "inline*",
@@ -246,59 +242,52 @@ function parseTableContent(node: HTMLElement, schema: Schema) {
 }
 
 export const createTableBlockSpec = () =>
-  createBlockSpecFromStronglyTypedTiptapNode(TableNode, tablePropSchema, [
-    createBlockNoteExtension({
-      key: "table-extensions",
-      tiptapExtensions: [
-        TableExtension,
-        TableParagraphNode,
-        TableHeader.extend({
-          /**
-           * We allow table headers and cells to have multiple tableContent nodes because
-           * when merging cells, prosemirror-tables will concat the contents of the cells naively.
-           * This would cause that content to overflow into other cells when prosemirror tries to enforce the cell structure.
-           *
-           * So, we manually fix this up when reading back in the `nodeToBlock` and only ever place a single tableContent back into the cell.
-           */
-          content: "tableContent+",
-          parseHTML() {
-            return [
-              {
-                tag: "th",
-                // As `th` elements can contain multiple paragraphs, we need to merge their contents
-                // into a single one so that ProseMirror can parse everything correctly.
-                getContent: (node, schema) =>
-                  parseTableContent(node as HTMLElement, schema),
-              },
-            ];
-          },
-        }),
-        TableCell.extend({
-          content: "tableContent+",
-          parseHTML() {
-            return [
-              {
-                tag: "td",
-                // As `td` elements can contain multiple paragraphs, we need to merge their contents
-                // into a single one so that ProseMirror can parse everything correctly.
-                getContent: (node, schema) =>
-                  parseTableContent(node as HTMLElement, schema),
-              },
-            ];
-          },
-        }),
-        TableRowNode,
-      ],
-    }),
-  ]) as unknown as BlockSpec<
-    "table",
-    {
-      textColor: {
-        default: "default";
-      };
-    }
-  > & {
-    config: {
-      content: "table";
-    };
-  };
+  createBlockSpecFromTiptapNode(
+    { node: TableNode, type: "table", content: "table" },
+    tablePropSchema,
+    [
+      createBlockNoteExtension({
+        key: "table-extensions",
+        tiptapExtensions: [
+          TableExtension,
+          TableParagraphNode,
+          TableHeader.extend({
+            /**
+             * We allow table headers and cells to have multiple tableContent nodes because
+             * when merging cells, prosemirror-tables will concat the contents of the cells naively.
+             * This would cause that content to overflow into other cells when prosemirror tries to enforce the cell structure.
+             *
+             * So, we manually fix this up when reading back in the `nodeToBlock` and only ever place a single tableContent back into the cell.
+             */
+            content: "tableContent+",
+            parseHTML() {
+              return [
+                {
+                  tag: "th",
+                  // As `th` elements can contain multiple paragraphs, we need to merge their contents
+                  // into a single one so that ProseMirror can parse everything correctly.
+                  getContent: (node, schema) =>
+                    parseTableContent(node as HTMLElement, schema),
+                },
+              ];
+            },
+          }),
+          TableCell.extend({
+            content: "tableContent+",
+            parseHTML() {
+              return [
+                {
+                  tag: "td",
+                  // As `td` elements can contain multiple paragraphs, we need to merge their contents
+                  // into a single one so that ProseMirror can parse everything correctly.
+                  getContent: (node, schema) =>
+                    parseTableContent(node as HTMLElement, schema),
+                },
+              ];
+            },
+          }),
+          TableRowNode,
+        ],
+      }),
+    ],
+  );

packages/core/src/schema/blocks/createSpec.ts

@@ -1,17 +1,20 @@
-import { Editor } from "@tiptap/core";
+import { Editor, Node } from "@tiptap/core";
 import { DOMParser, Fragment, TagParseRule } from "@tiptap/pm/model";
 import { NodeView } from "@tiptap/pm/view";
 import { mergeParagraphs } from "../../blocks/defaultBlockHelpers.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { PropSchema } from "../propTypes.js";
 import {
-  createStronglyTypedTiptapNode,
-  createTypedBlockSpec,
   getBlockFromPos,
   propsToAttributes,
   wrapInBlockStructure,
 } from "./internal.js";
-import { BlockConfig, BlockImplementation, BlockSpec } from "./types.js";
+import {
+  BlockConfig,
+  BlockImplementation,
+  BlockSpec,
+  LooseBlockSpec,
+} from "./types.js";
 
 // Function that causes events within non-selectable blocks to be handled by the
 // browser instead of the editor.
@@ -130,13 +133,10 @@ export function addNodeAndExtensionsToSpec<
   blockImplementation: BlockImplementation<TName, TProps, TContent>,
   extensions?: BlockNoteExtension<any>[],
   priority?: number,
-) {
+): LooseBlockSpec<TName, TProps, TContent> {
   const node =
-    // Only table already has a node defined, so we just use that node instead of wrapping it from scratch
-    ((blockImplementation as any).node as ReturnType<
-      typeof createStronglyTypedTiptapNode
-    >) ||
-    createStronglyTypedTiptapNode({
+    ((blockImplementation as any).node as Node) ||
+    Node.create({
       name: blockConfig.type,
       content: (blockConfig.content === "inline"
         ? "inline*"
@@ -215,9 +215,9 @@ export function addNodeAndExtensionsToSpec<
     );
   }
 
-  return createTypedBlockSpec(
-    blockConfig,
-    {
+  return {
+    config: blockConfig,
+    implementation: {
       node,
       render(block, editor) {
         const blockContentDOMAttributes =
@@ -254,7 +254,7 @@ export function addNodeAndExtensionsToSpec<
       },
     },
     extensions,
-  );
+  };
 }
 
 /**

packages/core/src/schema/blocks/internal.ts

@@ -1,20 +1,19 @@
-import { Attribute, Attributes, Editor, Node, NodeConfig } from "@tiptap/core";
+import { Attribute, Attributes, Editor, Node } from "@tiptap/core";
 import { defaultBlockToHTML } from "../../blocks/defaultBlockHelpers.js";
 import { inheritedProps } from "../../blocks/defaultProps.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { mergeCSSClasses } from "../../util/browser.js";
 import { camelToDataKebab } from "../../util/string.js";
 import { InlineContentSchema } from "../inlineContent/types.js";
 import { PropSchema, Props } from "../propTypes.js";
 import { StyleSchema } from "../styles/types.js";
 import {
   BlockConfig,
-  BlockImplementation,
   BlockSchemaWithBlock,
-  BlockSpec,
+  LooseBlockSpec,
   SpecificBlock,
 } from "./types.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 // Function that uses the 'propSchema' of a blockConfig to create a TipTap
 // node's `addAttributes` property.
@@ -199,69 +198,29 @@ export function wrapInBlockStructure<
   };
 }
 
-// Helper type to keep track of the `name` and `content` properties after calling Node.create.
-type StronglyTypedTipTapNode<
-  Name extends string,
-  Content extends
-    | "inline*"
-    | "tableRow+"
-    | "blockContainer+"
-    | "column column+"
-    | "",
-> = Node & { name: Name; config: { content: Content } };
-
-export function createStronglyTypedTiptapNode<
-  Name extends string,
-  Content extends
-    | "inline*"
-    | "tableRow+"
-    | "blockContainer+"
-    | "column column+"
-    | "",
->(config: NodeConfig & { name: Name; content: Content }) {
-  return Node.create(config) as StronglyTypedTipTapNode<Name, Content>; // force re-typing (should be safe as it's type-checked from the config)
-}
-
-// This helper function helps to instantiate a blockspec with a
-// config and implementation that conform to the type of Config
-export function createTypedBlockSpec<T extends BlockConfig>(
-  config: T,
-  implementation: BlockImplementation<
-    T["type"],
-    T["propSchema"],
-    T["content"]
-  > & {
+export function createBlockSpecFromTiptapNode<
+  const T extends {
     node: Node;
+    type: string;
+    content: "inline" | "table" | "none";
   },
+  P extends PropSchema,
+>(
+  config: T,
+  propSchema: P,
   extensions?: BlockNoteExtension<any>[],
-): BlockSpec<T["type"], T["propSchema"], T["content"]> {
+): LooseBlockSpec<T["type"], P, T["content"]> {
   return {
-    config,
-    implementation,
-    extensions,
-  };
-}
-
-export function createBlockSpecFromStronglyTypedTiptapNode<
-  T extends Node,
-  P extends PropSchema,
->(node: T, propSchema: P, extensions?: BlockNoteExtension<any>[]) {
-  return createTypedBlockSpec(
-    {
-      type: node.name as T["name"],
-      content:
-        node.config.content === "inline*"
-          ? "inline"
-          : node.config.content === "tableRow+"
-            ? "table"
-            : "none",
+    config: {
+      type: config.type as T["type"],
+      content: config.content,
       propSchema,
     },
-    {
-      node,
-      render: defaultBlockToHTML as any,
-      toExternalHTML: defaultBlockToHTML as any,
+    implementation: {
+      node: config.node,
+      render: defaultBlockToHTML,
+      toExternalHTML: defaultBlockToHTML,
     },
     extensions,
-  );
+  };
 }

packages/core/src/schema/blocks/types.ts

@@ -1,6 +1,6 @@
 /** Define the main block types **/
 // import { Extension, Node } from "@tiptap/core";
-import type { NodeViewRendererProps } from "@tiptap/core";
+import type { Node, NodeViewRendererProps } from "@tiptap/core";
 import type { Fragment, Schema } from "prosemirror-model";
 import type { ViewMutationRecord } from "prosemirror-view";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
@@ -142,6 +142,8 @@ export type LooseBlockSpec<
           contentDOM?: HTMLElement;
         }
       | undefined;
+
+    node: Node;
   };
   extensions?: BlockNoteExtension<any>[];
 };

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -1,22 +1,22 @@
 import {
   addInlineContentAttributes,
   addInlineContentKeyboardShortcuts,
+  BlockNoteEditor,
   camelToDataKebab,
   createInternalInlineContentSpec,
-  createStronglyTypedTiptapNode,
   CustomInlineContentConfig,
   getInlineContentParseRules,
   InlineContentFromConfig,
+  InlineContentSchemaWithInlineContent,
   inlineContentToNodes,
   nodeToCustomInlineContent,
   PartialCustomInlineContentFromConfig,
   Props,
   PropSchema,
   propsToAttributes,
   StyleSchema,
-  BlockNoteEditor,
-  InlineContentSchemaWithInlineContent,
 } from "@blocknote/core";
+import { Node } from "@tiptap/core";
 import {
   NodeViewProps,
   NodeViewWrapper,
@@ -106,7 +106,7 @@ export function createReactInlineContentSpec<
   inlineContentConfig: T,
   inlineContentImplementation: ReactInlineContentImplementation<T, S>,
 ) {
-  const node = createStronglyTypedTiptapNode({
+  const node = Node.create({
     name: inlineContentConfig.type as T["type"],
     inline: true,
     group: "inline",