score:1
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
]
Source: stackoverflow.com
Related Query
- Multiple draftjs components with plugins at once
- Using React-Router with a layout page or multiple components per page
- Draftjs components with props
- React, async loading for multiple sections/views with different components
- svg not rendering correctly when used with by multiple react components
- react router preload data from multiple components with a single loader animation
- Using memoized callbacks in React, when also creating multiple components with .map
- Having difficulty with unit testing MobX observer components with multiple stores injected
- Components with uppercase function names are rendered multiple times in React Hooks
- How to reuse the same Redux Saga for multiple React components with their own state?
- React HOC with multiple components
- How to test a gatsby page containing components with multiple static queries?
- React page with multiple components of the same type. Show more of same components on button click, prevent re-rendering in original set
- Multiple components to result in one value with Formik
- Re-use navbar component with multiple components
- How do you test components that are wrapped with multiple higher order components?
- Better way to wrap components with multiple context
- React - Multiple components with the same actions & reducers
- How to handle multiple components in a loop with React-Redux
- React/redux multiple components with same container
- How to share data across multiple components with react-query useMutation
- React Router with Multiple Switches Rendering Only First Switch Components
- How to use nextjs with multiple plugins
- What is the best way to render multiple button components with different values?
- Nextjs: How to use ContextAPI with multiple values all of which need to be updated from child components
- ReactJS - Custom hook to create a single object with the data collected from multiple form components
- best practice for using useEffect hook with multiple components
- React Hooks - share parent state with multiple dynamic components
- Render multiple components with a single ternary operator
- Multiple components getting rendered for single route with react-router v4?
More Query from same tag
- Looping in JSX produces a single child element containing an array. I want multiple children
- Enzyme can't shallow render because of an imported script using 'addEventListener'
- create-react-library not working with styled components
- Making a callback in a mousemove handler asynchronous
- trying to map an array out of backend API in REACT
- Axios - Uncaught (in promise) Error: Request failed with status code 500
- issue with routing in react
- MDX blog just displays markdown content instead of rendering it while using `MDXProvider` from `@mdx-js/react` in Next JS
- My Request by token query is returning null
- how can I use async data from node api?
- React Context - Reset itself to default value
- How to create algolia autocomplete custom renderer using react class component
- Reactjs/Redux Edit functionality not working
- React unit tests not failing when test suite is ran
- How to filter a JSON Data to give me a specific Day
- Is there a way to force multiple Context Consumers to share state?
- Variables not changing from React setState simultaneously
- Can we add events on react fragment?
- Using external objects as state properties in React
- React: Unable to access child props in parent's event handler
- React Microfronends: How do I pass authentication and other information from one Front end app to another Front end app?
- ReactJS get external Json
- Download pdf in react js
- Modify or override material-ui button css
- Not able to dispatch KeyDown event to React Component
- How to hover each cell for each day with react FullCalendar?
- Testing results for async calls made in useEffect hook
- Why stays React Bootstrap Navbar collapsed?
- What are selectors in redux?
- How can I get a full working example with React 0.14 and Typescript 1.6.2 and Rails 4.2