Compose Rich Editor

:richeditor-compose: 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))

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:

Coming Features

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

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 ❤️.

Find this library useful? ❤️

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

License

Copyright 2023 Mohamed Rejeb

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

virendersran01 / Compose-Rich-Editor