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.
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:
.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
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!