Feature request: value prop as string about react-rte

[sstur]

You can create a higher order component that does exactly that. Something like this:

import React, {Component} from 'react';
import RichTextEditor, {createEmptyValue} from './RichTextEditor';
import autobind from 'class-autobind';

export default class SimpleRichTextEditor extends Component {
  constructor() {
    super(...arguments);
    autobind(this);
    this.state = {
      editorValue: createEmptyValue(),
    };
  }

  componentWillMount() {
    this._updateStateFromProps(this.props);
  }

  componentWillReceiveProps(newProps) {
    this._updateStateFromProps(newProps);
  }

  _updateStateFromProps(props) {
    let {value, format} = props;
    let {editorValue} = this.state;
    this.setState({
      editorValue: editorValue.setContentFromString(value, format),
    });
  }

  render() {
    let {value, format, ...otherProps} = this.props;
    return (
      <RichTextEditor
        {...otherProps}
        value={this.state.editorValue}
        onChange={this._onChange}
      />
    );
  }

  _onChange(editorValue) {
    let {format, onChange} = this.props;
    if (onChange != null) {
      let stringValue = editorValue.toString(format);
      onChange(stringValue);
    }
  }
}

[sstur]

Hi @KenRambo. I will add a Redux-Form example somewhere. This should totally be usable with redux-form and you shouldn't be required to stringify the content. I'll need to try this myself and publish a working example. I haven't looked at your SO question yet, been busy.

[sstur]

Oh, I see what you mean.

The issue with this approach is that it is not very performant. It requires string parsing/generating on each change to the content. The reason I use componentWillMount and componentWillReceiveProps in the example above is partly because of the expense of string parsing (and also because if we re-generate EditorContent on each change we would lose selection-state/cursor-position). Even comparing two large strings will be more expensive than two object instances because objects use referential equality which is very cheap.

However, I do see your point about hiding this complexity. I think a good compromise would be to include a SimpleRichTextEditor that has an API similar to what you're suggesting.

I'll consider that a feature request.

[skolmer]

Thanks!

[skolmer]

Thanks for the sample, I did it in a similar way. 👍

I know this would be a breaking change but maybe worth to reconsider for the next major release.
This would hide complexity from users and would be more react like to set formatting via props. It would enable you to use react-rte in functional components without extra state handling.

[skolmer]

Creating a SimpleRichTextEditor component with a simpler interface but the performance implications you described sounds like a good compromise.

[sstur]

I've landed this in master at 06ed718

I'll follow up with some explanation in the readme.

[davidglbr]

@sstur thank you for adding this to the last release!
Seems like it's not exported and I'm copying you source code here to use as a custom component. Why not exporting then?

[sstur]

@davidglbr: The main reason is that this is kind of experimental and not well tested. I'd feel more comfortable exposing it if there are some tests, especially for some of the edge cases. I'd be open to a PR.

[KenRambo]

Hi! I came across this issue and am running into the same set of blockers with my app. I'm specifically looking to render React RTE as a Redux-Form field and am unable to save the editorValue to the form state. I'm also fully aware that I may just be doing something dumb as I've only just recently started with React/Redux etc.

Here is my StackOverflow post on the specifics. @sstur - I love the library - keep up the great work!

Would love any advice or gentle nudges in the right direction :)

[KenRambo]

@sstur Thanks!

[gsdean]

Would love to see a redux-form example as well. Especially one that works with redux-form action (i.e. reset, initialize etc.)

All of my attempts end up with a cursor position bouncing around as the editor's contents gets redrawn when redux-form updates the input value (after calling the necessary onChange).

As far as I can tell the only way to get it to work, would be string compare between newProps and props in shouldComponentUpdate or componentWillReceiveProps to prevent the redraw.

[markau]

I am reluctant to +1 this, except to say that react-rte and redux-form are so good together that it would be nice to see them married with a working example 😁

[KenRambo]

See the answer to my StackOverflow question - got it to work :)

http://stackoverflow.com/questions/40294295/redux-form-and-react-rte-save-rte-editorvalue-to-form-state

[markau]

Hey @KenRambo, thank you - I also got it working via your SO comment and the gist provided by the maintainer of redux-form. As noted in the comments in the gist and here, there are a few issues (that are probably edge cases) so I am keen to see as many examples as possible to see if there are ways around those. Cheers.