@blocknote/core 0.13.2 → 0.13.3

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -0,0 +1,182 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+  BlockFromConfig,
+  createBlockSpec,
+  FileBlockConfig,
+  Props,
+  PropSchema,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
+
+import {
+  createAddFileButton,
+  createDefaultFilePreview,
+  createFigureWithCaption,
+  createFileAndCaptionWrapper,
+  createLinkWithCaption,
+  createResizeHandlesWrapper,
+  parseFigureElement,
+} from "../FileBlockContent/fileBlockHelpers";
+import { parseVideoElement } from "./videoBlockHelpers";
+
+export const videoPropSchema = {
+  textAlignment: defaultProps.textAlignment,
+  backgroundColor: defaultProps.backgroundColor,
+  // File name.
+  name: {
+    default: "" as const,
+  },
+  // File url.
+  url: {
+    default: "" as const,
+  },
+  // File caption.
+  caption: {
+    default: "" as const,
+  },
+
+  showPreview: {
+    default: true,
+  },
+  // File preview width in px.
+  previewWidth: {
+    default: 512,
+  },
+} satisfies PropSchema;
+
+export const videoBlockConfig = {
+  type: "video" as const,
+  propSchema: videoPropSchema,
+  content: "none",
+  isFileBlock: true,
+  isFileBlockPlaceholder: (block: any) => !block.props.url,
+  fileBlockAcceptMimeTypes: ["video/*"],
+} satisfies FileBlockConfig;
+
+export const videoRender = (
+  block: BlockFromConfig<typeof videoBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  if (block.props.url === "") {
+    const fileBlockVideoIcon = document.createElement("div");
+    fileBlockVideoIcon.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
+    const addVideoButton = createAddFileButton(
+      block,
+      editor,
+      editor.dictionary.file_blocks.video.add_button_text,
+      fileBlockVideoIcon.firstElementChild as HTMLElement
+    );
+    wrapper.appendChild(addVideoButton.dom);
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        addVideoButton?.destroy?.();
+      },
+    };
+  } else if (!block.props.showPreview) {
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
+
+    return {
+      dom: element.dom,
+    };
+  } else {
+    const video = document.createElement("video");
+    video.className = "bn-visual-media";
+    video.src = block.props.url;
+    video.controls = true;
+    video.contentEditable = "false";
+    video.draggable = false;
+    video.width = Math.min(
+      block.props.previewWidth,
+      editor.domElement.firstElementChild!.clientWidth
+    );
+
+    const file = createResizeHandlesWrapper(
+      block,
+      editor,
+      video,
+      () => video.width,
+      (width) => (video.width = width)
+    );
+
+    const element = createFileAndCaptionWrapper(block, file.dom);
+    wrapper.appendChild(element.dom);
+
+    return {
+      dom: wrapper,
+      destroy: file.destroy,
+    };
+  }
+};
+
+export const videoParse = (
+  element: HTMLElement
+): Partial<Props<typeof videoBlockConfig.propSchema>> | undefined => {
+  if (element.tagName === "VIDEO") {
+    return parseVideoElement(element as HTMLVideoElement);
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "video");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    return {
+      ...parseVideoElement(targetElement as HTMLVideoElement),
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const videoToExternalHTML = (
+  block: BlockFromConfig<typeof videoBlockConfig, any, any>
+) => {
+  if (!block.props.url) {
+    const div = document.createElement("p");
+    div.textContent = "Add video";
+
+    return {
+      dom: div,
+    };
+  }
+
+  let video;
+  if (block.props.showPreview) {
+    video = document.createElement("video");
+    video.src = block.props.url;
+    video.width = block.props.previewWidth;
+  } else {
+    video = document.createElement("a");
+    video.href = block.props.url;
+    video.textContent = block.props.name || block.props.url;
+  }
+
+  if (block.props.caption) {
+    if (block.props.showPreview) {
+      return createFigureWithCaption(video, block.props.caption);
+    } else {
+      return createLinkWithCaption(video, block.props.caption);
+    }
+  }
+
+  return {
+    dom: video,
+  };
+};
+
+export const VideoBlock = createBlockSpec(videoBlockConfig, {
+  render: videoRender,
+  parse: videoParse,
+  toExternalHTML: videoToExternalHTML,
+});

package/src/blocks/VideoBlockContent/videoBlockHelpers.ts

@@ -0,0 +1,6 @@
+export const parseVideoElement = (videoElement: HTMLVideoElement) => {
+  const url = videoElement.src || undefined;
+  const previewWidth = videoElement.width || undefined;
+
+  return { url, previewWidth };
+};

package/src/blocks/defaultBlockTypeGuards.ts

@@ -1,5 +1,11 @@
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
-import { BlockFromConfig, InlineContentSchema, StyleSchema } from "../schema";
+import {
+  BlockFromConfig,
+  BlockSchema,
+  FileBlockConfig,
+  InlineContentSchema,
+  StyleSchema,
+} from "../schema";
 import { Block, DefaultBlockSchema, defaultBlockSchema } from "./defaultBlocks";
 import { defaultProps } from "./defaultProps";
 
@@ -33,6 +39,52 @@ export function checkBlockIsDefaultType<
   );
 }
 
+export function checkBlockIsFileBlock<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<B, I, S>
+): block is BlockFromConfig<FileBlockConfig, I, S> {
+  return (
+    (block.type in editor.schema.blockSchema &&
+      editor.schema.blockSchema[block.type].isFileBlock) ||
+    false
+  );
+}
+
+export function checkBlockIsFileBlockWithPreview<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<B, I, S>
+): block is BlockFromConfig<
+  FileBlockConfig & {
+    propSchema: Required<FileBlockConfig["propSchema"]>;
+  },
+  I,
+  S
+> {
+  return (
+    (block.type in editor.schema.blockSchema &&
+      editor.schema.blockSchema[block.type].isFileBlock &&
+      "showPreview" in editor.schema.blockSchema[block.type].propSchema) ||
+    false
+  );
+}
+
+export function checkBlockIsFileBlockWithPlaceholder<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(block: Block<B, I, S>, editor: BlockNoteEditor<B, I, S>) {
+  const config = editor.schema.blockSchema[block.type];
+  return config.isFileBlock && config.isFileBlockPlaceholder(block);
+}
+
 export function checkBlockTypeHasDefaultProp<
   Prop extends keyof typeof defaultProps,
   I extends InlineContentSchema,

package/src/blocks/defaultBlocks.ts

@@ -19,19 +19,25 @@ import {
   getInlineContentSchemaFromSpecs,
   getStyleSchemaFromSpecs,
 } from "../schema";
+import { FileBlock } from "./FileBlockContent/FileBlockContent";
+import { ImageBlock } from "./ImageBlockContent/ImageBlockContent";
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent";
-import { Image } from "./ImageBlockContent/ImageBlockContent";
 import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
 import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
 import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent";
 import { Table } from "./TableBlockContent/TableBlockContent";
+import { VideoBlock } from "./VideoBlockContent/VideoBlockContent";
+import { AudioBlock } from "./AudioBlockContent/AudioBlockContent";
 
 export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
-  image: Image,
+  file: FileBlock,
+  image: ImageBlock,
+  video: VideoBlock,
+  audio: AudioBlock,
   table: Table,
 } satisfies BlockSpecs;
 

package/src/editor/Block.css

@@ -13,15 +13,9 @@ BASIC STYLES
   flex-direction: column;
 }
 
-/*Ensures block content inside React node views spans editor width*/
-.bn-react-node-view-renderer {
-  display: flex;
-  flex-grow: 1;
-}
-
 .bn-block-content {
+  display: flex;
   padding: 3px 0;
-  flex-grow: 1;
   transition: font-size 0.2s;
   width: 100%;
   /*
@@ -36,6 +30,13 @@ BASIC STYLES
   /*margin: 0px;*/
 }
 
+.bn-block-content.ProseMirror-selectednode > *,
+/* Case for node view renderers */
+.ProseMirror-selectednode > .bn-block-content > * {
+  border-radius: 4px;
+  outline: 4px solid rgb(100, 160, 255);
+}
+
 /*
 NESTED BLOCKS
 */
@@ -235,49 +236,75 @@ NESTED BLOCKS
   content: "▪";
 }
 
-/* IMAGES */
+/* FILES */
+
+/* Add block button & default preview */
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
+  width: 100%;
+}
 
-[data-content-type="image"] .bn-image-block-content-wrapper {
+[data-file-block] .bn-file-block-content-wrapper {
+  cursor: pointer;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: stretch;
   user-select: none;
-  width: 100%;
 }
 
-[data-content-type="image"] .bn-add-image-button {
-  display: flex;
-  flex-direction: row;
+[data-file-block] .bn-add-file-button {
   align-items: center;
-  gap: 8px;
-  background-color: whitesmoke;
+  background-color: rgb(242, 241, 238);
   border-radius: 4px;
+  color: rgb(125, 121, 122);
   cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
   padding: 12px;
   width: 100%;
 }
 
-[data-content-type="image"] .bn-add-image-button:hover {
-  background-color: gainsboro;
+[data-file-block] .bn-add-file-button:hover {
+  background-color: rgb(225, 225, 225);
 }
 
-[data-content-type="image"] .bn-add-image-button-icon {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z'%3E%3C/path%3E%3C/svg%3E");
+[data-file-block] .bn-add-file-button-icon {
   width: 24px;
   height: 24px;
 }
 
-[data-content-type="image"] .bn-add-image-button-text {
-  color: black;
+[data-file-block] .bn-add-file-button .bn-add-file-button-text {
+  font-size: 0.9rem;
 }
 
-[data-content-type="image"] .bn-image-and-caption-wrapper {
+[data-file-block] .bn-file-and-caption-wrapper {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
 }
 
-[data-content-type="image"] .bn-image-wrapper {
+[data-file-block] .bn-file-default-preview {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  padding: 4px;
+  width: 100%;
+}
+
+[data-file-block] .bn-file-default-preview:hover,
+.ProseMirror-selectednode .bn-file-default-preview {
+  background-color: rgb(225, 225, 225);
+}
+
+[data-file-block] .bn-file-default-preview-icon {
+  width: 24px;
+  height: 24px;
+}
+
+[data-file-block] .bn-visual-media-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -285,12 +312,12 @@ NESTED BLOCKS
   width: fit-content;
 }
 
-[data-content-type="image"] .bn-image {
+[data-file-block] .bn-visual-media {
   border-radius: 4px;
   max-width: 100%;
 }
 
-[data-content-type="image"] .bn-image-resize-handle {
+[data-file-block] .bn-visual-media-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;
@@ -300,8 +327,17 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="image"] .caption {
+[data-content-type="audio"] > .bn-file-block-content-wrapper, .bn-audio {
+  width: 100%;
+}
+
+[data-file-block] .bn-file-caption {
   font-size: 0.8em;
+  padding-block: 4px;
+}
+
+[data-file-block] .bn-file-caption:empty {
+  padding-block: 0;
 }
 
 /* PLACEHOLDERS*/
@@ -392,17 +428,21 @@ NESTED BLOCKS
 
 /* TEXT ALIGNMENT */
 [data-text-alignment="left"] {
+  justify-content: flex-start;
   text-align: left;
 }
 
 [data-text-alignment="center"] {
+  justify-content: center;
   text-align: center;
 }
 
 [data-text-alignment="right"] {
+  justify-content: flex-end;
   text-align: right;
 }
 
 [data-text-alignment="justify"] {
+  justify-content: flex-start;
   text-align: justify;
 }

package/src/editor/BlockNoteEditor.ts

@@ -26,8 +26,8 @@ import {
   DefaultStyleSchema,
   PartialBlock,
 } from "../blocks/defaultBlocks";
+import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
-import { ImagePanelProsemirrorPlugin } from "../extensions/ImagePanel/ImageToolbarPlugin";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin";
@@ -113,9 +113,9 @@ export type BlockNoteEditorOptions<
   /**
    * A custom function to handle file uploads.
    * @param file The file that should be uploaded.
-   * @returns The URL of the uploaded file.
+   * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
    */
-  uploadFile: (file: File) => Promise<string>;
+  uploadFile: (file: File) => Promise<string | Record<string, any>>;
 
   /**
    * When enabled, allows for collaboration between multiple users.
@@ -187,13 +187,19 @@ export class BlockNoteEditor<
     ISchema,
     SSchema
   >;
-  public readonly imagePanel?: ImagePanelProsemirrorPlugin<ISchema, SSchema>;
+  public readonly filePanel?: FilePanelProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema
+  >;
   public readonly tableHandles?: TableHandlesProsemirrorPlugin<
     ISchema,
     SSchema
   >;
 
-  public readonly uploadFile: ((file: File) => Promise<string>) | undefined;
+  public readonly uploadFile:
+    | ((file: File) => Promise<string | Record<string, any>>)
+    | undefined;
 
   public static create<
     BSchema extends BlockSchema = DefaultBlockSchema,
@@ -254,10 +260,8 @@ export class BlockNoteEditor<
     this.linkToolbar = new LinkToolbarProsemirrorPlugin(this);
     this.sideMenu = new SideMenuProsemirrorPlugin(this);
     this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
-    if (checkDefaultBlockTypeInSchema("image", this)) {
-      // Type guards only work on `const`s? Not working for `this`
-      this.imagePanel = new ImagePanelProsemirrorPlugin(this as any);
-    }
+    this.filePanel = new FilePanelProsemirrorPlugin(this as any);
+
     if (checkDefaultBlockTypeInSchema("table", this)) {
       this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
     }
@@ -282,7 +286,7 @@ export class BlockNoteEditor<
           this.linkToolbar.plugin,
           this.sideMenu.plugin,
           this.suggestionMenus.plugin,
-          ...(this.imagePanel ? [this.imagePanel.plugin] : []),
+          ...(this.filePanel ? [this.filePanel.plugin] : []),
           ...(this.tableHandles ? [this.tableHandles.plugin] : []),
           PlaceholderPlugin(this, newOptions.placeholders),
         ];

package/src/editor/BlockNoteSchema.ts

@@ -23,6 +23,15 @@ import type {
 } from "../schema/blocks/types";
 import type { BlockNoteEditor } from "./BlockNoteEditor";
 
+function removeUndefined<T extends Record<string, any> | undefined>(obj: T): T {
+  if (!obj) {
+    return obj;
+  }
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== undefined)
+  ) as T;
+}
+
 export class BlockNoteSchema<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
@@ -84,10 +93,10 @@ export class BlockNoteSchema<
     inlineContentSpecs?: InlineContentSpecs;
     styleSpecs?: StyleSpecs;
   }) {
-    this.blockSpecs = opts?.blockSpecs || defaultBlockSpecs;
+    this.blockSpecs = removeUndefined(opts?.blockSpecs) || defaultBlockSpecs;
     this.inlineContentSpecs =
-      opts?.inlineContentSpecs || defaultInlineContentSpecs;
-    this.styleSpecs = opts?.styleSpecs || defaultStyleSpecs;
+      removeUndefined(opts?.inlineContentSpecs) || defaultInlineContentSpecs;
+    this.styleSpecs = removeUndefined(opts?.styleSpecs) || defaultStyleSpecs;
 
     this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any;
     this.inlineContentSchema = getInlineContentSchemaFromSpecs(

package/src/extensions/{ImagePanel/ImageToolbarPlugin.ts → FilePanel/FilePanelPlugin.ts}

@@ -1,30 +1,29 @@
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
-import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import type {
   BlockFromConfig,
+  BlockSchema,
+  FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
-export type ImagePanelState<
+export type FilePanelState<
   I extends InlineContentSchema,
   S extends StyleSchema
 > = UiElementPosition & {
   // TODO: This typing is not quite right (children should be from BSchema)
-  block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
+  block: BlockFromConfig<FileBlockConfig, I, S>;
 };
 
-export class ImagePanelView<
-  I extends InlineContentSchema,
-  S extends StyleSchema
-> implements PluginView
+export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
+  implements PluginView
 {
-  public state?: ImagePanelState<I, S>;
+  public state?: FilePanelState<I, S>;
   public emitUpdate: () => void;
 
   public prevWasEditable: boolean | null = null;
@@ -32,11 +31,11 @@ export class ImagePanelView<
   constructor(
     private readonly pluginKey: PluginKey,
     private readonly pmView: EditorView,
-    emitUpdate: (state: ImagePanelState<I, S>) => void
+    emitUpdate: (state: FilePanelState<I, S>) => void
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
-        throw new Error("Attempting to update uninitialized image panel");
+        throw new Error("Attempting to update uninitialized file panel");
       }
 
       emitUpdate(this.state);
@@ -77,7 +76,7 @@ export class ImagePanelView<
 
   update(view: EditorView, prevState: EditorState) {
     const pluginState: {
-      block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
+      block: BlockFromConfig<FileBlockConfig, I, S>;
     } = this.pluginKey.getState(view.state);
 
     if (!this.state?.show && pluginState.block) {
@@ -124,27 +123,26 @@ export class ImagePanelView<
   }
 }
 
-const imagePanelPluginKey = new PluginKey("ImagePanelPlugin");
+const filePanelPluginKey = new PluginKey("FilePanelPlugin");
 
-export class ImagePanelProsemirrorPlugin<
+export class FilePanelProsemirrorPlugin<
+  B extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: ImagePanelView<I, S> | undefined;
+  private view: FilePanelView<I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(
-    _editor: BlockNoteEditor<{ image: DefaultBlockSchema["image"] }, I, S>
-  ) {
+  constructor(_editor: BlockNoteEditor<B, I, S>) {
     super();
     this.plugin = new Plugin<{
-      block: BlockFromConfig<DefaultBlockSchema["image"], I, S> | undefined;
+      block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
     }>({
-      key: imagePanelPluginKey,
+      key: filePanelPluginKey,
       view: (editorView) => {
-        this.view = new ImagePanelView(
+        this.view = new FilePanelView(
           // editor,
-          imagePanelPluginKey,
+          filePanelPluginKey,
           editorView,
           (state) => {
             this.emit("update", state);
@@ -168,9 +166,8 @@ export class ImagePanelProsemirrorPlugin<
           };
         },
         apply: (transaction) => {
-          const block:
-            | BlockFromConfig<DefaultBlockSchema["image"], I, S>
-            | undefined = transaction.getMeta(imagePanelPluginKey)?.block;
+          const block: BlockFromConfig<FileBlockConfig, I, S> | undefined =
+            transaction.getMeta(filePanelPluginKey)?.block;
 
           return {
             block,
@@ -184,7 +181,7 @@ export class ImagePanelProsemirrorPlugin<
     return this.view?.state?.show || false;
   }
 
-  public onUpdate(callback: (state: ImagePanelState<I, S>) => void) {
+  public onUpdate(callback: (state: FilePanelState<I, S>) => void) {
     return this.on("update", callback);
   }