@blocknote/core 0.30.1 → 0.31.1

package/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -1,6 +1,7 @@
 import { findChildren } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
@@ -23,199 +24,211 @@ 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 class PreviousBlockTypePlugin {
-  public readonly plugin: Plugin;
+export class PreviousBlockTypePlugin extends BlockNoteExtension {
+  public static key() {
+    return "previousBlockType";
+  }
+
   constructor() {
+    super();
     let timeout: ReturnType<typeof setTimeout>;
-    this.plugin = 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() {
+    this.addProsemirrorPlugin(
+      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
+            // );
 
-                // 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;
+            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;
+                  }
                 }
-              }
 
-              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;
+
+                // 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.prevTransactionOldBlockAttrs =
-            currentTransactionOriginalOldBlockAttrs;
+            prev.prevTransactionOldBlockAttrs =
+              currentTransactionOriginalOldBlockAttrs;
 
-          return prev;
+            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;
+        props: {
+          decorations(state) {
+            const pluginState = (this as Plugin).getState(state);
+            if (pluginState.updatedBlocks.size === 0) {
+              return undefined;
             }
 
-            if (!pluginState.updatedBlocks.has(node.attrs.id)) {
-              return;
-            }
+            const decorations: Decoration[] = [];
 
-            const prevAttrs =
-              pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
-            const decorationAttrs: any = {};
+            state.doc.descendants((node, pos) => {
+              if (!node.attrs.id) {
+                return;
+              }
 
-            for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
-              decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
-                val || "none";
-            }
+              if (!pluginState.updatedBlocks.has(node.attrs.id)) {
+                return;
+              }
 
-            // for debugging:
-            // console.log(
-            //   "previousBlockTypePlugin committing decorations",
-            //   decorationAttrs
-            // );
+              const prevAttrs =
+                pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
+              const decorationAttrs: any = {};
 
-            const decoration = Decoration.node(pos, pos + node.nodeSize, {
-              ...decorationAttrs,
-            });
+              for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
+                decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
+                  val || "none";
+              }
+
+              // for debugging:
+              // console.log(
+              //   "previousBlockTypePlugin committing decorations",
+              //   decorationAttrs
+              // );
 
-            decorations.push(decoration);
-          });
+              const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                ...decorationAttrs,
+              });
 
-          return DecorationSet.create(state.doc, decorations);
+              decorations.push(decoration);
+            });
+
+            return DecorationSet.create(state.doc, decorations);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }

package/src/extensions/ShowSelection/ShowSelectionPlugin.ts

@@ -1,6 +1,7 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
 
@@ -9,29 +10,35 @@ const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
  * This can be used to highlight the current selection in the UI even when the
  * text editor is not focused.
  */
-export class ShowSelectionPlugin {
-  public readonly plugin: Plugin;
+export class ShowSelectionPlugin extends BlockNoteExtension {
+  public static key() {
+    return "showSelection";
+  }
+
   private enabled = false;
 
   public constructor(private readonly editor: BlockNoteEditor<any, any, any>) {
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      props: {
-        decorations: (state) => {
-          const { doc, selection } = state;
-
-          if (!this.enabled) {
-            return DecorationSet.empty;
-          }
-
-          const dec = Decoration.inline(selection.from, selection.to, {
-            "data-show-selection": "true",
-          });
-
-          return DecorationSet.create(doc, [dec]);
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        props: {
+          decorations: (state) => {
+            const { doc, selection } = state;
+
+            if (!this.enabled) {
+              return DecorationSet.empty;
+            }
+
+            const dec = Decoration.inline(selection.from, selection.to, {
+              "data-show-selection": "true",
+            });
+
+            return DecorationSet.create(doc, [dec]);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   public setEnabled(enabled: boolean) {

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -3,20 +3,20 @@ import {
   EditorState,
   Plugin,
   PluginKey,
-  TextSelection,
   PluginView,
+  TextSelection,
 } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 
 import { Block } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import {
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import { EventEmitter } from "../../util/EventEmitter.js";
 import { initializeESMDependencies } from "../../util/esmDependencies.js";
 import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 import { dragStart, unsetDragImage } from "./dragging.js";
@@ -608,29 +608,34 @@ export class SideMenuProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
+  public static key() {
+    return "sideMenu";
+  }
+
   public view: SideMenuView<BSchema, I, S> | undefined;
-  public readonly plugin: Plugin;
 
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
     sideMenuDetection: "viewport" | "editor",
   ) {
     super();
-    this.plugin = new Plugin({
-      key: sideMenuPluginKey,
-      view: (editorView) => {
-        this.view = new SideMenuView(
-          editor,
-          sideMenuDetection,
-          editorView,
-          (state) => {
-            this.emit("update", state);
-          },
-        );
-        return this.view;
-      },
-    });
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: sideMenuPluginKey,
+        view: (editorView) => {
+          this.view = new SideMenuView(
+            editor,
+            sideMenuDetection,
+            editorView,
+            (state) => {
+              this.emit("update", state);
+            },
+          );
+          return this.view;
+        },
+      }),
+    );
   }
 
   public onUpdate(callback: (state: SideMenuState<BSchema, I, S>) => void) {