@blocknote/core 0.23.6 → 0.24.1

package/src/editor/BlockNoteEditor.ts

@@ -130,7 +130,10 @@ export type BlockNoteEditorOptions<
   /**
    * @deprecated, provide placeholders via dictionary instead
    */
-  placeholders: Record<string | "default", string>;
+  placeholders: Record<
+    string | "default" | "emptyDocument",
+    string | undefined
+  >;
 
   /**
    * An object containing attributes that should be added to HTML elements of the editor.
@@ -486,7 +489,11 @@ export class BlockNoteEditor<
     this.resolveFileUrl = newOptions.resolveFileUrl;
     this.headless = newOptions._headless;
 
-    if (newOptions.collaboration && newOptions.initialContent) {
+    const collaborationEnabled =
+      "collaboration" in this.extensions ||
+      "liveblocksExtension" in this.extensions;
+
+    if (collaborationEnabled && newOptions.initialContent) {
       // eslint-disable-next-line no-console
       console.warn(
         "When using Collaboration, initialContent might cause conflicts, because changes should come from the collaboration provider"
@@ -495,7 +502,7 @@ export class BlockNoteEditor<
 
     const initialContent =
       newOptions.initialContent ||
-      (options.collaboration
+      (collaborationEnabled
         ? [
             {
               type: "paragraph",
@@ -589,8 +596,11 @@ export class BlockNoteEditor<
    *
    * @warning Not needed to call manually when using React, use BlockNoteView to take care of mounting
    */
-  public mount = (parentElement?: HTMLElement | null) => {
-    this._tiptapEditor.mount(parentElement);
+  public mount = (
+    parentElement?: HTMLElement | null,
+    contentComponent?: any
+  ) => {
+    this._tiptapEditor.mount(parentElement, contentComponent);
   };
 
   public get prosemirrorView() {
@@ -924,7 +934,12 @@ export class BlockNoteEditor<
     for (const mark of marks) {
       const config = this.schema.styleSchema[mark.type.name];
       if (!config) {
-        if (mark.type.name !== "link") {
+        if (
+          // Links are not considered styles in blocknote
+          mark.type.name !== "link" &&
+          // "blocknoteIgnore" tagged marks (such as comments) are also not considered BlockNote "styles"
+          !mark.type.spec.blocknoteIgnore
+        ) {
           // eslint-disable-next-line no-console
           console.warn("mark not found in styleschema", mark.type.name);
         }

package/src/editor/BlockNoteExtensions.ts

@@ -7,11 +7,11 @@ import { Text } from "@tiptap/extension-text";
 import { Plugin } from "prosemirror-state";
 import * as Y from "yjs";
 
-import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 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 { createCollaborationExtensions } from "../extensions/Collaboration/createCollaborationExtensions.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
@@ -40,7 +40,7 @@ import {
   StyleSchema,
   StyleSpecs,
 } from "../schema/index.js";
-import { createCollaborationExtensions } from "../extensions/Collaboration/createCollaborationExtensions.js";
+import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -69,7 +69,10 @@ type ExtensionOptions<
   animations: boolean;
   tableHandles: boolean;
   dropCursor: (opts: any) => Plugin;
-  placeholders: Record<string | "default", string>;
+  placeholders: Record<
+    string | "default" | "emptyDocument",
+    string | undefined
+  >;
   tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
   sideMenuDetection: "viewport" | "editor";
 };
@@ -171,7 +174,9 @@ const getTipTapExtensions = <
       protocols: VALID_LINK_PROTOCOLS,
     }),
     ...Object.values(opts.styleSpecs).map((styleSpec) => {
-      return styleSpec.implementation.mark;
+      return styleSpec.implementation.mark.configure({
+        editor: opts.editor as any,
+      });
     }),
 
     TextColorExtension,

package/src/editor/BlockNoteTipTapEditor.ts

@@ -21,10 +21,9 @@ export type BlockNoteTipTapEditorOptions = Partial<
  * 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;
-  private _creating = false;
+
   public static create = (
     options: BlockNoteTipTapEditorOptions,
     styleSchema: StyleSchema
@@ -150,40 +149,44 @@ 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;
+  private createViewAlternative(contentComponent?: any) {
+    (this as any).contentComponent = contentComponent;
+
+    const markViews: any = {};
+    this.extensionManager.extensions.forEach((extension) => {
+      if (extension.type === "mark" && extension.config.addMarkView) {
+        // Note: migrate to using `addMarkView` from tiptap as soon as this lands
+        // (currently tiptap doesn't support markviews)
+        markViews[extension.name] = extension.config.addMarkView;
       }
-      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.
-      const newState = this.state.reconfigure({
-        plugins: this.extensionManager.plugins,
-      });
+    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,
+        markViews,
+      }
+    );
+
+    // `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.view.updateState(newState);
 
-      this.createNodeViews();
+    this.createNodeViews();
 
-      // emit the created event, call here manually because we blocked the default call in the constructor
-      // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
-      this.commands.focus(this.options.autofocus);
-      this.emit("create", { editor: this });
-      this.isInitialized = true;
-      this._creating = false;
-    });
+    // emit the created event, call here manually because we blocked the default call in the constructor
+    // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
+    this.commands.focus(this.options.autofocus);
+    this.emit("create", { editor: this });
+    this.isInitialized = true;
   }
 
   /**
@@ -191,15 +194,12 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
    *
    * @param element DOM element to mount to, ur null / undefined to destroy
    */
-  public mount = (element?: HTMLElement | null) => {
+  public mount = (element?: HTMLElement | null, contentComponent?: any) => {
     if (!element) {
       this.destroy();
-      // cancel pending microtask
-      this._creating = false;
     } else {
       this.options.element = element;
-      // @ts-ignore
-      this.createViewAlternative();
+      this.createViewAlternative(contentComponent);
     }
   };
 }
@@ -210,5 +210,6 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   // 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
+  // (note: can probably be removed after tiptap upgrade fixed in 2.8.0)
   this.options.onPaste = this.options.onDrop = undefined;
 };

package/src/extensions/Collaboration/createCollaborationExtensions.ts

@@ -1,6 +1,6 @@
 import Collaboration from "@tiptap/extension-collaboration";
-import { Awareness } from "y-protocols/awareness";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+import { Awareness } from "y-protocols/awareness";
 import * as Y from "yjs";
 
 export const createCollaborationExtensions = (collaboration: {
@@ -93,7 +93,9 @@ export const createCollaborationExtensions = (collaboration: {
       );
 
       if (!clientState) {
-        throw new Error("Could not find client state for user");
+        throw new Error(
+          "Could not find client state for user, " + JSON.stringify(user)
+        );
       }
 
       const clientID = clientState[0];

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -1,5 +1,6 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { v4 } from "uuid";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
@@ -8,16 +9,23 @@ export class PlaceholderPlugin {
   public readonly plugin: Plugin;
   constructor(
     editor: BlockNoteEditor<any, any, any>,
-    placeholders: Record<string | "default", string>
+    placeholders: Record<
+      string | "default" | "emptyDocument",
+      string | undefined
+    >
   ) {
     this.plugin = new Plugin({
       key: PLUGIN_KEY,
-      view: () => {
+      view: (view) => {
+        const uniqueEditorSelector = `placeholder-selector-${v4()}`;
+        view.dom.classList.add(uniqueEditorSelector);
         const styleEl = document.createElement("style");
+
         const nonce = editor._tiptapEditor.options.injectNonce;
         if (nonce) {
           styleEl.setAttribute("nonce", nonce);
         }
+
         if (editor.prosemirrorView?.root instanceof ShadowRoot) {
           editor.prosemirrorView.root.append(styleEl);
         } else {
@@ -26,54 +34,50 @@ export class PlaceholderPlugin {
 
         const styleSheet = styleEl.sheet!;
 
-        const getBaseSelector = (additionalSelectors = "") =>
-          `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
+        const getSelector = (additionalSelectors = "") =>
+          `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
 
-        const getSelector = (
-          blockType: string | "default",
-          mustBeFocused = true
-        ) => {
-          const mustBeFocusedSelector = mustBeFocused
-            ? `[data-is-empty-and-focused]`
-            : ``;
+        try {
+          // FIXME: the names "default" and "emptyDocument" are hardcoded
+          const {
+            default: defaultPlaceholder,
+            emptyDocument: emptyPlaceholder,
+            ...rest
+          } = placeholders;
 
-          if (blockType === "default") {
-            return getBaseSelector(mustBeFocusedSelector);
-          }
-
-          const blockTypeSelector = `[data-content-type="${blockType}"]`;
-          return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
-        };
+          // add block specific placeholders
+          for (const [blockType, placeholder] of Object.entries(rest)) {
+            const blockTypeSelector = `[data-content-type="${blockType}"]`;
 
-        for (const [blockType, placeholder] of Object.entries(placeholders)) {
-          const mustBeFocused = blockType === "default";
-
-          try {
             styleSheet.insertRule(
-              `${getSelector(
-                blockType,
-                mustBeFocused
-              )} { content: ${JSON.stringify(placeholder)}; }`
-            );
-
-            // For some reason, the placeholders which show when the block is focused
-            // take priority over ones which show depending on block type, so we need
-            // to make sure the block specific ones are also used when the block is
-            // focused.
-            if (!mustBeFocused) {
-              styleSheet.insertRule(
-                `${getSelector(blockType, true)} { content: ${JSON.stringify(
-                  placeholder
-                )}; }`
-              );
-            }
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
-              e
+              `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
+                placeholder
+              )}; }`
             );
           }
+
+          const onlyBlockSelector = `[data-is-only-empty-block]`;
+          const mustBeFocusedSelector = `[data-is-empty-and-focused]`;
+
+          // placeholder for when there's only one empty block
+          styleSheet.insertRule(
+            `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
+              emptyPlaceholder
+            )}; }`
+          );
+
+          // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
+          styleSheet.insertRule(
+            `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
+              defaultPlaceholder
+            )}; }`
+          );
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
+            e
+          );
         }
 
         return {
@@ -87,7 +91,6 @@ export class PlaceholderPlugin {
         };
       },
       props: {
-        // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
         decorations: (state) => {
           const { doc, selection } = state;
 
@@ -104,20 +107,32 @@ export class PlaceholderPlugin {
             return;
           }
 
-          const $pos = selection.$anchor;
-          const node = $pos.parent;
+          const decs = [];
 
-          if (node.content.size > 0) {
-            return null;
+          // decoration for when there's only one empty block
+          // positions are hardcoded for now
+          if (state.doc.content.size === 6) {
+            decs.push(
+              Decoration.node(2, 4, {
+                "data-is-only-empty-block": "true",
+              })
+            );
           }
 
-          const before = $pos.before();
+          const $pos = selection.$anchor;
+          const node = $pos.parent;
+
+          if (node.content.size === 0) {
+            const before = $pos.before();
 
-          const dec = Decoration.node(before, before + node.nodeSize, {
-            "data-is-empty-and-focused": "true",
-          });
+            decs.push(
+              Decoration.node(before, before + node.nodeSize, {
+                "data-is-empty-and-focused": "true",
+              })
+            );
+          }
 
-          return DecorationSet.create(doc, [dec]);
+          return DecorationSet.create(doc, decs);
         },
       },
     });

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -283,47 +283,57 @@ export class SideMenuView<
 
     this.editor._tiptapEditor.commands.blur();
 
-    // When ProseMirror handles a drop event on the editor while
-    // `view.dragging` is set, it deletes the selected content. However, if
-    // a block from a different editor is being dropped, this causes some
-    // issues that the code below fixes:
-    if (!this.isDragOrigin && this.pmView.dom.contains(event.target as Node)) {
-      // 1. Because the editor selection is unrelated to the dragged content,
-      // we don't want PM to delete its content. Therefore, we collapse the
-      // selection.
-      this.pmView.dispatch(
-        this.pmView.state.tr.setSelection(
-          TextSelection.create(
-            this.pmView.state.tr.doc,
-            this.pmView.state.tr.selection.to
+    // Finds the BlockNote editor element that the drop event occurred in (if
+    // any).
+    const parentEditorElement =
+      event.target instanceof Node
+        ? (event.target instanceof HTMLElement
+            ? event.target
+            : event.target.parentElement
+          )?.closest(".bn-editor") || null
+        : null;
+
+    // Drop event occurred within an editor.
+    if (parentEditorElement) {
+      // When ProseMirror handles a drop event on the editor while
+      // `view.dragging` is set, it deletes the selected content. However, if
+      // a block from a different editor is being dropped, this causes some
+      // issues that the code below fixes:
+      if (!this.isDragOrigin && this.pmView.dom === parentEditorElement) {
+        // 1. Because the editor selection is unrelated to the dragged content,
+        // we don't want PM to delete its content. Therefore, we collapse the
+        // selection.
+        this.pmView.dispatch(
+          this.pmView.state.tr.setSelection(
+            TextSelection.create(
+              this.pmView.state.tr.doc,
+              this.pmView.state.tr.selection.to
+            )
           )
-        )
-      );
-    } else if (
-      this.isDragOrigin &&
-      !this.pmView.dom.contains(event.target as Node)
-    ) {
-      // 2. Because the editor from which the block originates doesn't get a
-      // drop event on it, PM doesn't delete its selected content. Therefore, we
-      // need to do so manually.
-      //
-      // Note: Deleting the selected content from the editor from which the
-      // block originates, may change its height. This can cause the position of
-      // the editor in which the block is being dropping to shift, before it
-      // can handle the drop event. That in turn can cause the drop to happen
-      // somewhere other than the user intended. To get around this, we delay
-      // deleting the selected content until all editors have had the chance to
-      // handle the event.
-      setTimeout(
-        () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()),
-        0
-      );
+        );
+      } else if (this.isDragOrigin && this.pmView.dom !== parentEditorElement) {
+        // 2. Because the editor from which the block originates doesn't get a
+        // drop event on it, PM doesn't delete its selected content. Therefore, we
+        // need to do so manually.
+        //
+        // Note: Deleting the selected content from the editor from which the
+        // block originates, may change its height. This can cause the position of
+        // the editor in which the block is being dropping to shift, before it
+        // can handle the drop event. That in turn can cause the drop to happen
+        // somewhere other than the user intended. To get around this, we delay
+        // deleting the selected content until all editors have had the chance to
+        // handle the event.
+        setTimeout(
+          () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()),
+          0
+        );
+      }
+      // 3. PM only clears `view.dragging` on the editor that the block was
+      // dropped, so we manually have to clear it on all the others. However,
+      // PM also needs to read `view.dragging` while handling the event, so we
+      // use a `setTimeout` to ensure it's only cleared after that.
+      setTimeout(() => (this.pmView.dragging = null), 0);
     }
-    // 3. PM only clears `view.dragging` on the editor that the block was
-    // dropped, so we manually have to clear it on all the others. However,
-    // PM also needs to read `view.dragging` while handling the event, so we
-    // use a `setTimeout` to ensure it's only cleared after that.
-    setTimeout(() => (this.pmView.dragging = null), 0);
 
     if (
       this.sideMenuDetection === "editor" ||

package/src/i18n/locales/ar.ts

@@ -261,6 +261,9 @@ export const ar: Dictionary = {
     align_justify: {
       tooltip: "ضبط النص",
     },
+    comment: {
+      tooltip: "إضافة ملاحظة",
+    },
   },
   file_panel: {
     upload: {

package/src/i18n/locales/de.ts

@@ -273,6 +273,9 @@ export const de = {
     align_justify: {
       tooltip: "Text Blocksatz",
     },
+    comment: {
+      tooltip: "Kommentar hinzufügen",
+    },
   },
   file_panel: {
     upload: {

package/src/i18n/locales/en.ts

@@ -129,7 +129,7 @@ export const en = {
     bulletListItem: "List",
     numberedListItem: "List",
     checkListItem: "List",
-  },
+  } as Record<"default" | "emptyDocument" | string, string | undefined>,
   file_blocks: {
     image: {
       add_button_text: "Add image",
@@ -275,6 +275,9 @@ export const en = {
     align_justify: {
       tooltip: "Justify text",
     },
+    comment: {
+      tooltip: "Add comment",
+    },
   },
   file_panel: {
     upload: {

package/src/i18n/locales/es.ts

@@ -272,6 +272,9 @@ export const es = {
     align_justify: {
       tooltip: "Justificar texto",
     },
+    comment: {
+      tooltip: "Agregar comentario",
+    },
   },
   file_panel: {
     upload: {

package/src/i18n/locales/fr.ts

@@ -300,6 +300,9 @@ export const fr: Dictionary = {
     align_justify: {
       tooltip: "Justifier le texte",
     },
+    comment: {
+      tooltip: "Ajouter un commentaire",
+    },
   },
   file_panel: {
     upload: {

package/src/i18n/locales/hr.ts

@@ -281,6 +281,9 @@ export const hr = {
     align_justify: {
       tooltip: "Poravnaj tekst obostrano",
     },
+    comment: {
+      tooltip: "Dodaj komentar",
+    },
   },
   file_panel: {
     upload: {

package/src/i18n/locales/is.ts

@@ -268,6 +268,9 @@ export const is: Dictionary = {
     align_justify: {
       tooltip: "Jafna texta",
     },
+    comment: {
+      tooltip: "Bæta við athugun",
+    },
   },
   file_panel: {
     upload: {