search

wxik / react-native-rich-editor

Lightweight React Native (JavaScript, H5) rich text editor
https://wxik.github.io/react-native-rich-editor/web
MIT License
774 stars 303 forks source link

Changing fontName for selected text on Android device #348

Open handlez36 opened 5 months ago

handlez36 commented 5 months ago

react version: 18.2.0 react-native-pell-rich-editor: ^1.9.0

We have a section of code in a React Native app which is using a Dropdown selector and the RichEditor. The dropdown selector has a set of five fonts we'd like to use to control the font face of the text in the editor. Since we are using a dropdown (separate from the RichEditor package), we are issuing the following call to have it take effect:

richEditorRef.current?.sendAction( actions.fontName, 'result', newFont, )

where newFont will be the selected font string ("Georgia", "Verdana", "Courier", "Ariel", "Cochin"). This works perfectly for setting the font face for any upcoming/future text typed into the text editor. However, when I double click on previously entered text and attempt to change the font face, nothing happens on Android. The same exact use case works on iOS, as it changes the selected text to the chosen font via the action above.

Is this a known issue or am I missing a different with how Android and iOS handle these issues?

I attempted to do this manually as well. I've injected javascript that captures the action of double clicking, and what text is double clicked. However, I cannot determine an effective way to replace the text selected with "text". Also, there are a ton of edge cases I'd rather not deal with in doing this manually.

My apologies if I missed some formatting for how questions should appear in Github issues, but I can provide whatever supplemental information is required.

parrottjrs commented 5 months ago

Just a heads up, this repo appears to have been abandoned. I'm encountering similar issues with a custom highlight function I'm trying to build. It seems to me that the commandDOM function is necessary for building custom actions from the ground up. Basically you do something like 

richText.current?.commandDOM(`your DOM manipulation code goes here`)

It's a huge pain to deal with. If you make any headway I'd love to see your code so that maybe I can learn from it.

parrottjrs commented 5 months ago

Oh for yours have you trie the setContentHTML method? I just remembered that it's an option. Haven't used it myself but there may be something there.

handlez36 commented 5 months ago

Thanks for the response @parrottjrs! I did try setContentHTML. Basically I attempted to...

  1. Capture the action of a user selecting text and the text selected.
  2. If they select a new font from the dropdown, basically using setContentHTML to replace the text with text.

This works but there are a ton of edge cases to deal with, the most annoying one being if there are multiple occurrences of that text in the content; I couldn't find an easy way to determine which one to actually change. Plus if someone tries to change that text again, I'd have to take care of knowing if there was already a "" tag around it and ensuring that's removed properly.

These weren't fun issues to consider late on a Friday, so figured I'd check if anyone else had any luck, haha. I'll definitely give the commandDOM a try though, thanks for the advice.

parrottjrs commented 5 months ago

No problem!

Yeah edge cases are killing me, too. One big problem I'm running into is if I turn on my styling and start typing, my cursor is stuck inside the span and I can't get it out.