@blocknote/core 0.30.1 → 0.31.0

package/src/extensions/Comments/CommentsPlugin.ts

@@ -9,7 +9,7 @@ import type {
   User,
 } from "../../comments/index.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { EventEmitter } from "../../util/EventEmitter.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UserStore } from "./userstore/UserStore.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
@@ -56,8 +56,7 @@ function getUpdatedThreadPositions(doc: Node, markType: string) {
   return threadPositions;
 }
 
-export class CommentsPlugin extends EventEmitter<any> {
-  public readonly plugin: Plugin;
+export class CommentsPlugin extends BlockNoteExtension {
   public readonly userStore: UserStore<User>;
 
   /**
@@ -103,6 +102,7 @@ export class CommentsPlugin extends EventEmitter<any> {
               const trimmedTo = Math.min(
                 pos + node.nodeSize,
                 tr.doc.content.size - 1,
+                tr.doc.content.size - 1,
               );
               tr.removeMark(trimmedFrom, trimmedTo, mark);
               tr.addMark(
@@ -156,86 +156,91 @@ export class CommentsPlugin extends EventEmitter<any> {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;
 
-    this.plugin = new Plugin<CommentsPluginState>({
-      key: PLUGIN_KEY,
-      state: {
-        init() {
-          return {
-            decorations: DecorationSet.empty,
-          };
-        },
-        apply(tr, state) {
-          const action = tr.getMeta(PLUGIN_KEY);
-
-          if (!tr.docChanged && !action) {
-            return state;
-          }
+    this.addProsemirrorPlugin(
+      new Plugin<CommentsPluginState>({
+        key: PLUGIN_KEY,
+        state: {
+          init() {
+            return {
+              decorations: DecorationSet.empty,
+            };
+          },
+          apply(tr, state) {
+            const action = tr.getMeta(PLUGIN_KEY);
+
+            if (!tr.docChanged && !action) {
+              return state;
+            }
 
-          // only update threadPositions if the doc changed
-          const threadPositions = tr.docChanged
-            ? getUpdatedThreadPositions(tr.doc, self.markType)
-            : self.threadPositions;
+            // only update threadPositions if the doc changed
+            const threadPositions = tr.docChanged
+              ? getUpdatedThreadPositions(tr.doc, self.markType)
+              : self.threadPositions;
 
-          if (threadPositions.size > 0 || self.threadPositions.size > 0) {
-            // small optimization; don't emit event if threadPositions before / after were both empty
-            self.threadPositions = threadPositions;
-            self.emitStateUpdate();
-          }
-
-          // update decorations if doc or selected thread changed
-          const decorations = [];
+            if (threadPositions.size > 0 || self.threadPositions.size > 0) {
+              // small optimization; don't emit event if threadPositions before / after were both empty
+              self.threadPositions = threadPositions;
+              self.emitStateUpdate();
+            }
 
-          if (self.selectedThreadId) {
-            const selectedThreadPosition = threadPositions.get(
-              self.selectedThreadId,
-            );
+            // update decorations if doc or selected thread changed
+            const decorations = [];
 
-            if (selectedThreadPosition) {
-              decorations.push(
-                Decoration.inline(
-                  selectedThreadPosition.from,
-                  selectedThreadPosition.to,
-                  {
-                    class: "bn-thread-mark-selected",
-                  },
-                ),
+            if (self.selectedThreadId) {
+              const selectedThreadPosition = threadPositions.get(
+                self.selectedThreadId,
               );
+
+              if (selectedThreadPosition) {
+                decorations.push(
+                  Decoration.inline(
+                    selectedThreadPosition.from,
+                    selectedThreadPosition.to,
+                    {
+                      class: "bn-thread-mark-selected",
+                    },
+                  ),
+                );
+              }
             }
-          }
 
-          return {
-            decorations: DecorationSet.create(tr.doc, decorations),
-          };
-        },
-      },
-      props: {
-        decorations(state) {
-          return PLUGIN_KEY.getState(state)?.decorations ?? DecorationSet.empty;
+            return {
+              decorations: DecorationSet.create(tr.doc, decorations),
+            };
+          },
         },
-        /**
-         * Handle click on a thread mark and mark it as selected
-         */
-        handleClick: (view, pos, event) => {
-          if (event.button !== 0) {
-            return;
-          }
+        props: {
+          decorations(state) {
+            return (
+              PLUGIN_KEY.getState(state)?.decorations ?? DecorationSet.empty
+            );
+          },
+          /**
+           * Handle click on a thread mark and mark it as selected
+           */
+          handleClick: (view, pos, event) => {
+            if (event.button !== 0) {
+              return;
+            }
 
-          const node = view.state.doc.nodeAt(pos);
+            const node = view.state.doc.nodeAt(pos);
 
-          if (!node) {
-            self.selectThread(undefined);
-            return;
-          }
+            if (!node) {
+              self.selectThread(undefined);
+              return;
+            }
 
-          const commentMark = node.marks.find(
-            (mark) => mark.type.name === markType && mark.attrs.orphan !== true,
-          );
+            const commentMark = node.marks.find(
+              (mark) =>
+                mark.type.name === markType && mark.attrs.orphan !== true,
+            );
 
-          const threadId = commentMark?.attrs.threadId as string | undefined;
-          self.selectThread(threadId, false);
+            const threadId = commentMark?.attrs.threadId as string | undefined;
+            self.selectThread(threadId, false);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   /**

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -1,7 +1,9 @@
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
+import { ySyncPluginKey } from "y-prosemirror";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import type {
   BlockFromConfig,
@@ -9,8 +11,6 @@ import type {
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import { EventEmitter } from "../../util/EventEmitter.js";
-import { ySyncPluginKey } from "y-prosemirror";
 
 export type FilePanelState<
   I extends InlineContentSchema,
@@ -138,60 +138,61 @@ const filePanelPluginKey = new PluginKey<FilePanelState<any, any>>(
 export class FilePanelProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
   private view: FilePanelView<I, S> | undefined;
-  public readonly plugin: Plugin;
 
   constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>) {
     super();
-    this.plugin = new Plugin<{
-      block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
-    }>({
-      key: filePanelPluginKey,
-      view: (editorView) => {
-        this.view = new FilePanelView<I, S>(
-          editor,
-          filePanelPluginKey,
-          editorView,
-          (state) => {
-            this.emit("update", state);
-          },
-        );
-        return this.view;
-      },
-      props: {
-        handleKeyDown: (_view, event: KeyboardEvent) => {
-          if (event.key === "Escape" && this.shown) {
-            this.view?.closeMenu();
-            return true;
-          }
-          return false;
+    this.addProsemirrorPlugin(
+      new Plugin<{
+        block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
+      }>({
+        key: filePanelPluginKey,
+        view: (editorView) => {
+          this.view = new FilePanelView<I, S>(
+            editor,
+            filePanelPluginKey,
+            editorView,
+            (state) => {
+              this.emit("update", state);
+            },
+          );
+          return this.view;
         },
-      },
-      state: {
-        init: () => {
-          return {
-            block: undefined,
-          };
+        props: {
+          handleKeyDown: (_view, event: KeyboardEvent) => {
+            if (event.key === "Escape" && this.shown) {
+              this.view?.closeMenu();
+              return true;
+            }
+            return false;
+          },
         },
-        apply: (transaction, prev) => {
-          const state: FilePanelState<I, S> | undefined =
-            transaction.getMeta(filePanelPluginKey);
-
-          if (state) {
-            return state;
-          }
-
-          if (
-            !transaction.getMeta(ySyncPluginKey) &&
-            (transaction.selectionSet || transaction.docChanged)
-          ) {
-            return { block: undefined };
-          }
-          return prev;
+        state: {
+          init: () => {
+            return {
+              block: undefined,
+            };
+          },
+          apply: (transaction, prev) => {
+            const state: FilePanelState<I, S> | undefined =
+              transaction.getMeta(filePanelPluginKey);
+
+            if (state) {
+              return state;
+            }
+
+            if (
+              !transaction.getMeta(ySyncPluginKey) &&
+              (transaction.selectionSet || transaction.docChanged)
+            ) {
+              return { block: undefined };
+            }
+            return prev;
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   public get shown() {

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -3,13 +3,13 @@ import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
 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";
 
 export type FormattingToolbarState = UiElementPosition;
 
@@ -25,7 +25,7 @@ export class FormattingToolbarView implements PluginView {
     state: EditorState;
     from: number;
     to: number;
-  }) => boolean = ({ state, from, to }) => {
+  }) => boolean = ({ view, state, from, to }) => {
     const { doc, selection } = state;
     const { empty } = selection;
 
@@ -43,7 +43,16 @@ export class FormattingToolbarView implements PluginView {
       return false;
     }
 
-    return !(empty || isEmptyTextBlock);
+    if (empty || isEmptyTextBlock) {
+      return false;
+    }
+
+    const focusedElement = document.activeElement;
+    if (!this.isElementWithinEditorWrapper(focusedElement) && view.editable) {
+      // editable editors must have focus for the toolbar to show
+      return false;
+    }
+    return true;
   };
 
   constructor(
@@ -108,8 +117,22 @@ export class FormattingToolbarView implements PluginView {
     }
   };
 
-  viewMousedownHandler = () => {
-    this.preventShow = true;
+  isElementWithinEditorWrapper = (element: Node | null) => {
+    if (!element) {
+      return false;
+    }
+    const editorWrapper = this.pmView.dom.parentElement;
+    if (!editorWrapper) {
+      return false;
+    }
+
+    return editorWrapper.contains(element);
+  };
+
+  viewMousedownHandler = (e: MouseEvent) => {
+    if (!this.isElementWithinEditorWrapper(e.target as Node)) {
+      this.preventShow = true;
+    }
   };
 
   mouseupHandler = () => {
@@ -172,12 +195,18 @@ export class FormattingToolbarView implements PluginView {
       // e.g. the download file button, should still be accessible. Therefore,
       // logic for hiding when the editor is non-editable is handled
       // individually in each button.
-      this.state = {
+      const nextState = {
         show: true,
         referencePos: this.getSelectionBoundingBox(),
       };
 
-      this.emitUpdate();
+      if (
+        nextState.show !== this.state?.show ||
+        nextState.referencePos.toJSON() !== this.state?.referencePos.toJSON()
+      ) {
+        this.state = nextState;
+        this.emitUpdate();
+      }
 
       return;
     }
@@ -236,30 +265,31 @@ export const formattingToolbarPluginKey = new PluginKey(
   "FormattingToolbarPlugin",
 );
 
-export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
+export class FormattingToolbarProsemirrorPlugin extends BlockNoteExtension {
   private view: FormattingToolbarView | undefined;
-  public readonly plugin: Plugin;
 
   constructor(editor: BlockNoteEditor<any, any, any>) {
     super();
-    this.plugin = new Plugin({
-      key: formattingToolbarPluginKey,
-      view: (editorView) => {
-        this.view = new FormattingToolbarView(editor, editorView, (state) => {
-          this.emit("update", state);
-        });
-        return this.view;
-      },
-      props: {
-        handleKeyDown: (_view, event: KeyboardEvent) => {
-          if (event.key === "Escape" && this.shown) {
-            this.view!.closeMenu();
-            return true;
-          }
-          return false;
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: formattingToolbarPluginKey,
+        view: (editorView) => {
+          this.view = new FormattingToolbarView(editor, editorView, (state) => {
+            this.emit("update", state);
+          });
+          return this.view;
         },
-      },
-    });
+        props: {
+          handleKeyDown: (_view, event: KeyboardEvent) => {
+            if (event.key === "Escape" && this.shown) {
+              this.view!.closeMenu();
+              return true;
+            }
+            return false;
+          },
+        },
+      }),
+    );
   }
 
   public get shown() {

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -4,15 +4,15 @@ import { EditorView } from "@tiptap/pm/view";
 import { Mark } from "prosemirror-model";
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 
+import { getPmSchema } from "../../api/pmUtil.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 { getPmSchema } from "../../api/pmUtil.js";
 
 export type LinkToolbarState = UiElementPosition & {
   // The hovered link's URL, and the text it's displayed with in the
@@ -301,30 +301,31 @@ export class LinkToolbarProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
   private view: LinkToolbarView | undefined;
-  public readonly plugin: Plugin;
 
   constructor(editor: BlockNoteEditor<BSchema, I, S>) {
     super();
-    this.plugin = new Plugin({
-      key: linkToolbarPluginKey,
-      view: (editorView) => {
-        this.view = new LinkToolbarView(editor, editorView, (state) => {
-          this.emit("update", state);
-        });
-        return this.view;
-      },
-      props: {
-        handleKeyDown: (_view, event: KeyboardEvent) => {
-          if (event.key === "Escape" && this.shown) {
-            this.view!.closeMenu();
-            return true;
-          }
-          return false;
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: linkToolbarPluginKey,
+        view: (editorView) => {
+          this.view = new LinkToolbarView(editor, editorView, (state) => {
+            this.emit("update", state);
+          });
+          return this.view;
         },
-      },
-    });
+        props: {
+          handleKeyDown: (_view, event: KeyboardEvent) => {
+            if (event.key === "Escape" && this.shown) {
+              this.view!.closeMenu();
+              return true;
+            }
+            return false;
+          },
+        },
+      }),
+    );
   }
 
   public onUpdate(callback: (state: LinkToolbarState) => void) {

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts

@@ -1,4 +1,5 @@
 import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
 // By default, typing with a node selection active will cause ProseMirror to
@@ -15,54 +16,56 @@ const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
 // While a more elegant solution would probably process transactions instead of
 // keystrokes, this brings us most of the way to Notion's UX without much added
 // complexity.
-export class NodeSelectionKeyboardPlugin {
-  public readonly plugin: Plugin;
+export class NodeSelectionKeyboardPlugin extends BlockNoteExtension {
   constructor() {
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      props: {
-        handleKeyDown: (view, event) => {
-          // Checks for node selection
-          if ("node" in view.state.selection) {
-            // Checks if key press uses ctrl/meta modifier
-            if (event.ctrlKey || event.metaKey) {
-              return false;
-            }
-            // Checks if key press is alphanumeric
-            if (event.key.length === 1) {
-              event.preventDefault();
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        props: {
+          handleKeyDown: (view, event) => {
+            // Checks for node selection
+            if ("node" in view.state.selection) {
+              // Checks if key press uses ctrl/meta modifier
+              if (event.ctrlKey || event.metaKey) {
+                return false;
+              }
+              // Checks if key press is alphanumeric
+              if (event.key.length === 1) {
+                event.preventDefault();
 
-              return true;
-            }
-            // Checks if key press is Enter
-            if (
-              event.key === "Enter" &&
-              !event.shiftKey &&
-              !event.altKey &&
-              !event.ctrlKey &&
-              !event.metaKey
-            ) {
-              const tr = view.state.tr;
-              view.dispatch(
-                tr
-                  .insert(
-                    view.state.tr.selection.$to.after(),
-                    view.state.schema.nodes["paragraph"].createChecked(),
-                  )
-                  .setSelection(
-                    new TextSelection(
-                      tr.doc.resolve(view.state.tr.selection.$to.after() + 1),
+                return true;
+              }
+              // Checks if key press is Enter
+              if (
+                event.key === "Enter" &&
+                !event.shiftKey &&
+                !event.altKey &&
+                !event.ctrlKey &&
+                !event.metaKey
+              ) {
+                const tr = view.state.tr;
+                view.dispatch(
+                  tr
+                    .insert(
+                      view.state.tr.selection.$to.after(),
+                      view.state.schema.nodes["paragraph"].createChecked(),
+                    )
+                    .setSelection(
+                      new TextSelection(
+                        tr.doc.resolve(view.state.tr.selection.$to.after() + 1),
+                      ),
                     ),
-                  ),
-              );
+                );
 
-              return true;
+                return true;
+              }
             }
-          }
 
-          return false;
+            return false;
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }