simplify ui elements (#288)

* simplify ui elements

* remove unused

* fix view

* Fixed build

* add onUpdate

* fix vanilla

* fix build

* allow props for blocknoteview

---------

Co-authored-by: Matthew Lipski <[email protected]>

Author: YousefED

examples/editor/src/App.tsx

@@ -2,11 +2,11 @@
 import "@blocknote/core/style.css";
 import {
   BlockNoteView,
-  useBlockNote,
   FormattingToolbarPositioner,
   HyperlinkToolbarPositioner,
-  SlashMenuPositioner,
   SideMenuPositioner,
+  SlashMenuPositioner,
+  useBlockNote,
 } from "@blocknote/react";
 import styles from "./App.module.css";
 

examples/vanilla/src/ui/addFormattingToolbar.ts

@@ -5,7 +5,7 @@ export const addFormattingToolbar = (editor: BlockNoteEditor) => {
   let element: HTMLElement;
   let boldBtn: HTMLAnchorElement;
 
-  editor.createFormattingToolbar((formattingToolbarState) => {
+  editor.formattingToolbar.onUpdate((formattingToolbarState) => {
     if (!element) {
       element = document.createElement("div");
       element.style.background = "gray";

examples/vanilla/src/ui/addHyperlinkToolbar.ts

@@ -4,7 +4,7 @@ import { createButton } from "./util";
 export const addHyperlinkToolbar = (editor: BlockNoteEditor) => {
   let element: HTMLElement;
 
-  const callbacks = editor.createHyperlinkToolbar((hyperlinkToolbarState) => {
+  editor.hyperlinkToolbar.onUpdate((hyperlinkToolbarState) => {
     if (!element) {
       element = document.createElement("div");
       element.style.background = "gray";
@@ -17,13 +17,13 @@ export const addHyperlinkToolbar = (editor: BlockNoteEditor) => {
 
       const editBtn = createButton("edit", () => {
         const newUrl = prompt("new url") || url;
-        callbacks.editHyperlink(newUrl, text);
+        editor.hyperlinkToolbar.editHyperlink(newUrl, text);
       });
 
       element.appendChild(editBtn);
 
       const removeBtn = createButton("remove", () => {
-        callbacks.deleteHyperlink();
+        editor.hyperlinkToolbar.deleteHyperlink();
       });
 
       element.appendChild(editBtn);

examples/vanilla/src/ui/addSideMenu.ts

@@ -4,24 +4,24 @@ import { createButton } from "./util";
 export const addSideMenu = (editor: BlockNoteEditor) => {
   let element: HTMLElement;
 
-  const callbacks = editor.createSideMenu((sideMenuState) => {
+  editor.sideMenu.onUpdate((sideMenuState) => {
     if (!element) {
       element = document.createElement("div");
       element.style.background = "gray";
       element.style.position = "absolute";
       element.style.padding = "10px";
       element.style.opacity = "0.8";
       const addBtn = createButton("+", () => {
-        callbacks.addBlock();
+        editor.sideMenu.addBlock();
       });
       element.appendChild(addBtn);
 
       const dragBtn = createButton("::", () => {
         // TODO: render a submenu with a delete option that calls "props.deleteBlock"
       });
 
-      dragBtn.addEventListener("dragstart", callbacks.blockDragStart);
-      dragBtn.addEventListener("dragend", callbacks.blockDragEnd);
+      dragBtn.addEventListener("dragstart", editor.sideMenu.blockDragStart);
+      dragBtn.addEventListener("dragend", editor.sideMenu.blockDragEnd);
       dragBtn.draggable = true;
       element.style.display = "none";
       element.appendChild(dragBtn);

examples/vanilla/src/ui/addSlashMenu.ts

@@ -28,7 +28,7 @@ export const addSlashMenu = (editor: BlockNoteEditor) => {
     return domItems;
   }
 
-  const callbacks = editor.createSlashMenu((slashMenuState) => {
+  editor.slashMenu.onUpdate((slashMenuState) => {
     if (!element) {
       element = document.createElement("div");
       element.style.background = "gray";
@@ -43,7 +43,7 @@ export const addSlashMenu = (editor: BlockNoteEditor) => {
     if (slashMenuState.show) {
       updateItems(
         slashMenuState.filteredItems,
-        callbacks.itemCallback,
+        editor.slashMenu.itemCallback,
         slashMenuState.keyboardHoveredItemIndex
       );
 

examples/vanilla/src/ui/blockSideMenuFactory.ts

@@ -37,27 +37,12 @@ import {
 } from "./extensions/Blocks/api/inlineContentTypes";
 import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
-import {
-  setupFormattingToolbar,
-  FormattingToolbarState,
-  FormattingToolbarCallbacks,
-} from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
-import {
-  HyperlinkToolbarCallbacks,
-  HyperlinkToolbarState,
-  setupHyperlinkToolbar,
-} from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
-import {
-  SuggestionsMenuCallbacks,
-  SuggestionsMenuState,
-} from "./shared/plugins/suggestion/SuggestionPlugin";
-import { setupSlashMenu } from "./extensions/SlashMenu/SlashMenuPlugin";
-import {
-  setupSideMenu,
-  SideMenuCallbacks,
-  SideMenuState,
-} from "./extensions/DraggableBlocks/DraggableBlocksPlugin";
+
+import { FormattingToolbarProsemirrorPlugin } from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
+import { HyperlinkToolbarProsemirrorPlugin } from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
+import { SideMenuProsemirrorPlugin } from "./extensions/SideMenu/SideMenuPlugin";
 import { BaseSlashMenuItem } from "./extensions/SlashMenu/BaseSlashMenuItem";
+import { SlashMenuProsemirrorPlugin } from "./extensions/SlashMenu/SlashMenuPlugin";
 import { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
 
 export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
@@ -163,81 +148,10 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
   public readonly schema: BSchema;
   public ready = false;
 
-  private uiElementCallbacks: {
-    formattingToolbar: FormattingToolbarCallbacks;
-    hyperlinkToolbar: HyperlinkToolbarCallbacks;
-    slashMenu: SuggestionsMenuCallbacks<BaseSlashMenuItem<BSchema>>;
-    sideMenu: SideMenuCallbacks;
-  };
-
-  private uiElementListeners: Partial<{
-    formattingToolbar: (formattingToolbarState: FormattingToolbarState) => void;
-    hyperlinkToolbar: (hyperlinkToolbarState: HyperlinkToolbarState) => void;
-    slashMenu: (
-      slashMenuState: SuggestionsMenuState<BaseSlashMenuItem<BSchema>>
-    ) => void;
-    sideMenu: (sideMenuState: SideMenuState<BSchema>) => void;
-  }> = {};
-
-  public createFormattingToolbar = (
-    updateFormattingToolbar: (
-      formattingToolbarState: FormattingToolbarState
-    ) => void
-  ) => {
-    if ("formattingToolbar" in this.uiElementListeners) {
-      throw Error(
-        "You have already created a Formatting Toolbar. You can only create a single Formatting Toolbar per BlockNote editor instance."
-      );
-    }
-
-    this.uiElementListeners.formattingToolbar = updateFormattingToolbar;
-
-    return this.uiElementCallbacks.formattingToolbar;
-  };
-
-  public createHyperlinkToolbar = (
-    updateHyperlinkToolbar: (
-      hyperlinkToolbarState: HyperlinkToolbarState
-    ) => void
-  ) => {
-    if ("hyperlinkToolbar" in this.uiElementListeners) {
-      throw Error(
-        "You have already created a Hyperlink Toolbar. You can only create a single Hyperlink Toolbar per BlockNote editor instance."
-      );
-    }
-
-    this.uiElementListeners.hyperlinkToolbar = updateHyperlinkToolbar;
-
-    return this.uiElementCallbacks.hyperlinkToolbar;
-  };
-
-  public createSlashMenu = <T extends BaseSlashMenuItem<BSchema>>(
-    updateSlashMenu: (slashMenuState: SuggestionsMenuState<T>) => void
-  ) => {
-    if ("slashMenu" in this.uiElementListeners) {
-      throw Error(
-        "You have already created a Slash Menu. You can only create a single Slash Menu per BlockNote editor instance."
-      );
-    }
-
-    this.uiElementListeners.slashMenu = updateSlashMenu as any;
-
-    return this.uiElementCallbacks.slashMenu;
-  };
-
-  public createSideMenu = (
-    updateSideMenu: (sideMenuState: SideMenuState<BSchema>) => void
-  ) => {
-    if ("sideMenu" in this.uiElementListeners) {
-      throw Error(
-        "You have already created a Side Menu. You can only create a single Side Menu per BlockNote editor instance."
-      );
-    }
-
-    this.uiElementListeners.sideMenu = updateSideMenu;
-
-    return this.uiElementCallbacks.sideMenu;
-  };
+  public readonly sideMenu: SideMenuProsemirrorPlugin<BSchema>;
+  public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<BSchema>;
+  public readonly slashMenu: SlashMenuProsemirrorPlugin<BSchema, any>;
+  public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<BSchema>;
 
   constructor(
     private readonly options: Partial<BlockNoteEditorOptions<BSchema>> = {}
@@ -257,140 +171,36 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       ...options,
     };
 
-    const editor = this;
+    this.sideMenu = new SideMenuProsemirrorPlugin(this);
+    this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
+    this.slashMenu = new SlashMenuProsemirrorPlugin(
+      this,
+      newOptions.slashCommands ||
+        getDefaultSlashMenuItems(newOptions.blockSchema)
+    );
+    this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
 
     const extensions = getBlockNoteExtensions<BSchema>({
       editor: this,
-      slashCommands:
-        newOptions.slashCommands ||
-        getDefaultSlashMenuItems(newOptions.blockSchema),
       blockSchema: newOptions.blockSchema,
       collaboration: newOptions.collaboration,
     });
 
-    this.schema = newOptions.blockSchema;
-
-    let formattingToolbarCallbacks: FormattingToolbarCallbacks;
-    const formattingToolbarExtension = Extension.create({
-      name: "FormattingToolbarExtension",
+    const blockNoteUIExtension = Extension.create({
+      name: "BlockNoteUIExtension",
 
-      addProseMirrorPlugins() {
-        const { plugin, callbacks } = setupFormattingToolbar(
-          editor,
-          this.editor,
-          (formattingToolbarState) => {
-            const formattingToolbarListener =
-              editor.uiElementListeners.formattingToolbar;
-
-            if (!formattingToolbarListener) {
-              return;
-            }
-
-            formattingToolbarListener(formattingToolbarState);
-          }
-        );
-
-        formattingToolbarCallbacks = {
-          destroy: () => delete editor.uiElementListeners.formattingToolbar,
-          ...callbacks,
-        };
-
-        return [plugin];
-      },
-    });
-    extensions.push(formattingToolbarExtension);
-
-    let hyperlinkToolbarCallbacks: HyperlinkToolbarCallbacks;
-    const hyperlinkToolbarExtension = Extension.create({
-      name: "HyperlinkToolbarExtension",
-
-      addProseMirrorPlugins() {
-        const { plugin, callbacks } = setupHyperlinkToolbar(
-          editor,
-          this.editor,
-          (hyperlinkToolbarState) => {
-            const hyperlinkToolbarListener =
-              editor.uiElementListeners.hyperlinkToolbar;
-
-            if (!hyperlinkToolbarListener) {
-              return;
-            }
-
-            hyperlinkToolbarListener(hyperlinkToolbarState);
-          }
-        );
-
-        hyperlinkToolbarCallbacks = {
-          destroy: () => delete editor.uiElementListeners.hyperlinkToolbar,
-          ...callbacks,
-        };
-
-        return [plugin];
+      addProseMirrorPlugins: () => {
+        return [
+          this.sideMenu.plugin,
+          this.formattingToolbar.plugin,
+          this.slashMenu.plugin,
+          this.hyperlinkToolbar.plugin,
+        ];
       },
     });
-    extensions.push(hyperlinkToolbarExtension);
-
-    let slashMenuCallbacks: SuggestionsMenuCallbacks<
-      BaseSlashMenuItem<BSchema>
-    >;
-    const slashMenuExtension = Extension.create({
-      name: "SlashMenuExtension",
-
-      addProseMirrorPlugins() {
-        const { plugin, callbacks } = setupSlashMenu(
-          editor,
-          this.editor,
-          (slashMenuState) => {
-            const slashMenuListener = editor.uiElementListeners.slashMenu;
-
-            if (!slashMenuListener) {
-              return;
-            }
-
-            slashMenuListener(slashMenuState as any);
-          },
-          newOptions.slashCommands ||
-            getDefaultSlashMenuItems(newOptions.blockSchema)
-        );
-
-        slashMenuCallbacks = {
-          destroy: () => delete editor.uiElementListeners.slashMenu,
-          ...callbacks,
-        };
-
-        return [plugin];
-      },
-    });
-    extensions.push(slashMenuExtension);
-
-    let sideMenuCallbacks: SideMenuCallbacks;
-    const sideMenuExtension = Extension.create({
-      name: "SideMenuExtension",
-
-      addProseMirrorPlugins() {
-        const { plugin, callbacks } = setupSideMenu(
-          editor,
-          this.editor,
-          (sideMenuState) => {
-            const sideMenuListener = editor.uiElementListeners.sideMenu;
-
-            if (!sideMenuListener) {
-              return;
-            }
-
-            sideMenuListener(sideMenuState as any);
-          }
-        );
+    extensions.push(blockNoteUIExtension);
 
-        sideMenuCallbacks = {
-          destroy: () => delete editor.uiElementListeners.sideMenu,
-          ...callbacks,
-        };
-
-        return [plugin];
-      },
-    });
-    extensions.push(sideMenuExtension);
+    this.schema = newOptions.blockSchema;
 
     const tiptapOptions: EditorOptions = {
       // TODO: This approach to setting initial content is "cleaner" but requires the PM editor schema, which is only
@@ -452,15 +262,10 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     this._tiptapEditor = new Editor(tiptapOptions) as Editor & {
       contentComponent: any;
     };
+  }
 
-    // These need to be assigned after the TipTap editor is created as they are
-    // initialized in a plugin, which is only loaded on editor creation.
-    this.uiElementCallbacks = {
-      formattingToolbar: formattingToolbarCallbacks!,
-      hyperlinkToolbar: hyperlinkToolbarCallbacks!,
-      slashMenu: slashMenuCallbacks!,
-      sideMenu: sideMenuCallbacks!,
-    };
+  public get prosemirrorView() {
+    return this._tiptapEditor.view;
   }
 
   public get domElement() {