Transforms.setNodes causes nodes to disappear

Problem I’m using Transforms.setNodes to update some nodes (specifically link elements). Unfortunately, this results in some weird behavior where the nodes are completely removed instead of being updated.

Codesandbox: https://codesandbox.io/s/gifted-nightingale-shm5b

Basically, I’m trying to modify some metadata inside a link element by using Transforms.setNodes. Unexpectedly, this causes the link to disappear entirely.

The starting editor value is “This is an Example link in a paragraph”, which then turns into “This is an in a paragraph” once the transform runs. This happens both when using slate-react (as demonstrated in Editor.js) as well as headlessly (as demonstrated in Headless.js).

Solution Transforms.setNodes should not delete nodes. It should only update the nodes’ properties.

[marcdavi-es]

Update:

I fixed my problem by explicitly returning true from editor.isInline for all images.

When Slate treated them as block void elements, I had the behaviour described above. Now when Slate treats them as inline void elements, it works as intended.

I can’t claim to understand why there was inconsistency, but this fix is good enough for what I’m doing right now.

[DouglasGabr]

I was having this error trying to apply bold text in the same paragraph as a link, and was able to solve this the same way as @marcdavi-es. I defined a function withInlines:

function withInlines(editor: Editor) {
  editor.isInline = (element) => element.type === 'link';
  return editor;
}

Then applied it to the editor creation:

const [editor] = useState(() => withInlines(withReact(withHistory(createEditor()))));

I also saw that is the exact way that is done in the inlines example