With switching between two editors toolbar save state after link (action) opened to add/edit

[Igor Demo]

-- Bug Report --

Expected Behavior

Toolbar should reset state between switching editor

Current Behavior

Toolbar saves state between switching editor

Steps to Reproduce

I added two editors to the one page. And found that during editing if toolbar link (action) opened and than I click to text on second editor toolbar show me previous state (link is opened to edit, state from editor 1)

Code Example

export class RichEditor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      editor_actions: editorAvailableActions(props.customTools),
      editor_state: editorStateFromHTML(props.rawHtml)
    };
    this.key_bindings = [
      {
        name: 'noop',
        isKeyBound: e => e.keyCode === 85 && e.metaKey,
        action: noop
      }
    ];
    this.callback = debounce(html => {
      this.props.handleChange(html);
    }, 100);
  }

  componentDidMount() {
    if (this.props.auto_focus) {
      this._editor.focus();
    }
  }

  componentWillReceiveProps(nextProps) {
    const editorHtml = converter.stateToHTML(
      this.state.editor_state.getCurrentContent()
    );
    const { rawHtml } = nextProps;
    const isRawHtmlEmpty = rawHtml === '' || rawHtml === emptyHtml;
    const isEditorHtmlEmpty = editorHtml === emptyHtml;

    if ((isRawHtmlEmpty && isEditorHtmlEmpty) || rawHtml === editorHtml) {
      return;
    }
    this.setState({
      editor_state: editorStateFromHTML(nextProps.rawHtml)
    });
  }

  handleChange = editorState => {
    const currentEditorContent = editorState.getCurrentContent();
    const editorHasText = currentEditorContent.hasText();
    const html = editorHasText
      ? converter.stateToHTML(currentEditorContent)
      : '';
    this.setState(
      {
        editor_state: editorState
      },
      () => {
        const editorHtml = converter.stateToHTML(
          this.state.editor_state.getCurrentContent()
        );

        if (this.props.rawHtml !== editorHtml) {
          this.callback(html);
        }
      }
    );
  };

  render() {
    const {
      editor_actions: editorActions,
      editor_state: editorState
    } = this.state;
    const { classes, disabled } = this.props;
    const html = converter.stateToHTML(editorState.getCurrentContent());

    return disabled ? (
      <div
        className={classes.disabled}
        dangerouslySetInnerHTML={{ __html: html }}
        data-test="disabledContent"
      />
    ) : (
      <div
        data-test="enabledContent"
        onClick={() => {
          this._editor.focus();
        }}
        role="presentation"
      >
        <MegadraftEditor
          actions={editorActions}
          editorState={editorState}
          entityInputs={entityInputs}
          keyBindings={[...this.key_bindings, ...this.props.key_bindings]}
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          ref={editor => {
            this._editor = editor;
          }}
          sidebarRendererFn={noop}
        />
      </div>
    );
  }
}

screencast-2022-05-18.20-14-11.mp4

[Igor Demo]

@marcelometal this bug not reproduced on release 0.5.2 but can be reproduced for highest versions including latest one. I also checked on simpler implementation for MegadraftEditor.

[Luciana Pepe Lúcio]

This was completed in #427