React-draft-wysiwyg: How can I set the default fontSize

[Imhemers]

It seems that there is no API to set up

fontSize: {
defaultSize: 18,//This does not work.
options: [10,12, 14, 16, 18, 24, 30, 36, 48, 60],
},

[jpuri]

This can be done using editorStyle or editorClassName. Simply setting css font-size will change font-size of the editor.

[shakdoesgithub]

Hi @jpuri your solution only changes what is displayed in the editor. Is there a way to set the default font size of the draft js content?

[jpuri]

Good point, its missed. Atm you can do that by selecting font-size from dropdown.

This default font-size information is required to be added to all the blocks, I will try to fix this.

[gnyani]

@jpuri Even I have a requirement to change the default font size. Can you let me know when you will be releasing the fix?

[jpuri]

Default font-size can be changed by using editorStyle or editorClassName. Trouble atm is that its not saved in editor-content.

A work around could set default size of font while displaying editor content next time also.

[Pratapvirendra47]

Is this fixed??

[mandarspringct]

Hi @jpuri any updates on this? I have same issue. Version: 1.12.13
Setting font size through editorStyle / editorClassName only sets content font size. Does not change the default font size in the dropdown.
Hope for a fix soon,
Thanks!

[shaunjacobsen]

Hello, also wondering if this is going to be available as an option soon?

[sachinkammar]

Hello @jpuri please update the status of this issue.

[jpuri]

Hey @sachinkammar : defaultFont size can be set as described here: https://github.com/jpuri/react-draft-wysiwyg/issues/551#issuecomment-352435105

I still need to add it to options.

[jakeleventhal]

Similarly, users need to be able to set the default fontFamily. Currently setting the font family will change the display, but not the actual content of the editor.

[sandropoluan]

Any update?

[sandropoluan]

I need this feature

[mikeappell]

I've managed to get a working fix for this issue, but it's fairly convoluted.

constructor(props) {
  ...
  const fontFamily = `fontfamily-${DEFAULT_FONT_FAMILY}`;
  const fontSize = `fontsize-${DEFAULT_FONT_SIZE}`;
 ...
  this.state = {
    editorState,
    fontFamily,
    fontSize,
  };
}

...

setDefaultFontFamilyAndSize = (editorState) => {
  const currentStyles = editorState.getCurrentInlineStyle();

  let newEditorState = editorState;
  if (!currentStyles.some(style => style.match(/^fontfamily-/))) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      this.state.fontFamily,
    );
  }
  if (!currentStyles.some(style => style.match(/^fontsize-/))) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      this.state.fontSize,
    );
  }

  return newEditorState;
}

...

ensureOnlyOneFontSizeAndFamily = (editorState) => {
  const currentStyles = editorState.getCurrentInlineStyle();
  const fontFamilies = currentStyles.filter(style => style.match(/^fontfamily-/));
  const fontSizes = currentStyles.filter(style => style.match(/^fontsize-/));
  let newEditorState = editorState;

  if (fontFamilies.size > 1) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      fontFamilies.first(),
    );
  }
  if (fontSizes.size > 1) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      fontSizes.first(),
    );
  }

  return newEditorState;
}

...

onEditorChange = (editorState) => {
  ...
  const currentStyles = editorState.getCurrentInlineStyle();
  const fontFamily = currentStyles.filter(style => style.match(/^fontfamily-/)).last();
  const fontSize = currentStyles.filter(style => style.match(/^fontsize-/)).last();
  if (fontFamily) this.setState({ fontFamily });
  if (fontSize) this.setState({ fontSize });

  let newEditorState = this.ensureOnlyOneFontSizeAndFamily(editorState);
  newEditorState = this.setDefaultFontFamilyAndSize(newEditorState);
  ...
}

...

componentDidMount() {
  const editorState = this.setDefaultFontFamilyAndSize(this.state.editorState);
  this.onEditorChange(editorState);
}

It would be far easier were the API to reveal an option for a default fontSize/Family, of course, but in the absence of this, this is doing the job for me.

[SangeetAgarwal]

Is there a way to add a font family and keep all the other toolbar options