Merge pull request #168 from MohamedRejeb/1.x

Fix long click crash on Android and iOS

gradle.properties

@@ -1,18 +1,16 @@
 #Gradle
 org.gradle.jvmargs=-Xmx2048M -Dfile.encoding=UTF-8 -Dkotlin.daemon.jvm.options\="-Xmx2048M"
+org.gradle.caching=true
+org.gradle.parallel=true
 
+#Kotlin
 kotlin.code.style=official
 
-#MPP
-kotlin.mpp.androidSourceSetLayoutVersion=2
-kotlin.mpp.enableCInteropCommonization=true
-
 #Android
 android.useAndroidX=true
 android.nonTransitiveRClass=true
 
 #Web
-kotlin.js.compiler=ir
 org.jetbrains.compose.experimental.jscanvas.enabled=true
 
 #iOS

richeditor-compose/src/androidMain/kotlin/com/mohamedrejeb/richeditor/platform/Platform.android.kt

@@ -0,0 +1,3 @@
+package com.mohamedrejeb.richeditor.platform
+
+internal actual val currentPlatform: Platform = Platform.Android

richeditor-compose/src/commonMain/kotlin/com/mohamedrejeb/richeditor/model/RichTextState.kt

@@ -20,12 +20,17 @@ import com.mohamedrejeb.richeditor.annotation.ExperimentalRichTextApi
 import com.mohamedrejeb.richeditor.model.RichParagraph.Type.Companion.startText
 import com.mohamedrejeb.richeditor.parser.html.RichTextStateHtmlParser
 import com.mohamedrejeb.richeditor.parser.markdown.RichTextStateMarkdownParser
+import com.mohamedrejeb.richeditor.platform.currentPlatform
 import com.mohamedrejeb.richeditor.utils.*
 import com.mohamedrejeb.richeditor.utils.append
 import com.mohamedrejeb.richeditor.utils.customMerge
 import com.mohamedrejeb.richeditor.utils.isSpecifiedFieldsEquals
 import com.mohamedrejeb.richeditor.utils.unmerge
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.coroutineScope
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.*
+import kotlinx.coroutines.launch
 import kotlin.math.max
 
 @Composable
@@ -506,6 +511,21 @@ class RichTextState internal constructor(
         updateParagraphType(paragraph, RichParagraph.Type.Default)
     }
 
+    private val textFieldValueSharedFlow = MutableSharedFlow<TextFieldValue>()
+
+    internal suspend fun emitTextFieldValue(textFieldValue: TextFieldValue) {
+        textFieldValueSharedFlow.emit(textFieldValue)
+    }
+
+    internal var collectTextFieldValueSharedFlowJob: Job? = null
+    internal suspend fun collectTextFieldValueSharedFlow() = coroutineScope {
+        collectTextFieldValueSharedFlowJob = launch {
+            textFieldValueSharedFlow.collect { newTextFieldValue ->
+                onTextFieldValueChange(newTextFieldValue)
+            }
+        }
+    }
+
     /**
      * Temporarily stores the new text field value, before it is validated.
      */
@@ -517,6 +537,11 @@ class RichTextState internal constructor(
      * @param newTextFieldValue the new text field value.
      */
     internal fun onTextFieldValueChange(newTextFieldValue: TextFieldValue) {
+        println("onTextFieldValueChange: ${newTextFieldValue.text.replace("\n", "<br/>")}")
+        println("same text field value: ${newTextFieldValue == tempTextFieldValue}")
+        println("same text: ${newTextFieldValue.text == tempTextFieldValue.text}")
+        println("same selection: ${newTextFieldValue.selection == tempTextFieldValue.selection}")
+        if (newTextFieldValue == tempTextFieldValue) return
         tempTextFieldValue = newTextFieldValue
 
         if (tempTextFieldValue.text.length > textFieldValue.text.length)
@@ -576,6 +601,12 @@ class RichTextState internal constructor(
 
         // Clear [tempTextFieldValue]
         tempTextFieldValue = TextFieldValue()
+
+        println("end edit")
+        richParagraphList.forEachIndexed { index, paragraph ->
+            println("Paragraph: $index")
+            println(paragraph.toString())
+        }
     }
 
     /**
@@ -628,7 +659,12 @@ class RichTextState internal constructor(
 
                             // Add empty space to the last paragraph if it's empty.
                             // Workaround to fix an issue with Compose TextField that causes a crash on long click
-                            if (i > 0 && i == richParagraphList.lastIndex && richParagraph.isEmpty()) {
+                            if (
+                                (currentPlatform.isAndroid ||
+                                currentPlatform.isIOS) &&
+                                i > 0 && i == richParagraphList.lastIndex &&
+                                richParagraph.isEmpty()
+                            ) {
                                 richParagraph.getFirstNonEmptyChild()?.text = " "
                                 append(" ")
                                 index++
@@ -1027,6 +1063,10 @@ class RichTextState internal constructor(
             val sliceIndex = max(index, richSpan.textRange.min)
 
             // Create a new paragraph style
+
+            println("oldParagraphType: ${richSpan.paragraph.type}")
+            println("oldParagraphStartText: ${richSpan.paragraph.type.startText}")
+
             val newParagraph = richSpan.paragraph.slice(
                 startIndex = sliceIndex,
                 richSpan = richSpan,
@@ -1050,6 +1090,10 @@ class RichTextState internal constructor(
 
             // Update the paragraph type of the paragraphs after the new paragraph
             val newParagraphType = newParagraph.type
+
+            println("newParagraphType: $newParagraphType")
+            println("newParagraphStartText: ${newParagraphType.startText}")
+
             if (newParagraphType is RichParagraph.Type.OrderedList) {
                 tempTextFieldValue = adjustOrderedListsNumbers(
                     startParagraphIndex = paragraphIndex + 2,

richeditor-compose/src/commonMain/kotlin/com/mohamedrejeb/richeditor/platform/Platform.kt

@@ -0,0 +1,19 @@
+package com.mohamedrejeb.richeditor.platform
+
+internal enum class Platform {
+    Android, IOS, Desktop, Web;
+
+    val isAndroid: Boolean
+        get() = this == Android
+
+    val isIOS: Boolean
+        get() = this == IOS
+
+    val isDesktop: Boolean
+        get() = this == Desktop
+
+    val isWeb: Boolean
+        get() = this == Web
+}
+
+internal expect val currentPlatform: Platform

richeditor-compose/src/commonMain/kotlin/com/mohamedrejeb/richeditor/ui/BasicRichTextEditor.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.unit.sp
 import com.mohamedrejeb.richeditor.model.RichParagraph
 import com.mohamedrejeb.richeditor.model.RichTextState
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
 
 
 /**
@@ -197,6 +198,7 @@ internal fun BasicRichTextEditor(
         @Composable { innerTextField -> innerTextField() },
     contentPadding: PaddingValues
 ) {
+    val scope = rememberCoroutineScope()
     val density = LocalDensity.current
     val localTextStyle = LocalTextStyle.current
     val layoutDirection = LocalLayoutDirection.current
@@ -233,12 +235,25 @@ internal fun BasicRichTextEditor(
         }
     }
 
+    DisposableEffect(state) {
+        scope.launch {
+            state.collectTextFieldValueSharedFlow()
+        }
+
+        onDispose {
+            state.collectTextFieldValueSharedFlowJob?.cancel()
+        }
+    }
+
     CompositionLocalProvider(LocalClipboardManager provides richClipboardManager) {
         BasicTextField(
             value = state.textFieldValue,
             onValueChange = {
                 if (readOnly) return@BasicTextField
                 if (it.text.length > maxLength) return@BasicTextField
+//                scope.launch {
+//                    state.emitTextFieldValue(it)
+//                }
                 state.onTextFieldValueChange(it)
             },
             modifier = modifier

richeditor-compose/src/desktopMain/kotlin/com/mohamedrejeb/richeditor/platform/Platform.desktop.kt

@@ -0,0 +1,3 @@
+package com.mohamedrejeb.richeditor.platform
+
+internal actual val currentPlatform: Platform = Platform.Desktop

richeditor-compose/src/iosMain/kotlin/com/mohamedrejeb/richeditor/platform/Platform.ios.kt

@@ -0,0 +1,3 @@
+package com.mohamedrejeb.richeditor.platform
+
+internal actual val currentPlatform: Platform = Platform.IOS

richeditor-compose/src/jsMain/kotlin/com/mohamedrejeb/richeditor/platform/Platform.js.kt

@@ -0,0 +1,3 @@
+package com.mohamedrejeb.richeditor.platform
+
+internal actual val currentPlatform: Platform = Platform.Web

sample/web/src/jsMain/kotlin/Main.kt

@@ -1,13 +1,17 @@
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.mohamedrejeb.richeditor.sample.common.App
 import org.jetbrains.skiko.wasm.onWasmReady
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     onWasmReady {
-        Window("Compose Rich Editor") {
+        CanvasBasedWindow(
+            title = "Compose Rich Editor"
+        ) {
             Box(Modifier.fillMaxSize()) {
                 App()
             }

sample/web/src/jsMain/resources/index.html

@@ -3,22 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <title>Compose Rich Editor</title>
-    <style>
-        html, body {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-        }
-    </style>
+    <script src="skiko.js"></script>
 </head>
 <body>
-<canvas id="ComposeTarget"></canvas>
-<script>
-    var canvas = document.getElementById("ComposeTarget");
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-</script>
-<script src="skiko.js"></script>
+<noscript>
+    This page requires JavaScript.
+</noscript>
+<div id="root" class="d-flex flex-column h-100">
+</div>
+<div>
+    <canvas id="ComposeTarget" width="800" height="600"></canvas>
+</div>
 <script src="web.js"></script>
 </body>
 </html>