@blocknote/core 0.18.0 → 0.19.1

package/src/editor/BlockNoteEditor.ts

@@ -1,4 +1,11 @@
-import { EditorOptions, Extension, getSchema } from "@tiptap/core";
+import {
+  AnyExtension,
+  EditorOptions,
+  Extension,
+  getSchema,
+  Mark,
+  Node as TipTapNode,
+} from "@tiptap/core";
 import { Node, Schema } from "prosemirror-model";
 // import "./blocknote.css";
 import * as Y from "yjs";
@@ -7,6 +14,12 @@ import {
   moveBlockDown,
   moveBlockUp,
 } from "../api/blockManipulation/commands/moveBlock/moveBlock.js";
+import {
+  canNestBlock,
+  canUnnestBlock,
+  nestBlock,
+  unnestBlock,
+} from "../api/blockManipulation/commands/nestBlock/nestBlock.js";
 import { removeBlocks } from "../api/blockManipulation/commands/removeBlocks/removeBlocks.js";
 import { replaceBlocks } from "../api/blockManipulation/commands/replaceBlocks/replaceBlocks.js";
 import { updateBlock } from "../api/blockManipulation/commands/updateBlock/updateBlock.js";
@@ -17,7 +30,6 @@ import {
 } from "../api/blockManipulation/selections/textCursorPosition/textCursorPosition.js";
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
-import { getBlockInfoFromSelection } from "../api/getBlockInfoFromPos.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
 import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown.js";
 import {
@@ -42,9 +54,9 @@ import {
   InlineContentSchema,
   InlineContentSpecs,
   PartialInlineContent,
+  Styles,
   StyleSchema,
   StyleSpecs,
-  Styles,
 } from "../schema/index.js";
 import { mergeCSSClasses } from "../util/browser.js";
 import { NoInfer, UnreachableCaseError } from "../util/typescript.js";
@@ -62,18 +74,22 @@ import {
   BlockNoteTipTapEditorOptions,
 } from "./BlockNoteTipTapEditor.js";
 
-import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
-import { Transaction } from "@tiptap/pm/state";
+import { Plugin, Transaction } from "@tiptap/pm/state";
+import { dropCursor } from "prosemirror-dropcursor";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
-import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
-import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
 import "../style.css";
 
+export type BlockNoteExtension =
+  | AnyExtension
+  | {
+      plugin: Plugin;
+    };
+
 export type BlockNoteEditorOptions<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
@@ -86,11 +102,15 @@ export type BlockNoteEditorOptions<
    */
   animations?: boolean;
 
+  /**
+   * Disable internal extensions (based on keys / extension name)
+   */
   disableExtensions: string[];
+
   /**
    * A dictionary object containing translations for the editor.
    */
-  dictionary?: Dictionary;
+  dictionary?: Dictionary & Record<string, any>;
 
   /**
    * @deprecated, provide placeholders via dictionary instead
@@ -167,9 +187,16 @@ export type BlockNoteEditorOptions<
     renderCursor?: (user: any) => HTMLElement;
   };
 
-  // tiptap options, undocumented
+  /**
+   * additional tiptap options, undocumented
+   */
   _tiptapOptions: Partial<EditorOptions>;
 
+  /**
+   * (experimental) add extra prosemirror plugins or tiptap extensions to the editor
+   */
+  _extensions: Record<string, BlockNoteExtension>;
+
   trailingBlock?: boolean;
 
   /**
@@ -190,6 +217,8 @@ export type BlockNoteEditorOptions<
    * (note that the id is always set on the `data-id` attribute)
    */
   setIdAttribute?: boolean;
+
+  dropCursor?: (opts: any) => Plugin;
 };
 
 const blockNoteTipTapOptions = {
@@ -205,6 +234,11 @@ export class BlockNoteEditor<
 > {
   private readonly _pmSchema: Schema;
 
+  /**
+   * extensions that are added to the editor, can be tiptap extensions or prosemirror plugins
+   */
+  public readonly extensions: Record<string, BlockNoteExtension> = {};
+
   /**
    * Boolean indicating whether the editor is in headless mode.
    * Headless mode means we can use features like importing / exporting blocks,
@@ -236,7 +270,7 @@ export class BlockNoteEditor<
   /**
    * The dictionary contains translations for the editor.
    */
-  public readonly dictionary: Dictionary;
+  public readonly dictionary: Dictionary & Record<string, any>;
 
   /**
    * The schema of the editor. The schema defines which Blocks, InlineContent, and Styles are available in the editor.
@@ -347,17 +381,7 @@ export class BlockNoteEditor<
     this.inlineContentImplementations = newOptions.schema.inlineContentSpecs;
     this.styleImplementations = newOptions.schema.styleSpecs;
 
-    this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
-    this.linkToolbar = new LinkToolbarProsemirrorPlugin(this);
-    this.sideMenu = new SideMenuProsemirrorPlugin(this);
-    this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
-    this.filePanel = new FilePanelProsemirrorPlugin(this as any);
-
-    if (checkDefaultBlockTypeInSchema("table", this)) {
-      this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
-    }
-
-    const extensions = getBlockNoteExtensions({
+    this.extensions = getBlockNoteExtensions({
       editor: this,
       domAttributes: newOptions.domAttributes || {},
       blockSpecs: this.schema.blockSpecs,
@@ -367,28 +391,28 @@ export class BlockNoteEditor<
       trailingBlock: newOptions.trailingBlock,
       disableExtensions: newOptions.disableExtensions,
       setIdAttribute: newOptions.setIdAttribute,
+      animations: newOptions.animations ?? true,
+      tableHandles: checkDefaultBlockTypeInSchema("table", this),
+      dropCursor: this.options.dropCursor ?? dropCursor,
+      placeholders: newOptions.placeholders,
     });
 
-    const blockNoteUIExtension = Extension.create({
-      name: "BlockNoteUIExtension",
-
-      addProseMirrorPlugins: () => {
-        return [
-          this.formattingToolbar.plugin,
-          this.linkToolbar.plugin,
-          this.sideMenu.plugin,
-          this.suggestionMenus.plugin,
-          ...(this.filePanel ? [this.filePanel.plugin] : []),
-          ...(this.tableHandles ? [this.tableHandles.plugin] : []),
-          PlaceholderPlugin(this, newOptions.placeholders),
-          NodeSelectionKeyboardPlugin(),
-          ...(this.options.animations ?? true
-            ? [PreviousBlockTypePlugin()]
-            : []),
-        ];
-      },
+    // add extensions from _tiptapOptions
+    (newOptions._tiptapOptions?.extensions || []).forEach((ext) => {
+      this.extensions[ext.name] = ext;
+    });
+
+    // add extensions from options
+    Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
+      this.extensions[key] = ext;
     });
-    extensions.push(blockNoteUIExtension);
+
+    this.formattingToolbar = this.extensions["formattingToolbar"] as any;
+    this.linkToolbar = this.extensions["linkToolbar"] as any;
+    this.sideMenu = this.extensions["sideMenu"] as any;
+    this.suggestionMenus = this.extensions["suggestionMenus"] as any;
+    this.filePanel = this.extensions["filePanel"] as any;
+    this.tableHandles = this.extensions["tableHandles"] as any;
 
     if (newOptions.uploadFile) {
       const uploadFile = newOptions.uploadFile;
@@ -439,14 +463,29 @@ export class BlockNoteEditor<
       );
     }
 
+    const tiptapExtensions = [
+      ...Object.entries(this.extensions).map(([key, ext]) => {
+        if (
+          ext instanceof Extension ||
+          ext instanceof TipTapNode ||
+          ext instanceof Mark
+        ) {
+          // tiptap extension
+          return ext;
+        }
+
+        // "blocknote" extensions (prosemirror plugins)
+        return Extension.create({
+          name: key,
+          addProseMirrorPlugins: () => [ext.plugin],
+        });
+      }),
+    ];
     const tiptapOptions: BlockNoteTipTapEditorOptions = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
       content: initialContent,
-      extensions: [
-        ...(newOptions._tiptapOptions?.extensions || []),
-        ...extensions,
-      ],
+      extensions: tiptapExtensions,
       editorProps: {
         ...newOptions._tiptapOptions?.editorProps,
         attributes: {
@@ -962,41 +1001,28 @@ export class BlockNoteEditor<
    * Checks if the block containing the text cursor can be nested.
    */
   public canNestBlock() {
-    const { blockContainer } = getBlockInfoFromSelection(
-      this._tiptapEditor.state
-    );
-
-    return (
-      this._tiptapEditor.state.doc.resolve(blockContainer.beforePos)
-        .nodeBefore !== null
-    );
+    return canNestBlock(this);
   }
 
   /**
    * Nests the block containing the text cursor into the block above it.
    */
   public nestBlock() {
-    this._tiptapEditor.commands.sinkListItem("blockContainer");
+    nestBlock(this);
   }
 
   /**
    * Checks if the block containing the text cursor is nested.
    */
   public canUnnestBlock() {
-    const { blockContainer } = getBlockInfoFromSelection(
-      this._tiptapEditor.state
-    );
-
-    return (
-      this._tiptapEditor.state.doc.resolve(blockContainer.beforePos).depth > 1
-    );
+    return canUnnestBlock(this);
   }
 
   /**
    * Lifts the block containing the text cursor out of its parent.
    */
   public unnestBlock() {
-    this._tiptapEditor.commands.liftListItem("blockContainer");
+    unnestBlock(this);
   }
 
   /**

package/src/editor/BlockNoteExtensions.ts

@@ -1,21 +1,30 @@
-import { Extension, Extensions, extensions } from "@tiptap/core";
+import { AnyExtension, Extension, extensions } from "@tiptap/core";
 
-import type { BlockNoteEditor } from "./BlockNoteEditor.js";
+import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
-import { Dropcursor } from "@tiptap/extension-dropcursor";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
+import { Plugin } from "prosemirror-state";
 import * as Y from "yjs";
 import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDropExtension.js";
 import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
+import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
+import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
+import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
+import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
+import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
+import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
+import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin.js";
+import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin.js";
+import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin.js";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension.js";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension.js";
 import { TrailingNode } from "../extensions/TrailingNode/TrailingNodeExtension.js";
@@ -31,14 +40,11 @@ import {
   StyleSpecs,
 } from "../schema/index.js";
 
-/**
- * Get all the Tiptap extensions BlockNote is configured with by default
- */
-export const getBlockNoteExtensions = <
+type ExtensionOptions<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
->(opts: {
+> = {
   editor: BlockNoteEditor<BSchema, I, S>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
   blockSpecs: BlockSpecs;
@@ -57,8 +63,77 @@ export const getBlockNoteExtensions = <
   };
   disableExtensions: string[] | undefined;
   setIdAttribute?: boolean;
-}) => {
-  const ret: Extensions = [
+  animations: boolean;
+  tableHandles: boolean;
+  dropCursor: (opts: any) => Plugin;
+  placeholders: Record<string | "default", string>;
+};
+
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
+export const getBlockNoteExtensions = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  opts: ExtensionOptions<BSchema, I, S>
+) => {
+  const ret: Record<string, BlockNoteExtension> = {};
+  const tiptapExtensions = getTipTapExtensions(opts);
+
+  for (const ext of tiptapExtensions) {
+    ret[ext.name] = ext;
+  }
+
+  // Note: this is pretty hardcoded and will break when user provides plugins with same keys.
+  // Define name on plugins instead and not make this a map?
+  ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin(
+    opts.editor
+  );
+  ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
+  ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
+  ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
+  ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
+  ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);
+
+  if (opts.animations ?? true) {
+    ret["animations"] = new PreviousBlockTypePlugin();
+  }
+
+  if (opts.tableHandles) {
+    ret["tableHandles"] = new TableHandlesProsemirrorPlugin(opts.editor as any);
+  }
+
+  ret["dropCursor"] = {
+    plugin: opts.dropCursor({
+      width: 5,
+      color: "#ddeeff",
+      editor: opts.editor,
+    }),
+  };
+
+  ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin();
+
+  const disableExtensions: string[] = opts.disableExtensions || [];
+  for (const ext of Object.keys(disableExtensions)) {
+    delete ret[ext];
+  }
+
+  return ret;
+};
+
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
+const getTipTapExtensions = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  opts: ExtensionOptions<BSchema, I, S>
+) => {
+  const tiptapExtensions: AnyExtension[] = [
     extensions.ClipboardTextSerializer,
     extensions.Commands,
     extensions.Editable,
@@ -70,7 +145,8 @@ export const getBlockNoteExtensions = <
 
     // DropCursor,
     UniqueID.configure({
-      types: ["blockContainer"],
+      // everything from bnBlock group (nodes that represent a BlockNote block should have an id)
+      types: ["blockContainer", "columnList", "column"],
       setIdAttribute: opts.setIdAttribute,
     }),
     HardBreak.extend({ priority: 10 }),
@@ -81,6 +157,7 @@ export const getBlockNoteExtensions = <
 
     // marks:
     Link.extend({
+      inclusive: false,
       addKeyboardShortcuts() {
         return {
           "Mod-k": () => {
@@ -155,7 +232,6 @@ export const getBlockNoteExtensions = <
     createPasteFromClipboardExtension(opts.editor),
     createDropFileExtension(opts.editor),
 
-    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
     ...(opts.trailingBlock === undefined || opts.trailingBlock
@@ -164,7 +240,7 @@ export const getBlockNoteExtensions = <
   ];
 
   if (opts.collaboration) {
-    ret.push(
+    tiptapExtensions.push(
       Collaboration.configure({
         fragment: opts.collaboration.fragment,
       })
@@ -189,7 +265,7 @@ export const getBlockNoteExtensions = <
         cursor.insertBefore(nonbreakingSpace2, null);
         return cursor;
       };
-      ret.push(
+      tiptapExtensions.push(
         CollaborationCursor.configure({
           user: opts.collaboration.user,
           render: opts.collaboration.renderCursor || defaultRender,
@@ -199,9 +275,8 @@ export const getBlockNoteExtensions = <
     }
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
-    ret.push(History);
+    tiptapExtensions.push(History);
   }
 
-  const disableExtensions: string[] = opts.disableExtensions || [];
-  return ret.filter((ex) => !disableExtensions.includes(ex.name));
+  return tiptapExtensions;
 };

package/src/editor/BlockNoteTipTapEditor.ts

@@ -24,7 +24,7 @@ export type BlockNoteTipTapEditorOptions = Partial<
 // @ts-ignore
 export class BlockNoteTipTapEditor extends TiptapEditor {
   private _state: EditorState;
-
+  private _creating = false;
   public static create = (
     options: BlockNoteTipTapEditorOptions,
     styleSchema: StyleSchema
@@ -151,8 +151,12 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
    * Replace the default `createView` method with a custom one - which we call on mount
    */
   private createViewAlternative() {
+    this._creating = true;
     // Without queueMicrotask, custom IC / styles will give a React FlushSync error
     queueMicrotask(() => {
+      if (!this._creating) {
+        return;
+      }
       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
         {
@@ -178,6 +182,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       this.commands.focus(this.options.autofocus);
       this.emit("create", { editor: this });
       this.isInitialized = true;
+      this._creating = false;
     });
   }
 
@@ -189,6 +194,8 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   public mount = (element?: HTMLElement | null) => {
     if (!element) {
       this.destroy();
+      // cancel pending microtask
+      this._creating = false;
     } else {
       this.options.element = element;
       // @ts-ignore

package/src/editor/defaultColors.ts

@@ -0,0 +1,77 @@
+export const COLORS_DEFAULT = {
+  gray: {
+    text: "#9b9a97",
+    background: "#ebeced",
+  },
+  brown: {
+    text: "#64473a",
+    background: "#e9e5e3",
+  },
+  red: {
+    text: "#e03e3e",
+    background: "#fbe4e4",
+  },
+  orange: {
+    text: "#d9730d",
+    background: "#f6e9d9",
+  },
+  yellow: {
+    text: "#dfab01",
+    background: "#fbf3db",
+  },
+  green: {
+    text: "#4d6461",
+    background: "#ddedea",
+  },
+  blue: {
+    text: "#0b6e99",
+    background: "#ddebf1",
+  },
+  purple: {
+    text: "#6940a5",
+    background: "#eae4f2",
+  },
+  pink: {
+    text: "#ad1a72",
+    background: "#f4dfeb",
+  },
+};
+
+export const COLORS_DARK_MODE_DEFAULT = {
+  gray: {
+    text: "#bebdb8",
+    background: "#9b9a97",
+  },
+  brown: {
+    text: "#8e6552",
+    background: "#64473a",
+  },
+  red: {
+    text: "#ec4040",
+    background: "#be3434",
+  },
+  orange: {
+    text: "#e3790d",
+    background: "#b7600a",
+  },
+  yellow: {
+    text: "#dfab01",
+    background: "#b58b00",
+  },
+  green: {
+    text: "#6b8b87",
+    background: "#4d6461",
+  },
+  blue: {
+    text: "#0e87bc",
+    background: "#0b6e99",
+  },
+  purple: {
+    text: "#8552d7",
+    background: "#6940a5",
+  },
+  pink: {
+    text: "#da208f",
+    background: "#ad1a72",
+  },
+};

package/src/editor/editor.css

@@ -151,3 +151,13 @@ Tippy popups that are appended to document.body directly
   /* if there's no explicit width set and the column is not being resized, set a default width */
   min-width: var(--default-cell-min-width) !important;
 }
+
+.prosemirror-dropcursor-block {
+  transition-property: top, bottom;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+}
+
+.prosemirror-dropcursor-vertical {
+  transition-property: left, right;
+}

package/src/editor/transformPasted.ts

@@ -32,7 +32,10 @@ export function wrapTableRows(f: Fragment, schema: Schema) {
         newItems[newItems.length - 1] = newTable;
       } else {
         // create new table to wrap tableRow with
-        const newTable = schema.nodes.table.create(undefined, f.child(i));
+        const newTable = schema.nodes.table.createChecked(
+          undefined,
+          f.child(i)
+        );
         newItems.push(newTable);
       }
     } else {
@@ -64,7 +67,7 @@ export function transformPasted(slice: Slice, view: EditorView) {
       // (if we remove this if-block, the nesting bug will be fixed, but lists won't be nested correctly)
       if (
         i + 1 < f.childCount &&
-        f.child(i + 1).type.spec.group === "blockGroup"
+        f.child(i + 1).type.name === "blockGroup" // TODO
       ) {
         const nestedChild = f
           .child(i + 1)
@@ -80,7 +83,7 @@ export function transformPasted(slice: Slice, view: EditorView) {
           f = removeChild(f, i + 1);
         }
       }
-      const container = view.state.schema.nodes.blockContainer.create(
+      const container = view.state.schema.nodes.blockContainer.createChecked(
         undefined,
         content
       );