@blocknote/core 0.13.2 → 0.13.3

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -1,404 +1,183 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-
 import {
   BlockFromConfig,
-  BlockSchemaWithBlock,
-  CustomBlockConfig,
-  InlineContentSchema,
-  PropSchema,
-  StyleSchema,
   createBlockSpec,
+  FileBlockConfig,
+  Props,
+  PropSchema,
 } from "../../schema";
 import { defaultProps } from "../defaultProps";
 
+import {
+  createAddFileButton,
+  createDefaultFilePreview,
+  createFigureWithCaption,
+  createFileAndCaptionWrapper,
+  createLinkWithCaption,
+  createResizeHandlesWrapper,
+  parseFigureElement,
+} from "../FileBlockContent/fileBlockHelpers";
+import { parseImageElement } from "./imageBlockHelpers";
+
 export const imagePropSchema = {
   textAlignment: defaultProps.textAlignment,
   backgroundColor: defaultProps.backgroundColor,
-  // Image url.
+  // File name.
+  name: {
+    default: "" as const,
+  },
+  // File url.
   url: {
     default: "" as const,
   },
-  // Image caption.
+  // File caption.
   caption: {
     default: "" as const,
   },
-  // Image width in px.
-  width: {
-    default: 512 as const,
+
+  showPreview: {
+    default: true,
+  },
+  // File preview width in px.
+  previewWidth: {
+    default: 512,
   },
 } satisfies PropSchema;
 
-// Converts text alignment prop values to the flexbox `align-items` values.
-const textAlignmentToAlignItems = (
-  textAlignment: "left" | "center" | "right" | "justify"
-): "flex-start" | "center" | "flex-end" => {
-  switch (textAlignment) {
-    case "left":
-      return "flex-start";
-    case "center":
-      return "center";
-    case "right":
-      return "flex-end";
-    default:
-      return "flex-start";
-  }
-};
-
-// Min image width in px.
-const minWidth = 64;
-
-const blockConfig = {
+export const imageBlockConfig = {
   type: "image" as const,
   propSchema: imagePropSchema,
   content: "none",
-} satisfies CustomBlockConfig;
-
-export const renderImage = (
-  block: BlockFromConfig<typeof blockConfig, InlineContentSchema, StyleSchema>,
-  editor: BlockNoteEditor<BlockSchemaWithBlock<"image", typeof blockConfig>>
+  isFileBlock: true,
+  isFileBlockPlaceholder: (block: any) => !block.props.url,
+  fileBlockAcceptMimeTypes: ["image/*"],
+} satisfies FileBlockConfig;
+
+export const imageRender = (
+  block: BlockFromConfig<typeof imageBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>
 ) => {
-  // Wrapper element to set the image alignment, contains both image/image
-  // upload dashboard and caption.
   const wrapper = document.createElement("div");
-  wrapper.className = "bn-image-block-content-wrapper";
-  wrapper.style.alignItems = textAlignmentToAlignItems(
-    block.props.textAlignment
-  );
-
-  // Button element that acts as a placeholder for images with no src.
-  const addImageButton = document.createElement("div");
-  addImageButton.className = "bn-add-image-button";
-
-  // Icon for the add image button.
-  const addImageButtonIcon = document.createElement("div");
-  addImageButtonIcon.className = "bn-add-image-button-icon";
-
-  // Text for the add image button.
-  const addImageButtonText = document.createElement("p");
-  addImageButtonText.className = "bn-add-image-button-text";
-  addImageButtonText.innerText = editor.dictionary.image.add_button;
-
-  // Wrapper element for the image, resize handles and caption.
-  const imageAndCaptionWrapper = document.createElement("div");
-  imageAndCaptionWrapper.className = "bn-image-and-caption-wrapper";
-
-  // Wrapper element for the image and resize handles.
-  const imageWrapper = document.createElement("div");
-  imageWrapper.className = "bn-image-wrapper";
-
-  // Image element.
-  const image = document.createElement("img");
-  image.className = "bn-image";
-  image.src = block.props.url;
-  image.alt = "placeholder";
-  image.contentEditable = "false";
-  image.draggable = false;
-  image.style.width = `${Math.min(
-    block.props.width,
-    editor.domElement.firstElementChild!.clientWidth
-  )}px`;
-
-  // Resize handle elements.
-  const leftResizeHandle = document.createElement("div");
-  leftResizeHandle.className = "bn-image-resize-handle";
-  leftResizeHandle.style.left = "4px";
-  const rightResizeHandle = document.createElement("div");
-  rightResizeHandle.className = "bn-image-resize-handle";
-  rightResizeHandle.style.right = "4px";
-
-  // Caption element.
-  const caption = document.createElement("p");
-  caption.className = "bn-image-caption";
-  caption.innerText = block.props.caption;
-  caption.style.padding = block.props.caption ? "4px" : "";
+  wrapper.className = "bn-file-block-content-wrapper";
 
-  // Adds a light blue outline to selected image blocks.
-  const handleEditorUpdate = () => {
-    const selection = editor.getSelection()?.blocks || [];
-    const currentBlock = editor.getTextCursorPosition().block;
-
-    const isSelected =
-      [currentBlock, ...selection].find(
-        (selectedBlock) => selectedBlock.id === block.id
-      ) !== undefined;
-
-    if (isSelected) {
-      addImageButton.style.outline = "4px solid rgb(100, 160, 255)";
-      imageAndCaptionWrapper.style.outline = "4px solid rgb(100, 160, 255)";
-    } else {
-      addImageButton.style.outline = "";
-      imageAndCaptionWrapper.style.outline = "";
-    }
-  };
-  editor.onEditorContentChange(handleEditorUpdate);
-  editor.onEditorSelectionChange(handleEditorUpdate);
-
-  // Temporary parameters set when the user begins resizing the image, used to
-  // calculate the new width of the image.
-  let resizeParams:
-    | {
-        handleUsed: "left" | "right";
-        initialWidth: number;
-        initialClientX: number;
-      }
-    | undefined;
-
-  // Updates the image 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 &&
-        imageWrapper.contains(leftResizeHandle) &&
-        imageWrapper.contains(rightResizeHandle)
-      ) {
-        imageWrapper.removeChild(leftResizeHandle);
-        imageWrapper.removeChild(rightResizeHandle);
-      }
-
-      return;
-    }
-
-    let newWidth: number;
-
-    if (textAlignmentToAlignItems(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;
-      }
-    }
-
-    // Ensures the image is not wider than the editor and not smaller than a
-    // predetermined minimum width.
-    if (newWidth < minWidth) {
-      image.style.width = `${minWidth}px`;
-    } else if (newWidth > editor.domElement.firstElementChild!.clientWidth) {
-      image.style.width = `${
-        editor.domElement.firstElementChild!.clientWidth
-      }px`;
-    } else {
-      image.style.width = `${newWidth}px`;
-    }
-  };
-  // Stops mouse movements from resizing the image 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 image.
-    if (
-      (!event.target ||
-        !imageWrapper.contains(event.target as Node) ||
-        !editor.isEditable) &&
-      imageWrapper.contains(leftResizeHandle) &&
-      imageWrapper.contains(rightResizeHandle)
-    ) {
-      imageWrapper.removeChild(leftResizeHandle);
-      imageWrapper.removeChild(rightResizeHandle);
-    }
-
-    if (!resizeParams) {
-      return;
-    }
-
-    resizeParams = undefined;
+  if (block.props.url === "") {
+    const fileBlockImageIcon = document.createElement("div");
+    fileBlockImageIcon.innerHTML =
+      '<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>';
+    const addImageButton = createAddFileButton(
+      block,
+      editor,
+      editor.dictionary.file_blocks.image.add_button_text,
+      fileBlockImageIcon.firstElementChild as HTMLElement
+    );
+    wrapper.appendChild(addImageButton.dom);
 
-    editor.updateBlock(block, {
-      type: "image",
-      props: {
-        // Removes "px" from the end of the width string and converts to float.
-        width: parseFloat(image.style.width.slice(0, -2)) as any,
+    return {
+      dom: wrapper,
+      destroy: () => {
+        addImageButton?.destroy?.();
       },
-    });
-  };
+    };
+  } else if (!block.props.showPreview) {
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
 
-  // Prevents focus from moving to the button.
-  const addImageButtonMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault();
-  };
-  // Opens the image toolbar.
-  const addImageButtonClickHandler = () => {
-    editor._tiptapEditor.view.dispatch(
-      editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
-        block: block,
-      })
+    return {
+      dom: element.dom,
+    };
+  } else {
+    const image = document.createElement("img");
+    image.className = "bn-visual-media";
+    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
     );
-  };
-
-  // Shows the resize handles when hovering over the image with the cursor.
-  const imageMouseEnterHandler = () => {
-    if (editor.isEditable) {
-      imageWrapper.appendChild(leftResizeHandle);
-      imageWrapper.appendChild(rightResizeHandle);
-    }
-  };
-  // Hides the resize handles when the cursor leaves the image, unless the
-  // cursor moves to one of the resize handles.
-  const imageMouseLeaveHandler = (event: MouseEvent) => {
-    if (
-      event.relatedTarget === leftResizeHandle ||
-      event.relatedTarget === rightResizeHandle
-    ) {
-      return;
-    }
 
-    if (resizeParams) {
-      return;
-    }
+    const file = createResizeHandlesWrapper(
+      block,
+      editor,
+      image,
+      () => image.width,
+      (width) => (image.width = width)
+    );
 
-    if (
-      editor.isEditable &&
-      imageWrapper.contains(leftResizeHandle) &&
-      imageWrapper.contains(rightResizeHandle)
-    ) {
-      imageWrapper.removeChild(leftResizeHandle);
-      imageWrapper.removeChild(rightResizeHandle);
-    }
-  };
+    const element = createFileAndCaptionWrapper(block, file.dom);
+    wrapper.appendChild(element.dom);
 
-  // Sets the resize params, allowing the user to begin resizing the image by
-  // moving the cursor left or right.
-  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault();
+    return {
+      dom: wrapper,
+      destroy: file.destroy,
+    };
+  }
+};
 
-    imageWrapper.appendChild(leftResizeHandle);
-    imageWrapper.appendChild(rightResizeHandle);
+export const imageParse = (
+  element: HTMLElement
+): Partial<Props<typeof imageBlockConfig.propSchema>> | undefined => {
+  if (element.tagName === "IMG") {
+    return parseImageElement(element as HTMLImageElement);
+  }
 
-    resizeParams = {
-      handleUsed: "left",
-      initialWidth: block.props.width,
-      initialClientX: event.clientX,
-    };
-  };
-  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault();
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "img");
+    if (!parsedFigure) {
+      return undefined;
+    }
 
-    imageWrapper.appendChild(leftResizeHandle);
-    imageWrapper.appendChild(rightResizeHandle);
+    const { targetElement, caption } = parsedFigure;
 
-    resizeParams = {
-      handleUsed: "right",
-      initialWidth: block.props.width,
-      initialClientX: event.clientX,
+    return {
+      ...parseImageElement(targetElement as HTMLImageElement),
+      caption,
     };
-  };
+  }
 
-  addImageButton.appendChild(addImageButtonIcon);
-  addImageButton.appendChild(addImageButtonText);
+  return undefined;
+};
 
-  imageAndCaptionWrapper.appendChild(imageWrapper);
-  imageWrapper.appendChild(image);
-  imageAndCaptionWrapper.appendChild(caption);
+export const imageToExternalHTML = (
+  block: BlockFromConfig<typeof imageBlockConfig, any, any>
+) => {
+  if (!block.props.url) {
+    const div = document.createElement("p");
+    div.textContent = "Add image";
 
-  if (block.props.url === "") {
-    wrapper.appendChild(addImageButton);
+    return {
+      dom: div,
+    };
+  }
+
+  let image;
+  if (block.props.showPreview) {
+    image = document.createElement("img");
+    image.src = block.props.url;
+    image.alt = block.props.name || block.props.caption || "BlockNote image";
+    image.width = block.props.previewWidth;
   } else {
-    wrapper.appendChild(imageAndCaptionWrapper);
+    image = document.createElement("a");
+    image.href = block.props.url;
+    image.textContent = block.props.name || block.props.url;
   }
 
-  window.addEventListener("mousemove", windowMouseMoveHandler);
-  window.addEventListener("mouseup", windowMouseUpHandler);
-  addImageButton.addEventListener("mousedown", addImageButtonMouseDownHandler);
-  addImageButton.addEventListener("click", addImageButtonClickHandler);
-  image.addEventListener("mouseenter", imageMouseEnterHandler);
-  image.addEventListener("mouseleave", imageMouseLeaveHandler);
-  leftResizeHandle.addEventListener(
-    "mousedown",
-    leftResizeHandleMouseDownHandler
-  );
-  rightResizeHandle.addEventListener(
-    "mousedown",
-    rightResizeHandleMouseDownHandler
-  );
+  if (block.props.caption) {
+    if (block.props.showPreview) {
+      return createFigureWithCaption(image, block.props.caption);
+    } else {
+      return createLinkWithCaption(image, block.props.caption);
+    }
+  }
 
   return {
-    dom: wrapper,
-    destroy: () => {
-      window.removeEventListener("mousemove", windowMouseMoveHandler);
-      window.removeEventListener("mouseup", windowMouseUpHandler);
-      addImageButton.removeEventListener(
-        "mousedown",
-        addImageButtonMouseDownHandler
-      );
-      addImageButton.removeEventListener("click", addImageButtonClickHandler);
-      leftResizeHandle.removeEventListener(
-        "mousedown",
-        leftResizeHandleMouseDownHandler
-      );
-      rightResizeHandle.removeEventListener(
-        "mousedown",
-        rightResizeHandleMouseDownHandler
-      );
-    },
+    dom: image,
   };
 };
 
-export const Image = createBlockSpec(
-  {
-    type: "image" as const,
-    propSchema: imagePropSchema,
-    content: "none",
-  },
-  {
-    render: renderImage,
-    toExternalHTML: (block) => {
-      if (block.props.url === "") {
-        const div = document.createElement("p");
-        div.innerHTML = "Add Image";
-
-        return {
-          dom: div,
-        };
-      }
-
-      const figure = document.createElement("figure");
-
-      const img = document.createElement("img");
-      img.src = block.props.url;
-      figure.appendChild(img);
-
-      if (block.props.caption !== "") {
-        const figcaption = document.createElement("figcaption");
-        figcaption.innerHTML = block.props.caption;
-        figure.appendChild(figcaption);
-      }
-
-      return {
-        dom: figure,
-      };
-    },
-    parse: (element: HTMLElement) => {
-      if (element.tagName === "FIGURE") {
-        const img = element.querySelector("img");
-        const caption = element.querySelector("figcaption");
-        return {
-          url: img?.getAttribute("src") || "",
-          caption:
-            caption?.textContent || img?.getAttribute("alt") || undefined,
-        };
-      } else if (element.tagName === "IMG") {
-        return {
-          url: element.getAttribute("src") || "",
-          caption: element.getAttribute("alt") || undefined,
-        };
-      }
-
-      return undefined;
-    },
-  }
-);
+export const ImageBlock = createBlockSpec(imageBlockConfig, {
+  render: imageRender,
+  parse: imageParse,
+  toExternalHTML: imageToExternalHTML,
+});

package/src/blocks/ImageBlockContent/imageBlockHelpers.ts

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