@blocknote/core 0.14.5 → 0.15.2

package/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -15,11 +15,17 @@ export const BackgroundColorExtension = Extension.create({
               element.hasAttribute("data-background-color")
                 ? element.getAttribute("data-background-color")
                 : defaultProps.backgroundColor.default,
-            renderHTML: (attributes) =>
-              attributes.backgroundColor !==
-                defaultProps.backgroundColor.default && {
+            renderHTML: (attributes) => {
+              if (
+                attributes.backgroundColor ===
+                defaultProps.backgroundColor.default
+              ) {
+                return {};
+              }
+              return {
                 "data-background-color": attributes.backgroundColor,
-              },
+              };
+            },
           },
         },
       },

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -58,6 +58,7 @@ export class FormattingToolbarView implements PluginView {
     pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
+    pmView.dom.addEventListener("blur", this.blurHandler);
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
@@ -65,6 +66,37 @@ export class FormattingToolbarView implements PluginView {
     pmView.root.addEventListener("scroll", this.scrollHandler, true);
   }
 
+  blurHandler = (event: FocusEvent) => {
+    if (this.preventHide) {
+      this.preventHide = false;
+
+      return;
+    }
+
+    const editorWrapper = this.pmView.dom.parentElement!;
+
+    // Checks if the focus is moving to an element outside the editor. If it is,
+    // the toolbar is hidden.
+    if (
+      // An element is clicked.
+      event &&
+      event.relatedTarget &&
+      // Element is inside the editor.
+      (editorWrapper === (event.relatedTarget as Node) ||
+        editorWrapper.contains(event.relatedTarget as Node) ||
+        (event.relatedTarget as HTMLElement).matches(
+          ".bn-ui-container, .bn-ui-container *"
+        ))
+    ) {
+      return;
+    }
+
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   viewMousedownHandler = () => {
     this.preventShow = true;
   };
@@ -90,6 +122,10 @@ export class FormattingToolbarView implements PluginView {
   };
 
   update(view: EditorView, oldState?: EditorState) {
+    // Delays the update to handle edge case with drag and drop, where the view
+    // is blurred asynchronously and happens only after the state update.
+    // Wrapping in a setTimeout gives enough time to wait for the blur event to
+    // occur before updating the toolbar.
     const { state, composing } = view;
     const { doc, selection } = state;
     const isSame =
@@ -146,6 +182,7 @@ export class FormattingToolbarView implements PluginView {
     this.pmView.dom.removeEventListener("mouseup", this.viewMouseupHandler);
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
+    this.pmView.dom.removeEventListener("blur", this.blurHandler);
 
     this.pmView.root.removeEventListener("scroll", this.scrollHandler, true);
   }

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -158,7 +158,7 @@ class LinkToolbarView implements PluginView {
       this.linkMarkRange!.from + text.length,
       this.pmView.state.schema.mark("link", { href: url })
     );
-    this.pmView.dispatch(tr);
+    this.editor.dispatch(tr);
     this.pmView.focus();
 
     if (this.state?.show) {
@@ -168,7 +168,7 @@ class LinkToolbarView implements PluginView {
   }
 
   deleteLink() {
-    this.pmView.dispatch(
+    this.editor.dispatch(
       this.pmView.state.tr
         .removeMark(
           this.linkMarkRange!.from,

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -12,7 +12,6 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
-import { suggestionMenuPluginKey } from "../SuggestionMenu/SuggestionPlugin";
 import { MultipleNodeSelection } from "./MultipleNodeSelection";
 
 let dragImageElement: Element | undefined;
@@ -225,16 +224,18 @@ function dragStart<
     }
 
     const selectedSlice = view.state.selection.content();
-    const schema = editor._tiptapEditor.schema;
+    const schema = editor.pmSchema;
 
     const internalHTMLSerializer = createInternalHTMLSerializer(schema, editor);
     const internalHTML = internalHTMLSerializer.serializeProseMirrorFragment(
-      selectedSlice.content
+      selectedSlice.content,
+      {}
     );
 
     const externalHTMLExporter = createExternalHTMLExporter(schema, editor);
     const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
-      selectedSlice.content
+      selectedSlice.content,
+      {}
     );
 
     const plainText = cleanHTMLToMarkdown(externalHTML);
@@ -440,8 +441,15 @@ export class SideMenuView<
       const editorBoundingBox = (
         this.pmView.dom.firstChild! as HTMLElement
       ).getBoundingClientRect();
-      evt.clientX = editorBoundingBox.left + editorBoundingBox.width / 2;
-      evt.clientY = event.clientY;
+      evt.clientX =
+        event.clientX < editorBoundingBox.left ||
+        event.clientX > editorBoundingBox.left + editorBoundingBox.width
+          ? editorBoundingBox.left + editorBoundingBox.width / 2
+          : event.clientX;
+      evt.clientY = Math.min(
+        Math.max(event.clientY, editorBoundingBox.top),
+        editorBoundingBox.top + editorBoundingBox.height
+      );
       evt.dataTransfer = event.dataTransfer;
       evt.preventDefault = () => event.preventDefault();
       evt.synthetic = true; // prevent recursion
@@ -497,6 +505,10 @@ export class SideMenuView<
   };
 
   onMouseMove = (event: MouseEvent) => {
+    if (this.menuFrozen) {
+      return;
+    }
+
     this.mousePos = { x: event.clientX, y: event.clientY };
 
     // We want the full area of the editor to check if the cursor is hovering
@@ -649,14 +661,8 @@ export class SideMenuView<
       this.editor._tiptapEditor.commands.setTextSelection(startPos + 1);
     }
 
-    // Focuses and activates the suggestion menu.
-    this.pmView.focus();
-    this.pmView.dispatch(
-      this.pmView.state.tr.scrollIntoView().setMeta(suggestionMenuPluginKey, {
-        triggerCharacter: "/",
-        fromUserInput: false,
-      })
-    );
+    // Focuses and activates the slash menu.
+    this.editor.openSelectionMenu("/");
   }
 }
 

package/src/extensions/SuggestionMenu/DefaultGridSuggestionItem.ts

@@ -0,0 +1,4 @@
+export type DefaultGridSuggestionItem = {
+  id: string;
+  onItemClick: () => void;
+};

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -101,7 +101,7 @@ class SuggestionMenuView<
   }
 
   closeMenu = () => {
-    this.editor._tiptapEditor.view.dispatch(
+    this.editor.dispatch(
       this.editor._tiptapEditor.view.state.tr.setMeta(
         suggestionMenuPluginKey,
         null
@@ -139,7 +139,7 @@ type SuggestionPluginState =
     }
   | undefined;
 
-export const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin");
+const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin");
 
 /**
  * A ProseMirror plugin for suggestions, designed to make '/'-commands possible as well as mentions.

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -0,0 +1,45 @@
+import type { Emoji, EmojiMartData } from "@emoji-mart/data";
+import { SearchIndex, init } from "emoji-mart";
+import { checkDefaultInlineContentTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { DefaultGridSuggestionItem } from "./DefaultGridSuggestionItem";
+
+let data:
+  | Promise<{
+      default: EmojiMartData;
+    }>
+  | undefined;
+
+export async function getDefaultEmojiPickerItems<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  query: string
+): Promise<DefaultGridSuggestionItem[]> {
+  if (!checkDefaultInlineContentTypeInSchema("text", editor)) {
+    return [];
+  }
+
+  if (!data) {
+    // use a dynamic import to encourage bundle-splitting
+    // and a smaller initial client bundle size
+    data = import("@emoji-mart/data", { assert: { type: "json" } }) as any;
+    const emojiMartData = (await data)!.default;
+    await init({ data: emojiMartData });
+  }
+
+  const emojiMartData = (await data)!.default;
+
+  const emojisToShow =
+    query.trim() === ""
+      ? Object.values(emojiMartData.emojis)
+      : ((await SearchIndex.search(query)) as Emoji[]);
+
+  return emojisToShow.map((emoji) => ({
+    id: emoji.skins[0].native,
+    onItemClick: () => editor.insertInlineContent(emoji.skins[0].native + " "),
+  }));
+}

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -1,11 +1,12 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { Block, PartialBlock } from "../../blocks/defaultBlocks";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+
 import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
 import {
   BlockSchema,
   InlineContentSchema,
-  isStyledTextInlineContent,
   StyleSchema,
+  isStyledTextInlineContent,
 } from "../../schema";
 import { formatKeyboardShortcut } from "../../util/browser";
 import { DefaultSuggestionItem } from "./DefaultSuggestionItem";
@@ -202,7 +203,7 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.prosemirrorView.dispatch(
+        editor.dispatch(
           editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
@@ -221,7 +222,7 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.prosemirrorView.dispatch(
+        editor.dispatch(
           editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
@@ -240,7 +241,7 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.prosemirrorView.dispatch(
+        editor.dispatch(
           editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
@@ -259,7 +260,7 @@ export function getDefaultSlashMenuItems<
         });
 
         // Immediately open the file toolbar
-        editor.prosemirrorView.dispatch(
+        editor.dispatch(
           editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
@@ -270,6 +271,12 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  items.push({
+    onItemClick: () => editor.openSelectionMenu(":"),
+    key: "emoji",
+    ...editor.dictionary.slash_menu.emoji,
+  });
+
   return items;
 }
 

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -1,6 +1,7 @@
 import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 import { nodeToBlock } from "../../api/nodeConversions/nodeConversions";
+import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards";
 import { Block, DefaultBlockSchema } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
@@ -9,7 +10,6 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
-import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards";
 import { EventEmitter } from "../../util/EventEmitter";
 import { getDraggableBlockFromElement } from "../SideMenu/SideMenuPlugin";
 
@@ -321,7 +321,7 @@ export class TableHandlesView<
     // Dispatches a dummy transaction to force a decorations update if
     // necessary.
     if (dispatchDecorationsTransaction) {
-      this.pmView.dispatch(
+      this.editor.dispatch(
         this.pmView.state.tr.setMeta(tableHandlesPluginKey, true)
       );
     }
@@ -571,7 +571,7 @@ export class TableHandlesProsemirrorPlugin<
     };
     this.view!.emitUpdate();
 
-    this.editor._tiptapEditor.view.dispatch(
+    this.editor.dispatch(
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, {
         draggedCellOrientation:
           this.view!.state.draggingState.draggedCellOrientation,
@@ -607,7 +607,7 @@ export class TableHandlesProsemirrorPlugin<
     };
     this.view!.emitUpdate();
 
-    this.editor._tiptapEditor.view.dispatch(
+    this.editor.dispatch(
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, {
         draggedCellOrientation:
           this.view!.state.draggingState.draggedCellOrientation,
@@ -636,7 +636,7 @@ export class TableHandlesProsemirrorPlugin<
     this.view!.state.draggingState = undefined;
     this.view!.emitUpdate();
 
-    this.editor._tiptapEditor.view.dispatch(
+    this.editor.dispatch(
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, null)
     );
 

package/src/extensions/TextAlignment/TextAlignmentExtension.ts

@@ -21,10 +21,14 @@ export const TextAlignmentExtension = Extension.create({
             parseHTML: (element) => {
               return element.getAttribute("data-text-alignment");
             },
-            renderHTML: (attributes) =>
-              attributes.textAlignment !== "left" && {
+            renderHTML: (attributes) => {
+              if (attributes.textAlignment === "left") {
+                return {};
+              }
+              return {
                 "data-text-alignment": attributes.textAlignment,
-              },
+              };
+            },
           },
         },
       },

package/src/extensions/TextColor/TextColorExtension.ts

@@ -15,10 +15,14 @@ export const TextColorExtension = Extension.create({
               element.hasAttribute("data-text-color")
                 ? element.getAttribute("data-text-color")
                 : defaultProps.textColor.default,
-            renderHTML: (attributes) =>
-              attributes.textColor !== defaultProps.textColor.default && {
+            renderHTML: (attributes) => {
+              if (attributes.textColor === defaultProps.textColor.default) {
+                return {};
+              }
+              return {
                 "data-text-color": attributes.textColor,
-              },
+              };
+            },
           },
         },
       },

package/src/i18n/locales/ar.ts

@@ -90,6 +90,12 @@ export const ar: Dictionary = {
       aliases: ["ملف", "تحميل", "تضمين", "وسائط", "رابط"],
       group: "وسائط",
     },
+    emoji: {
+      title: "الرموز التعبيرية",
+      subtext: "تُستخدم لإدراج رمز تعبيري",
+      aliases: ["رمز تعبيري", "إيموجي", "إيموت", "عاطفة", "وجه"],
+      group: "آخرون",
+    },
   },
   placeholders: {
     default: "أدخل نصًا أو اكتب '/' للأوامر",

package/src/i18n/locales/en.ts

@@ -2,37 +2,37 @@ export const en = {
   slash_menu: {
     heading: {
       title: "Heading 1",
-      subtext: "Used for a top-level heading",
+      subtext: "Top-level heading",
       aliases: ["h", "heading1", "h1"],
       group: "Headings",
     },
     heading_2: {
       title: "Heading 2",
-      subtext: "Used for key sections",
+      subtext: "Key section heading",
       aliases: ["h2", "heading2", "subheading"],
       group: "Headings",
     },
     heading_3: {
       title: "Heading 3",
-      subtext: "Used for subsections and group headings",
+      subtext: "Subsection and group heading",
       aliases: ["h3", "heading3", "subheading"],
       group: "Headings",
     },
     numbered_list: {
       title: "Numbered List",
-      subtext: "Used to display a numbered list",
+      subtext: "List with ordered items",
       aliases: ["ol", "li", "list", "numberedlist", "numbered list"],
       group: "Basic blocks",
     },
     bullet_list: {
       title: "Bullet List",
-      subtext: "Used to display an unordered list",
+      subtext: "List with unordered items",
       aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
       group: "Basic blocks",
     },
     check_list: {
       title: "Check List",
-      subtext: "Used to display a list with checkboxes",
+      subtext: "List with checkboxes",
       aliases: [
         "ul",
         "li",
@@ -46,19 +46,19 @@ export const en = {
     },
     paragraph: {
       title: "Paragraph",
-      subtext: "Used for the body of your document",
+      subtext: "The body of your document",
       aliases: ["p", "paragraph"],
       group: "Basic blocks",
     },
     table: {
       title: "Table",
-      subtext: "Used for tables",
+      subtext: "Table with editable cells",
       aliases: ["table"],
       group: "Advanced",
     },
     image: {
       title: "Image",
-      subtext: "Insert an image",
+      subtext: "Resizable image with caption",
       aliases: [
         "image",
         "imageUpload",
@@ -72,7 +72,7 @@ export const en = {
     },
     video: {
       title: "Video",
-      subtext: "Insert a video",
+      subtext: "Resizable video with caption",
       aliases: [
         "video",
         "videoUpload",
@@ -86,7 +86,7 @@ export const en = {
     },
     audio: {
       title: "Audio",
-      subtext: "Insert audio",
+      subtext: "Embedded audio with caption",
       aliases: [
         "audio",
         "audioUpload",
@@ -100,10 +100,16 @@ export const en = {
     },
     file: {
       title: "File",
-      subtext: "Insert a file",
+      subtext: "Embedded file",
       aliases: ["file", "upload", "embed", "media", "url"],
       group: "Media",
     },
+    emoji: {
+      title: "Emoji",
+      subtext: "Search for and insert an emoji",
+      aliases: ["emoji", "emote", "emotion", "face"],
+      group: "Others",
+    },
   },
   placeholders: {
     default: "Enter text or type '/' for commands",
@@ -179,7 +185,7 @@ export const en = {
     },
     strike: {
       tooltip: "Strike",
-      secondary_tooltip: "Mod+Shift+X",
+      secondary_tooltip: "Mod+Shift+S",
     },
     code: {
       tooltip: "Code",

package/src/i18n/locales/fr.ts

@@ -105,6 +105,12 @@ export const fr: Dictionary = {
       aliases: ["fichier", "téléverser", "intégrer", "média", "url"],
       group: "Média",
     },
+    emoji: {
+      title: "Emoji",
+      subtext: "Utilisé pour insérer un emoji",
+      aliases: ["emoji", "émoticône", "émotion", "visage"],
+      group: "Autres",
+    },
   },
   placeholders: {
     default: "Entrez du texte ou tapez '/' pour les commandes",

package/src/i18n/locales/is.ts

@@ -98,6 +98,12 @@ export const is: Dictionary = {
       aliases: ["skrá", "hlaða upp", "fella inn", "miðill", "url"],
       group: "Miðlar",
     },
+    emoji: {
+      title: "Emoji",
+      subtext: "Notað til að setja inn smámynd",
+      aliases: ["emoji", "andlitsávísun", "tilfinningar", "andlit"],
+      group: "Annað",
+    },
   },
   placeholders: {
     default: "Sláðu inn texta eða skrifaðu '/' fyrir skipanir",

package/src/i18n/locales/ja.ts

@@ -125,6 +125,12 @@ export const ja: Dictionary = {
       aliases: ["file", "upload", "embed", "media", "url", "ファイル"],
       group: "メディア",
     },
+    emoji: {
+      title: "絵文字",
+      subtext: "絵文字を挿入するために使用します",
+      aliases: ["絵文字", "顔文字", "感情表現", "顔"],
+      group: "その他",
+    },
   },
   placeholders: {
     default: "テキストを入力するか'/' を入力してコマンド選択",

package/src/i18n/locales/ko.ts

@@ -109,6 +109,21 @@ export const ko: Dictionary = {
       aliases: ["file", "upload", "embed", "media", "파일", "url"],
       group: "미디어",
     },
+    emoji: {
+      title: "이모지",
+      subtext: "이모지 삽입용으로 사용됩니다",
+      aliases: [
+        "이모지",
+        "emoji",
+        "감정 표현",
+        "emotion expression",
+        "표정",
+        "face expression",
+        "얼굴",
+        "face",
+      ],
+      group: "기타",
+    },
   },
   placeholders: {
     default: "텍스트를 입력하거나 /를 입력하여 명령을 입력하세요.",

package/src/i18n/locales/nl.ts

@@ -100,6 +100,17 @@ export const nl: Dictionary = {
       aliases: ["bestand", "upload", "insluiten", "media", "url"],
       group: "Media",
     },
+    emoji: {
+      title: "Emoji",
+      subtext: "Gebruikt voor het invoegen van een emoji",
+      aliases: [
+        "emoji",
+        "emotie-uitdrukking",
+        "gezichtsuitdrukking",
+        "gezicht",
+      ],
+      group: "Overig",
+    },
   },
   placeholders: {
     default: "Voer tekst in of type '/' voor commando's",

package/src/i18n/locales/pl.ts

@@ -90,6 +90,12 @@ export const pl: Dictionary = {
       aliases: ["plik", "wrzuć", "wstaw", "media", "url"],
       group: "Media",
     },
+    emoji: {
+      title: "Emoji",
+      subtext: "Używane do wstawiania emoji",
+      aliases: ["emoji", "emotka", "wyrażenie emocji", "twarz"],
+      group: "Inne",
+    },
   },
   placeholders: {
     default: "Wprowadź tekst lub wpisz '/' aby użyć poleceń",

package/src/i18n/locales/pt.ts

@@ -97,6 +97,12 @@ export const pt: Dictionary = {
       aliases: ["arquivo", "upload", "incorporar", "mídia", "url"],
       group: "Mídia",
     },
+    emoji: {
+      title: "Emoji",
+      subtext: "Usado para inserir um emoji",
+      aliases: ["emoji", "emoticon", "expressão emocional", "rosto"],
+      group: "Outros",
+    },
   },
   placeholders: {
     default: "Digite texto ou use '/' para comandos",