@blocknote/core 0.23.5 → 0.24.0

package/src/api/clipboard/toClipboard/copyExtension.ts

@@ -129,8 +129,7 @@ export function selectedFragmentToHTML<
   }
 
   // Uses default ProseMirror clipboard serialization.
-  const clipboardHTML: string = (pmView as any).__serializeForClipboard(
-    view,
+  const clipboardHTML: string = view.serializeForClipboard(
     view.state.selection.content()
   ).dom.innerHTML;
 
@@ -147,6 +146,34 @@ export function selectedFragmentToHTML<
   return { clipboardHTML, externalHTML, markdown };
 }
 
+const checkIfSelectionInNonEditableBlock = () => {
+  // Let browser handle event if selection is empty (nothing
+  // happens).
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed) {
+    return true;
+  }
+
+  // Let browser handle event if it's within a non-editable
+  // "island". This means it's in selectable content within a
+  // non-editable block. We only need to check one node as it's
+  // not possible for the browser selection to start in an
+  // editable block and end in a non-editable one.
+  let node = selection.focusNode;
+  while (node) {
+    if (
+      node instanceof HTMLElement &&
+      node.getAttribute("contenteditable") === "false"
+    ) {
+      return true;
+    }
+
+    node = node.parentElement;
+  }
+
+  return false;
+};
+
 const copyToClipboard = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -187,11 +214,19 @@ export const createCopyToClipboardExtension = <
           props: {
             handleDOMEvents: {
               copy(view, event) {
+                if (checkIfSelectionInNonEditableBlock()) {
+                  return true;
+                }
+
                 copyToClipboard(editor, view, event);
                 // Prevent default PM handler to be called
                 return true;
               },
               cut(view, event) {
+                if (checkIfSelectionInNonEditableBlock()) {
+                  return true;
+                }
+
                 copyToClipboard(editor, view, event);
                 if (view.editable) {
                   view.dispatch(view.state.tr.deleteSelection());

package/src/api/nodeConversions/blockToNode.ts

@@ -279,9 +279,11 @@ export function blockToNode(
     }
   }
 
-  const nodeTypeCorrespondingToBlock = schema.nodes[block.type];
+  const isBlockContent =
+    !block.type || // can happen if block.type is not defined (this should create the default node)
+    schema.nodes[block.type].isInGroup("blockContent");
 
-  if (nodeTypeCorrespondingToBlock.isInGroup("blockContent")) {
+  if (isBlockContent) {
     // Blocks with a type that matches "blockContent" group always need to be wrapped in a blockContainer
 
     const contentNode = blockOrInlineContentToContentNode(
@@ -302,7 +304,7 @@ export function blockToNode(
       },
       groupNode ? [contentNode, groupNode] : contentNode
     );
-  } else if (nodeTypeCorrespondingToBlock.isInGroup("bnBlock")) {
+  } else if (schema.nodes[block.type].isInGroup("bnBlock")) {
     // this is a bnBlock node like Column or ColumnList that directly translates to a prosemirror node
     return schema.nodes[block.type].createChecked(
       {

package/src/api/nodeConversions/nodeToBlock.ts

@@ -104,11 +104,12 @@ export function contentNodeToInlineContent<
       return;
     }
 
-    if (
-      node.type.name !== "link" &&
-      node.type.name !== "text" &&
-      inlineContentSchema[node.type.name]
-    ) {
+    if (node.type.name !== "link" && node.type.name !== "text") {
+      if (!inlineContentSchema[node.type.name]) {
+        // eslint-disable-next-line no-console
+        console.warn("unrecognized inline content type", node.type.name);
+        return;
+      }
       if (currentContent) {
         content.push(currentContent);
         currentContent = undefined;
@@ -130,6 +131,11 @@ export function contentNodeToInlineContent<
       } else {
         const config = styleSchema[mark.type.name];
         if (!config) {
+          if (mark.type.spec.blocknoteIgnore) {
+            // at this point, we don't want to show certain marks (such as comments)
+            // in the BlockNote JSON output. These marks should be tagged with "blocknoteIgnore" in the spec
+            continue;
+          }
           throw new Error(`style ${mark.type.name} not found in styleSchema`);
         }
         if (config.propSchema === "boolean") {

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -5,6 +5,7 @@ import { TableRow } from "@tiptap/extension-table-row";
 import { Node as PMNode } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
 
+import { NodeView } from "prosemirror-view";
 import {
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
@@ -101,7 +102,7 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
       return new BlockNoteTableView(node, EMPTY_CELL_WIDTH, {
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
-      });
+      }) as NodeView;
     };
   },
 });

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/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/dragging.ts

@@ -1,6 +1,5 @@
 import { Node } from "prosemirror-model";
 import { NodeSelection, Selection } from "prosemirror-state";
-import * as pmView from "prosemirror-view";
 import { EditorView } from "prosemirror-view";
 
 import { createExternalHTMLExporter } from "../../api/exporters/html/externalHTMLExporter.js";
@@ -184,10 +183,8 @@ export function dragStart<
     const selectedSlice = view.state.selection.content();
     const schema = editor.pmSchema;
 
-    const clipboardHTML = (pmView as any).__serializeForClipboard(
-      view,
-      selectedSlice
-    ).dom.innerHTML;
+    const clipboardHTML =
+      view.serializeForClipboard(selectedSlice).dom.innerHTML;
 
     const externalHTMLExporter = createExternalHTMLExporter(schema, 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: {