fix: Improve setting text for custom file blocks

examples/06-custom-schema/04-pdf-file-block/src/App.tsx

@@ -4,6 +4,7 @@ import {
   filterSuggestionItems,
   insertOrUpdateBlock,
 } from "@blocknote/core";
+import { en } from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -17,6 +18,12 @@ import { RiFilePdfFill } from "react-icons/ri";
 
 import { PDF } from "./PDF";
 
+// Updated English dictionary with entries for PDF blocks.
+const dictionary = en;
+en.file_blocks.add_button_text["pdf"] = "Add PDF";
+en.file_panel.embed.embed_button["pdf"] = "Embed PDF";
+en.file_panel.upload.file_placeholder["pdf"] = "Upload PDF";
+
 // Our schema with block specs, which contain the configs and implementations for blocks
 // that we want our editor to use.
 const schema = BlockNoteSchema.create({
@@ -44,6 +51,7 @@ const insertPDF = (editor: typeof schema.BlockNoteEditor) => ({
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    dictionary,
     schema,
     initialContent: [
       {

examples/06-custom-schema/04-pdf-file-block/src/PDF.tsx

@@ -54,7 +54,6 @@ export const PDF = createReactBlockSpec(
     render: (props) => (
       <ResizableFileBlockWrapper
         {...(props as any)}
-        bbuttonText={"Add PDF"}
         buttonIcon={<RiFilePdfFill size={24} />}
       >
         <PDFPreview {...(props as any)} />

packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -69,7 +69,6 @@ export const audioRender = (
     block,
     editor,
     { dom: audio },
-    editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement,
   );
 };

packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts

@@ -4,7 +4,6 @@ import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
 export const createAddFileButton = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  buttonText?: string,
   buttonIcon?: HTMLElement,
 ) => {
   const addFileButton = document.createElement("div");
@@ -23,7 +22,9 @@ export const createAddFileButton = (
   const addFileButtonText = document.createElement("p");
   addFileButtonText.className = "bn-add-file-button-text";
   addFileButtonText.innerHTML =
-    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+    block.type in editor.dictionary.file_blocks.add_button_text
+      ? editor.dictionary.file_blocks.add_button_text[block.type]
+      : editor.dictionary.file_blocks.add_button_text["file"];
   addFileButton.appendChild(addFileButtonText);
 
   // Prevents focus from moving to the button.

packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts

@@ -15,7 +15,6 @@ export const createFileBlockWrapper = (
     any
   >,
   element?: { dom: HTMLElement; destroy?: () => void },
-  buttonText?: string,
   buttonIcon?: HTMLElement,
 ) => {
   const wrapper = document.createElement("div");
@@ -24,12 +23,7 @@ export const createFileBlockWrapper = (
   // Show the add file button if the file has not been uploaded yet. Change to
   // show a loader if a file upload for the block begins.
   if (block.props.url === "") {
-    const addFileButton = createAddFileButton(
-      block,
-      editor,
-      buttonText,
-      buttonIcon,
-    );
+    const addFileButton = createAddFileButton(block, editor, buttonIcon);
     wrapper.appendChild(addFileButton.dom);
 
     const destroyUploadStartHandler = editor.onUploadStart((blockId) => {

packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts

@@ -7,14 +7,12 @@ export const createResizableFileBlockWrapper = (
   editor: BlockNoteEditor<any, any, any>,
   element: { dom: HTMLElement; destroy?: () => void },
   resizeHandlesContainerElement: HTMLElement,
-  buttonText: string,
-  buttonIcon: HTMLElement,
+  buttonIcon?: HTMLElement,
 ): { dom: HTMLElement; destroy: () => void } => {
   const { dom, destroy } = createFileBlockWrapper(
     block,
     editor,
     element,
-    buttonText,
     buttonIcon,
   );
   const wrapper = dom;

packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -80,7 +80,6 @@ export const imageRender = (
     editor,
     { dom: imageWrapper },
     imageWrapper,
-    editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement,
   );
 };

packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -80,7 +80,6 @@ export const videoRender = (
     editor,
     { dom: videoWrapper },
     videoWrapper,
-    editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement,
   );
 };

packages/core/src/i18n/locales/ar.ts

@@ -169,18 +169,12 @@ export const ar: Dictionary = {
     comment_reply: "أضف تعليقًا...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "إضافة صورة",
-    },
-    video: {
-      add_button_text: "إضافة فيديو",
-    },
-    audio: {
-      add_button_text: "إضافة صوت",
-    },
-    file: {
-      add_button_text: "إضافة ملف",
-    },
+    add_button_text: {
+      image: "إضافة صورة",
+      video: "إضافة فيديو",
+      audio: "إضافة صوت",
+      file: "إضافة ملف",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "تبديل فارغ. انقر لإضافة كتلة.",

packages/core/src/i18n/locales/de.ts

@@ -204,18 +204,12 @@ export const de: Dictionary = {
     comment_reply: "Kommentar hinzufügen …",
   },
   file_blocks: {
-    image: {
-      add_button_text: "Bild hinzufügen",
-    },
-    video: {
-      add_button_text: "Video hinzufügen",
-    },
-    audio: {
-      add_button_text: "Audio hinzufügen",
-    },
-    file: {
-      add_button_text: "Datei hinzufügen",
-    },
+    add_button_text: {
+      image: "Bild hinzufügen",
+      video: "Video hinzufügen",
+      audio: "Audio hinzufügen",
+      file: "Datei hinzufügen",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button:

packages/core/src/i18n/locales/en.ts

@@ -184,18 +184,12 @@ export const en = {
     comment_reply: "Add comment...",
   } as Record<string | "default" | "emptyDocument", string | undefined>,
   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",
-    },
+    add_button_text: {
+      image: "Add image",
+      video: "Add video",
+      audio: "Add audio",
+      file: "Add file",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "Empty toggle. Click to add a block.",

packages/core/src/i18n/locales/es.ts

@@ -184,18 +184,12 @@ export const es: Dictionary = {
     comment_reply: "Agregar comentario...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "Agregar imagen",
-    },
-    video: {
-      add_button_text: "Agregar vídeo",
-    },
-    audio: {
-      add_button_text: "Agregar audio",
-    },
-    file: {
-      add_button_text: "Agregar archivo",
-    },
+    add_button_text: {
+      image: "Agregar imagen",
+      video: "Agregar vídeo",
+      audio: "Agregar audio",
+      file: "Agregar archivo",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "Toggle vacío. Haz clic para añadir un bloque.",

packages/core/src/i18n/locales/fr.ts

@@ -230,18 +230,12 @@ export const fr: Dictionary = {
     comment_reply: "Ajouter un commentaire...",
   },
   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",
-    },
+    add_button_text: {
+      image: "Ajouter une image",
+      video: "Ajouter une vidéo",
+      audio: "Ajouter un audio",
+      file: "Ajouter un fichier",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "Toggle vide. Cliquez pour ajouter un bloc.",

packages/core/src/i18n/locales/he.ts

@@ -186,18 +186,12 @@ export const he: Dictionary = {
     comment_reply: "הוסף תגובה...",
   } as Record<string | "default" | "emptyDocument", string | undefined>,
   file_blocks: {
-    image: {
-      add_button_text: "הוסף תמונה",
-    },
-    video: {
-      add_button_text: "הוסף וידאו",
-    },
-    audio: {
-      add_button_text: "הוסף אודיו",
-    },
-    file: {
-      add_button_text: "הוסף קובץ",
-    },
+    add_button_text: {
+      image: "הוסף תמונה",
+      video: "הוסף וידאו",
+      audio: "הוסף אודיו",
+      file: "הוסף קובץ",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "מתג ריק. לחץ כדי להוסיף בלוק.",

packages/core/src/i18n/locales/hr.ts

@@ -197,18 +197,12 @@ export const hr: Dictionary = {
     comment_reply: "Dodaj komentar...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "Dodaj sliku",
-    },
-    video: {
-      add_button_text: "Dodaj video",
-    },
-    audio: {
-      add_button_text: "Dodaj audio",
-    },
-    file: {
-      add_button_text: "Dodaj datoteku",
-    },
+    add_button_text: {
+      image: "Dodaj sliku",
+      video: "Dodaj video",
+      audio: "Dodaj audio",
+      file: "Dodaj datoteku",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "Prazan sklopivi blok. Klikni da dodaš sadržaj.",

packages/core/src/i18n/locales/is.ts

@@ -198,18 +198,12 @@ export const is: Dictionary = {
     comment_reply: "Bæta við athugasemd...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "Bæta við mynd",
-    },
-    video: {
-      add_button_text: "Bæta við myndbandi",
-    },
-    audio: {
-      add_button_text: "Bæta við hljóði",
-    },
-    file: {
-      add_button_text: "Bæta við skrá",
-    },
+    add_button_text: {
+      image: "Bæta við mynd",
+      video: "Bæta við myndbandi",
+      audio: "Bæta við hljóði",
+      file: "Bæta við skrá",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "Tóm fellilína. Smelltu til að bæta við blokk.",

packages/core/src/i18n/locales/it.ts

@@ -206,18 +206,12 @@ export const it: Dictionary = {
     comment_reply: "Aggiungi commento...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "Aggiungi immagine",
-    },
-    video: {
-      add_button_text: "Aggiungi video",
-    },
-    audio: {
-      add_button_text: "Aggiungi audio",
-    },
-    file: {
-      add_button_text: "Aggiungi file",
-    },
+    add_button_text: {
+      image: "Aggiungi immagine",
+      video: "Aggiungi video",
+      audio: "Aggiungi audio",
+      file: "Aggiungi file",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "Toggle vuoto. Clicca per aggiungere un blocco.",

packages/core/src/i18n/locales/ja.ts

@@ -224,18 +224,12 @@ export const ja: Dictionary = {
     comment_reply: "コメントを追加...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "画像を追加",
-    },
-    video: {
-      add_button_text: "ビデオを追加",
-    },
-    audio: {
-      add_button_text: "オーディオを追加",
-    },
-    file: {
-      add_button_text: "ファイルを追加",
-    },
+    add_button_text: {
+      image: "画像を追加",
+      video: "ビデオを追加",
+      audio: "オーディオを追加",
+      file: "ファイルを追加",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "空のトグルです。クリックしてブロックを追加。",

packages/core/src/i18n/locales/ko.ts

@@ -197,18 +197,12 @@ export const ko: Dictionary = {
     comment_reply: "댓글 추가...",
   },
   file_blocks: {
-    image: {
-      add_button_text: "이미지 추가",
-    },
-    video: {
-      add_button_text: "비디오 추가",
-    },
-    audio: {
-      add_button_text: "오디오 추가",
-    },
-    file: {
-      add_button_text: "파일 추가",
-    },
+    add_button_text: {
+      image: "이미지 추가",
+      video: "비디오 추가",
+      audio: "오디오 추가",
+      file: "파일 추가",
+    } as Record<string, string>,
   },
   toggle_blocks: {
     add_block_button: "비어 있는 토글입니다. 클릭하여 블록을 추가하세요.",