@blocknote/core 0.11.2 → 0.12.1

package/src/editor/BlockNoteExtensions.ts

@@ -39,6 +39,7 @@ export const getBlockNoteExtensions = <
   S extends StyleSchema
 >(opts: {
   editor: BlockNoteEditor<BSchema, I, S>;
+  placeholders?: Record<string | "default", string>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
   blockSchema: BSchema;
   blockSpecs: BlockSpecs;
@@ -66,8 +67,10 @@ export const getBlockNoteExtensions = <
 
     // DropCursor,
     Placeholder.configure({
-      includeChildren: true,
-      showOnlyCurrent: false,
+      // TODO: This shorthand is kind of ugly
+      ...(opts.placeholders !== undefined
+        ? { placeholders: opts.placeholders }
+        : {}),
     }),
     UniqueID.configure({
       types: ["blockContainer"],

package/src/editor/BlockNoteSchema.ts

@@ -0,0 +1,98 @@
+import {
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+} from "../blocks/defaultBlocks";
+import {
+  BlockSchema,
+  BlockSchemaFromSpecs,
+  BlockSpecs,
+  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
+  StyleSchema,
+  StyleSchemaFromSpecs,
+  StyleSpecs,
+  getBlockSchemaFromSpecs,
+  getInlineContentSchemaFromSpecs,
+  getStyleSchemaFromSpecs,
+} from "../schema";
+import type {
+  BlockNoDefaults,
+  PartialBlockNoDefaults,
+} from "../schema/blocks/types";
+import type { BlockNoteEditor } from "./BlockNoteEditor";
+
+export class BlockNoteSchema<
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+> {
+  public readonly blockSpecs: BlockSpecs;
+  public readonly inlineContentSpecs: InlineContentSpecs;
+  public readonly styleSpecs: StyleSpecs;
+
+  public readonly blockSchema: BSchema;
+  public readonly inlineContentSchema: ISchema;
+  public readonly styleSchema: SSchema;
+
+  // Helper so that you can use typeof schema.BlockNoteEditor
+  public readonly BlockNoteEditor: BlockNoteEditor<BSchema, ISchema, SSchema> =
+    "only for types" as any;
+
+  public readonly Block: BlockNoDefaults<BSchema, ISchema, SSchema> =
+    "only for types" as any;
+
+  public readonly PartialBlock: PartialBlockNoDefaults<
+    BSchema,
+    ISchema,
+    SSchema
+  > = "only for types" as any;
+
+  public static create<
+    BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
+    ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
+    SSpecs extends StyleSpecs = typeof defaultStyleSpecs
+  >(options?: {
+    /**
+     * A list of custom block types that should be available in the editor.
+     */
+    blockSpecs?: BSpecs;
+    /**
+     * A list of custom InlineContent types that should be available in the editor.
+     */
+    inlineContentSpecs?: ISpecs;
+    /**
+     * A list of custom Styles that should be available in the editor.
+     */
+    styleSpecs?: SSpecs;
+  }) {
+    return new BlockNoteSchema<
+      BlockSchemaFromSpecs<BSpecs>,
+      InlineContentSchemaFromSpecs<ISpecs>,
+      StyleSchemaFromSpecs<SSpecs>
+    >(options);
+    // as BlockNoteSchema<
+    // BlockSchemaFromSpecs<BSpecs>,
+    // InlineContentSchemaFromSpecs<ISpecs>,
+    // StyleSchemaFromSpecs<SSpecs>
+    // >;
+  }
+
+  constructor(opts?: {
+    blockSpecs?: BlockSpecs;
+    inlineContentSpecs?: InlineContentSpecs;
+    styleSpecs?: StyleSpecs;
+  }) {
+    this.blockSpecs = opts?.blockSpecs || defaultBlockSpecs;
+    this.inlineContentSpecs =
+      opts?.inlineContentSpecs || defaultInlineContentSpecs;
+    this.styleSpecs = opts?.styleSpecs || defaultStyleSpecs;
+
+    this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any;
+    this.inlineContentSchema = getInlineContentSchemaFromSpecs(
+      this.inlineContentSpecs
+    ) as any;
+    this.styleSchema = getStyleSchemaFromSpecs(this.styleSpecs) as any;
+  }
+}

package/src/editor/BlockNoteTipTapEditor.ts

@@ -0,0 +1,162 @@
+import { EditorOptions, createDocument } from "@tiptap/core";
+// import "./blocknote.css";
+import { Editor as TiptapEditor } from "@tiptap/core";
+import { Node } from "@tiptap/pm/model";
+import { EditorView } from "@tiptap/pm/view";
+import { EditorState } from "prosemirror-state";
+
+import { blockToNode } from "../api/nodeConversions/nodeConversions";
+import { PartialBlock } from "../blocks/defaultBlocks";
+import { StyleSchema } from "../schema";
+
+export type BlockNoteTipTapEditorOptions = Partial<
+  Omit<EditorOptions, "content">
+> & {
+  content: PartialBlock<any, any, any>[];
+};
+
+/**
+ * Custom Editor class that extends TiptapEditor and separates
+ * the creation of the view from the constructor.
+ */
+// @ts-ignore
+export class BlockNoteTipTapEditor extends TiptapEditor {
+  private _state: EditorState;
+
+  constructor(options: BlockNoteTipTapEditorOptions, styleSchema: StyleSchema) {
+    // possible fix for next.js server side rendering
+    // const d = globalThis.document;
+    // const w = globalThis.window;
+    // if (!globalThis.document) {
+    //   globalThis.document = {
+    //     createElement: () => {},
+    //   };
+    // }
+    // if (!globalThis.window) {
+    //   globalThis.window = {
+    //     setTimeout: () => {},
+    //   };
+    // }
+    // options.injectCSS = false
+    super({ ...options, content: undefined });
+
+    // try {
+    //   globalThis.window = w;
+    //   } catch(e) {}
+    //   try {
+    //     globalThis.document = d;
+    //     } catch(e) {}
+
+    // This is a hack to make "initial content detection" by y-prosemirror (and also tiptap isEmpty)
+    // properly detect whether or not the document has changed.
+    // We change the doc.createAndFill function to make sure the initial block id is set, instead of null
+    const schema = this.schema;
+    let cache: any;
+    const oldCreateAndFill = schema.nodes.doc.createAndFill;
+    (schema.nodes.doc as any).createAndFill = (...args: any) => {
+      if (cache) {
+        return cache;
+      }
+      const ret = oldCreateAndFill.apply(schema.nodes.doc, args);
+
+      // create a copy that we can mutate (otherwise, assigning attrs is not safe and corrupts the pm state)
+      const jsonNode = JSON.parse(JSON.stringify(ret!.toJSON()));
+      jsonNode.content[0].content[0].attrs.id = "initialBlockId";
+
+      cache = Node.fromJSON(schema, jsonNode);
+      return cache;
+    };
+
+    let doc: Node;
+
+    try {
+      const pmNodes = options?.content.map((b) =>
+        blockToNode(b, this.schema, styleSchema).toJSON()
+      );
+      doc = createDocument(
+        {
+          type: "doc",
+          content: [
+            {
+              type: "blockGroup",
+              content: pmNodes,
+            },
+          ],
+        },
+        this.schema,
+        this.options.parseOptions
+      );
+    } catch (e) {
+      console.error(
+        "Error creating document from blocks passed as `initialContent`. Caused by exception: ",
+        e
+      );
+      throw new Error(
+        "Error creating document from blocks passed as `initialContent`:\n" +
+          +JSON.stringify(options.content)
+      );
+    }
+
+    // Create state immediately, so that it's available independently from the View,
+    // the way Prosemirror "intends it to be". This also makes sure that we can access
+    // the state before the view is created / mounted.
+    this._state = EditorState.create({
+      doc,
+      schema: this.schema,
+      // selection: selection || undefined,
+    });
+  }
+
+  get state() {
+    if (this.view) {
+      this._state = this.view.state;
+    }
+    return this._state;
+  }
+
+  createView() {
+    // no-op
+    // Disable default call to `createView` in the Editor constructor.
+    // We should call `createView` manually only when a DOM element is available
+  }
+
+  /**
+   * Replace the default `createView` method with a custom one - which we call on mount
+   */
+  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,
+      });
+
+      // `editor.view` is not yet available at this time.
+      // Therefore we will add all plugins and node views directly afterwards.
+      const newState = this.state.reconfigure({
+        plugins: this.extensionManager.plugins,
+      });
+
+      this.view.updateState(newState);
+
+      this.createNodeViews();
+    });
+  }
+
+  /**
+   * Mounts / unmounts the editor to a dom element
+   *
+   * @param element DOM element to mount to, ur null / undefined to destroy
+   */
+  public mount = (element?: HTMLElement | null) => {
+    if (!element) {
+      this.destroy();
+    } else {
+      this.options.element = element;
+      // @ts-ignore
+      this.createViewAlternative();
+    }
+  };
+}

package/src/editor/cursorPositionTypes.ts

@@ -1,9 +1,5 @@
-import {
-  Block,
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../schema";
+import { Block } from "../blocks/defaultBlocks";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../schema";
 
 export type TextCursorPosition<
   BSchema extends BlockSchema,

package/src/editor/editor.css

@@ -1,4 +1,3 @@
-@import url("../assets/fonts-inter.css");
 @import url("prosemirror-tables/style/tables.css");
 
 .bn-editor {

package/src/editor/selectionTypes.ts

@@ -1,9 +1,5 @@
-import {
-  Block,
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../schema";
+import { Block } from "../blocks/defaultBlocks";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../schema";
 
 export type Selection<
   BSchema extends BlockSchema,

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -3,20 +3,15 @@ import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import {
-  BaseUiElementCallbacks,
-  BaseUiElementState,
-} from "../../extensions-shared/BaseUiElementTypes";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
-export type FormattingToolbarCallbacks = BaseUiElementCallbacks;
-
-export type FormattingToolbarState = BaseUiElementState;
+export type FormattingToolbarState = UiElementPosition;
 
 export class FormattingToolbarView {
-  private formattingToolbarState?: FormattingToolbarState;
-  public updateFormattingToolbar: () => void;
+  public state?: FormattingToolbarState;
+  public emitUpdate: () => void;
 
   public preventHide = false;
   public preventShow = false;
@@ -36,18 +31,16 @@ export class FormattingToolbarView {
       StyleSchema
     >,
     private readonly pmView: EditorView,
-    updateFormattingToolbar: (
-      formattingToolbarState: FormattingToolbarState
-    ) => void
+    emitUpdate: (state: FormattingToolbarState) => void
   ) {
-    this.updateFormattingToolbar = () => {
-      if (!this.formattingToolbarState) {
+    this.emitUpdate = () => {
+      if (!this.state) {
         throw new Error(
           "Attempting to update uninitialized formatting toolbar"
         );
       }
 
-      updateFormattingToolbar(this.formattingToolbarState);
+      emitUpdate(this.state);
     };
 
     pmView.dom.addEventListener("mousedown", this.viewMousedownHandler);
@@ -72,9 +65,9 @@ export class FormattingToolbarView {
 
   // For dragging the whole editor.
   dragHandler = () => {
-    if (this.formattingToolbarState?.show) {
-      this.formattingToolbarState.show = false;
-      this.updateFormattingToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   };
 
@@ -105,16 +98,16 @@ export class FormattingToolbarView {
       return;
     }
 
-    if (this.formattingToolbarState?.show) {
-      this.formattingToolbarState.show = false;
-      this.updateFormattingToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   };
 
   scrollHandler = () => {
-    if (this.formattingToolbarState?.show) {
-      this.formattingToolbarState.referencePos = this.getSelectionBoundingBox();
-      this.updateFormattingToolbar();
+    if (this.state?.show) {
+      this.state.referencePos = this.getSelectionBoundingBox();
+      this.emitUpdate();
     }
   };
 
@@ -152,24 +145,24 @@ export class FormattingToolbarView {
       !this.preventShow &&
       (shouldShow || this.preventHide)
     ) {
-      this.formattingToolbarState = {
+      this.state = {
         show: true,
         referencePos: this.getSelectionBoundingBox(),
       };
 
-      this.updateFormattingToolbar();
+      this.emitUpdate();
 
       return;
     }
 
     // Checks if menu should be hidden.
     if (
-      this.formattingToolbarState?.show &&
+      this.state?.show &&
       !this.preventHide &&
       (!shouldShow || this.preventShow || !this.editor.isEditable)
     ) {
-      this.formattingToolbarState.show = false;
-      this.updateFormattingToolbar();
+      this.state.show = false;
+      this.emitUpdate();
 
       return;
     }

package/src/extensions/{ImageToolbar → ImagePanel}/ImageToolbarPlugin.ts

@@ -1,51 +1,44 @@
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
-import { EventEmitter } from "../../util/EventEmitter";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import {
-  BlockSchema,
+import type {
+  BlockFromConfig,
   InlineContentSchema,
-  SpecificBlock,
   StyleSchema,
 } from "../../schema";
-import {
-  BaseUiElementCallbacks,
-  BaseUiElementState,
-} from "../../extensions-shared/BaseUiElementTypes";
-export type ImageToolbarCallbacks = BaseUiElementCallbacks;
-
-export type ImageToolbarState<
-  B extends BlockSchema,
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { EventEmitter } from "../../util/EventEmitter";
+import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
+
+export type ImagePanelState<
   I extends InlineContentSchema,
-  S extends StyleSchema = StyleSchema
-> = BaseUiElementState & {
-  block: SpecificBlock<B, "image", I, S>;
+  S extends StyleSchema
+> = UiElementPosition & {
+  // TODO: This typing is not quite right (children should be from BSchema)
+  block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
 };
 
-export class ImageToolbarView<
-  BSchema extends BlockSchema,
+export class ImagePanelView<
   I extends InlineContentSchema,
   S extends StyleSchema
 > {
-  private imageToolbarState?: ImageToolbarState<BSchema, I, S>;
-  public updateImageToolbar: () => void;
+  public state?: ImagePanelState<I, S>;
+  public emitUpdate: () => void;
 
   public prevWasEditable: boolean | null = null;
 
   constructor(
     private readonly pluginKey: PluginKey,
     private readonly pmView: EditorView,
-    updateImageToolbar: (
-      imageToolbarState: ImageToolbarState<BSchema, I, S>
-    ) => void
+    emitUpdate: (state: ImagePanelState<I, S>) => void
   ) {
-    this.updateImageToolbar = () => {
-      if (!this.imageToolbarState) {
-        throw new Error("Attempting to update uninitialized image toolbar");
+    this.emitUpdate = () => {
+      if (!this.state) {
+        throw new Error("Attempting to update uninitialized image panel");
       }
 
-      updateImageToolbar(this.imageToolbarState);
+      emitUpdate(this.state);
     };
 
     pmView.dom.addEventListener("mousedown", this.mouseDownHandler);
@@ -58,17 +51,17 @@ export class ImageToolbarView<
   }
 
   mouseDownHandler = () => {
-    if (this.imageToolbarState?.show) {
-      this.imageToolbarState.show = false;
-      this.updateImageToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   };
 
   // For dragging the whole editor.
   dragstartHandler = () => {
-    if (this.imageToolbarState?.show) {
-      this.imageToolbarState.show = false;
-      this.updateImageToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   };
 
@@ -76,7 +69,7 @@ export class ImageToolbarView<
     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.
+    // the panel is hidden.
     if (
       // An element is clicked.
       event &&
@@ -88,41 +81,40 @@ export class ImageToolbarView<
       return;
     }
 
-    if (this.imageToolbarState?.show) {
-      this.imageToolbarState.show = false;
-      this.updateImageToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   };
 
   scrollHandler = () => {
-    if (this.imageToolbarState?.show) {
+    if (this.state?.show) {
       const blockElement = document.querySelector(
-        `[data-node-type="blockContainer"][data-id="${this.imageToolbarState.block.id}"]`
+        `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`
       )!;
 
-      this.imageToolbarState.referencePos =
-        blockElement.getBoundingClientRect();
-      this.updateImageToolbar();
+      this.state.referencePos = blockElement.getBoundingClientRect();
+      this.emitUpdate();
     }
   };
 
   update(view: EditorView, prevState: EditorState) {
     const pluginState: {
-      block: SpecificBlock<BSchema, "image", I, S>;
+      block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
     } = this.pluginKey.getState(view.state);
 
-    if (!this.imageToolbarState?.show && pluginState.block) {
+    if (!this.state?.show && pluginState.block) {
       const blockElement = document.querySelector(
         `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
       )!;
 
-      this.imageToolbarState = {
+      this.state = {
         show: true,
         referencePos: blockElement.getBoundingClientRect(),
         block: pluginState.block,
       };
 
-      this.updateImageToolbar();
+      this.emitUpdate();
 
       return;
     }
@@ -131,10 +123,10 @@ export class ImageToolbarView<
       !view.state.selection.eq(prevState.selection) ||
       !view.state.doc.eq(prevState.doc)
     ) {
-      if (this.imageToolbarState?.show) {
-        this.imageToolbarState.show = false;
+      if (this.state?.show) {
+        this.state.show = false;
 
-        this.updateImageToolbar();
+        this.emitUpdate();
       }
     }
   }
@@ -150,26 +142,27 @@ export class ImageToolbarView<
   }
 }
 
-export const imageToolbarPluginKey = new PluginKey("ImageToolbarPlugin");
+const imagePanelPluginKey = new PluginKey("ImagePanelPlugin");
 
-export class ImageToolbarProsemirrorPlugin<
-  BSchema extends BlockSchema,
+export class ImagePanelProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: ImageToolbarView<BSchema, I, S> | undefined;
+  private view: ImagePanelView<I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(_editor: BlockNoteEditor<BSchema, I, S>) {
+  constructor(
+    _editor: BlockNoteEditor<{ image: DefaultBlockSchema["image"] }, I, S>
+  ) {
     super();
     this.plugin = new Plugin<{
-      block: SpecificBlock<BSchema, "image", I, S> | undefined;
+      block: BlockFromConfig<DefaultBlockSchema["image"], I, S> | undefined;
     }>({
-      key: imageToolbarPluginKey,
+      key: imagePanelPluginKey,
       view: (editorView) => {
-        this.view = new ImageToolbarView(
+        this.view = new ImagePanelView(
           // editor,
-          imageToolbarPluginKey,
+          imagePanelPluginKey,
           editorView,
           (state) => {
             this.emit("update", state);
@@ -184,8 +177,9 @@ export class ImageToolbarProsemirrorPlugin<
           };
         },
         apply: (transaction) => {
-          const block: SpecificBlock<BSchema, "image", I, S> | undefined =
-            transaction.getMeta(imageToolbarPluginKey)?.block;
+          const block:
+            | BlockFromConfig<DefaultBlockSchema["image"], I, S>
+            | undefined = transaction.getMeta(imagePanelPluginKey)?.block;
 
           return {
             block,
@@ -195,7 +189,7 @@ export class ImageToolbarProsemirrorPlugin<
     });
   }
 
-  public onUpdate(callback: (state: ImageToolbarState<BSchema, I, S>) => void) {
+  public onUpdate(callback: (state: ImagePanelState<I, S>) => void) {
     return this.on("update", callback);
   }
 }