@blocknote/core 0.11.2 → 0.12.0

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/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -2,12 +2,13 @@ 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 type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BaseUiElementState } from "../../extensions-shared/BaseUiElementTypes";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { EventEmitter } from "../../util/EventEmitter";
 
-export type HyperlinkToolbarState = BaseUiElementState & {
+export type HyperlinkToolbarState = UiElementPosition & {
   // The hovered hyperlink's URL, and the text it's displayed with in the
   // editor.
   url: string;
@@ -15,8 +16,8 @@ export type HyperlinkToolbarState = BaseUiElementState & {
 };
 
 class HyperlinkToolbarView {
-  private hyperlinkToolbarState?: HyperlinkToolbarState;
-  public updateHyperlinkToolbar: () => void;
+  public state?: HyperlinkToolbarState;
+  public emitUpdate: () => void;
 
   menuUpdateTimer: ReturnType<typeof setTimeout> | undefined;
   startMenuUpdateTimer: () => void;
@@ -34,16 +35,14 @@ class HyperlinkToolbarView {
   constructor(
     private readonly editor: BlockNoteEditor<any, any, any>,
     private readonly pmView: EditorView,
-    updateHyperlinkToolbar: (
-      hyperlinkToolbarState: HyperlinkToolbarState
-    ) => void
+    emitUpdate: (state: HyperlinkToolbarState) => void
   ) {
-    this.updateHyperlinkToolbar = () => {
-      if (!this.hyperlinkToolbarState) {
+    this.emitUpdate = () => {
+      if (!this.state) {
         throw new Error("Attempting to update uninitialized hyperlink toolbar");
       }
 
-      updateHyperlinkToolbar(this.hyperlinkToolbarState);
+      emitUpdate(this.state);
     };
 
     this.startMenuUpdateTimer = () => {
@@ -124,22 +123,22 @@ class HyperlinkToolbarView {
         editorWrapper.contains(event.target as Node)
       )
     ) {
-      if (this.hyperlinkToolbarState?.show) {
-        this.hyperlinkToolbarState.show = false;
-        this.updateHyperlinkToolbar();
+      if (this.state?.show) {
+        this.state.show = false;
+        this.emitUpdate();
       }
     }
   };
 
   scrollHandler = () => {
     if (this.hyperlinkMark !== undefined) {
-      if (this.hyperlinkToolbarState?.show) {
-        this.hyperlinkToolbarState.referencePos = posToDOMRect(
+      if (this.state?.show) {
+        this.state.referencePos = posToDOMRect(
           this.pmView,
           this.hyperlinkMarkRange!.from,
           this.hyperlinkMarkRange!.to
         );
-        this.updateHyperlinkToolbar();
+        this.emitUpdate();
       }
     }
   };
@@ -158,9 +157,9 @@ class HyperlinkToolbarView {
     this.pmView.dispatch(tr);
     this.pmView.focus();
 
-    if (this.hyperlinkToolbarState?.show) {
-      this.hyperlinkToolbarState.show = false;
-      this.updateHyperlinkToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   }
 
@@ -176,9 +175,9 @@ class HyperlinkToolbarView {
     );
     this.pmView.focus();
 
-    if (this.hyperlinkToolbarState?.show) {
-      this.hyperlinkToolbarState.show = false;
-      this.updateHyperlinkToolbar();
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   }
 
@@ -232,7 +231,7 @@ class HyperlinkToolbarView {
     }
 
     if (this.hyperlinkMark && this.editor.isEditable) {
-      this.hyperlinkToolbarState = {
+      this.state = {
         show: true,
         referencePos: posToDOMRect(
           this.pmView,
@@ -245,19 +244,19 @@ class HyperlinkToolbarView {
           this.hyperlinkMarkRange!.to
         ),
       };
-      this.updateHyperlinkToolbar();
+      this.emitUpdate();
 
       return;
     }
 
     // Hides menu.
     if (
-      this.hyperlinkToolbarState?.show &&
+      this.state?.show &&
       prevHyperlinkMark &&
       (!this.hyperlinkMark || !this.editor.isEditable)
     ) {
-      this.hyperlinkToolbarState.show = false;
-      this.updateHyperlinkToolbar();
+      this.state.show = false;
+      this.emitUpdate();
 
       return;
     }