react-native-rich-editor icon indicating copy to clipboard operation
react-native-rich-editor copied to clipboard

can't specify font-family property

Open spyglee opened this issue 1 year ago • 3 comments

It is impossible to set a font family for the editor. I tried adding it to style, editorStyle and through contentCSSText. Maximum I could do - to select serif || sans-serif

<RichEditor
          initialFocus={initialFocus}
          disabled={offline}
          containerStyle={styles.editorContainer}
          ref={(r) => ref = r}
          style={[styles.input(withIcons), offline && styles.inputOffline]}
          editorStyle={{
            backgroundColor: Colors[appTheme].inputBackground,
            color: Colors[appTheme].inputText,
            contentCSSText: `font-family: "Metropolis Semi Bold"`,
          }}
          onFocus={editorInitializedCallback}
          placeholder={offline ? translate('messages_40') : placeholder}
          onChange={text => {
            onChangeText(text);
          }}
        />

spyglee avatar Mar 22 '23 12:03 spyglee

I got it working following these steps: https://github.com/wxik/react-native-rich-editor/#using-custom-fonts

For example:

export const RobotoStylesheet = `
  @font-face { 
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  }`;

const editorStyle = {
  initialCSSText: `${RobotoStylesheet}`,
  contentCSSText: "font-family: 'Roboto'; font-size: 15px;",
}

<RichEditor
    ...
  editorStyle={editorStyle}
/>

brentfrederick avatar Apr 13 '23 17:04 brentfrederick

Same, it's not working for me. I tried the one from @brentfrederick, also not working.

ghasemikasra39 avatar May 10 '23 09:05 ghasemikasra39

Same, it's not working for me. I tried the one from @brentfrederick, also not working.

check the 'base64' option

duongnv1402 avatar Jan 28 '24 06:01 duongnv1402