Вставка изображения в курсор в редакторе с использованием slatejs

Question

Я пытаюсь реализовать редактор Rich Text с использованием actjs и slate.js. До сих пор мне удавалось заставить работать большинство функций, но не удалось добавить изображения в документ, когда курсор не работает (однако вставка изображения в начале документа работает).

когда я пытаюсь вставить его в любой другой момент, я получаю ошибку. в renderpart, т. е. выполнение метода onchange редактора.

    const target = getEventRange(e, this.state.EditorComp.state.value)
change = this.state.EditorComp.state.value.change().call(this.insertImage, filelocation,target)
this.state.EditorComp.onChange(change);

slate-react.es.js:1229 Uncaught Error: Unable to find a DOM node for "51". This is often because of forgetting to add `props.attributes` to a custom component.
at findDOMNode$1 (slate-react.es.js:1229)
at findDOMPoint (slate-react.es.js:1247)
at findDOMRange (slate-react.es.js:1290)

Мой код основан на ссылке https://github.com/ianstormtaylor/slate/blob/master/examples/images/index.js

Пожалуйста помоги.

Answer 1

У вас есть схема, определенная для вашего редактора? У меня была такая же ошибка, пока я не добавил схему для изображений, которые устанавливают isVoid к истине. Вам нужно по крайней мере следующее в вашей схеме:

const schema = {
  blocks: {
    image: {
      isVoid: true
    }
  }
};

Answer 2

Я хотел бы представить, что вы хотите вставить изображение, если вы хотите, чтобы оно было в курсоре:

change.insertInline({
  type: 'img',
  isVoid: true,
  data: { location: location }
})
change.moveToStartOfNextText().focus()

Затем в вашем методе renderNode:

const { attributes, node, isSelected } = props
if (node.type === 'img') { 
  node.data.get('location')
  return <img ... />
}