Code edit text (#14)

* Created working text field

* Added code suggestions

* Bumped versions to comply with kotlin 1.9.10

* Added tab with spaces replacement

* Added theme to desktop example

* Updated highlights and improved desktop example

* Bumped highlights version

* Completed example with new CodeEditText

* Updated web example

* Removed material3 and corrected android example

* Created CodeEditText for ios

* Corrected highlights export

* Small code suggestions

* Prepared readme and changelog

* Corrected readme

* Reverted ios changes

Author: tmaxxdd

.run/iosExample.run.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="iosExample" type="KmmRunConfiguration" factoryName="iOS Application" CONFIG_VERSION="1" EXEC_TARGET_ID="BB27C957-E8E5-4D97-B638-2A8A605B5FF8" XCODE_PROJECT="$PROJECT_DIR$/iosExample/iosExample.xcodeproj" XCODE_CONFIGURATION="Debug" XCODE_SCHEME="iosExample">
+  <configuration default="false" name="iosExample" type="KmmRunConfiguration" factoryName="iOS Application" CONFIG_VERSION="1" EXEC_TARGET_ID="B9B05138-47D5-41E7-9D91-9C4C4D4A8392" XCODE_PROJECT="$PROJECT_DIR$/iosExample/iosExample.xcodeproj" XCODE_CONFIGURATION="Debug" XCODE_SCHEME="iosExample">
     <method v="2">
       <option name="com.jetbrains.kmm.ios.BuildIOSAppTask" enabled="true" />
     </method>

CHANGELOG.md

@@ -1,24 +1,47 @@
+## [0.6.0]
+
+### Added
+
+- CodeEditText view
+- Theme switcher in examples
+- Code edit README sample code
+
+### Changed
+
+- Android example
+- Desktop example
+- Web example
+- Highlights library export for iOS framework
+- Highlights library version to 0.7.1
+
+### Removed
+
+- Material3 references
+
 ## [0.5.0]
 
 ### Added
+
 - Maven publication
 
 ### Changed
+
 - README sections
 - KodeView dependency import style
 
 ## [0.4.0]
 
 ### Added
+
 - Maven local publication
 
 ### Changed
+
 - KodeView import model 
 
 ## [0.3.1]
 
 ### Added
-
 - Web section to README
 
 ## [0.3.0]

README.md

@@ -21,11 +21,12 @@ repositories {
 ```
 
 ```shell
-implementation("dev.snipme:kodeview:0.5.0")
+implementation("dev.snipme:kodeview:0.6.0")
 ```
 
 ## Features ✨
-- CodeTextView UI view
+- CodeTextView
+- CodeEditText
 - Code component analysis (Keyword, comment, etc.)
 - Multiple syntax languages (Java, Swift, Kotlin, C, ...)
 - Themes
@@ -41,17 +42,15 @@ If you feel that any of our project has saved you a time or effort, then conside
 ## Components 🧩
 
 ### CodeTextView
-The basic component that takes instance of Highlights and applies coloring on a text.
+Basic component that takes instance of Highlights and applies coloring on a text.
 
 ```kotlin
 @Composable
 fun MyApp() {
     val highlights = remember {
         mutableStateOf(
             Highlights
-                .default()
-                .getBuilder()
-                .code("public static void main(String[] args) {}")
+                .Builder(code = "public static void main(String[] args) {}")
                 .build()
         )
     }
@@ -64,14 +63,47 @@ fun MyApp() {
 }
 ```
 
+### CodeEditText
+With this component, you can update your code via `onValueChange` callback.  
+The Highlights library is ready for incremental updates, so change values anytime.  
+The view bases on `TextField()`, and all it's fields are available for customization.  
+
+```kotlin
+@Composable
+fun MyApp() {
+    val highlights = remember {
+        mutableStateOf(
+            Highlights
+                .Builder(code = "public static void main(String[] args) {}")
+                .build()
+        )
+    }
+
+   MaterialTheme {
+      Column {
+          CodeEditText(
+              highlights = highlights.value,
+              onValueChange = { textValue ->
+                  highlights.value = highlights.value.getBuilder()
+                      .code(textValue)
+                      .build()
+              },
+              // Customize view's style
+              colors = TextFieldDefaults.textFieldColors(),
+          )
+      }
+   }
+}
+```
+
 ## Run examples 🏎️
 
 Not all examples can be executed from command line, so recommended way is to use pre-created configurations:
 
 <img width="270" alt="iShot_2023-09-18_08 19 44" src="https://github.com/SnipMeDev/KodeView/assets/8405055/be660f49-5a77-445e-a717-6aaec9b5c28a">
 
 ## TODO 🚧
-- [ ] CodeEditText
+- [X] CodeEditText
 
 ## Contribution 💻
 Any form of support is very welcomed. 

androidExample/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     id(libs.plugins.android.application.get().pluginId)
     alias(libs.plugins.kotlin.android)
     alias(libs.plugins.ksp) apply false
+    alias(libs.plugins.compose)
 }
 
 android {
@@ -50,12 +51,11 @@ dependencies {
     implementation("androidx.core:core-ktx:1.12.0")
     implementation("androidx.appcompat:appcompat:1.6.1")
     // Compose
-    val composeBom = platform("androidx.compose:compose-bom:2023.03.00")
-    implementation(composeBom)
     implementation("androidx.activity:activity-compose:1.7.2")
-    implementation("androidx.compose.material3:material3")
-    implementation("androidx.compose.ui:ui-tooling-preview")
-    debugImplementation("androidx.compose.ui:ui-tooling")
-    debugImplementation("androidx.compose.ui:ui-test-manifest")
+    implementation(compose.runtime)
+    implementation(compose.foundation)
+    implementation(compose.material)
+    implementation(compose.ui)
+    implementation(compose.materialIconsExtended)
     implementation(libs.kodeview)
 }

androidExample/src/main/java/dev/snipme/androidexample/Dropdown.kt

@@ -1,22 +1,19 @@
 package dev.snipme.androidexample
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.DropdownMenu
-import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.Text
+import androidx.compose.material.DropdownMenu
+import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 
@@ -33,33 +30,29 @@ fun Dropdown(
 
     var isExpanded by remember { mutableStateOf(false) }
 
-    Column(Modifier.padding(16.dp)) {
-        DropdownMenu(
-            modifier = Modifier.background(Color.White),
-            expanded = isExpanded,
-            onDismissRequest = { isExpanded = false },
-        ) {
-            options.forEach { option ->
-                DropdownMenuItem(
-                    modifier = Modifier,
-                    text = { Text(text = option) },
-                    onClick = {
-                        selectedOption = option
-                        onSelect(option)
-                        isExpanded = !isExpanded
-                    },
-                )
-            }
+    DropdownMenu(
+        expanded = isExpanded,
+        onDismissRequest = { isExpanded = false },
+    ) {
+        options.forEach { option ->
+            DropdownMenuItem(
+                onClick = {
+                    selectedOption = option
+                    onSelect(option)
+                    isExpanded = !isExpanded
+                },
+            ) { Text(text = option) }
         }
 
-        Text(
-            text = selectedOption,
-            textAlign = TextAlign.Center,
-            modifier = modifier
-                .clip(RoundedCornerShape(16.dp))
-                .fillMaxWidth()
-                .clickable { isExpanded = !isExpanded }
-                .padding(8.dp),
-        )
     }
+
+    Text(
+        text = selectedOption,
+        textAlign = TextAlign.Center,
+        modifier = modifier
+            .clip(RoundedCornerShape(16.dp))
+            .fillMaxWidth()
+            .clickable { isExpanded = !isExpanded }
+            .padding(8.dp),
+    )
 }