@blocknote/core 0.29.1 → 0.30.1

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -24,7 +24,7 @@ import { dragStart, unsetDragImage } from "./dragging.js";
 export type SideMenuState<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = UiElementPosition & {
   // The block that the side menu is attached to.
   block: Block<BSchema, I, S>;
@@ -36,12 +36,12 @@ function getBlockFromCoords(
   view: EditorView,
   coords: { left: number; top: number },
   sideMenuDetection: "viewport" | "editor",
-  adjustForColumns = true
+  adjustForColumns = true,
 ) {
   const elements = view.root.elementsFromPoint(
     // bit hacky - offset x position to right to account for the width of sidemenu itself
     coords.left + (sideMenuDetection === "editor" ? 50 : 0),
-    coords.top
+    coords.top,
   );
 
   for (const element of elements) {
@@ -59,7 +59,7 @@ function getBlockFromCoords(
             top: coords.top,
           },
           sideMenuDetection,
-          false
+          false,
         );
       }
     }
@@ -74,7 +74,7 @@ function getBlockFromMousePos(
     y: number;
   },
   view: EditorView,
-  sideMenuDetection: "viewport" | "editor"
+  sideMenuDetection: "viewport" | "editor",
 ): { node: HTMLElement; id: string } | undefined {
   // Editor itself may have padding or other styling which affects
   // size/position, so we get the boundingRect of the first child (i.e. the
@@ -137,7 +137,7 @@ function getBlockFromMousePos(
 export class SideMenuView<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > implements PluginView
 {
   public state?: SideMenuState<BSchema, I, S>;
@@ -155,7 +155,7 @@ export class SideMenuView<
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
     private readonly sideMenuDetection: "viewport" | "editor",
     private readonly pmView: EditorView,
-    emitUpdate: (state: SideMenuState<BSchema, I, S>) => void
+    emitUpdate: (state: SideMenuState<BSchema, I, S>) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -167,21 +167,21 @@ export class SideMenuView<
 
     this.pmView.root.addEventListener(
       "dragstart",
-      this.onDragStart as EventListener
+      this.onDragStart as EventListener,
     );
     this.pmView.root.addEventListener(
       "dragover",
-      this.onDragOver as EventListener
+      this.onDragOver as EventListener,
     );
     this.pmView.root.addEventListener(
       "drop",
       this.onDrop as EventListener,
-      true
+      true,
     );
     this.pmView.root.addEventListener(
       "dragend",
       this.onDragEnd as EventListener,
-      true
+      true,
     );
     initializeESMDependencies();
 
@@ -189,14 +189,14 @@ export class SideMenuView<
     this.pmView.root.addEventListener(
       "mousemove",
       this.onMouseMove as EventListener,
-      true
+      true,
     );
 
     // Hides and unfreezes the menu whenever the user presses a key.
     this.pmView.root.addEventListener(
       "keydown",
       this.onKeyDown as EventListener,
-      true
+      true,
     );
 
     // Setting capture=true ensures that any parent container of the editor that
@@ -218,7 +218,7 @@ export class SideMenuView<
     const block = getBlockFromMousePos(
       this.mousePos,
       this.pmView,
-      this.sideMenuDetection
+      this.sideMenuDetection,
     );
 
     // Closes the menu if the mouse cursor is beyond the editor vertically.
@@ -270,10 +270,10 @@ export class SideMenuView<
               ).getBoundingClientRect().x,
           blockContentBoundingBox.y,
           blockContentBoundingBox.width,
-          blockContentBoundingBox.height
+          blockContentBoundingBox.height,
         ),
         block: this.editor.getBlock(
-          this.hoveredBlock!.getAttribute("data-id")!
+          this.hoveredBlock!.getAttribute("data-id")!,
         )!,
       });
     }
@@ -312,9 +312,9 @@ export class SideMenuView<
           this.pmView.state.tr.setSelection(
             TextSelection.create(
               this.pmView.state.tr.doc,
-              this.pmView.state.tr.selection.to
-            )
-          )
+              this.pmView.state.tr.selection.to,
+            ),
+          ),
         );
       } else if (this.isDragOrigin && this.pmView.dom !== parentEditorElement) {
         // Because the editor from which the block originates doesn't get a drop
@@ -330,7 +330,7 @@ export class SideMenuView<
         // handle the event.
         setTimeout(
           () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()),
-          0
+          0,
         );
       }
     }
@@ -535,7 +535,7 @@ export class SideMenuView<
 
     evt.clientY = Math.min(
       Math.max(event.clientY, editorBoundingBox.top),
-      editorBoundingBox.top + editorBoundingBox.height
+      editorBoundingBox.top + editorBoundingBox.height,
     );
 
     evt.dataTransfer = event.dataTransfer;
@@ -573,30 +573,30 @@ export class SideMenuView<
     this.pmView.root.removeEventListener(
       "mousemove",
       this.onMouseMove as EventListener,
-      true
+      true,
     );
     this.pmView.root.removeEventListener(
       "dragstart",
-      this.onDragStart as EventListener
+      this.onDragStart as EventListener,
     );
     this.pmView.root.removeEventListener(
       "dragover",
-      this.onDragOver as EventListener
+      this.onDragOver as EventListener,
     );
     this.pmView.root.removeEventListener(
       "drop",
       this.onDrop as EventListener,
-      true
+      true,
     );
     this.pmView.root.removeEventListener(
       "dragend",
       this.onDragEnd as EventListener,
-      true
+      true,
     );
     this.pmView.root.removeEventListener(
       "keydown",
       this.onKeyDown as EventListener,
-      true
+      true,
     );
     this.pmView.root.removeEventListener("scroll", this.onScroll, true);
   }
@@ -607,14 +607,14 @@ export const sideMenuPluginKey = new PluginKey("SideMenuPlugin");
 export class SideMenuProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > extends EventEmitter<any> {
   public view: SideMenuView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
 
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
-    sideMenuDetection: "viewport" | "editor"
+    sideMenuDetection: "viewport" | "editor",
   ) {
     super();
     this.plugin = new Plugin({
@@ -626,7 +626,7 @@ export class SideMenuProsemirrorPlugin<
           editorView,
           (state) => {
             this.emit("update", state);
-          }
+          },
         );
         return this.view;
       },
@@ -645,7 +645,7 @@ export class SideMenuProsemirrorPlugin<
       dataTransfer: DataTransfer | null;
       clientY: number;
     },
-    block: Block<BSchema, I, S>
+    block: Block<BSchema, I, S>,
   ) => {
     if (this.view) {
       this.view.isDragOrigin = true;

package/src/extensions/SideMenu/dragging.ts

@@ -21,7 +21,7 @@ let dragImageElement: Element | undefined;
 export type SideMenuState<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = UiElementPosition & {
   // The block that the side menu is attached to.
   block: Block<BSchema, I, S>;
@@ -81,12 +81,12 @@ function setDragImage(view: EditorView, from: number, to = from) {
   const firstSelectedBlockIndex = getElementIndex(
     parent,
     // Expects from position to be just before the first selected block.
-    view.domAtPos(from + 1).node.parentElement!
+    view.domAtPos(from + 1).node.parentElement!,
   );
   const lastSelectedBlockIndex = getElementIndex(
     parent,
     // Expects to position to be just after the last selected block.
-    view.domAtPos(to - 1).node.parentElement!
+    view.domAtPos(to - 1).node.parentElement!,
   );
 
   for (let i = parent.childElementCount - 1; i >= 0; i--) {
@@ -120,7 +120,7 @@ function setDragImage(view: EditorView, from: number, to = from) {
       (className) =>
         className !== "ProseMirror" &&
         className !== "bn-root" &&
-        className !== "bn-editor"
+        className !== "bn-editor",
     )
     .join(" ");
 
@@ -149,11 +149,11 @@ export function unsetDragImage(rootEl: Document | ShadowRoot) {
 export function dragStart<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   e: { dataTransfer: DataTransfer | null; clientY: number },
   block: Block<BSchema, I, S>,
-  editor: BlockNoteEditor<BSchema, I, S>
+  editor: BlockNoteEditor<BSchema, I, S>,
 ) {
   if (!e.dataTransfer) {
     return;
@@ -183,12 +183,12 @@ export function dragStart<
 
     if (draggedBlockInSelection && multipleBlocksSelected) {
       view.dispatch(
-        view.state.tr.setSelection(MultipleNodeSelection.create(doc, from, to))
+        view.state.tr.setSelection(MultipleNodeSelection.create(doc, from, to)),
       );
       setDragImage(view, from, to);
     } else {
       view.dispatch(
-        view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
+        view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)),
       );
       setDragImage(view, pos);
     }

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -22,7 +22,7 @@ export type SuggestionMenuState = UiElementPosition & {
 class SuggestionMenuView<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > {
   public state?: SuggestionMenuState;
   public emitUpdate: (triggerCharacter: string) => void;
@@ -31,7 +31,7 @@ class SuggestionMenuView<
 
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
-    emitUpdate: (menuName: string, state: SuggestionMenuState) => void
+    emitUpdate: (menuName: string, state: SuggestionMenuState) => void,
   ) {
     this.pluginState = undefined;
 
@@ -57,7 +57,7 @@ class SuggestionMenuView<
   handleScroll = () => {
     if (this.state?.show) {
       const decorationNode = this.rootEl?.querySelector(
-        `[data-decoration-id="${this.pluginState!.decorationId}"]`
+        `[data-decoration-id="${this.pluginState!.decorationId}"]`,
       );
       if (!decorationNode) {
         return;
@@ -71,7 +71,7 @@ class SuggestionMenuView<
     const prev: SuggestionPluginState =
       suggestionMenuPluginKey.getState(prevState);
     const next: SuggestionPluginState = suggestionMenuPluginKey.getState(
-      view.state
+      view.state,
     );
 
     // See how the state changed
@@ -96,7 +96,7 @@ class SuggestionMenuView<
     }
 
     const decorationNode = this.rootEl?.querySelector(
-      `[data-decoration-id="${this.pluginState!.decorationId}"]`
+      `[data-decoration-id="${this.pluginState!.decorationId}"]`,
     );
 
     if (this.editor.isEditable && decorationNode) {
@@ -165,7 +165,7 @@ const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin");
 export class SuggestionMenuProseMirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > extends EventEmitter<any> {
   private view: SuggestionMenuView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
@@ -183,7 +183,7 @@ export class SuggestionMenuProseMirrorPlugin<
           editor,
           (triggerCharacter, state) => {
             this.emit(`update ${triggerCharacter}`, state);
-          }
+          },
         );
         return this.view;
       },
@@ -199,7 +199,7 @@ export class SuggestionMenuProseMirrorPlugin<
           transaction,
           prev,
           _oldState,
-          newState
+          newState,
         ): SuggestionPluginState => {
           // TODO: More clearly define which transactions should be ignored.
           if (transaction.getMeta("orderedListIndexing") !== undefined) {
@@ -231,7 +231,7 @@ export class SuggestionMenuProseMirrorPlugin<
               editor,
               newState.selection.from -
                 // Need to account for the trigger char that was inserted, so we offset the position by the length of the trigger character.
-                suggestionPluginTransactionMeta.triggerCharacter.length
+                suggestionPluginTransactionMeta.triggerCharacter.length,
             );
             return {
               triggerCharacter:
@@ -271,7 +271,7 @@ export class SuggestionMenuProseMirrorPlugin<
               newState.selection.from < prev.queryStartPos()) ||
             // Moving the caret to a new block should hide the menu.
             !newState.selection.$from.sameParent(
-              newState.doc.resolve(prev.queryStartPos())
+              newState.doc.resolve(prev.queryStartPos()),
             )
           ) {
             return undefined;
@@ -282,7 +282,7 @@ export class SuggestionMenuProseMirrorPlugin<
           // Updates the current query.
           next.query = newState.doc.textBetween(
             prev.queryStartPos(),
-            newState.selection.from
+            newState.selection.from,
           );
 
           return next;
@@ -298,7 +298,7 @@ export class SuggestionMenuProseMirrorPlugin<
                 .setMeta(suggestionMenuPluginKey, {
                   triggerCharacter: text,
                 })
-                .scrollIntoView()
+                .scrollIntoView(),
             );
 
             return true;
@@ -329,7 +329,7 @@ export class SuggestionMenuProseMirrorPlugin<
                     nodeName: "span",
                     class: "bn-suggestion-decorator",
                     "data-decoration-id": suggestionPluginState.decorationId,
-                  }
+                  },
                 ),
               ]);
             }
@@ -344,7 +344,7 @@ export class SuggestionMenuProseMirrorPlugin<
                 nodeName: "span",
                 class: "bn-suggestion-decorator",
                 "data-decoration-id": suggestionPluginState.decorationId,
-              }
+              },
             ),
           ]);
         },
@@ -354,7 +354,7 @@ export class SuggestionMenuProseMirrorPlugin<
 
   public onUpdate(
     triggerCharacter: string,
-    callback: (state: SuggestionMenuState) => void
+    callback: (state: SuggestionMenuState) => void,
   ) {
     if (!this.triggerCharacters.includes(triggerCharacter)) {
       this.addTriggerCharacter(triggerCharacter);
@@ -370,7 +370,7 @@ export class SuggestionMenuProseMirrorPlugin<
   // TODO: Should this be called automatically when listeners are removed?
   removeTriggerCharacter = (triggerCharacter: string) => {
     this.triggerCharacters = this.triggerCharacters.filter(
-      (c) => c !== triggerCharacter
+      (c) => c !== triggerCharacter,
     );
   };
 
@@ -386,7 +386,7 @@ export class SuggestionMenuProseMirrorPlugin<
 export function createSuggestionMenu<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>, triggerCharacter: string) {
   editor.suggestionMenus.addTriggerCharacter(triggerCharacter);
 }

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -49,10 +49,10 @@ async function loadEmojiMart() {
 export async function getDefaultEmojiPickerItems<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   editor: BlockNoteEditor<BSchema, I, S>,
-  query: string
+  query: string,
 ): Promise<DefaultGridSuggestionItem[]> {
   if (!checkDefaultInlineContentTypeInSchema("text", editor)) {
     return [];

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -18,7 +18,7 @@ import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js";
 function setSelectionToNextContentEditableBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   let block: Block<BSchema, I, S> | undefined =
     editor.getTextCursorPosition().block;
@@ -44,10 +44,10 @@ function setSelectionToNextContentEditableBlock<
 export function insertOrUpdateBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   editor: BlockNoteEditor<BSchema, I, S>,
-  block: PartialBlock<BSchema, I, S>
+  block: PartialBlock<BSchema, I, S>,
 ): Block<BSchema, I, S> {
   const currentBlock = editor.getTextCursorPosition().block;
 
@@ -83,7 +83,7 @@ export function insertOrUpdateBlock<
 export function getDefaultSlashMenuItems<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   const items: DefaultSuggestionItem[] = [];
 
@@ -121,7 +121,7 @@ export function getDefaultSlashMenuItems<
         badge: formatKeyboardShortcut("Mod-Alt-3"),
         key: "heading_3",
         ...editor.dictionary.slash_menu.heading_3,
-      }
+      },
     );
   }
 
@@ -237,7 +237,7 @@ export function getDefaultSlashMenuItems<
         editor.transact((tr) =>
           tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "image",
@@ -256,7 +256,7 @@ export function getDefaultSlashMenuItems<
         editor.transact((tr) =>
           tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "video",
@@ -275,7 +275,7 @@ export function getDefaultSlashMenuItems<
         editor.transact((tr) =>
           tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "audio",
@@ -294,7 +294,7 @@ export function getDefaultSlashMenuItems<
         editor.transact((tr) =>
           tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
-          })
+          }),
         );
       },
       key: "file",
@@ -317,14 +317,14 @@ export function getDefaultSlashMenuItems<
 }
 
 export function filterSuggestionItems<
-  T extends { title: string; aliases?: readonly string[] }
+  T extends { title: string; aliases?: readonly string[] },
 >(items: T[], query: string) {
   return items.filter(
     ({ title, aliases }) =>
       title.toLowerCase().includes(query.toLowerCase()) ||
       (aliases &&
         aliases.filter((alias) =>
-          alias.toLowerCase().includes(query.toLowerCase())
-        ).length !== 0)
+          alias.toLowerCase().includes(query.toLowerCase()),
+        ).length !== 0),
   );
 }