Добавление кнопки горизонтального правила в React Draft Wysiwyg

Question

Я пытаюсь добавить пользовательскую кнопку в React Draft Wysiwyg вставить тег <hr> в мой контент.

Используя демонстрации и документацию, мне удалось получить пользовательскую кнопку для вставки текста, но без разметки.

onClick = () => {
  const { editorState, onChange } = this.props;
  const contentState = Modifier.replaceText(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    "this is just text <hr />",
    editorState.getCurrentInlineStyle(),
  );
onChange(EditorState.push(editorState, contentState, "insert-characters"));
}

Я сейчас пытаюсь создать блок типа Atomic , используя этот пример, за исключением того, что не могу понять, как изменить изображение для элемента <hr>.

insertImage = () => {
    const { editorState, onChange } = this.props;
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
        'image',
        'IMMUTABLE',
        { src: 'http://www.image.png' },
    )
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
    const newEditorState = EditorState.set(
        editorState,
        { currentContent: contentStateWithEntity },
    )
    onChange( AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
}

Кажется, я нигде не могу найти примеров вставки пользовательских HTLM в редактор. Может кто-нибудь указать мне правильное направление, пожалуйста? Спасибо!

Answer 1

Вы не сможете вставить HTML. Чтобы вставить <hr />, вам нужно разделить текущий блок на два и между атомным блоком вставки. Сделайте этот блок вашего пользовательского типа, чтобы вы могли отображать этот тип как пользовательский компонент, который может отображать <hr />.