Void nodes, saving complex data structures

[leo-petrucci]

I was looking at the examples and stumbled upon the Void nodes example.

I thought I'd use something along these lines for:

• custom elements like a div with rich-text content but with editable attributes.
• Image element that accepts upload or url
• Adding alt text and title to image

However upon further inspection it doesn't look like any of the data from either the input or the select is saved in the editor.

Are there any examples on how something like this would be implemented? How do I save data besides text to the current node?

[leo-petrucci]

After a lot of trial and error I figured out I can use Transforms to change Slate's data within a void, so I've got a component like this:

const MdxElement = (props: CustomRenderElementProps) => {
  const { attributes, children, element } = props;
  const mdxElement = element;
  const { id } = mdxElement;

  return (
    <div
      style={{ border: "1px solid red", padding: "1rem" }}
      {...attributes}
      contentEditable={false}
    >
            <>
              <h4>Input</h4>
              <input
                type="text"
                onChange={(e) => {
                  Transforms.setNodes(
                    editor,
                    {
                      attributes: {
                        value: e.target.value
                      }
                    },
                    {
                      match: (node) => {
                        return node.id === id;
                      }
                    }
                  );
                }}
              />
            </>
      <div>{children}</div>
    </div>
  );
};

This "works", but only when I first click on the div containing the input, which makes for terrible UX.

Any suggestions on getting around this?