MohamedRejeb/compose-rich-editorPublic

NotificationsYou must be signed in to change notification settings
Fork133
Star1.7k

A Rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable, supports HTML and Markdown.

mohamedrejeb.github.io/compose-rich-editor/

License

Apache-2.0 license

1.7k stars 133 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 810 Commits
.fleet		.fleet
.github		.github
convention-plugins		convention-plugins
docs		docs
gradle		gradle
kotlin-js-store		kotlin-js-store
richeditor-compose-coil3		richeditor-compose-coil3
richeditor-compose		richeditor-compose
sample		sample
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
build.gradle.kts		build.gradle.kts
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
mkdocs.yml		mkdocs.yml
settings.gradle.kts		settings.gradle.kts

Repository files navigation

Compose Rich Editor

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

Multiplatform: Compose Rich Editor supports Compose Multiplatform (Android, iOS, Desktop, Web).
Easy to use: Compose Rich Editor's API leverages Kotlin's language features for simplicity and minimal boilerplate.
WYSIWYG: Compose Rich Editor is a WYSIWYG editor that supports the most common text styling features.

Screenshots

Slack Demo

Html to Rich Text

Markdown to Rich Text

Download

Compose Rich Editor is available onmavenCentral().

implementation("com.mohamedrejeb.richeditor:richeditor-compose:1.0.0-rc13")

Compatibility

Kotlin version	Compose version	Compose Rich Editor version
2.1.21	1.8.2	1.0.0-rc13
2.1.10	1.7.3	1.0.0-rc11
2.0.21	1.7.0	1.0.0-rc10
2.0.20	1.6.11	1.0.0-rc09
2.0.10	1.6.11	1.0.0-rc06
2.0.0	1.6.10	1.0.0-rc05-k2
1.9.24	1.6.10	1.0.0-rc05

Quick Start

RichTextState

UseRichTextEditor composable to create a rich text editor.

TheRichTextEditor composable requires aRichTextState to manage the editor's state.

To create aRichTextState, use therememberRichTextState function:

val state= rememberRichTextState()RichTextEditor(    state= state,)

Styling Spans

To style spans,RichTextState providestoggleSpanStyle method:

// Toggle a span style.richTextState.toggleSpanStyle(SpanStyle(fontWeight=FontWeight.Bold))

To get the current span style of the selection, useRichTextState.currentSpanStyle:

// Get the current span style.val currentSpanStyle= richTextState.currentSpanStyleval isBold= currentSpanStyle.fontWeight==FontWeight.Bold

Styling Paragraphs

To style paragraphs,RichTextState providestoggleParagraphStyle method:

// Toggle a paragraph style.richTextState.toggleParagraphStyle(ParagraphStyle(textAlign=TextAlign.Center))

To get the current paragraph style of the selection, useRichTextState.currentParagraphStyle:

// Get the current paragraph style.val currentParagraphStyle= richTextState.currentParagraphStyleval isCentered= currentParagraphStyle.textAlign==TextAlign.Center

Add links

To add links,RichTextState providesaddLink method:

// Add link after selection.richTextState.addLink(    text="Compose Rich Editor",    url="https://github.com/MohamedRejeb/Compose-Rich-Editor")

To get if the current selection is a link, useRichTextState.isLink:

// Get if the current selection is a link.val isLink= richTextState.isLink

By default, links will be opened by your platform'sUriHandler, if however you want tohandle the links on your own, you can override the composition local as such:

val myUriHandler by remember {    mutableStateOf(object:UriHandler {overridefunopenUri(uri:String) {// Handle the clicked link however you want        }    })}CompositionLocalProvider(LocalUriHandler provides myUriHandler) {RichText(        state= richTextState,        modifier=Modifier.fillMaxWidth()    )}

Add Code Blocks

To add code blocks,RichTextState providestoggleCodeSpan method:

// Toggle code span.richTextState.toggleCodeSpan()

To get if the current selection is a code block, useRichTextState.isCodeSpan:

// Get if the current selection is a code span.val isCodeSpan= richTextState.isCodeSpan

Ordered and Unordered Lists

You can add ordered and unordered lists usingRichTextState:

// Toggle ordered list.richTextState.toggleOrderedList()// Toggle unordered list.richTextState.toggleUnorderedList()

You can get if the current selection is an ordered or unordered list, usingRichTextState:

// Get if the current selection is an ordered list.val isOrderedList= richTextState.isOrderedList// Get if the current selection is an unordered list.val isUnorderedList= richTextState.isUnorderedList

Customizing the rich text configuration

Some of the rich text editor's features can be customized, such as the color of the links and the code blocks.

richTextState.config.linkColor=Color.BluerichTextState.config.linkTextDecoration=TextDecoration.UnderlinerichTextState.config.codeSpanColor=Color.YellowrichTextState.config.codeSpanBackgroundColor=Color.TransparentrichTextState.config.codeSpanStrokeColor=Color.LightGray

HTML import and export

To convert HTML toRichTextState, useRichTextState.setHtml method:

val html="<p><b>Compose Rich Editor</b></p>"richTextState.setHtml(html)

To insert HTML content at a specific position, useRichTextState.insertHtml method:

val html="<b>inserted content</b>"richTextState.insertHtml(html, position=5)

To convertRichTextState to HTML, useRichTextState.toHtml method:

val html= richTextState.toHtml()

Markdown import and export

To convert Markdown toRichTextState, useRichTextState.setMarkdown method:

val markdown="**Compose** *Rich* Editor"richTextState.setMarkdown(markdown)

To insert Markdown content at a specific position, useRichTextState.insertMarkdown method:

val markdown="**inserted** *content*"richTextState.insertMarkdown(markdown, position=5)

To convertRichTextState to Markdown, useRichTextState.toMarkdown method:

val markdown= richTextState.toMarkdown()

Check out Compose Rich Editor'sfull documentation for more details.

Web live demo

You can try out the web demohere.

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 joiningstargazers for this repository. ⭐
Also,follow me on GitHub for more libraries! 🤩

You can always

License

Copyright 2023 Mohamed RejebLicensed 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 athttp://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.