From 77e28db96319aa1dfb0475c0c06005e4c7ab77ed Mon Sep 17 00:00:00 2001 From: matthewlipski Date: Sun, 29 Sep 2024 20:19:30 +0200 Subject: [PATCH] Added `resolveFileUrl` block ID field --- .../core/src/blocks/AudioBlockContent/AudioBlockContent.ts | 2 +- .../core/src/blocks/ImageBlockContent/ImageBlockContent.ts | 2 +- .../core/src/blocks/VideoBlockContent/VideoBlockContent.ts | 4 +++- packages/core/src/editor/BlockNoteEditor.ts | 7 +++++-- .../src/blocks/AudioBlockContent/AudioBlockContent.tsx | 2 +- .../react/src/blocks/FileBlockContent/useResolveUrl.tsx | 4 ++-- .../src/blocks/ImageBlockContent/ImageBlockContent.tsx | 2 +- .../src/blocks/VideoBlockContent/VideoBlockContent.tsx | 2 +- .../src/components/FilePanel/DefaultTabs/UploadTab.tsx | 2 +- .../DefaultButtons/FileDownloadButton.tsx | 2 +- 10 files changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts index 34e03f069..7bdecf1a1 100644 --- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts +++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts @@ -55,7 +55,7 @@ export const audioRender = ( const audio = document.createElement("audio"); audio.className = "bn-audio"; - editor.resolveFileUrl(block.props.url).then((downloadUrl) => { + editor.resolveFileUrl(block.props.url, block.id).then((downloadUrl) => { audio.src = downloadUrl; }); audio.controls = true; diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts index 104b641fe..4633c20d0 100644 --- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts +++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts @@ -60,7 +60,7 @@ export const imageRender = ( const image = document.createElement("img"); image.className = "bn-visual-media"; - editor.resolveFileUrl(block.props.url).then((downloadUrl) => { + editor.resolveFileUrl(block.props.url, block.id).then((downloadUrl) => { image.src = downloadUrl; }); image.alt = block.props.name || block.props.caption || "BlockNote image"; diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts index 42d9a87c8..91a44223f 100644 --- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts +++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts @@ -61,7 +61,9 @@ export const videoRender = ( const video = document.createElement("video"); video.className = "bn-visual-media"; - video.src = block.props.url; + editor.resolveFileUrl(block.props.url, block.id).then((downloadUrl) => { + video.src = downloadUrl; + }); video.controls = true; video.contentEditable = "false"; video.draggable = false; diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts index 73462768a..a2339fe8b 100644 --- a/packages/core/src/editor/BlockNoteEditor.ts +++ b/packages/core/src/editor/BlockNoteEditor.ts @@ -137,7 +137,7 @@ export type BlockNoteEditorOptions< * implementing custom protocols / schemes * @returns The URL that's */ - resolveFileUrl: (url: string) => Promise; + resolveFileUrl: (url: string, blockId?: string) => Promise; /** * When enabled, allows for collaboration between multiple users. @@ -282,7 +282,10 @@ export class BlockNoteEditor< private onUploadStartCallbacks: ((blockId?: string) => void)[] = []; private onUploadEndCallbacks: ((blockId?: string) => void)[] = []; - public readonly resolveFileUrl: (url: string) => Promise; + public readonly resolveFileUrl: ( + url: string, + blockId?: string + ) => Promise; public get pmSchema() { return this._pmSchema; diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx index 369f01aa2..da84ba572 100644 --- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx +++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx @@ -18,7 +18,7 @@ export const AudioPreview = ( "contentRef" > ) => { - const resolved = useResolveUrl(props.block.props.url!); + const resolved = useResolveUrl(props.block.props.url!, props.block.id); if (resolved.loadingState === "loading") { return null; diff --git a/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx b/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx index 8cd56d35b..a757baa2e 100644 --- a/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx +++ b/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor"; import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core"; -export function useResolveUrl(fetchUrl: string) { +export function useResolveUrl(fetchUrl: string, blockId?: string) { const editor = useBlockNoteEditor< BlockSchema, InlineContentSchema, @@ -21,7 +21,7 @@ export function useResolveUrl(fetchUrl: string) { setLoadingState("loading"); try { - url = await editor.resolveFileUrl(fetchUrl); + url = await editor.resolveFileUrl(fetchUrl, blockId); } catch (error) { setLoadingState("error"); return; diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx index 4d785ca50..cda956216 100644 --- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx +++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx @@ -27,7 +27,7 @@ export const ImagePreview = ( ) ); - const resolved = useResolveUrl(props.block.props.url!); + const resolved = useResolveUrl(props.block.props.url!, props.block.id); if (resolved.loadingState === "loading") { return null; diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx index 2c1bf56c6..b90cabbe3 100644 --- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx +++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx @@ -27,7 +27,7 @@ export const VideoPreview = ( ) ); - const resolved = useResolveUrl(props.block.props.url!); + const resolved = useResolveUrl(props.block.props.url!, props.block.id); if (resolved.loadingState === "loading") { return null; diff --git a/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx b/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx index e72b7ecaf..478c91b63 100644 --- a/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx +++ b/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx @@ -50,7 +50,7 @@ export const UploadTab = < if (editor.uploadFile !== undefined) { try { - let updateData = await editor.uploadFile(file); + let updateData = await editor.uploadFile(file, block.id); if (typeof updateData === "string") { // received a url updateData = { diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx index 42f295966..a24731ad7 100644 --- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx +++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx @@ -45,7 +45,7 @@ export const FileDownloadButton = () => { if (fileBlock && fileBlock.props.url) { editor.focus(); editor - .resolveFileUrl(fileBlock.props.url) + .resolveFileUrl(fileBlock.props.url, fileBlock.id) .then((downloadUrl) => window.open(sanitizeUrl(downloadUrl, window.location.href)) );