@blocknote/core 0.32.0 → 0.34.0

package/src/editor/BlockNoteEditor.ts

@@ -120,6 +120,7 @@ import { EventEmitter } from "../util/EventEmitter.js";
 import { BlockNoteExtension } from "./BlockNoteExtension.js";
 
 import "../style.css";
+import { BlockChangePlugin } from "../extensions/BlockChange/BlockChangePlugin.js";
 
 /**
  * A factory function that returns a BlockNoteExtension
@@ -312,15 +313,6 @@ export type BlockNoteEditorOptions<
    */
   setIdAttribute?: boolean;
 
-  /**
-   * The detection mode for showing the side menu - "viewport" always shows the
-   * side menu for the block next to the mouse cursor, while "editor" only shows
-   * it when hovering the editor or the side menu itself.
-   *
-   * @default "viewport"
-   */
-  sideMenuDetection: "viewport" | "editor";
-
   /**
    Select desired behavior when pressing `Tab` (or `Shift-Tab`). Specifically,
    what should happen when a user has selected multiple blocks while a toolbar
@@ -639,7 +631,6 @@ export class BlockNoteEditor<
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
       tabBehavior: newOptions.tabBehavior,
-      sideMenuDetection: newOptions.sideMenuDetection || "viewport",
       comments: newOptions.comments,
       pasteHandler: newOptions.pasteHandler,
     });
@@ -1606,6 +1597,32 @@ export class BlockNoteEditor<
     (this.extensions["yCursorPlugin"] as CursorPlugin).updateUser(user);
   }
 
+  /**
+   * Registers a callback which will be called before any change is applied to the editor, allowing you to cancel the change.
+   */
+  public beforeChange(
+    /**
+     * If the callback returns `false`, the change will be canceled & not applied to the editor.
+     */
+    callback: (
+      editor: BlockNoteEditor<BSchema, ISchema, SSchema>,
+      context: {
+        getChanges: () => BlocksChanged<BSchema, ISchema, SSchema>;
+        tr: Transaction;
+      },
+    ) => boolean | void,
+  ): () => void {
+    if (this.headless) {
+      return () => {
+        // noop
+      };
+    }
+
+    return (this.extensions["blockChange"] as BlockChangePlugin).subscribe(
+      (context) => callback(this, context),
+    );
+  }
+
   /**
    * A callback function that runs whenever the editor's contents change.
    *

package/src/editor/BlockNoteExtensions.ts

@@ -11,6 +11,7 @@ import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboar
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
 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 { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
 import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
@@ -90,7 +91,6 @@ type ExtensionOptions<
     string | undefined
   >;
   tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
-  sideMenuDetection: "viewport" | "editor";
   comments?: {
     threadStore: ThreadStore;
   };
@@ -133,10 +133,7 @@ export const getBlockNoteExtensions = <
     opts.editor,
   );
   ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
-  ret["sideMenu"] = new SideMenuProsemirrorPlugin(
-    opts.editor,
-    opts.sideMenuDetection,
-  );
+  ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
   ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
   ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
   ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);
@@ -150,6 +147,7 @@ export const getBlockNoteExtensions = <
   }
 
   ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin();
+  ret["blockChange"] = new BlockChangePlugin();
 
   ret["showSelection"] = new ShowSelectionPlugin(opts.editor);
 

package/src/exporter/Exporter.ts

@@ -90,12 +90,14 @@ export abstract class Exporter<
     block: BlockFromConfig<B[keyof B], I, S>,
     nestingLevel: number,
     numberedListIndex: number,
+    children?: Array<Awaited<RB>>,
   ) {
     return this.mappings.blockMapping[block.type](
       block,
       this,
       nestingLevel,
       numberedListIndex,
+      children,
     );
   }
 }

package/src/exporter/mapping.ts

@@ -27,6 +27,7 @@ export type BlockMapping<
     exporter: Exporter<any, any, any, RB, RI, any, any>,
     nestingLevel: number,
     numberedListIndex?: number,
+    children?: Array<Awaited<RB>>,
   ) => RB | Promise<RB>;
 };
 

package/src/extensions/BlockChange/BlockChangePlugin.ts

@@ -0,0 +1,66 @@
+import { Plugin, Transaction } from "prosemirror-state";
+import { getBlocksChangedByTransaction } from "../../api/nodeUtil.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { BlocksChanged } from "../../index.js";
+
+/**
+ * This plugin can filter transactions before they are applied to the editor, but with a higher-level API than `filterTransaction` from prosemirror.
+ */
+export class BlockChangePlugin extends BlockNoteExtension {
+  public static key() {
+    return "blockChange";
+  }
+
+  private beforeChangeCallbacks: ((context: {
+    getChanges: () => BlocksChanged<any, any, any>;
+    tr: Transaction;
+  }) => boolean | void)[] = [];
+
+  constructor() {
+    super();
+
+    this.addProsemirrorPlugin(
+      new Plugin({
+        filterTransaction: (tr) => {
+          let changes:
+            | ReturnType<typeof getBlocksChangedByTransaction>
+            | undefined = undefined;
+
+          return this.beforeChangeCallbacks.reduce((acc, cb) => {
+            if (acc === false) {
+              // We only care that we hit a `false` result, so we can stop iterating.
+              return acc;
+            }
+            return (
+              cb({
+                getChanges() {
+                  if (changes) {
+                    return changes;
+                  }
+                  changes = getBlocksChangedByTransaction(tr);
+                  return changes;
+                },
+                tr,
+              }) !== false
+            );
+          }, true);
+        },
+      }),
+    );
+  }
+
+  public subscribe(
+    callback: (context: {
+      getChanges: () => BlocksChanged<any, any, any>;
+      tr: Transaction;
+    }) => boolean | void,
+  ) {
+    this.beforeChangeCallbacks.push(callback);
+
+    return () => {
+      this.beforeChangeCallbacks = this.beforeChangeCallbacks.filter(
+        (cb) => cb !== callback,
+      );
+    };
+  }
+}

package/src/extensions/Collaboration/CursorPlugin.ts

@@ -131,6 +131,27 @@ export class CursorPlugin extends BlockNoteExtension {
     this.provider.awareness.setLocalStateField("user", user);
   };
 
+  /**
+   * Determine whether the foreground color should be white or black based on a provided background color
+   * Inspired by: https://stackoverflow.com/a/3943023
+   *
+   */
+  public static isDarkColor(bgColor: string): boolean {
+    const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+    const r = parseInt(color.substring(0, 2), 16); // hexToR
+    const g = parseInt(color.substring(2, 4), 16); // hexToG
+    const b = parseInt(color.substring(4, 6), 16); // hexToB
+    const uicolors = [r / 255, g / 255, b / 255];
+    const c = uicolors.map((col) => {
+      if (col <= 0.03928) {
+        return col / 12.92;
+      }
+      return Math.pow((col + 0.055) / 1.055, 2.4);
+    });
+    const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+    return L <= 0.179;
+  }
+
   public static defaultCursorRender = (user: CollaborationUser) => {
     const cursorElement = document.createElement("span");
 
@@ -139,12 +160,22 @@ export class CursorPlugin extends BlockNoteExtension {
     const caretElement = document.createElement("span");
     caretElement.setAttribute("contentedEditable", "false");
     caretElement.classList.add("bn-collaboration-cursor__caret");
-    caretElement.setAttribute("style", `background-color: ${user.color}`);
+    caretElement.setAttribute(
+      "style",
+      `background-color: ${user.color}; color: ${
+        CursorPlugin.isDarkColor(user.color) ? "white" : "black"
+      }`,
+    );
 
     const labelElement = document.createElement("span");
 
     labelElement.classList.add("bn-collaboration-cursor__label");
-    labelElement.setAttribute("style", `background-color: ${user.color}`);
+    labelElement.setAttribute(
+      "style",
+      `background-color: ${user.color}; color: ${
+        CursorPlugin.isDarkColor(user.color) ? "white" : "black"
+      }`,
+    );
     labelElement.insertBefore(document.createTextNode(user.name), null);
 
     caretElement.insertBefore(labelElement, null);