@blocknote/core 0.19.0 → 0.19.1

package/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -23,195 +23,199 @@ const nodeAttributes: Record<string, string> = {
  *
  * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
  */
-export const PreviousBlockTypePlugin = () => {
-  let timeout: any;
-  return new Plugin({
-    key: PLUGIN_KEY,
-    view(_editorView) {
-      return {
-        update: async (view, _prevState) => {
-          if (this.key?.getState(view.state).updatedBlocks.size > 0) {
-            // use setTimeout 0 to clear the decorations so that at least
-            // for one DOM-render the decorations have been applied
-            timeout = setTimeout(() => {
-              view.dispatch(
-                view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
-              );
-            }, 0);
-          }
-        },
-        destroy: () => {
-          if (timeout) {
-            clearTimeout(timeout);
-          }
-        },
-      };
-    },
-    state: {
-      init() {
+export class PreviousBlockTypePlugin {
+  public readonly plugin: Plugin;
+  constructor() {
+    let timeout: ReturnType<typeof setTimeout>;
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      view(_editorView) {
         return {
-          // Block attributes, by block ID, from just before the previous transaction.
-          prevTransactionOldBlockAttrs: {} as any,
-          // Block attributes, by block ID, from just before the current transaction.
-          currentTransactionOldBlockAttrs: {} as any,
-          // Set of IDs of blocks whose attributes changed from the current transaction.
-          updatedBlocks: new Set<string>(),
+          update: async (view, _prevState) => {
+            if (this.key?.getState(view.state).updatedBlocks.size > 0) {
+              // use setTimeout 0 to clear the decorations so that at least
+              // for one DOM-render the decorations have been applied
+              timeout = setTimeout(() => {
+                view.dispatch(
+                  view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
+                );
+              }, 0);
+            }
+          },
+          destroy: () => {
+            if (timeout) {
+              clearTimeout(timeout);
+            }
+          },
         };
       },
+      state: {
+        init() {
+          return {
+            // Block attributes, by block ID, from just before the previous transaction.
+            prevTransactionOldBlockAttrs: {} as any,
+            // Block attributes, by block ID, from just before the current transaction.
+            currentTransactionOldBlockAttrs: {} as any,
+            // Set of IDs of blocks whose attributes changed from the current transaction.
+            updatedBlocks: new Set<string>(),
+          };
+        },
 
-      apply(transaction, prev, oldState, newState) {
-        prev.currentTransactionOldBlockAttrs = {};
-        prev.updatedBlocks.clear();
+        apply(transaction, prev, oldState, newState) {
+          prev.currentTransactionOldBlockAttrs = {};
+          prev.updatedBlocks.clear();
 
-        if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
-          return prev;
-        }
-
-        // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
-        //  also probably require checking nodes affected by the previous transaction too.
-        // We didn't get this to work yet:
-        // const transform = combineTransactionSteps(oldState.doc, [transaction]);
-        // // const { mapping } = transform;
-        // const changes = getChangedRanges(transform);
-        //
-        // changes.forEach(({ oldRange, newRange }) => {
-        // const oldNodes = findChildrenInRange(
-        //   oldState.doc,
-        //   oldRange,
-        //   (node) => node.attrs.id
-        // );
-        //
-        // const newNodes = findChildrenInRange(
-        //   newState.doc,
-        //   newRange,
-        //   (node) => node.attrs.id
-        // );
-
-        const currentTransactionOriginalOldBlockAttrs = {} as any;
-
-        const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
-        const oldNodesById = new Map(
-          oldNodes.map((node) => [node.node.attrs.id, node])
-        );
-        const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
-
-        // Traverses all block containers in the new editor state.
-        for (const node of newNodes) {
-          const oldNode = oldNodesById.get(node.node.attrs.id);
-
-          const oldContentNode = oldNode?.node.firstChild;
-          const newContentNode = node.node.firstChild;
-
-          if (oldNode && oldContentNode && newContentNode) {
-            const newAttrs = {
-              index: newContentNode.attrs.index,
-              level: newContentNode.attrs.level,
-              type: newContentNode.type.name,
-              depth: newState.doc.resolve(node.pos).depth,
-            };
-
-            let oldAttrs = {
-              index: oldContentNode.attrs.index,
-              level: oldContentNode.attrs.level,
-              type: oldContentNode.type.name,
-              depth: oldState.doc.resolve(oldNode.pos).depth,
-            };
-
-            currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
-              oldAttrs;
-
-            // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
-            // { "orderedListIndexing": true }
-            // These appended transactions happen immediately after any transaction which causes ordered list item
-            // indices to require updating, including those which trigger animations. Therefore, these animations are
-            // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
-            // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
-            // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
-            if (transaction.getMeta("numberedListIndexing")) {
-              // If the block existed before the transaction, gets the attributes from before the previous transaction
-              // (i.e. the transaction that caused list item indices to need updating).
-              if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
-                oldAttrs =
-                  prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
+          if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
+            return prev;
+          }
+
+          // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
+          //  also probably require checking nodes affected by the previous transaction too.
+          // We didn't get this to work yet:
+          // const transform = combineTransactionSteps(oldState.doc, [transaction]);
+          // // const { mapping } = transform;
+          // const changes = getChangedRanges(transform);
+          //
+          // changes.forEach(({ oldRange, newRange }) => {
+          // const oldNodes = findChildrenInRange(
+          //   oldState.doc,
+          //   oldRange,
+          //   (node) => node.attrs.id
+          // );
+          //
+          // const newNodes = findChildrenInRange(
+          //   newState.doc,
+          //   newRange,
+          //   (node) => node.attrs.id
+          // );
+
+          const currentTransactionOriginalOldBlockAttrs = {} as any;
+
+          const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
+          const oldNodesById = new Map(
+            oldNodes.map((node) => [node.node.attrs.id, node])
+          );
+          const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
+
+          // Traverses all block containers in the new editor state.
+          for (const node of newNodes) {
+            const oldNode = oldNodesById.get(node.node.attrs.id);
+
+            const oldContentNode = oldNode?.node.firstChild;
+            const newContentNode = node.node.firstChild;
+
+            if (oldNode && oldContentNode && newContentNode) {
+              const newAttrs = {
+                index: newContentNode.attrs.index,
+                level: newContentNode.attrs.level,
+                type: newContentNode.type.name,
+                depth: newState.doc.resolve(node.pos).depth,
+              };
+
+              let oldAttrs = {
+                index: oldContentNode.attrs.index,
+                level: oldContentNode.attrs.level,
+                type: oldContentNode.type.name,
+                depth: oldState.doc.resolve(oldNode.pos).depth,
+              };
+
+              currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
+                oldAttrs;
+
+              // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
+              // { "orderedListIndexing": true }
+              // These appended transactions happen immediately after any transaction which causes ordered list item
+              // indices to require updating, including those which trigger animations. Therefore, these animations are
+              // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
+              // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
+              // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
+              if (transaction.getMeta("numberedListIndexing")) {
+                // If the block existed before the transaction, gets the attributes from before the previous transaction
+                // (i.e. the transaction that caused list item indices to need updating).
+                if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
+                  oldAttrs =
+                    prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
+                }
+
+                // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
+                // changing from a numbered list item to something else.
+                if (newAttrs.type === "numberedListItem") {
+                  oldAttrs.index = newAttrs.index;
+                }
               }
 
-              // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
-              // changing from a numbered list item to something else.
-              if (newAttrs.type === "numberedListItem") {
-                oldAttrs.index = newAttrs.index;
+              prev.currentTransactionOldBlockAttrs[node.node.attrs.id] =
+                oldAttrs;
+
+              // TODO: faster deep equal?
+              if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
+                (oldAttrs as any)["depth-change"] =
+                  oldAttrs.depth - newAttrs.depth;
+
+                // for debugging:
+                // console.log(
+                //   "id:",
+                //   node.node.attrs.id,
+                //   "previousBlockTypePlugin changes detected, oldAttrs",
+                //   oldAttrs,
+                //   "new",
+                //   newAttrs
+                // );
+
+                prev.updatedBlocks.add(node.node.attrs.id);
               }
             }
+          }
 
-            prev.currentTransactionOldBlockAttrs[node.node.attrs.id] = oldAttrs;
+          prev.prevTransactionOldBlockAttrs =
+            currentTransactionOriginalOldBlockAttrs;
 
-            // TODO: faster deep equal?
-            if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
-              (oldAttrs as any)["depth-change"] =
-                oldAttrs.depth - newAttrs.depth;
+          return prev;
+        },
+      },
+      props: {
+        decorations(state) {
+          const pluginState = (this as Plugin).getState(state);
+          if (pluginState.updatedBlocks.size === 0) {
+            return undefined;
+          }
 
-              // for debugging:
-              // console.log(
-              //   "id:",
-              //   node.node.attrs.id,
-              //   "previousBlockTypePlugin changes detected, oldAttrs",
-              //   oldAttrs,
-              //   "new",
-              //   newAttrs
-              // );
+          const decorations: Decoration[] = [];
 
-              prev.updatedBlocks.add(node.node.attrs.id);
+          state.doc.descendants((node, pos) => {
+            if (!node.attrs.id) {
+              return;
             }
-          }
-        }
 
-        prev.prevTransactionOldBlockAttrs =
-          currentTransactionOriginalOldBlockAttrs;
+            if (!pluginState.updatedBlocks.has(node.attrs.id)) {
+              return;
+            }
 
-        return prev;
-      },
-    },
-    props: {
-      decorations(state) {
-        const pluginState = (this as Plugin).getState(state);
-        if (pluginState.updatedBlocks.size === 0) {
-          return undefined;
-        }
-
-        const decorations: Decoration[] = [];
-
-        state.doc.descendants((node, pos) => {
-          if (!node.attrs.id) {
-            return;
-          }
+            const prevAttrs =
+              pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
+            const decorationAttrs: any = {};
 
-          if (!pluginState.updatedBlocks.has(node.attrs.id)) {
-            return;
-          }
-
-          const prevAttrs =
-            pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
-          const decorationAttrs: any = {};
+            for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
+              decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
+                val || "none";
+            }
 
-          for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
-            decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
-              val || "none";
-          }
+            // for debugging:
+            // console.log(
+            //   "previousBlockTypePlugin committing decorations",
+            //   decorationAttrs
+            // );
 
-          // for debugging:
-          // console.log(
-          //   "previousBlockTypePlugin committing decorations",
-          //   decorationAttrs
-          // );
+            const decoration = Decoration.node(pos, pos + node.nodeSize, {
+              ...decorationAttrs,
+            });
 
-          const decoration = Decoration.node(pos, pos + node.nodeSize, {
-            ...decorationAttrs,
+            decorations.push(decoration);
           });
 
-          decorations.push(decoration);
-        });
-
-        return DecorationSet.create(state.doc, decorations);
+          return DecorationSet.create(state.doc, decorations);
+        },
       },
-    },
-  });
-};
+    });
+  }
+}

package/types/src/api/blockManipulation/commands/removeBlocks/removeBlocks.d.ts

@@ -1,7 +1,4 @@
-import { Node } from "prosemirror-model";
-import { Transaction } from "prosemirror-state";
 import { Block } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
 import { BlockIdentifier, BlockSchema, InlineContentSchema, StyleSchema } from "../../../../schema/index.js";
-export declare function removeBlocksWithCallback<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blocksToRemove: BlockIdentifier[], callback?: (node: Node, pos: number, tr: Transaction, removedSize: number) => number): Block<BSchema, I, S>[];
 export declare function removeBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blocksToRemove: BlockIdentifier[]): Block<BSchema, I, S>[];

package/types/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.d.ts

@@ -1,6 +1,10 @@
 import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
 import { BlockIdentifier, BlockSchema, InlineContentSchema, StyleSchema } from "../../../../schema/index.js";
+export declare function removeAndInsertBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blocksToRemove: BlockIdentifier[], blocksToInsert: PartialBlock<BSchema, I, S>[]): {
+    insertedBlocks: Block<BSchema, I, S>[];
+    removedBlocks: Block<BSchema, I, S>[];
+};
 export declare function replaceBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blocksToRemove: BlockIdentifier[], blocksToInsert: PartialBlock<BSchema, I, S>[]): {
     insertedBlocks: Block<BSchema, I, S>[];
     removedBlocks: Block<BSchema, I, S>[];

package/types/src/api/blockManipulation/setupTestEnv.d.ts

@@ -211,9 +211,6 @@ export declare function setupTestEnv(): () => BlockNoteEditor<import("../../inde
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -223,9 +220,6 @@ export declare function setupTestEnv(): () => BlockNoteEditor<import("../../inde
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };

package/types/src/api/clipboard/fromClipboard/acceptedMIMETypes.d.ts

@@ -1 +1 @@
-export declare const acceptedMIMETypes: readonly ["vscode-editor-data", "blocknote/html", "Files", "text/html", "text/plain"];
+export declare const acceptedMIMETypes: readonly ["vscode-editor-data", "blocknote/html", "text/html", "text/plain", "Files"];

package/types/src/api/getBlockInfoFromPos.d.ts

@@ -37,18 +37,17 @@ export type BlockInfo = {
     isBlockContainer: true;
 });
 /**
- * Retrieves the position just before the nearest blockContainer node in a
- * ProseMirror doc, relative to a position. If the position is within a
- * blockContainer node or its descendants, the position just before it is
- * returned. If the position is not within a blockContainer node or its
- * descendants, the position just before the next closest blockContainer node
- * is returned. If the position is beyond the last blockContainer, the position
- * just before the last blockContainer is returned.
+ * Retrieves the position just before the nearest block node in a ProseMirror
+ * doc, relative to a position. If the position is within a block node or its
+ * descendants, the position just before it is returned. If the position is not
+ * within a block node or its descendants, the position just before the next
+ * closest block node is returned. If the position is beyond the last block, the
+ * position just before the last block is returned.
  * @param doc The ProseMirror doc.
  * @param pos An integer position in the document.
  * @returns The position just before the nearest blockContainer node.
  */
-export declare function getNearestBlockContainerPos(doc: Node, pos: number): {
+export declare function getNearestBlockPos(doc: Node, pos: number): {
     posBeforeNode: number;
     node: Node;
 };
@@ -60,7 +59,7 @@ export declare function getNearestBlockContainerPos(doc: Node, pos: number): {
  * the ProseMirror positions just before & after each node.
  * @param node The main `blockContainer` node that the block information should
  * be retrieved from,
- * @param blockContainerBeforePosOffset the position just before the
+ * @param bnBlockBeforePosOffset the position just before the
  * `blockContainer` node in the document.
  */
 export declare function getBlockInfoWithManualOffset(node: Node, bnBlockBeforePosOffset: number): BlockInfo;
@@ -92,29 +91,5 @@ export declare function getBlockInfoFromResolvedPos(resolvedPos: ResolvedPos): B
  * selection.
  * @param state The ProseMirror editor state.
  */
-export declare function getBlockInfoFromSelection(state: EditorState): {
-    /**
-     * The outer node that represents a BlockNote block. This is the node that has the ID.
-     * Most of the time, this will be a blockContainer node, but it could also be a Column or ColumnList
-     */
-    bnBlock: SingleBlockInfo;
-    /**
-     * The type of BlockNote block that this node represents.
-     * When dealing with a blockContainer, this is retrieved from the blockContent node, otherwise it's retrieved from the bnBlock node.
-     */
-    blockNoteType: string;
-} & {
-    /**
-     * The Prosemirror node that holds block.children. For blockContainers, this is the blockGroup node, if it exists.
-     */
-    childContainer?: SingleBlockInfo | undefined;
-    /**
-     * The Prosemirror node that wraps block.content and has most of the props
-     */
-    blockContent: SingleBlockInfo;
-    /**
-     * Whether bnBlock is a blockContainer node
-     */
-    isBlockContainer: true;
-};
+export declare function getBlockInfoFromSelection(state: EditorState): BlockInfo;
 export {};

package/types/src/api/testUtil/cases/customBlocks.d.ts

@@ -339,9 +339,6 @@ declare const schema: BlockNoteSchema<import("../../../schema/index.js").BlockSc
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -351,9 +348,6 @@ declare const schema: BlockNoteSchema<import("../../../schema/index.js").BlockSc
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };

package/types/src/api/testUtil/cases/customInlineContent.d.ts

@@ -213,9 +213,6 @@ declare const schema: BlockNoteSchema<import("../../../index.js").BlockSchemaFro
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -225,9 +222,6 @@ declare const schema: BlockNoteSchema<import("../../../index.js").BlockSchemaFro
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };

package/types/src/api/testUtil/cases/customStyles.d.ts

@@ -213,9 +213,6 @@ declare const schema: BlockNoteSchema<import("../../../index.js").BlockSchemaFro
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -225,9 +222,6 @@ declare const schema: BlockNoteSchema<import("../../../index.js").BlockSchemaFro
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };

package/types/src/blocks/TableBlockContent/TableBlockContent.d.ts

@@ -1,8 +1,5 @@
 import { Node } from "@tiptap/core";
 export declare const tablePropSchema: {
-    backgroundColor: {
-        default: "default";
-    };
     textColor: {
         default: "default";
     };
@@ -18,9 +15,6 @@ export declare const Table: {
         type: "table";
         content: "table";
         propSchema: {
-            backgroundColor: {
-                default: "default";
-            };
             textColor: {
                 default: "default";
             };
@@ -30,9 +24,6 @@ export declare const Table: {
         type: "table";
         content: "table";
         propSchema: {
-            backgroundColor: {
-                default: "default";
-            };
             textColor: {
                 default: "default";
             };

package/types/src/blocks/defaultBlocks.d.ts

@@ -212,9 +212,6 @@ export declare const defaultBlockSpecs: {
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -224,9 +221,6 @@ export declare const defaultBlockSpecs: {
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -658,9 +652,6 @@ export declare const defaultBlockSchema: import("../schema/index.js").BlockSchem
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };
@@ -670,9 +661,6 @@ export declare const defaultBlockSchema: import("../schema/index.js").BlockSchem
             type: "table";
             content: "table";
             propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
                 textColor: {
                     default: "default";
                 };