TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.91k stars 386 forks source link

Allow props context to be added to file uploads #786

Open 0x213F opened 1 month ago

0x213F commented 1 month ago

Is your feature request related to a problem? Please describe. I'm using a signed URL file upload, so whatever URL is returned to the Blocknote component is only valid for a short while. When saving the Blocknote component to our API server, we need to save not the file URL, but rather the file UUID we use in our system.

Describe the solution you'd like The fileUpload function should return not one string (which is the URL), but instead a tuple url, context where context gets appended to `props.

Describe alternatives you've considered localStorage workaround:

const uploadFile = async (media) => {

  // Do the thing
  const res = await requests.post(API_SERVER_URL, ...);

  const fileUrl = res?.data?.fileUrl;
  const fileUuid = res?.data?.fileUuid;

  // NOTE: Because we use signed URLs, whatever we get back from our API will
  //       only be valid for ~1 hour. So whenever the Blocknote compontent is saved,
  //       we must send up the file UUID to our server instead of the image URL.
  //       Inject the UUID to block props on document save (via this lookup table).
  let mapSignedUrlToFileUuid = localStorage.getItem("mapSignedUrlToFileUuid");
  if(!mapSignedUrlToFileUuid) {
    mapSignedUrlToFileUuid = {};
  } else {
    mapSignedUrlToFileUuid = JSON.parse(mapSignedUrlToFileUuid);
  }
  mapSignedUrlToFileUuid[fileUrl] = fileUUID;
  localStorage.setItem(
    "mapSignedUrlToFileUuid",
    JSON.stringify(mapSignedUrlToFileUuid)
  );

  // Finally, return fileUrl per spec
  return fileUrl;
};
YousefED commented 1 month ago

@0x213F we recently added the resolveUrl method. This way, you could use a custom protocol in uploadFile, like s3://<bucket>/<object>, and then resolve this (sign it) in resolveUrl. Hope this makes sense

@matthewlipski I think we should add an example for s3 and signing urls