@blocknote/core 0.13.0 → 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/NonEditableBlocks/NonEditableBlockPlugin.ts

@@ -1,8 +1,20 @@
-import { Plugin, PluginKey } from "prosemirror-state";
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
 
 const PLUGIN_KEY = new PluginKey("non-editable-block");
-// Prevent typing for blocks without inline content, as this would otherwise
-// convert them into paragraph blocks.
+// By default, typing with a node selection active will cause ProseMirror to
+// replace the node with one that contains editable content. This plugin blocks
+// this behaviour without also blocking things like keyboard shortcuts:
+//
+// - Lets through key presses that do not include alphanumeric characters. This
+// includes things like backspace/delete/home/end/etc.
+// - Lets through any key presses that include ctrl/meta keys. These will be
+// shortcuts of some kind like ctrl+C/mod+C.
+// - Special case for Enter key which creates a new paragraph block below and
+// sets the selection to it. This is just to bring the UX closer to Notion
+//
+// While a more elegant solution would probably process transactions instead of
+// keystrokes, this brings us most of the way to Notion's UX without much added
+// complexity.
 export const NonEditableBlockPlugin = () => {
   return new Plugin({
     key: PLUGIN_KEY,
@@ -10,18 +22,37 @@ export const NonEditableBlockPlugin = () => {
       handleKeyDown: (view, event) => {
         // Checks for node selection
         if ("node" in view.state.selection) {
-          // Checks if key input will insert a character - we want to block this
-          // as it will convert the block into a paragraph.
-          if (
-            event.key.length === 1 &&
-            !event.ctrlKey &&
-            !event.altKey &&
-            !event.metaKey &&
-            !event.shiftKey
-          ) {
+          // Checks if key press uses ctrl/meta modifier
+          if (event.ctrlKey || event.metaKey) {
+            return false;
+          }
+          // Checks if key press is alphanumeric
+          if (event.key.length === 1) {
             event.preventDefault();
+
+            return true;
+          }
+          // Checks if key press is Enter
+          if (event.key === "Enter") {
+            const tr = view.state.tr;
+            view.dispatch(
+              tr
+                .insert(
+                  view.state.tr.selection.$to.after(),
+                  view.state.schema.nodes["paragraph"].create()
+                )
+                .setSelection(
+                  new TextSelection(
+                    tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
+                  )
+                )
+            );
+
+            return true;
           }
         }
+
+        return false;
       },
     },
   });

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

@@ -0,0 +1,289 @@
+import { Dictionary } from "../dictionary";
+
+export const fr: Dictionary = {
+  slash_menu: {
+    heading: {
+      title: "Titre 1",
+      subtext: "Utilisé pour un titre de premier niveau",
+      aliases: ["h", "titre1", "h1"],
+      group: "Titres",
+    },
+    heading_2: {
+      title: "Titre 2",
+      subtext: "Utilisé pour les sections clés",
+      aliases: ["h2", "titre2", "sous-titre"],
+      group: "Titres",
+    },
+    heading_3: {
+      title: "Titre 3",
+      subtext: "Utilisé pour les sous-sections et les titres de groupe",
+      aliases: ["h3", "titre3", "sous-titre"],
+      group: "Titres",
+    },
+    numbered_list: {
+      title: "Liste Numérotée",
+      subtext: "Utilisé pour afficher une liste numérotée",
+      aliases: ["ol", "li", "liste", "listenumérotée", "liste numérotée"],
+      group: "Blocs de base",
+    },
+    bullet_list: {
+      title: "Liste à Puces",
+      subtext: "Utilisé pour afficher une liste non ordonnée",
+      aliases: ["ul", "li", "liste", "listeàpuces", "liste à puces"],
+      group: "Blocs de base",
+    },
+    paragraph: {
+      title: "Paragraphe",
+      subtext: "Utilisé pour le corps de votre document",
+      aliases: ["p", "paragraphe"],
+      group: "Blocs de base",
+    },
+    table: {
+      title: "Tableau",
+      subtext: "Utilisé pour les tableaux",
+      aliases: ["tableau"],
+      group: "Avancé",
+    },
+    image: {
+      title: "Image",
+      subtext: "Insérer une image",
+      aliases: [
+        "image",
+        "uploadImage",
+        "télécharger",
+        "img",
+        "photo",
+        "média",
+        "url",
+      ],
+      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",
+    heading: "Titre",
+    bulletListItem: "Liste",
+    numberedListItem: "Liste",
+  },
+  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: {
+    add_block_label: "Ajouter un bloc",
+    drag_handle_label: "Ouvrir le menu du bloc",
+  },
+  drag_handle: {
+    delete_menuitem: "Supprimer",
+    colors_menuitem: "Couleurs",
+  },
+  table_handle: {
+    delete_column_menuitem: "Supprimer la colonne",
+    delete_row_menuitem: "Supprimer la ligne",
+    add_left_menuitem: "Ajouter une colonne à gauche",
+    add_right_menuitem: "Ajouter une colonne à droite",
+    add_above_menuitem: "Ajouter une ligne au-dessus",
+    add_below_menuitem: "Ajouter une ligne en dessous",
+  },
+  suggestion_menu: {
+    no_items_title: "Aucun élément trouvé",
+    loading: "Chargement…",
+  },
+  color_picker: {
+    text_title: "Texte",
+    background_title: "Fond",
+    colors: {
+      default: "Défaut",
+      gray: "Gris",
+      brown: "Marron",
+      red: "Rouge",
+      orange: "Orange",
+      yellow: "Jaune",
+      green: "Vert",
+      blue: "Bleu",
+      purple: "Violet",
+      pink: "Rose",
+    },
+  },
+
+  formatting_toolbar: {
+    bold: {
+      tooltip: "Gras",
+      secondary_tooltip: "Mod+B",
+    },
+    italic: {
+      tooltip: "Italique",
+      secondary_tooltip: "Mod+I",
+    },
+    underline: {
+      tooltip: "Souligner",
+      secondary_tooltip: "Mod+U",
+    },
+    strike: {
+      tooltip: "Barré",
+      secondary_tooltip: "Mod+Shift+X",
+    },
+    code: {
+      tooltip: "Code",
+      secondary_tooltip: "",
+    },
+    colors: {
+      tooltip: "Couleurs",
+    },
+    link: {
+      tooltip: "Créer un lien",
+      secondary_tooltip: "Mod+K",
+    },
+    file_caption: {
+      tooltip: "Modifier la légende",
+      input_placeholder: "Modifier la légende",
+    },
+    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",
+      secondary_tooltip: "Tab",
+    },
+    unnest: {
+      tooltip: "Démboîter le bloc",
+      secondary_tooltip: "Shift+Tab",
+    },
+    align_left: {
+      tooltip: "Aligner le texte à gauche",
+    },
+    align_center: {
+      tooltip: "Aligner le texte au centre",
+    },
+    align_right: {
+      tooltip: "Aligner le texte à droite",
+    },
+    align_justify: {
+      tooltip: "Justifier le texte",
+    },
+  },
+  file_panel: {
+    upload: {
+      title: "Télécharger",
+      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: {
+        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",
+    },
+  },
+  link_toolbar: {
+    delete: {
+      tooltip: "Supprimer le lien",
+    },
+    edit: {
+      text: "Modifier le lien",
+      tooltip: "Modifier",
+    },
+    open: {
+      tooltip: "Ouvrir dans un nouvel onglet",
+    },
+    form: {
+      title_placeholder: "Modifier le titre",
+      url_placeholder: "Modifier l'URL",
+    },
+  },
+  generic: {
+    ctrl_shortcut: "Ctrl",
+  },
+};

package/src/i18n/locales/index.ts

@@ -1,2 +1,10 @@
 export * from "./en";
+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";