@blocknote/core 0.15.7 → 0.15.9

package/src/editor/BlockNoteExtensions.ts

@@ -12,8 +12,8 @@ import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import * as Y from "yjs";
 import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
-import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
 import { createDropFileExtension } from "../api/parsers/fileDropExtension";
+import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
@@ -55,6 +55,7 @@ export const getBlockNoteExtensions = <
     renderCursor?: (user: any) => HTMLElement;
   };
   disableExtensions: string[] | undefined;
+  setIdAttribute?: boolean;
 }) => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
@@ -69,6 +70,7 @@ export const getBlockNoteExtensions = <
     // DropCursor,
     UniqueID.configure({
       types: ["blockContainer"],
+      setIdAttribute: opts.setIdAttribute,
     }),
     HardBreak.extend({ priority: 10 }),
     // Comments,
@@ -197,5 +199,5 @@ export const getBlockNoteExtensions = <
   }
 
   const disableExtensions: string[] = opts.disableExtensions || [];
-  return ret.filter(ex => !disableExtensions.includes(ex.name));
+  return ret.filter((ex) => !disableExtensions.includes(ex.name));
 };

package/src/editor/BlockNoteTipTapEditor.ts

@@ -168,8 +168,11 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   };
 }
 
-(BlockNoteTipTapEditor.prototype as any).createView = () => {
+(BlockNoteTipTapEditor.prototype as any).createView = function () {
   // no-op
   // Disable default call to `createView` in the Editor constructor.
   // We should call `createView` manually only when a DOM element is available
+
+  // additional fix because onPaste and onDrop depend on installing plugins in constructor which we don't support
+  this.options.onPaste = this.options.onDrop = undefined;
 };

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -71,8 +71,10 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
     if (this.state?.show) {
       const blockElement = this.pmView.root.querySelector(
         `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`
-      )!;
-
+      );
+      if (!blockElement) {
+        return;
+      }
       this.state.referencePos = blockElement.getBoundingClientRect();
       this.emitUpdate();
     }
@@ -86,8 +88,10 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
     if (!this.state?.show && pluginState.block && this.editor.isEditable) {
       const blockElement = this.pmView.root.querySelector(
         `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
-      )!;
-
+      );
+      if (!blockElement) {
+        return;
+      }
       this.state = {
         show: true,
         referencePos: blockElement.getBoundingClientRect(),
@@ -157,7 +161,7 @@ export class FilePanelProsemirrorPlugin<
       props: {
         handleKeyDown: (_view, event: KeyboardEvent) => {
           if (event.key === "Escape" && this.shown) {
-            this.view!.closeMenu();
+            this.view?.closeMenu();
             return true;
           }
           return false;
@@ -189,5 +193,5 @@ export class FilePanelProsemirrorPlugin<
     return this.on("update", callback);
   }
 
-  public closeMenu = () => this.view!.closeMenu();
+  public closeMenu = () => this.view?.closeMenu();
 }

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -205,7 +205,6 @@ export class FormattingToolbarView implements PluginView {
 
     if (isNodeSelection(selection)) {
       const node = this.pmView.nodeDOM(from) as HTMLElement;
-
       if (node) {
         return node.getBoundingClientRect();
       }

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -267,7 +267,7 @@ export class SideMenuView<
   // When false, the drag handle with be just to the left of the element
   // TODO: Is there any case where we want this to be false?
   private horizontalPosAnchoredAtRoot: boolean;
-  private horizontalPosAnchor: number;
+  private horizontalPosAnchor: number | undefined;
 
   private hoveredBlock: HTMLElement | undefined;
 
@@ -290,9 +290,12 @@ export class SideMenuView<
     };
 
     this.horizontalPosAnchoredAtRoot = true;
-    this.horizontalPosAnchor = (
-      this.pmView.dom.firstChild! as HTMLElement
-    ).getBoundingClientRect().x;
+
+    if (this.pmView.dom.firstChild) {
+      this.horizontalPosAnchor = (
+        this.pmView.dom.firstChild as HTMLElement
+      ).getBoundingClientRect().x;
+    }
 
     this.pmView.root.addEventListener(
       "drop",
@@ -337,8 +340,12 @@ export class SideMenuView<
     // size/position, so we get the boundingRect of the first child (i.e. the
     // blockGroup that wraps all blocks in the editor) for more accurate side
     // menu placement.
+    if (!this.pmView.dom.firstChild) {
+      return;
+    }
+
     const editorBoundingBox = (
-      this.pmView.dom.firstChild! as HTMLElement
+      this.pmView.dom.firstChild as HTMLElement
     ).getBoundingClientRect();
 
     this.horizontalPosAnchor = editorBoundingBox.x;
@@ -441,7 +448,7 @@ export class SideMenuView<
     if (!pos || pos.inside === -1) {
       const evt = new Event("drop", event) as any;
       const editorBoundingBox = (
-        this.pmView.dom.firstChild! as HTMLElement
+        this.pmView.dom.firstChild as HTMLElement
       ).getBoundingClientRect();
       evt.clientX =
         event.clientX < editorBoundingBox.left ||
@@ -474,10 +481,10 @@ export class SideMenuView<
       top: event.clientY,
     });
 
-    if (!pos || pos.inside === -1) {
+    if (!pos || (pos.inside === -1 && this.pmView.dom.firstChild)) {
       const evt = new Event("dragover", event) as any;
       const editorBoundingBox = (
-        this.pmView.dom.firstChild! as HTMLElement
+        this.pmView.dom.firstChild as HTMLElement
       ).getBoundingClientRect();
       evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
       evt.clientY = event.clientY;
@@ -555,8 +562,8 @@ export class SideMenuView<
   };
 
   onScroll = () => {
-    if (this.state?.show) {
-      const blockContent = this.hoveredBlock!.firstChild as HTMLElement;
+    if (this.state?.show && this.hoveredBlock?.firstChild) {
+      const blockContent = this.hoveredBlock.firstChild as HTMLElement;
       const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
       this.state.referencePos = new DOMRect(
@@ -624,7 +631,11 @@ export class SideMenuView<
       this.emitUpdate(this.state);
     }
 
-    const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
+    if (!this.hoveredBlock?.firstChild) {
+      return;
+    }
+
+    const blockContent = this.hoveredBlock.firstChild as HTMLElement;
     const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
     const pos = this.pmView.posAtCoords({

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -54,7 +54,10 @@ class SuggestionMenuView<
       const decorationNode = this.rootEl?.querySelector(
         `[data-decoration-id="${this.pluginState!.decorationId}"]`
       );
-      this.state.referencePos = decorationNode!.getBoundingClientRect();
+      if (!decorationNode) {
+        return;
+      }
+      this.state.referencePos = decorationNode.getBoundingClientRect();
       this.emitUpdate(this.pluginState!.triggerCharacter!);
     }
   };
@@ -89,10 +92,10 @@ class SuggestionMenuView<
       `[data-decoration-id="${this.pluginState!.decorationId}"]`
     );
 
-    if (this.editor.isEditable) {
+    if (this.editor.isEditable && decorationNode) {
       this.state = {
         show: true,
-        referencePos: decorationNode!.getBoundingClientRect(),
+        referencePos: decorationNode.getBoundingClientRect(),
         query: this.pluginState!.query,
       };
 

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -159,7 +159,11 @@ export class TableHandlesView<
     const rowIndex = getChildIndex(target.parentElement!);
     const cellRect = target.getBoundingClientRect();
     const tableRect =
-      target.parentElement!.parentElement!.getBoundingClientRect();
+      target.parentElement?.parentElement?.getBoundingClientRect();
+
+    if (!tableRect) {
+      return;
+    }
 
     const blockEl = getDraggableBlockFromElement(target, this.pmView);
     if (!blockEl) {

package/src/extensions/UniqueID/UniqueID.ts

@@ -50,6 +50,7 @@ const UniqueID = Extension.create({
     return {
       attributeName: "id",
       types: [],
+      setIdAttribute: false,
       generateID: () => {
         // Use mock ID if tests are running.
         if (typeof window !== "undefined" && (window as any).__TEST_OPTIONS) {
@@ -77,10 +78,20 @@ const UniqueID = Extension.create({
             default: null,
             parseHTML: (element) =>
               element.getAttribute(`data-${this.options.attributeName}`),
-            renderHTML: (attributes) => ({
-              [`data-${this.options.attributeName}`]:
-                attributes[this.options.attributeName],
-            }),
+            renderHTML: (attributes) => {
+              const defaultIdAttributes = {
+                [`data-${this.options.attributeName}`]:
+                  attributes[this.options.attributeName],
+              };
+              if (this.options.setIdAttribute) {
+                return {
+                  ...defaultIdAttributes,
+                  id: attributes[this.options.attributeName],
+                };
+              } else {
+                return defaultIdAttributes;
+              }
+            },
           },
         },
       },

package/src/pm-nodes/BlockContainer.ts

@@ -11,7 +11,6 @@ import {
 import { PartialBlock } from "../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
 import { NonEditableBlockPlugin } from "../extensions/NonEditableBlocks/NonEditableBlockPlugin";
-import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin";
 import {
   BlockNoteDOMAttributes,
   BlockSchema,
@@ -492,7 +491,7 @@ export const BlockContainer = Node.create<{
   },
 
   addProseMirrorPlugins() {
-    return [PreviousBlockTypePlugin(), NonEditableBlockPlugin()];
+    return [NonEditableBlockPlugin()];
   },
 
   addKeyboardShortcuts() {

package/src/schema/inlineContent/createSpec.ts

@@ -1,6 +1,9 @@
 import { Node } from "@tiptap/core";
 import { TagParseRule } from "@tiptap/pm/model";
-import { nodeToCustomInlineContent } from "../../api/nodeConversions/nodeConversions";
+import {
+  inlineContentToNodes,
+  nodeToCustomInlineContent,
+} from "../../api/nodeConversions/nodeConversions";
 import { propsToAttributes } from "../blocks/internal";
 import { Props } from "../propTypes";
 import { StyleSchema } from "../styles/types";
@@ -11,15 +14,15 @@ import {
 } from "./internal";
 import {
   CustomInlineContentConfig,
-  InlineContentConfig,
   InlineContentFromConfig,
   InlineContentSpec,
+  PartialCustomInlineContentFromConfig,
 } from "./types";
 
 // TODO: support serialization
 
 export type CustomInlineContentImplementation<
-  T extends InlineContentConfig,
+  T extends CustomInlineContentConfig,
   // B extends BlockSchema,
   // I extends InlineContentSchema,
   S extends StyleSchema
@@ -28,7 +31,10 @@ export type CustomInlineContentImplementation<
     /**
      * The custom inline content to render
      */
-    inlineContent: InlineContentFromConfig<T, S>
+    inlineContent: InlineContentFromConfig<T, S>,
+    updateInlineContent: (
+      update: PartialCustomInlineContentFromConfig<T, S>
+    ) => void
     /**
      * The BlockNote editor instance
      * This is typed generically. If you want an editor with your custom schema, you need to
@@ -100,7 +106,10 @@ export function createInlineContentSpec<
           node,
           editor.schema.inlineContentSchema,
           editor.schema.styleSchema
-        ) as any as InlineContentFromConfig<T, S> // TODO: fix cast
+        ) as any as InlineContentFromConfig<T, S>, // TODO: fix cast
+        () => {
+          // No-op
+        }
       );
 
       return addInlineContentAttributes(
@@ -110,6 +119,46 @@ export function createInlineContentSpec<
         inlineContentConfig.propSchema
       );
     },
+
+    addNodeView() {
+      return ({ node, getPos }) => {
+        const editor = this.options.editor;
+
+        const output = inlineContentImplementation.render(
+          nodeToCustomInlineContent(
+            node,
+            editor.schema.inlineContentSchema,
+            editor.schema.styleSchema
+          ) as any as InlineContentFromConfig<T, S>, // TODO: fix cast
+          (update) => {
+            if (typeof getPos === "boolean") {
+              return;
+            }
+
+            const content = inlineContentToNodes(
+              [update],
+              editor._tiptapEditor.schema,
+              editor.schema.styleSchema
+            );
+
+            editor._tiptapEditor.view.dispatch(
+              editor._tiptapEditor.view.state.tr.replaceWith(
+                getPos(),
+                getPos() + node.nodeSize,
+                content
+              )
+            );
+          }
+        );
+
+        return addInlineContentAttributes(
+          output,
+          inlineContentConfig.type,
+          node.attrs as Props<T["propSchema"]>,
+          inlineContentConfig.propSchema
+        );
+      };
+    },
   });
 
   return createInlineContentSpecFromTipTapNode(

package/types/src/blocks/AudioBlockContent/AudioBlockContent.d.ts

@@ -42,10 +42,10 @@ export declare const audioBlockConfig: {
 };
 export declare const audioRender: (block: BlockFromConfig<typeof audioBlockConfig, any, any>, editor: BlockNoteEditor<any, any, any>) => {
     dom: HTMLDivElement;
-    destroy: () => void;
+    destroy?: undefined;
 } | {
     dom: HTMLDivElement;
-    destroy?: undefined;
+    destroy: (() => void) | undefined;
 };
 export declare const audioParse: (element: HTMLElement) => Partial<Props<typeof audioBlockConfig.propSchema>> | undefined;
 export declare const audioToExternalHTML: (block: BlockFromConfig<typeof audioBlockConfig, any, any>) => {

package/types/src/blocks/FileBlockContent/FileBlockContent.d.ts

@@ -35,10 +35,10 @@ export declare const fileBlockConfig: {
 };
 export declare const fileRender: (block: BlockFromConfig<typeof fileBlockConfig, any, any>, editor: BlockNoteEditor<any, any, any>) => {
     dom: HTMLDivElement;
-    destroy: () => void;
+    destroy?: undefined;
 } | {
     dom: HTMLDivElement;
-    destroy?: undefined;
+    destroy: (() => void) | undefined;
 };
 export declare const fileParse: (element: HTMLElement) => {
     url: string | undefined;

package/types/src/blocks/FileBlockContent/fileBlockHelpers.d.ts

@@ -1,5 +1,15 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockFromConfig, FileBlockConfig } from "../../schema";
+import { BlockFromConfig, BlockSchemaWithBlock, FileBlockConfig } from "../../schema";
+export declare const createFileBlockWrapper: (block: BlockFromConfig<FileBlockConfig, any, any>, editor: BlockNoteEditor<BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>, any, any>, element: {
+    dom: HTMLElement;
+    destroy?: () => void;
+}, buttonText?: string, buttonIcon?: HTMLElement) => {
+    dom: HTMLDivElement;
+    destroy?: undefined;
+} | {
+    dom: HTMLDivElement;
+    destroy: (() => void) | undefined;
+};
 export declare const createDefaultFilePreview: (block: BlockFromConfig<FileBlockConfig, any, any>) => {
     dom: HTMLElement;
     destroy?: () => void;

package/types/src/blocks/ImageBlockContent/ImageBlockContent.d.ts

@@ -56,10 +56,10 @@ export declare const imageBlockConfig: {
 };
 export declare const imageRender: (block: BlockFromConfig<typeof imageBlockConfig, any, any>, editor: BlockNoteEditor<any, any, any>) => {
     dom: HTMLDivElement;
-    destroy: () => void;
+    destroy?: undefined;
 } | {
     dom: HTMLDivElement;
-    destroy?: undefined;
+    destroy: (() => void) | undefined;
 };
 export declare const imageParse: (element: HTMLElement) => Partial<Props<typeof imageBlockConfig.propSchema>> | undefined;
 export declare const imageToExternalHTML: (block: BlockFromConfig<typeof imageBlockConfig, any, any>) => {

package/types/src/blocks/VideoBlockContent/VideoBlockContent.d.ts

@@ -56,10 +56,10 @@ export declare const videoBlockConfig: {
 };
 export declare const videoRender: (block: BlockFromConfig<typeof videoBlockConfig, any, any>, editor: BlockNoteEditor<any, any, any>) => {
     dom: HTMLDivElement;
-    destroy: () => void;
+    destroy?: undefined;
 } | {
     dom: HTMLDivElement;
-    destroy?: undefined;
+    destroy: (() => void) | undefined;
 };
 export declare const videoParse: (element: HTMLElement) => Partial<Props<typeof videoBlockConfig.propSchema>> | undefined;
 export declare const videoToExternalHTML: (block: BlockFromConfig<typeof videoBlockConfig, any, any>) => {

package/types/src/editor/BlockNoteEditor.d.ts

@@ -8,7 +8,7 @@ import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkTool
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin";
 import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin";
-import { BlockIdentifier, BlockNoteDOMAttributes, BlockSchema, BlockSpecs, InlineContentSchema, InlineContentSpecs, PartialInlineContent, StyleSchema, StyleSpecs, Styles } from "../schema";
+import { BlockIdentifier, BlockNoteDOMAttributes, BlockSchema, BlockSpecs, InlineContentSchema, InlineContentSpecs, PartialInlineContent, Styles, StyleSchema, StyleSpecs } from "../schema";
 import { NoInfer } from "../util/typescript";
 import { TextCursorPosition } from "./cursorPositionTypes";
 import { Selection } from "./selectionTypes";
@@ -18,6 +18,12 @@ import { Dictionary } from "../i18n/dictionary";
 import { Transaction } from "@tiptap/pm/state";
 import "../style.css";
 export type BlockNoteEditorOptions<BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema> = {
+    /**
+     * Whether changes to blocks (like indentation, creating lists, changing headings) should be animated or not. Defaults to `true`.
+     *
+     * @default true
+     */
+    animations?: boolean;
     disableExtensions: string[];
     /**
      * A dictionary object containing translations for the editor.
@@ -53,7 +59,7 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema, ISchema extends
      * @param file The file that should be uploaded.
      * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
      */
-    uploadFile: (file: File) => Promise<string | Record<string, any>>;
+    uploadFile: (file: File, blockId?: string) => Promise<string | Record<string, any>>;
     /**
      * Resolve a URL of a file block to one that can be displayed or downloaded. This can be used for creating authenticated URL or
      * implementing custom protocols / schemes
@@ -94,9 +100,18 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema, ISchema extends
      * You probably don't need to set this manually, but use the `server-util` package instead that uses this option internally
      */
     _headless: boolean;
+    /**
+     * A flag indicating whether to set an HTML ID for every block
+     *
+     * When set to `true`, on each block an id attribute will be set with the block id
+     * Otherwise, the HTML ID attribute will not be set.
+     *
+     * (note that the id is always set on the `data-id` attribute)
+     */
+    setIdAttribute?: boolean;
 };
 export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, SSchema extends StyleSchema = DefaultStyleSchema> {
-    private readonly options;
+    protected readonly options: Partial<BlockNoteEditorOptions<any, any, any>>;
     private readonly _pmSchema;
     /**
      * Boolean indicating whether the editor is in headless mode.
@@ -146,7 +161,9 @@ export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockS
      * @param file The file that should be uploaded.
      * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
      */
-    readonly uploadFile: ((file: File) => Promise<string | Record<string, any>>) | undefined;
+    readonly uploadFile: ((file: File, blockId?: string) => Promise<string | Record<string, any>>) | undefined;
+    private onUploadStartCallbacks;
+    private onUploadEndCallbacks;
     readonly resolveFileUrl: (url: string) => Promise<string>;
     get pmSchema(): Schema<any, any>;
     static create<BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, SSchema extends StyleSchema = DefaultStyleSchema>(options?: Partial<BlockNoteEditorOptions<BSchema, ISchema, SSchema>>): BlockNoteEditor<BSchema, ISchema, SSchema>;
@@ -162,6 +179,8 @@ export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockS
     get domElement(): HTMLDivElement;
     isFocused(): boolean;
     focus(): void;
+    onUploadStart(callback: (blockId?: string) => void): () => void;
+    onUploadEnd(callback: (blockId?: string) => void): () => void;
     /**
      * @deprecated, use `editor.document` instead
      */

package/types/src/editor/BlockNoteExtensions.d.ts

@@ -22,4 +22,5 @@ export declare const getBlockNoteExtensions: <BSchema extends Record<string, imp
         renderCursor?: (user: any) => HTMLElement;
     };
     disableExtensions: string[] | undefined;
+    setIdAttribute?: boolean;
 }) => import("@tiptap/core").AnyExtension[];

package/types/src/extensions/FilePanel/FilePanelPlugin.d.ts

@@ -27,5 +27,5 @@ export declare class FilePanelProsemirrorPlugin<I extends InlineContentSchema, S
     constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>);
     get shown(): boolean;
     onUpdate(callback: (state: FilePanelState<I, S>) => void): () => void;
-    closeMenu: () => void;
+    closeMenu: () => void | undefined;
 }

package/types/src/schema/inlineContent/createSpec.d.ts

@@ -1,12 +1,12 @@
 import { TagParseRule } from "@tiptap/pm/model";
 import { StyleSchema } from "../styles/types";
-import { CustomInlineContentConfig, InlineContentConfig, InlineContentFromConfig, InlineContentSpec } from "./types";
-export type CustomInlineContentImplementation<T extends InlineContentConfig, S extends StyleSchema> = {
+import { CustomInlineContentConfig, InlineContentFromConfig, InlineContentSpec, PartialCustomInlineContentFromConfig } from "./types";
+export type CustomInlineContentImplementation<T extends CustomInlineContentConfig, S extends StyleSchema> = {
     render: (
     /**
      * The custom inline content to render
      */
-    inlineContent: InlineContentFromConfig<T, S>
+    inlineContent: InlineContentFromConfig<T, S>, updateInlineContent: (update: PartialCustomInlineContentFromConfig<T, S>) => void
     /**
      * The BlockNote editor instance
      * This is typed generically. If you want an editor with your custom schema, you need to