Start creating simple text editor library for Jetpack Compose
Tags: android, jetpackcompose, kotlin, library
Published: 2022-06-27 01:19:54

## Introduction

I usually use a Craft, and Craft’s text editor has a great writing feel and I have no complaints, so I thought I want a Craft-like text editor for Jetpack Compose.

[Craft - The Future of Documents](https://www.craft.do/)

![RPReplay_Final1656133235.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/74C503F3-9536-495C-8F8E-C988902B8896_2/JwbbND1m0riShiE9hfijbqKBFHKBWLHJVkFi3PJFAZ0z/RPReplay_Final1656133235.gif)

so I started creating a library called text-editor-compose.

[GitHub - kaleidot725/text-editor-compose: A simple text editor library for Jetpack Compose](https://github.com/kaleidot725/text-editor-compose)

## Features

text-editor-compose has features as below.

### Edit text

Edit the text on each line, add and delete text as follows.

![EMULATOR-2022_06_25_14_57_28.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/C8BCCC3C-773C-40E3-9229-53703A5AEBA7_2/yRlzYxke1Lfx3avcYV5r1f4sS41kuCX7nWiTrgxKhWoz/EMULATOR-2022_06_25_14_57_28.gif)

### Line break

Insert line breaks or delete line breaks.

![AnimatedImage.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/F349AD9E-027B-4D25-9198-E2CBEC4DFA82_2/nLYfMwkKuiMHJPJytc38LRgsH12vobVJ9VTMsgbq0bwz/AnimatedImage.gif)

## Line number

Display line numbers.

![AnimatedImage.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/09E29C34-B18C-45C0-8350-9A4DD9BC7E55_2/avOnWTuxMzyxQU8euaBKidr4ZSUvIOQ5E8TDO5xVJWwz/AnimatedImage.gif)

### Selected line

Display the selected line.

![AnimatedImage.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/ACDFF973-CB61-4D4D-91A9-4601E26C34F9_2/oYx33KTx18CMUuMdS2ZbKwPKv5yZ42aaMqopDr3b0rkz/AnimatedImage.gif)

## Roadmap

### Multiple line selection

Copy and delete are not supported for multiple lines. So I’m planning to add a multiple line selection

![AnimatedImage.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/D70F5BB8-45EF-4DFE-A9E6-796C5BFE6B87_2/x7vZq0SiGdpMidpGSzoZFt68Qco1LWRJzaf74flyijwz/AnimatedImage.gif)

### Physical Keyboard

Physical keyboard is not supported. So I’m planning to add physical keyboard support.

![AnimatedImage.gif](https://res.craft.do/user/full/3a21bd0e-fe7a-39aa-73ad-b52ef24b655b/doc/A7FDFD47-B4B7-46EE-B4B2-628642C17B3F/4308C599-3FC2-4E4D-BF99-6D544AE33382_2/DVN4y9jxRRDdjhHE1yixqV2t7xGEALgf5dzqQ7M7rokz/AnimatedImage.gif)

## Usage

This library is easy to use, just follow the steps below to add a dependency and write codes.

### Step 1: Add the JitPack repository to build.gradle

```groovy
allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}
```

### Step 2: Add the library to the dependencies

```groovy
dependencies {
	implementation 'com.github.kaleidot725:text-editor-compose:0.1.0'
}
```

### Step 3: Declare TextEditor & TextEditorState

```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SampleTheme {
                val textEditorState by rememberTextEditorState(lines = DemoText.lines())
                TextEditor(
                    textEditorState = textEditorState, 
                    onUpdatedState = { },              
                    modifier = Modifier.fillMaxSize() 
                )
            }
        }
    }
}
```

### Step 4: Customize what each row displays

```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SampleTheme {
                val textEditorState by rememberTextEditorState(lines = DemoText.lines())
                TextEditor(
                    textEditorState = textEditorState,
                    onUpdatedState = { },
                    modifier = Modifier.fillMaxSize(),
                    decorationBox = { index, isSelected, innerTextField ->
                        val backgroundColor = if (isSelected) Color(0x8000ff00) else Color.White           
　　　　　　　　　　　　　　 Row(modifier = Modifier.background(backgroundColor)) {
                            Text(text = (index + 1).toString().padStart(3, '0'))
                            Spacer(modifier = Modifier.width(4.dp))
                            innerTextField(modifier = Modifier.fillMaxWidth())
                        }
                    }
                )
            }
        }
    }
}
```

## Conclusion

text-eiditor-compose has implemented minimum features. I’m planning to add new features.

[GitHub - kaleidot725/text-editor-compose: A simple text editor library for Jetpack Compose](https://github.com/kaleidot725/text-editor-compose)