Вставка изображения в курсор в редакторе с использованием 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 в true.Вам нужно по крайней мере следующее в вашей схеме:

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 ... />
}