@blocknote/core 0.30.0 → 0.31.0

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,12 +11,10 @@ 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,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = UiElementPosition & {
   // TODO: This typing is not quite right (children should be from BSchema)
   block: BlockFromConfig<FileBlockConfig, I, S>;
@@ -34,7 +34,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
     >,
     private readonly pluginKey: PluginKey<FilePanelState<I, S>>,
     private readonly pmView: EditorView,
-    emitUpdate: (state: FilePanelState<I, S>) => void
+    emitUpdate: (state: FilePanelState<I, S>) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -71,7 +71,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   scrollHandler = () => {
     if (this.state?.show) {
       const blockElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`
+        `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`,
       );
       if (!blockElement) {
         return;
@@ -87,7 +87,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 
     if (!this.state?.show && pluginState?.block && this.editor.isEditable) {
       const blockElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
+        `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`,
       );
       if (!blockElement) {
         return;
@@ -132,66 +132,67 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 }
 
 const filePanelPluginKey = new PluginKey<FilePanelState<any, any>>(
-  "FilePanelPlugin"
+  "FilePanelPlugin",
 );
 
 export class FilePanelProsemirrorPlugin<
   I extends InlineContentSchema,
-  S extends StyleSchema
-> extends EventEmitter<any> {
+  S extends StyleSchema,
+> 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(
@@ -53,12 +62,12 @@ export class FormattingToolbarView implements PluginView {
       StyleSchema
     >,
     private readonly pmView: EditorView,
-    emitUpdate: (state: FormattingToolbarState) => void
+    emitUpdate: (state: FormattingToolbarState) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
         throw new Error(
-          "Attempting to update uninitialized formatting toolbar"
+          "Attempting to update uninitialized formatting toolbar",
         );
       }
 
@@ -96,7 +105,7 @@ export class FormattingToolbarView implements PluginView {
       (editorWrapper === (event.relatedTarget as Node) ||
         editorWrapper.contains(event.relatedTarget as Node) ||
         (event.relatedTarget as HTMLElement).matches(
-          ".bn-ui-container, .bn-ui-container *"
+          ".bn-ui-container, .bn-ui-container *",
         ))
     ) {
       return;
@@ -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;
     }
@@ -233,33 +262,34 @@ export class FormattingToolbarView implements PluginView {
 }
 
 export const formattingToolbarPluginKey = new PluginKey(
-  "FormattingToolbarPlugin"
+  "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/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -48,7 +48,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                 updateBlockCommand(blockInfo.bnBlock.beforePos, {
                   type: "paragraph",
                   props: {},
-                })
+                }),
               );
             }
 
@@ -114,7 +114,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const prevBlockInfo = getPrevBlockInfo(
               state.doc,
-              blockInfo.bnBlock.beforePos
+              blockInfo.bnBlock.beforePos,
             );
 
             if (prevBlockInfo) {
@@ -124,7 +124,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const parentBlockInfo = getParentBlockInfo(
               state.doc,
-              blockInfo.bnBlock.beforePos
+              blockInfo.bnBlock.beforePos,
             );
 
             if (parentBlockInfo?.blockNoteType !== "column") {
@@ -135,7 +135,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const columnList = getParentBlockInfo(
               state.doc,
-              column.bnBlock.beforePos
+              column.bnBlock.beforePos,
             );
             if (columnList?.blockNoteType !== "columnList") {
               throw new Error("parent of column is not a column list");
@@ -156,7 +156,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
               const blockToMove = state.doc.slice(
                 blockInfo.bnBlock.beforePos,
                 blockInfo.bnBlock.afterPos,
-                false
+                false,
               );
 
               /*
@@ -180,8 +180,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
                       columnList.bnBlock.afterPos - 2,
                       blockToMove,
                       blockToMove.size, // append existing content to blockToMove
-                      false
-                    )
+                      false,
+                    ),
                   );
                   const pos = state.tr.doc.resolve(column.bnBlock.beforePos);
                   state.tr.setSelection(TextSelection.between(pos, pos));
@@ -197,11 +197,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
                       column.bnBlock.beforePos - 1,
                       blockToMove,
                       0, // prepend existing content to blockToMove
-                      false
-                    )
+                      false,
+                    ),
                   );
                   const pos = state.tr.doc.resolve(
-                    state.tr.mapping.map(column.bnBlock.beforePos - 1)
+                    state.tr.mapping.map(column.bnBlock.beforePos - 1),
                   );
                   state.tr.setSelection(TextSelection.between(pos, pos));
                 }
@@ -210,43 +210,43 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   // delete column
                   state.tr.delete(
                     column.bnBlock.beforePos,
-                    column.bnBlock.afterPos
+                    column.bnBlock.afterPos,
                   );
 
                   // move before columnlist
                   state.tr.insert(
                     columnList.bnBlock.beforePos,
-                    blockToMove.content
+                    blockToMove.content,
                   );
 
                   const pos = state.tr.doc.resolve(
-                    columnList.bnBlock.beforePos
+                    columnList.bnBlock.beforePos,
                   );
                   state.tr.setSelection(TextSelection.between(pos, pos));
                 } else {
                   // just delete the </column><column> closing and opening tags to merge the columns
                   state.tr.delete(
                     column.bnBlock.beforePos - 1,
-                    column.bnBlock.beforePos + 1
+                    column.bnBlock.beforePos + 1,
                   );
                 }
               } else {
                 // delete block
                 state.tr.delete(
                   blockInfo.bnBlock.beforePos,
-                  blockInfo.bnBlock.afterPos
+                  blockInfo.bnBlock.afterPos,
                 );
                 if (isFirstColumn) {
                   // move before columnlist
                   state.tr.insert(
                     columnList.bnBlock.beforePos - 1,
-                    blockToMove.content
+                    blockToMove.content,
                   );
                 } else {
                   // append block to previous column
                   state.tr.insert(
                     column.bnBlock.beforePos - 1,
-                    blockToMove.content
+                    blockToMove.content,
                   );
                 }
                 const pos = state.tr.doc.resolve(column.bnBlock.beforePos - 1);
@@ -272,7 +272,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
             if (blockEmpty) {
               const prevBlockInfo = getPrevBlockInfo(
                 state.doc,
-                blockInfo.bnBlock.beforePos
+                blockInfo.bnBlock.beforePos,
               );
               if (!prevBlockInfo || !prevBlockInfo.isBlockContainer) {
                 return false;
@@ -291,7 +291,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                 const lastCellParagraphEndPos = lastCellEndPos - 1;
 
                 chainedCommands = chainedCommands.setTextSelection(
-                  lastCellParagraphEndPos
+                  lastCellParagraphEndPos,
                 );
               } else if (
                 prevBlockInfo.blockContent.node.type.spec.content === ""
@@ -301,7 +301,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   prevBlockInfo.blockContent.node.nodeSize;
 
                 chainedCommands = chainedCommands.setNodeSelection(
-                  nonEditableBlockContentStartPos
+                  nonEditableBlockContentStartPos,
                 );
               } else {
                 const blockContentStartPos =
@@ -341,13 +341,13 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const prevBlockInfo = getPrevBlockInfo(
               state.doc,
-              blockInfo.bnBlock.beforePos
+              blockInfo.bnBlock.beforePos,
             );
 
             if (prevBlockInfo && selectionAtBlockStart && selectionEmpty) {
               const bottomBlock = getBottomNestedBlockInfo(
                 state.doc,
-                prevBlockInfo
+                prevBlockInfo,
               );
 
               if (!bottomBlock.isBlockContainer) {
@@ -368,7 +368,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                       from: blockInfo.bnBlock.beforePos,
                       to: blockInfo.bnBlock.afterPos,
                     },
-                    bottomBlock.bnBlock.afterPos
+                    bottomBlock.bnBlock.afterPos,
                   )
                   .deleteRange({
                     from: bottomBlock.bnBlock.beforePos,
@@ -521,7 +521,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   .insert(newBlockInsertionPos, newBlock)
                   .scrollIntoView();
                 state.tr.setSelection(
-                  new TextSelection(state.doc.resolve(newBlockContentPos))
+                  new TextSelection(state.doc.resolve(newBlockContentPos)),
                 );
               }
 
@@ -551,8 +551,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   splitBlockCommand(
                     state.selection.from,
                     selectionAtBlockStart,
-                    selectionAtBlockStart
-                  )
+                    selectionAtBlockStart,
+                  ),
                 )
                 .run();
 

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
@@ -41,7 +41,7 @@ class LinkToolbarView implements PluginView {
   constructor(
     private readonly editor: BlockNoteEditor<any, any, any>,
     private readonly pmView: EditorView,
-    emitUpdate: (state: LinkToolbarState) => void
+    emitUpdate: (state: LinkToolbarState) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -70,7 +70,7 @@ class LinkToolbarView implements PluginView {
     this.pmView.root.addEventListener(
       "click",
       this.clickHandler as EventListener,
-      true
+      true,
     );
 
     // Setting capture=true ensures that any parent container of the editor that
@@ -146,7 +146,7 @@ class LinkToolbarView implements PluginView {
         this.state.referencePos = posToDOMRect(
           this.pmView,
           this.linkMarkRange!.from,
-          this.linkMarkRange!.to
+          this.linkMarkRange!.to,
         );
         this.emitUpdate();
       }
@@ -160,7 +160,7 @@ class LinkToolbarView implements PluginView {
       tr.addMark(
         this.linkMarkRange!.from,
         this.linkMarkRange!.from + text.length,
-        pmSchema.mark("link", { href: url })
+        pmSchema.mark("link", { href: url }),
       );
     });
     this.pmView.focus();
@@ -177,9 +177,9 @@ class LinkToolbarView implements PluginView {
         .removeMark(
           this.linkMarkRange!.from,
           this.linkMarkRange!.to,
-          this.linkMark!.type
+          this.linkMark!.type,
         )
-        .setMeta("preventAutolink", true)
+        .setMeta("preventAutolink", true),
     );
     this.pmView.focus();
 
@@ -226,7 +226,7 @@ class LinkToolbarView implements PluginView {
             getMarkRange(
               this.pmView.state.selection.$from,
               mark.type,
-              mark.attrs
+              mark.attrs,
             ) || undefined;
 
           break;
@@ -251,12 +251,12 @@ class LinkToolbarView implements PluginView {
         referencePos: posToDOMRect(
           this.pmView,
           this.linkMarkRange!.from,
-          this.linkMarkRange!.to
+          this.linkMarkRange!.to,
         ),
         url: this.linkMark!.attrs.href,
         text: this.pmView.state.doc.textBetween(
           this.linkMarkRange!.from,
-          this.linkMarkRange!.to
+          this.linkMarkRange!.to,
         ),
       };
       this.emitUpdate();
@@ -290,7 +290,7 @@ class LinkToolbarView implements PluginView {
     this.pmView.root.removeEventListener(
       "click",
       this.clickHandler as EventListener,
-      true
+      true,
     );
   }
 }
@@ -300,31 +300,32 @@ export const linkToolbarPluginKey = new PluginKey("LinkToolbarPlugin");
 export class LinkToolbarProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
-> extends EventEmitter<any> {
+  S extends StyleSchema,
+> 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) {