@blocknote/core 0.20.0 → 0.21.0

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -8,14 +8,11 @@ import {
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
 
-import {
-  createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseAudioElement } from "./audioBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "../FileBlockContent/helpers/render/createFileBlockWrapper.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseAudioElement } from "./parseAudioElement.js";
 
 export const FILE_AUDIO_ICON_SVG =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
@@ -57,19 +54,21 @@ export const audioRender = (
 
   const audio = document.createElement("audio");
   audio.className = "bn-audio";
-  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-    audio.src = downloadUrl;
-  });
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      audio.src = downloadUrl;
+    });
+  } else {
+    audio.src = block.props.url;
+  }
   audio.controls = true;
   audio.contentEditable = "false";
   audio.draggable = false;
 
-  const element = createFileAndCaptionWrapper(block, audio);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    { dom: audio },
     editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement
   );

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -6,14 +6,10 @@ import {
   createBlockSpec,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-import {
-  createDefaultFilePreview,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  parseEmbedElement,
-  parseFigureElement,
-} from "./fileBlockHelpers.js";
+import { parseEmbedElement } from "./helpers/parse/parseEmbedElement.js";
+import { parseFigureElement } from "./helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "./helpers/render/createFileBlockWrapper.js";
+import { createLinkWithCaption } from "./helpers/toExternalHTML/createLinkWithCaption.js";
 
 export const filePropSchema = {
   backgroundColor: defaultProps.backgroundColor,
@@ -42,10 +38,7 @@ export const fileRender = (
   block: BlockFromConfig<typeof fileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const file = createDefaultFilePreview(block).dom;
-  const element = createFileAndCaptionWrapper(block, file);
-
-  return createFileBlockWrapper(block, editor, element);
+  return createFileBlockWrapper(block, editor);
 };
 
 export const fileParse = (element: HTMLElement) => {

package/src/blocks/FileBlockContent/helpers/parse/parseEmbedElement.ts

@@ -0,0 +1,5 @@
+export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
+  const url = embedElement.src || undefined;
+
+  return { url };
+};

package/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts

@@ -0,0 +1,16 @@
+export const parseFigureElement = (
+  figureElement: HTMLElement,
+  targetTag: string
+) => {
+  const targetElement = figureElement.querySelector(
+    targetTag
+  ) as HTMLElement | null;
+  if (!targetElement) {
+    return undefined;
+  }
+
+  const captionElement = figureElement.querySelector("figcaption");
+  const caption = captionElement?.textContent ?? undefined;
+
+  return { targetElement, caption };
+};

package/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts

@@ -0,0 +1,63 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+
+export const createAddFileButton = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  buttonText?: string,
+  buttonIcon?: HTMLElement
+) => {
+  const addFileButton = document.createElement("div");
+  addFileButton.className = "bn-add-file-button";
+
+  const addFileButtonIcon = document.createElement("div");
+  addFileButtonIcon.className = "bn-add-file-button-icon";
+  if (buttonIcon) {
+    addFileButtonIcon.appendChild(buttonIcon);
+  } else {
+    addFileButtonIcon.innerHTML =
+      '<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>';
+  }
+  addFileButton.appendChild(addFileButtonIcon);
+
+  const addFileButtonText = document.createElement("p");
+  addFileButtonText.className = "bn-add-file-button-text";
+  addFileButtonText.innerHTML =
+    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+  addFileButton.appendChild(addFileButtonText);
+
+  // Prevents focus from moving to the button.
+  const addFileButtonMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+  // Opens the file toolbar.
+  const addFileButtonClickHandler = () => {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        block: block,
+      })
+    );
+  };
+  addFileButton.addEventListener(
+    "mousedown",
+    addFileButtonMouseDownHandler,
+    true
+  );
+  addFileButton.addEventListener("click", addFileButtonClickHandler, true);
+
+  return {
+    dom: addFileButton,
+    destroy: () => {
+      addFileButton.removeEventListener(
+        "mousedown",
+        addFileButtonMouseDownHandler,
+        true
+      );
+      addFileButton.removeEventListener(
+        "click",
+        addFileButtonClickHandler,
+        true
+      );
+    },
+  };
+};

package/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts

@@ -0,0 +1,80 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import {
+  BlockFromConfig,
+  BlockSchemaWithBlock,
+  FileBlockConfig,
+} from "../../../../schema/index.js";
+import { createAddFileButton } from "./createAddFileButton.js";
+import { createFileNameWithIcon } from "./createFileNameWithIcon.js";
+
+export const createFileBlockWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<
+    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
+    any,
+    any
+  >,
+  element?: { dom: HTMLElement; destroy?: () => void },
+  buttonText?: string,
+  buttonIcon?: HTMLElement
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  // Show the add file button if the file has not been uploaded yet. Change to
+  // show a loader if a file upload for the block begins.
+  if (block.props.url === "") {
+    const addFileButton = createAddFileButton(
+      block,
+      editor,
+      buttonText,
+      buttonIcon
+    );
+    wrapper.appendChild(addFileButton.dom);
+
+    const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
+      if (blockId === block.id) {
+        wrapper.removeChild(addFileButton.dom);
+
+        const loading = document.createElement("div");
+        loading.className = "bn-file-loading-preview";
+        loading.textContent = "Loading...";
+        wrapper.appendChild(loading);
+      }
+    });
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        destroyUploadStartHandler();
+        addFileButton.destroy();
+      },
+    };
+  }
+
+  const ret: { dom: HTMLElement; destroy?: () => void } = { dom: wrapper };
+
+  // Show the file preview, or the file name and icon.
+  if (block.props.showPreview === false || !element) {
+    // Show file name and icon.
+    const fileNameWithIcon = createFileNameWithIcon(block);
+    wrapper.appendChild(fileNameWithIcon.dom);
+
+    ret.destroy = () => {
+      fileNameWithIcon.destroy?.();
+    };
+  } else {
+    // Show file preview.
+    wrapper.appendChild(element.dom);
+  }
+
+  // Show the caption if there is one.
+  if (block.props.caption) {
+    const caption = document.createElement("p");
+    caption.className = "bn-file-caption";
+    caption.textContent = block.props.caption;
+    wrapper.appendChild(caption);
+  }
+
+  return ret;
+};

package/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts

@@ -0,0 +1,24 @@
+import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+
+export const FILE_ICON_SVG = `<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>`;
+
+export const createFileNameWithIcon = (
+  block: BlockFromConfig<FileBlockConfig, any, any>
+): { dom: HTMLElement; destroy?: () => void } => {
+  const file = document.createElement("div");
+  file.className = "bn-file-name-with-icon";
+
+  const icon = document.createElement("div");
+  icon.className = "bn-file-icon";
+  icon.innerHTML = FILE_ICON_SVG;
+  file.appendChild(icon);
+
+  const fileName = document.createElement("p");
+  fileName.className = "bn-file-name";
+  fileName.textContent = block.props.name;
+  file.appendChild(fileName);
+
+  return {
+    dom: file,
+  };
+};

package/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts

@@ -0,0 +1,204 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import { createFileBlockWrapper } from "./createFileBlockWrapper.js";
+
+export const createResizableFileBlockWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  element: { dom: HTMLElement; destroy?: () => void },
+  resizeHandlesContainerElement: HTMLElement,
+  buttonText: string,
+  buttonIcon: HTMLElement
+): { dom: HTMLElement; destroy: () => void } => {
+  const { dom, destroy } = createFileBlockWrapper(
+    block,
+    editor,
+    element,
+    buttonText,
+    buttonIcon
+  );
+  const wrapper = dom;
+  if (block.props.url && block.props.showPreview) {
+    wrapper.style.width = `${block.props.previewWidth}px`;
+  }
+
+  const leftResizeHandle = document.createElement("div");
+  leftResizeHandle.className = "bn-resize-handle";
+  leftResizeHandle.style.left = "4px";
+  const rightResizeHandle = document.createElement("div");
+  rightResizeHandle.className = "bn-resize-handle";
+  rightResizeHandle.style.right = "4px";
+
+  // Temporary parameters set when the user begins resizing the element, used to
+  // calculate the new width of the element.
+  let resizeParams:
+    | {
+        handleUsed: "left" | "right";
+        initialWidth: number;
+        initialClientX: number;
+      }
+    | undefined;
+  let width = block.props.previewWidth! as number;
+
+  // Updates the element width with an updated width depending on the cursor X
+  // offset from when the resize began, and which resize handle is being used.
+  const windowMouseMoveHandler = (event: MouseEvent) => {
+    if (!resizeParams) {
+      if (
+        !editor.isEditable &&
+        resizeHandlesContainerElement.contains(leftResizeHandle) &&
+        resizeHandlesContainerElement.contains(rightResizeHandle)
+      ) {
+        resizeHandlesContainerElement.removeChild(leftResizeHandle);
+        resizeHandlesContainerElement.removeChild(rightResizeHandle);
+      }
+
+      return;
+    }
+
+    let newWidth: number;
+
+    if (block.props.textAlignment === "center") {
+      if (resizeParams.handleUsed === "left") {
+        newWidth =
+          resizeParams.initialWidth +
+          (resizeParams.initialClientX - event.clientX) * 2;
+      } else {
+        newWidth =
+          resizeParams.initialWidth +
+          (event.clientX - resizeParams.initialClientX) * 2;
+      }
+    } else {
+      if (resizeParams.handleUsed === "left") {
+        newWidth =
+          resizeParams.initialWidth +
+          resizeParams.initialClientX -
+          event.clientX;
+      } else {
+        newWidth =
+          resizeParams.initialWidth +
+          event.clientX -
+          resizeParams.initialClientX;
+      }
+    }
+
+    // Min element width in px.
+    const minWidth = 64;
+
+    // Ensures the element is not wider than the editor and not narrower than a
+    // predetermined minimum width.
+    width = Math.max(newWidth, minWidth);
+    wrapper.style.width = `${width}px`;
+  };
+  // Stops mouse movements from resizing the element and updates the block's
+  // `width` prop to the new value.
+  const windowMouseUpHandler = (event: MouseEvent) => {
+    // Hides the drag handles if the cursor is no longer over the element.
+    if (
+      (!event.target ||
+        !wrapper.contains(event.target as Node) ||
+        !editor.isEditable) &&
+      resizeHandlesContainerElement.contains(leftResizeHandle) &&
+      resizeHandlesContainerElement.contains(rightResizeHandle)
+    ) {
+      resizeHandlesContainerElement.removeChild(leftResizeHandle);
+      resizeHandlesContainerElement.removeChild(rightResizeHandle);
+    }
+
+    if (!resizeParams) {
+      return;
+    }
+
+    resizeParams = undefined;
+
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: width,
+      },
+    });
+  };
+
+  // Shows the resize handles when hovering over the wrapper with the cursor.
+  const wrapperMouseEnterHandler = () => {
+    if (editor.isEditable) {
+      resizeHandlesContainerElement.appendChild(leftResizeHandle);
+      resizeHandlesContainerElement.appendChild(rightResizeHandle);
+    }
+  };
+  // Hides the resize handles when the cursor leaves the wrapper, unless the
+  // cursor moves to one of the resize handles.
+  const wrapperMouseLeaveHandler = (event: MouseEvent) => {
+    if (
+      event.relatedTarget === leftResizeHandle ||
+      event.relatedTarget === rightResizeHandle
+    ) {
+      return;
+    }
+
+    if (resizeParams) {
+      return;
+    }
+
+    if (
+      editor.isEditable &&
+      resizeHandlesContainerElement.contains(leftResizeHandle) &&
+      resizeHandlesContainerElement.contains(rightResizeHandle)
+    ) {
+      resizeHandlesContainerElement.removeChild(leftResizeHandle);
+      resizeHandlesContainerElement.removeChild(rightResizeHandle);
+    }
+  };
+
+  // Sets the resize params, allowing the user to begin resizing the element by
+  // moving the cursor left or right.
+  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    resizeParams = {
+      handleUsed: "left",
+      initialWidth: wrapper.clientWidth,
+      initialClientX: event.clientX,
+    };
+  };
+  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    resizeParams = {
+      handleUsed: "right",
+      initialWidth: wrapper.clientWidth,
+      initialClientX: event.clientX,
+    };
+  };
+
+  window.addEventListener("mousemove", windowMouseMoveHandler);
+  window.addEventListener("mouseup", windowMouseUpHandler);
+  wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
+  wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
+  leftResizeHandle.addEventListener(
+    "mousedown",
+    leftResizeHandleMouseDownHandler
+  );
+  rightResizeHandle.addEventListener(
+    "mousedown",
+    rightResizeHandleMouseDownHandler
+  );
+
+  return {
+    dom: wrapper,
+    destroy: () => {
+      destroy?.();
+      window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("mouseup", windowMouseUpHandler);
+      wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
+      wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
+      leftResizeHandle.removeEventListener(
+        "mousedown",
+        leftResizeHandleMouseDownHandler
+      );
+      rightResizeHandle.removeEventListener(
+        "mousedown",
+        rightResizeHandleMouseDownHandler
+      );
+    },
+  };
+};

package/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts

@@ -0,0 +1,13 @@
+export const createFigureWithCaption = (
+  element: HTMLElement,
+  caption: string
+) => {
+  const figure = document.createElement("figure");
+  const captionElement = document.createElement("figcaption");
+  captionElement.textContent = caption;
+
+  figure.appendChild(element);
+  figure.appendChild(captionElement);
+
+  return { dom: figure };
+};

package/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts

@@ -0,0 +1,15 @@
+export const createLinkWithCaption = (
+  element: HTMLElement,
+  caption: string
+) => {
+  const wrapper = document.createElement("div");
+  const fileCaption = document.createElement("p");
+  fileCaption.textContent = caption;
+
+  wrapper.appendChild(element);
+  wrapper.appendChild(fileCaption);
+
+  return {
+    dom: wrapper,
+  };
+};

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -7,15 +7,11 @@ import {
   PropSchema,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-import {
-  createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  createResizeHandlesWrapper,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseImageElement } from "./imageBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+import { parseImageElement } from "./parseImageElement.js";
 
 export const FILE_IMAGE_ICON_SVG =
   '<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>';
@@ -60,33 +56,29 @@ export const imageRender = (
   const icon = document.createElement("div");
   icon.innerHTML = FILE_IMAGE_ICON_SVG;
 
+  const imageWrapper = document.createElement("div");
+  imageWrapper.className = "bn-visual-media-wrapper";
+
   const image = document.createElement("img");
   image.className = "bn-visual-media";
-  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-    image.src = downloadUrl;
-  });
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      image.src = downloadUrl;
+    });
+  } else {
+    image.src = block.props.url;
+  }
+
   image.alt = block.props.name || block.props.caption || "BlockNote image";
   image.contentEditable = "false";
   image.draggable = false;
-  image.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
-  );
-
-  const file = createResizeHandlesWrapper(
-    block,
-    editor,
-    image,
-    () => image.width,
-    (width) => (image.width = width)
-  );
-
-  const element = createFileAndCaptionWrapper(block, file.dom);
+  imageWrapper.appendChild(image);
 
-  return createFileBlockWrapper(
+  return createResizableFileBlockWrapper(
     block,
     editor,
-    element,
+    { dom: imageWrapper },
+    imageWrapper,
     editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement
   );

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -7,16 +7,11 @@ import {
   PropSchema,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-
-import {
-  createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  createResizeHandlesWrapper,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseVideoElement } from "./videoBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+import { parseVideoElement } from "./parseVideoElement.js";
 
 export const FILE_VIDEO_ICON_SVG =
   '<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>';
@@ -61,31 +56,29 @@ export const videoRender = (
   const icon = document.createElement("div");
   icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
+  const videoWrapper = document.createElement("div");
+  videoWrapper.className = "bn-visual-media-wrapper";
+
   const video = document.createElement("video");
   video.className = "bn-visual-media";
-  video.src = block.props.url;
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      video.src = downloadUrl;
+    });
+  } else {
+    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);
+  video.width = block.props.previewWidth;
+  videoWrapper.appendChild(video);
 
-  return createFileBlockWrapper(
+  return createResizableFileBlockWrapper(
     block,
     editor,
-    element,
+    { dom: videoWrapper },
+    videoWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement
   );