@blocknote/core 0.22.0 → 0.23.0

package/src/blocks/PageBreakBlockContent/schema.ts

@@ -0,0 +1,40 @@
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { PageBreak } from "./PageBreakBlockContent.js";
+
+export const pageBreakSchema = BlockNoteSchema.create({
+  blockSpecs: {
+    pageBreak: PageBreak,
+  },
+});
+
+/**
+ * Adds page break support to the given schema.
+ */
+export const withPageBreak = <
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  schema: BlockNoteSchema<B, I, S>
+) => {
+  return BlockNoteSchema.create({
+    blockSpecs: {
+      ...schema.blockSpecs,
+      ...pageBreakSchema.blockSpecs,
+    },
+    inlineContentSpecs: schema.inlineContentSpecs,
+    styleSpecs: schema.styleSpecs,
+  }) as any as BlockNoteSchema<
+    // typescript needs some help here
+    B & {
+      pageBreak: typeof PageBreak.config;
+    },
+    I,
+    S
+  >;
+};

package/src/editor/Block.css

@@ -308,6 +308,20 @@ NESTED BLOCKS
   transition-delay: 0.1s;
 }
 
+/* PAGE BREAK */
+.bn-block-content[data-content-type="pageBreak"] > div {
+  width: 100%;
+  height: 0;
+  border-top: dotted rgb(125, 121, 122) 2px;
+  margin-block: 11px;
+}
+
+@media print {
+  .bn-block-content[data-content-type="pageBreak"] > div {
+    page-break-after: always;
+  }
+}
+
 /* FILES */
 
 /* Element that wraps content for all file blocks */
@@ -336,7 +350,7 @@ NESTED BLOCKS
 
 .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
 [data-file-block] .bn-file-name-with-icon:hover,
-.ProseMirror-selectednode .bn-file-name-with-icon{
+.ProseMirror-selectednode .bn-file-name-with-icon {
   background-color: rgb(225, 225, 225);
 }
 

package/src/editor/BlockNoteEditor.ts

@@ -196,6 +196,13 @@ export type BlockNoteEditorOptions<
      * Optional function to customize how cursors of users are rendered
      */
     renderCursor?: (user: any) => HTMLElement;
+    /**
+     * Optional flag to set when the user label should be shown with the default
+     * collaboration cursor. Setting to "always" will always show the label,
+     * while "activity" will only show the label when the user moves the cursor
+     * or types. Defaults to "activity".
+     */
+    showCursorLabels?: "always" | "activity";
   };
 
   /**
@@ -245,6 +252,15 @@ export type BlockNoteEditorOptions<
    @default "prefer-navigate-ui"
    */
   tabBehavior: "prefer-navigate-ui" | "prefer-indent";
+
+  /**
+   * The detection mode for showing the side menu - "viewport" always shows the
+   * side menu for the block next to the mouse cursor, while "editor" only shows
+   * it when hovering the editor or the side menu itself.
+   *
+   * @default "viewport"
+   */
+  sideMenuDetection: "viewport" | "editor";
 };
 
 const blockNoteTipTapOptions = {
@@ -423,6 +439,7 @@ export class BlockNoteEditor<
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
       tabBehavior: newOptions.tabBehavior,
+      sideMenuDetection: newOptions.sideMenuDetection || "viewport",
     });
 
     // add extensions from _tiptapOptions

package/src/editor/BlockNoteExtensions.ts

@@ -1,4 +1,5 @@
 import { AnyExtension, Extension, extensions } from "@tiptap/core";
+import { Awareness } from "y-protocols/awareness";
 
 import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 
@@ -64,6 +65,7 @@ type ExtensionOptions<
     };
     provider: any;
     renderCursor?: (user: any) => HTMLElement;
+    showCursorLabels?: "always" | "activity";
   };
   disableExtensions: string[] | undefined;
   setIdAttribute?: boolean;
@@ -72,6 +74,7 @@ type ExtensionOptions<
   dropCursor: (opts: any) => Plugin;
   placeholders: Record<string | "default", string>;
   tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
+  sideMenuDetection: "viewport" | "editor";
 };
 
 /**
@@ -97,7 +100,10 @@ export const getBlockNoteExtensions = <
     opts.editor
   );
   ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
-  ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
+  ret["sideMenu"] = new SideMenuProsemirrorPlugin(
+    opts.editor,
+    opts.sideMenuDetection
+  );
   ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
   ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
   ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);
@@ -246,25 +252,114 @@ const getTipTapExtensions = <
         fragment: opts.collaboration.fragment,
       })
     );
-    if (opts.collaboration.provider?.awareness) {
-      const defaultRender = (user: { color: string; name: string }) => {
-        const cursor = document.createElement("span");
 
-        cursor.classList.add("collaboration-cursor__caret");
-        cursor.setAttribute("style", `border-color: ${user.color}`);
+    const awareness = opts.collaboration?.provider.awareness as Awareness;
+
+    if (awareness) {
+      const cursors = new Map<
+        number,
+        { element: HTMLElement; hideTimeout: NodeJS.Timeout | undefined }
+      >();
+
+      if (opts.collaboration.showCursorLabels !== "always") {
+        awareness.on(
+          "change",
+          ({
+            updated,
+          }: {
+            added: Array<number>;
+            updated: Array<number>;
+            removed: Array<number>;
+          }) => {
+            for (const clientID of updated) {
+              const cursor = cursors.get(clientID);
+
+              if (cursor) {
+                cursor.element.setAttribute("data-active", "");
+
+                if (cursor.hideTimeout) {
+                  clearTimeout(cursor.hideTimeout);
+                }
+
+                cursors.set(clientID, {
+                  element: cursor.element,
+                  hideTimeout: setTimeout(() => {
+                    cursor.element.removeAttribute("data-active");
+                  }, 2000),
+                });
+              }
+            }
+          }
+        );
+      }
+
+      const createCursor = (clientID: number, name: string, color: string) => {
+        const cursorElement = document.createElement("span");
+
+        cursorElement.classList.add("collaboration-cursor__caret");
+        cursorElement.setAttribute("style", `border-color: ${color}`);
+        if (opts.collaboration?.showCursorLabels === "always") {
+          cursorElement.setAttribute("data-active", "");
+        }
+
+        const labelElement = document.createElement("span");
+
+        labelElement.classList.add("collaboration-cursor__label");
+        labelElement.setAttribute("style", `background-color: ${color}`);
+        labelElement.insertBefore(document.createTextNode(name), null);
+
+        cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+        cursorElement.insertBefore(labelElement, null);
+        cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+
+        cursors.set(clientID, {
+          element: cursorElement,
+          hideTimeout: undefined,
+        });
+
+        if (opts.collaboration?.showCursorLabels !== "always") {
+          cursorElement.addEventListener("mouseenter", () => {
+            const cursor = cursors.get(clientID)!;
+            cursor.element.setAttribute("data-active", "");
+
+            if (cursor.hideTimeout) {
+              clearTimeout(cursor.hideTimeout);
+              cursors.set(clientID, {
+                element: cursor.element,
+                hideTimeout: undefined,
+              });
+            }
+          });
+
+          cursorElement.addEventListener("mouseleave", () => {
+            const cursor = cursors.get(clientID)!;
+
+            cursors.set(clientID, {
+              element: cursor.element,
+              hideTimeout: setTimeout(() => {
+                cursor.element.removeAttribute("data-active");
+              }, 2000),
+            });
+          });
+        }
+
+        return cursors.get(clientID)!;
+      };
+
+      const defaultRender = (user: { color: string; name: string }) => {
+        const clientState = [...awareness.getStates().entries()].find(
+          (state) => state[1].user === user
+        );
 
-        const label = document.createElement("span");
+        if (!clientState) {
+          throw new Error("Could not find client state for user");
+        }
 
-        label.classList.add("collaboration-cursor__label");
-        label.setAttribute("style", `background-color: ${user.color}`);
-        label.insertBefore(document.createTextNode(user.name), null);
+        const clientID = clientState[0];
 
-        const nonbreakingSpace1 = document.createTextNode("\u2060");
-        const nonbreakingSpace2 = document.createTextNode("\u2060");
-        cursor.insertBefore(nonbreakingSpace1, null);
-        cursor.insertBefore(label, null);
-        cursor.insertBefore(nonbreakingSpace2, null);
-        return cursor;
+        return (
+          cursors.get(clientID) || createCursor(clientID, user.name, user.color)
+        ).element;
       };
       tiptapExtensions.push(
         CollaborationCursor.configure({

package/src/editor/editor.css

@@ -83,7 +83,6 @@ Tippy popups that are appended to document.body directly
   border-right: 1px solid #0d0d0d;
   margin-left: -1px;
   margin-right: -1px;
-  pointer-events: none;
   position: relative;
   word-break: normal;
   white-space: nowrap !important;
@@ -92,17 +91,33 @@ Tippy popups that are appended to document.body directly
 /* Render the username above the caret */
 .collaboration-cursor__label {
   border-radius: 3px 3px 3px 0;
-  color: #0d0d0d;
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
-  left: -1px;
   line-height: normal;
-  padding: 0.1rem 0.3rem;
+  left: -1px;
+  overflow: hidden;
   position: absolute;
-  top: -1.4em;
-  user-select: none;
   white-space: nowrap;
+
+  color: transparent;
+  max-height: 4px;
+  max-width: 4px;
+  padding: 0;
+  top: 0;
+  
+  transition: all 0.2s;
+
+}
+
+.collaboration-cursor__caret[data-active] > .collaboration-cursor__label {
+  color: #0d0d0d;
+  max-height: 1.1rem;
+  max-width: 20rem;
+  padding: 0.1rem 0.3rem;
+  top: -14px;
+
+  transition: all 0.2s;
 }
 
 /* .tableWrapper {
@@ -134,7 +149,7 @@ Tippy popups that are appended to document.body directly
 .bn-editor [data-content-type="table"] th,
 .bn-editor [data-content-type="table"] td {
   border: 1px solid #ddd;
-  padding: 3px 5px;
+  padding: 5px 10px;
 }
 
 .bn-editor [data-content-type="table"] th {

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -1,6 +1,6 @@
-import { PluginView } from "@tiptap/pm/state";
-import { EditorState, Plugin, PluginKey } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
+import { DOMParser, Slice } from "@tiptap/pm/model";
+import { EditorState, Plugin, PluginKey, PluginView } from "@tiptap/pm/state";
+import { EditorView } from "@tiptap/pm/view";
 
 import { Block } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
@@ -14,6 +14,7 @@ import { EventEmitter } from "../../util/EventEmitter.js";
 import { initializeESMDependencies } from "../../util/esmDependencies.js";
 import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 import { dragStart, unsetDragImage } from "./dragging.js";
+
 export type SideMenuState<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -28,9 +29,14 @@ const PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP = 0.1;
 function getBlockFromCoords(
   view: EditorView,
   coords: { left: number; top: number },
+  sideMenuDetection: "viewport" | "editor",
   adjustForColumns = true
 ) {
-  const elements = view.root.elementsFromPoint(coords.left, coords.top);
+  const elements = view.root.elementsFromPoint(
+    // bit hacky - offset x position to right to account for the width of sidemenu itself
+    coords.left + (sideMenuDetection === "editor" ? 50 : 0),
+    coords.top
+  );
 
   for (const element of elements) {
     if (!view.dom.contains(element)) {
@@ -46,6 +52,7 @@ function getBlockFromCoords(
             left: coords.left + 50, // bit hacky, but if we're inside a column, offset x position to right to account for the width of sidemenu itself
             top: coords.top,
           },
+          sideMenuDetection,
           false
         );
       }
@@ -60,7 +67,8 @@ function getBlockFromMousePos(
     x: number;
     y: number;
   },
-  view: EditorView
+  view: EditorView,
+  sideMenuDetection: "viewport" | "editor"
 ): { node: HTMLElement; id: string } | undefined {
   // Editor itself may have padding or other styling which affects
   // size/position, so we get the boundingRect of the first child (i.e. the
@@ -76,7 +84,7 @@ function getBlockFromMousePos(
 
   // this.horizontalPosAnchor = editorBoundingBox.x;
 
-  // Gets block at mouse cursor's vertical position.
+  // Gets block at mouse cursor's position.
   const coords = {
     left: mousePos.x,
     top: mousePos.y,
@@ -85,15 +93,18 @@ function getBlockFromMousePos(
   const mouseLeftOfEditor = coords.left < editorBoundingBox.left;
   const mouseRightOfEditor = coords.left > editorBoundingBox.right;
 
-  if (mouseLeftOfEditor) {
-    coords.left = editorBoundingBox.left + 10;
-  }
+  // Clamps the x position to the editor's bounding box.
+  if (sideMenuDetection === "viewport") {
+    if (mouseLeftOfEditor) {
+      coords.left = editorBoundingBox.left + 10;
+    }
 
-  if (mouseRightOfEditor) {
-    coords.left = editorBoundingBox.right - 10;
+    if (mouseRightOfEditor) {
+      coords.left = editorBoundingBox.right - 10;
+    }
   }
 
-  let block = getBlockFromCoords(view, coords);
+  let block = getBlockFromCoords(view, coords, sideMenuDetection);
 
   if (!mouseRightOfEditor && block) {
     // note: this case is not necessary when we're on the right side of the editor
@@ -101,14 +112,14 @@ function getBlockFromMousePos(
     /* Now, because blocks can be nested
     | BlockA        |
     x | BlockB     y|
-    
+
     hovering over position x (the "margin of block B") will return block A instead of block B.
     to fix this, we get the block from the right side of block A (position y, which will fall in BlockB correctly)
     */
 
     const rect = block.node.getBoundingClientRect();
     coords.left = rect.right - 10;
-    block = getBlockFromCoords(view, coords, false);
+    block = getBlockFromCoords(view, coords, "viewport", false);
   }
 
   return block;
@@ -132,8 +143,11 @@ export class SideMenuView<
 
   public menuFrozen = false;
 
+  public isDragOrigin = false;
+
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
+    private readonly sideMenuDetection: "viewport" | "editor",
     private readonly pmView: EditorView,
     emitUpdate: (state: SideMenuState<BSchema, I, S>) => void
   ) {
@@ -146,14 +160,18 @@ export class SideMenuView<
     };
 
     this.pmView.root.addEventListener(
-      "drop",
-      this.onDrop as EventListener,
-      true
+      "dragstart",
+      this.onDragStart as EventListener
     );
     this.pmView.root.addEventListener(
       "dragover",
       this.onDragOver as EventListener
     );
+    this.pmView.root.addEventListener(
+      "drop",
+      this.onDrop as EventListener,
+      true
+    );
     initializeESMDependencies();
 
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
@@ -181,7 +199,11 @@ export class SideMenuView<
       return;
     }
 
-    const block = getBlockFromMousePos(this.mousePos, this.pmView);
+    const block = getBlockFromMousePos(
+      this.mousePos,
+      this.pmView,
+      this.sideMenuDetection
+    );
 
     // Closes the menu if the mouse cursor is beyond the editor vertically.
     if (!block || !this.editor.isEditable) {
@@ -249,7 +271,16 @@ export class SideMenuView<
   onDrop = (event: DragEvent) => {
     this.editor._tiptapEditor.commands.blur();
 
+    // ProseMirror doesn't remove the dragged content if it's dropped outside
+    // the editor (e.g. to other editors), so we need to do it manually. Since
+    // the dragged content is the same as the selected content, we can just
+    // delete the selection.
+    if (this.isDragOrigin && !this.pmView.dom.contains(event.target as Node)) {
+      this.pmView.dispatch(this.pmView.state.tr.deleteSelection());
+    }
+
     if (
+      this.sideMenuDetection === "editor" ||
       (event as any).synthetic ||
       !event.dataTransfer?.types.includes("blocknote/html")
     ) {
@@ -268,6 +299,46 @@ export class SideMenuView<
     }
   };
 
+  /**
+   * If a block is being dragged, ProseMirror usually gets the context of what's
+   * being dragged from `view.dragging`, which is automatically set when a
+   * `dragstart` event fires in the editor. However, if the user tries to drag
+   * and drop blocks between multiple editors, only the one in which the drag
+   * began has that context, so we need to set it on the others manually. This
+   * ensures that PM always drops the blocks in between other blocks, and not
+   * inside them.
+   *
+   * After the `dragstart` event fires on the drag handle, it sets
+   * `blocknote/html` data on the clipboard. This handler fires right after,
+   * parsing the `blocknote/html` data into nodes and setting them on
+   * `view.dragging`.
+   *
+   * Note: Setting `view.dragging` on `dragover` would be better as the user
+   * could then drag between editors in different windows, but you can only
+   * access `dataTransfer` contents on `dragstart` and `drop` events.
+   */
+  onDragStart = (event: DragEvent) => {
+    if (!this.pmView.dragging) {
+      const html = event.dataTransfer?.getData("blocknote/html");
+      if (!html) {
+        return;
+      }
+
+      const element = document.createElement("div");
+      element.innerHTML = html;
+
+      const parser = DOMParser.fromSchema(this.pmView.state.schema);
+      const node = parser.parse(element, {
+        topNode: this.pmView.state.schema.nodes["blockGroup"].create(),
+      });
+
+      this.pmView.dragging = {
+        slice: new Slice(node.content, 0, 0),
+        move: true,
+      };
+    }
+  };
+
   /**
    * If the event is outside the editor contents,
    * we dispatch a fake event, so that we can still drop the content
@@ -275,11 +346,13 @@ export class SideMenuView<
    */
   onDragOver = (event: DragEvent) => {
     if (
+      this.sideMenuDetection === "editor" ||
       (event as any).synthetic ||
       !event.dataTransfer?.types.includes("blocknote/html")
     ) {
       return;
     }
+
     const pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
@@ -424,11 +497,14 @@ export class SideMenuView<
       this.onMouseMove as EventListener,
       true
     );
+    this.pmView.root.removeEventListener(
+      "dragstart",
+      this.onDragStart as EventListener
+    );
     this.pmView.root.removeEventListener(
       "dragover",
       this.onDragOver as EventListener
     );
-
     this.pmView.root.removeEventListener(
       "drop",
       this.onDrop as EventListener,
@@ -452,14 +528,22 @@ export class SideMenuProsemirrorPlugin<
   public view: SideMenuView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(private readonly editor: BlockNoteEditor<BSchema, I, S>) {
+  constructor(
+    private readonly editor: BlockNoteEditor<BSchema, I, S>,
+    sideMenuDetection: "viewport" | "editor"
+  ) {
     super();
     this.plugin = new Plugin({
       key: sideMenuPluginKey,
       view: (editorView) => {
-        this.view = new SideMenuView(editor, editorView, (state) => {
-          this.emit("update", state);
-        });
+        this.view = new SideMenuView(
+          editor,
+          sideMenuDetection,
+          editorView,
+          (state) => {
+            this.emit("update", state);
+          }
+        );
         return this.view;
       },
     });
@@ -479,6 +563,10 @@ export class SideMenuProsemirrorPlugin<
     },
     block: Block<BSchema, I, S>
   ) => {
+    if (this.view) {
+      this.view.isDragOrigin = true;
+    }
+
     dragStart(event, block, this.editor);
   };
 
@@ -489,6 +577,10 @@ export class SideMenuProsemirrorPlugin<
     if (this.editor.prosemirrorView) {
       unsetDragImage(this.editor.prosemirrorView.root);
     }
+
+    if (this.view) {
+      this.view.isDragOrigin = false;
+    }
   };
   /**
    * Freezes the side menu. When frozen, the side menu will stay

package/src/extensions/SideMenu/dragging.ts

@@ -202,6 +202,5 @@ export function dragStart<
     e.dataTransfer.setData("text/plain", plainText);
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setDragImage(dragImageElement!, 0, 0);
-    view.dragging = { slice: selectedSlice, move: true };
   }
 }

package/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts

@@ -1,7 +1,7 @@
 import type { Dictionary } from "../../i18n/dictionary.js";
 
 export type DefaultSuggestionItem = {
-  key: keyof Dictionary["slash_menu"];
+  key: keyof Omit<Dictionary["slash_menu"], "page_break">;
   title: string;
   onItemClick: () => void;
   subtext?: string;

package/src/i18n/locales/ar.ts

@@ -58,6 +58,12 @@ export const ar: Dictionary = {
       aliases: ["كود", "مسبق"],
       group: "الكتل الأساسية",
     },
+    page_break: {
+      title: "فاصل الصفحة",
+      subtext: "فاصل الصفحة",
+      aliases: ["page", "break", "separator", "فاصل", "الصفحة"],
+      group: "الكتل الأساسية",
+    },
     table: {
       title: "جدول",
       subtext: "يستخدم للجداول",

package/src/i18n/locales/de.ts

@@ -56,6 +56,12 @@ export const de = {
       aliases: ["code", "pre"],
       group: "Grundlegende blöcke",
     },
+    page_break: {
+      title: "Seitenumbruch",
+      subtext: "Seitentrenner",
+      aliases: ["page", "break", "separator", "seitenumbruch", "trenner"],
+      group: "Grundlegende Blöcke",
+    },
     table: {
       title: "Tabelle",
       subtext: "Tabelle mit editierbaren Zellen",

package/src/i18n/locales/en.ts

@@ -56,6 +56,12 @@ export const en = {
       aliases: ["code", "pre"],
       group: "Basic blocks",
     },
+    page_break: {
+      title: "Page Break",
+      subtext: "Page separator",
+      aliases: ["page", "break", "separator"],
+      group: "Basic blocks",
+    },
     table: {
       title: "Table",
       subtext: "Table with editable cells",

package/src/i18n/locales/es.ts

@@ -55,6 +55,12 @@ export const es = {
       aliases: ["code", "pre"],
       group: "Bloques básicos",
     },
+    page_break: {
+      title: "Salto de página",
+      subtext: "Separador de página",
+      aliases: ["page", "break", "separator", "salto", "separador"],
+      group: "Bloques básicos",
+    },
     table: {
       title: "Tabla",
       subtext: "Tabla con celdas editables",