globocom/megadraft

Two editors on same page, content from sidebar ends up in the second editor

davidsoderberg opened this issue · 3 comments

davidsoderberg commented

Expected Behavior

Content added from sidebar should end up in the same editor as sidebar are in.

Current Behavior

If I add content from sidebar in editor number on content ends upp in sidebar number two.

Steps to Reproduce

  1. Have two editors at same page
  2. Add content from sidebar in editor number one.

Browser, device, and OS

  • Mac
  • Chrome 79
mogavin commented

Hi, @davidsoderberg ! Are you using the same editorState for both editors ? If this is the case, each publisher must have their own editorState:

import React from "react";
import ReactDOM from "react-dom";
import {MegadraftEditor, editorStateFromRaw} from "megadraft";

import 'megadraft/dist/css/megadraft.css'

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: editorStateFromRaw(null)};
  }

  onChange = (editorState) => {
    this.setState({editorState});
  }

  render() {
    return (
      <MegadraftEditor
        editorState={this.state.editorState}
        onChange={this.onChange}/>
    )
  }
}


class App extends React.Component {
  render() {
    return (
      <div style={{marginLeft: 80}}>
        <h3>First editor</h3>
        <Editor/>
        <h3>Second editor</h3>
        <Editor/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
davidsoderberg commented

No they use thier own state exactly like you are doing in the example.

davidsoderberg commented

After tested this with another editor it seems to be in my code the issue are.

  • 👍1