@blocknote/core 0.14.0 → 0.14.2

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -128,7 +128,7 @@ function setDragImage(view: EditorView, from: number, to = from) {
   }
 
   // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
-  unsetDragImage();
+  unsetDragImage(view.root);
   dragImageElement = parentClone;
 
   // TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
@@ -146,12 +146,21 @@ function setDragImage(view: EditorView, from: number, to = from) {
   dragImageElement.className =
     dragImageElement.className + " bn-drag-preview " + inheritedClasses;
 
-  document.body.appendChild(dragImageElement);
+  if (view.root instanceof ShadowRoot) {
+    view.root.appendChild(dragImageElement);
+  } else {
+    view.root.body.appendChild(dragImageElement);
+  }
 }
 
-function unsetDragImage() {
+function unsetDragImage(rootEl: Document | ShadowRoot) {
   if (dragImageElement !== undefined) {
-    document.body.removeChild(dragImageElement);
+    if (rootEl instanceof ShadowRoot) {
+      rootEl.removeChild(dragImageElement);
+    } else {
+      rootEl.body.appendChild(dragImageElement);
+    }
+
     dragImageElement = undefined;
   }
 }
@@ -177,7 +186,7 @@ function dragStart<
     top: e.clientY,
   };
 
-  const elements = document.elementsFromPoint(coords.left, coords.top);
+  const elements = view.root.elementsFromPoint(coords.left, coords.top);
   let blockEl = undefined;
 
   for (const element of elements) {
@@ -283,22 +292,37 @@ export class SideMenuView<
       this.pmView.dom.firstChild! as HTMLElement
     ).getBoundingClientRect().x;
 
-    document.body.addEventListener("drop", this.onDrop, true);
-    document.body.addEventListener("dragover", this.onDragOver);
+    this.pmView.root.addEventListener(
+      "drop",
+      this.onDrop as EventListener,
+      true
+    );
+    this.pmView.root.addEventListener(
+      "dragover",
+      this.onDragOver as EventListener
+    );
     this.pmView.dom.addEventListener("dragstart", this.onDragStart);
 
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
-    document.body.addEventListener("mousemove", this.onMouseMove, true);
+    this.pmView.root.addEventListener(
+      "mousemove",
+      this.onMouseMove as EventListener,
+      true
+    );
 
     // Unfreezes the menu whenever the user clicks.
     this.pmView.dom.addEventListener("mousedown", this.onMouseDown);
     // Hides and unfreezes the menu whenever the user presses a key.
-    document.body.addEventListener("keydown", this.onKeyDown, true);
+    this.pmView.root.addEventListener(
+      "keydown",
+      this.onKeyDown as EventListener,
+      true
+    );
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
     // and so won't propagate to the document by default.
-    document.addEventListener("scroll", this.onScroll, true);
+    this.pmView.root.addEventListener("scroll", this.onScroll, true);
   }
 
   updateState = () => {
@@ -322,7 +346,10 @@ export class SideMenuView<
       top: this.mousePos.y,
     };
 
-    const elements = document.elementsFromPoint(coords.left, coords.top);
+    const elements = this.pmView.root.elementsFromPoint(
+      coords.left,
+      coords.top
+    );
     let block = undefined;
 
     for (const element of elements) {
@@ -553,13 +580,28 @@ export class SideMenuView<
       this.state.show = false;
       this.emitUpdate(this.state);
     }
-    document.body.removeEventListener("mousemove", this.onMouseMove, true);
-    document.body.removeEventListener("dragover", this.onDragOver);
+    this.pmView.root.removeEventListener(
+      "mousemove",
+      this.onMouseMove as EventListener,
+      true
+    );
+    this.pmView.root.removeEventListener(
+      "dragover",
+      this.onDragOver as EventListener
+    );
     this.pmView.dom.removeEventListener("dragstart", this.onDragStart);
-    document.body.removeEventListener("drop", this.onDrop, true);
-    document.removeEventListener("scroll", this.onScroll, true);
+    this.pmView.root.removeEventListener(
+      "drop",
+      this.onDrop as EventListener,
+      true
+    );
+    this.pmView.root.removeEventListener("scroll", this.onScroll, true);
     this.pmView.dom.removeEventListener("mousedown", this.onMouseDown);
-    document.body.removeEventListener("keydown", this.onKeyDown, true);
+    this.pmView.root.removeEventListener(
+      "keydown",
+      this.onKeyDown as EventListener,
+      true
+    );
   }
 
   addBlock() {
@@ -665,7 +707,7 @@ export class SideMenuProsemirrorPlugin<
   /**
    * Handles drag & drop events for blocks.
    */
-  blockDragEnd = () => unsetDragImage();
+  blockDragEnd = () => unsetDragImage(this.editor.prosemirrorView.root);
   /**
    * Freezes the side menu. When frozen, the side menu will stay
    * attached to the same block regardless of which block is hovered by the

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -20,7 +20,7 @@ class SuggestionMenuView<
 > {
   public state?: SuggestionMenuState;
   public emitUpdate: (triggerCharacter: string) => void;
-
+  private rootEl?: Document | ShadowRoot;
   pluginState: SuggestionPluginState;
 
   constructor(
@@ -37,15 +37,17 @@ class SuggestionMenuView<
       emitUpdate(menuName, this.state);
     };
 
+    this.rootEl = this.editor._tiptapEditor.view.root;
+
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
     // and so won't propagate to the document by default.
-    document.addEventListener("scroll", this.handleScroll, true);
+    this.rootEl.addEventListener("scroll", this.handleScroll, true);
   }
 
   handleScroll = () => {
     if (this.state?.show) {
-      const decorationNode = document.querySelector(
+      const decorationNode = this.rootEl?.querySelector(
         `[data-decoration-id="${this.pluginState!.decorationId}"]`
       );
       this.state.referencePos = decorationNode!.getBoundingClientRect();
@@ -79,7 +81,7 @@ class SuggestionMenuView<
       return;
     }
 
-    const decorationNode = document.querySelector(
+    const decorationNode = this.rootEl?.querySelector(
       `[data-decoration-id="${this.pluginState!.decorationId}"]`
     );
 
@@ -95,7 +97,7 @@ class SuggestionMenuView<
   }
 
   destroy() {
-    document.removeEventListener("scroll", this.handleScroll, true);
+    this.rootEl?.removeEventListener("scroll", this.handleScroll, true);
   }
 
   closeMenu = () => {

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -1,6 +1,6 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { Block, PartialBlock } from "../../blocks/defaultBlocks";
 import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
   BlockSchema,
   InlineContentSchema,

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -36,7 +36,7 @@ export type TableHandlesState<
     | undefined;
 };
 
-function setHiddenDragImage() {
+function setHiddenDragImage(rootEl: Document | ShadowRoot) {
   if (dragImageElement) {
     return;
   }
@@ -46,12 +46,20 @@ function setHiddenDragImage() {
   dragImageElement.style.opacity = "0";
   dragImageElement.style.height = "1px";
   dragImageElement.style.width = "1px";
-  document.body.appendChild(dragImageElement);
+  if (rootEl instanceof Document) {
+    rootEl.body.appendChild(dragImageElement);
+  } else {
+    rootEl.appendChild(dragImageElement);
+  }
 }
 
-function unsetHiddenDragImage() {
+function unsetHiddenDragImage(rootEl: Document | ShadowRoot) {
   if (dragImageElement) {
-    document.body.removeChild(dragImageElement);
+    if (rootEl instanceof Document) {
+      rootEl.body.removeChild(dragImageElement);
+    } else {
+      rootEl.removeChild(dragImageElement);
+    }
     dragImageElement = undefined;
   }
 }
@@ -73,9 +81,13 @@ function domCellAround(target: Element | null): Element | null {
 }
 
 // Hides elements in the DOMwith the provided class names.
-function hideElementsWithClassNames(classNames: string[]) {
+function hideElementsWithClassNames(
+  classNames: string[],
+  rootEl: Document | ShadowRoot
+) {
   classNames.forEach((className) => {
-    const elementsToHide = document.getElementsByClassName(className);
+    const elementsToHide = rootEl.querySelectorAll(className);
+
     for (let i = 0; i < elementsToHide.length; i++) {
       (elementsToHide[i] as HTMLElement).style.visibility = "hidden";
     }
@@ -116,13 +128,16 @@ export class TableHandlesView<
 
     pmView.dom.addEventListener("mousemove", this.mouseMoveHandler);
 
-    document.addEventListener("dragover", this.dragOverHandler);
-    document.addEventListener("drop", this.dropHandler);
+    pmView.root.addEventListener(
+      "dragover",
+      this.dragOverHandler as EventListener
+    );
+    pmView.root.addEventListener("drop", this.dropHandler as EventListener);
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
     // and so won't propagate to the document by default.
-    document.addEventListener("scroll", this.scrollHandler, true);
+    pmView.root.addEventListener("scroll", this.scrollHandler, true);
   }
 
   mouseMoveHandler = (event: MouseEvent) => {
@@ -220,11 +235,14 @@ export class TableHandlesView<
     event.preventDefault();
     event.dataTransfer!.dropEffect = "move";
 
-    hideElementsWithClassNames([
-      "column-resize-handle",
-      "prosemirror-dropcursor-block",
-      "prosemirror-dropcursor-inline",
-    ]);
+    hideElementsWithClassNames(
+      [
+        "column-resize-handle",
+        "prosemirror-dropcursor-block",
+        "prosemirror-dropcursor-inline",
+      ],
+      this.pmView.root
+    );
 
     // The mouse cursor coordinates, bounded to the table's bounding box. The
     // bounding box is shrunk by 1px on each side to ensure that the bounded
@@ -242,7 +260,7 @@ export class TableHandlesView<
 
     // Gets the table cell element that the bounded mouse cursor coordinates lie
     // in.
-    const tableCellElements = document
+    const tableCellElements = this.pmView.root
       .elementsFromPoint(boundedMouseCoords.left, boundedMouseCoords.top)
       .filter(
         (element) => element.tagName === "TD" || element.tagName === "TH"
@@ -343,7 +361,7 @@ export class TableHandlesView<
 
   scrollHandler = () => {
     if (this.state?.show) {
-      const tableElement = document.querySelector(
+      const tableElement = this.pmView.root.querySelector(
         `[data-node-type="blockContainer"][data-id="${this.tableId}"] table`
       )!;
       const cellElement = tableElement.querySelector(
@@ -360,11 +378,15 @@ export class TableHandlesView<
 
   destroy() {
     this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler);
-
-    document.removeEventListener("dragover", this.dragOverHandler);
-    document.removeEventListener("drop", this.dropHandler);
-
-    document.removeEventListener("scroll", this.scrollHandler, true);
+    this.pmView.root.removeEventListener(
+      "dragover",
+      this.dragOverHandler as EventListener
+    );
+    this.pmView.root.removeEventListener(
+      "drop",
+      this.dropHandler as EventListener
+    );
+    this.pmView.root.removeEventListener("scroll", this.scrollHandler, true);
   }
 }
 
@@ -559,7 +581,7 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
-    setHiddenDragImage();
+    setHiddenDragImage(this.editor._tiptapEditor.view.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "move";
   };
@@ -595,7 +617,7 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
-    setHiddenDragImage();
+    setHiddenDragImage(this.editor._tiptapEditor.view.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "copyMove";
   };
@@ -618,7 +640,7 @@ export class TableHandlesProsemirrorPlugin<
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, null)
     );
 
-    unsetHiddenDragImage();
+    unsetHiddenDragImage(this.editor._tiptapEditor.view.root);
   };
 
   /**

package/src/i18n/locales/ar.ts

@@ -0,0 +1,288 @@
+import type { Dictionary } from "../dictionary";
+
+export const ar: Dictionary = {
+  slash_menu: {
+    heading: {
+      title: "عنوان 1",
+      subtext: "يستخدم لعناوين المستوى الأعلى",
+      aliases: ["ع", "عنوان1", "ع1"],
+      group: "العناوين",
+    },
+    heading_2: {
+      title: "عنوان 2",
+      subtext: "يستخدم للأقسام الرئيسية",
+      aliases: ["ع2", "عنوان2", "عنوان فرعي"],
+      group: "العناوين",
+    },
+    heading_3: {
+      title: "عنوان 3",
+      subtext: "يستخدم للأقسام الفرعية والعناوين المجموعة",
+      aliases: ["ع3", "عنوان3", "عنوان فرعي"],
+      group: "العناوين",
+    },
+    numbered_list: {
+      title: "قائمة مرقمة",
+      subtext: "تستخدم لعرض قائمة مرقمة",
+      aliases: ["ق", "عناصر قائمة", "قائمة", "قائمة مرقمة"],
+      group: "الكتل الأساسية",
+    },
+    bullet_list: {
+      title: "قائمة نقطية",
+      subtext: "تستخدم لعرض قائمة غير مرتبة",
+      aliases: ["ق", "عناصر قائمة", "قائمة", "قائمة نقطية"],
+      group: "الكتل الأساسية",
+    },
+    check_list: {
+      title: "قائمة تحقق",
+      subtext: "تستخدم لعرض قائمة بمربعات التحقق",
+      aliases: [
+        "قوائم غير مرتبة",
+        "عناصر قائمة",
+        "قائمة",
+        "قائمة تحقق",
+        "قائمة التحقق",
+        "قائمة مشطوبة",
+        "مربع التحقق",
+      ],
+      group: "الكتل الأساسية",
+    },
+    paragraph: {
+      title: "فقرة",
+      subtext: "تستخدم لنص الوثيقة الأساسي",
+      aliases: ["ف", "فقرة"],
+      group: "الكتل الأساسية",
+    },
+    table: {
+      title: "جدول",
+      subtext: "يستخدم للجداول",
+      aliases: ["جدول"],
+      group: "متقدم",
+    },
+    image: {
+      title: "صورة",
+      subtext: "إدراج صورة",
+      aliases: ["صورة", "رفع صورة", "تحميل", "صورة", "صورة", "وسائط", "رابط"],
+      group: "وسائط",
+    },
+    video: {
+      title: "فيديو",
+      subtext: "إدراج فيديو",
+      aliases: [
+        "فيديو",
+        "رفع فيديو",
+        "تحميل",
+        "فيديو",
+        "فيلم",
+        "وسائط",
+        "رابط",
+      ],
+      group: "وسائط",
+    },
+    audio: {
+      title: "صوت",
+      subtext: "إدراج صوت",
+      aliases: ["صوت", "رفع صوت", "تحميل", "صوت", "صوت", "وسائط", "رابط"],
+      group: "وسائط",
+    },
+    file: {
+      title: "ملف",
+      subtext: "إدراج ملف",
+      aliases: ["ملف", "تحميل", "تضمين", "وسائط", "رابط"],
+      group: "وسائط",
+    },
+  },
+  placeholders: {
+    default: "أدخل نصًا أو اكتب '/' للأوامر",
+    heading: "عنوان",
+    bulletListItem: "قائمة",
+    numberedListItem: "قائمة",
+    checkListItem: "قائمة",
+  },
+  file_blocks: {
+    image: {
+      add_button_text: "إضافة صورة",
+    },
+    video: {
+      add_button_text: "إضافة فيديو",
+    },
+    audio: {
+      add_button_text: "إضافة صوت",
+    },
+    file: {
+      add_button_text: "إضافة ملف",
+    },
+  },
+  // from react package:
+  side_menu: {
+    add_block_label: "إضافة محتوي",
+    drag_handle_label: "فتح قائمة المحتويات",
+  },
+  drag_handle: {
+    delete_menuitem: "حذف",
+    colors_menuitem: "ألوان",
+  },
+  table_handle: {
+    delete_column_menuitem: "حذف عمود",
+    delete_row_menuitem: "حذف صف",
+    add_left_menuitem: "إضافة عمود إلى اليسار",
+    add_right_menuitem: "إضافة عمود إلى اليمين",
+    add_above_menuitem: "إضافة صف أعلى",
+    add_below_menuitem: "إضافة صف أسفل",
+  },
+  suggestion_menu: {
+    no_items_title: "لم يتم العثور على عناصر",
+    loading: "جارٍ التحميل…",
+  },
+  color_picker: {
+    text_title: "نص",
+    background_title: "خلفية",
+    colors: {
+      default: "افتراضي",
+      gray: "رمادي",
+      brown: "بني",
+      red: "أحمر",
+      orange: "برتقالي",
+      yellow: "أصفر",
+      green: "أخضر",
+      blue: "أزرق",
+      purple: "أرجواني",
+      pink: "وردي",
+    },
+  },
+
+  formatting_toolbar: {
+    bold: {
+      tooltip: "عريض",
+      secondary_tooltip: "Mod+B",
+    },
+    italic: {
+      tooltip: "مائل",
+      secondary_tooltip: "Mod+I",
+    },
+    underline: {
+      tooltip: "تحته خط",
+      secondary_tooltip: "Mod+U",
+    },
+    strike: {
+      tooltip: "مشطوب",
+      secondary_tooltip: "Mod+Shift+X",
+    },
+    code: {
+      tooltip: "كود",
+      secondary_tooltip: "",
+    },
+    colors: {
+      tooltip: "ألوان",
+    },
+    link: {
+      tooltip: "إنشاء رابط",
+      secondary_tooltip: "Mod+K",
+    },
+    file_caption: {
+      tooltip: "تحرير التسمية التوضيحية",
+      input_placeholder: "تحرير التسمية التوضيحية",
+    },
+    file_replace: {
+      tooltip: {
+        image: "استبدال الصورة",
+        video: "استبدال الفيديو",
+        audio: "استبدال الصوت",
+        file: "استبدال الملف",
+      } as Record<string, string>,
+    },
+    file_rename: {
+      tooltip: {
+        image: "إعادة تسمية الصورة",
+        video: "إعادة تسمية الفيديو",
+        audio: "إعادة تسمية الصوت",
+        file: "إعادة تسمية الملف",
+      } as Record<string, string>,
+      input_placeholder: {
+        image: "إعادة تسمية الصورة",
+        video: "إعادة تسمية الفيديو",
+        audio: "إعادة تسمية الصوت",
+        file: "إعادة تسمية الملف",
+      } as Record<string, string>,
+    },
+    file_download: {
+      tooltip: {
+        image: "تنزيل الصورة",
+        video: "تنزيل الفيديو",
+        audio: "تنزيل الصوت",
+        file: "تنزيل الملف",
+      } as Record<string, string>,
+    },
+    file_delete: {
+      tooltip: {
+        image: "حذف الصورة",
+        video: "حذف الفيديو",
+        audio: "حذف الصوت",
+        file: "حذف الملف",
+      } as Record<string, string>,
+    },
+    file_preview_toggle: {
+      tooltip: "تبديل المعاينة",
+    },
+    nest: {
+      tooltip: "محتويات متداخلة",
+      secondary_tooltip: "Tab",
+    },
+    unnest: {
+      tooltip: "إلغاء التداخل",
+      secondary_tooltip: "Shift+Tab",
+    },
+    align_left: {
+      tooltip: "محاذاة النص إلى اليسار",
+    },
+    align_center: {
+      tooltip: "محاذاة النص في المنتصف",
+    },
+    align_right: {
+      tooltip: "محاذاة النص إلى اليمين",
+    },
+    align_justify: {
+      tooltip: "ضبط النص",
+    },
+  },
+  file_panel: {
+    upload: {
+      title: "تحميل",
+      file_placeholder: {
+        image: "تحميل صورة",
+        video: "تحميل فيديو",
+        audio: "تحميل صوت",
+        file: "تحميل ملف",
+      } as Record<string, string>,
+      upload_error: "خطأ: فشل التحميل",
+    },
+    embed: {
+      title: "تضمين",
+      embed_button: {
+        image: "تضمين صورة",
+        video: "تضمين فيديو",
+        audio: "تضمين صوت",
+        file: "تضمين ملف",
+      } as Record<string, string>,
+      url_placeholder: "أدخل الرابط",
+    },
+  },
+  link_toolbar: {
+    delete: {
+      tooltip: "إزالة الرابط",
+    },
+    edit: {
+      text: "تحرير الرابط",
+      tooltip: "تحرير",
+    },
+    open: {
+      tooltip: "فتح في تبويب جديد",
+    },
+    form: {
+      title_placeholder: "تحرير العنوان",
+      url_placeholder: "تحرير الرابط",
+    },
+  },
+  generic: {
+    ctrl_shortcut: "Ctrl",
+  },
+};

package/src/i18n/locales/index.ts

@@ -1,3 +1,4 @@
+export * from "./ar";
 export * from "./en";
 export * from "./fr";
 export * from "./is";

package/types/src/api/parsers/acceptedMIMETypes.d.ts

@@ -0,0 +1 @@
+export declare const acceptedMIMETypes: readonly ["blocknote/html", "Files", "text/html", "text/plain"];

package/types/src/api/parsers/fileDropExtension.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from "@tiptap/core";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { InlineContentSchema, StyleSchema } from "../../schema";
+export declare const createDropFileExtension: <BSchema extends Record<string, import("../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>) => Extension<{
+    editor: BlockNoteEditor<BSchema, I, S>;
+}, undefined>;

package/types/src/api/parsers/handleFileInsertion.d.ts

@@ -0,0 +1,3 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+export declare function handleFileInsertion<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(event: DragEvent | ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>): Promise<void>;

package/types/src/editor/BlockNoteEditor.d.ts

@@ -18,7 +18,7 @@ import { Dictionary } from "../i18n/dictionary";
 import "./Block.css";
 import "./editor.css";
 export type BlockNoteEditorOptions<BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema> = {
-    enableBlockNoteExtensions: boolean;
+    disableExtensions: string[];
     /**
      * A dictionary object containing translations for the editor.
      */

package/types/src/editor/BlockNoteExtensions.d.ts

@@ -1,4 +1,3 @@
-import { Extensions } from "@tiptap/core";
 import type { BlockNoteEditor } from "./BlockNoteEditor";
 import * as Y from "yjs";
 import { BlockNoteDOMAttributes, BlockSpecs, InlineContentSchema, InlineContentSpecs, StyleSchema, StyleSpecs } from "../schema";
@@ -22,4 +21,5 @@ export declare const getBlockNoteExtensions: <BSchema extends Record<string, imp
         provider: any;
         renderCursor?: (user: any) => HTMLElement;
     };
-}) => Extensions;
+    disableExtensions: string[] | undefined;
+}) => import("@tiptap/core").AnyExtension[];