@blocknote/core 0.13.2 → 0.13.3

package/src/index.ts

@@ -2,7 +2,13 @@ import * as locales from "./i18n/locales";
 export * from "./api/exporters/html/externalHTMLExporter";
 export * from "./api/exporters/html/internalHTMLSerializer";
 export * from "./api/testUtil";
-export * from "./blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+export * from "./blocks/FileBlockContent/FileBlockContent";
+export * from "./blocks/ImageBlockContent/ImageBlockContent";
+export * from "./blocks/VideoBlockContent/VideoBlockContent";
+export * from "./blocks/AudioBlockContent/AudioBlockContent";
+
+export * from "./blocks/FileBlockContent/fileBlockHelpers";
+export * from "./blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 export * from "./blocks/defaultBlockTypeGuards";
 export * from "./blocks/defaultBlocks";
 export * from "./blocks/defaultProps";
@@ -11,8 +17,8 @@ export * from "./editor/BlockNoteExtensions";
 export * from "./editor/BlockNoteSchema";
 export * from "./editor/selectionTypes";
 export * from "./extensions-shared/UiElementPosition";
+export * from "./extensions/FilePanel/FilePanelPlugin";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
-export * from "./extensions/ImagePanel/ImageToolbarPlugin";
 export * from "./extensions/LinkToolbar/LinkToolbarPlugin";
 export * from "./extensions/SideMenu/SideMenuPlugin";
 export * from "./extensions/SuggestionMenu/DefaultSuggestionItem";
@@ -29,3 +35,4 @@ export * from "./extensions/UniqueID/UniqueID";
 export * from "./i18n/dictionary";
 export { UnreachableCaseError, assertEmpty } from "./util/typescript";
 export { locales };
+export { parseImageElement } from "./blocks/ImageBlockContent/imageBlockHelpers";

package/src/pm-nodes/BlockContainer.ts

@@ -691,7 +691,7 @@ export const BlockContainer = Node.create<{
         if (
           this.options.editor.formattingToolbar?.shown ||
           this.options.editor.linkToolbar?.shown ||
-          this.options.editor.imagePanel?.shown
+          this.options.editor.filePanel?.shown
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
@@ -703,7 +703,7 @@ export const BlockContainer = Node.create<{
         if (
           this.options.editor.formattingToolbar?.shown ||
           this.options.editor.linkToolbar?.shown ||
-          this.options.editor.imagePanel?.shown
+          this.options.editor.filePanel?.shown
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;

package/src/schema/blocks/createSpec.ts

@@ -193,6 +193,7 @@ export function createBlockSpec<
         block.type,
         block.props,
         blockConfig.propSchema,
+        blockConfig.isFileBlock,
         blockContentDOMAttributes
       );
     },

package/src/schema/blocks/internal.ts

@@ -109,6 +109,11 @@ export function getBlockFromPos<
   const blockContainer = tipTapEditor.state.doc.resolve(pos!).node();
   // Gets block identifier
   const blockIdentifier = blockContainer.attrs.id;
+
+  if (!blockIdentifier) {
+    throw new Error("Block doesn't have id");
+  }
+
   // Gets the block
   const block = editor.getBlock(blockIdentifier)! as SpecificBlock<
     BSchema,
@@ -139,6 +144,7 @@ export function wrapInBlockStructure<
   blockType: BType,
   blockProps: Props<PSchema>,
   propSchema: PSchema,
+  isFileBlock = false,
   domAttributes?: Record<string, string>
 ): {
   dom: HTMLElement;
@@ -171,6 +177,10 @@ export function wrapInBlockStructure<
       blockContent.setAttribute(camelToDataKebab(prop), value);
     }
   }
+  // Adds file block attribute
+  if (isFileBlock) {
+    blockContent.setAttribute("data-file-block", "");
+  }
 
   blockContent.appendChild(element.dom);
 

package/src/schema/blocks/types.ts

@@ -21,14 +21,50 @@ export type BlockNoteDOMAttributes = Partial<{
   [DOMElement in BlockNoteDOMElement]: Record<string, string>;
 }>;
 
-// BlockConfig contains the "schema" info about a Block type
-// i.e. what props it supports, what content it supports, etc.
-export type BlockConfig = {
+export type FileBlockConfig = {
   type: string;
-  readonly propSchema: PropSchema;
-  content: "inline" | "none" | "table";
+  readonly propSchema: PropSchema & {
+    caption: {
+      default: "";
+    };
+    name: {
+      default: "";
+    };
+
+    // URL is optional, as we also want to accept files with no URL, but for example ids
+    // (ids can be used for files that are resolved on the backend)
+    url?: {
+      default: "";
+    };
+
+    // Whether to show the file preview or the name only.
+    // This is useful for some file blocks, but not all
+    // (e.g.: not relevant for default "file" block which doesn;'t show previews)
+    showPreview?: {
+      default: boolean;
+    };
+    // File preview width in px.
+    previewWidth?: {
+      default: number;
+    };
+  };
+  content: "none";
+  isFileBlock: true;
+  isFileBlockPlaceholder: (block: any) => boolean;
+  fileBlockAcceptMimeTypes?: string[];
 };
 
+// BlockConfig contains the "schema" info about a Block type
+// i.e. what props it supports, what content it supports, etc.
+export type BlockConfig =
+  | {
+      type: string;
+      readonly propSchema: PropSchema;
+      content: "inline" | "none" | "table";
+      isFileBlock?: false;
+    }
+  | FileBlockConfig;
+
 // Block implementation contains the "implementation" info about a Block
 // such as the functions / Nodes required to render and / or serialize it
 export type TiptapBlockImplementation<

package/src/util/string.ts

@@ -1,3 +1,15 @@
 export function camelToDataKebab(str: string): string {
   return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
+
+export function filenameFromURL(url: string): string {
+  const parts = url.split("/");
+  if (
+    !parts.length || // invalid?
+    parts[parts.length - 1] === "" // for example, URL ends in a directory-like trailing slash
+  ) {
+    // in this case just return the original url
+    return url;
+  }
+  return parts[parts.length - 1];
+}

package/types/src/api/testUtil/cases/customBlocks.d.ts

@@ -1,10 +1,10 @@
 import { EditorTestCases } from "../index";
 import { DefaultInlineContentSchema, DefaultStyleSchema } from "../../../blocks/defaultBlocks";
 import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
-declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
+declare const schema: BlockNoteSchema<import("../../../schema").BlockSchemaFromSpecs<{
     simpleImage: {
         config: {
-            type: "simpleImage";
+            type: string;
             propSchema: {
                 textAlignment: {
                     default: "left";
@@ -13,20 +13,26 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 backgroundColor: {
                     default: "default";
                 };
+                name: {
+                    default: "";
+                };
                 url: {
                     default: "";
                 };
                 caption: {
                     default: "";
                 };
-                width: {
-                    default: 512;
+                showPreview: {
+                    default: true;
+                };
+                previewWidth: {
+                    default: number;
                 };
             };
             content: "none";
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
-            type: "simpleImage";
+        implementation: import("../../../schema").TiptapBlockImplementation<{
+            type: string;
             propSchema: {
                 textAlignment: {
                     default: "left";
@@ -35,22 +41,28 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 backgroundColor: {
                     default: "default";
                 };
+                name: {
+                    default: "";
+                };
                 url: {
                     default: "";
                 };
                 caption: {
                     default: "";
                 };
-                width: {
-                    default: 512;
+                showPreview: {
+                    default: true;
+                };
+                previewWidth: {
+                    default: number;
                 };
             };
             content: "none";
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     customParagraph: {
         config: {
-            type: "customParagraph";
+            type: string;
             propSchema: {
                 backgroundColor: {
                     default: "default";
@@ -65,8 +77,8 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
             };
             content: "inline";
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
-            type: "customParagraph";
+        implementation: import("../../../schema").TiptapBlockImplementation<{
+            type: string;
             propSchema: {
                 backgroundColor: {
                     default: "default";
@@ -80,11 +92,11 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
             content: "inline";
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     simpleCustomParagraph: {
         config: {
-            type: "simpleCustomParagraph";
+            type: string;
             propSchema: {
                 backgroundColor: {
                     default: "default";
@@ -99,8 +111,8 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
             };
             content: "inline";
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
-            type: "simpleCustomParagraph";
+        implementation: import("../../../schema").TiptapBlockImplementation<{
+            type: string;
             propSchema: {
                 backgroundColor: {
                     default: "default";
@@ -114,7 +126,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
             content: "inline";
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     paragraph: {
         config: {
@@ -133,7 +145,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
+        implementation: import("../../../schema").TiptapBlockImplementation<{
             type: "paragraph";
             content: "inline";
             propSchema: {
@@ -148,7 +160,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                     values: readonly ["left", "center", "right", "justify"];
                 };
             };
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     heading: {
         config: {
@@ -171,7 +183,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
+        implementation: import("../../../schema").TiptapBlockImplementation<{
             type: "heading";
             content: "inline";
             propSchema: {
@@ -190,7 +202,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                     values: readonly ["left", "center", "right", "justify"];
                 };
             };
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     bulletListItem: {
         config: {
@@ -209,7 +221,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
+        implementation: import("../../../schema").TiptapBlockImplementation<{
             type: "bulletListItem";
             content: "inline";
             propSchema: {
@@ -224,7 +236,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                     values: readonly ["left", "center", "right", "justify"];
                 };
             };
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     numberedListItem: {
         config: {
@@ -243,7 +255,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
+        implementation: import("../../../schema").TiptapBlockImplementation<{
             type: "numberedListItem";
             content: "inline";
             propSchema: {
@@ -258,7 +270,49 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                     values: readonly ["left", "center", "right", "justify"];
                 };
             };
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
+    };
+    file: {
+        config: {
+            type: "file";
+            propSchema: {
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+        };
+        implementation: import("../../../schema").TiptapBlockImplementation<{
+            type: "file";
+            propSchema: {
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     image: {
         config: {
@@ -271,19 +325,28 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 backgroundColor: {
                     default: "default";
                 };
+                name: {
+                    default: "";
+                };
                 url: {
                     default: "";
                 };
                 caption: {
                     default: "";
                 };
-                width: {
-                    default: 512;
+                showPreview: {
+                    default: true;
+                };
+                previewWidth: {
+                    default: number;
                 };
             };
             content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+            fileBlockAcceptMimeTypes: string[];
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
+        implementation: import("../../../schema").TiptapBlockImplementation<{
             type: "image";
             propSchema: {
                 textAlignment: {
@@ -293,18 +356,141 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 backgroundColor: {
                     default: "default";
                 };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+                showPreview: {
+                    default: true;
+                };
+                previewWidth: {
+                    default: number;
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+            fileBlockAcceptMimeTypes: string[];
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
+    };
+    video: {
+        config: {
+            type: "video";
+            propSchema: {
+                textAlignment: {
+                    default: "left";
+                    values: readonly ["left", "center", "right", "justify"];
+                };
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+                showPreview: {
+                    default: true;
+                };
+                previewWidth: {
+                    default: number;
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+            fileBlockAcceptMimeTypes: string[];
+        };
+        implementation: import("../../../schema").TiptapBlockImplementation<{
+            type: "video";
+            propSchema: {
+                textAlignment: {
+                    default: "left";
+                    values: readonly ["left", "center", "right", "justify"];
+                };
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+                showPreview: {
+                    default: true;
+                };
+                previewWidth: {
+                    default: number;
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+            fileBlockAcceptMimeTypes: string[];
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
+    };
+    audio: {
+        config: {
+            type: "audio";
+            propSchema: {
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+                showPreview: {
+                    default: true;
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+            fileBlockAcceptMimeTypes: string[];
+        };
+        implementation: import("../../../schema").TiptapBlockImplementation<{
+            type: "audio";
+            propSchema: {
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
                 url: {
                     default: "";
                 };
                 caption: {
                     default: "";
                 };
-                width: {
-                    default: 512;
+                showPreview: {
+                    default: true;
                 };
             };
             content: "none";
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+            isFileBlock: true;
+            isFileBlockPlaceholder: (block: any) => boolean;
+            fileBlockAcceptMimeTypes: string[];
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
     table: {
         config: {
@@ -323,7 +509,7 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                 };
             };
         };
-        implementation: import("../../..").TiptapBlockImplementation<{
+        implementation: import("../../../schema").TiptapBlockImplementation<{
             type: "table";
             content: "table";
             propSchema: {
@@ -338,9 +524,9 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
                     values: readonly ["left", "center", "right", "justify"];
                 };
             };
-        }, any, import("../../..").InlineContentSchema, import("../../..").StyleSchema>;
+        }, any, import("../../../schema").InlineContentSchema, import("../../../schema").StyleSchema>;
     };
-}>, import("../../..").InlineContentSchemaFromSpecs<{
+}>, import("../../../schema").InlineContentSchemaFromSpecs<{
     text: {
         config: "text";
         implementation: any;
@@ -349,55 +535,55 @@ declare const schema: BlockNoteSchema<import("../../..").BlockSchemaFromSpecs<{
         config: "link";
         implementation: any;
     };
-}>, import("../../..").StyleSchemaFromSpecs<{
+}>, import("../../../schema").StyleSchemaFromSpecs<{
     bold: {
         config: {
             type: string;
             propSchema: "boolean";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
     italic: {
         config: {
             type: string;
             propSchema: "boolean";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
     underline: {
         config: {
             type: string;
             propSchema: "boolean";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
     strike: {
         config: {
             type: string;
             propSchema: "boolean";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
     code: {
         config: {
             type: string;
             propSchema: "boolean";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
     textColor: {
         config: {
             type: string;
             propSchema: "string";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
     backgroundColor: {
         config: {
             type: string;
             propSchema: "string";
         };
-        implementation: import("../../..").StyleImplementation;
+        implementation: import("../../../schema").StyleImplementation;
     };
 }>>;
 export declare const customBlocksTestCases: EditorTestCases<typeof schema.blockSchema, DefaultInlineContentSchema, DefaultStyleSchema>;