BlockNote Api (#97)

* update v

* wip poc

* poc

* api poc

* Implemented basic block retrieval API functions

* tiny fixes

* Added marks API support, block conversion/insertion functions, and WIP markdown conversion

* Changed markdown parsing to use remark

* Added API support for serializing blocks to HTML and Markdown

* General cleanup & refactor

* vite 4

* add vitest

* fix build

* Implemented PR feedback

* Added documentation to API functions

* Added basic HTML/Markdown conversion test cases and fixed some bugs

* Added more HTML/Markdown conversion test cases

* Fixed comments

* Added HTML/Markdown conversion test snapshots

* Small changes

* Added API functions to update and remove blocks, improved distinction between `Block` and `BlockSpec` types

* Added remaining unit tests

* temp expose api

* Changed `BlockSpec` to `PartialBlock` and improved error messages

* add draggable to vanillajs example

* Added `replaceBlock` function, updated others.

* Added global props

* Fixed node conversion tests & snapshots

* Fixed format conversion tests & snapshots

* Fixed block manipulation tests & snapshots

* Commented out failing format conversion tests

* Fixed build failures

* Fixed list item parsing issue

* Changed API file structure

* Moved type import to dev dependencies

* make api accessible via editor, hide tiptap initialization options (#106)

* make api accessible via editor, hide tiptap initialization options

* remove comment

* Fixed tests

* Fixed tests

* small renames + expose domElement

* improve block types

* Small fix to PartialBlock type

* Removed logs

* add comments about waitForEditor

---------

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

* add comment

* clean up timeout

* small cleanup

* rename to InlineContent

---------

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

Author: YousefED

examples/editor/src/App.tsx

@@ -7,18 +7,18 @@ type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
 function App() {
   const editor = useBlockNote({
-    onUpdate: ({ editor }) => {
-      console.log(editor.getJSON());
-      (window as WindowWithProseMirror).ProseMirror = editor; // Give tests a way to get editor instance
+    onUpdate: () => {
+      // console.log(editor.getJSON());
     },
-    editorProps: {
-      attributes: {
-        class: styles.editor,
-        "data-test": "editor",
-      },
+    editorDOMAttributes: {
+      class: styles.editor,
+      "data-test": "editor",
     },
   });
 
+  // Give tests a way to get prosemirror instance
+  (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
+
   return <BlockNoteView editor={editor} />;
 }
 

examples/vanilla/src/main.tsx

@@ -6,7 +6,7 @@ import { hyperlinkToolbarFactory } from "./ui/hyperlinkToolbarFactory";
 import { slashMenuFactory } from "./ui/slashMenuFactory";
 
 const editor = new BlockNoteEditor({
-  element: document.getElementById("root")!,
+  parentElement: document.getElementById("root")!,
   uiFactories: {
     // Create an example formatting toolbar which just consists of a bold toggle
     formattingToolbarFactory,
@@ -17,14 +17,11 @@ const editor = new BlockNoteEditor({
     // Create an example menu for when a block is hovered
     blockSideMenuFactory,
   },
-  onUpdate: ({ editor }) => {
-    console.log(editor.getJSON());
-    (window as any).ProseMirror = editor; // Give tests a way to get editor instance
+  onUpdate: () => {
+    console.log(editor.allBlocks);
   },
-  editorProps: {
-    attributes: {
-      class: "editor",
-    },
+  editorDOMAttributes: {
+    class: "editor",
   },
 });
 

examples/vanilla/src/ui/blockSideMenuFactory.ts

@@ -22,6 +22,7 @@ export const blockSideMenuFactory: BlockSideMenuFactory = (staticParams) => {
 
   dragBtn.addEventListener("dragstart", staticParams.blockDragStart);
   dragBtn.addEventListener("dragend", staticParams.blockDragEnd);
+  dragBtn.draggable = true;
   container.style.display = "none";
   container.appendChild(dragBtn);