DEV Community

katz
katz

Posted on

Start creating simple text editor library for Jetpack Compose

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

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

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

Line break

Insert line breaks or delete line breaks.

AnimatedImage.gif

Line number

Display line numbers.

AnimatedImage.gif

Selected line

Display the selected line.

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

Physical Keyboard

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

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

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Add the library to the dependencies

dependencies {
    implementation 'com.github.kaleidot725:text-editor-compose:0.1.0'
}
Enter fullscreen mode Exit fullscreen mode

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() 
                )
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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())
                        }
                    }
                )
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)