Jetpack Compose용 간단한 텍스트 편집기 라이브러리 만들기 시작

소개

저는 주로 Craft를 사용하는데 Craft의 텍스트 편집기는 필기감이 좋고 불만이 없어서 Jetpack Compose에 Craft와 같은 텍스트 편집기가 필요하다고 생각했습니다.

Craft - The Future of Documents



그래서 저는 text-editor-compose라는 라이브러리를 만들기 시작했습니다.

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

특징

text-editor-compose에는 다음과 같은 기능이 있습니다.

텍스트 수정

각 행의 텍스트를 편집하고 다음과 같이 텍스트를 추가 및 삭제합니다.

줄 바꿈

줄 바꿈을 삽입하거나 줄 바꿈을 삭제합니다.

줄 번호

줄 번호를 표시합니다.

선택한 라인

선택한 라인을 표시합니다.

로드맵

여러 줄 선택

여러 줄에 대한 복사 및 삭제는 지원되지 않습니다. 그래서 여러 줄 선택을 추가할 예정입니다.

물리적 키보드

물리적 키보드는 지원되지 않습니다. 그래서 물리적 키보드 지원을 추가할 계획입니다.

용법

이 라이브러리는 사용하기 쉽습니다. 종속성을 추가하고 코드를 작성하려면 아래 단계를 따르십시오.

1단계: build.gradle에 JitPack 저장소 추가

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

2단계: 종속 항목에 라이브러리 추가

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

3단계: 텍스트 편집기 및 텍스트 EditorState 선언

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() 
                )
            }
        }
    }
}

4단계: 각 행에 표시되는 항목 맞춤설정

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())
                        }
                    }
                )
            }
        }
    }
}

결론

text-eiditor-compose는 최소한의 기능을 구현했습니다. 새로운 기능을 추가할 계획입니다.

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