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?

[agammann]

The match predicate filters nodes inside the transform's location. With no at, that location defaults to the current selection; it is not a document-wide lookup by ID. Also include voids: true when updating a void element. Target the node's path directly:

import { Transforms } from 'slate';
import { ReactEditor } from 'slate-react';

function AttributeInput({ editor, element, attributes, children }) {
  return <div {...attributes} contentEditable={false}>
    {children}
    <input value={element.attributes?.value ?? ''} onChange={event => {
      const path = ReactEditor.findPath(editor, element);
      Transforms.setNodes(editor, {
        attributes: { ...element.attributes, value: event.target.value },
      }, { at: path, voids: true });
    }}/>
  </div>;
}

The input reads its value from the Slate node, and the transform saves the new value on that same node. Spreading the existing element.attributes preserves its other attributes. No preliminary click/selection is needed to establish the transform target.

I reproduced the selection dependence with Slate 0.133.7: the original ID-based setNodes call did nothing with a null selection, whereas the explicit path updated a void node. With slate-react 0.133.8 / React 18.2.0, I also rendered the actual component and invoked its handler with a null selection; it updated the stored value and kept another attribute. This verifies the transform and handler behavior, not browser event/focus interactions. Transform locations and voids, Void rendering.