Slate.js - trying and failing to update the text of a custom node using Transforms.setNodes

Question

For example, I will have an editor.children layout like so:

  [
    {
      type: 'paragraph',
      children: [
        {
          text: 'A line of text!',
        },
      ],
    },
    {
      type: 'variable',
      id: '12345',
      children: [
        {
          text: 'Text to be changed',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'A line of text!',
        },
      ],
    },
  ],

And I'm trying to change the text at [0,1,0] ("Text to be changed") to a new value. I'm using this function:

const updateVariableName = (editor, variableId, updatedName) => {
  let variableChipPath = null;

  for (const [node, path] of Node.nodes(editor)) {
    if (node.variableId === variableId && Element.isElement(node)) {
      variableChipPath = path;
      break;
    }
  }

  if (variableChipPath) {
    const textNodePath = [...variableChipPath, 0];
    Transforms.setNodes(editor, { text: updatedName }, { at: textNodePath });
  }
}

From everything I've read on the docs this seems like it should work. I'm getting the correct variableChipPath as [0, 1]. If I instead write the last line as:

Transforms.setNodes(editor, { id: "67890" }, { at: variableChipPath});

The id updates appropriately. I just can't seem to target children[0].text. Any ideas?

Joe Anderson · Accepted Answer · 2025-05-05 11:43:04Z

1

Slate doesn't support modifying children or text using the setNodes transform. This is an intentional limitation to ensure that the editor's value is updated using the correct operations.

To replace the content of a text node, you should use Transforms.insertText. If you pass the text node's path as the at option of insertText, then the existing text will be removed automatically (demo - you may need to click the link twice).

Transforms.insertText(editor, updatedName, { at: textNodePath });

edited May 5 at 11:43

answered May 5 at 11:26

Joe Anderson

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Slate.js - trying and failing to update the text of a custom node using Transforms.setNodes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related