score:1

Accepted answer

i'll be honest that i don't quite understand the syntax of this line:

const {italicbutton, boldbutton, underlinebutton, olbutton, ulbutton, h2button} = richbuttonsplugin;

this is called destructuring, and is a way to extract data from objects (or arrays), and putting them into variables. you'd get the same result if you wrote:

const italicbutton = richbuttonsplugin.italicbutton
const boldbutton = richbuttonsplugin.boldbutton
const underlinebutton = richbuttonsplugin.underlinebutton
...and so on

and this is why you get the error:

module build failed: duplicate declaration "italicbutton"

you've created the variable const italicbutton twice (you've actually done it with all of them).

what i think you should do is: turn your editor, with the rich buttons, into its own component. it could look something like this:

import editor from 'draft-js-plugins-editor';
import createrichbuttonsplugin from 'draft-js-richbuttons-plugin';

const richbuttonsplugin = createrichbuttonsplugin();

const { italicbutton, boldbutton, underlinebutton, olbutton, ulbutton, h2button } = richbuttonsplugin;

const plugins = [
  richbuttonsplugin 
  //...other plugins
];

export default class myeditor extends component {
  render() {
    return (
      <div>
        <div classname="mytoolbar">
          <boldbutton/>
          <italicbutton/>
          <underlinebutton/>
          <olbutton/>
          <ulbutton/>
          <h2button/>
        </div>
        <editor
          editorstate={this.props.editorstate}
          handlechange={this.props.handlechange}
          plugins={plugins}
          // ...other props
        />
      </div>
    );
  }
}

let's say you put this component into a file called my-editor.js. now you can re-use it from wherever you want, like this:

import myeditor from './my-editor.js';
import { editorstate } from 'draft-js';

export default class app extends component {

  state = {
    editorstate: editorstate.createempty(),
  };

  handlechange = (editorstate) => {
    this.setstate({ editorstate })
  }

  render() {
    return (
      <div>
        <myeditor
          editorstate={this.state.editorstate}
          handlechange={this.handlechange}
        />
      </div>
    );
  }
}

if you need multiple instances of them on the same page, you could create an array of editorstates like this:

export default class app extends component {

  state = {
    editorstates: [editorstate.createempty(), editorstate.createempty()]
  };

  handlechange = (index) => (editorstate) => {
    const currentstates = this.state.editorstates
    const updatedstates = currentstates[index] = editorstate
    this.setstate({ editorstates: updatedstates })
  }

  render() {
    return (
      <div>
        {this.state.editorstates.map((editorstate, index) =>
          <myeditor
            editorstate={this.state.editorstate}
            handlechange={this.handlechange(index)}
          />
        })
      </div>
    );
  }
}

i haven't tried running this code, but it should point you in the right direction either way. hope it helps, and just let me know if something is unclear or doesn't work!

score:1

marking tobiasandersen's answer as correct since it led me to what i needed to do. i was confused by the plugin syntax and how it was being initialized, but eventually go it to work by doing the following in mycomponent:

import createrichbuttonsplugin from "draft-js-richbuttons-plugin";

  componentwillmount() {
    const richbuttonsplugin = createrichbuttonsplugin();
    this.setstate({
      plugin: richbuttonsplugin
    })
  }

then when rendering the editor add

<myeditor plugin={this.state.plugin} />

then finally in myeditor i could use

const richbuttonsplugin = this.props.plugin;
const {italicbutton, boldbutton, underlinebutton, olbutton, ulbutton, h2button} = richbuttonsplugin;

const plugins = [
        richbuttonsplugin
      ]

Related Query

More Query from same tag