@blocknote/core 0.14.5 → 0.15.0

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -0,0 +1,38 @@
+import data, { Emoji, EmojiMartData } from "@emoji-mart/data";
+import { init, SearchIndex } from "emoji-mart";
+
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { checkDefaultInlineContentTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
+import { DefaultGridSuggestionItem } from "./DefaultGridSuggestionItem";
+
+let dataInitialized = false;
+const emojiMartData = data as EmojiMartData;
+
+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 (!dataInitialized) {
+    dataInitialized = true;
+    await init({ emojiMartData });
+  }
+
+  const emojisToShow =
+    query.trim() === ""
+      ? Object.values(emojiMartData.emojis)
+      : ((await SearchIndex.search(query)) as Emoji[]);
+
+  return emojisToShow.map((emoji: 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",

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