: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 becauseRichTextEditor
is built on top ofTextField
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 normalTextField
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 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.
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.