@blocknote/core 0.1.0-alpha.3

package/types/src/BlockNoteExtensions.d.ts

@@ -0,0 +1,4 @@
+import { Extensions } from "@tiptap/core";
+import { Node } from "@tiptap/core";
+export declare const Document: Node<any, any>;
+export declare const getBlockNoteExtensions: () => Extensions;

package/types/src/EditorContent.d.ts

@@ -0,0 +1 @@
+export { EditorContent } from "@tiptap/react";

package/types/src/extensions/Blocks/OrderedListPlugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from "prosemirror-state";
+export declare const OrderedListPlugin: () => Plugin<any>;

package/types/src/extensions/Blocks/PreviousBlockTypePlugin.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from "prosemirror-state";
+/**
+ * This plugin tracks transformation of Block node attributes, so we can support CSS transitions.
+ *
+ * Problem it solves: Prosemirror recreates the DOM when transactions happen. So when a transaction changes an Node attribute,
+ * it results in a completely new DOM element. This means CSS transitions don't work.
+ *
+ * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
+ */
+export declare const PreviousBlockTypePlugin: () => Plugin<{
+    prevBlockAttrs: any;
+    needsUpdate: boolean;
+}>;

package/types/src/extensions/Blocks/commands/joinBackward.d.ts

@@ -0,0 +1,14 @@
+import { Command } from "prosemirror-state";
+/**
+ * Code taken from https://github.com/ProseMirror/prosemirror-commands/blob/97a8cb5fac25e697d4693ce343e2e3b020a7fa2f/src/commands.ts
+ * Reason for modification: https://github.com/YousefED/BlockNote/pull/11
+ *
+ * BlockA
+ * BlockB
+ * Order of behavior has been switched to make first and second blocks content
+ * merge before trying to add second block as child of first
+ *
+ * behavior responsible for joining BlockB as A child of BlockA moved to (line 379 - 393 original file) after
+ * behavior responsible for joining content of BlockA and BlockB (line 402 - 422 original file)
+ */
+export declare const joinBackward: Command;

package/types/src/extensions/Blocks/helpers/findBlock.d.ts

@@ -0,0 +1,6 @@
+export declare const findBlock: (selection: import("prosemirror-state").Selection) => {
+    pos: number;
+    start: number;
+    depth: number;
+    node: import("prosemirror-model").Node;
+} | undefined;

package/types/src/extensions/Blocks/helpers/setBlockHeading.d.ts

@@ -0,0 +1,5 @@
+import { Transaction } from "prosemirror-state";
+import { Level } from "../nodes/Block";
+declare type Dispatch = ((args?: any) => any) | undefined;
+export declare function setBlockHeading(tr: Transaction, dispatch: Dispatch, level?: Level): boolean;
+export {};

package/types/src/extensions/Blocks/index.d.ts

@@ -0,0 +1 @@
+export declare const blocks: any[];

package/types/src/extensions/Blocks/nodes/Block.d.ts

@@ -0,0 +1,32 @@
+import { Node } from "@tiptap/core";
+export interface IBlock {
+    HTMLAttributes: Record<string, any>;
+}
+export declare type Level = 1 | 2 | 3;
+export declare type ListType = "li" | "oli";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        blockHeading: {
+            /**
+             * Set a heading node
+             */
+            setBlockHeading: (attributes: {
+                level: Level;
+            }) => ReturnType;
+            /**
+             * Unset a heading node
+             */
+            unsetBlockHeading: () => ReturnType;
+            unsetList: () => ReturnType;
+            addNewBlockAsSibling: (attributes?: {
+                headingType?: Level;
+                listType?: ListType;
+            }) => ReturnType;
+            setBlockList: (type: ListType) => ReturnType;
+        };
+    }
+}
+/**
+ * The main "Block node" documents consist of
+ */
+export declare const Block: Node<IBlock, any>;

package/types/src/extensions/Blocks/nodes/BlockGroup.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "@tiptap/core";
+export declare const BlockGroup: Node<any, any>;

package/types/src/extensions/Blocks/nodes/Content.d.ts

@@ -0,0 +1,5 @@
+import { Node } from "@tiptap/core";
+export interface IBlock {
+    HTMLAttributes: Record<string, any>;
+}
+export declare const ContentBlock: Node<IBlock, any>;

package/types/src/extensions/Blocks/rule.d.ts

@@ -0,0 +1,16 @@
+import { ExtendedRegExpMatchArray, InputRule, InputRuleFinder } from "@tiptap/core";
+import { NodeType } from "prosemirror-model";
+/**
+ * Modified version of https://github.com/ueberdosis/tiptap/blob/6a813686f5e87cebac49a624936dbeadb5a29f95/packages/core/src/inputRules/textblockTypeInputRule.ts
+ * But instead of changing the type of a node, we use setNodeMarkup to change some of it's current attributes
+ *
+ * Build an input rule that changes the type of a textblock when the
+ * matched text is typed into it. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ */
+export declare function textblockTypeInputRuleSameNodeType(config: {
+    find: InputRuleFinder;
+    type: NodeType;
+    getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null;
+}): InputRule;

package/types/src/extensions/BubbleMenu/BubbleMenuExtension.d.ts

@@ -0,0 +1,5 @@
+import { Extension } from "@tiptap/core";
+/**
+ * The menu that is displayed when selecting a piece of text.
+ */
+export declare const BubbleMenuExtension: Extension<{}, any>;

package/types/src/extensions/BubbleMenu/BubbleMenuPlugin.d.ts

@@ -0,0 +1,46 @@
+import { Editor } from "@tiptap/core";
+import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { Instance, Props } from "tippy.js";
+export interface BubbleMenuPluginProps {
+    pluginKey: PluginKey | string;
+    editor: Editor;
+    element: HTMLElement;
+    tippyOptions?: Partial<Props>;
+    shouldShow?: ((props: {
+        editor: Editor;
+        view: EditorView;
+        state: EditorState;
+        oldState?: EditorState;
+        from: number;
+        to: number;
+    }) => boolean) | null;
+}
+export declare type BubbleMenuViewProps = BubbleMenuPluginProps & {
+    view: EditorView;
+};
+export declare class BubbleMenuView {
+    editor: Editor;
+    element: HTMLElement;
+    view: EditorView;
+    preventHide: boolean;
+    preventShow: boolean;
+    tippy: Instance | undefined;
+    tippyOptions?: Partial<Props>;
+    shouldShow: Exclude<BubbleMenuPluginProps["shouldShow"], null>;
+    constructor({ editor, element, view, tippyOptions, shouldShow, }: BubbleMenuViewProps);
+    mousedownHandler: () => void;
+    viewMousedownHandler: () => void;
+    viewMouseupHandler: () => void;
+    dragstartHandler: () => void;
+    focusHandler: () => void;
+    blurHandler: ({ event }: {
+        event: FocusEvent;
+    }) => void;
+    createTooltip(): void;
+    update(view: EditorView, oldState?: EditorState): void;
+    show(): void;
+    hide(): void;
+    destroy(): void;
+}
+export declare const createBubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any>;

package/types/src/extensions/BubbleMenu/component/BubbleMenu.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Editor } from "@tiptap/core";
+export declare const BubbleMenu: (props: {
+    editor: Editor;
+}) => JSX.Element;

package/types/src/extensions/BubbleMenu/component/DropdownBlockItem.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IconType } from "react-icons/lib";
+interface DropdownBlockItemProps {
+    title: string;
+    icon: IconType;
+    isSelected?: boolean;
+    onClick?: () => void;
+}
+export default function DropdownBlockItem(props: DropdownBlockItemProps): JSX.Element;
+export {};

package/types/src/extensions/BubbleMenu/component/LinkToolbarButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Editor } from "@tiptap/core";
+import { SimpleToolbarButtonProps } from "../../../shared/components/toolbar/SimpleToolbarButton";
+declare type Props = SimpleToolbarButtonProps & {
+    editor: Editor;
+};
+/**
+ * The link menu button opens a tooltip on click
+ */
+export declare const LinkToolbarButton: (props: Props) => JSX.Element;
+export default LinkToolbarButton;

package/types/src/extensions/DraggableBlocks/DraggableBlocksExtension.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from "@tiptap/core";
+/**
+ * This extension adds a drag handle in front of all nodes with a "data-id" attribute
+ *
+ * code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
+ */
+export declare const DraggableBlocksExtension: Extension<{}, any>;

package/types/src/extensions/DraggableBlocks/DraggableBlocksPlugin.d.ts

@@ -0,0 +1,18 @@
+import { Plugin } from "prosemirror-state";
+export declare function createRect(rect: DOMRect): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    bottom: number;
+    right: number;
+};
+export declare function absoluteRect(element: HTMLElement): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    bottom: number;
+    right: number;
+};
+export declare const createDraggableBlocksPlugin: () => Plugin<any>;

package/types/src/extensions/DraggableBlocks/components/DragHandle.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { EditorView } from "prosemirror-view";
+export declare const DragHandle: (props: {
+    view: EditorView;
+    coords: {
+        left: number;
+        top: number;
+    };
+    onShow?: () => void;
+    onHide?: () => void;
+    onAddClicked?: () => void;
+}) => JSX.Element | null;

package/types/src/extensions/DraggableBlocks/components/DragHandleMenu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    onDelete: () => void;
+};
+declare const DragHandleMenu: (props: Props) => JSX.Element;
+export default DragHandleMenu;

package/types/src/extensions/Hyperlinks/HyperlinkMark.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This custom link includes a special menu for editing/deleting/opening the link.
+ * The menu will be triggered by hovering over the link with the mouse,
+ * or by moving the cursor inside the link text
+ */
+declare const Hyperlink: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;
+export default Hyperlink;

package/types/src/extensions/Hyperlinks/HyperlinkMenuPlugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from "prosemirror-state";
+export declare const createHyperlinkMenuPlugin: () => Plugin<any>;

package/types/src/extensions/Hyperlinks/menus/HyperlinkBasicMenu.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare type HyperlinkMenuProps = {
+    href: string;
+    removeHandler: () => void;
+    editMenu: React.ReactElement;
+};
+/**
+ * A hyperlink menu shown when an anchor is hovered over.
+ * It shows options to edit / remove / open the link
+ */
+export declare const HyperlinkBasicMenu: (props: HyperlinkMenuProps) => JSX.Element;
+export {};

package/types/src/extensions/Hyperlinks/menus/HyperlinkEditMenu.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type HyperlinkEditorMenuProps = {
+    url: string;
+    text: string;
+    onSubmit: (url: string, text: string) => void;
+};
+/**
+ * The sub menu for editing an anchor element
+ */
+export declare const HyperlinkEditMenu: (props: HyperlinkEditorMenuProps) => JSX.Element;

package/types/src/extensions/Hyperlinks/menus/atlaskit/PanelTextInput.d.ts

@@ -0,0 +1,39 @@
+import { KeyboardEvent, PureComponent } from "react";
+import { FocusEvent } from "react";
+export interface Props {
+    autoFocus?: boolean | FocusOptions;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onCancel?: (e: KeyboardEvent) => void;
+    placeholder?: string;
+    onMouseDown?: Function;
+    onKeyDown?: (e: KeyboardEvent<any>) => void;
+    onUndo?: Function;
+    onRedo?: Function;
+    onBlur?: Function;
+    width?: number;
+    maxLength?: number;
+    testId?: string;
+    ariaLabel?: string;
+    id?: string;
+}
+export interface State {
+    value?: string;
+}
+export default class PanelTextInput extends PureComponent<Props, State> {
+    private input?;
+    private focusTimeoutId;
+    constructor(props: Props);
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentWillUnmount(): void;
+    onMouseDown: () => void;
+    onBlur: (e: FocusEvent<any>) => void;
+    render(): JSX.Element;
+    focus(): void;
+    private handleChange;
+    private handleKeydown;
+    private isUndoEvent;
+    private isRedoEvent;
+    private handleRef;
+}

package/types/src/extensions/Hyperlinks/menus/atlaskit/PanelTextInputStyles.d.ts

@@ -0,0 +1 @@
+export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;

package/types/src/extensions/Hyperlinks/menus/atlaskit/ToolbarComponent.d.ts

@@ -0,0 +1,11 @@
+export declare const RECENT_SEARCH_WIDTH_IN_PX = 420;
+export declare const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
+export declare const RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export declare const InputWrapper = "\n  display: flex;\n  line-height: 0;\n  padding: 4px 0;\n  align-items: center;\n";
+export declare const UrlInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    provider: boolean;
+}, never>;
+export declare const TextInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/src/extensions/Paragraph/FixedParagraph.d.ts

@@ -0,0 +1 @@
+export declare const FixedParagraph: import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any>;

package/types/src/extensions/Placeholder/PlaceholderExtension.d.ts

@@ -0,0 +1,25 @@
+import { Editor, Extension } from "@tiptap/core";
+import { Node as ProsemirrorNode } from "prosemirror-model";
+/**
+ * This is a modified version of the tiptap
+ * placeholder plugin, that also sets hasAnchorClass
+ *
+ * It does not set a data-placeholder (text is currently done in css)
+ *
+ */
+export interface PlaceholderOptions {
+    emptyEditorClass: string;
+    emptyNodeClass: string;
+    isFilterClass: string;
+    hasAnchorClass: string;
+    placeholder: ((PlaceholderProps: {
+        editor: Editor;
+        node: ProsemirrorNode;
+        pos: number;
+        hasAnchor: boolean;
+    }) => string) | string;
+    showOnlyWhenEditable: boolean;
+    showOnlyCurrent: boolean;
+    includeChildren: boolean;
+}
+export declare const Placeholder: Extension<PlaceholderOptions, any>;

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

@@ -0,0 +1,10 @@
+import { Extension } from "@tiptap/core";
+import { SlashMenuItem } from "./SlashMenuItem";
+import { PluginKey } from "prosemirror-state";
+export declare type SlashMenuOptions = {
+    commands: {
+        [key: string]: SlashMenuItem;
+    };
+};
+export declare const SlashMenuPluginKey: PluginKey<any>;
+export declare const SlashMenuExtension: Extension<SlashMenuOptions, any>;

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Editor, Range } from "@tiptap/core";
+import SuggestionItem from "../../shared/plugins/suggestion/SuggestionItem";
+export declare type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
+export declare enum SlashMenuGroups {
+    HEADINGS = "Headings",
+    BASIC_BLOCKS = "Basic Blocks",
+    CODE = "Code Blocks",
+    INLINE = "Inline",
+    EMBED = "Embed",
+    PLUGIN = "Plugin"
+}
+/**
+ * A class that defines a slash command (/<command>).
+ *
+ * Not to be confused with ProseMirror commands nor TipTap commands.
+ */
+export declare class SlashMenuItem implements SuggestionItem {
+    readonly name: string;
+    readonly group: SlashMenuGroups;
+    readonly execute: SlashMenuCallback;
+    readonly aliases: string[];
+    readonly icon?: import("react").ComponentType<{
+        className: string;
+    }> | undefined;
+    readonly hint?: string | undefined;
+    readonly shortcut?: string | undefined;
+    groupName: string;
+    /**
+     * Constructs a new slash-command.
+     *
+     * @param name The name of the command
+     * @param group Used to organize the menu
+     * @param execute The callback for creating a new node
+     * @param aliases Aliases for this command
+     * @param icon To be shown next to the name in the menu
+     * @param shortcut Info about keyboard shortcut that would activate this command
+     */
+    constructor(name: string, group: SlashMenuGroups, execute: SlashMenuCallback, aliases?: string[], icon?: import("react").ComponentType<{
+        className: string;
+    }> | undefined, hint?: string | undefined, shortcut?: string | undefined);
+    match(query: string): boolean;
+}

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

@@ -0,0 +1,8 @@
+import { SlashMenuItem } from "./SlashMenuItem";
+/**
+ * An array containing commands for creating all default blocks.
+ */
+declare const defaultCommands: {
+    [key: string]: SlashMenuItem;
+};
+export default defaultCommands;

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

@@ -0,0 +1,5 @@
+import { SlashMenuExtension } from "./SlashMenuExtension";
+import defaultCommands from "./defaultCommands";
+import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
+export { defaultCommands, SlashMenuItem as SlashCommand, SlashMenuGroups as CommandGroup, };
+export default SlashMenuExtension;

package/types/src/extensions/TrailingNode/TrailingNodeExtension.d.ts

@@ -0,0 +1,10 @@
+import { Extension } from "@tiptap/core";
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+export interface TrailingNodeOptions {
+    node: string;
+}
+export declare const TrailingNode: Extension<TrailingNodeOptions, any>;

package/types/src/extensions/UniqueID/UniqueID.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from "@tiptap/core";
+declare const UniqueID: Extension<any, any>;
+export { UniqueID, UniqueID as default };

package/types/src/extensions/helpers/formatKeyboardShortcut.d.ts

@@ -0,0 +1 @@
+export default function formatKeyboardShortcut(shortcut: string): string;

package/types/src/index.d.ts

@@ -0,0 +1,4 @@
+import "./globals.css";
+export * from "./BlockNoteExtensions";
+export * from "./EditorContent";
+export * from "./useEditor";

package/types/src/lib/atlaskit/browser.d.ts

@@ -0,0 +1,12 @@
+declare const result: {
+    mac: boolean;
+    ie: boolean;
+    ie_version: number;
+    gecko: boolean;
+    chrome: boolean;
+    chrome_version: number;
+    android: boolean;
+    ios: boolean;
+    webkit: boolean;
+};
+export default result;

package/types/src/shared/components/toolbar/SimpleToolbarButton.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export declare type SimpleToolbarButtonProps = {
+    onClick?: (e: React.MouseEvent) => void;
+    icon?: React.ComponentType<{
+        className: string;
+    }>;
+    mainTooltip: string;
+    secondaryTooltip?: string;
+    isSelected?: boolean;
+    children?: any;
+    isDisabled?: boolean;
+};
+/**
+ * Helper for basic buttons that show in the inline bubble menu.
+ */
+export declare const SimpleToolbarButton: React.ForwardRefExoticComponent<SimpleToolbarButtonProps & React.RefAttributes<unknown>>;

package/types/src/shared/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Toolbar: (props: {
+    children: any;
+}) => JSX.Element;

package/types/src/shared/components/toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ToolbarSeparator: () => JSX.Element;

package/types/src/shared/components/tooltip/TooltipContent.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * Helper for the tooltip for inline bubble menu buttons.
+ *
+ * Often used to display a tooltip showing the command name + keyboard shortcut, e.g.:
+ *
+ *      Bold
+ *      Ctrl+B
+ *
+ * TODO: maybe use default Tippy styles instead?
+ */
+export declare const TooltipContent: (props: {
+    mainTooltip: string;
+    secondaryTooltip?: string;
+}) => JSX.Element;

package/types/src/shared/hooks/useEditorForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from "@tiptap/core";
+export declare const useEditorForceUpdate: (editor: Editor) => void;

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/**
+ * A generic interface used in all suggestion menus (slash menu, mentions, etc)
+ */
+export default interface SuggestionItem {
+    /**
+     * The name of the item
+     */
+    name: string;
+    /**
+     * The name of the group to which this item belongs
+     */
+    groupName: string;
+    /**
+     * The react icon
+     */
+    icon?: React.ComponentType<{
+        className: string;
+    }>;
+    hint?: string;
+    shortcut?: string;
+    /**
+     * This function matches this item against a query string, the function should return **true** if the item
+     * matches the query or **false** otherwise.
+     *
+     * @param query the query string
+     */
+    match(query: string): boolean;
+}

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

@@ -0,0 +1,71 @@
+import { Editor } from "@tiptap/core";
+import SuggestionItem from "./SuggestionItem";
+/**
+ * The interface that each suggestion renderer should conform to.
+ */
+export interface SuggestionRenderer<T extends SuggestionItem> {
+    /**
+     * Disposes of the suggestion menu.
+     */
+    onExit?: (props: SuggestionRendererProps<T>) => void;
+    /**
+     * Updates the suggestion menu.
+     *
+     * This function should be called when the renderer's `props` change,
+     * after `onStart` has been called.
+     */
+    onUpdate?: (props: SuggestionRendererProps<T>) => void;
+    /**
+     * Creates and displays a new suggestion menu popup.
+     */
+    onStart?: (props: SuggestionRendererProps<T>) => void;
+    /**
+     * Function for handling key events
+     */
+    onKeyDown?: (event: KeyboardEvent) => boolean;
+    /**
+     * The DOM Element representing the suggestion menu
+     */
+    getComponent: () => Element | undefined;
+}
+export declare type SuggestionRendererProps<T extends SuggestionItem> = {
+    /**
+     * Object containing all suggestion items, grouped by their `groupName`.
+     */
+    groups: {
+        [groupName: string]: T[];
+    };
+    /**
+     * The total number of suggestion-items.
+     */
+    count: number;
+    /**
+     * This callback is executed whenever the user selects an item.
+     *
+     * @param item the selected item
+     */
+    onSelectItem: (item: T) => void;
+    /**
+     * A function returning the client rect to use as reference for positioning the suggestion menu popup.
+     */
+    clientRect: (() => DOMRect) | null;
+    /**
+     * This callback is executed when the suggestion menu needs to be closed,
+     * e.g. when the user presses escape.
+     */
+    onClose: () => void;
+};
+/**
+ * This function creates a SuggestionRenderer based on TipTap's ReactRenderer utility.
+ *
+ * The resulting renderer can be used to display a suggestion menu containing (grouped) suggestion items.
+ *
+ * This renderer also takes care of the following key events:
+ * - Key up/down, for navigating the suggestion menu (selecting different items)
+ * - Enter for picking the currently selected item and closing the menu
+ * - Escape to close the menu, without taking action
+ *
+ * @param editor the TipTap editor
+ * @returns the newly constructed SuggestionRenderer
+ */
+export default function createRenderer<T extends SuggestionItem>(editor: Editor): SuggestionRenderer<T>;