@blocknote/core 0.8.2 → 0.8.4-alpha.0

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.8.2",
+  "version": "0.8.4-alpha.0",
   "files": [
     "dist",
     "types",
@@ -93,9 +93,9 @@
     "jsdom": "^21.1.0",
     "prettier": "^2.7.1",
     "typescript": "^5.0.4",
-    "vite": "^4.1.2",
+    "vite": "^4.4.8",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^0.28.5"
+    "vitest": "^0.34.1"
   },
   "eslintConfig": {
     "extends": [
@@ -110,5 +110,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8971bf90c88b71c0e1c52fc4f8b35579a2b82e28"
+  "gitHead": "fdb190e0948be3d79b12357db6a56af64413f651"
 }

package/src/BlockNoteEditor.ts

@@ -1,8 +1,9 @@
-import { Editor, EditorOptions } from "@tiptap/core";
+import { Editor, EditorOptions, Extension } from "@tiptap/core";
 import { Node } from "prosemirror-model";
 // import "./blocknote.css";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
 import * as Y from "yjs";
+import { getBlockNoteExtensions } from "./BlockNoteExtensions";
 import {
   insertBlocks,
   removeBlocks,
@@ -10,14 +11,16 @@ import {
   updateBlock,
 } from "./api/blockManipulation/blockManipulation";
 import {
+  HTMLToBlocks,
   blocksToHTML,
   blocksToMarkdown,
-  HTMLToBlocks,
   markdownToBlocks,
 } from "./api/formatConversions/formatConversions";
-import { nodeToBlock } from "./api/nodeConversions/nodeConversions";
+import {
+  blockToNode,
+  nodeToBlock,
+} from "./api/nodeConversions/nodeConversions";
 import { getNodeById } from "./api/util/nodeUtil";
-import { getBlockNoteExtensions, UiFactories } from "./BlockNoteExtensions";
 import styles from "./editor.module.css";
 import {
   Block,
@@ -37,28 +40,25 @@ import {
 } from "./extensions/Blocks/api/inlineContentTypes";
 import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
-import {
-  BaseSlashMenuItem,
-  defaultSlashMenuItems,
-} from "./extensions/SlashMenu";
+
+import { FormattingToolbarProsemirrorPlugin } from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
+import { HyperlinkToolbarProsemirrorPlugin } from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
+import { SideMenuProsemirrorPlugin } from "./extensions/SideMenu/SideMenuPlugin";
+import { BaseSlashMenuItem } from "./extensions/SlashMenu/BaseSlashMenuItem";
+import { SlashMenuProsemirrorPlugin } from "./extensions/SlashMenu/SlashMenuPlugin";
+import { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
+import { UniqueID } from "./extensions/UniqueID/UniqueID";
 
 export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
-
   /**
-   * UI element factories for creating a custom UI, including custom positioning
-   * & rendering.
-   */
-  uiFactories: UiFactories<BSchema>;
-  /**
-   * TODO: why is this called slashCommands and not slashMenuItems?
    *
    * (couldn't fix any type, see https://github.com/TypeCellOS/BlockNote/pull/191#discussion_r1210708771)
    *
    * @default defaultSlashMenuItems from `./extensions/SlashMenu`
    */
-  slashCommands: BaseSlashMenuItem<any>[];
+  slashMenuItems: BaseSlashMenuItem<any>[];
 
   /**
    * The HTML element that should be used as the parent element for the editor.
@@ -149,19 +149,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
   public readonly _tiptapEditor: TiptapEditor & { contentComponent: any };
   public blockCache = new WeakMap<Node, Block<BSchema>>();
   public readonly schema: BSchema;
-  private ready = false;
-
-  public get domElement() {
-    return this._tiptapEditor.view.dom as HTMLDivElement;
-  }
+  public ready = false;
 
-  public isFocused() {
-    return this._tiptapEditor.view.hasFocus();
-  }
-
-  public focus() {
-    this._tiptapEditor.view.focus();
-  }
+  public readonly sideMenu: SideMenuProsemirrorPlugin<BSchema>;
+  public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<BSchema>;
+  public readonly slashMenu: SlashMenuProsemirrorPlugin<BSchema, any>;
+  public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<BSchema>;
 
   constructor(
     private readonly options: Partial<BlockNoteEditorOptions<BSchema>> = {}
@@ -181,32 +174,65 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       ...options,
     };
 
+    this.sideMenu = new SideMenuProsemirrorPlugin(this);
+    this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
+    this.slashMenu = new SlashMenuProsemirrorPlugin(
+      this,
+      newOptions.slashMenuItems ||
+        getDefaultSlashMenuItems(newOptions.blockSchema)
+    );
+    this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
+
     const extensions = getBlockNoteExtensions<BSchema>({
       editor: this,
-      uiFactories: newOptions.uiFactories || {},
-      slashCommands: newOptions.slashCommands || defaultSlashMenuItems,
       blockSchema: newOptions.blockSchema,
       collaboration: newOptions.collaboration,
     });
 
+    const blockNoteUIExtension = Extension.create({
+      name: "BlockNoteUIExtension",
+
+      addProseMirrorPlugins: () => {
+        return [
+          this.sideMenu.plugin,
+          this.formattingToolbar.plugin,
+          this.slashMenu.plugin,
+          this.hyperlinkToolbar.plugin,
+        ];
+      },
+    });
+    extensions.push(blockNoteUIExtension);
+
     this.schema = newOptions.blockSchema;
 
+    const initialContent = newOptions.initialContent || [
+      {
+        type: "paragraph",
+        id: UniqueID.options.generateID(),
+      },
+    ];
+
     const tiptapOptions: EditorOptions = {
-      // TODO: This approach to setting initial content is "cleaner" but requires the PM editor schema, which is only
-      //  created after initializing the TipTap editor. Not sure it's feasible.
-      // content:
-      //   options.initialContent &&
-      //   options.initialContent.map((block) =>
-      //     blockToNode(block, this._tiptapEditor.schema).toJSON()
-      //   ),
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
       onCreate: () => {
         newOptions.onEditorReady?.(this);
-        newOptions.initialContent &&
-          this.replaceBlocks(this.topLevelBlocks, newOptions.initialContent);
         this.ready = true;
       },
+      onBeforeCreate(editor) {
+        // we have to set the initial content here, because now we can use the editor schema
+        // which has been created at this point
+        const schema = editor.editor.schema;
+        const ic = initialContent.map((block) => blockToNode(block, schema));
+
+        const root = schema.node(
+          "doc",
+          undefined,
+          schema.node("blockGroup", undefined, ic)
+        );
+        // override the initialcontent
+        editor.editor.options.content = root.toJSON();
+      },
       onUpdate: () => {
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583
@@ -253,6 +279,22 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     };
   }
 
+  public get prosemirrorView() {
+    return this._tiptapEditor.view;
+  }
+
+  public get domElement() {
+    return this._tiptapEditor.view.dom as HTMLDivElement;
+  }
+
+  public isFocused() {
+    return this._tiptapEditor.view.hasFocus();
+  }
+
+  public focus() {
+    this._tiptapEditor.view.focus();
+  }
+
   /**
    * Gets a snapshot of all top-level (non-nested) blocks in the editor.
    * @returns A snapshot of all top-level (non-nested) blocks in the editor.
@@ -344,6 +386,14 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     this._tiptapEditor.on("update", callback);
   }
 
+  /**
+   * Executes a callback whenever the editor's selection changes.
+   * @param callback The callback to execute.
+   */
+  public onEditorSelectionChange(callback: () => void) {
+    this._tiptapEditor.on("selectionUpdate", callback);
+  }
+
   /**
    * Gets a snapshot of the current text cursor position.
    * @returns A snapshot of the current text cursor position.

package/src/BlockNoteExtensions.ts

@@ -23,38 +23,18 @@ import { blocks } from "./extensions/Blocks";
 import { BlockSchema } from "./extensions/Blocks/api/blockTypes";
 import { CustomBlockSerializerExtension } from "./extensions/Blocks/api/serialization";
 import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
-import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
-import { createDraggableBlocksExtension } from "./extensions/DraggableBlocks/DraggableBlocksExtension";
-import { createFormattingToolbarExtension } from "./extensions/FormattingToolbar/FormattingToolbarExtension";
-import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
-import HyperlinkMark from "./extensions/HyperlinkToolbar/HyperlinkMark";
-import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
-import {
-  BaseSlashMenuItem,
-  createSlashMenuExtension,
-} from "./extensions/SlashMenu";
 import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
 import { TextColorMark } from "./extensions/TextColor/TextColorMark";
 import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
 import UniqueID from "./extensions/UniqueID/UniqueID";
-import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
-
-export type UiFactories<BSchema extends BlockSchema> = Partial<{
-  formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
-  hyperlinkToolbarFactory: HyperlinkToolbarFactory;
-  slashMenuFactory: SuggestionsMenuFactory<BaseSlashMenuItem<BSchema>>;
-  blockSideMenuFactory: BlockSideMenuFactory<BSchema>;
-}>;
 
 /**
  * Get all the Tiptap extensions BlockNote is configured with by default
  */
 export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
   editor: BlockNoteEditor<BSchema>;
-  uiFactories: UiFactories<BSchema>;
-  slashCommands: BaseSlashMenuItem<any>[]; // couldn't fix type, see https://github.com/TypeCellOS/BlockNote/pull/191#discussion_r1210708771
   blockSchema: BSchema;
   collaboration?: {
     fragment: Y.XmlFragment;
@@ -99,6 +79,7 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     Italic,
     Strike,
     Underline,
+    Link,
     TextColorMark,
     TextColorExtension,
     BackgroundColorMark,
@@ -155,43 +136,5 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     ret.push(History);
   }
 
-  if (opts.uiFactories.blockSideMenuFactory) {
-    ret.push(
-      createDraggableBlocksExtension<BSchema>().configure({
-        editor: opts.editor,
-        blockSideMenuFactory: opts.uiFactories.blockSideMenuFactory,
-      })
-    );
-  }
-
-  if (opts.uiFactories.formattingToolbarFactory) {
-    ret.push(
-      createFormattingToolbarExtension<BSchema>().configure({
-        editor: opts.editor,
-        formattingToolbarFactory: opts.uiFactories.formattingToolbarFactory,
-      })
-    );
-  }
-
-  if (opts.uiFactories.hyperlinkToolbarFactory) {
-    ret.push(
-      HyperlinkMark.configure({
-        hyperlinkToolbarFactory: opts.uiFactories.hyperlinkToolbarFactory,
-      })
-    );
-  } else {
-    ret.push(Link);
-  }
-
-  if (opts.uiFactories.slashMenuFactory) {
-    ret.push(
-      createSlashMenuExtension<BSchema>().configure({
-        editor: opts.editor,
-        commands: opts.slashCommands,
-        slashMenuFactory: opts.uiFactories.slashMenuFactory,
-      })
-    );
-  }
-
   return ret;
 };

package/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap

@@ -65,7 +65,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": "27",
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -83,7 +83,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": "28",
+    "id": "2",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -100,7 +100,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": "29",
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -117,7 +117,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": "30",
+    "id": "4",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -139,7 +139,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": "27",
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -157,7 +157,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": "28",
+    "id": "2",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -174,7 +174,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": "29",
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -191,7 +191,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": "30",
+    "id": "4",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -271,7 +271,7 @@ exports[`Styled Block/HTML/Markdown Conversions > Convert styled HTML to blocks
         "type": "text",
       },
     ],
-    "id": "27",
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -327,7 +327,7 @@ exports[`Styled Block/HTML/Markdown Conversions > Convert styled Markdown to blo
         "type": "text",
       },
     ],
-    "id": "27",
+    "id": "1",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",