refactor entrypoints

examples/editor/src/App.tsx

@@ -1,45 +1,27 @@
 // import logo from './logo.svg'
-import { EditorContent, useEditor } from "@blocknote/core";
 import "@blocknote/core/style.css";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import { Editor } from "@tiptap/core";
 import styles from "./App.module.css";
-import {
-  ReactAddBlockButtonFactory,
-  ReactBubbleMenuFactory,
-  ReactDragHandleFactory,
-  ReactDragHandleMenuFactory,
-  ReactHyperlinkMenuFactory,
-  ReactSuggestionsMenuFactory,
-} from "@blocknote/react";
 
 type WindowWithProseMirror = Window &
   typeof globalThis & { ProseMirror: Editor };
 
 function App() {
-  const editor = useEditor(
-    {
-      addBlockButtonFactory: ReactAddBlockButtonFactory,
-      bubbleMenuFactory: ReactBubbleMenuFactory,
-      dragHandleFactory: ReactDragHandleFactory,
-      dragHandleMenuFactory: ReactDragHandleMenuFactory,
-      hyperlinkMenuFactory: ReactHyperlinkMenuFactory,
-      suggestionsMenuFactory: ReactSuggestionsMenuFactory,
+  const editor = useBlockNote({
+    onUpdate: ({ editor }) => {
+      console.log(editor.getJSON());
+      (window as WindowWithProseMirror).ProseMirror = editor; // Give tests a way to get editor instance
     },
-    {
-      onUpdate: ({ editor }) => {
-        console.log(editor.getJSON());
-        (window as WindowWithProseMirror).ProseMirror = editor; // Give tests a way to get editor instance
+    editorProps: {
+      attributes: {
+        class: styles.editor,
+        "data-test": "editor",
       },
-      editorProps: {
-        attributes: {
-          class: styles.editor,
-          "data-test": "editor",
-        },
-      },
-    }
-  );
+    },
+  });
 
-  return <EditorContent editor={editor} />;
+  return <BlockNoteView editor={editor} />;
 }
 
 export default App;

packages/core/package.json

@@ -69,7 +69,6 @@
     "prosemirror-model": "1.18.1",
     "prosemirror-state": "1.4.1",
     "prosemirror-view": "1.26.2",
-    "react-icons": "^4.3.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

packages/core/src/BlockNoteEditor.ts

@@ -3,20 +3,26 @@ import { Editor, EditorOptions } from "@tiptap/core";
 import { getBlockNoteExtensions } from "./BlockNoteExtensions";
 import styles from "./editor.module.css";
 import { BubbleMenuFactory } from "./extensions/BubbleMenu/BubbleMenuFactoryTypes";
-import { HyperlinkHoverMenuFactory } from "./extensions/Hyperlinks/HyperlinkMenuFactoryTypes";
-import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
-import rootStyles from "./root.module.css";
+import {
+  AddBlockButtonFactory,
+  DragHandleFactory,
+  DragHandleMenuFactory,
+} from "./extensions/DraggableBlocks/DragMenuFactoryTypes";
+import { HyperlinkMenuFactory } from "./extensions/Hyperlinks/HyperlinkMenuFactoryTypes";
 import { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
+import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
 
-type BlockNoteEditorOptions = EditorOptions & {
+export type BlockNoteEditorOptions = EditorOptions & {
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
-};
-
-export type MenuFactories = {
-  bubbleMenuFactory: BubbleMenuFactory;
-  hyperlinkMenuFactory: HyperlinkHoverMenuFactory;
-  suggestionsMenuFactory: SuggestionsMenuFactory<SuggestionItem>;
+  uiFactories: {
+    bubbleMenuFactory: BubbleMenuFactory;
+    hyperlinkMenuFactory: HyperlinkMenuFactory;
+    suggestionsMenuFactory: SuggestionsMenuFactory<SuggestionItem>;
+    addBlockButtonFactory: AddBlockButtonFactory;
+    dragHandleFactory: DragHandleFactory;
+    dragHandleMenuFactory: DragHandleMenuFactory;
+  };
 };
 
 const blockNoteExtensions = getBlockNoteExtensions();
@@ -27,55 +33,78 @@ const blockNoteOptions = {
   enableCoreExtensions: false,
 };
 
-export const mountBlockNoteEditor = (
-  menuFactories: MenuFactories,
-  options: Partial<BlockNoteEditorOptions> = {}
-) => {
-  let extensions = options.disableHistoryExtension
-    ? blockNoteExtensions.filter((e) => e.name !== "history")
-    : blockNoteExtensions;
+export class BlockNoteEditor {
+  public readonly tiptapEditor: Editor & { contentComponent: any };
 
-  // TODO: review
-  extensions = extensions.map((extension) => {
-    if (extension.name === "BubbleMenuExtension") {
-      return extension.configure({
-        bubbleMenuFactory: menuFactories.bubbleMenuFactory,
-      });
-    }
+  constructor(options: Partial<BlockNoteEditorOptions> = {}) {
+    let extensions = options.disableHistoryExtension
+      ? blockNoteExtensions.filter((e) => e.name !== "history")
+      : blockNoteExtensions;
 
-    if (extension.name === "link") {
-      return extension.configure({
-        hyperlinkMenuFactory: menuFactories.hyperlinkMenuFactory,
-      });
-    }
+    // TODO: review
+    extensions = extensions.map((extension) => {
+      if (
+        extension.name === "BubbleMenuExtension" &&
+        options.uiFactories?.bubbleMenuFactory
+      ) {
+        return extension.configure({
+          bubbleMenuFactory: options.uiFactories.bubbleMenuFactory,
+        });
+      }
 
-    if (extension.name === "slash-command") {
-      return extension.configure({
-        suggestionsMenuFactory: menuFactories.suggestionsMenuFactory,
-      });
-    }
+      if (
+        extension.name === "link" &&
+        options.uiFactories?.hyperlinkMenuFactory
+      ) {
+        return extension.configure({
+          hyperlinkMenuFactory: options.uiFactories.hyperlinkMenuFactory,
+        });
+      }
 
-    return extension;
-  });
+      if (
+        extension.name === "slash-command" &&
+        options.uiFactories?.suggestionsMenuFactory
+      ) {
+        return extension.configure({
+          suggestionsMenuFactory: options.uiFactories.suggestionsMenuFactory,
+        });
+      }
 
-  const tiptapOptions = {
-    ...blockNoteOptions,
-    ...options,
-    extensions:
-      options.enableBlockNoteExtensions === false
-        ? options.extensions
-        : [...(options.extensions || []), ...extensions],
-    editorProps: {
-      attributes: {
-        ...(options.editorProps?.attributes || {}),
-        class: [
-          styles.bnEditor,
-          rootStyles.bnRoot,
-          (options.editorProps?.attributes as any)?.class || "",
-        ].join(" "),
+      if (
+        extension.name === "DraggableBlocksExtension" &&
+        options.uiFactories
+      ) {
+        return extension.configure({
+          addBlockButtonFactory: options.uiFactories.addBlockButtonFactory,
+          dragHandleFactory: options.uiFactories.dragHandleFactory,
+          dragHandleMenuFactory: options.uiFactories.dragHandleMenuFactory,
+        });
+      }
+
+      return extension;
+    });
+
+    const tiptapOptions = {
+      ...blockNoteOptions,
+      ...options,
+      extensions:
+        options.enableBlockNoteExtensions === false
+          ? options.extensions
+          : [...(options.extensions || []), ...extensions],
+      editorProps: {
+        attributes: {
+          ...(options.editorProps?.attributes || {}),
+          class: [
+            styles.bnEditor,
+            styles.bnRoot,
+            (options.editorProps?.attributes as any)?.class || "",
+          ].join(" "),
+        },
       },
-    },
-  };
+    };
 
-  return new Editor(tiptapOptions);
-};
+    this.tiptapEditor = new Editor(tiptapOptions) as Editor & {
+      contentComponent: any;
+    };
+  }
+}

packages/core/src/assets/fonts-inter.css

@@ -0,0 +1,92 @@
+/* Generated using https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin */
+
+/* inter-100 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-200 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-300 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-regular - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-regular.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-500 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-700 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-800 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-900 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}