@blocknote/core 0.13.2 → 0.13.3

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -0,0 +1,162 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+  BlockFromConfig,
+  createBlockSpec,
+  FileBlockConfig,
+  Props,
+  PropSchema,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
+
+import {
+  createAddFileButton,
+  createDefaultFilePreview,
+  createFigureWithCaption,
+  createFileAndCaptionWrapper,
+  createLinkWithCaption,
+  parseFigureElement,
+} from "../FileBlockContent/fileBlockHelpers";
+import { parseAudioElement } from "./audioBlockHelpers";
+
+export const audioPropSchema = {
+  backgroundColor: defaultProps.backgroundColor,
+  // File name.
+  name: {
+    default: "" as const,
+  },
+  // File url.
+  url: {
+    default: "" as const,
+  },
+  // File caption.
+  caption: {
+    default: "" as const,
+  },
+
+  showPreview: {
+    default: true,
+  },
+} satisfies PropSchema;
+
+export const audioBlockConfig = {
+  type: "audio" as const,
+  propSchema: audioPropSchema,
+  content: "none",
+  isFileBlock: true,
+  isFileBlockPlaceholder: (block: any) => !block.props.url,
+  fileBlockAcceptMimeTypes: ["audio/*"],
+} satisfies FileBlockConfig;
+
+export const audioRender = (
+  block: BlockFromConfig<typeof audioBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  if (block.props.url === "") {
+    const fileBlockAudioIcon = document.createElement("div");
+    fileBlockAudioIcon.innerHTML =
+      '<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>';
+    const addAudioButton = createAddFileButton(
+      block,
+      editor,
+      editor.dictionary.file_blocks.audio.add_button_text,
+      fileBlockAudioIcon.firstElementChild as HTMLElement
+    );
+    wrapper.appendChild(addAudioButton.dom);
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        addAudioButton?.destroy?.();
+      },
+    };
+  } else if (!block.props.showPreview) {
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
+
+    return {
+      dom: element.dom,
+    };
+  } else {
+    const audio = document.createElement("audio");
+    audio.className = "bn-audio";
+    audio.src = block.props.url;
+    audio.controls = true;
+    audio.contentEditable = "false";
+    audio.draggable = false;
+
+    const element = createFileAndCaptionWrapper(block, audio);
+    wrapper.appendChild(element.dom);
+
+    return {
+      dom: wrapper,
+    };
+  }
+};
+
+export const audioParse = (
+  element: HTMLElement
+): Partial<Props<typeof audioBlockConfig.propSchema>> | undefined => {
+  if (element.tagName === "AUDIO") {
+    return parseAudioElement(element as HTMLAudioElement);
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "audio");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    return {
+      ...parseAudioElement(targetElement as HTMLAudioElement),
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const audioToExternalHTML = (
+  block: BlockFromConfig<typeof audioBlockConfig, any, any>
+) => {
+  if (!block.props.url) {
+    const div = document.createElement("p");
+    div.textContent = "Add audio";
+
+    return {
+      dom: div,
+    };
+  }
+
+  let audio;
+  if (block.props.showPreview) {
+    audio = document.createElement("audio");
+    audio.src = block.props.url;
+  } else {
+    audio = document.createElement("a");
+    audio.href = block.props.url;
+    audio.textContent = block.props.name || block.props.url;
+  }
+
+  if (block.props.caption) {
+    if (block.props.showPreview) {
+      return createFigureWithCaption(audio, block.props.caption);
+    } else {
+      return createLinkWithCaption(audio, block.props.caption);
+    }
+  }
+
+  return {
+    dom: audio,
+  };
+};
+
+export const AudioBlock = createBlockSpec(audioBlockConfig, {
+  render: audioRender,
+  parse: audioParse,
+  toExternalHTML: audioToExternalHTML,
+});

package/src/blocks/AudioBlockContent/audioBlockHelpers.ts

@@ -0,0 +1,5 @@
+export const parseAudioElement = (audioElement: HTMLAudioElement) => {
+  const url = audioElement.src || undefined;
+
+  return { url };
+};

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -0,0 +1,121 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+  BlockFromConfig,
+  FileBlockConfig,
+  PropSchema,
+  createBlockSpec,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
+import {
+  createAddFileButton,
+  createDefaultFilePreview,
+  createFileAndCaptionWrapper,
+  parseEmbedElement,
+  parseFigureElement,
+  createLinkWithCaption,
+} from "./fileBlockHelpers";
+
+export const filePropSchema = {
+  backgroundColor: defaultProps.backgroundColor,
+  // File name.
+  name: {
+    default: "" as const,
+  },
+  // File url.
+  url: {
+    default: "" as const,
+  },
+  // File caption.
+  caption: {
+    default: "" as const,
+  },
+} satisfies PropSchema;
+
+export const fileBlockConfig = {
+  type: "file" as const,
+  propSchema: filePropSchema,
+  content: "none",
+  isFileBlock: true,
+  isFileBlockPlaceholder: (block: any) => !block.props.url,
+} satisfies FileBlockConfig;
+
+export const fileRender = (
+  block: BlockFromConfig<typeof fileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>
+) => {
+  // Wrapper element to set the file alignment, contains both file/file
+  // upload dashboard and caption.
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  if (block.props.url === "") {
+    const addFileButton = createAddFileButton(block, editor);
+    wrapper.appendChild(addFileButton.dom);
+
+    return {
+      dom: wrapper,
+      destroy: addFileButton.destroy,
+    };
+  } else {
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
+    wrapper.appendChild(element.dom);
+
+    return {
+      dom: wrapper,
+    };
+  }
+};
+
+export const fileParse = (element: HTMLElement) => {
+  if (element.tagName === "EMBED") {
+    return parseEmbedElement(element as HTMLEmbedElement);
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "embed");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    return {
+      ...parseEmbedElement(targetElement as HTMLEmbedElement),
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const fileToExternalHTML = (
+  block: BlockFromConfig<typeof fileBlockConfig, any, any>
+) => {
+  if (!block.props.url) {
+    const div = document.createElement("p");
+    div.textContent = "Add file";
+
+    return {
+      dom: div,
+    };
+  }
+
+  const fileSrcLink = document.createElement("a");
+  fileSrcLink.href = block.props.url;
+  fileSrcLink.textContent = block.props.name || block.props.url;
+
+  if (block.props.caption) {
+    return createLinkWithCaption(fileSrcLink, block.props.caption);
+  }
+
+  return {
+    dom: fileSrcLink,
+  };
+};
+
+export const FileBlock = createBlockSpec(fileBlockConfig, {
+  render: fileRender,
+  parse: fileParse,
+  toExternalHTML: fileToExternalHTML,
+});

package/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -0,0 +1,377 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockFromConfig, FileBlockConfig } from "../../schema";
+
+// Default file preview, displaying a file icon and file name.
+export const createDefaultFilePreview = (
+  block: BlockFromConfig<FileBlockConfig, any, any>
+): { dom: HTMLElement; destroy?: () => void } => {
+  const file = document.createElement("div");
+  file.className = "bn-file-default-preview";
+
+  const icon = document.createElement("div");
+  icon.className = "bn-file-default-preview-icon";
+  icon.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>';
+
+  const fileName = document.createElement("p");
+  fileName.className = "bn-file-default-preview-name";
+  fileName.textContent = block.props.name || "";
+
+  file.appendChild(icon);
+  file.appendChild(fileName);
+
+  return {
+    dom: file,
+  };
+};
+
+// Wrapper element containing file preview and caption.
+export const createFileAndCaptionWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  file: HTMLElement
+) => {
+  const fileAndCaptionWrapper = document.createElement("div");
+  fileAndCaptionWrapper.className = "bn-file-and-caption-wrapper";
+
+  const caption = document.createElement("p");
+  caption.className = "bn-file-caption";
+  caption.textContent = block.props.caption;
+
+  fileAndCaptionWrapper.appendChild(file);
+  fileAndCaptionWrapper.appendChild(caption);
+
+  return {
+    dom: fileAndCaptionWrapper,
+  };
+};
+
+// Button element that acts as a placeholder for files with no src.
+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>';
+  }
+
+  const addFileButtonText = document.createElement("p");
+  addFileButtonText.className = "bn-add-file-button-text";
+  addFileButtonText.innerHTML =
+    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+
+  // Prevents focus from moving to the button.
+  const addFileButtonMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+  // Opens the file toolbar.
+  const addFileButtonClickHandler = () => {
+    editor._tiptapEditor.view.dispatch(
+      editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        block: block,
+      })
+    );
+  };
+
+  addFileButton.appendChild(addFileButtonIcon);
+  addFileButton.appendChild(addFileButtonText);
+
+  addFileButton.addEventListener(
+    "mousedown",
+    addFileButtonMouseDownHandler,
+    true
+  );
+  addFileButton.addEventListener("click", addFileButtonClickHandler, true);
+
+  return {
+    dom: addFileButton,
+    destroy: () => {
+      addFileButton.removeEventListener(
+        "mousedown",
+        addFileButtonMouseDownHandler,
+        true
+      );
+      addFileButton.removeEventListener(
+        "click",
+        addFileButtonClickHandler,
+        true
+      );
+    },
+  };
+};
+
+export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
+  const url = embedElement.src || undefined;
+
+  return { url };
+};
+
+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 };
+};
+
+// Wrapper figure element to display file link with caption. Used for external
+// HTML
+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,
+  };
+};
+
+// Wrapper figure element to display file preview with caption. Used for
+// external HTML.
+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 };
+};
+
+// Wrapper element which adds resize handles & logic for visual media file
+// previews.
+export const createResizeHandlesWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  element: HTMLElement,
+  getWidth: () => number,
+  setWidth: (width: number) => void
+): { dom: HTMLElement; destroy: () => void } => {
+  if (!block.props.previewWidth) {
+    throw new Error("Block must have a `previewWidth` prop.");
+  }
+
+  // Wrapper element for rendered element and resize handles.
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-visual-media-wrapper";
+
+  // Resize handle elements.
+  const leftResizeHandle = document.createElement("div");
+  leftResizeHandle.className = "bn-visual-media-resize-handle";
+  leftResizeHandle.style.left = "4px";
+  const rightResizeHandle = document.createElement("div");
+  rightResizeHandle.className = "bn-visual-media-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;
+
+  // 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 &&
+        wrapper.contains(leftResizeHandle) &&
+        wrapper.contains(rightResizeHandle)
+      ) {
+        wrapper.removeChild(leftResizeHandle);
+        wrapper.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 smaller than a
+    // predetermined minimum width.
+    if (newWidth < minWidth) {
+      setWidth(minWidth);
+    } else if (newWidth > editor.domElement.firstElementChild!.clientWidth) {
+      setWidth(editor.domElement.firstElementChild!.clientWidth);
+    } else {
+      setWidth(newWidth);
+    }
+  };
+  // 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) &&
+      wrapper.contains(leftResizeHandle) &&
+      wrapper.contains(rightResizeHandle)
+    ) {
+      wrapper.removeChild(leftResizeHandle);
+      wrapper.removeChild(rightResizeHandle);
+    }
+
+    if (!resizeParams) {
+      return;
+    }
+
+    resizeParams = undefined;
+
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: getWidth(),
+      },
+    });
+  };
+
+  // Shows the resize handles when hovering over the element with the cursor.
+  const elementMouseEnterHandler = () => {
+    if (editor.isEditable) {
+      wrapper.appendChild(leftResizeHandle);
+      wrapper.appendChild(rightResizeHandle);
+    }
+  };
+  // Hides the resize handles when the cursor leaves the element, unless the
+  // cursor moves to one of the resize handles.
+  const elementMouseLeaveHandler = (event: MouseEvent) => {
+    if (
+      event.relatedTarget === leftResizeHandle ||
+      event.relatedTarget === rightResizeHandle
+    ) {
+      return;
+    }
+
+    if (resizeParams) {
+      return;
+    }
+
+    if (
+      editor.isEditable &&
+      wrapper.contains(leftResizeHandle) &&
+      wrapper.contains(rightResizeHandle)
+    ) {
+      wrapper.removeChild(leftResizeHandle);
+      wrapper.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();
+
+    wrapper.appendChild(leftResizeHandle);
+    wrapper.appendChild(rightResizeHandle);
+
+    resizeParams = {
+      handleUsed: "left",
+      initialWidth: block.props.previewWidth!,
+      initialClientX: event.clientX,
+    };
+  };
+  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    wrapper.appendChild(leftResizeHandle);
+    wrapper.appendChild(rightResizeHandle);
+
+    resizeParams = {
+      handleUsed: "right",
+      initialWidth: block.props.previewWidth!,
+      initialClientX: event.clientX,
+    };
+  };
+
+  wrapper.appendChild(element);
+
+  window.addEventListener("mousemove", windowMouseMoveHandler);
+  window.addEventListener("mouseup", windowMouseUpHandler);
+  element.addEventListener("mouseenter", elementMouseEnterHandler);
+  element.addEventListener("mouseleave", elementMouseLeaveHandler);
+  leftResizeHandle.addEventListener(
+    "mousedown",
+    leftResizeHandleMouseDownHandler
+  );
+  rightResizeHandle.addEventListener(
+    "mousedown",
+    rightResizeHandleMouseDownHandler
+  );
+
+  return {
+    dom: wrapper,
+    destroy: () => {
+      window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("mouseup", windowMouseUpHandler);
+      element.removeEventListener("mouseenter", elementMouseEnterHandler);
+      element.removeEventListener("mouseleave", elementMouseLeaveHandler);
+      leftResizeHandle.removeEventListener(
+        "mousedown",
+        leftResizeHandleMouseDownHandler
+      );
+      rightResizeHandle.removeEventListener(
+        "mousedown",
+        rightResizeHandleMouseDownHandler
+      );
+    },
+  };
+};