Start creating simple text editor library for Jetpack Compose



Introduction

I often use a Craft, and Craft’s textual content editor has a terrific writing really feel and I’ve no complaints, so I assumed I desire a Craft-like textual content editor for Jetpack Compose.

Craft – The Future of Documents

so I began making a library known as text-editor-compose.

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



Options

text-editor-compose has options as beneath.



Edit textual content

Edit the textual content on every line, add and delete textual content as follows.

EMULATOR-2022_06_25_14_57_28.gif



Line break

Insert line breaks or delete line breaks.

AnimatedImage.gif



Line quantity

Show line numbers.

AnimatedImage.gif



Chosen line

Show the chosen line.

AnimatedImage.gif



Roadmap



A number of line choice

Copy and delete should not supported for a number of strains. So I’m planning so as to add a a number of line choice

AnimatedImage.gif



Bodily Keyboard

Bodily keyboard is just not supported. So I’m planning so as to add bodily keyboard help.

AnimatedImage.gif



Utilization

This library is straightforward to make use of, simply observe the steps beneath so as to add a dependency and write codes.



Step 1: Add the JitPack repository to construct.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 enjoyable onCreate(savedInstanceState: Bundle?) {
        tremendous.onCreate(savedInstanceState)
        setContent {
            SampleTheme {
                val textEditorState by rememberTextEditorState(strains = DemoText.strains())
                TextEditor(
                    textEditorState = textEditorState, 
                    onUpdatedState = { },              
                    modifier = Modifier.fillMaxSize() 
                )
            }
        }
    }
}
Enter fullscreen mode

Exit fullscreen mode



Step 4: Customise what every row shows

class MainActivity : ComponentActivity() {
    override enjoyable onCreate(savedInstanceState: Bundle?) {
        tremendous.onCreate(savedInstanceState)
        setContent {
            SampleTheme {
                val textEditorState by rememberTextEditorState(strains = DemoText.strains())
                TextEditor(
                    textEditorState = textEditorState,
                    onUpdatedState = { },
                    modifier = Modifier.fillMaxSize(),
                    decorationBox = { index, isSelected, innerTextField ->
                        val backgroundColor = if (isSelected) Coloration(0x8000ff00) else Coloration.White           
               Row(modifier = Modifier.background(backgroundColor)) {
                            Textual content(textual content = (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 carried out minimal options. I’m planning so as to add new options.

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

Add a Comment

Your email address will not be published. Required fields are marked *