Update node attributes without re-rendering the node

1

Building on top of the ‘upload handling’ example, I have achieved the following thing:

  1. Image being uploaded will be immediately rendered by the window.URL.createObjectUrl while the image is being uploaded to AWS S3 in the background.

Now when the image has been uploaded in S3 and its asset url is sent back to front-end, I don’t want to create an image node with its src as the S3 url cos I wanna avoid fetching the asset from S3, plus it avoids flashing of nothingness in between…

So instead what I have done is I store that S3 url in a sorta data-src attribute.

view.dispatch(
      view.state.tr
        .replaceWith(
          pos,
          pos,
          schema.nodes.image.create({
            src: blobFileUrl,
            dataSrc: s3_location
          })
        )
        .setMeta(placeholderPlugin, { remove: { id } })
    );

But I’m having trouble rendering the image back with its S3 url when the document is loaded next time using the Node.fromJSON method cos the image node’s src attribute still point to the blob object url which will be invalid at that time.

I have tried utilizing the setNodeMarkup method right after the snippet above hoping to edit the attributes behind the scene, but that would create an image node and fetching asset from S3 which I wanna avoid.

Anything else I can try?

1 Like
2

Ok looks like I have no choice but to load the S3 asset then once its loaded swap it out with the placeholder.

Please feel free if anyone has a better approach :slight_smile:

3

It might be possible to use a node view that has access to some mapping from actual src values to placeholder values, and use that to render the node with the non-s3 src when appropriate.