@blocknote/core 0.20.0 → 0.22.0

package/src/editor/Block.css

@@ -114,13 +114,13 @@ NESTED BLOCKS
 }
 
 /* HEADINGS*/
-[data-level="1"] {
+[data-content-type="heading"] {
   --level: 3em;
 }
-[data-level="2"] {
+[data-content-type="heading"][data-level="2"] {
   --level: 2em;
 }
-[data-level="3"] {
+[data-content-type="heading"][data-level="3"] {
   --level: 1.3em;
 }
 
@@ -310,85 +310,66 @@ NESTED BLOCKS
 
 /* FILES */
 
-/* Add block button & default preview */
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
-  width: 100%;
-}
-
+/* Element that wraps content for all file blocks */
 [data-file-block] .bn-file-block-content-wrapper {
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  justify-content: stretch;
   user-select: none;
 }
 
+/* Add block button & default element (name with icon) */
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-name-with-icon) {
+  width: 100%;
+}
+
 [data-file-block] .bn-add-file-button {
   align-items: center;
   background-color: rgb(242, 241, 238);
   border-radius: 4px;
   color: rgb(125, 121, 122);
   display: flex;
-  flex-direction: row;
   gap: 10px;
   padding: 12px;
-  width: 100%;
 }
 
-.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
+.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
+[data-file-block] .bn-file-name-with-icon:hover,
+.ProseMirror-selectednode .bn-file-name-with-icon{
   background-color: rgb(225, 225, 225);
 }
 
-[data-file-block] .bn-add-file-button-icon {
+[data-file-block] .bn-add-file-button-icon,
+[data-file-block] .bn-file-icon {
   width: 24px;
   height: 24px;
 }
 
-[data-file-block] .bn-add-file-button .bn-add-file-button-text {
+[data-file-block] .bn-add-file-button-text {
   font-size: 0.9rem;
 }
 
-[data-file-block] .bn-file-and-caption-wrapper {
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-}
-
-[data-file-block] .bn-file-default-preview {
-  align-items: center;
+[data-file-block] .bn-file-name-with-icon {
   border-radius: 4px;
   display: flex;
-  flex-direction: row;
   gap: 4px;
   padding: 4px;
-  width: 100%;
-}
-
-[data-file-block] .bn-file-default-preview:hover,
-.ProseMirror-selectednode .bn-file-default-preview {
-  background-color: rgb(225, 225, 225);
-}
-
-[data-file-block] .bn-file-default-preview-icon {
-  width: 24px;
-  height: 24px;
 }
 
-[data-file-block] .bn-visual-media-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-  width: fit-content;
+/* File captions */
+[data-file-block] .bn-file-caption {
+  font-size: 0.8em;
+  padding-block: 4px;
+  word-break: break-word;
 }
 
-[data-file-block] .bn-visual-media {
-  border-radius: 4px;
-  max-width: 100%;
+[data-file-block] .bn-file-caption:empty {
+  padding-block: 0;
 }
 
-[data-file-block] .bn-visual-media-resize-handle {
+/* Resize handles */
+[data-file-block] .bn-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;
@@ -398,19 +379,22 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="audio"] > .bn-file-block-content-wrapper,
-.bn-audio {
-  width: 100%;
+/* Visual media file blocks, e.g. images & videos */
+[data-file-block] .bn-visual-media-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-[data-file-block] .bn-file-caption {
-  font-size: 0.8em;
-  padding-block: 4px;
-  word-break: break-word;
+[data-file-block] .bn-visual-media {
+  border-radius: 4px;
+  width: 100%;
 }
 
-[data-file-block] .bn-file-caption:empty {
-  padding-block: 0;
+/* Block-specific styles */
+[data-content-type="audio"] > .bn-file-block-content-wrapper,
+.bn-audio {
+  width: 100%;
 }
 
 /* PLACEHOLDERS*/

package/src/editor/BlockNoteEditor.test.ts

@@ -71,6 +71,26 @@ it("adds id attribute when requested", async () => {
   );
   editor.replaceBlocks(editor.document, blocks);
   expect(await editor.blocksToFullHTML(editor.document)).toMatchInlineSnapshot(
-    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading" data-level="1"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
+    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
   );
 });
+
+it("block prop types", () => {
+  // this test checks whether the block props are correctly typed in typescript
+  const editor = BlockNoteEditor.create();
+  const block = editor.document[0];
+  if (block.type === "paragraph") {
+    // @ts-expect-error
+    const level = block.props.level; // doesn't have level prop
+
+    // eslint-disable-next-line
+    expect(level).toBe(undefined);
+  }
+
+  if (block.type === "heading") {
+    const level = block.props.level; // does have level prop
+
+    // eslint-disable-next-line
+    expect(level).toBe(1);
+  }
+});

package/src/editor/BlockNoteEditor.ts

@@ -93,6 +93,7 @@ import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTML
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
 import "../style.css";
+import { EditorView } from "prosemirror-view";
 
 export type BlockNoteExtension =
   | AnyExtension
@@ -274,7 +275,8 @@ export class BlockNoteEditor<
   public readonly headless: boolean = false;
 
   public readonly _tiptapEditor:
-    | BlockNoteTipTapEditor & {
+    | Omit<BlockNoteTipTapEditor, "view"> & {
+        view: EditorView | undefined;
         contentComponent: any;
       } = undefined as any; // TODO: Type should actually reflect that it can be `undefined` in headless mode
 
@@ -344,7 +346,7 @@ export class BlockNoteEditor<
   private onUploadStartCallbacks: ((blockId?: string) => void)[] = [];
   private onUploadEndCallbacks: ((blockId?: string) => void)[] = [];
 
-  public readonly resolveFileUrl: (url: string) => Promise<string>;
+  public readonly resolveFileUrl?: (url: string) => Promise<string>;
 
   public get pmSchema() {
     return this._pmSchema;
@@ -456,7 +458,7 @@ export class BlockNoteEditor<
       };
     }
 
-    this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
+    this.resolveFileUrl = newOptions.resolveFileUrl;
     this.headless = newOptions._headless;
 
     if (newOptions.collaboration && newOptions.initialContent) {
@@ -542,6 +544,7 @@ export class BlockNoteEditor<
         tiptapOptions,
         this.schema.styleSchema
       ) as BlockNoteTipTapEditor & {
+        view: any;
         contentComponent: any;
       };
       this._pmSchema = this._tiptapEditor.schema;
@@ -570,15 +573,15 @@ export class BlockNoteEditor<
   }
 
   public get domElement() {
-    return this._tiptapEditor.view.dom as HTMLDivElement;
+    return this.prosemirrorView?.dom as HTMLDivElement | undefined;
   }
 
   public isFocused() {
-    return this._tiptapEditor.view.hasFocus();
+    return this.prosemirrorView?.hasFocus() || false;
   }
 
   public focus() {
-    this._tiptapEditor.view.focus();
+    this.prosemirrorView?.focus();
   }
 
   public onUploadStart(callback: (blockId?: string) => void) {
@@ -1198,7 +1201,11 @@ export class BlockNoteEditor<
       ignoreQueryLength?: boolean;
     }
   ) {
-    const tr = this.prosemirrorView.state.tr;
+    const tr = this.prosemirrorView?.state.tr;
+    if (!tr) {
+      return;
+    }
+
     const transaction =
       pluginState && pluginState.deleteTriggerCharacter
         ? tr.insertText(triggerCharacter)

package/src/editor/BlockNoteExtensions.ts

@@ -19,6 +19,10 @@ import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlu
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
+import {
+  DEFAULT_LINK_PROTOCOL,
+  VALID_LINK_PROTOCOLS,
+} from "../extensions/LinkToolbar/protocols.js";
 import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
 import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
 import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
@@ -159,14 +163,9 @@ const getTipTapExtensions = <
     // marks:
     Link.extend({
       inclusive: false,
-      addKeyboardShortcuts() {
-        return {
-          "Mod-k": () => {
-            this.editor.commands.toggleLink({ href: "" });
-            return true;
-          },
-        };
-      },
+    }).configure({
+      defaultProtocol: DEFAULT_LINK_PROTOCOL,
+      protocols: VALID_LINK_PROTOCOLS,
     }),
     ...Object.values(opts.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark;

package/src/editor/editor.css

@@ -86,6 +86,7 @@ Tippy popups that are appended to document.body directly
   pointer-events: none;
   position: relative;
   word-break: normal;
+  white-space: nowrap !important;
 }
 
 /* Render the username above the caret */
@@ -108,7 +109,7 @@ Tippy popups that are appended to document.body directly
   padding
 } */
 
-.ProseMirror .tableWrapper {
+.bn-editor [data-content-type="table"] .tableWrapper {
   position: relative;
   top: -16px;
   left: -16px;
@@ -118,7 +119,7 @@ Tippy popups that are appended to document.body directly
   overflow-y: hidden;
 }
 
-.ProseMirror .tableWrapper-inner {
+.bn-editor [data-content-type="table"] .tableWrapper-inner {
   /* position: relative; */
   /* top: -16px;
   left: -16px; */
@@ -126,17 +127,17 @@ Tippy popups that are appended to document.body directly
 }
 
 /* table related: */
-.bn-editor table {
+.bn-editor [data-content-type="table"] table {
   width: auto !important;
   word-break: break-word;
 }
-.bn-editor th,
-.bn-editor td {
+.bn-editor [data-content-type="table"] th,
+.bn-editor [data-content-type="table"] td {
   border: 1px solid #ddd;
   padding: 3px 5px;
 }
 
-.bn-editor th {
+.bn-editor [data-content-type="table"] th {
   font-weight: bold;
   text-align: left;
 }

package/src/editor/transformPasted.ts

@@ -1,6 +1,8 @@
 import { Fragment, Schema, Slice } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
 
+import { getBlockInfoFromSelection } from "../api/getBlockInfoFromPos.js";
+
 // helper function to remove a child from a fragment
 function removeChild(node: Fragment, n: number) {
   const children: any[] = [];
@@ -49,16 +51,25 @@ export function wrapTableRows(f: Fragment, schema: Schema) {
 /**
  * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
  *
- * Without this fix, pasting two paragraphs would cause the second one to be indented in the other
- * this fix wraps every element in the slice in it's own blockContainer, to prevent Prosemirror from nesting the
- * elements on paste.
+ * This fix wraps pasted ProseMirror nodes in their own `blockContainer` nodes
+ * in most cases. This is to ensure that ProseMirror inserts them as separate
+ * blocks, which it sometimes doesn't do because it doesn't have enough context
+ * about the hierarchy of the pasted nodes. The issue can be seen when pasting
+ * e.g. an image or two consecutive paragraphs, where PM tries to nest the
+ * pasted block(s) when it shouldn't.
  *
- * The exception is when we encounter blockGroups with listitems, because those actually should be nested
+ * However, the fix is not applied in a few cases. See `shouldApplyFix` for
+ * which cases are excluded.
  */
 export function transformPasted(slice: Slice, view: EditorView) {
   let f = Fragment.from(slice.content);
   f = wrapTableRows(f, view.state.schema);
 
+  if (!shouldApplyFix(f, view)) {
+    // Don't apply the fix.
+    return new Slice(f, slice.openStart, slice.openEnd);
+  }
+
   for (let i = 0; i < f.childCount; i++) {
     if (f.child(i).type.spec.group === "blockContent") {
       const content = [f.child(i)];
@@ -92,3 +103,45 @@ export function transformPasted(slice: Slice, view: EditorView) {
   }
   return new Slice(f, slice.openStart, slice.openEnd);
 }
+
+/**
+ * Used in `transformPasted` to check if the fix there should be applied, i.e.
+ * if the pasted fragment should be wrapped in a `blockContainer` node. This
+ * will explicitly tell ProseMirror to treat it as a separate block.
+ */
+function shouldApplyFix(fragment: Fragment, view: EditorView) {
+  const nodeHasSingleChild = fragment.childCount === 1;
+  const nodeHasInlineContent =
+    fragment.firstChild?.type.spec.content === "inline*";
+  const nodeHasTableContent =
+    fragment.firstChild?.type.spec.content === "tableRow+";
+
+  if (nodeHasSingleChild) {
+    if (nodeHasInlineContent) {
+      // Case when we paste a single node with inline content, e.g. a paragraph
+      // or heading. We want to insert the content in-line for better UX instead
+      // of a separate block, so we return false.
+      return false;
+    }
+
+    if (nodeHasTableContent) {
+      // Not ideal that we check selection here, as `transformPasted` is called
+      // for both paste and drop events. Drop events can potentially cause
+      // issues as they don't always happen at the current selection.
+      const blockInfo = getBlockInfoFromSelection(view.state);
+      if (blockInfo.isBlockContainer) {
+        const selectedBlockHasTableContent =
+          blockInfo.blockContent.node.type.spec.content === "tableRow+";
+
+        // Case for when we paste a single node with table content, i.e. a
+        // table. Normally, we return true as we want to ensure the table is
+        // inserted as a separate block. However, if the selection is in an
+        // existing table, we return false, as we want the content of the pasted
+        // table to be added to the existing one for better UX.
+        return !selectedBlockHasTableContent;
+      }
+    }
+  }
+
+  return true;
+}

package/src/extensions/LinkToolbar/protocols.ts

@@ -0,0 +1,13 @@
+export const VALID_LINK_PROTOCOLS = [
+  "http",
+  "https",
+  "ftp",
+  "ftps",
+  "mailto",
+  "tel",
+  "callto",
+  "sms",
+  "cid",
+  "xmpp",
+];
+export const DEFAULT_LINK_PROTOCOL = "https";

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -18,10 +18,10 @@ export class PlaceholderPlugin {
         if (nonce) {
           styleEl.setAttribute("nonce", nonce);
         }
-        if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
-          editor._tiptapEditor.view.root.append(styleEl);
+        if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+          editor.prosemirrorView.root.append(styleEl);
         } else {
-          editor._tiptapEditor.view.root.head.appendChild(styleEl);
+          editor.prosemirrorView?.root.head.appendChild(styleEl);
         }
 
         const styleSheet = styleEl.sheet!;
@@ -78,10 +78,10 @@ export class PlaceholderPlugin {
 
         return {
           destroy: () => {
-            if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
-              editor._tiptapEditor.view.root.removeChild(styleEl);
+            if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+              editor.prosemirrorView.root.removeChild(styleEl);
             } else {
-              editor._tiptapEditor.view.root.head.removeChild(styleEl);
+              editor.prosemirrorView?.root.head.removeChild(styleEl);
             }
           },
         };

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -485,7 +485,11 @@ export class SideMenuProsemirrorPlugin<
   /**
    * Handles drag & drop events for blocks.
    */
-  blockDragEnd = () => unsetDragImage(this.editor.prosemirrorView.root);
+  blockDragEnd = () => {
+    if (this.editor.prosemirrorView) {
+      unsetDragImage(this.editor.prosemirrorView.root);
+    }
+  };
   /**
    * Freezes the side menu. When frozen, the side menu will stay
    * attached to the same block regardless of which block is hovered by the

package/src/extensions/SideMenu/dragging.ts

@@ -148,6 +148,9 @@ export function dragStart<
   }
 
   const view = editor.prosemirrorView;
+  if (!view) {
+    return;
+  }
 
   const posInfo = getNodeById(block.id, view.state.doc);
   if (!posInfo) {

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -45,12 +45,12 @@ class SuggestionMenuView<
       });
     };
 
-    this.rootEl = this.editor._tiptapEditor.view.root;
+    this.rootEl = this.editor.prosemirrorView?.root;
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
     // and so won't propagate to the document by default.
-    this.rootEl.addEventListener("scroll", this.handleScroll, true);
+    this.rootEl?.addEventListener("scroll", this.handleScroll, true);
   }
 
   handleScroll = () => {
@@ -113,10 +113,7 @@ class SuggestionMenuView<
 
   closeMenu = () => {
     this.editor.dispatch(
-      this.editor._tiptapEditor.view.state.tr.setMeta(
-        suggestionMenuPluginKey,
-        null
-      )
+      this.editor._tiptapEditor.state.tr.setMeta(suggestionMenuPluginKey, null)
     );
   };
 

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -742,7 +742,11 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
-    setHiddenDragImage(this.editor._tiptapEditor.view.root);
+    if (!this.editor.prosemirrorView) {
+      throw new Error("Editor view not initialized.");
+    }
+
+    setHiddenDragImage(this.editor.prosemirrorView.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "move";
   };
@@ -781,7 +785,11 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
-    setHiddenDragImage(this.editor._tiptapEditor.view.root);
+    if (!this.editor.prosemirrorView) {
+      throw new Error("Editor view not initialized.");
+    }
+
+    setHiddenDragImage(this.editor.prosemirrorView.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "copyMove";
   };
@@ -804,7 +812,11 @@ export class TableHandlesProsemirrorPlugin<
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, null)
     );
 
-    unsetHiddenDragImage(this.editor._tiptapEditor.view.root);
+    if (!this.editor.prosemirrorView) {
+      throw new Error("Editor view not initialized.");
+    }
+
+    unsetHiddenDragImage(this.editor.prosemirrorView.root);
   };
 
   /**

package/src/index.ts

@@ -7,10 +7,16 @@ export * from "./api/testUtil/index.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";
 export * from "./blocks/CodeBlockContent/CodeBlockContent.js";
 export * from "./blocks/FileBlockContent/FileBlockContent.js";
-export * from "./blocks/FileBlockContent/fileBlockHelpers.js";
+export * from "./blocks/FileBlockContent/helpers/parse/parseEmbedElement.js";
+export * from "./blocks/FileBlockContent/helpers/parse/parseFigureElement.js";
+export * from "./blocks/FileBlockContent/helpers/render/createAddFileButton.js";
+export * from "./blocks/FileBlockContent/helpers/render/createFileBlockWrapper.js";
+export * from "./blocks/FileBlockContent/helpers/render/createFileNameWithIcon.js";
+export * from "./blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+export * from "./blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+export * from "./blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
 export * from "./blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.js";
 export * from "./blocks/ImageBlockContent/ImageBlockContent.js";
-export { parseImageElement } from "./blocks/ImageBlockContent/imageBlockHelpers.js";
 export {
   EMPTY_CELL_HEIGHT,
   EMPTY_CELL_WIDTH,
@@ -30,6 +36,7 @@ export * from "./extensions-shared/UiElementPosition.js";
 export * from "./extensions/FilePanel/FilePanelPlugin.js";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 export * from "./extensions/LinkToolbar/LinkToolbarPlugin.js";
+export * from "./extensions/LinkToolbar/protocols.js";
 export * from "./extensions/SideMenu/SideMenuPlugin.js";
 export * from "./extensions/SuggestionMenu/DefaultGridSuggestionItem.js";
 export * from "./extensions/SuggestionMenu/DefaultSuggestionItem.js";

package/src/schema/blocks/createSpec.ts

@@ -148,7 +148,7 @@ export function createBlockSpec<
       : "") as T["content"] extends "inline" ? "inline*" : "",
     group: "blockContent",
     selectable: blockConfig.isSelectable ?? true,
-
+    isolating: true,
     addAttributes() {
       return propsToAttributes(blockConfig.propSchema);
     },

package/src/schema/blocks/internal.ts

@@ -46,7 +46,10 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
             return null;
           }
 
-          if (typeof spec.default === "boolean") {
+          if (
+            (spec.default === undefined && spec.type === "boolean") ||
+            (spec.default !== undefined && typeof spec.default === "boolean")
+          ) {
             if (value === "true") {
               return true;
             }
@@ -58,7 +61,10 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
             return null;
           }
 
-          if (typeof spec.default === "number") {
+          if (
+            (spec.default === undefined && spec.type === "number") ||
+            (spec.default !== undefined && typeof spec.default === "number")
+          ) {
             const asNumber = parseFloat(value);
             const isNumeric =
               !Number.isNaN(asNumber) && Number.isFinite(asNumber);
@@ -72,12 +78,14 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
 
           return value;
         },
-        renderHTML: (attributes) =>
-          attributes[name] !== spec.default
+        renderHTML: (attributes) => {
+          // don't render to html if the value is the same as the default
+          return attributes[name] !== spec.default
             ? {
                 [camelToDataKebab(name)]: attributes[name],
               }
-            : {},
+            : {};
+        },
       };
     });
 
@@ -173,7 +181,9 @@ export function wrapInBlockStructure<
   // which are already added as HTML attributes to the parent `blockContent`
   // element (inheritedProps) and props set to their default values.
   for (const [prop, value] of Object.entries(blockProps)) {
-    if (!inheritedProps.includes(prop) && value !== propSchema[prop].default) {
+    const spec = propSchema[prop];
+    const defaultValue = spec.default;
+    if (!inheritedProps.includes(prop) && value !== defaultValue) {
       blockContent.setAttribute(camelToDataKebab(prop), value);
     }
   }

package/src/schema/inlineContent/createSpec.ts

@@ -142,8 +142,8 @@ export function createInlineContentSpec<
               editor.schema.styleSchema
             );
 
-            editor._tiptapEditor.view.dispatch(
-              editor._tiptapEditor.view.state.tr.replaceWith(
+            editor.dispatch(
+              editor.prosemirrorView.state.tr.replaceWith(
                 getPos(),
                 getPos() + node.nodeSize,
                 content