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
SnipMeDev · Oct 3, 2023 · fb2452d · fb2452d
1 parent d3333e5
commit fb2452d
Show file tree

Hide file tree

Showing 21 changed files with 750 additions and 294 deletions.
diff --git a/.run/iosExample.run.xml b/.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>

diff --git a/CHANGELOG.md b/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]

diff --git a/README.md b/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. 

diff --git a/androidExample/build.gradle.kts b/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)
 }
diff --git a/androidExample/src/main/java/dev/snipme/androidexample/Dropdown.kt b/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),
+    )
 }