[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11070":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":47,"readmeContent":48,"aiSummary":49,"trendingCount":16,"starSnapshotCount":16,"syncStatus":50,"lastSyncTime":51,"discoverSource":52},11070,"compose-rich-editor","MohamedRejeb\u002Fcompose-rich-editor","MohamedRejeb","A Rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable, supports HTML and Markdown.","https:\u002F\u002Fmohamedrejeb.github.io\u002Fcompose-rich-editor\u002F",null,"Kotlin",1793,151,14,85,0,5,10,25,15,72.05,"Apache License 2.0",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"android","android-library","compose","compose-android","compose-desktop","compose-ios","compose-library","compose-multiplatform","compose-multiplatform-library","compose-ui","compose-web","kmp","kmp-library","kotlin","kotlin-android","kotlin-multiplatform","rich-text","rich-text-editor","richtext","richtexteditor","2026-06-12 04:00:53","\u003Ch1 align=\"center\">Compose Rich Editor\u003C\u002Fh1>\u003Cbr>\n\n[![Kotlin](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fkotlin-2.3.21-blue.svg?logo=kotlin)](http:\u002F\u002Fkotlinlang.org)\n[![Compose](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcompose-1.10.3-blue.svg?logo=jetpackcompose)](https:\u002F\u002Fwww.jetbrains.com\u002Flp\u002Fcompose-multiplatform)\n[![MohamedRejeb](https:\u002F\u002Fraw.githubusercontent.com\u002FMohamedRejeb\u002FMohamedRejeb\u002Fmain\u002Fbadges\u002Fmohamedrejeb.svg)](https:\u002F\u002Fgithub.com\u002FMohamedRejeb)\n[![Apache-2.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache%202.0-green.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FApache-2.0)\n[![API](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAPI-21%2B-brightgreen.svg?style=flat)](https:\u002F\u002Fandroid-arsenal.com\u002Fapi?level=21)\n[![Maven Central](https:\u002F\u002Fimg.shields.io\u002Fmaven-central\u002Fv\u002Fcom.mohamedrejeb.richeditor\u002Fricheditor-compose\u002F1.0.0-rc14)](https:\u002F\u002Fsearch.maven.org\u002Fsearch?q=g:%22com.mohamedrejeb.richeditor%22%20AND%20a:%22richeditor-compose%22)\n\n![Compose Rich Editor](docs\u002Fimages\u002Flogo-large-light.svg#gh-light-mode-only)\n![Compose Rich Editor](docs\u002Fimages\u002Flogo-large-dark.svg#gh-dark-mode-only)\n\nA rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable and supports the common rich text editor features\n\n- **Multiplatform**: Compose Rich Editor supports Compose Multiplatform (Android, iOS, Desktop, Web).\n- **Easy to use**: Compose Rich Editor's API leverages Kotlin's language features for simplicity and minimal boilerplate.\n- **WYSIWYG**: Compose Rich Editor is a WYSIWYG editor that supports the most common text styling features.\n- **Undo \u002F Redo**: Built-in rich-text-aware undo\u002Fredo (`state.history`) that respects formatting, overriding `BasicTextField`'s default.\n\n---\n\n\u003Cdiv align=\"center\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FSafouene1\u002Fsupport-palestine-banner\u002Fblob\u002Fmaster\u002FMarkdown-pages\u002FSupport.md\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FSafouene1\u002Fsupport-palestine-banner\u002Fmaster\u002Fbanner-project.svg\" alt=\"Support Palestine\" style=\"width: 100%;\">\u003C\u002Fa>\u003C\u002Fdiv>\n\n## Screenshots\n\n### Slack Demo\n![Slack Demo](docs\u002Fimages\u002Fscreenshot-01.png)\n\n### Html to Rich Text\n![Slack Demo](docs\u002Fimages\u002Fscreenshot-02.png)\n\n### Markdown to Rich Text\n![Slack Demo](docs\u002Fimages\u002Fscreenshot-03.png)\n\n## Download\n\n[![Maven Central](https:\u002F\u002Fimg.shields.io\u002Fmaven-central\u002Fv\u002Fcom.mohamedrejeb.richeditor\u002Fricheditor-compose\u002F1.0.0-rc14)](https:\u002F\u002Fsearch.maven.org\u002Fsearch?q=g:%22com.mohamedrejeb.richeditor%22%20AND%20a:%22richeditor-compose%22)\n\nCompose Rich Editor is available on `mavenCentral()`.\n\n```kotlin\nimplementation(\"com.mohamedrejeb.richeditor:richeditor-compose:1.0.0-rc14\")\n```\n\n## Compatibility\n\n[![Maven Central](https:\u002F\u002Fimg.shields.io\u002Fmaven-central\u002Fv\u002Fcom.mohamedrejeb.richeditor\u002Fricheditor-compose\u002F1.0.0-rc14)](https:\u002F\u002Fsearch.maven.org\u002Fsearch?q=g:%22com.mohamedrejeb.richeditor%22%20AND%20a:%22richeditor-compose%22)\n\n| Kotlin version | Compose version | Compose Rich Editor version |\n|----------------|-----------------|-----------------------------|\n| 2.3.21         | 1.10.3          | 1.0.0-rc14                  |\n| 2.1.21         | 1.8.2           | 1.0.0-rc13                  |\n| 2.1.10         | 1.7.3           | 1.0.0-rc11                  |\n| 2.0.21         | 1.7.0           | 1.0.0-rc10                  |\n| 2.0.20         | 1.6.11          | 1.0.0-rc09                  |\n| 2.0.10         | 1.6.11          | 1.0.0-rc06                  |\n| 2.0.0          | 1.6.10          | 1.0.0-rc05-k2               |\n| 1.9.24         | 1.6.10          | 1.0.0-rc05                  |\n\n## Quick Start\n\n#### RichTextState\n\nUse `RichTextEditor` composable to create a rich text editor.\n\nThe `RichTextEditor` composable requires a `RichTextState` to manage the editor's state.\n\nTo create a `RichTextState`, use the `rememberRichTextState` function:\n\n```kotlin\nval state = rememberRichTextState()\n\nRichTextEditor(\n    state = state,\n)\n```\n\n#### Styling Spans\n\nTo style spans, `RichTextState` provides `toggleSpanStyle` method:\n\n```kotlin\n\u002F\u002F Toggle a span style.\nrichTextState.toggleSpanStyle(SpanStyle(fontWeight = FontWeight.Bold))\n```\n\nTo get the current span style of the selection, use `RichTextState.currentSpanStyle`:\n\n```kotlin\n\u002F\u002F Get the current span style.\nval currentSpanStyle = richTextState.currentSpanStyle\nval isBold = currentSpanStyle.fontWeight == FontWeight.Bold\n```\n\n#### Styling Paragraphs\n\nTo style paragraphs, `RichTextState` provides `toggleParagraphStyle` method:\n\n```kotlin\n\u002F\u002F Toggle a paragraph style.\nrichTextState.toggleParagraphStyle(ParagraphStyle(textAlign = TextAlign.Center))\n```\n\nTo get the current paragraph style of the selection, use `RichTextState.currentParagraphStyle`:\n\n```kotlin\n\u002F\u002F Get the current paragraph style.\nval currentParagraphStyle = richTextState.currentParagraphStyle\nval isCentered = currentParagraphStyle.textAlign == TextAlign.Center\n```\n\n#### Add links\n\nTo add links, `RichTextState` provides `addLink` method:\n\n```kotlin\n\u002F\u002F Add link after selection.\nrichTextState.addLink(\n    text = \"Compose Rich Editor\",\n    url = \"https:\u002F\u002Fgithub.com\u002FMohamedRejeb\u002FCompose-Rich-Editor\"\n)\n```\n\nTo get if the current selection is a link, use `RichTextState.isLink`:\n\n```kotlin\n\u002F\u002F Get if the current selection is a link.\nval isLink = richTextState.isLink\n```\n\nBy default, links will be opened by your platform's `UriHandler`, if however you want to\nhandle the links on your own, you can override the composition local as such:\n\n```kotlin\nval myUriHandler by remember {\n    mutableStateOf(object : UriHandler {\n        override fun openUri(uri: String) {\n            \u002F\u002F Handle the clicked link however you want\n        }\n    })\n}\nCompositionLocalProvider(LocalUriHandler provides myUriHandler) {\n    RichText(\n        state = richTextState,\n        modifier = Modifier.fillMaxWidth()\n    )\n}\n```\n\n#### Add Code Blocks\n\nTo add code blocks, `RichTextState` provides `toggleCodeSpan` method:\n\n```kotlin\n\u002F\u002F Toggle code span.\nrichTextState.toggleCodeSpan()\n```\n\nTo get if the current selection is a code block, use `RichTextState.isCodeSpan`:\n\n```kotlin\n\u002F\u002F Get if the current selection is a code span.\nval isCodeSpan = richTextState.isCodeSpan\n```\n\n#### Ordered and Unordered Lists\n\nYou can add ordered and unordered lists using `RichTextState`:\n\n```kotlin\n\u002F\u002F Toggle ordered list.\nrichTextState.toggleOrderedList()\n\n\u002F\u002F Toggle unordered list.\nrichTextState.toggleUnorderedList()\n```\n\nYou can get if the current selection is an ordered or unordered list, using `RichTextState`:\n\n```kotlin\n\u002F\u002F Get if the current selection is an ordered list.\nval isOrderedList = richTextState.isOrderedList\n\n\u002F\u002F Get if the current selection is an unordered list.\nval isUnorderedList = richTextState.isUnorderedList\n```\n\n#### Customizing the rich text configuration\n\nSome of the rich text editor's features can be customized, such as the color of the links and the code blocks.\n\n```kotlin\nrichTextState.config.linkColor = Color.Blue\nrichTextState.config.linkTextDecoration = TextDecoration.Underline\nrichTextState.config.codeSpanColor = Color.Yellow\nrichTextState.config.codeSpanBackgroundColor = Color.Transparent\nrichTextState.config.codeSpanStrokeColor = Color.LightGray\n```\n\n#### HTML import and export\n\nTo convert HTML to `RichTextState`, use `RichTextState.setHtml` method:\n\n```kotlin\nval html = \"\u003Cp>\u003Cb>Compose Rich Editor\u003C\u002Fb>\u003C\u002Fp>\"\nrichTextState.setHtml(html)\n```\n\nTo insert HTML content at a specific position, use `RichTextState.insertHtml` method:\n\n```kotlin\nval html = \"\u003Cb>inserted content\u003C\u002Fb>\"\nrichTextState.insertHtml(html, position = 5)\n```\n\nTo convert `RichTextState` to HTML, use `RichTextState.toHtml` method:\n\n```kotlin\nval html = richTextState.toHtml()\n```\n\n#### Markdown import and export\n\nTo convert Markdown to `RichTextState`, use `RichTextState.setMarkdown` method:\n\n```kotlin\nval markdown = \"**Compose** *Rich* Editor\"\nrichTextState.setMarkdown(markdown)\n```\n\nTo insert Markdown content at a specific position, use `RichTextState.insertMarkdown` method:\n\n```kotlin\nval markdown = \"**inserted** *content*\"\nrichTextState.insertMarkdown(markdown, position = 5)\n```\n\nTo convert `RichTextState` to Markdown, use `RichTextState.toMarkdown` method:\n\n```kotlin\nval markdown = richTextState.toMarkdown()\n```\n\nCheck out Compose Rich Editor's [full documentation](https:\u002F\u002Fmohamedrejeb.github.io\u002Fcompose-rich-editor\u002F) for more details.\n\n## Mentions, Hashtags, Slash Commands (Triggers)\n\n> Experimental - gated by `@ExperimentalRichTextApi`.\n\nA generic trigger system lets you add `@mentions`, `#hashtags`, `\u002Fcommands` or any\nsingle-character trigger. A trigger activates a query mode; when the user selects a\nsuggestion, an atomic `Token` span is inserted. Tokens are deleted, selected, and\nskipped as a single unit, and they round-trip through both HTML and Markdown.\n\nRegister triggers on the state and observe `activeTriggerQuery`:\n\n```kotlin\nimport com.mohamedrejeb.richeditor.model.trigger.Trigger\nimport com.mohamedrejeb.richeditor.ui.material3.TriggerSuggestions\n\nval state = rememberRichTextState()\n\nLaunchedEffect(Unit) {\n    state.registerTrigger(Trigger(id = \"mention\", char = '@'))\n    state.registerTrigger(Trigger(id = \"hashtag\", char = '#'))\n}\n\nBox {\n    RichTextEditor(state = state)\n\n    \u002F\u002F Drop in the built-in popup, or roll your own using state.activeTriggerQuery.\n    TriggerSuggestions(\n        state = state,\n        triggerId = \"mention\",\n        suggestions = { query -> users.filter { it.handle.contains(query) } },\n        onSelect = { user ->\n            RichSpanStyle.Token(\n                triggerId = \"mention\",\n                id = user.id,\n                label = \"@${user.handle}\",\n            )\n        },\n        item = { user -> Text(user.handle) },\n    )\n}\n```\n\nTokens serialize as `\u003Cspan data-trigger=\"mention\" data-id=\"u123\">@mohamed\u003C\u002Fspan>` in HTML\nand `[@mohamed](trigger:mention:u123)` in Markdown, so content round-trips even in viewers\nthat don't know about triggers.\n\n## Web live demo\nYou can try out the web demo [here](https:\u002F\u002Fcompose-richeditor.netlify.app\u002F).\n\n## Contribution\nIf you've found an error in this sample, please file an issue. \u003Cbr>\nFeel free to help out by sending a pull request :heart:.\n\n[Code of Conduct](https:\u002F\u002Fgithub.com\u002FMohamedRejeb\u002FCompose-Rich-Editor\u002Fblob\u002Fmain\u002FCODE_OF_CONDUCT.md)\n\n## Find this library useful? :heart:\nSupport it by joining __[stargazers](https:\u002F\u002Fgithub.com\u002FMohamedRejeb\u002FCompose-Rich-Editor\u002Fstargazers)__ for this repository. :star: \u003Cbr>\nAlso, __[follow me](https:\u002F\u002Fgithub.com\u002FMohamedRejeb)__ on GitHub for more libraries! 🤩\n\nYou can always \u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002FMohamedRejeb\" target=\"_blank\">\u003Cimg style=\"display: block; height: 60px;\" src=\"docs\u002Fimages\u002Fbmc-yellow-button.png\">\u003C\u002Fa>\n# License\n```markdown\nCopyright 2023 Mohamed Rejeb\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","Compose Rich Editor 是一个适用于 Jetpack Compose 和 Compose Multiplatform 的富文本编辑器库，支持 HTML 和 Markdown 格式。其核心功能包括跨平台支持（Android、iOS、桌面和 Web）、易用性（通过 Kotlin 语言特性简化 API 使用）以及 WYSIWYG 编辑体验，具备常见的文本样式功能，并内置了对格式敏感的撤销\u002F重做功能。该库非常适合需要在多平台上提供一致富文本编辑体验的应用场景，如文档编辑、笔记应用或任何需要复杂文本输入功能的项目。",2,"2026-06-11 03:31:07","top_language"]