Search code examples
reactjsdraftjs

Change style of list's bullet

I have a draft-js component. I can add styles into StyleMap (via adding new objects into customStyleMap). However when I have a selected list and change size, it only changes size of the selected text - bullets are still same. I know I can change style of block with blockStyleFn={getBlockStyle} but here I have two problems:

  1. As far I know, it only works with already defined classes - but I can't have classes for every size. How can I dynamically add class?

  2. How can I get style out of block?

So in getBlockStyle(block) I have to do something like this:

let style = block.getStyleOfContent(); //for example returns fontSize: '16px'
addNewClass('listFontSize16px', style); //add new class
return listFontSize16px;

Or any other solution?

Solution

  • Ok, I figure it out...

    1. How to create a <style> tag with Javascript

    2. In getBlockStyle(block) block contains a key. Thanks to the key I can find the same key in content of editorState and there is the style.

    It is not the nicest solution but it works pretty good.