Search code examples
draftjs

What is the best solution for organize two (or more) editing areas inside custom component?


What is the best solution for organize two (or more) editing areas inside custom component? My goal is to create custom component, that works similar as Image Block from medium-draft http://bitwiser.in/medium-draft/
However, in my case should be two areas when user might add and styling text (see picture below). I saw how made description block below image in image.js component from medium-draft - https://github.com/brijeshb42/medium-draft/blob/master/src/components/blocks/image.js It made with EditorBlock which takes props from parent. I don't have ideas how organize two rich editable areas inside custom component. enter image description here


Solution

  • To use draft, you need make a wrapper which has the background image. Then add the two text block with that wrapper.