feat: Custom Blocks

.gitignore

@@ -29,4 +29,7 @@ yarn-error.log*
 .vercel
 test-results/
 playwright-report/
-release
+release
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/editor/package.json

@@ -20,7 +20,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",
-    "typescript": "^4.5.4",
+    "typescript": "^5.0.4",
     "vite": "^4.1.2",
     "vite-plugin-eslint": "^1.8.1"
   },

examples/vanilla/package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",
-    "typescript": "^4.5.4",
+    "typescript": "^5.0.4",
     "vite": "^4.1.2",
     "vite-plugin-eslint": "^1.8.1"
   },

examples/vanilla/src/ui/blockSideMenuFactory.ts

@@ -1,11 +1,13 @@
-import { BlockSideMenuFactory } from "@blocknote/core";
+import { BlockSideMenuFactory, DefaultBlockSchema } from "@blocknote/core";
 import { createButton } from "./util";
 
 /**
  * This menu is drawn next to a block, when it's hovered over
  * It renders a drag handle and + button to create a new block
  */
-export const blockSideMenuFactory: BlockSideMenuFactory = (staticParams) => {
+export const blockSideMenuFactory: BlockSideMenuFactory<DefaultBlockSchema> = (
+  staticParams
+) => {
   const container = document.createElement("div");
   container.style.background = "gray";
   container.style.position = "absolute";

examples/vanilla/src/ui/formattingToolbarFactory.ts

@@ -1,13 +1,13 @@
-import { FormattingToolbarFactory } from "@blocknote/core";
+import { DefaultBlockSchema, FormattingToolbarFactory } from "@blocknote/core";
 import { createButton } from "./util";
 
 /**
  * This menu is drawn when a piece of text is selected. We can use it to change formatting options
  * such as bold, italic, indentation, etc.
  */
-export const formattingToolbarFactory: FormattingToolbarFactory = (
-  staticParams
-) => {
+export const formattingToolbarFactory: FormattingToolbarFactory<
+  DefaultBlockSchema
+> = (staticParams) => {
   const container = document.createElement("div");
   container.style.background = "gray";
   container.style.position = "absolute";
@@ -35,7 +35,9 @@ export const formattingToolbarFactory: FormattingToolbarFactory = (
       }
 
       boldBtn.text =
-        "bold" in staticParams.editor.getActiveStyles() ? "unset bold" : "set bold";
+        "bold" in staticParams.editor.getActiveStyles()
+          ? "unset bold"
+          : "set bold";
       container.style.top = params.referenceRect.y + "px";
       container.style.left = params.referenceRect.x + "px";
     },

examples/vanilla/src/ui/slashMenuFactory.ts

@@ -1,13 +1,17 @@
-import { BaseSlashMenuItem, SuggestionsMenuFactory } from "@blocknote/core";
+import {
+  BaseSlashMenuItem,
+  DefaultBlockSchema,
+  SuggestionsMenuFactory,
+} from "@blocknote/core";
 import { createButton } from "./util";
 
 /**
  * This menu is drawn when the cursor is moved to a hyperlink (using the keyboard),
  * or when the mouse is hovering over a hyperlink
  */
-export const slashMenuFactory: SuggestionsMenuFactory<BaseSlashMenuItem> = (
-  staticParams
-) => {
+export const slashMenuFactory: SuggestionsMenuFactory<
+  BaseSlashMenuItem<DefaultBlockSchema>
+> = (staticParams) => {
   const container = document.createElement("div");
   container.style.background = "gray";
   container.style.position = "absolute";
@@ -17,8 +21,8 @@ export const slashMenuFactory: SuggestionsMenuFactory<BaseSlashMenuItem> = (
   document.body.appendChild(container);
 
   function updateItems(
-    items: BaseSlashMenuItem[],
-    onClick: (item: BaseSlashMenuItem) => void,
+    items: BaseSlashMenuItem<DefaultBlockSchema>[],
+    onClick: (item: BaseSlashMenuItem<DefaultBlockSchema>) => void,
     selected: number
   ) {
     container.innerHTML = "";