@blocknote/core 0.30.1 → 0.31.0

package/src/api/nodeConversions/nodeToBlock.ts

@@ -1,5 +1,5 @@
-import { Mark, Node, Schema } from "@tiptap/pm/model";
-
+import { Mark, Node, Schema, Slice } from "@tiptap/pm/model";
+import type { Block } from "../../blocks/defaultBlocks.js";
 import UniqueID from "../../extensions/UniqueID/UniqueID.js";
 import type {
   BlockSchema,
@@ -13,17 +13,18 @@ import type {
   TableCell,
   TableContent,
 } from "../../schema/index.js";
-import { getBlockInfoWithManualOffset } from "../getBlockInfoFromPos.js";
-
-import type { Block } from "../../blocks/defaultBlocks.js";
 import {
   isLinkInlineContent,
   isStyledTextInlineContent,
 } from "../../schema/inlineContent/types.js";
 import { UnreachableCaseError } from "../../util/typescript.js";
-import { getBlockCache, getStyleSchema } from "../pmUtil.js";
-import { getInlineContentSchema } from "../pmUtil.js";
-import { getBlockSchema } from "../pmUtil.js";
+import { getBlockInfoWithManualOffset } from "../getBlockInfoFromPos.js";
+import {
+  getBlockCache,
+  getBlockSchema,
+  getInlineContentSchema,
+  getStyleSchema,
+} from "../pmUtil.js";
 
 /**
  * Converts an internal (prosemirror) table node contentto a BlockNote Tablecontent
@@ -492,3 +493,197 @@ export function nodeToBlock<
 
   return block;
 }
+
+/**
+ * Convert a Prosemirror document to a BlockNote document (array of blocks)
+ */
+export function docToBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+>(
+  doc: Node,
+  schema: Schema,
+  blockSchema: BSchema = getBlockSchema(schema) as BSchema,
+  inlineContentSchema: I = getInlineContentSchema(schema) as I,
+  styleSchema: S = getStyleSchema(schema) as S,
+  blockCache = getBlockCache(schema),
+) {
+  const blocks: Block<BSchema, I, S>[] = [];
+  doc.firstChild!.descendants((node) => {
+    blocks.push(
+      nodeToBlock(
+        node,
+        schema,
+        blockSchema,
+        inlineContentSchema,
+        styleSchema,
+        blockCache,
+      ),
+    );
+    return false;
+  });
+  return blocks;
+}
+
+/**
+ *
+ * Parse a Prosemirror Slice into a BlockNote selection. The prosemirror schema looks like this:
+ *
+ * <blockGroup>
+ *   <blockContainer> (main content of block)
+ *       <p, heading, etc.>
+ *   <blockGroup> (only if blocks has children)
+ *     <blockContainer> (child block)
+ *       <p, heading, etc.>
+ *     </blockContainer>
+ *    <blockContainer> (child block 2)
+ *       <p, heading, etc.>
+ *     </blockContainer>
+ *   </blockContainer>
+ *  </blockGroup>
+ * </blockGroup>
+ *
+ */
+export function prosemirrorSliceToSlicedBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+>(
+  slice: Slice,
+  schema: Schema,
+  blockSchema: BSchema = getBlockSchema(schema) as BSchema,
+  inlineContentSchema: I = getInlineContentSchema(schema) as I,
+  styleSchema: S = getStyleSchema(schema) as S,
+  blockCache: WeakMap<Node, Block<BSchema, I, S>> = getBlockCache(schema),
+): {
+  /**
+   * The blocks that are included in the selection.
+   */
+  blocks: Block<BSchema, I, S>[];
+  /**
+   * If a block was "cut" at the start of the selection, this will be the id of the block that was cut.
+   */
+  blockCutAtStart: string | undefined;
+  /**
+   * If a block was "cut" at the end of the selection, this will be the id of the block that was cut.
+   */
+  blockCutAtEnd: string | undefined;
+} {
+  // console.log(JSON.stringify(slice.toJSON()));
+  function processNode(
+    node: Node,
+    openStart: number,
+    openEnd: number,
+  ): {
+    blocks: Block<BSchema, I, S>[];
+    blockCutAtStart: string | undefined;
+    blockCutAtEnd: string | undefined;
+  } {
+    if (node.type.name !== "blockGroup") {
+      throw new Error("unexpected");
+    }
+    const blocks: Block<BSchema, I, S>[] = [];
+    let blockCutAtStart: string | undefined;
+    let blockCutAtEnd: string | undefined;
+
+    node.forEach((blockContainer, _offset, index) => {
+      if (blockContainer.type.name !== "blockContainer") {
+        throw new Error("unexpected");
+      }
+      if (blockContainer.childCount === 0) {
+        return;
+      }
+      if (blockContainer.childCount === 0 || blockContainer.childCount > 2) {
+        throw new Error(
+          "unexpected, blockContainer.childCount: " + blockContainer.childCount,
+        );
+      }
+
+      const isFirstBlock = index === 0;
+      const isLastBlock = index === node.childCount - 1;
+
+      if (blockContainer.firstChild!.type.name === "blockGroup") {
+        // this is the parent where a selection starts within one of its children,
+        // e.g.:
+        // A
+        // ├── B
+        // selection starts within B, then this blockContainer is A, but we don't care about A
+        // so let's descend into B and continue processing
+        if (!isFirstBlock) {
+          throw new Error("unexpected");
+        }
+        const ret = processNode(
+          blockContainer.firstChild!,
+          Math.max(0, openStart - 1),
+          isLastBlock ? Math.max(0, openEnd - 1) : 0,
+        );
+        blockCutAtStart = ret.blockCutAtStart;
+        if (isLastBlock) {
+          blockCutAtEnd = ret.blockCutAtEnd;
+        }
+        blocks.push(...ret.blocks);
+        return;
+      }
+
+      const block = nodeToBlock(
+        blockContainer,
+        schema,
+        blockSchema,
+        inlineContentSchema,
+        styleSchema,
+        blockCache,
+      );
+      const childGroup =
+        blockContainer.childCount > 1 ? blockContainer.child(1) : undefined;
+
+      let childBlocks: Block<BSchema, I, S>[] = [];
+      if (childGroup) {
+        const ret = processNode(
+          childGroup,
+          0, // TODO: can this be anything other than 0?
+          isLastBlock ? Math.max(0, openEnd - 1) : 0,
+        );
+        childBlocks = ret.blocks;
+        if (isLastBlock) {
+          blockCutAtEnd = ret.blockCutAtEnd;
+        }
+      }
+
+      if (isLastBlock && !childGroup && openEnd > 1) {
+        blockCutAtEnd = block.id;
+      }
+
+      if (isFirstBlock && openStart > 1) {
+        blockCutAtStart = block.id;
+      }
+
+      blocks.push({
+        ...(block as any),
+        children: childBlocks,
+      });
+    });
+
+    return { blocks, blockCutAtStart, blockCutAtEnd };
+  }
+
+  if (slice.content.childCount === 0) {
+    return {
+      blocks: [],
+      blockCutAtStart: undefined,
+      blockCutAtEnd: undefined,
+    };
+  }
+
+  if (slice.content.childCount !== 1) {
+    throw new Error(
+      "slice must be a single block, did you forget includeParents=true?",
+    );
+  }
+
+  return processNode(
+    slice.content.firstChild!,
+    Math.max(slice.openStart - 1, 0),
+    Math.max(slice.openEnd - 1, 0),
+  );
+}

package/src/api/pmUtil.ts

@@ -1,12 +1,12 @@
 import type { Node, Schema } from "prosemirror-model";
-import type { Transaction } from "prosemirror-state";
+import { Transform } from "prosemirror-transform";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
 import type { BlockSchema } from "../schema/blocks/types.js";
 import type { InlineContentSchema } from "../schema/inlineContent/types.js";
 import type { StyleSchema } from "../schema/styles/types.js";
-import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
 
-export function getPmSchema(trOrNode: Transaction | Node) {
+export function getPmSchema(trOrNode: Transform | Node) {
   if ("doc" in trOrNode) {
     return trOrNode.doc.type.schema;
   }

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -1,15 +1,15 @@
+import type { HighlighterGeneric } from "@shikijs/types";
 import { InputRule, isTextSelection } from "@tiptap/core";
 import { TextSelection } from "@tiptap/pm/state";
-import { createHighlightPlugin, Parser } from "prosemirror-highlight";
+import { Parser, createHighlightPlugin } from "prosemirror-highlight";
 import { createParser } from "prosemirror-highlight/shiki";
+import { BlockNoteEditor } from "../../index.js";
 import {
+  PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
-  PropSchema,
 } from "../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
-import type { HighlighterGeneric } from "@shikijs/types";
-import { BlockNoteEditor } from "../../index.js";
 
 export type CodeBlockOptions = {
   /**
@@ -76,7 +76,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
   name: "codeBlock",
   content: "inline*",
   group: "blockContent",
-  marks: "",
+  marks: "insertion deletion modification",
   code: true,
   defining: true,
   addOptions() {
@@ -152,7 +152,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
       // Parse from external HTML.
       {
         tag: "pre",
-        contentElement: "code",
+        // contentElement: "code",
         preserveWhitespace: "full",
       },
     ];

package/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts

@@ -33,7 +33,7 @@ export const createAddFileButton = (
   // Opens the file toolbar.
   const addFileButtonClickHandler = () => {
     editor.transact((tr) =>
-      tr.setMeta(editor.filePanel!.plugin, {
+      tr.setMeta(editor.filePanel!.plugins[0], {
         block: block,
       }),
     );

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -1,9 +1,8 @@
+import { Node, mergeAttributes } from "@tiptap/core";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
-import { TableRow } from "@tiptap/extension-table-row";
 import { DOMParser, Fragment, Node as PMNode, Schema } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
-
 import { NodeView } from "prosemirror-view";
 import {
   createBlockSpecFromStronglyTypedTiptapNode,
@@ -24,6 +23,7 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
   group: "blockContent",
   tableRole: "table",
 
+  marks: "deletion insertion modification",
   isolating: true,
 
   parseHTML() {
@@ -152,6 +152,36 @@ const TableParagraph = createStronglyTypedTiptapNode({
 });
 
 /**
+ * This extension allows you to create table rows.
+ * @see https://www.tiptap.dev/api/nodes/table-row
+ */
+export const TableRow = Node.create<{ HTMLAttributes: Record<string, any> }>({
+  name: "tableRow",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "(tableCell | tableHeader)+",
+
+  tableRole: "row",
+  marks: "deletion insertion modification",
+  parseHTML() {
+    return [{ tag: "tr" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "tr",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});
+
+/*
  * This will flatten a node's content to fit into a table cell's paragraph.
  */
 function parseTableContent(node: HTMLElement, schema: Schema) {

package/src/editor/Block.css

@@ -152,6 +152,11 @@ NESTED BLOCKS
 
 .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="heading"],
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="heading"] {
   font-size: var(--level);
   font-weight: bold;
@@ -195,6 +200,10 @@ NESTED BLOCKS
 
 .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="numberedListItem"]::before,
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="numberedListItem"]::before {
   content: var(--index) ".";
 }
@@ -239,6 +248,10 @@ NESTED BLOCKS
 
 .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before,
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="bulletListItem"]::before {
   content: "•";
 }
@@ -256,6 +269,12 @@ NESTED BLOCKS
   ~ .bn-block-group
   > .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before,
+[data-content-type="bulletListItem"]
+  ~ .bn-block-group
+  > .bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="bulletListItem"]::before {
   content: "◦";
 }
@@ -277,6 +296,14 @@ NESTED BLOCKS
   ~ .bn-block-group
   > .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before,
+[data-content-type="bulletListItem"]
+  ~ .bn-block-group
+  [data-content-type="bulletListItem"]
+  ~ .bn-block-group
+  > .bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="bulletListItem"]::before {
   content: "▪";
 }
@@ -442,7 +469,6 @@ NESTED BLOCKS
   position: absolute;
   font-style: italic;
 }
-
 /* TODO: should this be here? */
 
 /* TEXT COLORS */

package/src/editor/BlockNoteEditor.test.ts

@@ -75,6 +75,13 @@ it("adds id attribute when requested", async () => {
   );
 });
 
+it("updates block", () => {
+  const editor = BlockNoteEditor.create();
+  editor.updateBlock(editor.document[0], {
+    content: "hello",
+  });
+});
+
 it("block prop types", () => {
   // this test checks whether the block props are correctly typed in typescript
   const editor = BlockNoteEditor.create();

package/src/editor/BlockNoteEditor.ts

@@ -33,12 +33,13 @@ import {
 import { insertContentAt } from "../api/blockManipulation/insertContentAt.js";
 import {
   getSelection,
+  getSelectionCutBlocks,
   setSelection,
 } from "../api/blockManipulation/selections/selection.js";
 import {
   getTextCursorPosition,
   setTextCursorPosition,
-} from "../api/blockManipulation/selections/textCursorPosition/textCursorPosition.js";
+} from "../api/blockManipulation/selections/textCursorPosition.js";
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
@@ -93,6 +94,7 @@ import {
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
+import { redo, undo } from "@tiptap/pm/history";
 import {
   TextSelection,
   type Command,
@@ -101,11 +103,10 @@ import {
 } from "@tiptap/pm/state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
-import { undoCommand, redoCommand, ySyncPluginKey } from "y-prosemirror";
-import { undo, redo } from "@tiptap/pm/history";
+import { redoCommand, undoCommand, ySyncPluginKey } from "y-prosemirror";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
-import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
+import { docToBlocks } from "../api/nodeConversions/nodeToBlock.js";
 import {
   BlocksChanged,
   getBlocksChangedByTransaction,
@@ -113,20 +114,26 @@ import {
 import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
 import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
 import type { ThreadStore, User } from "../comments/index.js";
-import "../style.css";
+import type { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import type { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 import { EventEmitter } from "../util/EventEmitter.js";
-import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import { BlockNoteExtension } from "./BlockNoteExtension.js";
+
+import "../style.css";
 
+/**
+ * A factory function that returns a BlockNoteExtension
+ * This is useful so we can create extensions that require an editor instance
+ * in the constructor
+ */
 export type BlockNoteExtensionFactory = (
   editor: BlockNoteEditor<any, any, any>,
 ) => BlockNoteExtension;
 
-export type BlockNoteExtension =
-  | AnyExtension
-  | {
-      plugin: Plugin;
-      priority?: number;
-    };
+/**
+ * We support Tiptap extensions and BlockNoteExtension based extensions
+ */
+export type SupportedExtension = AnyExtension | BlockNoteExtension;
 
 export type BlockCache<
   BSchema extends BlockSchema = any,
@@ -369,10 +376,17 @@ export type BlockNoteEditorOptions<
   _tiptapOptions: Partial<EditorOptions>;
 
   /**
-   * (experimental) add extra prosemirror plugins or tiptap extensions to the editor
+   * (experimental) add extra extensions to the editor
+   *
+   * @deprecated, should use `extensions` instead
    */
   _extensions: Record<string, BlockNoteExtension | BlockNoteExtensionFactory>;
 
+  /**
+   * Register
+   */
+  extensions: Array<BlockNoteExtension | BlockNoteExtensionFactory>;
+
   /**
    * Boolean indicating whether the editor is in headless mode.
    * Headless mode means we can use features like importing / exporting blocks,
@@ -404,7 +418,7 @@ export class BlockNoteEditor<
   /**
    * extensions that are added to the editor, can be tiptap extensions or prosemirror plugins
    */
-  public readonly extensions: Record<string, BlockNoteExtension> = {};
+  public extensions: Record<string, SupportedExtension> = {};
 
   /**
    * Boolean indicating whether the editor is in headless mode.
@@ -473,8 +487,10 @@ export class BlockNoteEditor<
 
   private readonly showSelectionPlugin: ShowSelectionPlugin;
 
-  private readonly cursorPlugin: CursorPlugin;
-
+  /**
+   * The plugin for forking a document, only defined if in collaboration mode
+   */
+  public readonly forkYDocPlugin?: ForkYDocPlugin;
   /**
    * The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
    * This method should set when creating the editor as this is application-specific.
@@ -609,6 +625,16 @@ export class BlockNoteEditor<
     });
 
     // add extensions from options
+    for (let ext of newOptions.extensions || []) {
+      if (typeof ext === "function") {
+        // factory
+        ext = ext(this);
+      }
+      const key = (ext.constructor as any).name();
+      this.extensions[key] = ext;
+    }
+
+    // (when passed in via the deprecated `_extensions` option)
     Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
       if (typeof ext === "function") {
         // factory
@@ -625,7 +651,7 @@ export class BlockNoteEditor<
     this.tableHandles = this.extensions["tableHandles"] as any;
     this.comments = this.extensions["comments"] as any;
     this.showSelectionPlugin = this.extensions["showSelection"] as any;
-    this.cursorPlugin = this.extensions["yCursorPlugin"] as any;
+    this.forkYDocPlugin = this.extensions["forkYDocPlugin"] as any;
 
     if (newOptions.uploadFile) {
       const uploadFile = newOptions.uploadFile;
@@ -691,20 +717,19 @@ export class BlockNoteEditor<
           return ext;
         }
 
-        if (!ext.plugin) {
-          throw new Error(
-            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property",
-          );
+        if (ext instanceof BlockNoteExtension && !ext.plugins.length) {
+          return undefined;
         }
 
         // "blocknote" extensions (prosemirror plugins)
         return Extension.create({
           name: key,
           priority: ext.priority,
-          addProseMirrorPlugins: () => [ext.plugin],
+          addProseMirrorPlugins: () => ext.plugins,
         });
       }),
-    ];
+    ].filter((ext): ext is Extension => ext !== undefined);
+
     const tiptapOptions: BlockNoteTipTapEditorOptions = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
@@ -865,6 +890,26 @@ export class BlockNoteEditor<
     }
   }
 
+  // TO DISCUSS
+  /**
+   * Shorthand to get a typed extension from the editor, by
+   * just passing in the extension class.
+   *
+   * @param ext - The extension class to get
+   * @param key - optional, the key of the extension in the extensions object (defaults to the extension name)
+   * @returns The extension instance
+   */
+  public extension<T extends BlockNoteExtension>(
+    ext: { new (...args: any[]): T } & typeof BlockNoteExtension,
+    key = ext.name(),
+  ): T {
+    const extension = this.extensions[key] as T;
+    if (!extension) {
+      throw new Error(`Extension ${key} not found`);
+    }
+    return extension;
+  }
+
   /**
    * Mount the editor to a parent DOM element. Call mount(undefined) to clean up
    *
@@ -946,15 +991,7 @@ export class BlockNoteEditor<
    */
   public get document(): Block<BSchema, ISchema, SSchema>[] {
     return this.transact((tr) => {
-      const blocks: Block<BSchema, ISchema, SSchema>[] = [];
-
-      tr.doc.firstChild!.descendants((node) => {
-        blocks.push(nodeToBlock(node, this.pmSchema));
-
-        return false;
-      });
-
-      return blocks;
+      return docToBlocks(tr.doc, this.pmSchema);
     });
   }
 
@@ -1099,12 +1136,26 @@ export class BlockNoteEditor<
   }
 
   /**
-   * Gets a snapshot of the current selection.
+   * Gets a snapshot of the current selection. This contains all blocks (included nested blocks)
+   * that the selection spans across.
+   *
+   * If the selection starts / ends halfway through a block, the returned data will contain the entire block.
    */
   public getSelection(): Selection<BSchema, ISchema, SSchema> | undefined {
     return this.transact((tr) => getSelection(tr));
   }
 
+  /**
+   * Gets a snapshot of the current selection. This contains all blocks (included nested blocks)
+   * that the selection spans across.
+   *
+   * If the selection starts / ends halfway through a block, the returned block will be
+   * only the part of the block that is included in the selection.
+   */
+  public getSelectionCutBlocks() {
+    return this.transact((tr) => getSelectionCutBlocks(tr));
+  }
+
   /**
    * Sets the selection to a range of blocks.
    * @param startBlock The identifier of the block that should be the start of the selection.
@@ -1500,7 +1551,7 @@ export class BlockNoteEditor<
       );
     }
 
-    this.cursorPlugin.updateUser(user);
+    (this.extensions["yCursorPlugin"] as CursorPlugin).updateUser(user);
   }
 
   /**
@@ -1595,8 +1646,8 @@ export class BlockNoteEditor<
     if (!this.prosemirrorView) {
       return undefined;
     }
-    const state = this.prosemirrorView?.state;
-    const { selection } = state;
+
+    const { selection } = this.prosemirrorState;
 
     // support for CellSelections
     const { ranges } = selection;
@@ -1641,7 +1692,7 @@ export class BlockNoteEditor<
       if (pluginState?.deleteTriggerCharacter) {
         tr.insertText(triggerCharacter);
       }
-      tr.scrollIntoView().setMeta(this.suggestionMenus.plugin, {
+      tr.scrollIntoView().setMeta(this.suggestionMenus.plugins[0], {
         triggerCharacter: triggerCharacter,
         deleteTriggerCharacter: pluginState?.deleteTriggerCharacter || false,
         ignoreQueryLength: pluginState?.ignoreQueryLength || false,