@blocknote/core 0.8.2 → 0.8.3

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,
-        }),
-      ];
-    },
-  });

package/src/extensions/FormattingToolbar/FormattingToolbarExtension.ts

@@ -1,37 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { PluginKey } from "prosemirror-state";
-import { BlockNoteEditor, BlockSchema } from "../..";
-import { FormattingToolbarFactory } from "./FormattingToolbarFactoryTypes";
-import { createFormattingToolbarPlugin } from "./FormattingToolbarPlugin";
-
-export type FormattingToolbarOptions<BSchema extends BlockSchema> = {
-  formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
-  editor: BlockNoteEditor<BSchema>;
-};
-
-/**
- * The menu that is displayed when selecting a piece of text.
- */
-export const createFormattingToolbarExtension = <
-  BSchema extends BlockSchema
->() =>
-  Extension.create<FormattingToolbarOptions<BSchema>>({
-    name: "FormattingToolbarExtension",
-
-  addProseMirrorPlugins() {
-    if (!this.options.formattingToolbarFactory || !this.options.editor) {
-      throw new Error(
-        "required args not defined for FormattingToolbarExtension"
-      );
-    }
-
-      return [
-        createFormattingToolbarPlugin({
-          tiptapEditor: this.editor,
-          editor: this.options.editor,
-          formattingToolbarFactory: this.options.formattingToolbarFactory,
-          pluginKey: new PluginKey("FormattingToolbarPlugin"),
-        }),
-      ];
-    },
-  });

package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -1,18 +0,0 @@
-import { EditorElement, ElementFactory } from "../../shared/EditorElement";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BlockSchema } from "../Blocks/api/blockTypes";
-
-export type FormattingToolbarStaticParams<BSchema extends BlockSchema> = {
-  editor: BlockNoteEditor<BSchema>;
-
-  getReferenceRect: () => DOMRect;
-};
-
-export type FormattingToolbarDynamicParams = {};
-
-export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
-export type FormattingToolbarFactory<BSchema extends BlockSchema> =
-  ElementFactory<
-    FormattingToolbarStaticParams<BSchema>,
-    FormattingToolbarDynamicParams
-  >;

package/src/extensions/HyperlinkToolbar/HyperlinkMark.ts

@@ -1,28 +0,0 @@
-import { Link } from "@tiptap/extension-link";
-import {
-  createHyperlinkToolbarPlugin,
-  HyperlinkToolbarPluginProps,
-} from "./HyperlinkToolbarPlugin";
-
-/**
- * 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
- */
-const Hyperlink = Link.extend<HyperlinkToolbarPluginProps>({
-  priority: 500,
-  addProseMirrorPlugins() {
-    if (!this.options.hyperlinkToolbarFactory) {
-      throw new Error("UI Element factory not defined for HyperlinkMark");
-    }
-
-    return [
-      ...(this.parent?.() || []),
-      createHyperlinkToolbarPlugin(this.editor, {
-        hyperlinkToolbarFactory: this.options.hyperlinkToolbarFactory,
-      }),
-    ];
-  },
-});
-
-export default Hyperlink;

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts

@@ -1,19 +0,0 @@
-import { EditorElement, ElementFactory } from "../../shared/EditorElement";
-
-export type HyperlinkToolbarStaticParams = {
-  editHyperlink: (url: string, text: string) => void;
-  deleteHyperlink: () => void;
-
-  getReferenceRect: () => DOMRect;
-};
-
-export type HyperlinkToolbarDynamicParams = {
-  url: string;
-  text: string;
-};
-
-export type HyperlinkToolbar = EditorElement<HyperlinkToolbarDynamicParams>;
-export type HyperlinkToolbarFactory = ElementFactory<
-  HyperlinkToolbarStaticParams,
-  HyperlinkToolbarDynamicParams
->;

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -1,53 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { PluginKey } from "prosemirror-state";
-import { createSuggestionPlugin } from "../../shared/plugins/suggestion/SuggestionPlugin";
-import { SuggestionsMenuFactory } from "../../shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
-import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BlockSchema } from "../Blocks/api/blockTypes";
-
-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 createSlashMenuExtension = <BSchema extends BlockSchema>() =>
-  Extension.create<SlashMenuOptions<BSchema>>({
-    name: "slash-command",
-
-    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");
-      }
-
-      const commands = this.options.commands;
-
-      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,195 +0,0 @@
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { PartialBlock } from "../Blocks/api/blockTypes";
-import { DefaultBlockSchema } from "../Blocks/api/defaultBlocks";
-import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
-
-function insertOrUpdateBlock<BSchema extends DefaultBlockSchema>(
-  editor: BlockNoteEditor<BSchema>,
-  block: PartialBlock<BSchema>
-) {
-  const currentBlock = editor.getTextCursorPosition().block;
-
-  if (
-    (currentBlock.content.length === 1 &&
-      currentBlock.content[0].type === "text" &&
-      currentBlock.content[0].text === "/") ||
-    currentBlock.content.length === 0
-  ) {
-    editor.updateBlock(currentBlock, block);
-  } else {
-    editor.insertBlocks([block], currentBlock, "after");
-    editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);
-  }
-}
-
-/**
- * An array containing commands for creating all default blocks.
- */
-export const defaultSlashMenuItems = [
-  // Command for creating a level 1 heading
-  new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Heading",
-    (editor) =>
-      insertOrUpdateBlock(editor, {
-        type: "heading",
-        props: { level: "1" },
-      }),
-    ["h", "heading1", "h1"]
-  ),
-
-  // Command for creating a level 2 heading
-  new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Heading 2",
-    (editor) =>
-      insertOrUpdateBlock(editor, {
-        type: "heading",
-        props: { level: "2" },
-      }),
-    ["h2", "heading2", "subheading"]
-  ),
-
-  // Command for creating a level 3 heading
-  new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Heading 3",
-    (editor) =>
-      insertOrUpdateBlock(editor, {
-        type: "heading",
-        props: { level: "3" },
-      }),
-    ["h3", "heading3", "subheading"]
-  ),
-
-  // Command for creating an ordered list
-  new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Numbered List",
-    (editor) =>
-      insertOrUpdateBlock(editor, {
-        type: "numberedListItem",
-      }),
-    ["li", "list", "numberedlist", "numbered list"]
-  ),
-
-  // Command for creating a bullet list
-  new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Bullet List",
-    (editor) =>
-      insertOrUpdateBlock(editor, {
-        type: "bulletListItem",
-      }),
-    ["ul", "list", "bulletlist", "bullet list"]
-  ),
-
-  // Command for creating a paragraph (pretty useless)
-  new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Paragraph",
-    (editor) =>
-      insertOrUpdateBlock(editor, {
-        type: "paragraph",
-      }),
-    ["p"]
-  ),
-
-  //     replaceRangeWithNode(editor, range, node);
-
-  //     return true;
-  //   },
-  //   ["ol", "orderedlist"],
-  //   OrderedListIcon,
-  //   "Used to display an ordered (enumerated) list item"
-  // ),
-
-  // Command for creating a blockquote
-  // blockquote: new SlashCommand(
-  //   "Block Quote",
-  //   CommandGroup.BASIC_BLOCKS,
-  //   (editor, range) => {
-  //     const paragraph = editor.schema.node("paragraph");
-  //     const node = editor.schema.node(
-  //       "blockquote",
-  //       { "block-id": uniqueId.generate() },
-  //       paragraph
-  //     );
-
-  //     replaceRangeWithNode(editor, range, node);
-
-  //     return true;
-  //   },
-  //   ["quote", "blockquote"],
-  //   QuoteIcon,
-  //   "Used to make a quote stand out",
-  //   "Ctrl+Shift+B"
-  // ),
-
-  // Command for creating a horizontal rule
-  // horizontalRule: new SlashCommand(
-  //   "Horizontal Rule",
-  //   CommandGroup.BASIC_BLOCKS,
-  //   (editor, range) => {
-  //     const node = editor.schema.node("horizontalRule", {
-  //       "block-id": uniqueId.generate(),
-  //     });
-
-  //     // insert horizontal rule, create a new block after the horizontal rule if applicable
-  //     // and put the cursor in the block after the horizontal rule.
-  //     editor
-  //       .chain()
-  //       .focus()
-  //       .replaceRangeAndUpdateSelection(range, node)
-  //       .command(({ tr, dispatch }) => {
-  //         if (dispatch) {
-  //           // the node immediately after the cursor
-  //           const nodeAfter = tr.selection.$to.nodeAfter;
-
-  //           // the position of the cursor
-  //           const cursorPos = tr.selection.$to.pos;
-
-  //           // check if there is no node after the cursor (end of document)
-  //           if (!nodeAfter) {
-  //             // create a new block of the default type (probably paragraph) after the cursor
-  //             const { parent } = tr.selection.$to;
-  //             const node = parent.type.contentMatch.defaultType?.create();
-
-  //             if (node) {
-  //               tr.insert(cursorPos, node);
-  //             }
-  //           }
-
-  //           // try to put the cursor at the start of the node directly after the inserted horizontal rule
-  //           tr.doc.nodesBetween(cursorPos, cursorPos + 1, (node, pos) => {
-  //             if (node.type.name !== "horizontalRule") {
-  //               tr.setSelection(TextSelection.create(tr.doc, pos));
-  //             }
-  //           });
-  //         }
-
-  //         return true;
-  //       })
-  //       .scrollIntoView()
-  //       .run();
-  //     return true;
-  //   },
-  //   ["hr", "horizontalrule"],
-  //   SeparatorIcon,
-  //   "Used to separate sections with a horizontal line"
-  // ),
-
-  // Command for creating a table
-  // table: new SlashCommand(
-  //   "Table",
-  //   CommandGroup.BASIC_BLOCKS,
-  //   (editor, range) => {
-  //     editor.chain().focus().deleteRange(range).run();
-  //     // TODO: add blockid, pending https://github.com/ueberdosis/tiptap/pull/1469
-  //     editor
-  //       .chain()
-  //       .focus()
-  //       .insertTable({ rows: 1, cols: 2, withHeaderRow: false })
-  //       .scrollIntoView()
-  //       .run();
-  //     return true;
-  //   },
-  //   ["table", "database"],
-  //   TableIcon,
-  //   "Used to create a simple table"
-  // ),
-];

package/src/extensions/SlashMenu/index.ts

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

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

@@ -1,21 +0,0 @@
-import { EditorElement, ElementFactory } from "../../EditorElement";
-import { SuggestionItem } from "./SuggestionItem";
-
-export type SuggestionsMenuStaticParams<T extends SuggestionItem> = {
-  itemCallback: (item: T) => void;
-
-  getReferenceRect: () => DOMRect;
-};
-
-export type SuggestionsMenuDynamicParams<T extends SuggestionItem> = {
-  items: T[];
-  keyboardHoveredItemIndex: number;
-};
-
-export type SuggestionsMenu<T extends SuggestionItem> = EditorElement<
-  SuggestionsMenuDynamicParams<T>
->;
-export type SuggestionsMenuFactory<T extends SuggestionItem> = ElementFactory<
-  SuggestionsMenuStaticParams<T>,
-  SuggestionsMenuDynamicParams<T>
->;

package/types/src/CustomBlock.d.ts

@@ -1,15 +0,0 @@
-import { Node } from "@tiptap/core";
-import { NodeViewRendererProps } from "@tiptap/core";
-export type CustomBlock = {
-    name: string;
-    priority?: number;
-    atom?: boolean;
-    selectable?: boolean;
-    className?: string;
-    props?: Record<string, string>;
-    element: (props: NodeViewRendererProps) => {
-        element: HTMLElement;
-        editable?: HTMLElement;
-    };
-};
-export declare function createCustomBlock(customBlock: CustomBlock): Node<CustomBlock, any>;

package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableCol.d.ts

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

package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableContent.d.ts

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

package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableRow.d.ts

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

package/types/src/extensions/Placeholder/localisation/index.d.ts

@@ -1,2 +0,0 @@
-import i18next from "i18next";
-export default i18next;

package/types/src/extensions/Placeholder/localisation/translation.d.ts

@@ -1,51 +0,0 @@
-export declare const translation: {
-    en: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-    de: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-    it: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-    es: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-    fr: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-    fi: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-    sv: {
-        translation: {
-            placeholder: string;
-            heading: string;
-            list: string;
-        };
-    };
-};