katz

Posted on Jun 27, 2022

Start creating simple text editor library for Jetpack Compose

#android #jetpackcompose #kotlin #library

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

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

GitHub - kaleidot725/text-editor-compose: A simple text editor library for Jetpack Compose

Features

text-editor-compose has features as below.

Edit text

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

Line break

Insert line breaks or delete line breaks.

Line number

Display line numbers.

Selected line

Display the selected line.

Roadmap

Multiple line selection

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

Physical Keyboard

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

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

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

Step 2: Add the library to the dependencies

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

Step 3: Declare TextEditor & TextEditorState

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

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.