Compose Rich Editor – A Rich text editor library for Jetpack Compose and Compose Multiplatform

A Rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable and supports the common rich text editor features.

Why Compose Rich Editor?

Compose Rich Editor is a rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable and supports the common rich text editor features. It’s built on top of TextField and it’s going to help you to create a rich text editor easily.

Including in your project

Gradle

Add the dependency below to your module‘s build.gradle.kts or build.gradle file:

dependencies {
    implementation("com.mohamedrejeb.richeditor:richeditor-compose:$version")
}

How to Use

Compose Rich Editor supports both Jetpack Compose and Compose Multiplatform projects,.

Create Rich Text Editor with Compose UI

We can easily use Compose Rich Editor by calling the RichTextEditor Composable and pass a RichTextValue.

var richTextValue by remember { mutableStateOf(RichTextValue()) }

RichTextEditor(
    value = richTextValue,
    onValueChange = {
        richTextValue = it
    },
)

Note: You may notice that it’s similar to TextField, it’s because RichTextEditoris built on top of TextField and it’s available with 5 composables:

• BasicRichTextEditor
• RichTextEditor (material2)
• OutlinedRichTextEditor (material2)
• RichTextEditor (material3)
• OutlinedRichTextEditor (material3)

All RichTextEditor composables are fully customisable with same parameters that are available for a normal TextField

• TextFieldColors
• Shape
• enabled
• keyboardOptions
• keyboardActions
• …

Update Rich Text Styles

We have some available methods under RichTextValue to update styles. If we use addStyle method, we add a style. If we use removeStyle method, we remove a style. Also, we can toggle a style using toggleStyle method and all of these methods accepts a RichTextStyle as a parameter.

var richTextValue by remember { mutableStateOf(RichTextValue()) }

IconButton(
    onClick = {
        richTextValue = richTextValue.toggleStyle(RichTextStyle.Bold)
    }
) {
    Icon(
        imageVector = Icons.Outlined.FormatBold,
        contentDescription = "Bold"
    )
}

The added styles are going to be applied to the written text in the RichTextEditor. Also, you can get the current styles using richTextValue.currentStyles, you may need it to check if a certain style is added.

var richTextValue by remember { mutableStateOf(RichTextValue()) }

IconButton(
    onClick = {
        richTextValue = richTextValue.toggleStyle(RichTextStyle.Bold)
    }
) {
    Icon(
        imageVector = Icons.Outlined.FormatBold,
        contentDescription = "Bold",
        modifier = Modifier
            // Mark the icon with a background color is the style is selected
            .background(
                color = if (richTextValue.currentStyles.contains(RichTextStyle.Bold)) {
                    Color.Blue
                } else {
                    Color.Transparent
                }
            )
    )
}

Note: You can add and remove the styles easily, so you can build your own custom styles panel. Take a look on the sample to know more about creating your own styles panel.

Available Rich Text Styles

There are some available styles that you can use with RichTextEditor and you can create your own custom styles:

Bold

We can add bold style to the text using RichTextStyle.Bold style.

richTextValue = richTextValue.addStyle(RichTextStyle.Bold)

Italic

We can add italic style to the text using RichTextStyle.Italic style.

richTextValue = richTextValue.addStyle(RichTextStyle.Italic)

Underline

We can add underline style to the text using RichTextStyle.Underline style.

richTextValue = richTextValue.addStyle(RichTextStyle.Underline)

Strikethrough

We can add strikethrough style to the text using RichTextStyle.Strikethrough style.

richTextValue = richTextValue.addStyle(RichTextStyle.Strikethrough)

TextColor

We can add text color style to the text using RichTextStyle.TextColor style.

richTextValue = richTextValue.addStyle(RichTextStyle.TextColor(Color.Red))

BackgroundColor

We can add background color style to the text using RichTextStyle.BackgroundColor style.

richTextValue = richTextValue.addStyle(RichTextStyle.BackgroundColor(Color.Red))

FontSize

We can add font size style to the text using RichTextStyle.FontSize style.

richTextValue = richTextValue.addStyle(RichTextStyle.FontSize(20.sp))

Create a custom style

We can create a custom style with implementing RichTextStyle interface.

data class FirstCustomStyle(
    val color: Color, 
    val background: Color
) : RichTextStyle {

    override fun applyStyle(spanStyle: SpanStyle): SpanStyle {
        return SpanStyle(
            color = color, 
            background = background
        )
    }
}

richTextValue = richTextValue.addStyle(FirstCustomStyle(Color.Red, Color.Blue))

object SecondCustomStyle : RichTextStyle {
    override fun applyStyle(spanStyle: SpanStyle): SpanStyle {
        return SpanStyle(
            color = Color.White,
            background = Color.Blue,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            textDecoration = TextDecoration.Underline
        )
    }
}

richTextValue = richTextValue.addStyle(SecondCustomStyle)

Create Rich Text with Compose UI

The library provides a RichText composable that can be used to display rich text. It’s similar to Text composable, but it supports rich text styles.

var richTextValue by remember { mutableStateOf(RichTextValue()) }

RichText(
    text = richTextValue
)

Supported Features

There are some supported features that you can use with RichTextEditor:

•  Bold
•  Italic
•  Underline
•  Strikethrough
•  Text color
•  Background color
•  Font size
•  Create a custom style

Coming Features

The library still in its early stages, so there are some features that are coming soon:

•  Add link
•  Add paragraph alignment (left, center, right)
•  Add ordered and unordered lists
•  Add Blockquote
•  Add code block style
•  Add undo and redo
•  Add checkbox
•  Add image support
•  Add video support
•  Add audio support
•  Support importing and exporting HTML
•  Support importing and exporting Markdown
•  Add add prebuilt styles panel

Web live demo

You can try out the web demo here.

Contribution

If you’ve found an error in this sample, please file an issue.
Feel free to help out by sending a pull request ❤️.

Code of Conduct

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for more libraries! 🤩

Compose Rich Editor on GitHub: https://github.com/MohamedRejeb/Compose-Rich-Editor
Platform: Android
⭐️: 241