Update the documentation & types to show setFontName

[Samykills]

FYI, for all who want to set separate fonts on the editor, u can do that by providing the font name to

richEditorRef.current?.setFontName('Caveat');

Make sure to supply fonts to the CssText in editorStyle, we can pass fonts as fontFace with base64 encode, so u dont need to keep the font file, instead it can read from base64 code.

 <RichEditor
          editorStyle={{
            cssText: fontFace,
          }}/>

where fontFace is similar to something like this

const fontFace = `@font-face {
    font-family: 'Allura';
   src : base64Code for your font goes here; 
   }
@font-face {
    font-family: 'Caveat';
   src : base64Code for your font goes here; 
   }
`

[khanh21011999]

Honestly, i stuck for week for this, can you provide an legit example?

[Samykills]

that is the example bro 😅

[khanh21011999]

I'm trying to add font by this @Samykills

I have a sample component to test, it look like this

const App = () => {
  const richText = React.useRef();
  richText.current.setFontName('Montserrat');
  return (
    <SafeAreaView>
      <ScrollView>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={{flex: 1}}>
          <Text>Description:</Text>
          <RichEditor
            ref={richText}
            editorStyle={{
              cssText: font,
            }}
            onChange={descriptionText => {
              console.log('descriptionText:', descriptionText);
            }}
          />
        </KeyboardAvoidingView>
      </ScrollView>

      <RichToolbar
        editor={richText}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.setUnderline,
          actions.heading1,
        ]}
        iconMap={{
          [actions.heading1]: ({tintColor}) => (
            <Text style={[{color: tintColor}]}>H1</Text>
          ),
        }}
      />
    </SafeAreaView>
  );
};

export default App;

The font file look like this

https://paste.ofcode.org/PiEu7yNrNAbZHLtUHNHUDQ (this too long, i can't paste here)

Swear i don't know why it not work !

Please help @Samykills

[Samykills]

your fontface appears to be correct, however i think the problem here is the richText.current.setFontName('Montserrat'); this is called even before the editor is initialized, can u try adding this to ur code and test?

const editorLoadFinished=()=>{ richText.current.setFontName('Montserrat'); }

<RichEditor ... editorInitializedCallback={editorLoadFinished} />

[khanh21011999]

Okey i will try that

[khanh21011999]

I work like charm @Samykills

[khanh21011999]

But the bold on toolbar is not so bold, how can i define the bold level of text when i press in toolbar?

[khanh21011999]

@Samykills how can i add typescript for that ref ? i use this const richText = useRef<LegacyRef<RichEditor> | undefined>(); but not work

[Samykills]

not exactly sure about that, but try this const richEditorRef = useRef<RichEditor>(); but it will still give u typeError.. so not sure

[Karansidds]

I'm trying to add font by this @Samykills

I have a sample component to test, it look like this

const App = () => {
  const richText = React.useRef();
  richText.current.setFontName('Montserrat');
  return (
    <SafeAreaView>
      <ScrollView>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={{flex: 1}}>
          <Text>Description:</Text>
          <RichEditor
            ref={richText}
            editorStyle={{
              cssText: font,
            }}
            onChange={descriptionText => {
              console.log('descriptionText:', descriptionText);
            }}
          />
        </KeyboardAvoidingView>
      </ScrollView>

      <RichToolbar
        editor={richText}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.setUnderline,
          actions.heading1,
        ]}
        iconMap={{
          [actions.heading1]: ({tintColor}) => (
            <Text style={[{color: tintColor}]}>H1</Text>
          ),
        }}
      />
    </SafeAreaView>
  );
};

export default App;

The font file look like this

https://paste.ofcode.org/PiEu7yNrNAbZHLtUHNHUDQ (this too long, i can't paste here)

Swear i don't know why it not work !

Please help @Samykills

Hey @khanh21011999 , the link that you have pasted does not exist anymore. Can you please send me the file because I want to see how you do it?

[khanh21011999]

Actually now i'm stuck too

[Samykills]

@khanh21011999 whats the issue?

[khanh21011999]

@Samykills i lose my font file, here is this, but it not work , i don't know why , it same as before https://wtools.io/paste-code/bDjF

[khanh21011999]

const TempScreen = () => {
	const richText = React.useRef()
	const editorLoadFinished = () => {
		richText.current.setFontName('Montserrat')
	}
	return (
		<SafeAreaView>
			<ScrollView>
				<KeyboardAvoidingView
					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
					style={{ flex: 1 }}
				>
					<Text>Description:</Text>
					<RichEditor
                        editorStyle={{
                           initialCSSText:`${customFont}`,
                           contentCSSText:`font-family: 'Montserrat';`,
                           cssText: customFont,
                        }}
                        
						editorInitializedCallback={editorLoadFinished}
						ref={richText}
						onChange={(descriptionText) => {
							console.log('descriptionText:', descriptionText)
						}}
					/>
				</KeyboardAvoidingView>
			</ScrollView>
			<RichToolbar
				editor={richText}
				actions={[
					actions.setBold,
					actions.setItalic,
					actions.setUnderline,
					actions.heading1,
				]}
				iconMap={{
					[actions.heading1]: ({ tintColor }) => (
						<Text style={[{ color: tintColor }]}>H1</Text>
					),
				}}
			/>
		</SafeAreaView>
	)
}

export default TempScreen

[khanh21011999]

@Samykills Can you provide very very minimal working example? I mean i and everyone can look at that and do like you, it actually work before but i don't know why it not work anymore