:richeditor-compose: Rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable and supports the common rich text editor features.

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.

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

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

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

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
• ...

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 methond and all of these methods accepts a RichTextStyleas 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.

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

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

richTextValue = richTextValue.addStyle(RichTextStyle.Bold)

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

richTextValue = richTextValue.addStyle(RichTextStyle.Italic)

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

richTextValue = richTextValue.addStyle(RichTextStyle.Underline)

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

richTextValue = richTextValue.addStyle(RichTextStyle.Strikethrough)

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

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

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

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

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

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

We can create a custom style with implementing RichTextStyle interface.

data class FirstCustomStyle(
    val color: Color, 
    val background: Color
) : RichTextStyle {
    override fun toSpan(): Any {
        return SpanStyle(
            color = color, 
            background = background
        )
    }
}

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

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

richTextValue = richTextValue.addStyle(SecondCustomStyle)

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
)

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

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

You can try out the web demo here.

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

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

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.