0

I'm trying to add a custom button to React Draft Wysiwyg to insert a <hr> tag to my content.

Using the demos and documentation I've managed to get the custom button to insert text but not markup.

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"));
}

I'm now trying to create a block of type Atomic using this example except I can't figure out how to change the image for <hr> element.

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, ' '));
}

I can't seem to find any examples of inserting custom HTLM into the editor anywhere. Can someone point me in the right direction please? Thanks!

Tim Barnett
  • 1,012
  • 5
  • 9

1 Answers1

0

You will not be able insert HTML. To insert <hr /> you need to split current block in two and in between insert atomic block. Make that block of your custom type and so that you can render that type as custom component which can render <hr />.

Tomas Kirda
  • 8,347
  • 3
  • 31
  • 23
  • The problem was `html-to-draftjs` not supporting multiple types of atomic blocks. After modifying `chunkBuilder.js` in `html-to-draftjs` I got it working. I'll be submitting an issue to the project shortly. Thanks for your reply. – Tim Barnett Sep 10 '18 at 14:50
  • Hi @TimBarnett , I am also facing the same issue. Could you please let me know what changes you did to add a horizontal rule in the react-draft-wysiwyg editor? Any inputs for this will help me a lot. – CoderBeginner Nov 29 '21 at 18:09