@blocknote/core 0.7.1-alpha.0 → 0.8.1

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -6,7 +6,7 @@ import {
 } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { BlockNoteEditor } from "../..";
+import { BlockNoteEditor, BlockSchema } from "../..";
 import {
   FormattingToolbar,
   FormattingToolbarDynamicParams,
@@ -16,29 +16,20 @@ import {
 
 // Same as TipTap bubblemenu plugin, but with these changes:
 // https://github.com/ueberdosis/tiptap/pull/2596/files
-export interface FormattingToolbarPluginProps {
+export interface FormattingToolbarPluginProps<BSchema extends BlockSchema> {
   pluginKey: PluginKey;
   tiptapEditor: Editor;
-  editor: BlockNoteEditor;
-  formattingToolbarFactory: FormattingToolbarFactory;
-  shouldShow?:
-    | ((props: {
-        editor: BlockNoteEditor;
-        view: EditorView;
-        state: EditorState;
-        oldState?: EditorState;
-        from: number;
-        to: number;
-      }) => boolean)
-    | null;
+  editor: BlockNoteEditor<BSchema>;
+  formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
 }
 
-export type FormattingToolbarViewProps = FormattingToolbarPluginProps & {
-  view: EditorView;
-};
+export type FormattingToolbarViewProps<BSchema extends BlockSchema> =
+  FormattingToolbarPluginProps<BSchema> & {
+    view: EditorView;
+  };
 
-export class FormattingToolbarView {
-  public editor: BlockNoteEditor;
+export class FormattingToolbarView<BSchema extends BlockSchema> {
+  public editor: BlockNoteEditor<BSchema>;
   private ttEditor: Editor;
 
   public view: EditorView;
@@ -53,44 +44,43 @@ export class FormattingToolbarView {
 
   public prevWasEditable: boolean | null = null;
 
-  public shouldShow: Exclude<FormattingToolbarPluginProps["shouldShow"], null> =
-    ({ view, state, from, to }) => {
-      const { doc, selection } = state;
-      const { empty } = selection;
+  public shouldShow: (props: {
+    view: EditorView;
+    state: EditorState;
+    from: number;
+    to: number;
+  }) => boolean = ({ view, state, from, to }) => {
+    const { doc, selection } = state;
+    const { empty } = selection;
 
-      // Sometime check for `empty` is not enough.
-      // Doubleclick an empty paragraph returns a node size of 2.
-      // So we check also for an empty text size.
-      const isEmptyTextBlock =
-        !doc.textBetween(from, to).length && isTextSelection(state.selection);
+    // Sometime check for `empty` is not enough.
+    // Doubleclick an empty paragraph returns a node size of 2.
+    // So we check also for an empty text size.
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
-      return !(!view.hasFocus() || empty || isEmptyTextBlock);
-    };
+    return !(!view.hasFocus() || empty || isEmptyTextBlock);
+  };
 
   constructor({
     editor,
     tiptapEditor,
     formattingToolbarFactory,
     view,
-    shouldShow,
-  }: FormattingToolbarViewProps) {
+  }: FormattingToolbarViewProps<BSchema>) {
     this.editor = editor;
     this.ttEditor = tiptapEditor;
     this.view = view;
 
     this.formattingToolbar = formattingToolbarFactory(this.getStaticParams());
 
-    if (shouldShow) {
-      this.shouldShow = shouldShow;
-    }
-
     this.view.dom.addEventListener("mousedown", this.viewMousedownHandler);
     this.view.dom.addEventListener("mouseup", this.viewMouseupHandler);
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
 
     this.ttEditor.on("focus", this.focusHandler);
     this.ttEditor.on("blur", this.blurHandler);
-    
+
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -120,11 +110,15 @@ export class FormattingToolbarView {
       return;
     }
 
+    // Checks if the focus is moving to an element outside the editor. If it is,
+    // the toolbar is hidden.
     if (
-      event?.relatedTarget &&
-      this.formattingToolbar.element?.parentNode?.contains(
-        event.relatedTarget as Node
-      )
+      // An element is clicked.
+      event &&
+      event.relatedTarget &&
+      // Element is outside the toolbar.
+      (this.formattingToolbar.element === (event.relatedTarget as Node) ||
+        this.formattingToolbar.element?.contains(event.relatedTarget as Node))
     ) {
       return;
     }
@@ -163,10 +157,8 @@ export class FormattingToolbarView {
     const to = Math.max(...ranges.map((range) => range.$to.pos));
 
     const shouldShow = this.shouldShow?.({
-      editor: this.editor,
       view,
       state,
-      oldState,
       from,
       to,
     });
@@ -181,12 +173,6 @@ export class FormattingToolbarView {
       this.formattingToolbar.render(this.getDynamicParams(), true);
       this.toolbarIsOpen = true;
 
-      // TODO: Is this necessary? Also for other menu plugins.
-      // Listener stops focus moving to the menu on click.
-      this.formattingToolbar.element!.addEventListener("mousedown", (event) =>
-        event.preventDefault()
-      );
-
       return;
     }
 
@@ -209,12 +195,6 @@ export class FormattingToolbarView {
       this.formattingToolbar.hide();
       this.toolbarIsOpen = false;
 
-      // Listener stops focus moving to the menu on click.
-      this.formattingToolbar.element!.removeEventListener(
-        "mousedown",
-        (event) => event.preventDefault()
-      );
-
       return;
     }
   }
@@ -250,7 +230,7 @@ export class FormattingToolbarView {
     return posToDOMRect(this.ttEditor.view, from, to);
   }
 
-  getStaticParams(): FormattingToolbarStaticParams {
+  getStaticParams(): FormattingToolbarStaticParams<BSchema> {
     return {
       editor: this.editor,
     };
@@ -263,8 +243,8 @@ export class FormattingToolbarView {
   }
 }
 
-export const createFormattingToolbarPlugin = (
-  options: FormattingToolbarPluginProps
+export const createFormattingToolbarPlugin = <BSchema extends BlockSchema>(
+  options: FormattingToolbarPluginProps<BSchema>
 ) => {
   return new Plugin({
     key: new PluginKey("FormattingToolbarPlugin"),

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -57,6 +57,7 @@ class HyperlinkToolbarView {
     };
 
     this.editor.view.dom.addEventListener("mouseover", this.mouseOverHandler);
+    document.addEventListener("click", this.clickHandler, true);
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -101,6 +102,24 @@ class HyperlinkToolbarView {
     return false;
   };
 
+  clickHandler = (event: MouseEvent) => {
+    if (
+      // Toolbar is open.
+      this.hyperlinkMark &&
+      // An element is clicked.
+      event &&
+      event.target &&
+      // Element is outside the editor.
+      this.editor.view.dom !== (event.target as Node) &&
+      !this.editor.view.dom.contains(event.target as Node) &&
+      // Element is outside the toolbar.
+      this.hyperlinkToolbar.element !== (event.target as Node) &&
+      !this.hyperlinkToolbar.element?.contains(event.target as Node)
+    ) {
+      this.hyperlinkToolbar.hide();
+    }
+  };
+
   scrollHandler = () => {
     if (this.hyperlinkMark !== undefined) {
       this.hyperlinkToolbar.render(this.getDynamicParams(), false);

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -72,6 +72,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const classes = [this.options.emptyNodeClass];
 
+                // TODO: Doesn't work?
                 if (this.editor.isEmpty) {
                   classes.push(this.options.emptyEditorClass);
                 }

package/src/extensions/SlashMenu/BaseSlashMenuItem.ts

@@ -1,12 +1,15 @@
 import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
 
 /**
  * A class that defines a slash command (/<command>).
  *
  * (Not to be confused with ProseMirror commands nor TipTap commands.)
  */
-export class BaseSlashMenuItem extends SuggestionItem {
+export class BaseSlashMenuItem<
+  BSchema extends BlockSchema
+> extends SuggestionItem {
   /**
    * Constructs a new slash-command.
    *
@@ -16,7 +19,7 @@ export class BaseSlashMenuItem extends SuggestionItem {
    */
   constructor(
     public readonly name: string,
-    public readonly execute: (editor: BlockNoteEditor) => void,
+    public readonly execute: (editor: BlockNoteEditor<BSchema>) => void,
     public readonly aliases: string[] = []
   ) {
     super(name, (query: string): boolean => {

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -4,46 +4,50 @@ import { createSuggestionPlugin } from "../../shared/plugins/suggestion/Suggesti
 import { SuggestionsMenuFactory } from "../../shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
 import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
 
-export type SlashMenuOptions = {
-  editor: BlockNoteEditor | undefined;
-  commands: BaseSlashMenuItem[] | undefined;
+export type SlashMenuOptions<BSchema extends BlockSchema> = {
+  editor: BlockNoteEditor<BSchema> | undefined;
+  commands: BaseSlashMenuItem<BSchema>[] | undefined;
   slashMenuFactory: SuggestionsMenuFactory<any> | undefined;
 };
 
 export const SlashMenuPluginKey = new PluginKey("suggestions-slash-commands");
 
-export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
-  name: "slash-command",
+export const createSlashMenuExtension = <BSchema extends BlockSchema>() =>
+  Extension.create<SlashMenuOptions<BSchema>>({
+    name: "slash-command",
 
-  addOptions() {
-    return {
-      editor: undefined,
-      commands: undefined,
-      slashMenuFactory: undefined,
-    };
-  },
+    addOptions() {
+      return {
+        editor: undefined,
+        commands: undefined,
+        slashMenuFactory: undefined,
+      };
+    },
 
-  addProseMirrorPlugins() {
-    if (!this.options.slashMenuFactory || !this.options.commands) {
-      throw new Error("required args not defined for SlashMenuExtension");
-    }
+    addProseMirrorPlugins() {
+      if (!this.options.slashMenuFactory || !this.options.commands) {
+        throw new Error("required args not defined for SlashMenuExtension");
+      }
 
-    const commands = this.options.commands;
+      const commands = this.options.commands;
 
-    return [
-      createSuggestionPlugin<BaseSlashMenuItem>({
-        pluginKey: SlashMenuPluginKey,
-        editor: this.options.editor!,
-        defaultTriggerCharacter: "/",
-        suggestionsMenuFactory: this.options.slashMenuFactory!,
-        items: (query) => {
-          return commands.filter((cmd: BaseSlashMenuItem) => cmd.match(query));
-        },
-        onSelectItem: ({ item, editor }) => {
-          item.execute(editor);
-        },
-      }),
-    ];
-  },
-});
+      return [
+        createSuggestionPlugin<BaseSlashMenuItem<BSchema>, BSchema>({
+          pluginKey: SlashMenuPluginKey,
+          editor: this.options.editor!,
+          defaultTriggerCharacter: "/",
+          suggestionsMenuFactory: this.options.slashMenuFactory!,
+          items: (query) => {
+            return commands.filter((cmd: BaseSlashMenuItem<BSchema>) =>
+              cmd.match(query)
+            );
+          },
+          onSelectItem: ({ item, editor }) => {
+            item.execute(editor);
+          },
+        }),
+      ];
+    },
+  });

package/src/extensions/SlashMenu/defaultSlashMenuItems.tsx

@@ -1,8 +1,12 @@
-import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
-import { PartialBlock } from "../Blocks/api/blockTypes";
 import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { PartialBlock } from "../Blocks/api/blockTypes";
+import { DefaultBlockSchema } from "../Blocks/api/defaultBlocks";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 
-function insertOrUpdateBlock(editor: BlockNoteEditor, block: PartialBlock) {
+function insertOrUpdateBlock<BSchema extends DefaultBlockSchema>(
+  editor: BlockNoteEditor<BSchema>,
+  block: PartialBlock<BSchema>
+) {
   const currentBlock = editor.getTextCursorPosition().block;
 
   if (
@@ -21,9 +25,9 @@ function insertOrUpdateBlock(editor: BlockNoteEditor, block: PartialBlock) {
 /**
  * An array containing commands for creating all default blocks.
  */
-export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
+export const defaultSlashMenuItems = [
   // Command for creating a level 1 heading
-  new BaseSlashMenuItem(
+  new BaseSlashMenuItem<DefaultBlockSchema>(
     "Heading",
     (editor) =>
       insertOrUpdateBlock(editor, {
@@ -34,7 +38,7 @@ export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   ),
 
   // Command for creating a level 2 heading
-  new BaseSlashMenuItem(
+  new BaseSlashMenuItem<DefaultBlockSchema>(
     "Heading 2",
     (editor) =>
       insertOrUpdateBlock(editor, {
@@ -45,7 +49,7 @@ export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   ),
 
   // Command for creating a level 3 heading
-  new BaseSlashMenuItem(
+  new BaseSlashMenuItem<DefaultBlockSchema>(
     "Heading 3",
     (editor) =>
       insertOrUpdateBlock(editor, {
@@ -56,7 +60,7 @@ export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   ),
 
   // Command for creating an ordered list
-  new BaseSlashMenuItem(
+  new BaseSlashMenuItem<DefaultBlockSchema>(
     "Numbered List",
     (editor) =>
       insertOrUpdateBlock(editor, {
@@ -66,7 +70,7 @@ export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   ),
 
   // Command for creating a bullet list
-  new BaseSlashMenuItem(
+  new BaseSlashMenuItem<DefaultBlockSchema>(
     "Bullet List",
     (editor) =>
       insertOrUpdateBlock(editor, {
@@ -76,7 +80,7 @@ export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   ),
 
   // Command for creating a paragraph (pretty useless)
-  new BaseSlashMenuItem(
+  new BaseSlashMenuItem<DefaultBlockSchema>(
     "Paragraph",
     (editor) =>
       insertOrUpdateBlock(editor, {

package/src/extensions/SlashMenu/index.ts

@@ -1,5 +1,5 @@
 import { defaultSlashMenuItems } from "./defaultSlashMenuItems";
-import { SlashMenuExtension } from "./SlashMenuExtension";
+import { createSlashMenuExtension } from "./SlashMenuExtension";
 import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 
-export { defaultSlashMenuItems, BaseSlashMenuItem, SlashMenuExtension };
+export { defaultSlashMenuItems, BaseSlashMenuItem, createSlashMenuExtension };

package/src/index.ts

@@ -1,6 +1,8 @@
 export * from "./BlockNoteEditor";
 export * from "./BlockNoteExtensions";
+export * from "./extensions/Blocks/api/block";
 export * from "./extensions/Blocks/api/blockTypes";
+export * from "./extensions/Blocks/api/defaultBlocks";
 export * from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
 export * from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
@@ -10,3 +12,5 @@ export * from "./shared/EditorElement";
 export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
 export * from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
 export * from "./extensions/Blocks/api/inlineContentTypes";
+export * from "./extensions/Blocks/api/serialization";
+export * as blockStyles from "./extensions/Blocks/nodes/Block.module.css";

package/src/shared/plugins/suggestion/SuggestionPlugin.ts

@@ -10,8 +10,12 @@ import {
 } from "./SuggestionsMenuFactoryTypes";
 import { SuggestionItem } from "./SuggestionItem";
 import { BlockNoteEditor } from "../../../BlockNoteEditor";
+import { BlockSchema } from "../../../extensions/Blocks/api/blockTypes";
 
-export type SuggestionPluginOptions<T extends SuggestionItem> = {
+export type SuggestionPluginOptions<
+  T extends SuggestionItem,
+  BSchema extends BlockSchema
+> = {
   /**
    * The name of the plugin.
    *
@@ -22,7 +26,7 @@ export type SuggestionPluginOptions<T extends SuggestionItem> = {
   /**
    * The BlockNote editor.
    */
-  editor: BlockNoteEditor;
+  editor: BlockNoteEditor<BSchema>;
 
   /**
    * The character that should trigger the suggestion menu to pop up (e.g. a '/' for commands), when typed by the user.
@@ -38,7 +42,7 @@ export type SuggestionPluginOptions<T extends SuggestionItem> = {
    * this should be done manually. The `editor` and `range` properties passed
    * to the callback function might come in handy when doing this.
    */
-  onSelectItem?: (props: { item: T; editor: BlockNoteEditor }) => void;
+  onSelectItem?: (props: { item: T; editor: BlockNoteEditor<BSchema> }) => void;
 
   /**
    * A function that should supply the plugin with items to suggest, based on a certain query string.
@@ -81,15 +85,21 @@ function getDefaultPluginState<
   };
 }
 
-type SuggestionPluginViewOptions<T extends SuggestionItem> = {
-  editor: BlockNoteEditor;
+type SuggestionPluginViewOptions<
+  T extends SuggestionItem,
+  BSchema extends BlockSchema
+> = {
+  editor: BlockNoteEditor<BSchema>;
   pluginKey: PluginKey;
-  onSelectItem: (props: { item: T; editor: BlockNoteEditor }) => void;
+  onSelectItem: (props: { item: T; editor: BlockNoteEditor<BSchema> }) => void;
   suggestionsMenuFactory: SuggestionsMenuFactory<T>;
 };
 
-class SuggestionPluginView<T extends SuggestionItem> {
-  editor: BlockNoteEditor;
+class SuggestionPluginView<
+  T extends SuggestionItem,
+  BSchema extends BlockSchema
+> {
+  editor: BlockNoteEditor<BSchema>;
   pluginKey: PluginKey;
 
   suggestionsMenu: SuggestionsMenu<T>;
@@ -102,7 +112,7 @@ class SuggestionPluginView<T extends SuggestionItem> {
     pluginKey,
     onSelectItem: selectItemCallback = () => {},
     suggestionsMenuFactory,
-  }: SuggestionPluginViewOptions<T>) {
+  }: SuggestionPluginViewOptions<T, BSchema>) {
     this.editor = editor;
     this.pluginKey = pluginKey;
 
@@ -214,14 +224,17 @@ class SuggestionPluginView<T extends SuggestionItem> {
  * @param options options for configuring the plugin
  * @returns the prosemirror plugin
  */
-export function createSuggestionPlugin<T extends SuggestionItem>({
+export function createSuggestionPlugin<
+  T extends SuggestionItem,
+  BSchema extends BlockSchema
+>({
   pluginKey,
   editor,
   defaultTriggerCharacter,
   suggestionsMenuFactory,
   onSelectItem: selectItemCallback = () => {},
   items = () => [],
-}: SuggestionPluginOptions<T>) {
+}: SuggestionPluginOptions<T, BSchema>) {
   // Assertions
   if (defaultTriggerCharacter.length !== 1) {
     throw new Error("'char' should be a single character");
@@ -236,10 +249,13 @@ export function createSuggestionPlugin<T extends SuggestionItem>({
     key: pluginKey,
 
     view: (view: EditorView) =>
-      new SuggestionPluginView({
+      new SuggestionPluginView<T, BSchema>({
         editor: editor,
         pluginKey: pluginKey,
-        onSelectItem: (props: { item: T; editor: BlockNoteEditor }) => {
+        onSelectItem: (props: {
+          item: T;
+          editor: BlockNoteEditor<BSchema>;
+        }) => {
           deactivate(view);
           selectItemCallback(props);
         },