@blocknote/core 0.38.0 → 0.39.1

package/src/editor/BlockNoteExtension.ts

@@ -1,6 +1,15 @@
 import { Plugin } from "prosemirror-state";
 import { EventEmitter } from "../util/EventEmitter.js";
 
+import { AnyExtension } from "@tiptap/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  PartialBlockNoDefaults,
+  StyleSchema,
+} from "../schema/index.js";
+import { BlockNoteEditor } from "./BlockNoteEditor.js";
+
 export abstract class BlockNoteExtension<
   TEvent extends Record<string, any> = any,
 > extends EventEmitter<TEvent> {
@@ -23,4 +32,87 @@ export abstract class BlockNoteExtension<
     // Allow subclasses to have constructors with parameters
     // without this, we can't easily implement BlockNoteEditor.extension(MyExtension) pattern
   }
+
+  /**
+   * Input rules for the block
+   */
+  public inputRules?: InputRule[];
+
+  /**
+   * A mapping of a keyboard shortcut to a function that will be called when the shortcut is pressed
+   *
+   * The keys are in the format:
+   * - Key names may be strings like `Shift-Ctrl-Enter`—a key identifier prefixed with zero or more modifiers
+   * - Key identifiers are based on the strings that can appear in KeyEvent.key
+   * - Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held)
+   * - You may use `Space` as an alias for the " " name
+   * - Modifiers can be given in any order: `Shift-` (or `s-`), `Alt-` (or `a-`), `Ctrl-` (or `c-` or `Control-`) and `Cmd-` (or `m-` or `Meta-`)
+   * - For characters that are created by holding shift, the Shift- prefix is implied, and should not be added explicitly
+   * - You can use Mod- as a shorthand for Cmd- on Mac and Ctrl- on other platforms
+   *
+   * @example
+   * ```typescript
+   * keyboardShortcuts: {
+   *   "Mod-Enter": (ctx) => {  return true; },
+   *   "Shift-Ctrl-Space": (ctx) => { return true; },
+   *   "a": (ctx) => { return true; },
+   *   "Space": (ctx) => { return true; }
+   * }
+   * ```
+   */
+  public keyboardShortcuts?: Record<
+    string,
+    (ctx: {
+      editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>;
+    }) => boolean
+  >;
+
+  public tiptapExtensions?: AnyExtension[];
+}
+
+export type InputRule = {
+  /**
+   * The regex to match when to trigger the input rule
+   */
+  find: RegExp;
+  /**
+   * The function to call when the input rule is matched
+   * @returns undefined if the input rule should not be triggered, or an object with the type and props to update the block
+   */
+  replace: (props: {
+    /**
+     * The result of the regex match
+     */
+    match: RegExpMatchArray;
+    // TODO this will be a Point, when we have the Location API
+    /**
+     * The range of the text that was matched
+     */
+    range: { from: number; to: number };
+    /**
+     * The editor instance
+     */
+    editor: BlockNoteEditor<any, any, any>;
+  }) => undefined | PartialBlockNoDefaults<any, any, any>;
+};
+
+/**
+ * This creates an instance of a BlockNoteExtension that can be used to add to a schema.
+ * It is a bit of a hack, but it works.
+ */
+export function createBlockNoteExtension(
+  options: Partial<
+    Pick<
+      BlockNoteExtension,
+      "inputRules" | "keyboardShortcuts" | "plugins" | "tiptapExtensions"
+    >
+  > & { key: string },
+) {
+  const x = Object.create(BlockNoteExtension.prototype);
+  x.key = options.key;
+  x.inputRules = options.inputRules;
+  x.keyboardShortcuts = options.keyboardShortcuts;
+  x.plugins = options.plugins ?? [];
+  x.tiptapExtensions = options.tiptapExtensions;
+  return x as BlockNoteExtension;
 }

package/src/editor/BlockNoteExtensions.ts

@@ -1,4 +1,4 @@
-import { AnyExtension, Extension, extensions } from "@tiptap/core";
+import { AnyExtension, Extension, extensions, Node } from "@tiptap/core";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
@@ -13,8 +13,10 @@ import type { ThreadStore } from "../comments/index.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
 import { BlockChangePlugin } from "../extensions/BlockChange/BlockChangePlugin.js";
 import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
 import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
+import { SchemaMigrationPlugin } from "../extensions/Collaboration/schemaMigration/SchemaMigrationPlugin.js";
 import { CommentMark } from "../extensions/Comments/CommentMark.js";
 import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
@@ -57,8 +59,7 @@ import type {
   BlockNoteEditorOptions,
   SupportedExtension,
 } from "./BlockNoteEditor.js";
-import { BlockNoteSchema } from "./BlockNoteSchema.js";
-import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
+import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -127,6 +128,9 @@ export const getBlockNoteExtensions = <
       editor: opts.editor,
       collaboration: opts.collaboration,
     });
+    ret["schemaMigrationPlugin"] = new SchemaMigrationPlugin(
+      opts.collaboration.fragment,
+    );
   }
 
   // Note: this is pretty hardcoded and will break when user provides plugins with same keys.
@@ -226,11 +230,11 @@ const getTipTapExtensions = <
       // only call this once if we have multiple editors installed. Or fix https://github.com/ueberdosis/tiptap/issues/5450
       protocols: LINKIFY_INITIALIZED ? [] : VALID_LINK_PROTOCOLS,
     }),
-    ...Object.values(opts.styleSpecs).map((styleSpec) => {
+    ...(Object.values(opts.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark.configure({
         editor: opts.editor as any,
       });
-    }),
+    }) as any[]),
 
     TextColorExtension,
 
@@ -276,18 +280,15 @@ const getTipTapExtensions = <
 
     ...Object.values(opts.blockSpecs).flatMap((blockSpec) => {
       return [
-        // dependent nodes (e.g.: tablecell / row)
-        ...(blockSpec.implementation.requiredExtensions || []).map((ext) =>
-          ext.configure({
-            editor: opts.editor,
-            domAttributes: opts.domAttributes,
-          }),
-        ),
-        // the actual node itself
-        blockSpec.implementation.node.configure({
-          editor: opts.editor,
-          domAttributes: opts.domAttributes,
-        }),
+        // the node extension implementations
+        ...("node" in blockSpec.implementation
+          ? [
+              (blockSpec.implementation.node as Node).configure({
+                editor: opts.editor,
+                domAttributes: opts.domAttributes,
+              }),
+            ]
+          : []),
       ];
     }),
     createCopyToClipboardExtension(opts.editor),

package/src/editor/defaultColors.ts

@@ -35,7 +35,7 @@ export const COLORS_DEFAULT = {
     text: "#ad1a72",
     background: "#f4dfeb",
   },
-};
+} as Record<string, { text: string; background: string }>;
 
 export const COLORS_DARK_MODE_DEFAULT = {
   gray: {
@@ -74,4 +74,4 @@ export const COLORS_DARK_MODE_DEFAULT = {
     text: "#da208f",
     background: "#ad1a72",
   },
-};
+} as Record<string, { text: string; background: string }>;

package/src/exporter/Exporter.ts

@@ -1,4 +1,4 @@
-import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
 import { COLORS_DEFAULT } from "../editor/defaultColors.js";
 import {
   BlockFromConfig,

package/src/exporter/mapping.ts

@@ -1,4 +1,4 @@
-import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
 import {
   BlockFromConfigNoChildren,
   BlockSchema,

package/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { defaultProps } from "../../blocks/defaultProps.js";
+import { getBackgroundColorAttribute } from "../../blocks/defaultProps.js";
 
 export const BackgroundColorExtension = Extension.create({
   name: "blockBackgroundColor",
@@ -7,26 +7,9 @@ export const BackgroundColorExtension = Extension.create({
   addGlobalAttributes() {
     return [
       {
-        types: ["blockContainer", "tableCell", "tableHeader"],
+        types: ["tableCell", "tableHeader"],
         attributes: {
-          backgroundColor: {
-            default: defaultProps.backgroundColor.default,
-            parseHTML: (element) =>
-              element.hasAttribute("data-background-color")
-                ? element.getAttribute("data-background-color")
-                : defaultProps.backgroundColor.default,
-            renderHTML: (attributes) => {
-              if (
-                attributes.backgroundColor ===
-                defaultProps.backgroundColor.default
-              ) {
-                return {};
-              }
-              return {
-                "data-background-color": attributes.backgroundColor,
-              };
-            },
-          },
+          backgroundColor: getBackgroundColorAttribute(),
         },
       },
     ];

package/src/extensions/BackgroundColor/BackgroundColorMark.ts

@@ -1,18 +1,13 @@
 import { Mark } from "@tiptap/core";
 import { createStyleSpecFromTipTapMark } from "../../schema/index.js";
+import { getBackgroundColorAttribute } from "../../blocks/defaultProps.js";
 
 const BackgroundColorMark = Mark.create({
   name: "backgroundColor",
 
   addAttributes() {
     return {
-      stringValue: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute("data-background-color"),
-        renderHTML: (attributes) => ({
-          "data-background-color": attributes.stringValue,
-        }),
-      },
+      stringValue: getBackgroundColorAttribute("stringValue"),
     };
   },
 
@@ -25,7 +20,10 @@ const BackgroundColorMark = Mark.create({
             return false;
           }
 
-          if (element.hasAttribute("data-background-color")) {
+          if (
+            element.hasAttribute("data-background-color") ||
+            element.style.backgroundColor
+          ) {
             return {
               stringValue: element.getAttribute("data-background-color"),
             };

package/src/extensions/BlockChange/BlockChangePlugin.ts

@@ -1,4 +1,4 @@
-import { Plugin, Transaction } from "prosemirror-state";
+import { Plugin, PluginKey, Transaction } from "prosemirror-state";
 import {
   BlocksChanged,
   getBlocksChangedByTransaction,
@@ -23,6 +23,7 @@ export class BlockChangePlugin extends BlockNoteExtension {
 
     this.addProsemirrorPlugin(
       new Plugin({
+        key: new PluginKey("blockChange"),
         filterTransaction: (tr) => {
           let changes:
             | ReturnType<typeof getBlocksChangedByTransaction>

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-editor-forked.json

@@ -8,7 +8,7 @@
         "type": "text",
       },
     ],
-    "id": "2",
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -19,7 +19,7 @@
   {
     "children": [],
     "content": [],
-    "id": "3",
+    "id": "4",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-editor.json

@@ -8,7 +8,7 @@
         "type": "text",
       },
     ],
-    "id": "0",
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -19,7 +19,7 @@
   {
     "children": [],
     "content": [],
-    "id": "1",
+    "id": "2",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-forked.html

@@ -1 +1 @@
-<blockgroup><blockcontainer backgroundColor="default" id="2" textColor="default"><paragraph textAlignment="left">Hello World</paragraph></blockcontainer><blockcontainer backgroundColor="default" id="3" textColor="default"><paragraph textAlignment="left"></paragraph></blockcontainer></blockgroup>
+<blockgroup><blockcontainer id="3"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello World</paragraph></blockcontainer><blockcontainer id="4"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap.html

@@ -1 +1 @@
-<blockgroup><blockcontainer backgroundColor="default" id="0" textColor="default"><paragraph textAlignment="left">Hello</paragraph></blockcontainer><blockcontainer backgroundColor="default" id="1" textColor="default"><paragraph textAlignment="left"></paragraph></blockcontainer></blockgroup>
+<blockgroup><blockcontainer id="1"><paragraph backgroundColor="default" textAlignment="left" textColor="default">Hello</paragraph></blockcontainer><blockcontainer id="2"><paragraph backgroundColor="default" textAlignment="left" textColor="default"></paragraph></blockcontainer></blockgroup>

package/src/extensions/Collaboration/schemaMigration/SchemaMigrationPlugin.ts

@@ -0,0 +1,52 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { ySyncPluginKey } from "y-prosemirror";
+import * as Y from "yjs";
+
+import { BlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import migrationRules from "./migrationRules/index.js";
+
+// This plugin allows us to update collaboration YDocs whenever BlockNote's
+// underlying ProseMirror schema changes. The plugin reads the current Yjs
+// fragment and dispatches additional transactions to the ProseMirror state, in
+// case things are found in the fragment that don't adhere to the editor schema
+// and need to be fixed. These fixes are defined as `MigrationRule`s within the
+// `migrationRules` directory.
+export class SchemaMigrationPlugin extends BlockNoteExtension {
+  private migrationDone = false;
+
+  public static key() {
+    return "schemaMigrationPlugin";
+  }
+
+  constructor(fragment: Y.XmlFragment) {
+    const pluginKey = new PluginKey(SchemaMigrationPlugin.key());
+
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: pluginKey,
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (this.migrationDone) {
+            return undefined;
+          }
+
+          if (
+            transactions.length !== 1 ||
+            !transactions[0].getMeta(ySyncPluginKey)
+          ) {
+            return undefined;
+          }
+
+          const tr = newState.tr;
+          for (const migrationRule of migrationRules) {
+            migrationRule(fragment, tr);
+          }
+
+          this.migrationDone = true;
+
+          return tr;
+        },
+      }),
+    );
+  }
+}

package/src/extensions/Collaboration/schemaMigration/migrationRules/index.ts

@@ -0,0 +1,4 @@
+import { MigrationRule } from "./migrationRule.js";
+import { moveColorAttributes } from "./moveColorAttributes.js";
+
+export default [moveColorAttributes] as MigrationRule[];

package/src/extensions/Collaboration/schemaMigration/migrationRules/migrationRule.ts

@@ -0,0 +1,4 @@
+import { Transaction } from "@tiptap/pm/state";
+import * as Y from "yjs";
+
+export type MigrationRule = (fragment: Y.XmlFragment, tr: Transaction) => void;

package/src/extensions/Collaboration/schemaMigration/migrationRules/moveColorAttributes.ts

@@ -0,0 +1,78 @@
+import * as Y from "yjs";
+
+import { MigrationRule } from "./migrationRule.js";
+import { defaultProps } from "../../../../blocks/defaultProps.js";
+
+// Helper function to recursively traverse a `Y.XMLElement` and its descendant
+// elements.
+const traverseElement = (
+  rootElement: Y.XmlElement,
+  cb: (element: Y.XmlElement) => void,
+) => {
+  cb(rootElement);
+  rootElement.forEach((element) => {
+    if (element instanceof Y.XmlElement) {
+      traverseElement(element, cb);
+    }
+  });
+};
+
+// Moves `textColor` and `backgroundColor` attributes from `blockContainer`
+// nodes to their child `blockContent` nodes. This is due to a schema change
+// introduced in PR #TODO.
+export const moveColorAttributes: MigrationRule = (fragment, tr) => {
+  // Stores necessary info for all `blockContainer` nodes which still have
+  // `textColor` or `backgroundColor` attributes that need to be moved.
+  const targetBlockContainers: Record<
+    string,
+    {
+      textColor?: string;
+      backgroundColor?: string;
+    }
+  > = {};
+
+  // Finds all elements which still have `textColor` or `backgroundColor`
+  // attributes in the current Yjs fragment.
+  fragment.forEach((element) => {
+    if (element instanceof Y.XmlElement) {
+      traverseElement(element, (element) => {
+        if (
+          element.nodeName === "blockContainer" &&
+          element.hasAttribute("id")
+        ) {
+          const colors = {
+            textColor: element.getAttribute("textColor"),
+            backgroundColor: element.getAttribute("backgroundColor"),
+          };
+
+          if (colors.textColor === defaultProps.textColor.default) {
+            colors.textColor = undefined;
+          }
+          if (colors.backgroundColor === defaultProps.backgroundColor.default) {
+            colors.backgroundColor = undefined;
+          }
+
+          if (colors.textColor || colors.backgroundColor) {
+            targetBlockContainers[element.getAttribute("id")!] = colors;
+          }
+        }
+      });
+    }
+  });
+
+  // Appends transactions to add the `textColor` and `backgroundColor`
+  // attributes found on each `blockContainer` node to move them to the child
+  // `blockContent` node.
+  tr.doc.descendants((node, pos) => {
+    if (
+      node.type.name === "blockContainer" &&
+      targetBlockContainers[node.attrs.id]
+    ) {
+      tr = tr.setNodeMarkup(
+        pos + 1,
+        undefined,
+        targetBlockContainers[node.attrs.id],
+      );
+    }
+  });
+};

package/src/extensions/Comments/CommentsPlugin.ts

@@ -10,7 +10,7 @@ import type {
 } from "../../comments/index.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
+import { BlockNoteSchema } from "../../blocks/BlockNoteSchema.js";
 import { UserStore } from "./userstore/UserStore.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-comments`);

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -7,7 +7,6 @@ import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import type {
   BlockFromConfig,
-  FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
@@ -17,7 +16,7 @@ export type FilePanelState<
   S extends StyleSchema,
 > = UiElementPosition & {
   // TODO: This typing is not quite right (children should be from BSchema)
-  block: BlockFromConfig<FileBlockConfig, I, S>;
+  block: BlockFromConfig<any, I, S>;
 };
 
 export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
@@ -27,11 +26,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   public emitUpdate: () => void;
 
   constructor(
-    private readonly editor: BlockNoteEditor<
-      Record<string, FileBlockConfig>,
-      I,
-      S
-    >,
+    private readonly editor: BlockNoteEditor<Record<string, any>, I, S>,
     private readonly pluginKey: PluginKey<FilePanelState<I, S>>,
     private readonly pmView: EditorView,
     emitUpdate: (state: FilePanelState<I, S>) => void,
@@ -145,17 +140,17 @@ export class FilePanelProsemirrorPlugin<
 
   private view: FilePanelView<I, S> | undefined;
 
-  constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>) {
+  constructor(editor: BlockNoteEditor<Record<string, any>, I, S>) {
     super();
     this.addProsemirrorPlugin(
       new Plugin<{
-        block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
+        block: BlockFromConfig<any, I, S> | undefined;
       }>({
         key: filePanelPluginKey,
         view: (editorView) => {
           this.view = new FilePanelView<I, S>(
             editor,
-            filePanelPluginKey,
+            filePanelPluginKey as any,
             editorView,
             (state) => {
               this.emit("update", state);

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -127,7 +127,7 @@ export class FormattingToolbarView implements PluginView {
     if (!element) {
       return false;
     }
-    const editorWrapper = this.pmView.dom.parentElement;
+    const editorWrapper = this.pmView.dom.parentElement!;
     if (!editorWrapper) {
       return false;
     }

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -470,9 +470,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
           commands.command(({ state }) => {
             const blockInfo = getBlockInfoFromSelection(state);
 
-            const blockHardBreakShortcut: "shift+enter" | "enter" | "none" =
-              this.options.editor.schema.blockSchema[blockInfo.blockNoteType]
-                .hardBreakShortcut ?? "shift+enter";
+            const blockHardBreakShortcut =
+              this.options.editor.schema.blockSchema[
+                blockInfo.blockNoteType as keyof typeof this.options.editor.schema.blockSchema
+              ].meta?.hardBreakShortcut ?? "shift+enter";
 
             if (blockHardBreakShortcut === "none") {
               return false;

package/src/extensions/Placeholder/PlaceholderPlugin.ts

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

package/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -124,7 +124,7 @@ export class PreviousBlockTypePlugin extends BlockNoteExtension {
                   depth: newState.doc.resolve(node.pos).depth,
                 };
 
-                let oldAttrs = {
+                const oldAttrs = {
                   index: oldContentNode.attrs.index,
                   level: oldContentNode.attrs.level,
                   type: oldContentNode.type.name,
@@ -134,28 +134,6 @@ export class PreviousBlockTypePlugin extends BlockNoteExtension {
                 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;
 

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -733,9 +733,7 @@ export class SideMenuProsemirrorPlugin<
    * Handles drag & drop events for blocks.
    */
   blockDragEnd = () => {
-    if (this.editor.prosemirrorView) {
-      unsetDragImage(this.editor.prosemirrorView.root);
-    }
+    unsetDragImage(this.editor.prosemirrorView.root);
 
     if (this.view) {
       this.view.isDragOrigin = false;