using useState for css does not change webview styles

[AkalUstat]

I am using useState to sync webview styles (ie text size) with user settings, but the webview does not update until reload

code example

  const [ css, setCSS ] = useState( {
    backgroundColor: theme.colors.background,
    color: theme.colors.text,
    placeholderColor: 'gray',
    cssText: textStyle,// initial valid
    contentCSSText: 'font-size: 16px; min-height: 200px; height: 100%;', // initial valid
  } )
  useEffect( () => {
    setCSS( prev => ( {
      ...prev,
      backgroundColor: theme.colors.background,
      color: theme.colors.text,
      cssText: textStyle,
    } ) )
  }, [ theme, textStyle ] )

  return (
    <RichEditor
      ref={ref}
      scrollEnabled
      initialContentHTML={html}
      onLoadEnd={() => {updateLoaded( true ); console.log( 'test' )}}
      editorStyle={css}
      {...rest} />
  )

pls advise how to get around this issue

[AkalUstat]

the main issue is in textStyle, i delcare font sizes, and that does not get updated. BackgroundColor and color work, so not sure why cssText isnt working

[rviteri]

I have the same issue, although not ideal, I managed to work around it by re-rendering the editor, for example, for my editor:

{this.state.showEditor &&
     <RichEditor
         editorStyle={onlyEditorStyles} // <-- where the fontSize is
         ref={that.richText}
          initialContentHTML={this.state.chapterHtml}
          editorInitializedCallback={() => this.onEditorInitialized()}
          placeholder={I18n.t("editor_placeholder")}
          onChange={this.onEditorTextChanged.bind(this)}/>
}

When I run changeEditorFontSize I do:

changeEditorFontSize(fontSize) {
        this.setState({
            editorFontSize: fontSize,
            showEditor: false
        });
        this.setState({
            showEditor: true
        });
}

Keep in mind that this is a desperate workaround, NOT a solution, but it works for me for the time being. I'll wait patiently for the proper fix 😅

[stulip]

cssText and contentCSSText will only take effect at initialization. This is because cssText is a global style and cannot be replaced dynamically.