React-draft-wysiwyg: <hr/> tag and preview - Request

[Subha]

I was looking to see if it was easy to add a <"hr"> element to my toolbar options. Do i need to shop and look from draft-js ? Any recommendations or examples on how to pass a html element to the toolbarCustomButtons?

[jpuri]

@Subha : plz check this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/CustomToolbar/index.js

You would also need to pass a custom block renderer in this case: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L82

Plz let me know if you need more help.

[Subha]

Many thanks for your response . I had looked at that but the feature that i am looking for is to add a horizontal Rule in addition to the something similar to the below example. But the replaceText takes a string as a parameter ( '⭐') but I want to instead pass a component to add a new line.

const { editorState, onChange } = this.props;
const contentState = Modifier.replaceText(
editorState.getCurrentContent(),
editorState.getSelection(),
'⭐',
editorState.getCurrentInlineStyle(),
);
onChange(EditorState.push(editorState, contentState, 'insert-characters'));
Another good example that I looked at is handleReturn from draft-utils. Do you have any example on how to use the custom block. Also do I get support for Preview out of the box?

Appreciate your response.

[jpuri]

Your case is to create new block type. You should try out something like this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/controls/BlockType/index.js#L86

[jpuri]

Or I think you need to create a block of type atomic: https://draftjs.org/docs/api-reference-content-block.html

Then user block rendering function to display it as <hr /> since its not supported by default in DraftJs.

[Subha]

I got this working now using the atomic block.
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

return AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');

and in my blockRenderer I was checking the entity and adding the dividerBlock component. I took some reference from Draftail

const entity = contentState.getEntity(entityKey);
const isHorizontalRule = entity.type === ENTITY_TYPE.HORIZONTAL_RULE;

if (isHorizontalRule) {
  return {
    component: DividerBlock,
    editable: false,
  };
}

Thank you For the leads.

Do we already have preview options within the toolbar or should I add the similar way?

[fishmankkk]

@Subha can i see the code? i use the way but it's not work.

[Subha]

This is partially working for me. But since I am updating the props in my application componentWillReceiveProps. I need to first update this

---

tag in my state which I really did not get time to figure out.

class CustomOptionH extends Component {
  static propTypes = {
    onChange: PropTypes.func,
    editorState: PropTypes.object,
  };
  addHorizontalRuleRemovingSelection: Function = (editorState) => {

    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
      ENTITY_TYPE.HORIZONTAL_RULE,
      'IMMUTABLE',
      {},
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

    return AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
  };

  addHR: Function = () => {
    const { editorState, onChange } = this.props;
    onChange(
      this.addHorizontalRuleRemovingSelection(editorState),
    );
  };

  render() {
    return (
      <div onChange={this.props.change} onClick={this.addHR}>―</div>
    );
  }
}

  blockRenderer: Function = (block) => {
    const { editorState } = this.state;
    if (block.getType() === 'atomic') {
      const contentState = editorState.getCurrentContent();
      const entityKey = block.getEntityAt(0);

      const entity = contentState.getEntity(entityKey);
      if (entity && entity.type === 'HORIZONTAL_RULE') {
        return {
          component: DividerBlock,
          editable: false,
        };
      }
    }
    return undefined;
  }

render() {
    const { editorState } = this.state;
    return (<div className="rdw-storybook-root">
      <span>HTML Content: <pre>{'<p>Hey this <strong>editor</strong> rocks 😀</p>'}</pre></span>
      <Editor
        editorState={editorState}
        toolbarClassName="rdw-storybook-toolbar"
        wrapperClassName="rdw-storybook-wrapper"
        editorClassName="rdw-storybook-editor"
        **blockRendererFn={this.blockRenderer}**
        contentState={"<strong>This is from the content</strong>"}
        onEditorStateChange={this.onEditorStateChange}
        **toolbarCustomButtons={[<CustomOptionH />]}**

      />
    </div>);
  }