Make storage work

[mismosmi]

For images we need some generic way to upload to and view images from S3-compatible storage.

[garciamarin]

Can we maybe do this with signed urls?

We would just need 2 async functions provided at some point by the user

async function getSignedGetUrl(fileKey: string): string { return signedUrl } // for viewing
async function getSignedPostUrl(fileKey: string): PresignedPost { return post} // for posting

and a bucketPostUrl. To upload we would do something like

const { url, fields } = await getSignedPostUrl((fileKey)
await fetch(url, {
    method: 'POST',
    body: formData(...fields...) ,
  })

and similarly for the fetching images from the bucket.

Would something like this workout?

[mismosmi]

That should work We can probably just throw some server actions in there.

We should probably reimplement something like https://github.com/farbenmeer/handbuch/blob/main/src/components/S3Image.tsx here.

[garciamarin]

yes! like that looks verygood! Btw its very similar to how we do it too ^^

What I dont quite get, is when we get this info from the user (functions and what not). Is it something like:
user installs package ->
user creates "instance" of desired type of RTE and if necessary provides the needed functions ->
User can use the RTE and add photos by giving props to the <RTE/> component?

[mismosmi]

I'd expect something like

<Editor getSignedImageUrl={...} getSignedUploadUrl={...} plugins={...} getMentions={...} />

I guess 🤷

[mismosmi]

Or maybe

<Editor plugins={[
  imagePlugin({ getSignedImageUrl, getSignedUploadUrl }),
  mentionPlugin({ getMentions }),
  ...
]} />

[garciamarin]

alright I see.!

We can always check at the end if it became annoying to have to pass in many porps everytime when one uses the RTE or if its actually ok.

The second options looks nicer to me!

[mismosmi]

if it gets annoying you can always pull out the plugin initialization

const plugins = [imagePlugin(...), mentionPlugin(...)]

and then use that wherever you use the editor

<Editor plugins={plugins} />

or even wrap the editor

function MyEditor() {
  return <Editor {...} />
}

[mismosmi]

I like passing parameters to the plugin that needs them better as well.