@blocknote/core 0.12.4 → 0.13.0

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1712138303295,"assets":[{"name":"blocknote.umd.cjs","size":103205},{"name":"blocknote.umd.cjs.map","size":466872}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/extensions/UniqueID/UniqueID.ts","size":8518,"chunks":["a1ee98a"]},{"name":"./src/api/getBlockInfoFromPos.ts","size":1691,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/types.ts","size":302,"chunks":["a1ee98a"]},{"name":"./src/util/typescript.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/api/nodeConversions/nodeConversions.ts","size":11959,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/sharedHTMLConversion.ts","size":2293,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/simplifyBlocksRehypePlugin.ts","size":2687,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/externalHTMLExporter.ts","size":1066,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/internalHTMLSerializer.ts","size":704,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts","size":316,"chunks":["a1ee98a"]},{"name":"./src/util/browser.ts","size":515,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlockHelpers.ts","size":1731,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultProps.ts","size":269,"chunks":["a1ee98a"]},{"name":"./src/util/string.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/internal.ts","size":3701,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/createSpec.ts","size":2781,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/internal.ts","size":1357,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/createSpec.ts","size":1627,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/internal.ts","size":1162,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/createSpec.ts","size":1263,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorMark.ts","size":946,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorMark.ts","size":866,"chunks":["a1ee98a"]},{"name":"./src/api/getCurrentBlockContentType.ts","size":192,"chunks":["a1ee98a"]},{"name":"./src/blocks/HeadingBlockContent/HeadingBlockContent.ts","size":3439,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/ImageBlockContent.ts","size":9280,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts","size":1151,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts","size":2964,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts","size":1862,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts","size":3421,"chunks":["a1ee98a"]},{"name":"./src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts","size":1172,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableExtension.ts","size":1462,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableBlockContent.ts","size":1207,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlocks.ts","size":1025,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlockTypeGuards.ts","size":757,"chunks":["a1ee98a"]},{"name":"./src/api/nodeUtil.ts","size":548,"chunks":["a1ee98a"]},{"name":"./src/api/blockManipulation/blockManipulation.ts","size":5738,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/removeUnderlinesRehypePlugin.ts","size":752,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/markdownExporter.ts","size":549,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/util/nestedLists.ts","size":2174,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/parseHTML.ts","size":503,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/markdown/parseMarkdown.ts","size":1054,"chunks":["a1ee98a"]},{"name":"./src/util/EventEmitter.ts","size":744,"chunks":["a1ee98a"]},{"name":"./src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts","size":4664,"chunks":["a1ee98a"]},{"name":"./src/extensions/LinkToolbar/LinkToolbarPlugin.ts","size":6822,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/SuggestionPlugin.ts","size":7582,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/MultipleNodeSelection.ts","size":1616,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/SideMenuPlugin.ts","size":14923,"chunks":["a1ee98a"]},{"name":"./src/extensions/ImagePanel/ImageToolbarPlugin.ts","size":3482,"chunks":["a1ee98a"]},{"name":"./src/extensions/TableHandles/TableHandlesPlugin.ts","size":14755,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/copyExtension.ts","size":2883,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/pasteExtension.ts","size":1131,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorExtension.ts","size":688,"chunks":["a1ee98a"]},{"name":"./src/extensions/Placeholder/PlaceholderExtension.ts","size":2880,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextAlignment/TextAlignmentExtension.ts","size":748,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorExtension.ts","size":622,"chunks":["a1ee98a"]},{"name":"./src/extensions/TrailingNode/TrailingNodeExtension.ts","size":1594,"chunks":["a1ee98a"]},{"name":"./src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts","size":467,"chunks":["a1ee98a"]},{"name":"./src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts","size":4572,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockContainer.ts","size":17235,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockGroup.ts","size":1097,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Doc.ts","size":90,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteExtensions.ts","size":3536,"chunks":["a1ee98a"]},{"name":"./src/editor/transformPasted.ts","size":1017,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteSchema.ts","size":827,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteTipTapEditor.ts","size":2514,"chunks":["a1ee98a"]},{"name":"./src/editor/Block.css","size":17,"chunks":["a1ee98a"]},{"name":"./src/editor/editor.css","size":18,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteEditor.ts","size":22844,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts","size":5300,"chunks":["a1ee98a"]},{"name":"./src/api/testUtil/partialBlockTestUtil.ts","size":2166,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}
+{"builtAt":1714926597310,"assets":[{"name":"blocknote.umd.cjs","size":109661},{"name":"blocknote.umd.cjs.map","size":481369}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/i18n/locales/en.ts","size":4307,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/nl.ts","size":4477,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/index.ts","size":0,"chunks":["a1ee98a"]},{"name":"./src/extensions/UniqueID/UniqueID.ts","size":8518,"chunks":["a1ee98a"]},{"name":"./src/api/getBlockInfoFromPos.ts","size":1691,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/types.ts","size":302,"chunks":["a1ee98a"]},{"name":"./src/util/typescript.ts","size":331,"chunks":["a1ee98a"]},{"name":"./src/api/nodeConversions/nodeConversions.ts","size":11959,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/sharedHTMLConversion.ts","size":2293,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/util/simplifyBlocksRehypePlugin.ts","size":2687,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/externalHTMLExporter.ts","size":1066,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/html/internalHTMLSerializer.ts","size":704,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts","size":316,"chunks":["a1ee98a"]},{"name":"./src/util/browser.ts","size":536,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlockHelpers.ts","size":1731,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultProps.ts","size":269,"chunks":["a1ee98a"]},{"name":"./src/util/string.ts","size":108,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/internal.ts","size":3701,"chunks":["a1ee98a"]},{"name":"./src/schema/blocks/createSpec.ts","size":2781,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/internal.ts","size":1357,"chunks":["a1ee98a"]},{"name":"./src/schema/inlineContent/createSpec.ts","size":1627,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/internal.ts","size":1162,"chunks":["a1ee98a"]},{"name":"./src/schema/styles/createSpec.ts","size":1263,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorMark.ts","size":946,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorMark.ts","size":866,"chunks":["a1ee98a"]},{"name":"./src/api/getCurrentBlockContentType.ts","size":192,"chunks":["a1ee98a"]},{"name":"./src/blocks/HeadingBlockContent/HeadingBlockContent.ts","size":3439,"chunks":["a1ee98a"]},{"name":"./src/blocks/ImageBlockContent/ImageBlockContent.ts","size":9303,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts","size":1151,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts","size":2964,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts","size":1862,"chunks":["a1ee98a"]},{"name":"./src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts","size":3421,"chunks":["a1ee98a"]},{"name":"./src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts","size":1172,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableExtension.ts","size":1462,"chunks":["a1ee98a"]},{"name":"./src/blocks/TableBlockContent/TableBlockContent.ts","size":1207,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlocks.ts","size":1025,"chunks":["a1ee98a"]},{"name":"./src/blocks/defaultBlockTypeGuards.ts","size":757,"chunks":["a1ee98a"]},{"name":"./src/api/nodeUtil.ts","size":548,"chunks":["a1ee98a"]},{"name":"./src/api/blockManipulation/blockManipulation.ts","size":5738,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/removeUnderlinesRehypePlugin.ts","size":752,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/markdown/markdownExporter.ts","size":549,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/util/nestedLists.ts","size":2174,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/html/parseHTML.ts","size":503,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/markdown/parseMarkdown.ts","size":1054,"chunks":["a1ee98a"]},{"name":"./src/util/EventEmitter.ts","size":744,"chunks":["a1ee98a"]},{"name":"./src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts","size":4287,"chunks":["a1ee98a"]},{"name":"./src/extensions/ImagePanel/ImageToolbarPlugin.ts","size":3393,"chunks":["a1ee98a"]},{"name":"./src/extensions/LinkToolbar/LinkToolbarPlugin.ts","size":7273,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/SuggestionPlugin.ts","size":7646,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/MultipleNodeSelection.ts","size":1616,"chunks":["a1ee98a"]},{"name":"./src/extensions/SideMenu/SideMenuPlugin.ts","size":14952,"chunks":["a1ee98a"]},{"name":"./src/extensions/TableHandles/TableHandlesPlugin.ts","size":14755,"chunks":["a1ee98a"]},{"name":"./src/api/exporters/copyExtension.ts","size":2883,"chunks":["a1ee98a"]},{"name":"./src/api/parsers/pasteExtension.ts","size":1131,"chunks":["a1ee98a"]},{"name":"./src/extensions/BackgroundColor/BackgroundColorExtension.ts","size":688,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextAlignment/TextAlignmentExtension.ts","size":748,"chunks":["a1ee98a"]},{"name":"./src/extensions/TextColor/TextColorExtension.ts","size":622,"chunks":["a1ee98a"]},{"name":"./src/extensions/TrailingNode/TrailingNodeExtension.ts","size":1594,"chunks":["a1ee98a"]},{"name":"./src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts","size":467,"chunks":["a1ee98a"]},{"name":"./src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts","size":4578,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockContainer.ts","size":17589,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/BlockGroup.ts","size":1097,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Doc.ts","size":90,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteExtensions.ts","size":3859,"chunks":["a1ee98a"]},{"name":"./src/editor/transformPasted.ts","size":1017,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteSchema.ts","size":827,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteTipTapEditor.ts","size":2655,"chunks":["a1ee98a"]},{"name":"./src/extensions/Placeholder/PlaceholderPlugin.ts","size":2253,"chunks":["a1ee98a"]},{"name":"./src/editor/Block.css","size":17,"chunks":["a1ee98a"]},{"name":"./src/editor/editor.css","size":18,"chunks":["a1ee98a"]},{"name":"./src/editor/BlockNoteEditor.ts","size":22961,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts","size":4553,"chunks":["a1ee98a"]},{"name":"./src/api/testUtil/partialBlockTestUtil.ts","size":2166,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.12.4",
+  "version": "0.13.0",
   "files": [
     "dist",
     "types",
@@ -116,5 +116,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "54716a4b6d83f46e0d318dc39cd313d35fc8909e"
+  "gitHead": "501dc35254104a4ee56718ee299d31d534586b55"
 }

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -76,7 +76,7 @@ export const renderImage = (
   // Text for the add image button.
   const addImageButtonText = document.createElement("p");
   addImageButtonText.className = "bn-add-image-button-text";
-  addImageButtonText.innerText = "Add Image";
+  addImageButtonText.innerText = editor.dictionary.image.add_button;
 
   // Wrapper element for the image, resize handles and caption.
   const imageAndCaptionWrapper = document.createElement("div");

package/src/editor/BlockNoteEditor.ts

@@ -27,10 +27,10 @@ import {
   PartialBlock,
 } from "../blocks/defaultBlocks";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
+import { ImagePanelProsemirrorPlugin } from "../extensions/ImagePanel/ImageToolbarPlugin";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin";
-import { ImagePanelProsemirrorPlugin } from "../extensions/ImagePanel/ImageToolbarPlugin";
 import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin";
 import { UniqueID } from "../extensions/UniqueID/UniqueID";
 import {
@@ -62,6 +62,9 @@ import {
 } from "./BlockNoteTipTapEditor";
 
 // CSS
+import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin";
+import { Dictionary } from "../i18n/dictionary";
+import { en } from "../i18n/locales";
 import "./Block.css";
 import "./editor.css";
 
@@ -73,6 +76,14 @@ export type BlockNoteEditorOptions<
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
 
+  /**
+   * A dictionary object containing translations for the editor.
+   */
+  dictionary?: Dictionary;
+
+  /**
+   * @deprecated, provide placeholders via dictionary instead
+   */
   placeholders: Record<string | "default", string>;
 
   /**
@@ -133,6 +144,8 @@ export type BlockNoteEditorOptions<
 
   // tiptap options, undocumented
   _tiptapOptions: Partial<EditorOptions>;
+
+  trailingBlock?: boolean;
 };
 
 const blockNoteTipTapOptions = {
@@ -150,6 +163,8 @@ export class BlockNoteEditor<
     contentComponent: any;
   };
   public blockCache = new WeakMap<Node, Block<any, any, any>>();
+  public readonly dictionary: Dictionary;
+
   public readonly schema: BlockNoteSchema<BSchema, ISchema, SSchema>;
 
   public readonly blockImplementations: BlockSpecs;
@@ -216,11 +231,17 @@ export class BlockNoteEditor<
       );
     }
 
+    this.dictionary = options.dictionary || en;
+
     // apply defaults
     const newOptions = {
       defaultStyles: true,
       schema: options.schema || BlockNoteSchema.create(),
       ...options,
+      placeholders: {
+        ...this.dictionary.placeholders,
+        ...options.placeholders,
+      },
     };
 
     // @ts-ignore
@@ -243,13 +264,13 @@ export class BlockNoteEditor<
 
     const extensions = getBlockNoteExtensions({
       editor: this,
-      placeholders: newOptions.placeholders,
       domAttributes: newOptions.domAttributes || {},
       blockSchema: this.schema.blockSchema,
       blockSpecs: this.schema.blockSpecs,
       styleSpecs: this.schema.styleSpecs,
       inlineContentSpecs: this.schema.inlineContentSpecs,
       collaboration: newOptions.collaboration,
+      trailingBlock: newOptions.trailingBlock,
     });
 
     const blockNoteUIExtension = Extension.create({
@@ -263,6 +284,7 @@ export class BlockNoteEditor<
           this.suggestionMenus.plugin,
           ...(this.imagePanel ? [this.imagePanel.plugin] : []),
           ...(this.tableHandles ? [this.tableHandles.plugin] : []),
+          PlaceholderPlugin(this, newOptions.placeholders),
         ];
       },
     });
@@ -759,8 +781,6 @@ export class BlockNoteEditor<
    * @param styles The styles to add.
    */
   public addStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
-
     for (const [style, value] of Object.entries(styles)) {
       const config = this.schema.styleSchema[style];
       if (!config) {
@@ -781,8 +801,6 @@ export class BlockNoteEditor<
    * @param styles The styles to remove.
    */
   public removeStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
-
     for (const style of Object.keys(styles)) {
       this._tiptapEditor.commands.unsetMark(style);
     }
@@ -793,8 +811,6 @@ export class BlockNoteEditor<
    * @param styles The styles to toggle.
    */
   public toggleStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
-
     for (const [style, value] of Object.entries(styles)) {
       const config = this.schema.styleSchema[style];
       if (!config) {

package/src/editor/BlockNoteExtensions.ts

@@ -1,4 +1,4 @@
-import { Extensions, extensions } from "@tiptap/core";
+import { Extension, Extensions, extensions } from "@tiptap/core";
 
 import type { BlockNoteEditor } from "./BlockNoteEditor";
 
@@ -14,7 +14,6 @@ import * as Y from "yjs";
 import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
 import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
-import { Placeholder } from "../extensions/Placeholder/PlaceholderExtension";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
 import { TrailingNode } from "../extensions/TrailingNode/TrailingNodeExtension";
@@ -39,12 +38,12 @@ export const getBlockNoteExtensions = <
   S extends StyleSchema
 >(opts: {
   editor: BlockNoteEditor<BSchema, I, S>;
-  placeholders?: Record<string | "default", string>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
   blockSchema: BSchema;
   blockSpecs: BlockSpecs;
   inlineContentSpecs: InlineContentSpecs;
   styleSpecs: StyleSpecs;
+  trailingBlock: boolean | undefined;
   collaboration?: {
     fragment: Y.XmlFragment;
     user: {
@@ -66,12 +65,6 @@ export const getBlockNoteExtensions = <
     Gapcursor,
 
     // DropCursor,
-    Placeholder.configure({
-      // TODO: This shorthand is kind of ugly
-      ...(opts.placeholders !== undefined
-        ? { placeholders: opts.placeholders }
-        : {}),
-    }),
     UniqueID.configure({
       types: ["blockContainer"],
     }),
@@ -92,10 +85,26 @@ export const getBlockNoteExtensions = <
     BackgroundColorExtension,
     TextAlignmentExtension,
 
+    // make sure escape blurs editor, so that we can tab to other elements in the host page (accessibility)
+    Extension.create({
+      name: "OverrideEscape",
+      addKeyboardShortcuts() {
+        return {
+          Escape: () => {
+            if (opts.editor.suggestionMenus.shown) {
+              // escape is handled by suggestionmenu
+              return false;
+            }
+            return this.editor.commands.blur();
+          },
+        };
+      },
+    }),
+
     // nodes
     Doc,
     BlockContainer.configure({
-      editor: opts.editor as any,
+      editor: opts.editor,
       domAttributes: opts.domAttributes,
     }),
     BlockGroup.configure({
@@ -131,7 +140,9 @@ export const getBlockNoteExtensions = <
     Dropcursor.configure({ width: 5, color: "#ddeeff" }),
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
     // should be handled before Enter handlers in other components like splitListItem
-    TrailingNode,
+    ...(opts.trailingBlock === undefined || opts.trailingBlock
+      ? [TrailingNode]
+      : []),
   ];
 
   if (opts.collaboration) {

package/src/editor/BlockNoteTipTapEditor.ts

@@ -126,12 +126,15 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   private createViewAlternative() {
     // Without queueMicrotask, custom IC / styles will give a React FlushSync error
     queueMicrotask(() => {
-      this.view = new EditorView(this.options.element, {
-        ...this.options.editorProps,
-        // @ts-ignore
-        dispatchTransaction: this.dispatchTransaction.bind(this),
-        state: this.state,
-      });
+      this.view = new EditorView(
+        { mount: this.options.element as any }, // use mount option so that we reuse the existing element instead of creating a new one
+        {
+          ...this.options.editorProps,
+          // @ts-ignore
+          dispatchTransaction: this.dispatchTransaction.bind(this),
+          state: this.state,
+        }
+      );
 
       // `editor.view` is not yet available at this time.
       // Therefore we will add all plugins and node views directly afterwards.

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -1,5 +1,5 @@
 import { isNodeSelection, posToDOMRect } from "@tiptap/core";
-import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
@@ -9,7 +9,7 @@ import { EventEmitter } from "../../util/EventEmitter";
 
 export type FormattingToolbarState = UiElementPosition;
 
-export class FormattingToolbarView {
+export class FormattingToolbarView implements PluginView {
   public state?: FormattingToolbarState;
   public emitUpdate: () => void;
 
@@ -48,9 +48,6 @@ export class FormattingToolbarView {
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
 
-    pmView.dom.addEventListener("focus", this.focusHandler);
-    pmView.dom.addEventListener("blur", this.blurHandler);
-
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -71,39 +68,6 @@ export class FormattingToolbarView {
     }
   };
 
-  focusHandler = () => {
-    // we use `setTimeout` to make sure `selection` is already updated
-    setTimeout(() => this.update(this.pmView));
-  };
-
-  blurHandler = (event: FocusEvent) => {
-    if (this.preventHide) {
-      this.preventHide = false;
-
-      return;
-    }
-
-    const editorWrapper = this.pmView.dom.parentElement!;
-
-    // Checks if the focus is moving to an element outside the editor. If it is,
-    // the toolbar is hidden.
-    if (
-      // An element is clicked.
-      event &&
-      event.relatedTarget &&
-      // Element is inside the editor.
-      (editorWrapper === (event.relatedTarget as Node) ||
-        editorWrapper.contains(event.relatedTarget as Node))
-    ) {
-      return;
-    }
-
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
   scrollHandler = () => {
     if (this.state?.show) {
       this.state.referencePos = this.getSelectionBoundingBox();
@@ -174,12 +138,16 @@ export class FormattingToolbarView {
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
 
-    this.pmView.dom.removeEventListener("focus", this.focusHandler);
-    this.pmView.dom.removeEventListener("blur", this.blurHandler);
-
     document.removeEventListener("scroll", this.scrollHandler);
   }
 
+  closeMenu = () => {
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   getSelectionBoundingBox() {
     const { state } = this.pmView;
     const { selection } = state;
@@ -219,10 +187,25 @@ export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
         });
         return this.view;
       },
+      props: {
+        handleKeyDown: (_view, event: KeyboardEvent) => {
+          if (event.key === "Escape" && this.shown) {
+            this.view!.closeMenu();
+            return true;
+          }
+          return false;
+        },
+      },
     });
   }
 
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
+
   public onUpdate(callback: (state: FormattingToolbarState) => void) {
     return this.on("update", callback);
   }
+
+  public closeMenu = () => this.view!.closeMenu();
 }

package/src/extensions/ImagePanel/ImageToolbarPlugin.ts

@@ -1,15 +1,15 @@
-import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
+import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import type {
   BlockFromConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
-import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { EventEmitter } from "../../util/EventEmitter";
-import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 
 export type ImagePanelState<
   I extends InlineContentSchema,
@@ -22,7 +22,8 @@ export type ImagePanelState<
 export class ImagePanelView<
   I extends InlineContentSchema,
   S extends StyleSchema
-> {
+> implements PluginView
+{
   public state?: ImagePanelState<I, S>;
   public emitUpdate: () => void;
 
@@ -45,8 +46,6 @@ export class ImagePanelView<
 
     pmView.dom.addEventListener("dragstart", this.dragstartHandler);
 
-    pmView.dom.addEventListener("blur", this.blurHandler);
-
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -65,28 +64,6 @@ export class ImagePanelView<
     }
   };
 
-  blurHandler = (event: FocusEvent) => {
-    const editorWrapper = this.pmView.dom.parentElement!;
-
-    // Checks if the focus is moving to an element outside the editor. If it is,
-    // the panel is hidden.
-    if (
-      // An element is clicked.
-      event &&
-      event.relatedTarget &&
-      // Element is inside the editor.
-      (editorWrapper === (event.relatedTarget as Node) ||
-        editorWrapper.contains(event.relatedTarget as Node))
-    ) {
-      return;
-    }
-
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
   scrollHandler = () => {
     if (this.state?.show) {
       const blockElement = document.querySelector(
@@ -131,13 +108,18 @@ export class ImagePanelView<
     }
   }
 
+  closeMenu = () => {
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   destroy() {
     this.pmView.dom.removeEventListener("mousedown", this.mouseDownHandler);
 
     this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
 
-    this.pmView.dom.removeEventListener("blur", this.blurHandler);
-
     document.removeEventListener("scroll", this.scrollHandler);
   }
 }
@@ -170,6 +152,15 @@ export class ImagePanelProsemirrorPlugin<
         );
         return this.view;
       },
+      props: {
+        handleKeyDown: (_view, event: KeyboardEvent) => {
+          if (event.key === "Escape" && this.shown) {
+            this.view!.closeMenu();
+            return true;
+          }
+          return false;
+        },
+      },
       state: {
         init: () => {
           return {
@@ -189,7 +180,13 @@ export class ImagePanelProsemirrorPlugin<
     });
   }
 
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
+
   public onUpdate(callback: (state: ImagePanelState<I, S>) => void) {
     return this.on("update", callback);
   }
+
+  public closeMenu = () => this.view!.closeMenu();
 }

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -1,11 +1,11 @@
 import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
 import { EditorView } from "@tiptap/pm/view";
 import { Mark } from "prosemirror-model";
-import { Plugin, PluginKey } from "prosemirror-state";
+import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
 export type LinkToolbarState = UiElementPosition & {
@@ -15,7 +15,7 @@ export type LinkToolbarState = UiElementPosition & {
   text: string;
 };
 
-class LinkToolbarView {
+class LinkToolbarView implements PluginView {
   public state?: LinkToolbarState;
   public emitUpdate: () => void;
 
@@ -258,6 +258,13 @@ class LinkToolbarView {
     }
   }
 
+  closeMenu = () => {
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   destroy() {
     this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler);
     document.removeEventListener("scroll", this.scrollHandler);
@@ -285,6 +292,15 @@ export class LinkToolbarProsemirrorPlugin<
         });
         return this.view;
       },
+      props: {
+        handleKeyDown: (_view, event: KeyboardEvent) => {
+          if (event.key === "Escape" && this.shown) {
+            this.view!.closeMenu();
+            return true;
+          }
+          return false;
+        },
+      },
     });
   }
 
@@ -327,4 +343,10 @@ export class LinkToolbarProsemirrorPlugin<
   public stopHideTimer = () => {
     this.view!.stopMenuUpdateTimer();
   };
+
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
+
+  public closeMenu = () => this.view!.closeMenu();
 }