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.
GitHub - kaleidot725/text-editor-compose: A simple text editor library for Jetpack Compose
Top comments (0)