How to add a custom className to an element in DraftJS editor?

How can I add a custom className to an element in the form e.g. I would like something like the HTML output to be something like this- <p class="custom-class-1"></p>

The closest thing I have seen is this- draftjs.org/docs/advanced-topics-block-styling.ht… which basically says that you can apply a className to a particular type of tag.

However, in the case that I want to apply two different classNames to <p> tag at different places in the same form. How do I do that?

Attached an image- The first textarea is a draft-js based editor and second textarea is just a HTML form of the editor content. What I would like is a way to add custom classes to these two </p> tags.

At its core, DraftJS' API only deals with maintaining the immutable data model representing an editor's state (which, among other things, involves content blocks).

The HTML output is a result of the DraftJS' Editor Component, which renders the said immutable state into a corresponding contenteditable HTML tree.

Having said that, can you see what's wrong with the following assumption?

The closest thing I have seen is this — draftjs.org/docs/advanced-topics-block-styling.html#blockstylefn... which basically says that you can apply a className to a particular type of tag.

You're spot on until the bold part ... you can use the blockStyleFn to apply a className not to a particular type of tag, but to a particular block type.

The example in the above URL doesn't help with this distinction, because both the block type, and the corresponding HTML tag are called blockquote. And hence, the pitfall! :)

The solution to your problem is to change the block type of the content block, which by default is equal to unstyled ... to something custom, say custom-block-type

For a list of default block types that come out of the box with DraftJS, take a look here — draftjs.org/docs/api-reference-content-block.html

And then you can use the blockStyleFn (draftjs.org/docs/advanced-topics-block-styling.html#blockstylefn) to target blocks with custom-block-type to add custom-class-1 to the corresponding HTML element.

Hope this answers your question, if not please do let me know! :)

Thanks for your help Sai, it was really helpful!

Just one thing, the link you gave is no longer available, here the new one: draftjs.org/docs/advanced-topics-block-styling

It seems you are trying to add add separate class names for paragraphs which come out as an output of your stateToHTML(contenState) function from draft-js-export-html utility module?

If so, you just use the second inlineStyles option to stateToHTML function. Since text has an unstyled type by default out of all the default block types of draftjs, you could do

let options = { 
    UNSTYLED: {
        attributes: {class: `your class name-${blockKey}`},
    }
}

stateToHTML(contentState, options)

Where blockKey is the key of current block, to ensure that classNames aren't same for any two paragraphs. blockKey which could be easily extracted out.

Let me know if this is what you meant? If not, let me know what I didn't understand right.

To whoever stumbles upon this answer, although an idea was common between my answer and Sai's, Sai's answer better handles the use case of the question, so see his!

I'm not 100% sure what you're aiming for. I read this as you want to set class names dynamically on specific terms? If I'm right, take a look at this library here. I use this heavily when it comes to class names under conditions.

github.com/JedWatson/classnames

Sebastian Thanks for the answer. However, I am looking for something entirely different. I updated my question description to make it visual and more clear. :)

Thread

How to add a custom className to an element in DraftJS editor?

Responses(3)

Recent threads

Search Hashnode

How to add a custom className to an element in DraftJS editor?

Responses(3)

Recent threads