Slate: Update block meta data from rendered component

[mull]

Hi

TLDR: How can I, given a known block's key, update the data attribute of that block resulting in a new valid State?

I'm developing a few components which are heavy in metadata. I'm using the Block types data attribute which is working great so far. I'm curious what the best strategy is for updating this meta data though. The problem is that the next version of this meta data is only available from the react component that renders the block (as specified in schema.nodes.)

I'm able to reach the onChange method specified to Editor via props.editor.onChange so that's fine. It's the transformation that leaves me a bit clueless. I _guess_ I could remove the block and add it back in with new metadata, but this seems excessive.

setBlock looks somewhat useful though these components aren't necessarily in focus.

Thank you! The slate experience has been awesome thus far.

PS. The link to the slack team signup is down. (Heroku 500)

[mull]

To give some context to why I might need this here's an example of the components building:

We need images to be croppable. So we take a src and create an Image and render that onto a canvas. When the user drags the image we just do a bit of diffing and then render the same image onto the canvas but with new parameters for width & height. The canvas element can then be used to extract the cropped image.

To achieve this we need obviously need to keep the original image around (which can be done in the react component) and continuously update the the Block with the new Base64 value.

Hope that makes sense! Thanks

[ianstormtaylor]

Hey @mull, good question and makes total sense. I believe you'll want to use the setNodeByKey transform to set properties on a node:

Which might looks like:

const block = ...

return state
  .transform()
  .setNodeByKey(block.key, { ... })
  .apply()

Also note that it doesn't merge properties.data so you have to update it entirely. Hope that helps! Let me know if you have any more questions. Just fixed the Slack issue too.

Glad you like Slate so far 😄

[mull]

Much appreciated @ianstormtaylor! I was looking at it but didn't hit me that it was the right one. Thanks again!

[aehlke]

Sorry to revive this closed ticket, but I have a follow-up question related to this:

If the rendered node includes something from the data, how can we re-render the node after updating its data this way?

edit: Asked in new ticket below, instead.