@blocknote/core 0.14.1 → 0.14.2

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

@@ -3,182 +3,141 @@ import type { Dictionary } from "../dictionary";
 export const ar: Dictionary = {
   slash_menu: {
     heading: {
-      title: "العنوان 1",
-      subtext: "يستخدم للعنوان الرئيسي",
-      aliases: ["h", "heading1", "h1", "عنوان رئيسي", "عنوان 1"],
+      title: "عنوان 1",
+      subtext: "يستخدم لعناوين المستوى الأعلى",
+      aliases: ["ع", "عنوان1", "ع1"],
       group: "العناوين",
     },
     heading_2: {
-      title: "العنوان 2",
+      title: "عنوان 2",
       subtext: "يستخدم للأقسام الرئيسية",
-      aliases: ["h2", "heading2", "subheading", "عنوان 2", "عنوان فرعي"],
+      aliases: ["ع2", "عنوان2", "عنوان فرعي"],
       group: "العناوين",
     },
     heading_3: {
-      title: "العنوان 3",
-      subtext: "يستخدم للأقسام الفرعية وعناوين المجموعات",
-      aliases: ["h3", "heading3", "subheading", "عنوان 3", "عنوان فرعي"],
+      title: "عنوان 3",
+      subtext: "يستخدم للأقسام الفرعية والعناوين المجموعة",
+      aliases: ["ع3", "عنوان3", "عنوان فرعي"],
       group: "العناوين",
     },
     numbered_list: {
       title: "قائمة مرقمة",
-      subtext: "يستخدم لعرض قائمة مرقمة",
-      aliases: [
-        "ol",
-        "li",
-        "list",
-        "numberedlist",
-        "numbered list",
-        "قائمة",
-        "قائمة مرقمة",
-      ],
+      subtext: "تستخدم لعرض قائمة مرقمة",
+      aliases: ["ق", "عناصر قائمة", "قائمة", "قائمة مرقمة"],
       group: "الكتل الأساسية",
     },
     bullet_list: {
-      title: "قائمة نقاط",
-      subtext: "يستخدم لعرض قائمة غير مرتبة",
-      aliases: [
-        "ul",
-        "li",
-        "list",
-        "bulletlist",
-        "bullet list",
-        "قائمة",
-        "قائمة نقاط",
-      ],
+      title: "قائمة نقطية",
+      subtext: "تستخدم لعرض قائمة غير مرتبة",
+      aliases: ["ق", "عناصر قائمة", "قائمة", "قائمة نقطية"],
       group: "الكتل الأساسية",
     },
     check_list: {
-      title: "قائمة الاختيار",
-      subtext: "يستخدم لعرض قائمة مع مربعات الاختيار",
+      title: "قائمة تحقق",
+      subtext: "تستخدم لعرض قائمة بمربعات التحقق",
       aliases: [
-        "ul",
-        "li",
-        "list",
-        "checklist",
-        "check list",
-        "checked list",
-        "checkbox",
+        "قوائم غير مرتبة",
+        "عناصر قائمة",
         "قائمة",
-        "قائمة الاختيار",
-        "قائمة مربعات الاختيار",
+        "قائمة تحقق",
+        "قائمة التحقق",
+        "قائمة مشطوبة",
+        "مربع التحقق",
       ],
       group: "الكتل الأساسية",
     },
     paragraph: {
       title: "فقرة",
-      subtext: "يستخدم لجسم المستند الخاص بك",
-      aliases: ["p", "paragraph", "فقرة", "نص"],
+      subtext: "تستخدم لنص الوثيقة الأساسي",
+      aliases: ["ف", "فقرة"],
       group: "الكتل الأساسية",
     },
     table: {
       title: "جدول",
       subtext: "يستخدم للجداول",
-      aliases: ["table", "جدول", "جداول"],
+      aliases: ["جدول"],
       group: "متقدم",
     },
     image: {
       title: "صورة",
-      subtext: "أدرج صورة",
-      aliases: [
-        "صورة",
-        "رفع الصورة",
-        "رفع",
-        "image",
-        "upload",
-        "img",
-        "picture",
-        "media",
-        "url",
-      ],
-      group: "الوسائط",
+      subtext: "إدراج صورة",
+      aliases: ["صورة", "رفع صورة", "تحميل", "صورة", "صورة", "وسائط", "رابط"],
+      group: "وسائط",
     },
     video: {
       title: "فيديو",
-      subtext: "أدرج فيديو",
+      subtext: "إدراج فيديو",
       aliases: [
         "فيديو",
-        "رفع الفيديو",
-        "رفع",
-        "video",
-        "upload",
-        "mp4",
-        "film",
-        "media",
-        "url",
+        "رفع فيديو",
+        "تحميل",
+        "فيديو",
+        "فيلم",
+        "وسائط",
+        "رابط",
       ],
-      group: "الوسائط",
+      group: "وسائط",
     },
     audio: {
       title: "صوت",
-      subtext: "أدرج صوت",
-      aliases: [
-        "صوت",
-        "رفع الصوت",
-        "رفع",
-        "audio",
-        "upload",
-        "mp3",
-        "sound",
-        "media",
-        "url",
-      ],
-      group: "الوسائط",
+      subtext: "إدراج صوت",
+      aliases: ["صوت", "رفع صوت", "تحميل", "صوت", "صوت", "وسائط", "رابط"],
+      group: "وسائط",
     },
     file: {
       title: "ملف",
-      subtext: "أدرج ملف",
-      aliases: ["file", "upload", "embed", "media", "url", "ملف", "رفع"],
-      group: "الوسائط",
+      subtext: "إدراج ملف",
+      aliases: ["ملف", "تحميل", "تضمين", "وسائط", "رابط"],
+      group: "وسائط",
     },
   },
   placeholders: {
-    default: "أدخل النص أو اكتب '/' للأوامر",
-    heading: "العنوان",
+    default: "أدخل نصًا أو اكتب '/' للأوامر",
+    heading: "عنوان",
     bulletListItem: "قائمة",
     numberedListItem: "قائمة",
     checkListItem: "قائمة",
   },
   file_blocks: {
     image: {
-      add_button_text: "أضف صورة",
+      add_button_text: "إضافة صورة",
     },
     video: {
-      add_button_text: "أضف فيديو",
+      add_button_text: "إضافة فيديو",
     },
     audio: {
-      add_button_text: "أضف صوت",
+      add_button_text: "إضافة صوت",
     },
     file: {
-      add_button_text: "أضف ملف",
+      add_button_text: "إضافة ملف",
     },
   },
   // from react package:
   side_menu: {
-    add_block_label: "أضف كتلة",
-    drag_handle_label: "افتح قائمة الكتل",
+    add_block_label: "إضافة محتوي",
+    drag_handle_label: "فتح قائمة المحتويات",
   },
   drag_handle: {
     delete_menuitem: "حذف",
-    colors_menuitem: "الألوان",
+    colors_menuitem: "ألوان",
   },
   table_handle: {
-    delete_column_menuitem: "حذف العمود",
-    delete_row_menuitem: "حذف الصف",
-    add_left_menuitem: "أضف عموداً على اليسار",
-    add_right_menuitem: "أضف عموداً على اليمين",
-    add_above_menuitem: "أضف صفاً أعلى",
-    add_below_menuitem: "أضف صفاً أسفل",
+    delete_column_menuitem: "حذف عمود",
+    delete_row_menuitem: "حذف صف",
+    add_left_menuitem: "إضافة عمود إلى اليسار",
+    add_right_menuitem: "إضافة عمود إلى اليمين",
+    add_above_menuitem: "إضافة صف أعلى",
+    add_below_menuitem: "إضافة صف أسفل",
   },
   suggestion_menu: {
     no_items_title: "لم يتم العثور على عناصر",
-    loading: "جار التحميل...",
+    loading: "جارٍ التحميل…",
   },
   color_picker: {
-    text_title: "النص",
-    background_title: "الخلفية",
+    text_title: "نص",
+    background_title: "خلفية",
     colors: {
-      default: "الافتراضي",
+      default: "افتراضي",
       gray: "رمادي",
       brown: "بني",
       red: "أحمر",
@@ -186,7 +145,7 @@ export const ar: Dictionary = {
       yellow: "أصفر",
       green: "أخضر",
       blue: "أزرق",
-      purple: "بنفسجي",
+      purple: "أرجواني",
       pink: "وردي",
     },
   },
@@ -201,11 +160,11 @@ export const ar: Dictionary = {
       secondary_tooltip: "Mod+I",
     },
     underline: {
-      tooltip: "تسطير",
+      tooltip: "تحته خط",
       secondary_tooltip: "Mod+U",
     },
     strike: {
-      tooltip: "شطب",
+      tooltip: "مشطوب",
       secondary_tooltip: "Mod+Shift+X",
     },
     code: {
@@ -213,15 +172,15 @@ export const ar: Dictionary = {
       secondary_tooltip: "",
     },
     colors: {
-      tooltip: "الألوان",
+      tooltip: "ألوان",
     },
     link: {
       tooltip: "إنشاء رابط",
       secondary_tooltip: "Mod+K",
     },
     file_caption: {
-      tooltip: "تعديل التسمية التوضيحية",
-      input_placeholder: "تعديل التسمية التوضيحية",
+      tooltip: "تحرير التسمية التوضيحية",
+      input_placeholder: "تحرير التسمية التوضيحية",
     },
     file_replace: {
       tooltip: {
@@ -247,10 +206,10 @@ export const ar: Dictionary = {
     },
     file_download: {
       tooltip: {
-        image: "تحميل الصورة",
-        video: "تحميل الفيديو",
-        audio: "تحميل الصوت",
-        file: "تحميل الملف",
+        image: "تنزيل الصورة",
+        video: "تنزيل الفيديو",
+        audio: "تنزيل الصوت",
+        file: "تنزيل الملف",
       } as Record<string, string>,
     },
     file_delete: {
@@ -262,21 +221,21 @@ export const ar: Dictionary = {
       } as Record<string, string>,
     },
     file_preview_toggle: {
-      tooltip: "تبديل العرض",
+      tooltip: "تبديل المعاينة",
     },
     nest: {
-      tooltip: "تداخل الكتل",
+      tooltip: "محتويات متداخلة",
       secondary_tooltip: "Tab",
     },
     unnest: {
-      tooltip: "إلغاء تداخل الكتل",
+      tooltip: "إلغاء التداخل",
       secondary_tooltip: "Shift+Tab",
     },
     align_left: {
       tooltip: "محاذاة النص إلى اليسار",
     },
     align_center: {
-      tooltip: "محاذاة النص إلى الوسط",
+      tooltip: "محاذاة النص في المنتصف",
     },
     align_right: {
       tooltip: "محاذاة النص إلى اليمين",
@@ -289,20 +248,20 @@ export const ar: Dictionary = {
     upload: {
       title: "تحميل",
       file_placeholder: {
-        image: "تحميل الصورة",
-        video: "تحميل الفيديو",
-        audio: "تحميل الصوت",
-        file: "تحميل الملف",
+        image: "تحميل صورة",
+        video: "تحميل فيديو",
+        audio: "تحميل صوت",
+        file: "تحميل ملف",
       } as Record<string, string>,
       upload_error: "خطأ: فشل التحميل",
     },
     embed: {
       title: "تضمين",
       embed_button: {
-        image: "تضمين الصورة",
-        video: "تضمين الفيديو",
-        audio: "تضمين الصوت",
-        file: "تضمين الملف",
+        image: "تضمين صورة",
+        video: "تضمين فيديو",
+        audio: "تضمين صوت",
+        file: "تضمين ملف",
       } as Record<string, string>,
       url_placeholder: "أدخل الرابط",
     },
@@ -312,15 +271,15 @@ export const ar: Dictionary = {
       tooltip: "إزالة الرابط",
     },
     edit: {
-      text: "تعديل الرابط",
-      tooltip: "تعديل",
+      text: "تحرير الرابط",
+      tooltip: "تحرير",
     },
     open: {
-      tooltip: "افتح في علامة تبويب جديدة",
+      tooltip: "فتح في تبويب جديد",
     },
     form: {
-      title_placeholder: "تعديل العنوان",
-      url_placeholder: "تعديل الرابط",
+      title_placeholder: "تحرير العنوان",
+      url_placeholder: "تحرير الرابط",
     },
   },
   generic: {

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[];

package/types/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.d.ts

@@ -1,5 +1,5 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { Block, PartialBlock } from "../../blocks/defaultBlocks";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { DefaultSuggestionItem } from "./DefaultSuggestionItem";
 export declare function insertOrUpdateBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, block: PartialBlock<BSchema, I, S>): Block<BSchema, I, S>;