feat: Custom Blocks (#191)

* simplify formattingtoolbar

* Fixed React component types and added customizable formatting toolbar factory

* Finished formatting toolbar customization with old props

* Changed formatting toolbar props to use BlockNoteEditor

* Fixed text alignment with basic selection object

* Fixed block nesting tests

* Removed multiple block shorthand for updateBlock

* Added comments

* Added basic mouse cursor position

* Added drag handle menu customization API

* Copied changes from PR and minor improvements

* Table block test

* wip: custom blocks typing and API

* add comments

* fix nodeConversions, add schema

* comments

* Implemented renderHTML and parseHTML for createCustomBlock

* Temp changes

* Mostly implemented stricter typing for custom blocks

* Cleanup & fixed build issues

* Fixed useBlockNote and improved some typing

* Implemented PR feedback

* Minor changes

* Made custom blocks use node views

* Created custom example and setup component testing

* Changed custom block `renderHTML` implementation

* Changed custom block `renderHTML` implementation

* Changed custom block testing setup and added custom block examples

* Slightly changed `blockConfig.render` type

* Fixed merge issues

* custom blocks react poc

* Added internal custom block copy/paste tests

* Small fix

* Added external custom block copy/paste tests

* Added expected serialized HTML for example custom blocks

* Updated playwright scripts

* Updated component tests and added serializer extension

* Updated React custom block API

* Reverted `App.tsx`

* Fixed `test:updateSnaps` script

* Added external copypaste snapshots

* Fixed failing tests

* Copy/paste tests are now skipped for WebKit

* Removed old `console.log`s

* Small change to `test-ct` script

* Removed image block from `defaultBlocks.ts`

* Updated component tests & snapshots

* General cleanup

* Updated firefox colors snapshot

* remove unnecessary generics for slash menu items

* fix types

* hack around TextAlignButton types

* Custom blocks example typing improvements (#202)

* improve typings

* add tests for types

---------

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>

* Implemented most PR feedback

* Implemented most PR feedback

* Minor fixes to custom blocks

* Custom blocks docs (#217)

* Fixed custom block placeholders, formatting toolbar, and sizing

* Small styling changes

* Made text align button not show up when selected block/s doesn't/don't support the prop

* Updated docs

* Finished 1st draft custom block docs and demo

* Added type arguments in custom block docs & minor changes

* Implemented PR feedback

* Updated unit tests

* simplify docs

* package lock update

* add comment

* retreat, fallback slash command to "any"

* update packages incl prosemirror-view (#223)

* update packages incl prosemirror-view

* fix build

* fix ReactAlert + add logs

---------

Co-authored-by: yousefed <yousefdardiry@gmail.com>

Author: matthewlipski

.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 = "";