fix: Improve setting text for custom file blocks (#1984)

Author: matthewlipski

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: