Merge branch 'main' into new-releases

Author: matthewlipski

README.md

@@ -106,6 +106,10 @@ blocknote
 
 The codebase is automatically tested using Vitest and Playwright.
 
+# License 📃
+
+BlockNote is licensed under the [MPL 2.0 license](https://fossa.com/blog/open-source-software-licenses-101-mozilla-public-license-2-0/), which allows you to use BlockNote in commercial (and closed-source) applications. If you make changes to the BlockNote source files, you're expected to publish these changes so the wider community can benefit as well.
+
 # Credits ❤️
 
 BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemirror.net/) by Marijn Haverbeke and [Tiptap](https://tiptap.dev/). Consider sponsoring those libraries when using BlockNote: [Prosemirror](https://marijnhaverbeke.nl/fund/), [Tiptap](https://github.com/sponsors/ueberdosis).

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 } from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addFormattingToolbar = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+  let boldBtn: HTMLAnchorElement;
+
+  editor.formattingToolbar.onUpdate((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 } from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addHyperlinkToolbar = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+
+  editor.hyperlinkToolbar.onUpdate((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;
+        editor.hyperlinkToolbar.editHyperlink(newUrl, text);
+      });
+
+      element.appendChild(editBtn);
+
+      const removeBtn = createButton("remove", () => {
+        editor.hyperlinkToolbar.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 } from "@blocknote/core";
+import { createButton } from "./util";
+
+export const addSideMenu = (editor: BlockNoteEditor) => {
+  let element: HTMLElement;
+
+  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("+", () => {
+        editor.sideMenu.addBlock();
+      });
+      element.appendChild(addBtn);
+
+      const dragBtn = createButton("::", () => {
+        // TODO: render a submenu with a delete option that calls "props.deleteBlock"
+      });
+
+      dragBtn.addEventListener("dragstart", editor.sideMenu.blockDragStart);
+      dragBtn.addEventListener("dragend", editor.sideMenu.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,59 @@
+import {
+  BaseSlashMenuItem,
+  BlockNoteEditor,
+  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;
+  }
+
+  editor.slashMenu.onUpdate((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.filteredItems,
+        editor.slashMenu.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";
+    }
+  });
+};