@blocknote/core 0.8.2 → 0.8.4-alpha.0

package/types/src/BlockNoteEditor.d.ts

@@ -1,28 +1,25 @@
 import { Node } from "prosemirror-model";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
 import * as Y from "yjs";
-import { UiFactories } from "./BlockNoteExtensions";
 import { Block, BlockIdentifier, BlockSchema, PartialBlock } from "./extensions/Blocks/api/blockTypes";
 import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import { DefaultBlockSchema } from "./extensions/Blocks/api/defaultBlocks";
 import { Styles } from "./extensions/Blocks/api/inlineContentTypes";
 import { Selection } from "./extensions/Blocks/api/selectionTypes";
-import { BaseSlashMenuItem } 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";
 export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
     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.
      *
@@ -104,11 +101,16 @@ export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockS
     };
     blockCache: WeakMap<Node, Block<BSchema>>;
     readonly schema: BSchema;
-    private ready;
+    ready: boolean;
+    readonly sideMenu: SideMenuProsemirrorPlugin<BSchema>;
+    readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<BSchema>;
+    readonly slashMenu: SlashMenuProsemirrorPlugin<BSchema, any>;
+    readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<BSchema>;
+    constructor(options?: Partial<BlockNoteEditorOptions<BSchema>>);
+    get prosemirrorView(): import("prosemirror-view").EditorView;
     get domElement(): HTMLDivElement;
     isFocused(): boolean;
     focus(): void;
-    constructor(options?: Partial<BlockNoteEditorOptions<BSchema>>);
     /**
      * 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.
@@ -131,6 +133,11 @@ export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockS
      * @param callback The callback to execute.
      */
     onEditorContentChange(callback: () => void): void;
+    /**
+     * Executes a callback whenever the editor's selection changes.
+     * @param callback The callback to execute.
+     */
+    onEditorSelectionChange(callback: () => void): void;
     /**
      * Gets a snapshot of the current text cursor position.
      * @returns A snapshot of the current text cursor position.

package/types/src/BlockNoteExtensions.d.ts

@@ -1,30 +1,11 @@
 import { Extensions } from "@tiptap/core";
 import { BlockNoteEditor } from "./BlockNoteEditor";
 import * as Y from "yjs";
-import { BlockSchema } from "./extensions/Blocks/api/blockTypes";
-import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
-import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
-import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
-import { BaseSlashMenuItem } from "./extensions/SlashMenu";
-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 declare const getBlockNoteExtensions: <BSchema extends Record<string, import("./extensions/Blocks/api/blockTypes").BlockSpec<string, import("./extensions/Blocks/api/blockTypes").PropSchema>>>(opts: {
     editor: BlockNoteEditor<BSchema>;
-    uiFactories: Partial<{
-        formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
-        hyperlinkToolbarFactory: HyperlinkToolbarFactory;
-        slashMenuFactory: SuggestionsMenuFactory<BaseSlashMenuItem<BSchema>>;
-        blockSideMenuFactory: BlockSideMenuFactory<BSchema>;
-    }>;
-    slashCommands: BaseSlashMenuItem<any>[];
     blockSchema: BSchema;
     collaboration?: {
         fragment: Y.XmlFragment;

package/types/src/extensions/Blocks/api/blockTypes.d.ts

@@ -2,6 +2,7 @@
 import { Node, NodeConfig } from "@tiptap/core";
 import { BlockNoteEditor } from "../../../BlockNoteEditor";
 import { InlineContent, PartialInlineContent } from "./inlineContentTypes";
+import { DefaultBlockSchema } from "./defaultBlocks";
 export type TipTapNodeConfig<Name extends string, Options = any, Storage = any> = {
     [K in keyof NodeConfig<Options, Storage>]: K extends "name" ? Name : K extends "group" ? never : NodeConfig<Options, Storage>[K];
 };
@@ -58,7 +59,7 @@ type BlocksWithoutChildren<BSchema extends BlockSchema> = {
         content: InlineContent[];
     };
 };
-export type Block<BSchema extends BlockSchema> = BlocksWithoutChildren<BSchema>[keyof BlocksWithoutChildren<BSchema>] & {
+export type Block<BSchema extends BlockSchema = DefaultBlockSchema> = BlocksWithoutChildren<BSchema>[keyof BlocksWithoutChildren<BSchema>] & {
     children: Block<BSchema>[];
 };
 export type SpecificBlock<BSchema extends BlockSchema, BlockType extends keyof BSchema> = BlocksWithoutChildren<BSchema>[BlockType] & {
@@ -72,7 +73,7 @@ type PartialBlocksWithoutChildren<BSchema extends BlockSchema> = {
         content: PartialInlineContent[] | string;
     }>;
 };
-export type PartialBlock<BSchema extends BlockSchema> = PartialBlocksWithoutChildren<BSchema>[keyof PartialBlocksWithoutChildren<BSchema>] & Partial<{
+export type PartialBlock<BSchema extends BlockSchema = DefaultBlockSchema> = PartialBlocksWithoutChildren<BSchema>[keyof PartialBlocksWithoutChildren<BSchema>] & Partial<{
     children: PartialBlock<BSchema>[];
 }>;
 export type BlockIdentifier = {

package/types/src/extensions/FormattingToolbar/FormattingToolbarPlugin.d.ts

@@ -1,44 +1,38 @@
-import { Editor } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { BlockNoteEditor, BlockSchema } from "../..";
-import { FormattingToolbar, FormattingToolbarFactory, FormattingToolbarStaticParams } from "./FormattingToolbarFactoryTypes";
-export interface FormattingToolbarPluginProps<BSchema extends BlockSchema> {
-    pluginKey: PluginKey;
-    tiptapEditor: Editor;
-    editor: BlockNoteEditor<BSchema>;
-    formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
-}
-export type FormattingToolbarViewProps<BSchema extends BlockSchema> = FormattingToolbarPluginProps<BSchema> & {
-    view: EditorView;
-};
+import { BaseUiElementCallbacks, BaseUiElementState, BlockNoteEditor, BlockSchema } from "../..";
+import { EventEmitter } from "../../shared/EventEmitter";
+export type FormattingToolbarCallbacks = BaseUiElementCallbacks;
+export type FormattingToolbarState = BaseUiElementState;
 export declare class FormattingToolbarView<BSchema extends BlockSchema> {
-    editor: BlockNoteEditor<BSchema>;
-    private ttEditor;
-    view: EditorView;
-    formattingToolbar: FormattingToolbar;
+    private readonly editor;
+    private readonly pmView;
+    private formattingToolbarState?;
+    updateFormattingToolbar: () => void;
     preventHide: boolean;
     preventShow: boolean;
-    toolbarIsOpen: boolean;
     prevWasEditable: boolean | null;
-    private lastPosition;
     shouldShow: (props: {
         view: EditorView;
         state: EditorState;
         from: number;
         to: number;
     }) => boolean;
-    constructor({ editor, tiptapEditor, formattingToolbarFactory, view, }: FormattingToolbarViewProps<BSchema>);
+    constructor(editor: BlockNoteEditor<BSchema>, pmView: EditorView, updateFormattingToolbar: (formattingToolbarState: FormattingToolbarState) => void);
     viewMousedownHandler: () => void;
     viewMouseupHandler: () => void;
     dragstartHandler: () => void;
     focusHandler: () => void;
-    blurHandler: ({ event }: {
-        event: FocusEvent;
-    }) => void;
+    blurHandler: (event: FocusEvent) => void;
+    scrollHandler: () => void;
     update(view: EditorView, oldState?: EditorState): void;
     destroy(): void;
     getSelectionBoundingBox(): DOMRect;
-    getStaticParams(): FormattingToolbarStaticParams<BSchema>;
 }
-export declare const createFormattingToolbarPlugin: <BSchema extends Record<string, import("../..").BlockSpec<string, import("../..").PropSchema>>>(options: FormattingToolbarPluginProps<BSchema>) => Plugin<any>;
+export declare const formattingToolbarPluginKey: PluginKey<any>;
+export declare class FormattingToolbarProsemirrorPlugin<BSchema extends BlockSchema> extends EventEmitter<any> {
+    private view;
+    readonly plugin: Plugin;
+    constructor(editor: BlockNoteEditor<BSchema>);
+    onUpdate(callback: (state: FormattingToolbarState) => void): () => void;
+}

package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.d.ts

@@ -1,11 +1,38 @@
-import { Editor } from "@tiptap/core";
-import { Plugin } from "prosemirror-state";
-import { HyperlinkToolbarFactory } from "./HyperlinkToolbarFactoryTypes";
-export type HyperlinkToolbarPluginProps = {
-    hyperlinkToolbarFactory: HyperlinkToolbarFactory;
+import { Plugin, PluginKey } from "prosemirror-state";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BaseUiElementState } from "../../shared/BaseUiElementTypes";
+import { EventEmitter } from "../../shared/EventEmitter";
+import { BlockSchema } from "../Blocks/api/blockTypes";
+export type HyperlinkToolbarState = BaseUiElementState & {
+    url: string;
+    text: string;
 };
-export type HyperlinkToolbarViewProps = {
-    editor: Editor;
-    hyperlinkToolbarFactory: HyperlinkToolbarFactory;
-};
-export declare const createHyperlinkToolbarPlugin: (editor: Editor, options: HyperlinkToolbarPluginProps) => Plugin<any>;
+export declare const hyperlinkToolbarPluginKey: PluginKey<any>;
+export declare class HyperlinkToolbarProsemirrorPlugin<BSchema extends BlockSchema> extends EventEmitter<any> {
+    private view;
+    readonly plugin: Plugin;
+    constructor(editor: BlockNoteEditor<BSchema>);
+    onUpdate(callback: (state: HyperlinkToolbarState) => void): () => void;
+    /**
+     * Edit the currently hovered hyperlink.
+     */
+    editHyperlink: (url: string, text: string) => void;
+    /**
+     * Delete the currently hovered hyperlink.
+     */
+    deleteHyperlink: () => void;
+    /**
+     * When hovering on/off hyperlinks using the mouse cursor, the hyperlink
+     * toolbar will open & close with a delay.
+     *
+     * This function starts the delay timer, and should be used for when the mouse cursor enters the hyperlink toolbar.
+     */
+    startHideTimer: () => void;
+    /**
+     * When hovering on/off hyperlinks using the mouse cursor, the hyperlink
+     * toolbar will open & close with a delay.
+     *
+     * This function stops the delay timer, and should be used for when the mouse cursor exits the hyperlink toolbar.
+     */
+    stopHideTimer: () => void;
+}

package/types/src/extensions/SideMenu/SideMenuPlugin.d.ts

@@ -0,0 +1,79 @@
+import { PluginView } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BaseUiElementState } from "../../shared/BaseUiElementTypes";
+import { EventEmitter } from "../../shared/EventEmitter";
+import { Block, BlockSchema } from "../Blocks/api/blockTypes";
+export type SideMenuState<BSchema extends BlockSchema> = BaseUiElementState & {
+    block: Block<BSchema>;
+};
+export declare class SideMenuView<BSchema extends BlockSchema> implements PluginView {
+    private readonly editor;
+    private readonly pmView;
+    private readonly updateSideMenu;
+    private sideMenuState?;
+    private horizontalPosAnchoredAtRoot;
+    private horizontalPosAnchor;
+    private hoveredBlock;
+    isDragging: boolean;
+    menuFrozen: boolean;
+    constructor(editor: BlockNoteEditor<BSchema>, pmView: EditorView, updateSideMenu: (sideMenuState: SideMenuState<BSchema>) => void);
+    /**
+     * Sets isDragging when dragging text.
+     */
+    onDragStart: () => void;
+    /**
+     * If the event is outside the editor contents,
+     * we dispatch a fake event, so that we can still drop the content
+     * when dragging / dropping to the side of the editor
+     */
+    onDrop: (event: DragEvent) => void;
+    /**
+     * If the event is outside the editor contents,
+     * we dispatch a fake event, so that we can still drop the content
+     * when dragging / dropping to the side of the editor
+     */
+    onDragOver: (event: DragEvent) => void;
+    onKeyDown: (_event: KeyboardEvent) => void;
+    onMouseMove: (event: MouseEvent) => void;
+    onScroll: () => void;
+    destroy(): void;
+    addBlock(): void;
+}
+export declare const sideMenuPluginKey: PluginKey<any>;
+export declare class SideMenuProsemirrorPlugin<BSchema extends BlockSchema> extends EventEmitter<any> {
+    private readonly editor;
+    private sideMenuView;
+    readonly plugin: Plugin;
+    constructor(editor: BlockNoteEditor<BSchema>);
+    onUpdate(callback: (state: SideMenuState<BSchema>) => void): () => void;
+    /**
+     * If the block is empty, opens the slash menu. If the block has content,
+     * creates a new block below and opens the slash menu in it.
+     */
+    addBlock: () => void;
+    /**
+     * Handles drag & drop events for blocks.
+     */
+    blockDragStart: (event: {
+        dataTransfer: DataTransfer | null;
+        clientY: number;
+    }) => void;
+    /**
+     * Handles drag & drop events for blocks.
+     */
+    blockDragEnd: () => void;
+    /**
+     * Freezes the side menu. When frozen, the side menu will stay
+     * attached to the same block regardless of which block is hovered by the
+     * mouse cursor.
+     */
+    freezeMenu: () => boolean;
+    /**
+     * Unfreezes the side menu. When frozen, the side menu will stay
+     * attached to the same block regardless of which block is hovered by the
+     * mouse cursor.
+     */
+    unfreezeMenu: () => boolean;
+}

package/types/src/extensions/SlashMenu/BaseSlashMenuItem.d.ts

@@ -1,21 +1,8 @@
 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 declare class BaseSlashMenuItem<BSchema extends BlockSchema> extends SuggestionItem {
-    readonly name: string;
-    readonly execute: (editor: BlockNoteEditor<BSchema>) => void;
-    readonly aliases: string[];
-    /**
-     * Constructs a new slash-command.
-     *
-     * @param name The name of the command
-     * @param execute The callback for creating a new node
-     * @param aliases Aliases for this command
-     */
-    constructor(name: string, execute: (editor: BlockNoteEditor<BSchema>) => void, aliases?: string[]);
-}
+import { DefaultBlockSchema } from "../Blocks/api/defaultBlocks";
+export type BaseSlashMenuItem<BSchema extends BlockSchema = DefaultBlockSchema> = SuggestionItem & {
+    execute: (editor: BlockNoteEditor<BSchema>) => void;
+    aliases?: string[];
+};

package/types/src/extensions/SlashMenu/SlashMenuPlugin.d.ts

@@ -0,0 +1,13 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { EventEmitter } from "../../shared/EventEmitter";
+import { SuggestionsMenuState } from "../../shared/plugins/suggestion/SuggestionPlugin";
+import { BlockSchema } from "../Blocks/api/blockTypes";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+export declare const slashMenuPluginKey: PluginKey<any>;
+export declare class SlashMenuProsemirrorPlugin<BSchema extends BlockSchema, SlashMenuItem extends BaseSlashMenuItem<BSchema>> extends EventEmitter<any> {
+    readonly plugin: Plugin;
+    readonly itemCallback: (item: SlashMenuItem) => void;
+    constructor(editor: BlockNoteEditor<BSchema>, items: SlashMenuItem[]);
+    onUpdate(callback: (state: SuggestionsMenuState<SlashMenuItem>) => void): () => void;
+}

package/types/src/extensions/SlashMenu/defaultSlashMenuItems.d.ts

@@ -1,70 +1,2 @@
 import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
-/**
- * An array containing commands for creating all default blocks.
- */
-export declare const defaultSlashMenuItems: BaseSlashMenuItem<{
-    readonly paragraph: {
-        readonly propSchema: {
-            backgroundColor: {
-                default: "transparent";
-            };
-            textColor: {
-                default: "black";
-            };
-            textAlignment: {
-                default: "left";
-                values: readonly ["left", "center", "right", "justify"];
-            };
-        };
-        readonly node: import("../Blocks/api/blockTypes").TipTapNode<"paragraph">;
-    };
-    readonly heading: {
-        readonly propSchema: {
-            readonly level: {
-                readonly default: "1";
-                readonly values: readonly ["1", "2", "3"];
-            };
-            readonly backgroundColor: {
-                default: "transparent";
-            };
-            readonly textColor: {
-                default: "black";
-            };
-            readonly textAlignment: {
-                default: "left";
-                values: readonly ["left", "center", "right", "justify"];
-            };
-        };
-        readonly node: import("../Blocks/api/blockTypes").TipTapNode<"heading">;
-    };
-    readonly bulletListItem: {
-        readonly propSchema: {
-            backgroundColor: {
-                default: "transparent";
-            };
-            textColor: {
-                default: "black";
-            };
-            textAlignment: {
-                default: "left";
-                values: readonly ["left", "center", "right", "justify"];
-            };
-        };
-        readonly node: import("../Blocks/api/blockTypes").TipTapNode<"bulletListItem">;
-    };
-    readonly numberedListItem: {
-        readonly propSchema: {
-            backgroundColor: {
-                default: "transparent";
-            };
-            textColor: {
-                default: "black";
-            };
-            textAlignment: {
-                default: "left";
-                values: readonly ["left", "center", "right", "justify"];
-            };
-        };
-        readonly node: import("../Blocks/api/blockTypes").TipTapNode<"numberedListItem">;
-    };
-}>[];
+export declare const getDefaultSlashMenuItems: <BSchema extends Record<string, import("../Blocks/api/blockTypes").BlockSpec<string, import("../Blocks/api/blockTypes").PropSchema>>>(schema?: BSchema) => BaseSlashMenuItem<BSchema>[];

package/types/src/index.d.ts

@@ -3,14 +3,15 @@ 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";
-export { defaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
-export * from "./extensions/SlashMenu/BaseSlashMenuItem";
-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";
+export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
+export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
+export * from "./extensions/SideMenu/SideMenuPlugin";
+export * from "./extensions/SlashMenu/BaseSlashMenuItem";
+export * from "./extensions/SlashMenu/SlashMenuPlugin";
+export { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
+export * from "./shared/BaseUiElementTypes";
+export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
+export * from "./shared/plugins/suggestion/SuggestionPlugin";

package/types/src/shared/BaseUiElementTypes.d.ts

@@ -0,0 +1,7 @@
+export type BaseUiElementCallbacks = {
+    destroy: () => void;
+};
+export type BaseUiElementState = {
+    show: boolean;
+    referencePos: DOMRect;
+};

package/types/src/shared/EditorElement.d.ts

@@ -1,10 +0,0 @@
-export type RequiredStaticParams = Record<string, any> & {
-    getReferenceRect: () => DOMRect;
-};
-export type RequiredDynamicParams = Record<string, any> & {};
-export type EditorElement<ElementDynamicParams extends RequiredDynamicParams> = {
-    element: HTMLElement | undefined;
-    render: (params: ElementDynamicParams, isHidden: boolean) => void;
-    hide: () => void;
-};
-export type ElementFactory<ElementStaticParams extends RequiredStaticParams, ElementDynamicParams extends RequiredDynamicParams> = (staticParams: ElementStaticParams) => EditorElement<ElementDynamicParams>;

package/types/src/shared/EventEmitter.d.ts

@@ -0,0 +1,11 @@
+type StringKeyOf<T> = Extract<keyof T, string>;
+type CallbackType<T extends Record<string, any>, EventName extends StringKeyOf<T>> = T[EventName] extends any[] ? T[EventName] : [T[EventName]];
+type CallbackFunction<T extends Record<string, any>, EventName extends StringKeyOf<T>> = (...props: CallbackType<T, EventName>) => any;
+export declare class EventEmitter<T extends Record<string, any>> {
+    private callbacks;
+    on<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): () => void;
+    protected emit<EventName extends StringKeyOf<T>>(event: EventName, ...args: CallbackType<T, EventName>): void;
+    off<EventName extends StringKeyOf<T>>(event: EventName, fn?: CallbackFunction<T, EventName>): void;
+    protected removeAllListeners(): void;
+}
+export {};

package/types/src/shared/plugins/suggestion/SuggestionItem.d.ts

@@ -1,8 +1,3 @@
-/**
- * A generic interface used in all suggestion menus (slash menu, mentions, etc)
- */
-export declare class SuggestionItem {
+export type SuggestionItem = {
     name: string;
-    match: (query: string) => boolean;
-    constructor(name: string, match: (query: string) => boolean);
-}
+};

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

@@ -1,44 +1,10 @@
-import { Editor, Range } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
-import { SuggestionsMenuFactory } from "./SuggestionsMenuFactoryTypes";
-import { SuggestionItem } from "./SuggestionItem";
 import { BlockNoteEditor } from "../../../BlockNoteEditor";
-import { BlockSchema } from "../../../extensions/Blocks/api/blockTypes";
-export type SuggestionPluginOptions<T extends SuggestionItem, BSchema extends BlockSchema> = {
-    /**
-     * The name of the plugin.
-     *
-     * Used for ensuring that the plugin key is unique when more than one instance of the SuggestionPlugin is used.
-     */
-    pluginKey: PluginKey;
-    /**
-     * The BlockNote editor.
-     */
-    editor: BlockNoteEditor<BSchema>;
-    /**
-     * The character that should trigger the suggestion menu to pop up (e.g. a '/' for commands), when typed by the user.
-     */
-    defaultTriggerCharacter: string;
-    suggestionsMenuFactory: SuggestionsMenuFactory<T>;
-    /**
-     * The callback that gets executed when an item is selected by the user.
-     *
-     * **NOTE:** The command text is not removed automatically from the editor by this plugin,
-     * 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<BSchema>;
-    }) => void;
-    /**
-     * A function that should supply the plugin with items to suggest, based on a certain query string.
-     */
-    items?: (query: string) => T[];
-    allow?: (props: {
-        editor: Editor;
-        range: Range;
-    }) => boolean;
+import { BaseUiElementState } from "../../BaseUiElementTypes";
+import { SuggestionItem } from "./SuggestionItem";
+export type SuggestionsMenuState<T extends SuggestionItem> = BaseUiElementState & {
+    filteredItems: T[];
+    keyboardHoveredItemIndex: number;
 };
 type SuggestionPluginState<T extends SuggestionItem> = {
     active: boolean;
@@ -58,9 +24,12 @@ type SuggestionPluginState<T extends SuggestionItem> = {
  * - This version supports generic items instead of only strings (to allow for more advanced filtering for example)
  * - This version hides some unnecessary complexity from the user of the plugin.
  * - This version handles key events differently
- *
- * @param options options for configuring the plugin
- * @returns the prosemirror plugin
  */
-export declare function createSuggestionPlugin<T extends SuggestionItem, BSchema extends BlockSchema>({ pluginKey, editor, defaultTriggerCharacter, suggestionsMenuFactory, onSelectItem: selectItemCallback, items, }: SuggestionPluginOptions<T, BSchema>): Plugin<SuggestionPluginState<T>>;
+export declare const setupSuggestionsMenu: <T extends SuggestionItem, BSchema extends Record<string, import("../../../extensions/Blocks/api/blockTypes").BlockSpec<string, import("../../../extensions/Blocks/api/blockTypes").PropSchema>>>(editor: BlockNoteEditor<BSchema>, updateSuggestionsMenu: (suggestionsMenuState: SuggestionsMenuState<T>) => void, pluginKey: PluginKey, defaultTriggerCharacter: string, items?: (query: string) => T[], onSelectItem?: (props: {
+    item: T;
+    editor: BlockNoteEditor<BSchema>;
+}) => void) => {
+    plugin: Plugin<SuggestionPluginState<T>>;
+    itemCallback: (item: T) => void;
+};
 export {};

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -1,29 +0,0 @@
-import { EditorElement, ElementFactory } from "../../shared/EditorElement";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { Block, BlockSchema } from "../Blocks/api/blockTypes";
-
-export type BlockSideMenuStaticParams<BSchema extends BlockSchema> = {
-  editor: BlockNoteEditor<BSchema>;
-
-  addBlock: () => void;
-
-  blockDragStart: (event: DragEvent) => void;
-  blockDragEnd: () => void;
-
-  freezeMenu: () => void;
-  unfreezeMenu: () => void;
-
-  getReferenceRect: () => DOMRect;
-};
-
-export type BlockSideMenuDynamicParams<BSchema extends BlockSchema> = {
-  block: Block<BSchema>;
-};
-
-export type BlockSideMenu<BSchema extends BlockSchema> = EditorElement<
-  BlockSideMenuDynamicParams<BSchema>
->;
-export type BlockSideMenuFactory<BSchema extends BlockSchema> = ElementFactory<
-  BlockSideMenuStaticParams<BSchema>,
-  BlockSideMenuDynamicParams<BSchema>
->;

package/src/extensions/DraggableBlocks/DraggableBlocksExtension.ts

@@ -1,37 +0,0 @@
-import { Editor, Extension } from "@tiptap/core";
-import { BlockSideMenuFactory } from "./BlockSideMenuFactoryTypes";
-import { createDraggableBlocksPlugin } from "./DraggableBlocksPlugin";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BlockSchema } from "../Blocks/api/blockTypes";
-
-export type DraggableBlocksOptions<BSchema extends BlockSchema> = {
-  tiptapEditor: Editor;
-  editor: BlockNoteEditor<BSchema>;
-  blockSideMenuFactory: BlockSideMenuFactory<BSchema>;
-};
-
-/**
- * This extension adds a menu to the side of blocks which features various BlockNote functions such as adding and
- * removing blocks. More importantly, it adds a drag handle which allows the user to drag and drop blocks.
- *
- * code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
- */
-export const createDraggableBlocksExtension = <BSchema extends BlockSchema>() =>
-  Extension.create<DraggableBlocksOptions<BSchema>>({
-    name: "DraggableBlocksExtension",
-    priority: 1000, // Need to be high, in order to hide menu when typing slash
-    addProseMirrorPlugins() {
-      if (!this.options.blockSideMenuFactory) {
-        throw new Error(
-          "UI Element factory not defined for DraggableBlocksExtension"
-        );
-      }
-      return [
-        createDraggableBlocksPlugin({
-          tiptapEditor: this.editor,
-          editor: this.options.editor,
-          blockSideMenuFactory: this.options.blockSideMenuFactory,
-        }),
-      ];
-    },
-  });