feat: React re-architecture

examples/editor/src/main.tsx

@@ -6,8 +6,6 @@ import "./index.css";
 window.React = React;
 
 const root = createRoot(document.getElementById("root")!);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+root.render(<App />);
+
+// root.render(<App />);

examples/vanilla/src/main.tsx

@@ -1,22 +1,12 @@
 import { BlockNoteEditor } from "@blocknote/core";
 import "./index.css";
-import { blockSideMenuFactory } from "./ui/blockSideMenuFactory";
-import { formattingToolbarFactory } from "./ui/formattingToolbarFactory";
-import { hyperlinkToolbarFactory } from "./ui/hyperlinkToolbarFactory";
-import { slashMenuFactory } from "./ui/slashMenuFactory";
+import { addSideMenu } from "./ui/addSideMenu";
+import { addFormattingToolbar } from "./ui/addFormattingToolbar";
+import { addSlashMenu } from "./ui/addSlashMenu";
+import { addHyperlinkToolbar } from "./ui/addHyperlinkToolbar";
 
 const editor = new BlockNoteEditor({
   parentElement: document.getElementById("root")!,
-  uiFactories: {
-    // Create an example formatting toolbar which just consists of a bold toggle
-    formattingToolbarFactory,
-    // Create an example menu for hyperlinks
-    hyperlinkToolbarFactory,
-    // Create an example menu for the /-menu
-    slashMenuFactory: slashMenuFactory,
-    // Create an example menu for when a block is hovered
-    blockSideMenuFactory,
-  },
   onEditorContentChange: () => {
     console.log(editor.topLevelBlocks);
   },
@@ -26,3 +16,8 @@ const editor = new BlockNoteEditor({
 });
 
 console.log("editor created", editor);
+
+addSideMenu(editor);
+addFormattingToolbar(editor);
+addSlashMenu(editor);
+addHyperlinkToolbar(editor);

examples/vanilla/src/ui/addFormattingToolbar.ts

@@ -0,0 +1,43 @@
+import { BlockNoteEditor, createFormattingToolbar } from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addFormattingToolbar = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+  let boldBtn: HTMLAnchorElement;
+
+  createFormattingToolbar(editor, (formattingToolbarState) => {
+    if (!element) {
+      element = document.createElement("div");
+      element.style.background = "gray";
+      element.style.position = "absolute";
+      element.style.padding = "10px";
+      element.style.opacity = "0.8";
+      boldBtn = createButton("set bold", () => {
+        editor.toggleStyles({ bold: true });
+      });
+      element.appendChild(boldBtn);
+
+      const linkBtn = createButton("set link", () => {
+        editor.createLink("https://www.google.com");
+      });
+
+      element.appendChild(boldBtn);
+      element.appendChild(linkBtn);
+      element.style.display = "none";
+
+      document.getElementById("root")!.appendChild(element);
+    }
+
+    if (formattingToolbarState.show) {
+      element.style.display = "block";
+
+      boldBtn.text =
+        "bold" in editor.getActiveStyles() ? "unset bold" : "set bold";
+      element.style.top = formattingToolbarState.referencePos.top + "px";
+      element.style.left =
+        formattingToolbarState.referencePos.x - element.offsetWidth + "px";
+    } else {
+      element.style.display = "none";
+    }
+  });
+};

examples/vanilla/src/ui/addHyperlinkToolbar.ts

@@ -0,0 +1,46 @@
+import { BlockNoteEditor, createHyperlinkToolbar } from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addHyperlinkToolbar = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+
+  createHyperlinkToolbar(editor, (hyperlinkToolbarState) => {
+    if (!element) {
+      element = document.createElement("div");
+      element.style.background = "gray";
+      element.style.position = "absolute";
+      element.style.padding = "10px";
+      element.style.opacity = "0.8";
+
+      let url = hyperlinkToolbarState.url;
+      let text = hyperlinkToolbarState.text;
+
+      const editBtn = createButton("edit", () => {
+        const newUrl = prompt("new url") || url;
+        hyperlinkToolbarState.editHyperlink(newUrl, text);
+      });
+
+      element.appendChild(editBtn);
+
+      const removeBtn = createButton("remove", () => {
+        hyperlinkToolbarState.deleteHyperlink();
+      });
+
+      element.appendChild(editBtn);
+      element.appendChild(removeBtn);
+      element.style.display = "none";
+
+      document.getElementById("root")!.appendChild(element);
+    }
+
+    if (hyperlinkToolbarState.show) {
+      element.style.display = "block";
+
+      element.style.top = hyperlinkToolbarState.referencePos.top + "px";
+      element.style.left =
+        hyperlinkToolbarState.referencePos.x - element.offsetWidth + "px";
+    } else {
+      element.style.display = "none";
+    }
+  });
+};

examples/vanilla/src/ui/addSideMenu.ts

@@ -0,0 +1,42 @@
+import { BlockNoteEditor, createSideMenu } from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addSideMenu = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+
+  createSideMenu(editor, (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("+", () => {
+        sideMenuState.addBlock();
+      });
+      element.appendChild(addBtn);
+
+      const dragBtn = createButton("::", () => {
+        // TODO: render a submenu with a delete option that calls "props.deleteBlock"
+      });
+
+      dragBtn.addEventListener("dragstart", sideMenuState.blockDragStart);
+      dragBtn.addEventListener("dragend", sideMenuState.blockDragEnd);
+      dragBtn.draggable = true;
+      element.style.display = "none";
+      element.appendChild(dragBtn);
+
+      document.getElementById("root")!.appendChild(element);
+    }
+
+    if (sideMenuState.show) {
+      element.style.display = "block";
+
+      element.style.top = sideMenuState.referencePos.top + "px";
+      element.style.left =
+        sideMenuState.referencePos.x - element.offsetWidth + "px";
+    } else {
+      element.style.display = "none";
+    }
+  });
+};

examples/vanilla/src/ui/addSlashMenu.ts

@@ -0,0 +1,68 @@
+import {
+  BaseSlashMenuItem,
+  BlockNoteEditor,
+  createSlashMenu,
+  defaultSlashMenuItems,
+  DefaultBlockSchema,
+} from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addSlashMenu = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+
+  function updateItems(
+    items: BaseSlashMenuItem<DefaultBlockSchema>[],
+    onClick: (item: BaseSlashMenuItem<DefaultBlockSchema>) => void,
+    selected: number
+  ) {
+    element.innerHTML = "";
+    const domItems = items.map((val, i) => {
+      const element = createButton(val.name, () => {
+        onClick(val);
+      });
+      element.style.display = "block";
+      if (selected === i) {
+        element.style.fontWeight = "bold";
+      }
+      return element;
+    });
+    element.append(...domItems);
+    return domItems;
+  }
+
+  createSlashMenu<BaseSlashMenuItem<DefaultBlockSchema>>(
+    editor,
+    (slashMenuState) => {
+      if (!element) {
+        element = document.createElement("div");
+        element.style.background = "gray";
+        element.style.position = "absolute";
+        element.style.padding = "10px";
+        element.style.opacity = "0.8";
+        element.style.display = "none";
+
+        document.getElementById("root")!.appendChild(element);
+      }
+
+      if (slashMenuState.show) {
+        updateItems(
+          slashMenuState.items,
+          slashMenuState.itemCallback,
+          slashMenuState.keyboardHoveredItemIndex
+        );
+
+        element.style.display = "block";
+
+        element.style.top = slashMenuState.referencePos.top + "px";
+        element.style.left =
+          slashMenuState.referencePos.x - element.offsetWidth + "px";
+      } else {
+        element.style.display = "none";
+      }
+    },
+    (query) =>
+      defaultSlashMenuItems.filter(
+        (cmd: BaseSlashMenuItem<DefaultBlockSchema>) => cmd.match(query)
+      )
+  );
+};