feat(rich-text): add convertion to html

Author: IslamRustamov

README.md

@@ -75,14 +75,14 @@ const handleChange = (event: RichTextChangeEvent) => {
 2. Select a portion of text and add different styles (bold, italic, underline, strikethrough) (iOS, Android)
 3. Add native context menu for formatting (iOS)
 4. Add onChange prop (iOS, Android)
-5. Return text without markdown (iOS)
-6. Add method that returns rich text in RTF (iOS)
+5. Return text without markdown (iOS, Android)
+6. Add method that returns rich text in HTML (iOS, Android)
 
 # TODO
 
 1. Ability to enable certain format and apply it without selecting a portion of text
 2. Returning active formats for a selection
-3. Returning text with markdown (not sure about this for now)
+3. Add convertation to markdown (not sure about this for now)
 4. Add method to set default text
 
 ## Contributing

android/src/main/java/com/richtextinput/RichTextInputPackage.kt

@@ -7,11 +7,13 @@ import com.facebook.react.uimanager.ViewManager
 
 
 class RichTextInputPackage : ReactPackage {
+  val richTextInputViewManager = RichTextInputViewManager()
+
   override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-    return emptyList()
+    return listOf(richTextInputViewManager).toMutableList()
   }
 
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return listOf(RichTextInputViewManager())
+    return listOf(richTextInputViewManager)
   }
 }

android/src/main/java/com/richtextinput/RichTextInputViewManager.kt

@@ -6,16 +6,20 @@ import android.text.style.StrikethroughSpan
 import android.text.style.StyleSpan
 import android.text.style.UnderlineSpan
 import android.widget.EditText
+import androidx.core.text.toHtml
 import androidx.core.widget.doOnTextChanged
 import com.facebook.infer.annotation.Assertions
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.uimanager.events.RCTEventEmitter
 
 class RichTextInputViewManager : SimpleViewManager<EditText>() {
+  var editText: EditText? = null
+
   override fun getName() = "RichTextInputView"
 
   override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
@@ -29,25 +33,34 @@ class RichTextInputViewManager : SimpleViewManager<EditText>() {
   }
 
   override fun createViewInstance(reactContext: ThemedReactContext): EditText {
-    val editText = EditText(reactContext)
+    editText = EditText(reactContext)
 
-    editText.doOnTextChanged { text, start, before, count ->
+    editText!!.doOnTextChanged { text, start, before, count ->
       val event = Arguments.createMap().apply {
         putString("text", text.toString())
       }
       reactContext
         .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(editText.id, "topChange", event)
+        .receiveEvent(editText!!.id, "topChange", event)
     }
 
-    return editText
+    return editText as EditText
   }
 
   @ReactProp(name = "placeholder")
   fun setPlaceholder(view: EditText, placeholder: String) {
     view.hint = placeholder
   }
 
+  @ReactMethod(isBlockingSynchronousMethod = true)
+  fun getHTML(): String {
+    if (editText != null) {
+      return editText!!.text.toHtml()
+    }
+
+    return "ERROR: richTextView IS NOT INITIALIZED"
+  }
+
   override fun receiveCommand(root: EditText, commandId: String?, args: ReadableArray?) {
     Assertions.assertNotNull(root)
 

example/src/App.tsx

@@ -31,8 +31,8 @@ function App(): React.JSX.Element {
     ref.current?.toggleItalic();
   };
 
-  const handleGetMarkdown = async () => {
-    console.log(ref.current?.getRTF());
+  const handleGetHTML = async () => {
+    console.log(ref.current?.getHTML());
   };
 
   const handleChange = (event: RichTextChangeEvent) => {
@@ -51,7 +51,7 @@ function App(): React.JSX.Element {
       <Button title="Bold" onPress={handleBoldPress} />
       <Button title="Strike" onPress={handleStrikePress} />
       <Button title="Italic" onPress={handleItalicPress} />
-      <Button title="Get markdown" onPress={handleGetMarkdown} />
+      <Button title="Get HTML" onPress={handleGetHTML} />
     </SafeAreaView>
   );
 }

ios/RichTextInput.swift

@@ -125,13 +125,13 @@ class RichTextInput: UITextView, UIEditMenuInteractionDelegate {
 
   // TODO: does it have to be so complicated?
   // NOTE: semaphors are needed cause textstorage requires to work on main thread
-  func getRTF() -> String {
+  func getHTML() -> String {
     var value: String = ""
 
     let semaphore = DispatchSemaphore(value: 0)
 
     DispatchQueue.main.async {
-      value = self.attributedText.toRTF() ?? ""
+      value = self.attributedText.toHTML() ?? ""
       semaphore.signal()
     }
 
@@ -142,16 +142,16 @@ class RichTextInput: UITextView, UIEditMenuInteractionDelegate {
 }
 
 extension NSAttributedString {
-    func toRTF() -> String? {
-        let documentAttributes = [NSAttributedString.DocumentAttributeKey.documentType: NSAttributedString.DocumentType.rtf]
+    func toHTML() -> String? {
+        let documentAttributes = [NSAttributedString.DocumentAttributeKey.documentType: NSAttributedString.DocumentType.html]
         do {
-            let rtfData = try self.data(from: NSMakeRange(0, self.length), documentAttributes:documentAttributes)
-            if let rtfString = String(data:rtfData, encoding:String.Encoding.utf8) {
-                return rtfString
+            let htmlData = try self.data(from: NSMakeRange(0, self.length), documentAttributes:documentAttributes)
+            if let htmlString = String(data:htmlData, encoding:String.Encoding.utf8) {
+                return htmlString
             }
         }
         catch {
-            print("error creating RTF from Attributed String")
+            print("error creating HTML from Attributed String")
         }
         return nil
     }

ios/RichTextInputViewManager.m

@@ -17,7 +17,6 @@ @interface RCT_EXTERN_MODULE(RichTextInputViewManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 
-// NOTE: work in progress
-RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(getRTF);
+RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(getHTML);
 
 @end

ios/RichTextInputViewManager.swift

@@ -71,8 +71,8 @@ public class RichTextInputViewManager: RCTViewManager, UITextViewDelegate  {
   }
 
   @objc
-  func getRTF() -> String {
-    return richTextView?.getRTF() ?? "ERROR: richTextView IS NOT INITIALIZED"
+  func getHTML() -> String {
+    return richTextView?.getHTML() ?? "ERROR: richTextView IS NOT INITIALIZED"
   }
 
   // Helpers

src/index.tsx

@@ -35,7 +35,7 @@ export interface RichTextRef {
   toggleItalic: Function;
   toggleStrike: Function;
   toggleUnderline: Function;
-  getRTF: () => Promise<string>;
+  getHTML: () => Promise<string>;
 }
 
 const ComponentName = 'RichTextInputView';
@@ -92,8 +92,12 @@ const RichTextInput = forwardRef<RichTextRef, RichTextProps>(
             []
           );
         },
-        getRTF: () => {
-          return NativeModules.RichTextInputViewManager.getRTF();
+        getHTML: () => {
+          // NOTE: maybe I should address this issue... just maybe...
+          if (Platform.OS === 'android') {
+            return NativeModules.RichTextInputView.getHTML();
+          }
+          return NativeModules.RichTextInputViewManager.getHTML();
         },
       };
     }, []);