openai/compose-richtext
Publicmirrored fromhttps://github.com/openai/compose-richtextAvailable
docs/richtext-ui.md
128lines · modecode
| 1 | # Richtext UI |
| 2 | |
| 3 | [](https://developer.android.com/studio/build/dependencies) |
| 4 | [](https://kotlinlang.org/docs/mpp-intro.html) |
| 5 | |
| 6 | A library of Composables for formatting text using higher-level concepts than are not supported by |
| 7 | compose foundation, such as "ordered lists" and "headings". |
| 8 | |
| 9 | Richtext UI is a base library that is non-opinionated about higher level design requirements. |
| 10 | If you are already using `MaterialTheme` in your compose app, you can jump to [RichText UI Material](../richtext-ui-material/index.html) |
| 11 | for a quick start. There is also Material3 flavor at [RichText UI Material3](../richtext-ui-material3/index.html) |
| 12 | |
| 13 | ## Gradle |
| 14 | |
| 15 | ```kotlin |
| 16 | dependencies { |
| 17 | implementation("com.halilibo.compose-richtext:richtext-ui:${richtext_version}") |
| 18 | } |
| 19 | ``` |
| 20 | |
| 21 | ## [`BasicRichText`](../api/richtext-ui/com.halilibo.richtext.ui/-basic-rich-text.html) |
| 22 | |
| 23 | Richtext UI does not depend on Material artifact of Compose. Design agnostic API allows anyone |
| 24 | to adopt Richtext UI and its extensions like Markdown to their own design and typography systems. |
| 25 | Hence, just like `foundation` and `material` modules of Compose, this library also names the |
| 26 | building block with `Basic` prefix. |
| 27 | |
| 28 | If you are planning to adopt RichText within your design system, please go ahead and check out [`RichText Material`](../richtext-ui-material/index.html) |
| 29 | for inspiration. |
| 30 | |
| 31 | ## [`RichTextScope`](../api/richtext-ui/com.halilibo.richtext.ui/-rich-text-scope/index.html) |
| 32 | |
| 33 | `RichTextScope` is a context wrapper around Composables that integrate and play well within Richtext |
| 34 | content. |
| 35 | |
| 36 | ## [`RichTextThemeProvider`](../api/richtext-ui/com.halilibo.richtext.ui/-rich-text-theme-provider.html) |
| 37 | |
| 38 | Entry point for integrating app's own typography and theme system with BasicRichText. |
| 39 | |
| 40 | API for this integration is highly influenced by how compose-material theming |
| 41 | is designed. RichText library assumes that almost all Theme/Design systems would |
| 42 | have composition locals that provide a TextStyle downstream. |
| 43 | |
| 44 | Moreover, text style should not include text color by best practice. Content color |
| 45 | exists to figure out text color in the current context. Light/Dark theming leverages content |
| 46 | color to influence not just text but other parts of theming as well. |
| 47 | |
| 48 | ## Example |
| 49 | |
| 50 | Open the `Demo.kt` file in the `sample` module to play with this. Although the mentioned demo |
| 51 | uses Material integrated version of `RichText`, they share exactly the same API. |
| 52 | |
| 53 | ```kotlin |
| 54 | BasicRichText( |
| 55 | modifier = Modifier.background(color = Color.White) |
| 56 | ) { |
| 57 | Heading(0, "Paragraphs") |
| 58 | Text("Simple paragraph.") |
| 59 | Text("Paragraph with\nmultiple lines.") |
| 60 | Text("Paragraph with really long line that should be getting wrapped.") |
| 61 | |
| 62 | Heading(0, "Lists") |
| 63 | Heading(1, "Unordered") |
| 64 | ListDemo(listType = Unordered) |
| 65 | Heading(1, "Ordered") |
| 66 | ListDemo(listType = Ordered) |
| 67 | |
| 68 | Heading(0, "Horizontal Line") |
| 69 | Text("Above line") |
| 70 | HorizontalRule() |
| 71 | Text("Below line") |
| 72 | |
| 73 | Heading(0, "Code Block") |
| 74 | CodeBlock( |
| 75 | """ |
| 76 | { |
| 77 | "Hello": "world!" |
| 78 | } |
| 79 | """.trimIndent() |
| 80 | ) |
| 81 | |
| 82 | Heading(0, "Block Quote") |
| 83 | BlockQuote { |
| 84 | Text("These paragraphs are quoted.") |
| 85 | Text("More text.") |
| 86 | BlockQuote { |
| 87 | Text("Nested block quote.") |
| 88 | } |
| 89 | } |
| 90 | |
| 91 | Heading(0, "Info Panel") |
| 92 | InfoPanel(InfoPanelType.Primary, "Only text primary info panel") |
| 93 | InfoPanel(InfoPanelType.Success) { |
| 94 | Column { |
| 95 | Text("Successfully sent some data") |
| 96 | HorizontalRule() |
| 97 | BlockQuote { |
| 98 | Text("This is a quote") |
| 99 | } |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | Heading(0, "Table") |
| 104 | Table(headerRow = { |
| 105 | cell { Text("Column 1") } |
| 106 | cell { Text("Column 2") } |
| 107 | }) { |
| 108 | row { |
| 109 | cell { Text("Hello") } |
| 110 | cell { |
| 111 | CodeBlock("Foo bar") |
| 112 | } |
| 113 | } |
| 114 | row { |
| 115 | cell { |
| 116 | BlockQuote { |
| 117 | Text("Stuff") |
| 118 | } |
| 119 | } |
| 120 | cell { Text("Hello world this is a really long line that is going to wrap hopefully") } |
| 121 | } |
| 122 | } |
| 123 | } |
| 124 | ``` |
| 125 | |
| 126 | Looks like this: |
| 127 | |
| 128 |  |
| 129 | |