@blocknote/core 0.13.2 → 0.13.3

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -1,4 +1,4 @@
-import { isNodeSelection, posToDOMRect } from "@tiptap/core";
+import { isNodeSelection, isTextSelection, posToDOMRect } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
@@ -22,7 +22,19 @@ export class FormattingToolbarView implements PluginView {
     state: EditorState;
     from: number;
     to: number;
-  }) => boolean = ({ state }) => !state.selection.empty;
+  }) => boolean = ({ state, from, to, view }) => {
+    const { doc, selection } = state;
+    const { empty } = selection;
+
+    // Sometime check for `empty` is not enough.
+    // Doubleclick an empty paragraph returns a node size of 2.
+    // So we check also for an empty text size.
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length && isTextSelection(state.selection);
+
+    // check view.hasFocus so that the toolbar doesn't show up when the editor is not focused or when for example a code block is focused
+    return !(!view.hasFocus() || empty || isEmptyTextBlock);
+  };
 
   constructor(
     private readonly editor: BlockNoteEditor<

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -188,9 +188,9 @@ export function getDefaultSlashMenuItems<
           type: "image",
         });
 
-        // Immediately open the image toolbar
+        // Immediately open the file toolbar
         editor.prosemirrorView.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
         );
@@ -200,6 +200,63 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("video", editor)) {
+    items.push({
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "video",
+        });
+
+        // Immediately open the file toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      key: "video",
+      ...editor.dictionary.slash_menu.video,
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("audio", editor)) {
+    items.push({
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "audio",
+        });
+
+        // Immediately open the file toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      key: "audio",
+      ...editor.dictionary.slash_menu.audio,
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("file", editor)) {
+    items.push({
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "file",
+        });
+
+        // Immediately open the file toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      key: "image",
+      ...editor.dictionary.slash_menu.file,
+    });
+  }
+
   return items;
 }
 

package/src/i18n/locales/en.ts

@@ -38,7 +38,7 @@ export const en = {
     },
     table: {
       title: "Table",
-      subtext: "Used for for tables",
+      subtext: "Used for tables",
       aliases: ["table"],
       group: "Advanced",
     },
@@ -53,11 +53,43 @@ export const en = {
         "picture",
         "media",
         "url",
-        "drive",
-        "dropbox",
       ],
       group: "Media",
     },
+    video: {
+      title: "Video",
+      subtext: "Insert a video",
+      aliases: [
+        "video",
+        "videoUpload",
+        "upload",
+        "mp4",
+        "film",
+        "media",
+        "url",
+      ],
+      group: "Media",
+    },
+    audio: {
+      title: "Audio",
+      subtext: "Insert audio",
+      aliases: [
+        "audio",
+        "audioUpload",
+        "upload",
+        "mp3",
+        "sound",
+        "media",
+        "url",
+      ],
+      group: "Media",
+    },
+    file: {
+      title: "File",
+      subtext: "Insert a file",
+      aliases: ["file", "upload", "embed", "media", "url"],
+      group: "Media",
+    },
   },
   placeholders: {
     default: "Enter text or type '/' for commands",
@@ -65,8 +97,19 @@ export const en = {
     bulletListItem: "List",
     numberedListItem: "List",
   },
-  image: {
-    add_button: "Add Image",
+  file_blocks: {
+    image: {
+      add_button_text: "Add image",
+    },
+    video: {
+      add_button_text: "Add video",
+    },
+    audio: {
+      add_button_text: "Add audio",
+    },
+    file: {
+      add_button_text: "Add file",
+    },
   },
   // from react package:
   side_menu: {
@@ -134,12 +177,50 @@ export const en = {
       tooltip: "Create link",
       secondary_tooltip: "Mod+K",
     },
-    image_caption: {
+    file_caption: {
       tooltip: "Edit caption",
       input_placeholder: "Edit caption",
     },
-    image_replace: {
-      tooltip: "Replace image",
+    file_replace: {
+      tooltip: {
+        image: "Replace image",
+        video: "Replace video",
+        audio: "Replace audio",
+        file: "Replace file",
+      } as Record<string, string>,
+    },
+    file_rename: {
+      tooltip: {
+        image: "Rename image",
+        video: "Rename video",
+        audio: "Rename audio",
+        file: "Rename file",
+      } as Record<string, string>,
+      input_placeholder: {
+        image: "Rename image",
+        video: "Rename video",
+        audio: "Rename audio",
+        file: "Rename file",
+      } as Record<string, string>,
+    },
+    file_download: {
+      tooltip: {
+        image: "Download image",
+        video: "Download video",
+        audio: "Download audio",
+        file: "Download file",
+      } as Record<string, string>,
+    },
+    file_delete: {
+      tooltip: {
+        image: "Delete image",
+        video: "Delete video",
+        audio: "Delete audio",
+        file: "Delete file",
+      } as Record<string, string>,
+    },
+    file_preview_toggle: {
+      tooltip: "Toggle preview",
     },
     nest: {
       tooltip: "Nest block",
@@ -162,15 +243,25 @@ export const en = {
       tooltip: "Justify text",
     },
   },
-  image_panel: {
+  file_panel: {
     upload: {
       title: "Upload",
-      file_placeholder: "Upload image",
+      file_placeholder: {
+        image: "Upload image",
+        video: "Upload video",
+        audio: "Upload audio",
+        file: "Upload file",
+      } as Record<string, string>,
       upload_error: "Error: Upload failed",
     },
     embed: {
       title: "Embed",
-      embed_button: "Embed image",
+      embed_button: {
+        image: "Embed image",
+        video: "Embed video",
+        audio: "Embed audio",
+        file: "Embed file",
+      } as Record<string, string>,
       url_placeholder: "Enter URL",
     },
   },

package/src/i18n/locales/fr.ts

@@ -1,4 +1,6 @@
-export const fr = {
+import { Dictionary } from "../dictionary";
+
+export const fr: Dictionary = {
   slash_menu: {
     heading: {
       title: "Titre 1",
@@ -53,11 +55,43 @@ export const fr = {
         "photo",
         "média",
         "url",
-        "drive",
-        "dropbox",
       ],
       group: "Médias",
     },
+    video: {
+      title: "Vidéo",
+      subtext: "Insérer une vidéo",
+      aliases: [
+        "vidéo",
+        "téléchargerVidéo",
+        "téléverser",
+        "mp4",
+        "film",
+        "média",
+        "url",
+      ],
+      group: "Média",
+    },
+    audio: {
+      title: "Audio",
+      subtext: "Insérer un audio",
+      aliases: [
+        "audio",
+        "téléchargerAudio",
+        "téléverser",
+        "mp3",
+        "son",
+        "média",
+        "url",
+      ],
+      group: "Média",
+    },
+    file: {
+      title: "Fichier",
+      subtext: "Insérer un fichier",
+      aliases: ["fichier", "téléverser", "intégrer", "média", "url"],
+      group: "Média",
+    },
   },
   placeholders: {
     default: "Entrez du texte ou tapez '/' pour les commandes",
@@ -65,8 +99,19 @@ export const fr = {
     bulletListItem: "Liste",
     numberedListItem: "Liste",
   },
-  image: {
-    add_button: "Ajouter une Image",
+  file_blocks: {
+    image: {
+      add_button_text: "Ajouter une image",
+    },
+    video: {
+      add_button_text: "Ajouter une vidéo",
+    },
+    audio: {
+      add_button_text: "Ajouter un audio",
+    },
+    file: {
+      add_button_text: "Ajouter un fichier",
+    },
   },
   // from react package:
   side_menu: {
@@ -134,12 +179,50 @@ export const fr = {
       tooltip: "Créer un lien",
       secondary_tooltip: "Mod+K",
     },
-    image_caption: {
+    file_caption: {
       tooltip: "Modifier la légende",
       input_placeholder: "Modifier la légende",
     },
-    image_replace: {
-      tooltip: "Remplacer l'image",
+    file_replace: {
+      tooltip: {
+        image: "Remplacer l'image",
+        video: "Remplacer la vidéo",
+        audio: "Remplacer l'audio",
+        file: "Remplacer le fichier",
+      },
+    },
+    file_rename: {
+      tooltip: {
+        image: "Renommer l'image",
+        video: "Renommer la vidéo",
+        audio: "Renommer l'audio",
+        file: "Renommer le fichier",
+      },
+      input_placeholder: {
+        image: "Renommer l'image",
+        video: "Renommer la vidéo",
+        audio: "Renommer l'audio",
+        file: "Renommer le fichier",
+      },
+    },
+    file_download: {
+      tooltip: {
+        image: "Télécharger l'image",
+        video: "Télécharger la vidéo",
+        audio: "Télécharger l'audio",
+        file: "Télécharger le fichier",
+      },
+    },
+    file_delete: {
+      tooltip: {
+        image: "Supprimer l'image",
+        video: "Supprimer la vidéo",
+        audio: "Supprimer l'audio",
+        file: "Supprimer le fichier",
+      },
+    },
+    file_preview_toggle: {
+      tooltip: "Basculer l'aperçu",
     },
     nest: {
       tooltip: "Emboîter le bloc",
@@ -162,15 +245,25 @@ export const fr = {
       tooltip: "Justifier le texte",
     },
   },
-  image_panel: {
+  file_panel: {
     upload: {
       title: "Télécharger",
-      file_placeholder: "Télécharger l'image",
+      file_placeholder: {
+        image: "Télécharger une image",
+        video: "Télécharger une vidéo",
+        audio: "Télécharger un fichier audio",
+        file: "Télécharger un fichier",
+      },
       upload_error: "Erreur : Échec du téléchargement",
     },
     embed: {
       title: "Intégrer",
-      embed_button: "Intégrer l'image",
+      embed_button: {
+        image: "Intégrer une image",
+        video: "Intégrer une vidéo",
+        audio: "Intégrer un fichier audio",
+        file: "Intégrer un fichier",
+      },
       url_placeholder: "Entrez l'URL",
     },
   },

package/src/i18n/locales/index.ts

@@ -1,4 +1,10 @@
 export * from "./en";
-export * from "./nl";
-export * from "./zh";
 export * from "./fr";
+export * from "./is";
+export * from "./ja";
+export * from "./ko";
+export * from "./nl";
+export * from "./pl";
+export * from "./pt";
+export * from "./vi";
+export * from "./zh";