@blocknote/core 0.4.2 → 0.4.3

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "files": [
     "dist",
     "types",
@@ -106,5 +106,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "14086236a83e42c1de7e4d9910e6348218e78a98"
+  "gitHead": "4f578e0a8676b815316bdeb978cd4748d948868c"
 }

package/src/BlockNoteEditor.ts

@@ -1,17 +1,37 @@
 import { Editor, EditorOptions } from "@tiptap/core";
-
+import { Node } from "prosemirror-model";
 // import "./blocknote.css";
-import { Editor as EditorAPI } from "./api/Editor";
+import { Block, PartialBlock } from "./extensions/Blocks/api/blockTypes";
 import { getBlockNoteExtensions, UiFactories } from "./BlockNoteExtensions";
 import styles from "./editor.module.css";
-import { defaultSlashCommands, SlashCommand } from "./extensions/SlashMenu";
+import {
+  defaultSlashMenuItems,
+  BaseSlashMenuItem,
+} from "./extensions/SlashMenu";
+import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
+import { nodeToBlock } from "./api/nodeConversions/nodeConversions";
+import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
+import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
+import { getNodeById } from "./api/util/nodeUtil";
+import {
+  insertBlocks,
+  updateBlock,
+  removeBlocks,
+  replaceBlocks,
+} from "./api/blockManipulation/blockManipulation";
+import {
+  blocksToHTML,
+  HTMLToBlocks,
+  blocksToMarkdown,
+  markdownToBlocks,
+} from "./api/formatConversions/formatConversions";
 
 export type BlockNoteEditorOptions = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
   uiFactories: UiFactories;
-  slashCommands: SlashCommand[];
+  slashCommands: BaseSlashMenuItem[];
   parentElement: HTMLElement;
   editorDOMAttributes: Record<string, string>;
   onUpdate: (editor: BlockNoteEditor) => void;
@@ -27,8 +47,9 @@ const blockNoteTipTapOptions = {
   enableCoreExtensions: false,
 };
 
-export class BlockNoteEditor extends EditorAPI {
-  public readonly _tiptapEditor: Editor & { contentComponent: any };
+export class BlockNoteEditor {
+  public readonly _tiptapEditor: TiptapEditor & { contentComponent: any };
+  private blockCache = new WeakMap<Node, Block>();
 
   public get domElement() {
     return this._tiptapEditor.view.dom as HTMLDivElement;
@@ -36,8 +57,9 @@ export class BlockNoteEditor extends EditorAPI {
 
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
     const blockNoteExtensions = getBlockNoteExtensions({
+      editor: this,
       uiFactories: options.uiFactories || {},
-      slashCommands: options.slashCommands || defaultSlashCommands,
+      slashCommands: options.slashCommands || defaultSlashMenuItems,
     });
 
     let extensions = options.disableHistoryExtension
@@ -69,10 +91,210 @@ export class BlockNoteEditor extends EditorAPI {
       },
     };
 
-    const _tiptapEditor = new Editor(tiptapOptions) as Editor & {
+    this._tiptapEditor = new Editor(tiptapOptions) as Editor & {
       contentComponent: any;
     };
-    super(_tiptapEditor);
-    this._tiptapEditor = _tiptapEditor;
+  }
+
+  /**
+   * Gets a list of all top-level blocks that are in the editor.
+   */
+  public get topLevelBlocks(): Block[] {
+    const blocks: Block[] = [];
+
+    this._tiptapEditor.state.doc.firstChild!.descendants((node) => {
+      blocks.push(nodeToBlock(node, this.blockCache));
+
+      return false;
+    });
+
+    return blocks;
+  }
+
+  /**
+   * Traverses all blocks in the editor, including all nested blocks, and executes a callback for each. The traversal is
+   * depth-first, which is the same order as blocks appear in the editor by y-coordinate.
+   * @param callback The callback to execute for each block.
+   * @param reverse Whether the blocks should be traversed in reverse order.
+   */
+  public allBlocks(
+    callback: (block: Block) => void,
+    reverse: boolean = false
+  ): void {
+    function helper(blocks: Block[]) {
+      if (reverse) {
+        for (const block of blocks.reverse()) {
+          helper(block.children);
+          callback(block);
+        }
+      } else {
+        for (const block of blocks) {
+          callback(block);
+          helper(block.children);
+        }
+      }
+    }
+
+    helper(this.topLevelBlocks);
+  }
+
+  /**
+   * Gets information regarding the position of the text cursor in the editor.
+   */
+  public getTextCursorPosition(): TextCursorPosition {
+    const { node, depth, startPos, endPos } = getBlockInfoFromPos(
+      this._tiptapEditor.state.doc,
+      this._tiptapEditor.state.selection.from
+    )!;
+
+    // Index of the current blockContainer node relative to its parent blockGroup.
+    const nodeIndex = this._tiptapEditor.state.doc
+      .resolve(endPos)
+      .index(depth - 1);
+    // Number of the parent blockGroup's child blockContainer nodes.
+    const numNodes = this._tiptapEditor.state.doc
+      .resolve(endPos + 1)
+      .node().childCount;
+
+    // Gets previous blockContainer node at the same nesting level, if the current node isn't the first child.
+    let prevNode: Node | undefined = undefined;
+    if (nodeIndex > 0) {
+      prevNode = this._tiptapEditor.state.doc.resolve(startPos - 2).node();
+    }
+
+    // Gets next blockContainer node at the same nesting level, if the current node isn't the last child.
+    let nextNode: Node | undefined = undefined;
+    if (nodeIndex < numNodes - 1) {
+      nextNode = this._tiptapEditor.state.doc.resolve(endPos + 2).node();
+    }
+
+    return {
+      block: nodeToBlock(node, this.blockCache),
+      prevBlock:
+        prevNode === undefined
+          ? undefined
+          : nodeToBlock(prevNode, this.blockCache),
+      nextBlock:
+        nextNode === undefined
+          ? undefined
+          : nodeToBlock(nextNode, this.blockCache),
+    };
+  }
+
+  public setTextCursorPosition(
+    block: Block,
+    placement: "start" | "end" = "start"
+  ) {
+    const { posBeforeNode } = getNodeById(
+      block.id,
+      this._tiptapEditor.state.doc
+    );
+    const { startPos, contentNode } = getBlockInfoFromPos(
+      this._tiptapEditor.state.doc,
+      posBeforeNode + 2
+    )!;
+
+    if (placement === "start") {
+      this._tiptapEditor.commands.setTextSelection(startPos + 1);
+    } else {
+      this._tiptapEditor.commands.setTextSelection(
+        startPos + contentNode.nodeSize - 1
+      );
+    }
+  }
+
+  /**
+   * Inserts multiple blocks before, after, or nested inside an existing block in the editor.
+   * @param blocksToInsert An array of blocks to insert.
+   * @param blockToInsertAt An existing block, marking where the new blocks should be inserted at.
+   * @param placement Determines whether the blocks should be inserted just before, just after, or nested inside the
+   * existing block.
+   */
+  public insertBlocks(
+    blocksToInsert: PartialBlock[],
+    blockToInsertAt: Block,
+    placement: "before" | "after" | "nested" = "before"
+  ): void {
+    insertBlocks(
+      blocksToInsert,
+      blockToInsertAt,
+      placement,
+      this._tiptapEditor
+    );
+  }
+
+  /**
+   * Updates a block in the editor to the given specification.
+   * @param blockToUpdate The block that should be updated.
+   * @param updatedBlock The specification that the block should be updated to.
+   */
+  public updateBlock(blockToUpdate: Block, updatedBlock: PartialBlock) {
+    updateBlock(blockToUpdate, updatedBlock, this._tiptapEditor);
+  }
+
+  /**
+   * Removes multiple blocks from the editor. Throws an error if any of the blocks could not be found.
+   * @param blocksToRemove An array of blocks that should be removed.
+   */
+  public removeBlocks(blocksToRemove: Block[]) {
+    removeBlocks(blocksToRemove, this._tiptapEditor);
+  }
+
+  /**
+   * Replaces multiple blocks in the editor with several other blocks. If the provided blocks to remove are not adjacent
+   * to each other, the new blocks are inserted at the position of the first block in the array. Throws an error if any
+   * of the blocks could not be found.
+   * @param blocksToRemove An array of blocks that should be replaced.
+   * @param blocksToInsert An array of blocks to replace the old ones with.
+   */
+  public replaceBlocks(
+    blocksToRemove: Block[],
+    blocksToInsert: PartialBlock[]
+  ) {
+    replaceBlocks(blocksToRemove, blocksToInsert, this._tiptapEditor);
+  }
+
+  /**
+   * Executes a callback function whenever the editor's content changes.
+   * @param callback The callback function to execute.
+   */
+  public onContentChange(callback: () => void) {
+    this._tiptapEditor.on("update", callback);
+  }
+
+  /**
+   * Serializes a list of blocks into an HTML string. The output is not the same as what's rendered by the editor, and
+   * is simplified in order to better conform to HTML standards. Block structuring elements are removed, children of
+   * blocks which aren't list items are lifted out of them, and list items blocks are wrapped in `ul`/`ol` tags.
+   * @param blocks The list of blocks to serialize into HTML.
+   */
+  public async blocksToHTML(blocks: Block[]): Promise<string> {
+    return blocksToHTML(blocks, this._tiptapEditor.schema);
+  }
+
+  /**
+   * Creates a list of blocks from an HTML string.
+   * @param htmlString The HTML string to create a list of blocks from.
+   */
+  public async HTMLToBlocks(htmlString: string): Promise<Block[]> {
+    return HTMLToBlocks(htmlString, this._tiptapEditor.schema);
+  }
+
+  /**
+   * Serializes a list of blocks into a Markdown string. The output is simplified as Markdown does not support all
+   * features of BlockNote. Block structuring elements are removed, children of blocks which aren't list items are
+   * lifted out of them, and certain styles are removed.
+   * @param blocks The list of blocks to serialize into Markdown.
+   */
+  public async blocksToMarkdown(blocks: Block[]): Promise<string> {
+    return blocksToMarkdown(blocks, this._tiptapEditor.schema);
+  }
+
+  /**
+   * Creates a list of blocks from a Markdown string.
+   * @param markdownString The Markdown string to create a list of blocks from.
+   */
+  public async markdownToBlocks(markdownString: string): Promise<Block[]> {
+    return markdownToBlocks(markdownString, this._tiptapEditor.schema);
   }
 }

package/src/BlockNoteExtensions.ts

@@ -1,5 +1,7 @@
 import { Extensions, extensions } from "@tiptap/core";
 
+import { BlockNoteEditor } from "./BlockNoteEditor";
+
 import { Bold } from "@tiptap/extension-bold";
 import { Code } from "@tiptap/extension-code";
 import { Dropcursor } from "@tiptap/extension-dropcursor";
@@ -22,8 +24,8 @@ import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/Formatt
 import HyperlinkMark from "./extensions/HyperlinkToolbar/HyperlinkMark";
 import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
-import { SlashCommand, SlashMenuExtension } from "./extensions/SlashMenu";
-import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
+import { SlashMenuExtension } from "./extensions/SlashMenu";
+import { BaseSlashMenuItem } from "./extensions/SlashMenu";
 import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
 import { TextColorMark } from "./extensions/TextColor/TextColorMark";
@@ -34,7 +36,7 @@ import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsM
 export type UiFactories = Partial<{
   formattingToolbarFactory: FormattingToolbarFactory;
   hyperlinkToolbarFactory: HyperlinkToolbarFactory;
-  slashMenuFactory: SuggestionsMenuFactory<SlashMenuItem>;
+  slashMenuFactory: SuggestionsMenuFactory<BaseSlashMenuItem>;
   blockSideMenuFactory: BlockSideMenuFactory;
 }>;
 
@@ -42,8 +44,9 @@ export type UiFactories = Partial<{
  * Get all the Tiptap extensions BlockNote is configured with by default
  */
 export const getBlockNoteExtensions = (opts: {
+  editor: BlockNoteEditor;
   uiFactories: UiFactories;
-  slashCommands: SlashCommand[];
+  slashCommands: BaseSlashMenuItem[];
 }) => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
@@ -123,6 +126,7 @@ export const getBlockNoteExtensions = (opts: {
   if (opts.uiFactories.slashMenuFactory) {
     ret.push(
       SlashMenuExtension.configure({
+        editor: opts.editor,
         commands: opts.slashCommands,
         slashMenuFactory: opts.uiFactories.slashMenuFactory,
       })

package/src/extensions/Blocks/api/cursorPositionTypes.ts

@@ -2,4 +2,6 @@ import { Block } from "./blockTypes";
 
 export type TextCursorPosition = {
   block: Block;
+  prevBlock: Block | undefined;
+  nextBlock: Block | undefined;
 };

package/src/extensions/SlashMenu/BaseSlashMenuItem.ts

@@ -0,0 +1,31 @@
+import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+
+/**
+ * A class that defines a slash command (/<command>).
+ *
+ * (Not to be confused with ProseMirror commands nor TipTap commands.)
+ */
+export class BaseSlashMenuItem extends SuggestionItem {
+  /**
+   * 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(
+    public readonly name: string,
+    public readonly execute: (editor: BlockNoteEditor) => void,
+    public readonly aliases: string[] = []
+  ) {
+    super(name, (query: string): boolean => {
+      return (
+        this.name.toLowerCase().startsWith(query.toLowerCase()) ||
+        this.aliases.filter((alias) =>
+          alias.toLowerCase().startsWith(query.toLowerCase())
+        ).length !== 0
+      );
+    });
+  }
+}

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -2,10 +2,12 @@ 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 { SlashMenuItem } from "./SlashMenuItem";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
 
 export type SlashMenuOptions = {
-  commands: SlashMenuItem[] | undefined;
+  editor: BlockNoteEditor | undefined;
+  commands: BaseSlashMenuItem[] | undefined;
   slashMenuFactory: SuggestionsMenuFactory<any> | undefined;
 };
 
@@ -16,6 +18,7 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
 
   addOptions() {
     return {
+      editor: undefined,
       commands: undefined,
       slashMenuFactory: undefined,
     };
@@ -29,16 +32,16 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
     const commands = this.options.commands;
 
     return [
-      createSuggestionPlugin<SlashMenuItem>({
+      createSuggestionPlugin<BaseSlashMenuItem>({
         pluginKey: SlashMenuPluginKey,
-        editor: this.editor,
+        editor: this.options.editor!,
         defaultTriggerCharacter: "/",
         suggestionsMenuFactory: this.options.slashMenuFactory!,
         items: (query) => {
-          return commands.filter((cmd: SlashMenuItem) => cmd.match(query));
+          return commands.filter((cmd: BaseSlashMenuItem) => cmd.match(query));
         },
-        onSelectItem: ({ item, editor, range }) => {
-          item.execute(editor, range);
+        onSelectItem: ({ item, editor }) => {
+          item.execute(editor);
         },
       }),
     ];

package/src/extensions/SlashMenu/{defaultSlashCommands.tsx → defaultSlashMenuItems.tsx}

@@ -1,135 +1,88 @@
-import { Editor, Range } from "@tiptap/core";
-import { formatKeyboardShortcut } from "../../shared/utils";
-import { SlashMenuItem } from "./SlashMenuItem";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+import { PartialBlock } from "../Blocks/api/blockTypes";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+
+function insertOrUpdateBlock(editor: BlockNoteEditor, block: PartialBlock) {
+  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 defaultSlashCommands: SlashMenuItem[] = [
+export const defaultSlashMenuItems: BaseSlashMenuItem[] = [
   // Command for creating a level 1 heading
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Heading",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "heading",
-          props: {
-            level: "1",
-          },
-        })
-        .run();
-    },
-    ["h", "heading1", "h1"],
-    "Headings",
-    "Used for a top-level heading",
-    formatKeyboardShortcut("Mod-Alt-1")
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "1" },
+      }),
+    ["h", "heading1", "h1"]
   ),
 
   // Command for creating a level 2 heading
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Heading 2",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "heading",
-          props: {
-            level: "2",
-          },
-        })
-        .run();
-    },
-    ["h2", "heading2", "subheading"],
-    "Headings",
-    "Used for key sections",
-    formatKeyboardShortcut("Mod-Alt-2")
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "2" },
+      }),
+    ["h2", "heading2", "subheading"]
   ),
 
   // Command for creating a level 3 heading
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Heading 3",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "heading",
-          props: {
-            level: "3",
-          },
-        })
-        .run();
-    },
-    ["h3", "heading3", "subheading"],
-    "Headings",
-    "Used for subsections and group headings",
-    formatKeyboardShortcut("Mod-Alt-3")
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "3" },
+      }),
+    ["h3", "heading3", "subheading"]
   ),
 
   // Command for creating an ordered list
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Numbered List",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "numberedListItem",
-          props: {},
-        })
-        .run();
-    },
-    ["li", "list", "numberedlist", "numbered list"],
-    "Basic blocks",
-    "Used to display a numbered list",
-    "Mod-Alt-7"
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "numberedListItem",
+      }),
+    ["li", "list", "numberedlist", "numbered list"]
   ),
 
   // Command for creating a bullet list
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Bullet List",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "bulletListItem",
-          props: {},
-        })
-        .run();
-    },
-    ["ul", "list", "bulletlist", "bullet list"],
-    "Basic blocks",
-    "Used to display an unordered list",
-    "Mod-Alt-9"
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "bulletListItem",
+      }),
+    ["ul", "list", "bulletlist", "bullet list"]
   ),
 
   // Command for creating a paragraph (pretty useless)
-  new SlashMenuItem(
+  new BaseSlashMenuItem(
     "Paragraph",
-    (editor: Editor, range: Range) => {
-      return editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .BNCreateOrUpdateBlock(range.from, {
-          type: "paragraph",
-          props: {},
-        })
-        .run();
-    },
-    ["p"],
-    "Basic blocks",
-    "Used for the body of your document",
-    "Mod-Alt-0"
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "paragraph",
+      }),
+    ["p"]
   ),
 
   //     replaceRangeWithNode(editor, range, node);

package/src/extensions/SlashMenu/index.ts

@@ -1,9 +1,5 @@
-import { defaultSlashCommands } from "./defaultSlashCommands";
+import { defaultSlashMenuItems } from "./defaultSlashMenuItems";
 import { SlashMenuExtension } from "./SlashMenuExtension";
-import { SlashMenuItem } from "./SlashMenuItem";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 
-export {
-  defaultSlashCommands,
-  SlashMenuItem as SlashCommand,
-  SlashMenuExtension,
-};
+export { defaultSlashMenuItems, BaseSlashMenuItem, SlashMenuExtension };

package/src/index.ts

@@ -4,9 +4,8 @@ export * from "./extensions/Blocks/api/blockTypes";
 export * from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
 export * from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
-export { defaultSlashCommands } from "./extensions/SlashMenu/defaultSlashCommands";
-export * from "./extensions/SlashMenu/SlashMenuItem";
+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 "../src/api/Editor";

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

@@ -1,17 +1,6 @@
 /**
  * A generic interface used in all suggestion menus (slash menu, mentions, etc)
  */
-export interface SuggestionItem {
-  /**
-   * The name of the item
-   */
-  name: 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;
+export class SuggestionItem {
+  constructor(public name: string, public match: (query: string) => boolean) {}
 }