draft-js-utils icon indicating copy to clipboard operation
draft-js-utils copied to clipboard

Apply element/attributes/style to block level elements

Open Vall3y opened this issue 9 years ago • 2 comments

Currently you can configure inlineStyles elements to use custom element/attributes/style, but in order to do that for the block elements, you have to configure a blockRenderer, and override the part of the default behavior that you want.

For example, if I define a blockRenderer for this output

<p><strong class="inline inline--bold">Lorem ipsum dolor sit amet</strong>, consectetur <em class="inline inline--italic">adipiscing elit. In sit amet enim</em> auctor, sagittis enim sit amet, eleifend arcu. <ins class="inline inline--underline">Nam nisl quam</ins>, molestie eget egestas a, auctor non elit.&nbsp;</p>

such as this:

blockRenderers: {
    unstyled: block => {
      return `<p className="block">${block.getText()}</p>`
    }
  }

I get this (I lose the block rendering of the children)

<p className="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet enim auctor, sagittis enim sit amet, eleifend arcu. Nam nisl quam, molestie eget egestas a, auctor non elit. </p>

When I wanted to preserve the way the body is implemented, and only add the className

Is there a way to do that with the current configuration?

Vall3y avatar Aug 11 '16 15:08 Vall3y

bump

ssilve1989 avatar Aug 08 '17 22:08 ssilve1989

I need the same thing: If only the BlockRenderer would also pass the MarkupGenerator as a parameter, which should be quite easy, then the API would look like this in @Vall3y example:

blockRenderers: {
    unstyled: (block, generator) => {
      return `<p className="block">${generator.renderBlockContent(block)}</p>`
    }
  }

voliva avatar May 28 '18 15:05 voliva