1

I use Slate editor in my React app. I've created the custom inline tool called 'company'. Once 'company' button is clicked current Company name is pasted on the current position; Everything perfect there. I get the following JSON data saved to DB.

[
  {
    "type": "paragraph",
    "children": [
      {
        "type": "company",
        "children": [
          {
            "text": "My Company"
          }
        ]
      }
    ]
  }
]

BUT I want to get actual company name each time when Editor is loaded. So, My company name was updated to 'My Updated Company' but I still see old name loaded from DB (initial data). I've tried to implement the following approach:

export function Element(props: ElementProps) {
  const { removeLink } = useEditorLink();
  const { orgName } = useAuth(); // <-- there is my actual company name
  const { attributes, children, element } = props;
  const editor = useSlateStatic();
  const selected = useSelected();
  const focused = useFocused();

  switch (element.type) {
    ...
    case 'company':
      children[0].props.text.text = orgName; // <--- there I pass orgName to replace value from initial data
      return <Company>{children}</Company>;
    default:
      return <p {...attributes}>{children}</p>;
  }
}

I works well in 'readOnly' mode. Once I click 'Edit' and 'readOnly' becomes: false, I get error TypeError: Cannot assign to read only property 'text' of object '#<Object>'

Well, I've tried to make this object writable but no luck...

Object.defineProperty(children[0].props.text, 'text', {
  configurable: true,
  value: orgName
})

In this case I get error Cannot redefine property: text.

Guys, can I re-define element's text somehow with Slate instruments or how I can modify children object and pass it?

Thanks.

0 Answers0