@blocknote/core 0.10.0 → 0.11.0

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1701710111434,"assets":[{"name":"blocknote.umd.cjs","size":99242},{"name":"blocknote.umd.cjs.map","size":445654}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/extensions/UniqueID/UniqueID.ts","size":8518,"chunks":["a1ee98a"]},{"name":"./src/api/getBlockInfoFromPos.ts","size":1691,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/types.ts","size":302,"chunks":["a1ee98a"]},{"name":"./src/util/typescript.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/api/nodeConversions/nodeConversions.ts","size":11959,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/sharedHTMLConversion.ts","size":2272,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/simplifyBlocksRehypePlugin.ts","size":2687,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/externalHTMLExporter.ts","size":1059,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/internalHTMLSerializer.ts","size":697,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts","size":316,"chunks":["a1ee98a"]},{"name":"./src/util/browser.ts","size":432,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlockHelpers.ts","size":1724,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultProps.ts","size":269,"chunks":["a1ee98a"]},{"name":"./src/util/string.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/internal.ts","size":3701,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/createSpec.ts","size":2781,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/internal.ts","size":1357,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/createSpec.ts","size":1613,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/internal.ts","size":1162,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/createSpec.ts","size":1263,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorMark.ts","size":946,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorMark.ts","size":866,"chunks":["a1ee98a"]},{"name":"./src/blocks/HeadingBlockContent/HeadingBlockContent.ts","size":2796,"chunks":["a1ee98a"]},{"name":"./src/util/EventEmitter.ts","size":744,"chunks":["a1ee98a"]},{"name":"./src/extensions/ImageToolbar/ImageToolbarPlugin.ts","size":3772,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/ImageBlockContent.ts","size":9242,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts","size":1106,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts","size":2691,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts","size":1862,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts","size":3148,"chunks":["a1ee98a"]},{"name":"./src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts","size":753,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableExtension.ts","size":1462,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableBlockContent.ts","size":1207,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlocks.ts","size":1025,"chunks":["a1ee98a"]},{"name":"./src/api/nodeUtil.ts","size":548,"chunks":["a1ee98a"]},{"name":"./src/api/blockManipulation/blockManipulation.ts","size":2541,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/removeUnderlinesRehypePlugin.ts","size":752,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/markdownExporter.ts","size":549,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/util/nestedLists.ts","size":2022,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/parseHTML.ts","size":503,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/markdown/parseMarkdown.ts","size":1054,"chunks":["a1ee98a"]},{"name":"./src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts","size":4866,"chunks":["a1ee98a"]},{"name":"./src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts","size":7599,"chunks":["a1ee98a"]},{"name":"./src/extensions-shared/suggestion/SuggestionPlugin.ts","size":9492,"chunks":["a1ee98a"]},{"name":"./src/extensions/SlashMenu/SlashMenuPlugin.ts","size":839,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/MultipleNodeSelection.ts","size":1616,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/SideMenuPlugin.ts","size":15162,"chunks":["a1ee98a"]},{"name":"./src/extensions/SlashMenu/defaultSlashMenuItems.ts","size":4114,"chunks":["a1ee98a"]},{"name":"./src/extensions/TableHandles/TableHandlesPlugin.ts","size":14650,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/copyExtension.ts","size":1406,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/pasteExtension.ts","size":1168,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorExtension.ts","size":688,"chunks":["a1ee98a"]},{"name":"./src/extensions/Placeholder/PlaceholderExtension.ts","size":2106,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextAlignment/TextAlignmentExtension.ts","size":748,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorExtension.ts","size":622,"chunks":["a1ee98a"]},{"name":"./src/extensions/TrailingNode/TrailingNodeExtension.ts","size":1594,"chunks":["a1ee98a"]},{"name":"./src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts","size":341,"chunks":["a1ee98a"]},{"name":"./src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts","size":4572,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockContainer.ts","size":17257,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockGroup.ts","size":1097,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Doc.ts","size":90,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteExtensions.ts","size":3467,"chunks":["a1ee98a"]},{"name":"./src/editor/transformPasted.ts","size":1017,"chunks":["a1ee98a"]},{"name":"./src/editor/Block.css","size":17,"chunks":["a1ee98a"]},{"name":"./src/editor/editor.css","size":18,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteEditor.ts","size":22030,"chunks":["a1ee98a"]},{"name":"./src/api/testUtil/partialBlockTestUtil.ts","size":2166,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}
+{"builtAt":1704762819220,"assets":[{"name":"blocknote.umd.cjs","size":100567},{"name":"blocknote.umd.cjs.map","size":453755}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/extensions/UniqueID/UniqueID.ts","size":8518,"chunks":["a1ee98a"]},{"name":"./src/api/getBlockInfoFromPos.ts","size":1691,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/types.ts","size":302,"chunks":["a1ee98a"]},{"name":"./src/util/typescript.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/api/nodeConversions/nodeConversions.ts","size":11959,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/sharedHTMLConversion.ts","size":2272,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/simplifyBlocksRehypePlugin.ts","size":2687,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/externalHTMLExporter.ts","size":1059,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/internalHTMLSerializer.ts","size":697,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts","size":316,"chunks":["a1ee98a"]},{"name":"./src/util/browser.ts","size":432,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlockHelpers.ts","size":1724,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultProps.ts","size":269,"chunks":["a1ee98a"]},{"name":"./src/util/string.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/internal.ts","size":3701,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/createSpec.ts","size":2781,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/internal.ts","size":1357,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/createSpec.ts","size":1613,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/internal.ts","size":1162,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/createSpec.ts","size":1263,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorMark.ts","size":946,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorMark.ts","size":866,"chunks":["a1ee98a"]},{"name":"./src/blocks/HeadingBlockContent/HeadingBlockContent.ts","size":2796,"chunks":["a1ee98a"]},{"name":"./src/util/EventEmitter.ts","size":744,"chunks":["a1ee98a"]},{"name":"./src/extensions/ImageToolbar/ImageToolbarPlugin.ts","size":3772,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/ImageBlockContent.ts","size":9011,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts","size":1106,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts","size":2691,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts","size":1862,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts","size":3148,"chunks":["a1ee98a"]},{"name":"./src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts","size":753,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableExtension.ts","size":1462,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableBlockContent.ts","size":1207,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlocks.ts","size":1025,"chunks":["a1ee98a"]},{"name":"./src/api/nodeUtil.ts","size":548,"chunks":["a1ee98a"]},{"name":"./src/api/blockManipulation/blockManipulation.ts","size":4471,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/removeUnderlinesRehypePlugin.ts","size":752,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/markdownExporter.ts","size":549,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/util/nestedLists.ts","size":2022,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/parseHTML.ts","size":503,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/markdown/parseMarkdown.ts","size":1054,"chunks":["a1ee98a"]},{"name":"./src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts","size":4866,"chunks":["a1ee98a"]},{"name":"./src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts","size":7599,"chunks":["a1ee98a"]},{"name":"./src/extensions-shared/suggestion/SuggestionPlugin.ts","size":9492,"chunks":["a1ee98a"]},{"name":"./src/extensions/SlashMenu/SlashMenuPlugin.ts","size":839,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/MultipleNodeSelection.ts","size":1616,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/SideMenuPlugin.ts","size":15178,"chunks":["a1ee98a"]},{"name":"./src/extensions/SlashMenu/defaultSlashMenuItems.ts","size":4114,"chunks":["a1ee98a"]},{"name":"./src/extensions/TableHandles/TableHandlesPlugin.ts","size":14723,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/copyExtension.ts","size":2883,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/pasteExtension.ts","size":1131,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorExtension.ts","size":688,"chunks":["a1ee98a"]},{"name":"./src/extensions/Placeholder/PlaceholderExtension.ts","size":2106,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextAlignment/TextAlignmentExtension.ts","size":748,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorExtension.ts","size":622,"chunks":["a1ee98a"]},{"name":"./src/extensions/TrailingNode/TrailingNodeExtension.ts","size":1594,"chunks":["a1ee98a"]},{"name":"./src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts","size":467,"chunks":["a1ee98a"]},{"name":"./src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts","size":4572,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockContainer.ts","size":17340,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockGroup.ts","size":1097,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Doc.ts","size":90,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteExtensions.ts","size":3467,"chunks":["a1ee98a"]},{"name":"./src/editor/transformPasted.ts","size":1017,"chunks":["a1ee98a"]},{"name":"./src/editor/Block.css","size":17,"chunks":["a1ee98a"]},{"name":"./src/editor/editor.css","size":18,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteEditor.ts","size":22030,"chunks":["a1ee98a"]},{"name":"./src/api/testUtil/partialBlockTestUtil.ts","size":2166,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "files": [
     "dist",
     "types",
@@ -46,7 +46,8 @@
     "preview": "vite preview",
     "lint": "eslint src --max-warnings 0",
     "test": "vitest --run",
-    "test-watch": "vitest watch"
+    "test-watch": "vitest watch",
+    "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
@@ -98,6 +99,7 @@
     "eslint": "^8.10.0",
     "jsdom": "^21.1.0",
     "prettier": "^2.7.1",
+    "rimraf": "^5.0.5",
     "rollup-plugin-webpack-stats": "^0.2.2",
     "typescript": "^5.0.4",
     "vite": "^4.4.8",
@@ -113,5 +115,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "2f1b344ba2c8878269ddfc84052347d3e63b00c2"
+  "gitHead": "db565110840b367d5e5220fdc790c5e7b476ff5b"
 }

package/src/api/blockManipulation/blockManipulation.ts

@@ -1,16 +1,17 @@
-import { Editor } from "@tiptap/core";
 import { Node } from "prosemirror-model";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
+  Block,
   BlockIdentifier,
   BlockSchema,
   InlineContentSchema,
   PartialBlock,
   StyleSchema,
 } from "../../schema";
-import { blockToNode } from "../nodeConversions/nodeConversions";
+import { blockToNode, nodeToBlock } from "../nodeConversions/nodeConversions";
 import { getNodeById } from "../nodeUtil";
+import { Transaction } from "prosemirror-state";
 
 export function insertBlocks<
   BSchema extends BlockSchema,
@@ -21,7 +22,7 @@ export function insertBlocks<
   referenceBlock: BlockIdentifier,
   placement: "before" | "after" | "nested" = "before",
   editor: BlockNoteEditor<BSchema, I, S>
-): void {
+): Block<BSchema, I, S>[] {
   const ttEditor = editor._tiptapEditor;
 
   const id =
@@ -34,39 +35,53 @@ export function insertBlocks<
     );
   }
 
-  let insertionPos = -1;
-
   const { node, posBeforeNode } = getNodeById(id, ttEditor.state.doc);
 
   if (placement === "before") {
-    insertionPos = posBeforeNode;
+    ttEditor.view.dispatch(
+      ttEditor.state.tr.insert(posBeforeNode, nodesToInsert)
+    );
   }
 
   if (placement === "after") {
-    insertionPos = posBeforeNode + node.nodeSize;
+    ttEditor.view.dispatch(
+      ttEditor.state.tr.insert(posBeforeNode + node.nodeSize, nodesToInsert)
+    );
   }
 
   if (placement === "nested") {
     // Case if block doesn't already have children.
     if (node.childCount < 2) {
-      insertionPos = posBeforeNode + node.firstChild!.nodeSize + 1;
-
       const blockGroupNode = ttEditor.state.schema.nodes["blockGroup"].create(
         {},
         nodesToInsert
       );
 
       ttEditor.view.dispatch(
-        ttEditor.state.tr.insert(insertionPos, blockGroupNode)
+        ttEditor.state.tr.insert(
+          posBeforeNode + node.firstChild!.nodeSize + 1,
+          blockGroupNode
+        )
       );
-
-      return;
     }
+  }
 
-    insertionPos = posBeforeNode + node.firstChild!.nodeSize + 2;
+  // Now that the `PartialBlock`s have been converted to nodes, we can
+  // re-convert them into full `Block`s.
+  const insertedBlocks: Block<BSchema, I, S>[] = [];
+  for (const node of nodesToInsert) {
+    insertedBlocks.push(
+      nodeToBlock(
+        node,
+        editor.blockSchema,
+        editor.inlineContentSchema,
+        editor.styleSchema,
+        editor.blockCache
+      )
+    );
   }
 
-  ttEditor.view.dispatch(ttEditor.state.tr.insert(insertionPos, nodesToInsert));
+  return insertedBlocks;
 }
 
 export function updateBlock<
@@ -76,28 +91,56 @@ export function updateBlock<
 >(
   blockToUpdate: BlockIdentifier,
   update: PartialBlock<BSchema, I, S>,
-  editor: Editor
-) {
+  editor: BlockNoteEditor<BSchema, I, S>
+): Block<BSchema, I, S> {
+  const ttEditor = editor._tiptapEditor;
+
   const id =
     typeof blockToUpdate === "string" ? blockToUpdate : blockToUpdate.id;
-  const { posBeforeNode } = getNodeById(id, editor.state.doc);
+  const { posBeforeNode } = getNodeById(id, ttEditor.state.doc);
+
+  ttEditor.commands.BNUpdateBlock(posBeforeNode + 1, update);
+
+  const blockContainerNode = ttEditor.state.doc
+    .resolve(posBeforeNode + 1)
+    .node();
 
-  editor.commands.BNUpdateBlock(posBeforeNode + 1, update);
+  return nodeToBlock(
+    blockContainerNode,
+    editor.blockSchema,
+    editor.inlineContentSchema,
+    editor.styleSchema,
+    editor.blockCache
+  );
 }
 
-export function removeBlocks(
+function removeBlocksWithCallback<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
   blocksToRemove: BlockIdentifier[],
-  editor: Editor
-) {
+  editor: BlockNoteEditor<BSchema, I, S>,
+  // Should return new removedSize.
+  callback?: (
+    node: Node,
+    pos: number,
+    tr: Transaction,
+    removedSize: number
+  ) => number
+): Block<BSchema, I, S>[] {
+  const ttEditor = editor._tiptapEditor;
+  const tr = ttEditor.state.tr;
+
   const idsOfBlocksToRemove = new Set<string>(
     blocksToRemove.map((block) =>
       typeof block === "string" ? block : block.id
     )
   );
-
+  const removedBlocks: Block<BSchema, I, S>[] = [];
   let removedSize = 0;
 
-  editor.state.doc.descendants((node, pos) => {
+  ttEditor.state.doc.descendants((node, pos) => {
     // Skips traversing nodes after all target blocks have been removed.
     if (idsOfBlocksToRemove.size === 0) {
       return false;
@@ -111,17 +154,29 @@ export function removeBlocks(
       return true;
     }
 
+    // Saves the block that is being deleted.
+    removedBlocks.push(
+      nodeToBlock(
+        node,
+        editor.blockSchema,
+        editor.inlineContentSchema,
+        editor.styleSchema,
+        editor.blockCache
+      )
+    );
     idsOfBlocksToRemove.delete(node.attrs.id);
-    const oldDocSize = editor.state.doc.nodeSize;
 
-    editor.commands.BNDeleteBlock(pos - removedSize + 1);
-
-    const newDocSize = editor.state.doc.nodeSize;
+    // Removes the block and calculates the change in document size.
+    removedSize = callback?.(node, pos, tr, removedSize) || removedSize;
+    const oldDocSize = tr.doc.nodeSize;
+    tr.delete(pos - removedSize - 1, pos - removedSize + node.nodeSize + 1);
+    const newDocSize = tr.doc.nodeSize;
     removedSize += oldDocSize - newDocSize;
 
     return false;
   });
 
+  // Throws an error if now all blocks could be found.
   if (idsOfBlocksToRemove.size > 0) {
     const notFoundIds = [...idsOfBlocksToRemove].join("\n");
 
@@ -130,6 +185,21 @@ export function removeBlocks(
         notFoundIds
     );
   }
+
+  ttEditor.view.dispatch(tr);
+
+  return removedBlocks;
+}
+
+export function removeBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  blocksToRemove: BlockIdentifier[],
+  editor: BlockNoteEditor<BSchema, I, S>
+): Block<BSchema, I, S>[] {
+  return removeBlocksWithCallback(blocksToRemove, editor);
 }
 
 export function replaceBlocks<
@@ -140,7 +210,51 @@ export function replaceBlocks<
   blocksToRemove: BlockIdentifier[],
   blocksToInsert: PartialBlock<BSchema, I, S>[],
   editor: BlockNoteEditor<BSchema, I, S>
-) {
-  insertBlocks(blocksToInsert, blocksToRemove[0], "before", editor);
-  removeBlocks(blocksToRemove, editor._tiptapEditor);
+): {
+  insertedBlocks: Block<BSchema, I, S>[];
+  removedBlocks: Block<BSchema, I, S>[];
+} {
+  const ttEditor = editor._tiptapEditor;
+
+  const nodesToInsert: Node[] = [];
+  for (const block of blocksToInsert) {
+    nodesToInsert.push(blockToNode(block, ttEditor.schema, editor.styleSchema));
+  }
+
+  const idOfFirstBlock =
+    typeof blocksToRemove[0] === "string"
+      ? blocksToRemove[0]
+      : blocksToRemove[0].id;
+  const removedBlocks = removeBlocksWithCallback(
+    blocksToRemove,
+    editor,
+    (node, pos, tr, removedSize) => {
+      if (node.attrs.id === idOfFirstBlock) {
+        const oldDocSize = tr.doc.nodeSize;
+        tr.insert(pos, nodesToInsert);
+        const newDocSize = tr.doc.nodeSize;
+
+        return removedSize + oldDocSize - newDocSize;
+      }
+
+      return removedSize;
+    }
+  );
+
+  // Now that the `PartialBlock`s have been converted to nodes, we can
+  // re-convert them into full `Block`s.
+  const insertedBlocks: Block<BSchema, I, S>[] = [];
+  for (const node of nodesToInsert) {
+    insertedBlocks.push(
+      nodeToBlock(
+        node,
+        editor.blockSchema,
+        editor.inlineContentSchema,
+        editor.styleSchema,
+        editor.blockCache
+      )
+    );
+  }
+
+  return { insertedBlocks, removedBlocks };
 }

package/src/api/exporters/copyExtension.ts

@@ -1,11 +1,46 @@
 import { Extension } from "@tiptap/core";
-import { Plugin } from "prosemirror-state";
+import { NodeSelection, Plugin } from "prosemirror-state";
+import { Node } from "prosemirror-model";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { createExternalHTMLExporter } from "./html/externalHTMLExporter";
 import { createInternalHTMLSerializer } from "./html/internalHTMLSerializer";
 import { cleanHTMLToMarkdown } from "./markdown/markdownExporter";
+import { EditorView } from "prosemirror-view";
+
+function selectedFragmentToHTML<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  view: EditorView,
+  editor: BlockNoteEditor<BSchema, I, S>
+): {
+  internalHTML: string;
+  externalHTML: string;
+  plainText: string;
+} {
+  const selectedFragment = view.state.selection.content().content;
+
+  const internalHTMLSerializer = createInternalHTMLSerializer(
+    view.state.schema,
+    editor
+  );
+  const internalHTML =
+    internalHTMLSerializer.serializeProseMirrorFragment(selectedFragment);
+
+  const externalHTMLExporter = createExternalHTMLExporter(
+    view.state.schema,
+    editor
+  );
+  const externalHTML =
+    externalHTMLExporter.exportProseMirrorFragment(selectedFragment);
+
+  const plainText = cleanHTMLToMarkdown(externalHTML);
+
+  return { internalHTML, externalHTML, plainText };
+}
 
 export const createCopyToClipboardExtension = <
   BSchema extends BlockSchema,
@@ -17,39 +52,35 @@ export const createCopyToClipboardExtension = <
   Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
     name: "copyToClipboard",
     addProseMirrorPlugins() {
-      const tiptap = this.editor;
-      const schema = this.editor.schema;
       return [
         new Plugin({
           props: {
             handleDOMEvents: {
-              copy(_view, event) {
+              copy(view, event) {
                 // Stops the default browser copy behaviour.
                 event.preventDefault();
                 event.clipboardData!.clearData();
 
-                const selectedFragment =
-                  tiptap.state.selection.content().content;
-
-                const internalHTMLSerializer = createInternalHTMLSerializer(
-                  schema,
-                  editor
-                );
-                const internalHTML =
-                  internalHTMLSerializer.serializeProseMirrorFragment(
-                    selectedFragment
-                  );
-
-                const externalHTMLExporter = createExternalHTMLExporter(
-                  schema,
-                  editor
-                );
-                const externalHTML =
-                  externalHTMLExporter.exportProseMirrorFragment(
-                    selectedFragment
+                // Checks if a `blockContent` node is being copied and expands
+                // the selection to the parent `blockContainer` node. This is
+                // for the use-case in which only a block without content is
+                // selected, e.g. an image block.
+                if (
+                  "node" in view.state.selection &&
+                  (view.state.selection.node as Node).type.spec.group ===
+                    "blockContent"
+                ) {
+                  view.dispatch(
+                    view.state.tr.setSelection(
+                      new NodeSelection(
+                        view.state.doc.resolve(view.state.selection.from - 1)
+                      )
+                    )
                   );
+                }
 
-                const plainText = cleanHTMLToMarkdown(externalHTML);
+                const { internalHTML, externalHTML, plainText } =
+                  selectedFragmentToHTML(view, editor);
 
                 // TODO: Writing to other MIME types not working in Safari for
                 //  some reason.
@@ -57,6 +88,48 @@ export const createCopyToClipboardExtension = <
                 event.clipboardData!.setData("text/html", externalHTML);
                 event.clipboardData!.setData("text/plain", plainText);
 
+                // Prevent default PM handler to be called
+                return true;
+              },
+              // This is for the use-case in which only a block without content
+              // is selected, e.g. an image block, and dragged (not using the
+              // drag handle).
+              dragstart(view, event) {
+                // Checks if a `NodeSelection` is active.
+                if (!("node" in view.state.selection)) {
+                  return;
+                }
+
+                // Checks if a `blockContent` node is being dragged.
+                if (
+                  (view.state.selection.node as Node).type.spec.group !==
+                  "blockContent"
+                ) {
+                  return;
+                }
+
+                // Expands the selection to the parent `blockContainer` node.
+                view.dispatch(
+                  view.state.tr.setSelection(
+                    new NodeSelection(
+                      view.state.doc.resolve(view.state.selection.from - 1)
+                    )
+                  )
+                );
+
+                // Stops the default browser drag start behaviour.
+                event.preventDefault();
+                event.dataTransfer!.clearData();
+
+                const { internalHTML, externalHTML, plainText } =
+                  selectedFragmentToHTML(view, editor);
+
+                // TODO: Writing to other MIME types not working in Safari for
+                //  some reason.
+                event.dataTransfer!.setData("blocknote/html", internalHTML);
+                event.dataTransfer!.setData("text/html", externalHTML);
+                event.dataTransfer!.setData("text/plain", plainText);
+
                 // Prevent default PM handler to be called
                 return true;
               },

package/src/api/exporters/html/__snapshots__/image/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/button/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper" style="display: none;"><div class="bn-image-wrapper" style="display: none;"><img class="bn-image" src="" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption"></p></div></div></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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/image/nested/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html

@@ -1 +1 @@
-<div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div>
+<div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/button/external.html

@@ -1 +1 @@
-<div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper" style="display: none;"><div class="bn-image-wrapper" style="display: none;"><img class="bn-image" src="" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption"></p></div></div>
+<div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/button/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper" style="display: none;"><div class="bn-image-wrapper" style="display: none;"><img class="bn-image" src="" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption"></p></div></div></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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div></div></div></div></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html

@@ -1 +1 @@
-<div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div>
+<div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div>

package/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button" style="display: none;"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"><div class="bn-image-resize-handle" style="left: 4px;"></div><div class="bn-image-resize-handle" style="right: 4px;"></div></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></div></div></div></div>

package/src/api/exporters/html/util/sharedHTMLConversion.ts

@@ -32,6 +32,7 @@ export const serializeNodeInner = <
   if (!serializer.nodes[node.type.name]) {
     throw new Error("Serializer is missing a node type: " + node.type.name);
   }
+
   const { dom, contentDOM } = DOMSerializer.renderSpec(
     doc(options),
     serializer.nodes[node.type.name](node)

package/src/api/exporters/markdown/__snapshots__/simpleImage/button/markdown.md

@@ -1 +0,0 @@
-![placeholder]()