TypeCellOS · matthewlipski · May 21, 2024 · May 3, 2024 · May 8, 2024 · May 13, 2024
diff --git a/examples/01-basic/testing/App.tsx b/examples/01-basic/testing/App.tsx
@@ -1,13 +1,32 @@
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
+import {
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  uploadToTmpFilesDotOrg_DEV_ONLY,
+} from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import {
+  ReactAudioBlock,
+  ReactImageBlock,
+  ReactVideoBlock,
+  useCreateBlockNote,
+} from "@blocknote/react";
+
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    image: ReactImageBlock,
+    video: ReactVideoBlock,
+    audio: ReactAudioBlock,
+  },
+});
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+    schema,
   });
 
   // Renders the editor instance using a React component.

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ariakit/src/index.tsx b/packages/ariakit/src/index.tsx
@@ -42,7 +42,7 @@ export const components: Components = {
     Button: ToolbarButton,
     Select: ToolbarSelect,
   },
-  ImagePanel: {
+  FilePanel: {
     Root: Panel,
     Button: PanelButton,
     FileInput: PanelFileInput,

diff --git a/packages/ariakit/src/panel/Panel.tsx b/packages/ariakit/src/panel/Panel.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 
 export const Panel = forwardRef<
   HTMLDivElement,
-  ComponentProps["ImagePanel"]["Root"]
+  ComponentProps["FilePanel"]["Root"]
 >((props, ref) => {
   const {
     className,

diff --git a/packages/ariakit/src/panel/PanelButton.tsx b/packages/ariakit/src/panel/PanelButton.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 
 export const PanelButton = forwardRef<
   HTMLButtonElement,
-  ComponentProps["ImagePanel"]["Button"]
+  ComponentProps["FilePanel"]["Button"]
 >((props, ref) => {
   const { className, children, onClick, label, ...rest } = props;
 

diff --git a/packages/ariakit/src/panel/PanelFileInput.tsx b/packages/ariakit/src/panel/PanelFileInput.tsx
@@ -6,9 +6,9 @@ import { forwardRef } from "react";
 
 export const PanelFileInput = forwardRef<
   HTMLInputElement,
-  ComponentProps["ImagePanel"]["FileInput"]
+  ComponentProps["FilePanel"]["FileInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onChange, ...rest } = props;
+  const { className, accept, value, placeholder, onChange, ...rest } = props;
 
   assertEmpty(rest);
 
@@ -19,6 +19,7 @@ export const PanelFileInput = forwardRef<
         ref={ref}
         name={"panel-input"}
         type={"file"}
+        accept={accept}
         value={value ? value.name : undefined}
         onChange={async (e) => onChange?.(e.target.files![0])}
         placeholder={placeholder}

diff --git a/packages/ariakit/src/panel/PanelTab.tsx b/packages/ariakit/src/panel/PanelTab.tsx
@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 
 export const PanelTab = forwardRef<
   HTMLDivElement,
-  ComponentProps["ImagePanel"]["TabPanel"]
+  ComponentProps["FilePanel"]["TabPanel"]
 >((props, ref) => {
   const { className, children, ...rest } = props;
 

diff --git a/packages/ariakit/src/panel/PanelTextInput.tsx b/packages/ariakit/src/panel/PanelTextInput.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 
 export const PanelTextInput = forwardRef<
   HTMLInputElement,
-  ComponentProps["ImagePanel"]["TextInput"]
+  ComponentProps["FilePanel"]["TextInput"]
 >((props, ref) => {
   const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
 

diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/file/basic/external.html
@@ -0,0 +1 @@
+<figure><embed src="exampleURL"><figcaption>Caption</figcaption></figure>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/basic/internal.html
@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/button/external.html b/packages/core/src/api/exporters/html/__snapshots__/file/button/external.html
@@ -0,0 +1 @@
+<p>Add file</p>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/button/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/button/internal.html
@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file"><div class="bn-file-block-content-wrapper"><div class="bn-add-file-button"><div class="bn-add-file-button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg></div><p class="bn-add-file-button-text">Add file</p></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/nested/external.html b/packages/core/src/api/exporters/html/__snapshots__/file/nested/external.html
@@ -0,0 +1 @@
+<figure><embed src="exampleURL"><figcaption>Caption</figcaption></figure><figure><embed src="exampleURL"><figcaption>Caption</figcaption></figure>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/nested/internal.html
@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/image/basic/external.html
@@ -1 +1 @@
-<figure><img src="exampleURL"><figcaption>Caption</figcaption></figure>
+<figure><img src="exampleURL" width="256" alt="Caption"><figcaption>Caption</figcaption></figure>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-file-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/button/external.html b/packages/core/src/api/exporters/html/__snapshots__/image/button/external.html
@@ -1 +1 @@
-<p>Add Image</p>
+<p>Add image</p>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/button/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/button/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-add-image-button"><div class="bn-add-image-button-icon"></div><p class="bn-add-image-button-text"></p></div></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-file-type="image"><div class="bn-file-block-content-wrapper"><div class="bn-add-file-button"><div class="bn-add-file-button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg></div><p class="bn-add-file-button-text">Add image</p></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/nested/external.html b/packages/core/src/api/exporters/html/__snapshots__/image/nested/external.html
@@ -1 +1 @@
-<figure><img src="exampleURL"><figcaption>Caption</figcaption></figure><figure><img src="exampleURL"><figcaption>Caption</figcaption></figure>
+<figure><img src="exampleURL" width="256" alt="Caption"><figcaption>Caption</figcaption></figure><figure><img src="exampleURL" width="256" alt="Caption"><figcaption>Caption</figcaption></figure>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-width="256"><div class="bn-image-block-content-wrapper" style="align-items: flex-start;"><div class="bn-image-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="placeholder" draggable="false" style="width: 0px;"></div><p class="bn-image-caption" style="padding: 4px;"></p></div></div></div></div></div></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-file-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="file" data-file-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-image-wrapper"><img class="bn-image" src="exampleURL" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleFile/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleFile/basic/external.html
@@ -0,0 +1 @@
+<div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleFile/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleFile/basic/internal.html
@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleFile" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleFile/button/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleFile/button/external.html
@@ -0,0 +1 @@
+<div class="bn-file-block-content-wrapper"><div class="bn-add-file-button"><div class="bn-add-file-button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg></div><p class="bn-add-file-button-text">Add file</p></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleFile/button/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleFile/button/internal.html
@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleFile"><div class="bn-file-block-content-wrapper"><div class="bn-add-file-button"><div class="bn-add-file-button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg></div><p class="bn-add-file-button-text">Add file</p></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleFile/nested/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleFile/nested/external.html
@@ -0,0 +1 @@
+<div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div>
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleFile/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleFile/nested/internal.html
@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleFile" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleFile" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/file/basic/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/file/basic/markdown.md
@@ -0,0 +1 @@
+Caption
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/file/button/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/file/button/markdown.md
@@ -0,0 +1 @@
+Add file
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/file/nested/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/file/nested/markdown.md
@@ -0,0 +1,3 @@
+Caption
+
+Caption
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/image/basic/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/image/basic/markdown.md
@@ -1,3 +1,3 @@
-![](exampleURL)
+![Caption](exampleURL)
 
 Caption
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/image/button/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/image/button/markdown.md
@@ -1 +1 @@
-Add Image
+Add image
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/image/nested/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/image/nested/markdown.md
@@ -1,7 +1,7 @@
-![](exampleURL)
+![Caption](exampleURL)
 
 Caption
 
-![](exampleURL)
+![Caption](exampleURL)
 
 Caption
diff --git a/...ages/core/src/api/exporters/markdown/__snapshots__/simpleFile/basic/markdown.md b/...ages/core/src/api/exporters/markdown/__snapshots__/simpleFile/basic/markdown.md
@@ -0,0 +1,3 @@
+exampleURL
+
+Caption
diff --git a/...ges/core/src/api/exporters/markdown/__snapshots__/simpleFile/button/markdown.md b/...ges/core/src/api/exporters/markdown/__snapshots__/simpleFile/button/markdown.md
@@ -0,0 +1 @@
+Add file
diff --git a/...ges/core/src/api/exporters/markdown/__snapshots__/simpleFile/nested/markdown.md b/...ges/core/src/api/exporters/markdown/__snapshots__/simpleFile/nested/markdown.md
@@ -0,0 +1,7 @@
+exampleURL
+
+Caption
+
+exampleURL
+
+Caption
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<figure><embed src="exampleURL"><figcaption>Caption</figcaption></figure>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<figure><img src="exampleURL"><figcaption>Caption</figcaption></figure>
		<figure><img src="exampleURL" width="256" alt="Caption"><figcaption>Caption</figcaption></figure>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file" draggable="false">exampleURL</div><p class="bn-file-caption">Caption</p></div></div>