@blocknote/core 0.21.0 → 0.23.0

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",

package/src/i18n/locales/fr.ts

@@ -10,13 +10,14 @@ export const fr: Dictionary = {
     },
     heading_2: {
       title: "Titre 2",
-      subtext: "Utilisé pour les sections clés",
+      subtext: "Titre de deuxième niveau Utilisé pour les sections clés",
       aliases: ["h2", "titre2", "sous-titre"],
       group: "Titres",
     },
     heading_3: {
       title: "Titre 3",
-      subtext: "Utilisé pour les sous-sections et les titres de groupe",
+      subtext:
+        "Titre de troisième niveau utilisé pour les sous-sections et les titres de groupe",
       aliases: ["h3", "titre3", "sous-titre"],
       group: "Titres",
     },
@@ -27,13 +28,21 @@ export const fr: Dictionary = {
       group: "Blocs de base",
     },
     bullet_list: {
-      title: "Liste à Puces",
-      subtext: "Utilisé pour afficher une liste non ordonnée",
-      aliases: ["ul", "li", "liste", "listeàpuces", "liste à puces"],
+      title: "Liste à puces",
+      subtext: "Utilisé pour afficher une liste à puce non numérotée",
+      aliases: [
+        "ul",
+        "li",
+        "liste",
+        "listeàpuces",
+        "liste à puces",
+        "bullet points",
+        "bulletpoints",
+      ],
       group: "Blocs de base",
     },
     check_list: {
-      title: "Liste de vérification",
+      title: "Liste de tâches",
       subtext: "Utilisé pour afficher une liste avec des cases à cocher",
       aliases: [
         "ul",
@@ -42,13 +51,18 @@ export const fr: Dictionary = {
         "liste de vérification",
         "liste cochée",
         "case à cocher",
+        "checklist",
+        "checkbox",
+        "check box",
+        "to do",
+        "todo",
       ],
       group: "Blocs de base",
     },
     paragraph: {
       title: "Paragraphe",
       subtext: "Utilisé pour le corps de votre document",
-      aliases: ["p", "paragraphe"],
+      aliases: ["p", "paragraphe", "texte"],
       group: "Blocs de base",
     },
     code_block: {
@@ -57,10 +71,16 @@ export const fr: Dictionary = {
       aliases: ["code", "pre"],
       group: "Blocs de base",
     },
+    page_break: {
+      title: "Saut de page",
+      subtext: "Séparateur de page",
+      aliases: ["page", "break", "separator", "saut", "séparateur"],
+      group: "Blocs de base",
+    },
     table: {
       title: "Tableau",
       subtext: "Utilisé pour les tableaux",
-      aliases: ["tableau"],
+      aliases: ["tableau", "grille"],
       group: "Avancé",
     },
     image: {
@@ -69,7 +89,9 @@ export const fr: Dictionary = {
       aliases: [
         "image",
         "uploadImage",
-        "télécharger",
+        "télécharger image",
+        "téléverser image",
+        "uploader image",
         "img",
         "photo",
         "média",
@@ -82,8 +104,8 @@ export const fr: Dictionary = {
       subtext: "Insérer une vidéo",
       aliases: [
         "vidéo",
-        "téléchargerVidéo",
-        "téléverser",
+        "télécharger vidéo",
+        "téléverser vidéo",
         "mp4",
         "film",
         "média",
@@ -96,8 +118,8 @@ export const fr: Dictionary = {
       subtext: "Insérer un audio",
       aliases: [
         "audio",
-        "téléchargerAudio",
-        "téléverser",
+        "télécharger audio",
+        "téléverser audio",
         "mp3",
         "son",
         "média",
@@ -108,18 +130,26 @@ export const fr: Dictionary = {
     file: {
       title: "Fichier",
       subtext: "Insérer un fichier",
-      aliases: ["fichier", "téléverser", "intégrer", "média", "url"],
+      aliases: [
+        "fichier",
+        "téléverser fichier",
+        "intégrer fichier",
+        "insérer fichier",
+        "média",
+        "url",
+      ],
       group: "Média",
     },
     emoji: {
       title: "Emoji",
       subtext: "Utilisé pour insérer un emoji",
-      aliases: ["emoji", "émoticône", "émotion", "visage"],
+      aliases: ["emoji", "émoticône", "émotion", "visage", "smiley"],
       group: "Autres",
     },
   },
   placeholders: {
-    default: "Entrez du texte ou tapez '/' pour les commandes",
+    default:
+      "Entrez du texte ou tapez '/' pour faire apparaître les options de mise en page",
     heading: "Titre",
     bulletListItem: "Liste",
     numberedListItem: "Liste",
@@ -280,7 +310,7 @@ export const fr: Dictionary = {
         audio: "Télécharger un fichier audio",
         file: "Télécharger un fichier",
       },
-      upload_error: "Erreur : Échec du téléchargement",
+      upload_error: "Erreur : échec du téléchargement",
     },
     embed: {
       title: "Intégrer",