@blocknote/core 0.30.1 → 0.31.1

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,35 @@ export const formattingToolbarPluginKey = new PluginKey(
   "FormattingToolbarPlugin",
 );
 
-export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
+export class FormattingToolbarProsemirrorPlugin extends BlockNoteExtension {
+  public static key() {
+    return "formattingToolbar";
+  }
+
   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,35 @@ export class LinkToolbarProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
+  public static key() {
+    return "linkToolbar";
+  }
+
   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,60 @@ 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 {
+  public static key() {
+    return "nodeSelectionKeyboard";
+  }
+
   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;
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -2,11 +2,15 @@ import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { v4 } from "uuid";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
 
-export class PlaceholderPlugin {
-  public readonly plugin: Plugin;
+export class PlaceholderPlugin extends BlockNoteExtension {
+  public static key() {
+    return "placeholder";
+  }
+
   constructor(
     editor: BlockNoteEditor<any, any, any>,
     placeholders: Record<
@@ -14,127 +18,130 @@ export class PlaceholderPlugin {
       string | undefined
     >,
   ) {
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      view: (view) => {
-        const uniqueEditorSelector = `placeholder-selector-${v4()}`;
-        view.dom.classList.add(uniqueEditorSelector);
-        const styleEl = document.createElement("style");
-
-        const nonce = editor._tiptapEditor.options.injectNonce;
-        if (nonce) {
-          styleEl.setAttribute("nonce", nonce);
-        }
-
-        if (editor.prosemirrorView?.root instanceof ShadowRoot) {
-          editor.prosemirrorView.root.append(styleEl);
-        } else {
-          editor.prosemirrorView?.root.head.appendChild(styleEl);
-        }
-
-        const styleSheet = styleEl.sheet!;
-
-        const getSelector = (additionalSelectors = "") =>
-          `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
-
-        try {
-          // FIXME: the names "default" and "emptyDocument" are hardcoded
-          const {
-            default: defaultPlaceholder,
-            emptyDocument: emptyPlaceholder,
-            ...rest
-          } = placeholders;
-
-          // add block specific placeholders
-          for (const [blockType, placeholder] of Object.entries(rest)) {
-            const blockTypeSelector = `[data-content-type="${blockType}"]`;
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        view: (view) => {
+          const uniqueEditorSelector = `placeholder-selector-${v4()}`;
+          view.dom.classList.add(uniqueEditorSelector);
+          const styleEl = document.createElement("style");
+
+          const nonce = editor._tiptapEditor.options.injectNonce;
+          if (nonce) {
+            styleEl.setAttribute("nonce", nonce);
+          }
+
+          if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+            editor.prosemirrorView.root.append(styleEl);
+          } else {
+            editor.prosemirrorView?.root.head.appendChild(styleEl);
+          }
+
+          const styleSheet = styleEl.sheet!;
+
+          const getSelector = (additionalSelectors = "") =>
+            `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
+
+          try {
+            // FIXME: the names "default" and "emptyDocument" are hardcoded
+            const {
+              default: defaultPlaceholder,
+              emptyDocument: emptyPlaceholder,
+              ...rest
+            } = placeholders;
+
+            // add block specific placeholders
+            for (const [blockType, placeholder] of Object.entries(rest)) {
+              const blockTypeSelector = `[data-content-type="${blockType}"]`;
+
+              styleSheet.insertRule(
+                `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
+                  placeholder,
+                )}; }`,
+              );
+            }
+
+            const onlyBlockSelector = `[data-is-only-empty-block]`;
+            const mustBeFocusedSelector = `[data-is-empty-and-focused]`;
+
+            // placeholder for when there's only one empty block
+            styleSheet.insertRule(
+              `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
+                emptyPlaceholder,
+              )}; }`,
+            );
 
+            // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
             styleSheet.insertRule(
-              `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
-                placeholder,
+              `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
+                defaultPlaceholder,
               )}; }`,
             );
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
+              e,
+            );
           }
 
-          const onlyBlockSelector = `[data-is-only-empty-block]`;
-          const mustBeFocusedSelector = `[data-is-empty-and-focused]`;
-
-          // placeholder for when there's only one empty block
-          styleSheet.insertRule(
-            `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
-              emptyPlaceholder,
-            )}; }`,
-          );
-
-          // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
-          styleSheet.insertRule(
-            `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
-              defaultPlaceholder,
-            )}; }`,
-          );
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
-            e,
-          );
-        }
-
-        return {
-          destroy: () => {
-            if (editor.prosemirrorView?.root instanceof ShadowRoot) {
-              editor.prosemirrorView.root.removeChild(styleEl);
-            } else {
-              editor.prosemirrorView?.root.head.removeChild(styleEl);
+          return {
+            destroy: () => {
+              if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+                editor.prosemirrorView.root.removeChild(styleEl);
+              } else {
+                editor.prosemirrorView?.root.head.removeChild(styleEl);
+              }
+            },
+          };
+        },
+        props: {
+          decorations: (state) => {
+            const { doc, selection } = state;
+
+            if (!editor.isEditable) {
+              return;
             }
-          },
-        };
-      },
-      props: {
-        decorations: (state) => {
-          const { doc, selection } = state;
-
-          if (!editor.isEditable) {
-            return;
-          }
 
-          if (!selection.empty) {
-            return;
-          }
+            if (!selection.empty) {
+              return;
+            }
 
-          // Don't show placeholder when the cursor is inside a code block
-          if (selection.$from.parent.type.spec.code) {
-            return;
-          }
+            // Don't show placeholder when the cursor is inside a code block
+            if (selection.$from.parent.type.spec.code) {
+              return;
+            }
 
-          const decs = [];
+            const decs = [];
 
-          // decoration for when there's only one empty block
-          // positions are hardcoded for now
-          if (state.doc.content.size === 6) {
-            decs.push(
-              Decoration.node(2, 4, {
-                "data-is-only-empty-block": "true",
-              }),
-            );
-          }
+            // decoration for when there's only one empty block
+            // positions are hardcoded for now
+            if (state.doc.content.size === 6) {
+              decs.push(
+                Decoration.node(2, 4, {
+                  "data-is-only-empty-block": "true",
+                }),
+              );
+            }
 
-          const $pos = selection.$anchor;
-          const node = $pos.parent;
+            const $pos = selection.$anchor;
+            const node = $pos.parent;
 
-          if (node.content.size === 0) {
-            const before = $pos.before();
+            if (node.content.size === 0) {
+              const before = $pos.before();
 
-            decs.push(
-              Decoration.node(before, before + node.nodeSize, {
-                "data-is-empty-and-focused": "true",
-              }),
-            );
-          }
+              decs.push(
+                Decoration.node(before, before + node.nodeSize, {
+                  "data-is-empty-and-focused": "true",
+                }),
+              );
+            }
 
-          return DecorationSet.create(doc, decs);
+            return DecorationSet.create(doc, decs);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }