React draft wysiwyg default font size

Question

Could I ask you how to change default font size in react draft wysiwyg https://github.com/jpuri/react-draft-wysiwyg#readme? Class defining toolbar:

export const toolbar = {
  options: ['inline', 'textAlign', 'list', 'link', 'fontSize', 'colorPicker', 'emoji'],
  inline: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ['bold', 'italic'],
  },
  list: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ['unordered'],
  },
  textAlign: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ['left', 'center', 'right']
  },
  link: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    popupClassName: undefined,
    dropdownClassName: undefined,
    showOpenOptionOnHover: true,
    defaultTargetOption: '_self',
    options: ['link'],
    linkCallback: undefined
  },
  fontSize: {
    options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96], 
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
  },
  colorPicker: {
    className: undefined,
    component: undefined,
    popupClassName: undefined,
  },
  emoji: {
    inDropdown: true,
    className: undefined,
    component: undefined,
    popupClassName: undefined,
  },
}

Font size 14 is defautl now. I don't know why. I searched for 14 in all the sourcecode and I didn't found it anyhere. When option 14 is not present in list no font size is defaultly selected. Wanted is to preselect option font size = 24. Thanks for reply.

Answer 1

I had same question and struggled with it even a woking day!
It's a pity that there is no oficial solution in documentation... Found 2 solutions:

1. Simple (but not flexible): just add this css code

.DraftEditor-root {
  font-size: 24px;
}

This would apply size=24px to all the react-draft-wysiwyg items on the page/

Found this in library source code:
https://github.com/jpuri/react-draft-wysiwyg/blob/f59ee8419cdbd45aab3bdfdf1995f112b09bbb6a/src/controls/FontSize/Component/index.js#L30

2. Complex, but more flexible: Firstli, import util functions (react-draft-wysiwyg uses this library itself)

import {
    toggleCustomInlineStyle, getSelectionCustomInlineStyle,
} from 'draftjs-utils';

Secondly, on each render(!?) you should execute:

const fontSize = getSelectionCustomInlineStyle(editorState, ['FONTSIZE',]).FONTSIZE
if (!fontSize) {
    setEditorState(toggleCustomInlineStyle(editorState, 'fontSize', 24))
}

Why on each render and not on creating EditorState?
I don't know.
But this custom style is reset to empty (so - to default) when focus editor, so I have to force it each time.

I hope first solution would be enought for me and for you, because second looks like workaround and bad practice!