@blocknote/core 0.9.5 → 0.10.0

package/src/{BlockNoteEditor.ts → editor/BlockNoteEditor.ts}

@@ -3,56 +3,79 @@ import { Node } from "prosemirror-model";
 // import "./blocknote.css";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
 import * as Y from "yjs";
-import { getBlockNoteExtensions } from "./BlockNoteExtensions";
 import {
   insertBlocks,
   removeBlocks,
   replaceBlocks,
   updateBlock,
-} from "./api/blockManipulation/blockManipulation";
-import {
-  HTMLToBlocks,
-  blocksToHTML,
-  blocksToMarkdown,
-  markdownToBlocks,
-} from "./api/formatConversions/formatConversions";
+} from "../api/blockManipulation/blockManipulation";
+import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter";
+import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter";
+import { getBlockInfoFromPos } from "../api/getBlockInfoFromPos";
 import {
   blockToNode,
   nodeToBlock,
-} from "./api/nodeConversions/nodeConversions";
-import { getNodeById } from "./api/util/nodeUtil";
-import styles from "./editor.module.css";
+} from "../api/nodeConversions/nodeConversions";
+import { getNodeById } from "../api/nodeUtil";
+import { HTMLToBlocks } from "../api/parsers/html/parseHTML";
+import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown";
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  defaultBlockSchema,
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+} from "../blocks/defaultBlocks";
+import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
+import { HyperlinkToolbarProsemirrorPlugin } from "../extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
+import { ImageToolbarProsemirrorPlugin } from "../extensions/ImageToolbar/ImageToolbarPlugin";
+import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
+import { BaseSlashMenuItem } from "../extensions/SlashMenu/BaseSlashMenuItem";
+import { SlashMenuProsemirrorPlugin } from "../extensions/SlashMenu/SlashMenuPlugin";
+import { getDefaultSlashMenuItems } from "../extensions/SlashMenu/defaultSlashMenuItems";
+import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin";
+import { UniqueID } from "../extensions/UniqueID/UniqueID";
 import {
   Block,
   BlockIdentifier,
   BlockNoteDOMAttributes,
   BlockSchema,
+  BlockSchemaFromSpecs,
+  BlockSchemaWithBlock,
+  BlockSpecs,
+  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
   PartialBlock,
-} from "./extensions/Blocks/api/blockTypes";
-import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
-import {
-  DefaultBlockSchema,
-  defaultBlockSchema,
-} from "./extensions/Blocks/api/defaultBlocks";
-import {
-  ColorStyle,
+  StyleSchema,
+  StyleSchemaFromSpecs,
+  StyleSpecs,
   Styles,
-  ToggledStyle,
-} from "./extensions/Blocks/api/inlineContentTypes";
-import { Selection } from "./extensions/Blocks/api/selectionTypes";
-import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
-
-import { FormattingToolbarProsemirrorPlugin } from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
-import { HyperlinkToolbarProsemirrorPlugin } from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
-import { ImageToolbarProsemirrorPlugin } from "./extensions/ImageToolbar/ImageToolbarPlugin";
-import { SideMenuProsemirrorPlugin } from "./extensions/SideMenu/SideMenuPlugin";
-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> = {
+  getBlockSchemaFromSpecs,
+  getInlineContentSchemaFromSpecs,
+  getStyleSchemaFromSpecs,
+} from "../schema";
+import { mergeCSSClasses } from "../util/browser";
+import { UnreachableCaseError } from "../util/typescript";
+
+import { getBlockNoteExtensions } from "./BlockNoteExtensions";
+import { TextCursorPosition } from "./cursorPositionTypes";
+
+import { Selection } from "./selectionTypes";
+import { transformPasted } from "./transformPasted";
+
+// CSS
+import "prosemirror-tables/style/tables.css";
+import "./Block.css";
+import "./editor.css";
+
+export type BlockNoteEditorOptions<
+  BSpecs extends BlockSpecs,
+  ISpecs extends InlineContentSpecs,
+  SSpecs extends StyleSpecs
+> = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
   /**
@@ -61,7 +84,7 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
    *
    * @default defaultSlashMenuItems from `./extensions/SlashMenu`
    */
-  slashMenuItems: BaseSlashMenuItem<any>[];
+  slashMenuItems: BaseSlashMenuItem<any, any, any>[];
 
   /**
    * The HTML element that should be used as the parent element for the editor.
@@ -78,15 +101,33 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   /**
    *  A callback function that runs when the editor is ready to be used.
    */
-  onEditorReady: (editor: BlockNoteEditor<BSchema>) => void;
+  onEditorReady: (
+    editor: BlockNoteEditor<
+      BlockSchemaFromSpecs<BSpecs>,
+      InlineContentSchemaFromSpecs<ISpecs>,
+      StyleSchemaFromSpecs<SSpecs>
+    >
+  ) => void;
   /**
    * A callback function that runs whenever the editor's contents change.
    */
-  onEditorContentChange: (editor: BlockNoteEditor<BSchema>) => void;
+  onEditorContentChange: (
+    editor: BlockNoteEditor<
+      BlockSchemaFromSpecs<BSpecs>,
+      InlineContentSchemaFromSpecs<ISpecs>,
+      StyleSchemaFromSpecs<SSpecs>
+    >
+  ) => void;
   /**
    * A callback function that runs whenever the text cursor position changes.
    */
-  onTextCursorPositionChange: (editor: BlockNoteEditor<BSchema>) => void;
+  onTextCursorPositionChange: (
+    editor: BlockNoteEditor<
+      BlockSchemaFromSpecs<BSpecs>,
+      InlineContentSchemaFromSpecs<ISpecs>,
+      StyleSchemaFromSpecs<SSpecs>
+    >
+  ) => void;
   /**
    * Locks the editor from being editable by the user if set to `false`.
    */
@@ -94,7 +135,11 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   /**
    * The content that should be in the editor when it's created, represented as an array of partial block objects.
    */
-  initialContent: PartialBlock<BSchema>[];
+  initialContent: PartialBlock<
+    BlockSchemaFromSpecs<BSpecs>,
+    InlineContentSchemaFromSpecs<ISpecs>,
+    StyleSchemaFromSpecs<SSpecs>
+  >[];
   /**
    * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
    *
@@ -105,7 +150,11 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   /**
    * A list of block types that should be available in the editor.
    */
-  blockSchema: BSchema;
+  blockSpecs: BSpecs;
+
+  styleSpecs: SSpecs;
+
+  inlineContentSpecs: ISpecs;
 
   /**
    * A custom function to handle file uploads.
@@ -140,7 +189,7 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   };
 
   // tiptap options, undocumented
-  _tiptapOptions: any;
+  _tiptapOptions: Partial<EditorOptions>;
 };
 
 const blockNoteTipTapOptions = {
@@ -149,52 +198,115 @@ const blockNoteTipTapOptions = {
   enableCoreExtensions: false,
 };
 
-export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
+export class BlockNoteEditor<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+  SSchema extends StyleSchema = DefaultStyleSchema
+> {
   public readonly _tiptapEditor: TiptapEditor & { contentComponent: any };
-  public blockCache = new WeakMap<Node, Block<BSchema>>();
-  public readonly schema: BSchema;
+  public blockCache = new WeakMap<Node, Block<any, any, any>>();
+  public readonly blockSchema: BSchema;
+  public readonly inlineContentSchema: ISchema;
+  public readonly styleSchema: SSchema;
+
+  public readonly blockImplementations: BlockSpecs;
+  public readonly inlineContentImplementations: InlineContentSpecs;
+  public readonly styleImplementations: StyleSpecs;
+
   public ready = false;
 
-  public readonly sideMenu: SideMenuProsemirrorPlugin<BSchema>;
-  public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<BSchema>;
-  public readonly slashMenu: SlashMenuProsemirrorPlugin<BSchema, any>;
-  public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<BSchema>;
-  public readonly imageToolbar: ImageToolbarProsemirrorPlugin<BSchema>;
+  public readonly sideMenu: SideMenuProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema
+  >;
+  public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin;
+  public readonly slashMenu: SlashMenuProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema,
+    any
+  >;
+  public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema
+  >;
+  public readonly imageToolbar: ImageToolbarProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema
+  >;
+  public readonly tableHandles:
+    | TableHandlesProsemirrorPlugin<
+        BSchema extends BlockSchemaWithBlock<
+          "table",
+          DefaultBlockSchema["table"]
+        >
+          ? BSchema
+          : any,
+        ISchema,
+        SSchema
+      >
+    | undefined;
 
   public readonly uploadFile: ((file: File) => Promise<string>) | undefined;
 
-  constructor(
-    private readonly options: Partial<BlockNoteEditorOptions<BSchema>> = {}
+  public static create<
+    BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
+    ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
+    SSpecs extends StyleSpecs = typeof defaultStyleSpecs
+  >(options: Partial<BlockNoteEditorOptions<BSpecs, ISpecs, SSpecs>> = {}) {
+    return new BlockNoteEditor(options) as BlockNoteEditor<
+      BlockSchemaFromSpecs<BSpecs>,
+      InlineContentSchemaFromSpecs<ISpecs>,
+      StyleSchemaFromSpecs<SSpecs>
+    >;
+  }
+
+  private constructor(
+    private readonly options: Partial<BlockNoteEditorOptions<any, any, any>>
   ) {
     // apply defaults
-    const newOptions: Omit<typeof options, "defaultStyles" | "blockSchema"> & {
-      defaultStyles: boolean;
-      blockSchema: BSchema;
-    } = {
+    const newOptions = {
       defaultStyles: true,
-      // TODO: There's a lot of annoying typing stuff to deal with here. If
-      //  BSchema is specified, then options.blockSchema should also be required.
-      //  If BSchema is not specified, then options.blockSchema should also not
-      //  be defined. Unfortunately, trying to implement these constraints seems
-      //  to be a huge pain, hence the `as any` casts.
-      blockSchema: options.blockSchema || (defaultBlockSchema as any),
+      blockSpecs: options.blockSpecs || defaultBlockSpecs,
+      styleSpecs: options.styleSpecs || defaultStyleSpecs,
+      inlineContentSpecs:
+        options.inlineContentSpecs || defaultInlineContentSpecs,
       ...options,
     };
 
+    this.blockSchema = getBlockSchemaFromSpecs(newOptions.blockSpecs);
+    this.inlineContentSchema = getInlineContentSchemaFromSpecs(
+      newOptions.inlineContentSpecs
+    );
+    this.styleSchema = getStyleSchemaFromSpecs(newOptions.styleSpecs);
+    this.blockImplementations = newOptions.blockSpecs;
+    this.inlineContentImplementations = newOptions.inlineContentSpecs;
+    this.styleImplementations = newOptions.styleSpecs;
+
     this.sideMenu = new SideMenuProsemirrorPlugin(this);
     this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
     this.slashMenu = new SlashMenuProsemirrorPlugin(
       this,
       newOptions.slashMenuItems ||
-        getDefaultSlashMenuItems(newOptions.blockSchema)
+        (getDefaultSlashMenuItems(this.blockSchema) as any)
     );
     this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
     this.imageToolbar = new ImageToolbarProsemirrorPlugin(this);
 
-    const extensions = getBlockNoteExtensions<BSchema>({
+    if (this.blockSchema.table === defaultBlockSchema.table) {
+      this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
+    }
+
+    const extensions = getBlockNoteExtensions({
       editor: this,
       domAttributes: newOptions.domAttributes || {},
-      blockSchema: newOptions.blockSchema,
+      blockSchema: this.blockSchema,
+      blockSpecs: newOptions.blockSpecs,
+      styleSpecs: newOptions.styleSpecs,
+      inlineContentSpecs: newOptions.inlineContentSpecs,
       collaboration: newOptions.collaboration,
     });
 
@@ -208,15 +320,20 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
           this.slashMenu.plugin,
           this.hyperlinkToolbar.plugin,
           this.imageToolbar.plugin,
+          ...(this.tableHandles ? [this.tableHandles.plugin] : []),
         ];
       },
     });
     extensions.push(blockNoteUIExtension);
 
-    this.schema = newOptions.blockSchema;
-
     this.uploadFile = newOptions.uploadFile;
 
+    if (newOptions.collaboration && newOptions.initialContent) {
+      console.warn(
+        "When using Collaboration, initialContent might cause conflicts, because changes should come from the collaboration provider"
+      );
+    }
+
     const initialContent =
       newOptions.initialContent ||
       (options.collaboration
@@ -227,41 +344,64 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
               id: UniqueID.options.generateID(),
             },
           ]);
+    const styleSchema = this.styleSchema;
 
-    const tiptapOptions: EditorOptions = {
+    const tiptapOptions: Partial<EditorOptions> = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
       onBeforeCreate(editor) {
-        if (!initialContent) {
-          // when using collaboration
-          return;
-        }
-
+        newOptions._tiptapOptions?.onBeforeCreate?.(editor);
         // We always set the initial content to a single paragraph block. This
         // allows us to easily replace it with the actual initial content once
         // the TipTap editor is initialized.
         const schema = editor.editor.schema;
+
+        // This is a hack to make "initial content detection" by y-prosemirror (and also tiptap isEmpty)
+        // properly detect whether or not the document has changed.
+        // We change the doc.createAndFill function to make sure the initial block id is set, instead of null
+        let cache: any;
+        const oldCreateAndFill = schema.nodes.doc.createAndFill;
+        (schema.nodes.doc as any).createAndFill = (...args: any) => {
+          if (cache) {
+            return cache;
+          }
+          const ret = oldCreateAndFill.apply(schema.nodes.doc, args);
+
+          // create a copy that we can mutate (otherwise, assigning attrs is not safe and corrupts the pm state)
+          const jsonNode = JSON.parse(JSON.stringify(ret!.toJSON()));
+          jsonNode.content[0].content[0].attrs.id = "initialBlockId";
+
+          cache = Node.fromJSON(schema, jsonNode);
+          return ret;
+        };
+
         const root = schema.node(
           "doc",
           undefined,
           schema.node("blockGroup", undefined, [
-            blockToNode({ id: "initialBlock", type: "paragraph" }, schema),
+            blockToNode(
+              { id: "initialBlockId", type: "paragraph" },
+              schema,
+              styleSchema
+            ),
           ])
         );
         editor.editor.options.content = root.toJSON();
       },
-      onCreate: () => {
+      onCreate: (editor) => {
+        newOptions._tiptapOptions?.onCreate?.(editor);
         // We need to wait for the TipTap editor to init before we can set the
         // initial content, as the schema may contain custom blocks which need
         // it to render.
         if (initialContent !== undefined) {
-          this.replaceBlocks(this.topLevelBlocks, initialContent);
+          this.replaceBlocks(this.topLevelBlocks, initialContent as any);
         }
 
         newOptions.onEditorReady?.(this);
         this.ready = true;
       },
-      onUpdate: () => {
+      onUpdate: (editor) => {
+        newOptions._tiptapOptions?.onUpdate?.(editor);
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583
         if (!this.ready) {
@@ -270,7 +410,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
         newOptions.onEditorContentChange?.(this);
       },
-      onSelectionUpdate: () => {
+      onSelectionUpdate: (editor) => {
+        newOptions._tiptapOptions?.onSelectionUpdate?.(editor);
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583
         if (!this.ready) {
@@ -279,21 +420,29 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
         newOptions.onTextCursorPositionChange?.(this);
       },
-      editable: options.editable === undefined ? true : options.editable,
+      editable:
+        options.editable !== undefined
+          ? options.editable
+          : newOptions._tiptapOptions?.editable !== undefined
+          ? newOptions._tiptapOptions?.editable
+          : true,
       extensions:
         newOptions.enableBlockNoteExtensions === false
-          ? newOptions._tiptapOptions?.extensions
+          ? newOptions._tiptapOptions?.extensions || []
           : [...(newOptions._tiptapOptions?.extensions || []), ...extensions],
       editorProps: {
+        ...newOptions._tiptapOptions?.editorProps,
         attributes: {
+          ...newOptions._tiptapOptions?.editorProps?.attributes,
           ...newOptions.domAttributes?.editor,
           class: mergeCSSClasses(
-            styles.bnEditor,
-            styles.bnRoot,
-            newOptions.defaultStyles ? styles.defaultStyles : "",
+            "bn-root",
+            "bn-editor",
+            newOptions.defaultStyles ? "bn-default-styles" : "",
             newOptions.domAttributes?.editor?.class || ""
           ),
         },
+        transformPasted,
       },
     };
 
@@ -326,11 +475,19 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Gets a snapshot of all top-level (non-nested) blocks in the editor.
    * @returns A snapshot of all top-level (non-nested) blocks in the editor.
    */
-  public get topLevelBlocks(): Block<BSchema>[] {
-    const blocks: Block<BSchema>[] = [];
+  public get topLevelBlocks(): Block<BSchema, ISchema, SSchema>[] {
+    const blocks: Block<BSchema, ISchema, SSchema>[] = [];
 
     this._tiptapEditor.state.doc.firstChild!.descendants((node) => {
-      blocks.push(nodeToBlock(node, this.schema, this.blockCache));
+      blocks.push(
+        nodeToBlock(
+          node,
+          this.blockSchema,
+          this.inlineContentSchema,
+          this.styleSchema,
+          this.blockCache
+        )
+      );
 
       return false;
     });
@@ -345,12 +502,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public getBlock(
     blockIdentifier: BlockIdentifier
-  ): Block<BSchema> | undefined {
+  ): Block<BSchema, ISchema, SSchema> | undefined {
     const id =
       typeof blockIdentifier === "string"
         ? blockIdentifier
         : blockIdentifier.id;
-    let newBlock: Block<BSchema> | undefined = undefined;
+    let newBlock: Block<BSchema, ISchema, SSchema> | undefined = undefined;
 
     this._tiptapEditor.state.doc.firstChild!.descendants((node) => {
       if (typeof newBlock !== "undefined") {
@@ -361,7 +518,13 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
         return true;
       }
 
-      newBlock = nodeToBlock(node, this.schema, this.blockCache);
+      newBlock = nodeToBlock(
+        node,
+        this.blockSchema,
+        this.inlineContentSchema,
+        this.styleSchema,
+        this.blockCache
+      );
 
       return false;
     });
@@ -375,7 +538,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param reverse Whether the blocks should be traversed in reverse order.
    */
   public forEachBlock(
-    callback: (block: Block<BSchema>) => boolean,
+    callback: (block: Block<BSchema, ISchema, SSchema>) => boolean,
     reverse = false
   ): void {
     const blocks = this.topLevelBlocks.slice();
@@ -384,7 +547,9 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       blocks.reverse();
     }
 
-    function traverseBlockArray(blockArray: Block<BSchema>[]): boolean {
+    function traverseBlockArray(
+      blockArray: Block<BSchema, ISchema, SSchema>[]
+    ): boolean {
       for (const block of blockArray) {
         if (!callback(block)) {
           return false;
@@ -425,7 +590,11 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Gets a snapshot of the current text cursor position.
    * @returns A snapshot of the current text cursor position.
    */
-  public getTextCursorPosition(): TextCursorPosition<BSchema> {
+  public getTextCursorPosition(): TextCursorPosition<
+    BSchema,
+    ISchema,
+    SSchema
+  > {
     const { node, depth, startPos, endPos } = getBlockInfoFromPos(
       this._tiptapEditor.state.doc,
       this._tiptapEditor.state.selection.from
@@ -453,15 +622,33 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     }
 
     return {
-      block: nodeToBlock(node, this.schema, this.blockCache),
+      block: nodeToBlock(
+        node,
+        this.blockSchema,
+        this.inlineContentSchema,
+        this.styleSchema,
+        this.blockCache
+      ),
       prevBlock:
         prevNode === undefined
           ? undefined
-          : nodeToBlock(prevNode, this.schema, this.blockCache),
+          : nodeToBlock(
+              prevNode,
+              this.blockSchema,
+              this.inlineContentSchema,
+              this.styleSchema,
+              this.blockCache
+            ),
       nextBlock:
         nextNode === undefined
           ? undefined
-          : nodeToBlock(nextNode, this.schema, this.blockCache),
+          : nodeToBlock(
+              nextNode,
+              this.blockSchema,
+              this.inlineContentSchema,
+              this.styleSchema,
+              this.blockCache
+            ),
     };
   }
 
@@ -483,25 +670,42 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       posBeforeNode + 2
     )!;
 
-    // For blocks without inline content
-    if (contentNode.type.spec.content === "") {
+    const contentType: "none" | "inline" | "table" =
+      this.blockSchema[contentNode.type.name]!.content;
+
+    if (contentType === "none") {
       this._tiptapEditor.commands.setNodeSelection(startPos);
       return;
     }
 
-    if (placement === "start") {
-      this._tiptapEditor.commands.setTextSelection(startPos + 1);
+    if (contentType === "inline") {
+      if (placement === "start") {
+        this._tiptapEditor.commands.setTextSelection(startPos + 1);
+      } else {
+        this._tiptapEditor.commands.setTextSelection(
+          startPos + contentNode.nodeSize - 1
+        );
+      }
+    } else if (contentType === "table") {
+      if (placement === "start") {
+        // Need to offset the position as we have to get through the `tableRow`
+        // and `tableCell` nodes to get to the `tableParagraph` node we want to
+        // set the selection in.
+        this._tiptapEditor.commands.setTextSelection(startPos + 4);
+      } else {
+        this._tiptapEditor.commands.setTextSelection(
+          startPos + contentNode.nodeSize - 4
+        );
+      }
     } else {
-      this._tiptapEditor.commands.setTextSelection(
-        startPos + contentNode.nodeSize - 1
-      );
+      throw new UnreachableCaseError(contentType);
     }
   }
 
   /**
    * Gets a snapshot of the current selection.
    */
-  public getSelection(): Selection<BSchema> | undefined {
+  public getSelection(): Selection<BSchema, ISchema, SSchema> | undefined {
     // Either the TipTap selection is empty, or it's a node selection. In either
     // case, it only spans one block, so we return undefined.
     if (
@@ -512,8 +716,10 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       return undefined;
     }
 
-    const blocks: Block<BSchema>[] = [];
+    const blocks: Block<BSchema, ISchema, SSchema>[] = [];
 
+    // TODO: This adds all child blocks to the same array. Needs to find min
+    //  depth and only add blocks at that depth.
     this._tiptapEditor.state.doc.descendants((node, pos) => {
       if (node.type.spec.group !== "blockContent") {
         return true;
@@ -529,7 +735,9 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       blocks.push(
         nodeToBlock(
           this._tiptapEditor.state.doc.resolve(pos).node(),
-          this.schema,
+          this.blockSchema,
+          this.inlineContentSchema,
+          this.styleSchema,
           this.blockCache
         )
       );
@@ -565,11 +773,11 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * `referenceBlock`. Inserts the blocks at the start of the existing block's children if "nested" is used.
    */
   public insertBlocks(
-    blocksToInsert: PartialBlock<BSchema>[],
+    blocksToInsert: PartialBlock<BSchema, ISchema, SSchema>[],
     referenceBlock: BlockIdentifier,
     placement: "before" | "after" | "nested" = "before"
   ): void {
-    insertBlocks(blocksToInsert, referenceBlock, placement, this._tiptapEditor);
+    insertBlocks(blocksToInsert, referenceBlock, placement, this);
   }
 
   /**
@@ -581,7 +789,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public updateBlock(
     blockToUpdate: BlockIdentifier,
-    update: PartialBlock<BSchema>
+    update: PartialBlock<BSchema, ISchema, SSchema>
   ) {
     updateBlock(blockToUpdate, update, this._tiptapEditor);
   }
@@ -603,32 +811,28 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public replaceBlocks(
     blocksToRemove: BlockIdentifier[],
-    blocksToInsert: PartialBlock<BSchema>[]
+    blocksToInsert: PartialBlock<BSchema, ISchema, SSchema>[]
   ) {
-    replaceBlocks(blocksToRemove, blocksToInsert, this._tiptapEditor);
+    replaceBlocks(blocksToRemove, blocksToInsert, this);
   }
 
   /**
    * Gets the active text styles at the text cursor position or at the end of the current selection if it's active.
    */
   public getActiveStyles() {
-    const styles: Styles = {};
+    const styles: Styles<SSchema> = {};
     const marks = this._tiptapEditor.state.selection.$to.marks();
 
-    const toggleStyles = new Set<ToggledStyle>([
-      "bold",
-      "italic",
-      "underline",
-      "strike",
-      "code",
-    ]);
-    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
-
     for (const mark of marks) {
-      if (toggleStyles.has(mark.type.name as ToggledStyle)) {
-        styles[mark.type.name as ToggledStyle] = true;
-      } else if (colorStyles.has(mark.type.name as ColorStyle)) {
-        styles[mark.type.name as ColorStyle] = mark.attrs.color;
+      const config = this.styleSchema[mark.type.name];
+      if (!config) {
+        console.warn("mark not found in styleschema", mark.type.name);
+        continue;
+      }
+      if (config.propSchema === "boolean") {
+        (styles as any)[config.type] = true;
+      } else {
+        (styles as any)[config.type] = mark.attrs.stringValue;
       }
     }
 
@@ -639,23 +843,20 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Adds styles to the currently selected content.
    * @param styles The styles to add.
    */
-  public addStyles(styles: Styles) {
-    const toggleStyles = new Set<ToggledStyle>([
-      "bold",
-      "italic",
-      "underline",
-      "strike",
-      "code",
-    ]);
-    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
-
+  public addStyles(styles: Styles<SSchema>) {
     this._tiptapEditor.view.focus();
 
     for (const [style, value] of Object.entries(styles)) {
-      if (toggleStyles.has(style as ToggledStyle)) {
+      const config = this.styleSchema[style];
+      if (!config) {
+        throw new Error(`style ${style} not found in styleSchema`);
+      }
+      if (config.propSchema === "boolean") {
         this._tiptapEditor.commands.setMark(style);
-      } else if (colorStyles.has(style as ColorStyle)) {
-        this._tiptapEditor.commands.setMark(style, { color: value });
+      } else if (config.propSchema === "string") {
+        this._tiptapEditor.commands.setMark(style, { stringValue: value });
+      } else {
+        throw new UnreachableCaseError(config.propSchema);
       }
     }
   }
@@ -664,7 +865,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Removes styles from the currently selected content.
    * @param styles The styles to remove.
    */
-  public removeStyles(styles: Styles) {
+  public removeStyles(styles: Styles<SSchema>) {
     this._tiptapEditor.view.focus();
 
     for (const style of Object.keys(styles)) {
@@ -676,23 +877,20 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Toggles styles on the currently selected content.
    * @param styles The styles to toggle.
    */
-  public toggleStyles(styles: Styles) {
-    const toggleStyles = new Set<ToggledStyle>([
-      "bold",
-      "italic",
-      "underline",
-      "strike",
-      "code",
-    ]);
-    const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
-
+  public toggleStyles(styles: Styles<SSchema>) {
     this._tiptapEditor.view.focus();
 
     for (const [style, value] of Object.entries(styles)) {
-      if (toggleStyles.has(style as ToggledStyle)) {
+      const config = this.styleSchema[style];
+      if (!config) {
+        throw new Error(`style ${style} not found in styleSchema`);
+      }
+      if (config.propSchema === "boolean") {
         this._tiptapEditor.commands.toggleMark(style);
-      } else if (colorStyles.has(style as ColorStyle)) {
-        this._tiptapEditor.commands.toggleMark(style, { color: value });
+      } else if (config.propSchema === "string") {
+        this._tiptapEditor.commands.toggleMark(style, { stringValue: value });
+      } else {
+        throw new UnreachableCaseError(config.propSchema);
       }
     }
   }
@@ -777,14 +975,21 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     this._tiptapEditor.commands.liftListItem("blockContainer");
   }
 
+  // TODO: Fix when implementing HTML/Markdown import & export
   /**
    * Serializes blocks into an HTML string. To better conform to HTML standards, children of blocks which aren't list
    * items are un-nested in the output HTML.
    * @param blocks An array of blocks that should be serialized into HTML.
    * @returns The blocks, serialized as an HTML string.
    */
-  public async blocksToHTML(blocks: Block<BSchema>[]): Promise<string> {
-    return blocksToHTML(blocks, this._tiptapEditor.schema);
+  public async blocksToHTMLLossy(
+    blocks = this.topLevelBlocks
+  ): Promise<string> {
+    const exporter = createExternalHTMLExporter(
+      this._tiptapEditor.schema,
+      this
+    );
+    return exporter.exportBlocks(blocks);
   }
 
   /**
@@ -794,8 +999,16 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param html The HTML string to parse blocks from.
    * @returns The blocks parsed from the HTML string.
    */
-  public async HTMLToBlocks(html: string): Promise<Block<BSchema>[]> {
-    return HTMLToBlocks(html, this.schema, this._tiptapEditor.schema);
+  public async tryParseHTMLToBlocks(
+    html: string
+  ): Promise<Block<BSchema, ISchema, SSchema>[]> {
+    return HTMLToBlocks(
+      html,
+      this.blockSchema,
+      this.inlineContentSchema,
+      this.styleSchema,
+      this._tiptapEditor.schema
+    );
   }
 
   /**
@@ -804,8 +1017,10 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param blocks An array of blocks that should be serialized into Markdown.
    * @returns The blocks, serialized as a Markdown string.
    */
-  public async blocksToMarkdown(blocks: Block<BSchema>[]): Promise<string> {
-    return blocksToMarkdown(blocks, this._tiptapEditor.schema);
+  public async blocksToMarkdownLossy(
+    blocks: Block<BSchema, ISchema, SSchema>[] = this.topLevelBlocks
+  ): Promise<string> {
+    return blocksToMarkdown(blocks, this._tiptapEditor.schema, this);
   }
 
   /**
@@ -815,8 +1030,16 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param markdown The Markdown string to parse blocks from.
    * @returns The blocks parsed from the Markdown string.
    */
-  public async markdownToBlocks(markdown: string): Promise<Block<BSchema>[]> {
-    return markdownToBlocks(markdown, this.schema, this._tiptapEditor.schema);
+  public async tryParseMarkdownToBlocks(
+    markdown: string
+  ): Promise<Block<BSchema, ISchema, SSchema>[]> {
+    return markdownToBlocks(
+      markdown,
+      this.blockSchema,
+      this.inlineContentSchema,
+      this.styleSchema,
+      this._tiptapEditor.schema
+    );
   }
 
   /**