How to change this title on enter url from toolbar

[Aryan6290]

[Aryan6290]

I want to write something else instead of Javascript

[crosswin-ecgroup]

@Aryan6290 ,

Try this, Hope it will works,

const insertLink = (): void => {
// you can easily add videos from your gallery
Alert.prompt('Insert Link', 'Enter the Link', [
{text: LABLE.COMMON.CANCEL, style: 'cancel', onPress: () => {}},
{
text: LABLE.COMMON.INSERT,
onPress: (text: any) => {
RichText.current?.insertLink(null, text);
},
},
]);
};

<RichToolbar style={{ backgroundColor: COLORS.WHITE, }} onInsertLink={insertLink}/>

[thecookieorg]

This doesn't work on Android (Alert.prompt is iOS only).
You will have to use a cross-platform alert package (ex: react-native-dialog), and set your insertLink function to toggle that dialog.

You will also need another function that handles inserting the actual text into the editor (defined in dialog buttons onPress), where you will use editorRef.current?.insertLink(null, linkValue)

[MeenachiSundaram18]

Hi as @thecookieorg said, I built a custom dialog using React Native Elements Dialog to handle the insert link functionality.

I am putting my implementation below. hope it helps!

import {Input, Dialog} from '@rneui/themed';
import {RichToolbar} from 'react-native-pell-rich-editor'

const [inputLinkValue, setInputLinkValue] = useState('');
const [showDialog, setShowDialog] = useState(false);

  const handleSubmitInputLink = () => {
    //insertLink function takes two args (title, url)
    richTextEditorRef.current?.insertLink('', inputLinkValue);
    setShowDialog(false);
  };

<RichToolbar
editor={richTextEditorRef}
...
onInsertLink={() => setShowDialog(true) }
/>

{showDialog && 
  <Dialog isVisible={showDialog} onDismiss={() => setShowDialog(!showDialog)}>      
    <Dialog.Title title="Insert a link" />
    <Input
      value={inputLinkValue}
      placeholder="Enter the Link"
      onChangeText={value => setInputLinkValue(value)}
    />
    <View style={{flexDirection: 'row', marginTop: 10}}>
      <Dialog.Button
        title="Cancel"
        onPress={() => setShowDialog(false)}
      />

      <Dialog.Button
        title="Submit"
        onPress={handleSubmitInputLink}
       disabled={!inputLinkValue}
      />
    </View>
  </Dialog>}