@blocknote/core 0.20.0 → 0.22.0

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/HeadingBlockContent/HeadingBlockContent.ts

@@ -5,6 +5,7 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  propsToAttributes,
 } from "../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
@@ -18,26 +19,9 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   name: "heading",
   content: "inline*",
   group: "blockContent",
+
   addAttributes() {
-    return {
-      level: {
-        default: 1,
-        // instead of "level" attributes, use "data-level"
-        parseHTML: (element) => {
-          const attr = element.getAttribute("data-level")!;
-          const parsed = parseInt(attr);
-          if (isFinite(parsed)) {
-            return parsed;
-          }
-          return undefined;
-        },
-        renderHTML: (attributes) => {
-          return {
-            "data-level": (attributes.level as number).toString(),
-          };
-        },
-      },
-    };
+    return propsToAttributes(headingPropSchema);
   },
 
   addInputRules() {

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/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -8,6 +8,7 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  propsToAttributes,
 } from "../../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
@@ -24,22 +25,9 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
   name: "checkListItem",
   content: "inline*",
   group: "blockContent",
+
   addAttributes() {
-    return {
-      checked: {
-        default: false,
-        // instead of "checked" attributes, use "data-checked"
-        parseHTML: (element) =>
-          element.getAttribute("data-checked") === "true" || undefined,
-        renderHTML: (attributes) => {
-          return attributes.checked
-            ? {
-                "data-checked": (attributes.checked as boolean).toString(),
-              }
-            : {};
-        },
-      },
-    };
+    return propsToAttributes(checkListItemPropSchema);
   },
 
   addInputRules() {

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts

@@ -20,7 +20,7 @@ export const NumberedListIndexingPlugin = () => {
           node.type.name === "blockContainer" &&
           node.firstChild!.type.name === "numberedListItem"
         ) {
-          let newIndex = "1";
+          let newIndex = `${node.firstChild!.attrs["start"] || 1}`;
 
           const blockInfo = getBlockInfo({
             posBeforeNode: pos,
@@ -60,13 +60,21 @@ export const NumberedListIndexingPlugin = () => {
 
           const contentNode = blockInfo.blockContent.node;
           const index = contentNode.attrs["index"];
+          const isFirst =
+            prevBlock?.firstChild?.type.name !== "numberedListItem";
 
-          if (index !== newIndex) {
+          if (index !== newIndex || (contentNode.attrs.start && !isFirst)) {
             modified = true;
 
+            const { start, ...attrs } = contentNode.attrs;
+
             tr.setNodeMarkup(blockInfo.blockContent.beforePos, undefined, {
-              ...contentNode.attrs,
+              ...attrs,
               index: newIndex,
+              ...(typeof start === "number" &&
+                isFirst && {
+                  start,
+                }),
             });
           }
         }

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -5,6 +5,7 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  propsToAttributes,
 } from "../../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
@@ -13,6 +14,7 @@ import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin.js";
 
 export const numberedListItemPropSchema = {
   ...defaultProps,
+  start: { default: undefined, type: "number" },
 } satisfies PropSchema;
 
 const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
@@ -22,6 +24,9 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   priority: 90,
   addAttributes() {
     return {
+      ...propsToAttributes(numberedListItemPropSchema),
+      // the index attribute is only used internally (it's not part of the blocknote schema)
+      // that's why it's defined explicitly here, and not part of the prop schema
       index: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-index"),
@@ -38,15 +43,17 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
     return [
       // Creates an ordered list when starting with "1.".
       new InputRule({
-        find: new RegExp(`^1\\.\\s$`),
-        handler: ({ state, chain, range }) => {
+        find: new RegExp(`^(\\d+)\\.\\s$`),
+        handler: ({ state, chain, range, match }) => {
           const blockInfo = getBlockInfoFromSelection(state);
           if (
             !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*"
+            blockInfo.blockContent.node.type.spec.content !== "inline*" ||
+            blockInfo.blockNoteType === "numberedListItem"
           ) {
             return;
           }
+          const startIndex = parseInt(match[1]);
 
           chain()
             .command(
@@ -55,7 +62,11 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
                 blockInfo.bnBlock.beforePos,
                 {
                   type: "numberedListItem",
-                  props: {},
+                  props:
+                    (startIndex === 1 && {}) ||
+                    ({
+                      start: startIndex,
+                    } as any),
                 }
               )
             )
@@ -116,7 +127,16 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
             parent.tagName === "OL" ||
             (parent.tagName === "DIV" && parent.parentElement!.tagName === "OL")
           ) {
-            return {};
+            const startIndex =
+              parseInt(parent.getAttribute("start") || "1") || 1;
+
+            if (element.previousSibling || startIndex === 1) {
+              return {};
+            }
+
+            return {
+              start: startIndex,
+            };
           }
 
           return false;

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
   );