Migrate sample to Compose Navigation

gradle/libs.versions.toml

@@ -13,12 +13,13 @@ nexus-publish = "2.0.0"
 # For sample
 androidx-appcompat = "1.7.0"
 activity-compose = "1.10.0"
-voyager = "1.1.0-beta03"
 richeditor = "1.0.0-rc10"
 coroutines = "1.10.1"
 ktor = "3.1.0"
 android-minSdk = "21"
 android-compileSdk = "35"
+lifecycle = "2.8.4"
+navigation = "2.8.0-alpha11"
 
 [libraries]
 ksoup-html = { module = "com.mohamedrejeb.ksoup:ksoup-html", version.ref = "ksoup" }
@@ -32,7 +33,6 @@ nexus-publish = { module = "io.github.gradle-nexus.publish-plugin:io.github.grad
 # For sample
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
 activity-compose = { module = "androidx.activity:activity-compose", version.ref = "activity-compose" }
-voyager-navigator = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "voyager" }
 richeditor-compose = { module = "com.mohamedrejeb.richeditor:richeditor-compose", version.ref = "richeditor" }
 
 kotlinx-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "coroutines" }
@@ -47,6 +47,9 @@ ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "kto
 ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
 ktor-client-wasm = { module = "io.ktor:ktor-client-js-wasm-js", version.ref = "ktor" }
 
+lifecycle-viewmodel-compose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "lifecycle" }
+navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigation" }
+
 [plugins]
 androidLibrary = { id = "com.android.library", version.ref = "agp" }
 androidApplication = { id = "com.android.application", version.ref = "agp" }

sample/common/build.gradle.kts

@@ -54,16 +54,19 @@ kotlin {
         implementation(projects.richeditorCompose)
         implementation(projects.richeditorComposeCoil3)
 
-        // Voyager Navigator
-        implementation(libs.voyager.navigator)
-
         // Coil
         implementation(libs.coil.compose)
         implementation(libs.coil.svg)
         implementation(libs.coil.network.ktor)
 
         // Ktor
         implementation(libs.ktor.client.core)
+
+        // Lifecycle
+        implementation(libs.lifecycle.viewmodel.compose)
+
+        // Navigation
+        implementation(libs.navigation.compose)
     }
 
     sourceSets.androidMain.dependencies {

sample/common/src/commonMain/kotlin/com/mohamedrejeb/richeditor/sample/common/App.kt

@@ -1,13 +1,12 @@
 package com.mohamedrejeb.richeditor.sample.common
 
 import androidx.compose.runtime.*
-import cafe.adriel.voyager.navigator.Navigator
-import com.mohamedrejeb.richeditor.sample.common.home.HomeScreen
+import com.mohamedrejeb.richeditor.sample.common.navigation.NavGraph
 import com.mohamedrejeb.richeditor.sample.common.ui.theme.ComposeRichEditorTheme
 
 @Composable
 fun App() {
     ComposeRichEditorTheme {
-        Navigator(HomeScreen)
+        NavGraph()
     }
 }

sample/common/src/commonMain/kotlin/com/mohamedrejeb/richeditor/sample/common/home/HomeScreen.kt

@@ -1,13 +1,98 @@
 package com.mohamedrejeb.richeditor.sample.common.home
 
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
-import cafe.adriel.voyager.core.screen.Screen
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.mohamedrejeb.richeditor.model.rememberRichTextState
+import com.mohamedrejeb.richeditor.ui.material3.RichText
 
-object HomeScreen: Screen {
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+@Composable
+fun HomeScreen(
+    navigateToRichEditor: () -> Unit,
+    navigateToHtmlEditor: () -> Unit,
+    navigateToMarkdownEditor: () -> Unit,
+    navigateToSlack: () -> Unit,
+) {
+    val richTextState = rememberRichTextState()
 
-    @Composable
-    override fun Content() {
-        HomeContent()
+    LaunchedEffect(Unit) {
+        richTextState.setHtml("<u>Welcome</u> to <b>Compose Rich Editor Demo</b>")
     }
 
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text("Compose Rich Editor") },
+            )
+        },
+        modifier = Modifier
+            .fillMaxSize()
+    ) { paddingValues ->
+        LazyColumn(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            contentPadding = paddingValues,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .windowInsetsPadding(WindowInsets.ime)
+                .padding(20.dp)
+        ) {
+            item {
+                Spacer(modifier = Modifier.height(20.dp))
+            }
+
+            item {
+                RichText(
+                    state = richTextState,
+                    style = MaterialTheme.typography.displaySmall,
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier
+                        .padding(20.dp)
+                )
+            }
+
+            item {
+                Spacer(modifier = Modifier.height(20.dp))
+            }
+
+            item {
+                Button(
+                    onClick = navigateToRichEditor,
+                ) {
+                    Text("Rich Text Editor Demo")
+                }
+            }
+
+            item {
+                Button(
+                    onClick = navigateToHtmlEditor,
+                ) {
+                    Text("HTML Editor Demo")
+                }
+            }
+
+            item {
+                Button(
+                    onClick = navigateToMarkdownEditor,
+                ) {
+                    Text("Markdown Editor Demo")
+                }
+            }
+
+            item {
+                Button(
+                    onClick = navigateToSlack,
+                ) {
+                    Text("Slack Clone Demo")
+                }
+            }
+        }
+    }
 }

sample/common/src/commonMain/kotlin/com/mohamedrejeb/richeditor/sample/common/htmleditor/HtmlEditorContent.kt

@@ -10,14 +10,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextDecoration
-import cafe.adriel.voyager.navigator.LocalNavigator
 import com.mohamedrejeb.richeditor.model.rememberRichTextState
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
-fun HtmlEditorContent() {
-    val navigator = LocalNavigator.current
-
+fun HtmlEditorContent(
+    navigateBack: () -> Unit
+) {
     var isHtmlToRichText by remember { mutableStateOf(false) }
 
     var html by remember {
@@ -47,7 +46,7 @@ fun HtmlEditorContent() {
                 title = { Text("Html Editor") },
                 navigationIcon = {
                     IconButton(
-                        onClick = { navigator?.pop() }
+                        onClick = navigateBack
                     ) {
                         Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
                     }

sample/common/src/commonMain/kotlin/com/mohamedrejeb/richeditor/sample/common/markdowneditor/MarkdownEditorContent.kt

@@ -10,15 +10,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextDecoration
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
 import com.mohamedrejeb.richeditor.model.rememberRichTextState
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun MarkdownEditorContent() {
-    val navigator = LocalNavigator.currentOrThrow
-
+fun MarkdownEditorContent(
+    navigateBack: () -> Unit
+) {
     var isMarkdownToRichText by remember { mutableStateOf(false) }
 
     var markdown by remember {
@@ -48,7 +46,7 @@ fun MarkdownEditorContent() {
                 title = { Text("Markdown Editor") },
                 navigationIcon = {
                     IconButton(
-                        onClick = { navigator.pop() }
+                        onClick = navigateBack
                     ) {
                         Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
                     }