SlateJS: All void elements are deleted instead of the selected one

Question

I tried recreating a simple mentions example here https://codesandbox.io/s/slatejs-poc-9j4f20?file=/src/App.tsx

The issue that I am facing is that, whenever I delete any void element, all of them are deleted.

Answer 1

The problem is that your initialValue is not correctly formatted. Your deserialize function returns an array containing only text nodes:

[
  {
    type: "text",
    children: [{ text: "My name is " }]
  },
  {
    type: "variable",
    variable: "user.name",
    children: [{ text: "" }]
  },
  {
    type: "text",
    children: [{ text: " and I am " }]
  },
  {
    type: "variable",
    variable: "user.age",
    children: [{ text: "" }]
  },
  {
    type: "text",
    children: [{ text: " old" }]
  }
]

While you should have a common parent node for them:

[
  {
    type: "paragraph",
    children: [
      { text: "My name is " },
      {
        type: "variable",
        variable: "user.name",
        children: [{ text: "" }]
      },
      { text: " and I am " },
      {
        type: "variable",
        variable: "user.age",
        children: [{ text: "" }]
      },
      { text: " old" }
    ]
  }
]

Demo with the correct initialValue