Skip to content

Compose Code Editor (Multiplatform)

Description

Compose Code Editor is a code highlighting / editing library for compose , it does not make use of web view so it renders fast

Its also supports kotlin multiplatform and supports Android & JVM at the moment , It will be better if you could get it from github packages since I use that and post latest versions there and Jitpack might not support multiplatform The version 2.0.2 is only for Android , Its 3.0.0 and afterwards for multiplatform

Demo

Screen Recording (9-11-2021 4-29-35 PM)

Setup

You can either get this from github packages or jitpack

Step 1. Make sure you have jitpack repository in your build file

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

Step 2. Add the dependency

dependencies {
    implementation 'com.github.qawaz:compose-code-editor:2.0.3'
}

Multiplatform Dependency

Step 1 : Add the Github Packages Repo

val githubProperties = Properties()
githubProperties.load(FileInputStream(rootProject.file("github.properties")))

allprojects {
    repositories {
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/username/repo")
            credentials {
                username = (githubProperties["gpr.usr"] ?: System.getenv("GPR_USER")).toString()
                password = (githubProperties["gpr.key"] ?: System.getenv("GPR_API_KEY")).toString()
            }
        }
    }
}

Step 2 : Create Github Properties File

Create github.properties file in your project at root level and add two properties (make github personal access token)

gpr.usr=yourusername
gpr.key=yourgithubpersonalaccesstoken

Step 3 : Add The Dependency

implementation("com.wakaztahir:codeeditor:3.0.5")

Usage

// Step 1. Declare Language & Code
val language = CodeLang.Kotlin
val code = """             
    package com.wakaztahir.codeeditor

    fun main(){
        println("Hello World");
    }
""".trimIndent()

// Step 2. Create Parser & Theme
val parser = remember { PrettifyParser() } // try getting from LocalPrettifyParser.current
var themeState by remember { mutableStateOf(CodeThemeType.Monokai) }
val theme = remember(themeState) { themeState.theme() }

Using Text Composable

// Step 3. Parse Code For Highlighting
val parsedCode = remember {
    parseCodeAsAnnotatedString(
        parser = parser,
        theme = theme,
        lang = language,
        code = code
    )
}

// Step 4. Display In A Text Composable
Text(parsedCode)

Using TextField Composable

var textFieldValue by remember {
  mutableStateOf(
    TextFieldValue(
      annotatedString = parseCodeAsAnnotatedString(
        parser = parser,
        theme = theme,
        lang = language,
        code = code
      )
    )
  )
}

OutlinedTextField(
  modifier = Modifier.fillMaxSize(),
  value = textFieldValue,
  onValueChange = {
    textFieldValue = it.copy(
      annotatedString = parseCodeAsAnnotatedString(
        parser = parser,
        theme = theme,
        lang = language,
        code = it.text
      )
    )
  }
)

Displaying Line Numbers

To display line numbers in the text field we must use a BasicTextField since it has a parameter for onTextLayout

A basic example can be setup like this , On every text layout a new array is created which contains top offsets of each line in the BasicTextField

val language = CodeLang.Kotlin
val code = """             
    package com.wakaztahir.codeeditor

    fun main(){
        println("Hello World");
    }
    """.trimIndent()

val parser = remember { PrettifyParser() }
val themeState by remember { mutableStateOf(CodeThemeType.Default) }
val theme = remember(themeState) { themeState.theme }

fun parse(code: String): AnnotatedString {
    return parseCodeAsAnnotatedString(
        parser = parser,
        theme = theme,
        lang = language,
        code = code
    )
}

var textFieldValue by remember { mutableStateOf(TextFieldValue(parse(code))) }
var lineTops by remember { mutableStateOf(emptyArray<Float>()) }
val density = LocalDensity.current

Row {
    if (lineTops.isNotEmpty()) {
        Box(modifier = Modifier.padding(horizontal = 4.dp)) {
            lineTops.forEachIndexed { index, top ->
                Text(
                    modifier = Modifier.offset(y = with(density) { top.toDp() }),
                    text = index.toString(),
                    color = MaterialTheme.colors.onBackground.copy(.3f)
                )
            }
        }
    }
    BasicTextField(
        modifier = Modifier.fillMaxSize(),
        value = textFieldValue,
        onValueChange = {
            textFieldValue = it.copy(annotatedString = parse(it.text))
        },
        onTextLayout = { result ->
            lineTops = Array(result.lineCount) { result.getLineTop(it) }
        }
    )
}

List of available languages & their extensions

Default ("default-code"), HTML ("default-markup") , C/C++/Objective-C ("c", "cc", "cpp", "cxx", "cyc", "m"), C# ("cs"), Java ("java"),Kotlin ("kt") ,Bash ("bash", "bsh", "csh", "sh"), Python ("cv", "py", "python"), Perl ("perl", "pl", "pm"), Ruby ("rb", "ruby"), JavaScript ("javascript", "js"), CoffeeScript ("coffee"), Rust ("rc", "rs", "rust"), Appollo ("apollo" , "agc", "aea"), Basic ("basic", "cbm"), Clojure ("clj"), Css ("css"), Dart ("dart"), Erlang ("erlang", "erl"), Go ("go"), Haskell ("hs"), Lisp ("cl", "el", "lisp", "lsp", "scm" , "ss", "rkt"), Llvm ("llvm", "ll"), Lua ("lua"), Matlab ("matlab"), ML (OCaml, SML, F#, etc) ("fs", "ml"), Mumps ("mumps"), N ("n", "nemerle"), Pascal ("pascal"), R ("r", "s", "R" , "S", "Splus"), Rd ("Rd", "rd"), Scala ("scala"), SQL ("sql"), Tex ("latex", "tex"), VB ("vb", "vbs"), VHDL ("vhdl", "vhd"), Tcl ("tcl"), Wiki ("wiki.meta"), XQuery ("xq", "xquery"), YAML ("yaml" , "yml"), Markdown ("md", "markdown"), formats ("json", "xml" , "proto"), "regex"

Didn't found yours? Please, open issue to show your interest & I'll try to add this language in next releases.

List of available themes

Issues

  • Lack of themes