Merge branch 'refs/heads/main' into releases

Author: matthewlipski

docs/pages/docs/editor-basics/default-schema.mdx

@@ -117,7 +117,7 @@ type TableBlock = {
   id: string;
   type: "table";
   props: DefaultProps;
-  content: TableContent[];
+  content: TableContent;
   children: Block[];
 };
 ```

examples/README.md

@@ -1,6 +1,6 @@
 # Examples
 
-Here, we collect a number of examples using BlockNote. You can run the examples via the Playground (`npm start` or [playground.blocknotejs.org](https://playground.blocknotejs.org/)).
+Here, we collect a number of examples using BlockNote. You can run the examples via the Playground (`npm start` or [online version](https://blocknote-main.vercel.app/)).
 
 ### (contributors) Adding examples
 

packages/core/src/api/parsers/handleFileInsertion.ts

@@ -1,14 +1,25 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { PartialBlock } from "../../blocks/defaultBlocks";
-import { insertOrUpdateBlock } from "../../extensions/SuggestionMenu/getDefaultSlashMenuItems";
 import {
   BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
+import { getBlockInfoFromPos } from "../getBlockInfoFromPos";
 import { acceptedMIMETypes } from "./acceptedMIMETypes";
 
+function checkFileExtensionsMatch(
+  fileExtension1: string,
+  fileExtension2: string
+) {
+  if (!fileExtension1.startsWith(".") || !fileExtension2.startsWith(".")) {
+    throw new Error(`The strings provided are not valid file extensions.`);
+  }
+
+  return fileExtension1 === fileExtension2;
+}
+
 function checkMIMETypesMatch(mimeType1: string, mimeType2: string) {
   const types1 = mimeType1.split("/");
   const types2 = mimeType2.split("/");
@@ -71,10 +82,24 @@ export async function handleFileInsertion<
     // Gets file block corresponding to MIME type.
     let fileBlockType = "file";
     for (const fileBlockConfig of fileBlockConfigs) {
-      for (const mimeType of fileBlockConfig.fileBlockAcceptMimeTypes || []) {
-        if (checkMIMETypesMatch(items[i].type, mimeType)) {
-          fileBlockType = fileBlockConfig.type;
-          break;
+      for (const mimeType of fileBlockConfig.fileBlockAccept || []) {
+        const isFileExtension = mimeType.startsWith(".");
+        const file = items[i].getAsFile();
+
+        if (file) {
+          if (
+            (!isFileExtension &&
+              file.type &&
+              checkMIMETypesMatch(items[i].type, mimeType)) ||
+            (isFileExtension &&
+              checkFileExtensionsMatch(
+                "." + file.name.split(".").pop(),
+                mimeType
+              ))
+          ) {
+            fileBlockType = fileBlockConfig.type;
+            break;
+          }
         }
       }
     }
@@ -83,16 +108,42 @@ export async function handleFileInsertion<
     if (file) {
       const updateData = await editor.uploadFile(file);
 
-      if (typeof updateData === "string") {
-        const fileBlock = {
-          type: fileBlockType,
-          props: {
-            name: file.name,
-            url: updateData,
-          },
-        } as PartialBlock<BSchema, I, S>;
+      const fileBlock =
+        typeof updateData === "string"
+          ? ({
+              type: fileBlockType,
+              props: {
+                name: file.name,
+                url: updateData,
+              },
+            } as PartialBlock<BSchema, I, S>)
+          : { type: fileBlockType, ...updateData };
+
+      if (event.type === "paste") {
+        editor.insertBlocks(
+          [fileBlock],
+          editor.getTextCursorPosition().block,
+          "after"
+        );
+      }
+
+      if (event.type === "drop") {
+        const coords = {
+          left: (event as DragEvent).clientX,
+          top: (event as DragEvent).clientY,
+        };
+
+        const pos = editor._tiptapEditor.view.posAtCoords(coords);
+        if (!pos) {
+          return;
+        }
+
+        const blockInfo = getBlockInfoFromPos(
+          editor._tiptapEditor.state.doc,
+          pos.pos
+        );
 
-        insertOrUpdateBlock(editor, fileBlock);
+        editor.insertBlocks([fileBlock], blockInfo.id, "after");
       }
     }
   }

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

@@ -43,7 +43,7 @@ export const audioBlockConfig = {
   propSchema: audioPropSchema,
   content: "none",
   isFileBlock: true,
-  fileBlockAcceptMimeTypes: ["audio/*"],
+  fileBlockAccept: ["audio/*"],
 } satisfies FileBlockConfig;
 
 export const audioRender = (

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

@@ -49,7 +49,7 @@ export const imageBlockConfig = {
   propSchema: imagePropSchema,
   content: "none",
   isFileBlock: true,
-  fileBlockAcceptMimeTypes: ["image/*"],
+  fileBlockAccept: ["image/*"],
 } satisfies FileBlockConfig;
 
 export const imageRender = (

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

@@ -49,7 +49,7 @@ export const videoBlockConfig = {
   propSchema: videoPropSchema,
   content: "none",
   isFileBlock: true,
-  fileBlockAcceptMimeTypes: ["video/*"],
+  fileBlockAccept: ["video/*"],
 } satisfies FileBlockConfig;
 
 export const videoRender = (

packages/core/src/editor/BlockNoteEditor.ts

@@ -1159,15 +1159,26 @@ export class BlockNoteEditor<
     };
   }
 
-  public openSelectionMenu(triggerCharacter: string) {
+  public openSuggestionMenu(
+    triggerCharacter: string,
+    pluginState?: {
+      deleteTriggerCharacter?: boolean;
+      ignoreQueryLength?: boolean;
+    }
+  ) {
+    const tr = this.prosemirrorView.state.tr;
+    const transaction =
+      pluginState && pluginState.deleteTriggerCharacter
+        ? tr.insertText(triggerCharacter)
+        : tr;
+
     this.prosemirrorView.focus();
     this.prosemirrorView.dispatch(
-      this.prosemirrorView.state.tr
-        .scrollIntoView()
-        .setMeta(this.suggestionMenus.plugin, {
-          triggerCharacter: triggerCharacter,
-          fromUserInput: false,
-        })
+      transaction.scrollIntoView().setMeta(this.suggestionMenus.plugin, {
+        triggerCharacter: triggerCharacter,
+        deleteTriggerCharacter: pluginState?.deleteTriggerCharacter || false,
+        ignoreQueryLength: pluginState?.ignoreQueryLength || false,
+      })
     );
   }
 }

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -664,7 +664,7 @@ export class SideMenuView<
     }
 
     // Focuses and activates the slash menu.
-    this.editor.openSelectionMenu("/");
+    this.editor.openSuggestionMenu("/");
   }
 }
 

packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -11,6 +11,7 @@ const findBlock = findParentNode((node) => node.type.name === "blockContainer");
 
 export type SuggestionMenuState = UiElementPosition & {
   query: string;
+  ignoreQueryLength?: boolean;
 };
 
 class SuggestionMenuView<
@@ -34,7 +35,10 @@ class SuggestionMenuView<
         throw new Error("Attempting to update uninitialized suggestions menu");
       }
 
-      emitUpdate(menuName, this.state);
+      emitUpdate(menuName, {
+        ...this.state,
+        ignoreQueryLength: this.pluginState?.ignoreQueryLength,
+      });
     };
 
     this.rootEl = this.editor._tiptapEditor.view.root;
@@ -120,7 +124,7 @@ class SuggestionMenuView<
       .deleteRange({
         from:
           this.pluginState.queryStartPos! -
-          (this.pluginState.fromUserInput
+          (this.pluginState.deleteTriggerCharacter
             ? this.pluginState.triggerCharacter!.length
             : 0),
         to: this.editor._tiptapEditor.state.selection.from,
@@ -132,10 +136,11 @@ class SuggestionMenuView<
 type SuggestionPluginState =
   | {
       triggerCharacter: string;
-      fromUserInput: boolean;
+      deleteTriggerCharacter: boolean;
       queryStartPos: number;
       query: string;
       decorationId: string;
+      ignoreQueryLength?: boolean;
     }
   | undefined;
 
@@ -194,7 +199,8 @@ export class SuggestionMenuProseMirrorPlugin<
           // or null if it should be hidden.
           const suggestionPluginTransactionMeta: {
             triggerCharacter: string;
-            fromUserInput?: boolean;
+            deleteTriggerCharacter?: boolean;
+            ignoreQueryLength?: boolean;
           } | null = transaction.getMeta(suggestionMenuPluginKey);
 
           // Only opens a menu of no menu is already open
@@ -206,11 +212,14 @@ export class SuggestionMenuProseMirrorPlugin<
             return {
               triggerCharacter:
                 suggestionPluginTransactionMeta.triggerCharacter,
-              fromUserInput:
-                suggestionPluginTransactionMeta.fromUserInput !== false,
+              deleteTriggerCharacter:
+                suggestionPluginTransactionMeta.deleteTriggerCharacter !==
+                false,
               queryStartPos: newState.selection.from,
               query: "",
               decorationId: `id_${Math.floor(Math.random() * 0xffffffff)}`,
+              ignoreQueryLength:
+                suggestionPluginTransactionMeta?.ignoreQueryLength,
             };
           }
 
@@ -285,7 +294,7 @@ export class SuggestionMenuProseMirrorPlugin<
 
           // If the menu was opened programmatically by another extension, it may not use a trigger character. In this
           // case, the decoration is set on the whole block instead, as the decoration range would otherwise be empty.
-          if (!suggestionPluginState.fromUserInput) {
+          if (!suggestionPluginState.deleteTriggerCharacter) {
             const blockNode = findBlock(state.selection);
             if (blockNode) {
               return DecorationSet.create(state.doc, [

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -272,7 +272,12 @@ export function getDefaultSlashMenuItems<
   }
 
   items.push({
-    onItemClick: () => editor.openSelectionMenu(":"),
+    onItemClick: () => {
+      editor.openSuggestionMenu(":", {
+        deleteTriggerCharacter: true,
+        ignoreQueryLength: true,
+      });
+    },
     key: "emoji",
     ...editor.dictionary.slash_menu.emoji,
   });

packages/core/src/schema/blocks/types.ts

@@ -50,7 +50,7 @@ export type FileBlockConfig = {
   };
   content: "none";
   isFileBlock: true;
-  fileBlockAcceptMimeTypes?: string[];
+  fileBlockAccept?: string[];
 };
 
 // BlockConfig contains the "schema" info about a Block type

packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx

@@ -76,8 +76,8 @@ export const UploadTab = <
 
   const config = editor.schema.blockSchema[block.type];
   const accept =
-    config.isFileBlock && config.fileBlockAcceptMimeTypes?.length
-      ? config.fileBlockAcceptMimeTypes.join(",")
+    config.isFileBlock && config.fileBlockAccept?.length
+      ? config.fileBlockAccept.join(",")
       : "*/*";
 
   return (

packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx

@@ -130,7 +130,8 @@ export function GridSuggestionMenuController<
   if (
     !isMounted ||
     !state ||
-    (minQueryLength &&
+    (!state?.ignoreQueryLength &&
+      minQueryLength &&
       (state.query.startsWith(" ") || state.query.length < minQueryLength))
   ) {
     return null;

packages/server-util/src/context/ServerBlockNoteEditor.ts

@@ -87,7 +87,9 @@ export class ServerBlockNoteEditor<
     >;
   }
 
-  private constructor(options: Partial<BlockNoteEditorOptions<any, any, any>>) {
+  protected constructor(
+    options: Partial<BlockNoteEditorOptions<any, any, any>>
+  ) {
     this.editor = BlockNoteEditor.create({
       ...options,
       _headless: true,