### Minimal BasicRichText Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/README.md Demonstrates the most basic usage of BasicRichText to display a heading and plain text. No special setup is required beyond including the library. ```kotlin @Composable fun App() { BasicRichText { Heading(0, "Hello") Text("World") } } ``` -------------------------------- ### Minimal Setup Imports Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Essential imports for a basic RichText setup, including core components and Markdown parsing. ```kotlin import com.halilibo.richtext.ui.BasicRichText import com.halilibo.richtext.ui.Text import com.halilibo.richtext.ui.Heading import com.halilibo.richtext.commonmark.Markdown ``` -------------------------------- ### Complete Markdown Viewer Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md A full example demonstrating how to use the Markdown composable to render a complex Markdown string, including custom styling for headings and paragraphs. ```kotlin @Composable fun MarkdownViewer() { val content = """ # Welcome to My App This is a **comprehensive** markdown example. ## Features - [x] Headings - [x] Lists - [x] Code blocks ```kotlin fun main() { println("Hello, Markdown!") } ``` > **Note**: This supports all CommonMark features | Feature | Status | |---------|--------| | Tables | Working | | Links | Working | Visit [example.com](https://example.com) for more. ".trimIndent() BasicRichText( modifier = Modifier.padding(16.dp), style = RichTextStyle( paragraphSpacing = 12.sp, headingStyle = { level, textStyle -> when (level) { 0 -> textStyle.copy(fontSize = 28.sp, fontWeight = FontWeight.Bold) else -> textStyle } } ) ) { Markdown(content) } } ``` -------------------------------- ### CodeBlockStyle Customization Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/CodeBlock.md Example demonstrating how to create and apply a custom CodeBlockStyle to a BasicRichText component. ```kotlin val customStyle = CodeBlockStyle( textStyle = TextStyle(fontSize = 12.sp, color = Color.White), modifier = Modifier.background(Color.DarkGray), padding = 12.sp, wordWrap = false ) BasicRichText( style = RichTextStyle(codeBlockStyle = customStyle) ) { CodeBlock("long line of code...") } ``` -------------------------------- ### BasicRichText Usage Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/BasicRichText.md Demonstrates how to use the BasicRichText composable with custom paragraph spacing and includes examples of Heading, Text, and HorizontalRule elements. ```kotlin @Composable fun MyApp() { BasicRichText( modifier = Modifier.padding(16.dp), style = RichTextStyle( paragraphSpacing = 12.sp ) ) { Heading(0, "Title") Text("Paragraph text") HorizontalRule() } } ``` -------------------------------- ### Basic Table Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Table.md Demonstrates a basic table with a header row and two body rows, each containing cells with text. ```kotlin BasicRichText { Table( headerRow = { cell { Text("Name") } cell { Text("Age") } cell { Text("City") } }, bodyRows = { row { cell { Text("Alice") } cell { Text("30") } cell { Text("NYC") } } row { cell { Text("Bob") } cell { Text("28") } cell { Text("LA") } } } ) } ``` -------------------------------- ### CodeBlockStyle Merge Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/CodeBlock.md Example showing how to customize a specific property of CodeBlockStyle using the merge function. ```kotlin val style = RichTextStyle( codeBlockStyle = CodeBlockStyle( padding = 8.sp ) ) ``` -------------------------------- ### BasicMarkdown Usage Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md Example of parsing Markdown text and rendering it using BasicMarkdown with a CommonmarkAstNodeParser. ```kotlin val parser = CommonmarkAstNodeParser() val astNode = parser.parse(markdownText) BasicRichText { BasicMarkdown(astNode) } ``` -------------------------------- ### Basic RichText Example Source: https://github.com/halilozercan/compose-richtext/blob/main/docs/richtext-ui.md Demonstrates the usage of BasicRichText with various text formatting components like Headings, Text, Lists, HorizontalRule, CodeBlock, BlockQuote, InfoPanel, and Table. This example showcases how to integrate different rich text elements within a Compose UI. ```kotlin BasicRichText( modifier = Modifier.background(color = Color.White) ) { Heading(0, "Paragraphs") Text("Simple paragraph.") Text("Paragraph with\nmultiple lines.") Text("Paragraph with really long line that should be getting wrapped.") Heading(0, "Lists") Heading(1, "Unordered") ListDemo(listType = Unordered) Heading(1, "Ordered") ListDemo(listType = Ordered) Heading(0, "Horizontal Line") Text("Above line") HorizontalRule() Text("Below line") Heading(0, "Code Block") CodeBlock( """ { \"Hello\": \"world!\" } """.trimIndent() ) Heading(0, "Block Quote") BlockQuote { Text("These paragraphs are quoted.") Text("More text.") BlockQuote { Text("Nested block quote.") } } Heading(0, "Info Panel") InfoPanel(InfoPanelType.Primary, "Only text primary info panel") InfoPanel(InfoPanelType.Success) { Column { Text("Successfully sent some data") HorizontalRule() BlockQuote { Text("This is a quote") } } } Heading(0, "Table") Table(headerRow = { cell { Text("Column 1") } cell { Text("Column 2") } }) { row { cell { Text("Hello") } cell { CodeBlock("Foo bar") } } row { cell { BlockQuote { Text("Stuff") } } cell { Text("Hello world this is a really long line that is going to wrap hopefully") } } } } ``` -------------------------------- ### Custom InfoPanelStyle Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/InfoPanel.md Demonstrates how to create and apply a custom InfoPanelStyle to modify the panel's padding, background, and text appearance. ```kotlin val customStyle = InfoPanelStyle( contentPadding = PaddingValues(16.dp), background = { type -> Modifier .border(2.dp, Color.Black, RoundedCornerShape(8.dp)) .background(Color.White, RoundedCornerShape(8.dp)) }, textStyle = { type -> TextStyle( color = Color.Black, fontSize = 14.sp ) } ) BasicRichText( style = RichTextStyle(infoPanelStyle = customStyle) ) { InfoPanel(InfoPanelType.Primary, "Custom styled panel") } ``` -------------------------------- ### InfoPanel Usage Example (Text Variant) Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/InfoPanel.md Demonstrates how to use the InfoPanel composable with different InfoPanelTypes to display text messages. ```kotlin BasicRichText { InfoPanel(InfoPanelType.Primary, "This is important") InfoPanel(InfoPanelType.Success, "Operation completed") InfoPanel(InfoPanelType.Danger, "An error occurred") } ``` -------------------------------- ### Complete Setup Imports Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Comprehensive imports for utilizing all features of the RichText library, including UI, string extensions, Markdown, and CommonMark. ```kotlin import com.halilibo.richtext.ui.* import com.halilibo.richtext.ui.string.* import com.halilibo.richtext.markdown.* import com.halilibo.richtext.commonmark.* ``` -------------------------------- ### CodeBlock (Text Variant) Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/CodeBlock.md Example of rendering a simple code block using the text variant of the CodeBlock composable. ```kotlin BasicRichText { CodeBlock("val x = 42") } ``` -------------------------------- ### CodeBlock (Composable Variant) Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/CodeBlock.md Example of rendering a code block with multiple lines of rich text content using the composable variant. ```kotlin BasicRichText { CodeBlock { Text("fun main() {") Text(" println(\"Hello\")") Text("}") } } ``` -------------------------------- ### Basic Markdown Rendering Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md Demonstrates how to use the Markdown composable to render a sample Markdown string within a BasicRichText scope. Ensure the markdown content is properly formatted. ```kotlin ```kotlin @Composable fun DocumentView() { val markdown = """ # Title This is a **bold** paragraph with `inline code`. - List item 1 - List item 2 > A block quote """.trimIndent() BasicRichText { Markdown(markdown) } } ``` ``` -------------------------------- ### Custom HeadingStyle Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextStyle.md Demonstrates a custom implementation of HeadingStyle for a more compact appearance. This custom style is then applied to a BasicRichText component. ```kotlin val compactHeadingStyle: HeadingStyle = { level, textStyle -> when (level) { 0 -> TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold) 1 -> TextStyle(fontSize = 20.sp, fontWeight = FontWeight.SemiBold) 2 -> TextStyle(fontSize = 18.sp, fontWeight = FontWeight.SemiBold) else -> TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Medium) } } BasicRichText( style = RichTextStyle(headingStyle = compactHeadingStyle) ) { Heading(0, "Compact Heading") } ``` -------------------------------- ### InfoPanel Usage Example (Composable Variant) Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/InfoPanel.md Shows how to use the InfoPanel composable with a composable lambda to include other composables like Text within the panel. ```kotlin BasicRichText { InfoPanel(InfoPanelType.Warning) { Text("Warning: This action cannot be undone") } } ``` -------------------------------- ### Heading (Text Variant) Usage Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Heading.md Demonstrates how to use the text-based Heading component with different levels in a BasicRichText context. ```kotlin BasicRichText { Heading(0, "Main Title") Heading(1, "Subtitle") Heading(2, "Sub-subtitle") } ``` -------------------------------- ### FormattedList (Varargs Variant) Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/FormattedList.md Demonstrates how to use the varargs variant of FormattedList to render an unordered list with static text items. ```kotlin ```kotlin BasicRichText { FormattedList(ListType.Unordered, { Text("First item") }, { Text("Second item") }, { Text("Third item") } ) } ``` ``` -------------------------------- ### Complete RichTextStyle Configuration Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextStyle.md Demonstrates a comprehensive configuration of RichTextStyle, setting custom styles for paragraph spacing, headings, lists, blockquotes, code blocks, tables, info panels, and inline text elements. Use this to define a fully customized rich text appearance. ```kotlin import androidx.compose.foundation.layout.PaddingValues import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp // Assuming RichTextStyle and its related style types are defined // import com.yourpackage.RichTextStyle // import com.yourpackage.HeadingStyle // import com.yourpackage.ListStyle // import com.yourpackage.BlockQuoteGutter // import com.yourpackage.CodeBlockStyle // import com.yourpackage.TableStyle // import com.yourpackage.InfoPanelStyle // import com.yourpackage.RichTextStringStyle // import com.yourpackage.BasicRichText val myStyle = RichTextStyle( paragraphSpacing = 16.sp, headingStyle = { level, textStyle -> when (level) { 0 -> TextStyle( fontSize = 32.sp, fontWeight = FontWeight.ExtraBold, color = Color.Blue ) 1 -> TextStyle( fontSize = 24.sp, fontWeight = FontWeight.Bold ) else -> textStyle } }, listStyle = ListStyle( markerIndent = 12.sp, contentsIndent = 8.sp, itemSpacing = 6.sp ), blockQuoteGutter = BlockQuoteGutter.BarGutter( barWidth = 4.sp, color = { Color.Gray } ), codeBlockStyle = CodeBlockStyle( textStyle = TextStyle(fontFamily = FontFamily.Monospace), padding = 12.sp, wordWrap = true ), tableStyle = TableStyle( cellPadding = 10.sp, borderColor = Color.Black, borderStrokeWidth = 1.5f ), infoPanelStyle = InfoPanelStyle( contentPadding = PaddingValues(16.dp) ), stringStyle = RichTextStringStyle( boldStyle = SpanStyle(fontWeight = FontWeight.Bold), codeStyle = SpanStyle( fontFamily = FontFamily.Monospace, background = Color.LightGray ) ) ) // BasicRichText(style = myStyle) { // // All content uses myStyle // } ``` -------------------------------- ### Custom Image Rendering with AstBlockNodeComposer Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md Example of implementing AstBlockNodeComposer to provide custom rendering for image nodes. ```kotlin val customComposer = object : AstBlockNodeComposer { override fun predicate(type: AstBlockNodeType): Boolean { return type is AstImage } @Composable override fun RichTextScope.Compose( astNode: AstNode, visitChildren: @Composable (AstNode) -> Unit ) { val imageNode = astNode as AstImage CustomImageComponent(url = imageNode.destination) } } BasicRichText { Markdown( content = markdownText, astBlockNodeComposer = customComposer ) } ``` -------------------------------- ### Custom Table Example with Alternating Row Style Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Applies custom table styling with specific cell padding and border properties for a unique look. This example demonstrates how to integrate custom table styles into BasicRichText. ```kotlin val alternatingRowStyle = RichTextStyle( tableStyle = TableStyle( cellPadding = 10.sp, borderColor = Color.LightGray, borderStrokeWidth = 1f ) ) BasicRichText(style = alternatingRowStyle) { Table( headerRow = { cell { Text("Column 1") } cell { Text("Column 2") } }, bodyRows = { row { /* ... */ } } ) } ``` -------------------------------- ### Custom ListStyle Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/FormattedList.md Demonstrates creating a custom ListStyle with specific marker and content indents, item spacing, and custom unordered markers. This custom style is then applied to a RichTextStyle. ```kotlin val customStyle = ListStyle( markerIndent = 12.sp, contentsIndent = 8.sp, itemSpacing = 8.sp, unorderedMarkers = { textUnorderedMarkers("→", "→", "→") } ) BasicRichText( style = RichTextStyle(listStyle = customStyle) ) { FormattedList(ListType.Unordered, { Text("Item 1") }, { Text("Item 2") } ) } ``` -------------------------------- ### Custom Ordered Markers Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/FormattedList.md Example of creating custom ordered markers using textOrderedMarkers. It defines distinct formatting for three nesting levels: numbers, lowercase letters, and parenthesized numbers. ```kotlin val markers = textOrderedMarkers( { "${it + 1}." }, // Level 0: 1., 2., 3., ... { ('a'..'z')[it % 26].toString() + "." }, // Level 1: a., b., ... { "${it + 1})" } // Level 2: 1), 2), ... ) ``` -------------------------------- ### Basic Markdown Rendering Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Render basic markdown content using the Markdown composable. This example demonstrates rendering headings, text formatting, lists, code blocks, and links. ```kotlin BasicRichText { Markdown(""" # Markdown Title This is **bold** and *italic*. ## Subheading - List item 1 - List item 2 ```kotlin code block ``` [Link](https://example.com) ") } ``` -------------------------------- ### BasicRichText with Markdown Rendering Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/README.md Shows how to render markdown content within BasicRichText. This example includes basic markdown elements like headings, bold, italic, code, lists, and blockquotes. It also demonstrates setting paragraph spacing. ```kotlin @Composable fun DocumentViewer() { BasicRichText( style = RichTextStyle(paragraphSpacing = 12.sp) ) { Markdown(""" # Document Title This is **bold** and *italic* with `code`. - List item 1 - List item 2 > A block quote """) } } ``` -------------------------------- ### Custom Table Rendering with AstBlockNodeComposer Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md Example of implementing AstBlockNodeComposer to provide custom rendering for table nodes, applying a background color. ```kotlin val tableComposer = object : AstBlockNodeComposer { override fun predicate(type: AstBlockNodeType): Boolean { return type is AstTableRoot } @Composable override fun RichTextScope.Compose( astNode: AstNode, visitChildren: @Composable (AstNode) -> Unit ) { // Render table with custom styling Box(modifier = Modifier.background(Color.LightGray)) { visitChildren(astNode) } } } ``` -------------------------------- ### Responsive RichText Layout Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Create a responsive layout for RichText content by adjusting styles like paragraph spacing and code block padding based on screen width. This example uses LocalConfiguration to detect compact screen sizes. ```kotlin @Composable fun ResponsiveDocument() { val isCompact = LocalConfiguration.current.screenWidthDp < 600 BasicRichText( style = RichTextStyle( paragraphSpacing = if (isCompact) 6.sp else 12.sp, codeBlockStyle = CodeBlockStyle( padding = if (isCompact) 8.sp else 16.sp ) ) ) { Markdown(content) } } ``` -------------------------------- ### Custom Image Rendering with BasicMarkdown Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Implement custom image rendering by creating an AstBlockNodeComposer that intercepts AstImage nodes. This example shows how to use AsyncImage for displaying images within the markdown content. ```kotlin val imageComposer = object : AstBlockNodeComposer { override fun predicate(type: AstBlockNodeType) = type is AstImage @Composable override fun RichTextScope.Compose(astNode: AstNode, visitChildren: @Composable (AstNode) -> Unit) { val image = astNode as AstImage AsyncImage(url = image.destination) } } BasicRichText { BasicMarkdown(astRoot, astBlockNodeComposer = imageComposer) } ``` -------------------------------- ### Creating RichTextString with Superscript and Subscript Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextString.md Shows an example of using the RichTextString builder to create text with superscript (e.g., exponents) and subscript (e.g., chemical formulas). ```kotlin richTextString { append("E=mc") withFormat(RichTextString.Format.Superscript) { append("2") } append(" and H") withFormat(RichTextString.Format.Subscript) { append("2") } append("O") } ``` -------------------------------- ### Table Example with Custom Styling Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Table.md Renders a table with custom styling applied via RichTextStyle, including bold white header text, cell padding, and dark gray borders. ```kotlin BasicRichText( style = RichTextStyle( tableStyle = TableStyle( headerTextStyle = TextStyle( fontWeight = FontWeight.Bold, fontSize = 14.sp, color = Color.White ), cellPadding = 10.sp, borderColor = Color.DarkGray ) ) ) { Table( modifier = Modifier.padding(8.dp), headerRow = { cell { Text("Header 1") } cell { Text("Header 2") } }, bodyRows = { row { cell { Text("Data 1") } cell { Text("Data 2") } } } ) } ``` -------------------------------- ### Markdown with Autolink Enabled Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Example of using CommonMarkdownParseOptions with autolink set to true to make URLs clickable within a BasicRichText component. ```kotlin BasicRichText { Markdown( content = "Visit https://example.com for more", markdownParseOptions = CommonMarkdownParseOptions( autolink = true // URL becomes clickable link ) ) } ``` -------------------------------- ### Heading (Composable Variant) Usage Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Heading.md Shows how to use the composable Heading component with rich text elements within its children lambda. ```kotlin BasicRichText { Heading(0) { Text("Title with ") // Can compose rich text elements } } ``` -------------------------------- ### FormattedList (Generic Variant) Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/FormattedList.md Shows how to use the generic variant of FormattedList to render an ordered list from a string collection, with custom item rendering. ```kotlin ```kotlin val items = listOf("Apple", "Banana", "Cherry") BasicRichText { FormattedList( listType = ListType.Ordered, items = items, startIndex = 1, drawItem = { item -> Text(item) } ) } ``` ``` -------------------------------- ### Embedding InlineContent Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextString.md Demonstrates how to embed composable content, such as an Image, inline with text using `appendInlineContent`. The `initialSize` lambda is used to provide the size of the embedded content. ```kotlin richTextString { append("Image: ") appendInlineContent( InlineContent( initialSize = { Density -> IntSize(32.dp.roundToPx(), 32.dp.roundToPx()) } // Example size ) { Image( painter = painterResource("image.png"), contentDescription = "Inline image" ) } ) append(" end of text") } ``` -------------------------------- ### Example: Apply Increased Paragraph Spacing Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Demonstrates how to apply increased paragraph spacing for a more airy layout. This affects spacing between headings, lists, block quotes, code blocks, and horizontal rules. ```kotlin BasicRichText( style = RichTextStyle( paragraphSpacing = 16.sp // More spacing for airy layout ) ) { Heading(0, "Title") Text("Content") HorizontalRule() Text("More content") } ``` -------------------------------- ### Add richtext-ui to Kotlin Multiplatform Module Source: https://github.com/halilozercan/compose-richtext/blob/main/docs/index.md This example shows how to add the `richtext-ui` artifact to the `commonMain` source set of a Kotlin Multiplatform project. ```kotlin val commonMain by getting { dependencies { implementation("com.halilibo.compose-richtext:richtext-ui:${richtext_version}") } } ``` -------------------------------- ### Table Styling with TableStyle Example Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Table.md Applies a custom TableStyle to a BasicRichText instance to modify cell padding, border color, and border width. ```kotlin val style = RichTextStyle( tableStyle = TableStyle( cellPadding = 12.sp, borderColor = Color.Gray, borderStrokeWidth = 2f ) ) BasicRichText(style = style) { Table( headerRow = { /* ... */ }, bodyRows = { /* ... */ } ) } ``` -------------------------------- ### Example: Dark Theme CodeBlockStyle Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Creates a dark theme code block style with specific text styles and background color. This can be applied to RichTextStyle for a custom appearance. ```kotlin val darkCodeStyle = CodeBlockStyle( textStyle = TextStyle( fontFamily = FontFamily.Monospace, color = Color(0xA0A0A0), fontSize = 11.sp ), modifier = Modifier.background(Color(0x1a1a1a)), padding = 12.sp ) RichTextStyle(codeBlockStyle = darkCodeStyle) ``` -------------------------------- ### Dynamic List Rendering Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Render a dynamic list of items within BasicRichText using FormattedList. This example shows an unordered list where each item is a Text composable. ```kotlin @Composable fun DynamicList(items: List) { BasicRichText { FormattedList( listType = ListType.Unordered, items = items, drawItem = { item -> Text(item) } ) } } ``` -------------------------------- ### Theme Override with RichTextThemeProvider Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextStyle.md Demonstrates how to override theme colors and styles using RichTextThemeProvider and BasicRichText for dark mode. This example shows conditional styling based on a theme. ```kotlin @Composable fun AppTheme( isDarkMode: Boolean, content: @Composable () -> Unit ) { val style = if (isDarkMode) { RichTextStyle( stringStyle = RichTextStringStyle( boldStyle = SpanStyle(color = Color.White) ) ) } else { RichTextStyle( stringStyle = RichTextStringStyle( boldStyle = SpanStyle(color = Color.Black) ) ) } RichTextThemeProvider( contentColor = if (isDarkMode) Color.White else Color.Black ) { BasicRichText(style = style) { content() } } } ``` -------------------------------- ### Apply All Available Inline Formats Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Demonstrates how to apply all supported inline formatting options within a rich text context. Ensure the necessary RichTextString.Format constants are available. ```kotlin withFormat(RichTextString.Format.Bold) { append("bold") } withFormat(RichTextString.Format.Italic) { append("italic") } withFormat(RichTextString.Format.Underline) { append("underline") } withFormat(RichTextString.Format.Strikethrough) { append("strikethrough") } withFormat(RichTextString.Format.Code) { append("code") } withFormat(RichTextString.Format.Superscript) { append("superscript") } withFormat(RichTextString.Format.Subscript) { append("subscript") } withFormat(RichTextString.Format.Link("url")) { append("link") } ``` -------------------------------- ### RichTextString Format Interface Definition Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextString.md Defines the sealed interface for text formats and the method to get annotation for styling. ```kotlin sealed interface Format { fun getAnnotation( style: RichTextStringStyle, contentColor: Color ): Any? } ``` -------------------------------- ### Import Basic Markdown Rendering Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Import the necessary components for basic markdown rendering in your Compose project. ```kotlin import com.halilibo.richtext.markdown.* ``` -------------------------------- ### Complete InfoPanelStyle Options Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Demonstrates the full range of customization for InfoPanelStyle, including padding, background, and text styles based on panel type. ```kotlin RichTextStyle( infoPanelStyle = InfoPanelStyle( contentPadding = PaddingValues(16.dp), background = { type -> when (type) { InfoPanelType.Primary -> Modifier .border(2.dp, Color.Blue, RoundedCornerShape(8.dp)) .background(Color(0xE3F2FD), RoundedCornerShape(8.dp)) else -> Modifier } }, textStyle = { type -> when (type) { InfoPanelType.Primary -> TextStyle(color = Color.DarkBlue, fontSize = 14.sp) else -> TextStyle() } } ) ) ``` -------------------------------- ### Customize Text Styling Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/START_HERE.md Customize the appearance of rendered rich text by providing a RichTextStyle to the BasicRichText composable. This example adjusts paragraph spacing. ```kotlin import com.halilibo.richtext.ui.RichTextStyle import androidx.compose.ui.unit.sp BasicRichText( style = RichTextStyle( paragraphSpacing = 12.sp ) ) { Markdown(markdownContent) } ``` -------------------------------- ### Complete ListStyle Options Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Configure all available ListStyle options including marker indentation, item spacing, and custom ordered/unordered markers. ```kotlin RichTextStyle( listStyle = ListStyle( markerIndent = 12.sp, // Space before marker contentsIndent = 8.sp, // Space after marker itemSpacing = 6.sp, // Space between items orderedMarkers = { textOrderedMarkers( { "${it + 1}." }, // Level 0 { ('a'..'z')[it % 26] + "." }, // Level 1 { "${it + 1})" } // Level 2 ) }, unorderedMarkers = { textUnorderedMarkers("•", "◦", "▸", "▹") } ) ) ``` -------------------------------- ### Common Usage Pattern for richtext-ui Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Demonstrates a typical implementation of the richtext-ui module, showcasing the usage of BasicRichText, Heading, Text, FormattedList, CodeBlock, BlockQuote, and HorizontalRule composables with custom styling. ```kotlin @Composable fun Document() { BasicRichText( style = RichTextStyle(paragraphSpacing = 12.sp) ) { Heading(0, "Title") Text("Introduction paragraph") Heading(1, "Section") FormattedList(ListType.Unordered, { Text("Item 1") }, { Text("Item 2") } ) CodeBlock("val x = 42") BlockQuote { Text("A quote") } HorizontalRule() } } ``` -------------------------------- ### Material Design Theme Entry Point Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Import statement for the Material Design theme module. ```kotlin import com.halilibo.richtext.ui.material.* ``` -------------------------------- ### BlockQuote Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/BlockQuote.md Renders a block quote with a gutter on the start side. The content is indented and styled according to the current RichTextStyle, with custom layout for positioning the gutter and content. ```APIDOC ## BlockQuote ### Description Renders a block quote with a gutter drawn on the start side. Content is indented and the gutter is styled according to the current RichTextStyle. ### Parameters #### Composable Parameters - **children** (@Composable RichTextScope.() -> Unit) - Lambda receiving RichTextScope to compose quote content. ### Behavior - Draws a BlockQuoteGutter on the start side (left in LTR, right in RTL). - Applies half of paragraph spacing as top/bottom padding to content. - Uses custom Layout to position gutter and content. - Content width is constrained to account for gutter width. - Gutter height matches content height. ### Example ```kotlin BasicRichText { BlockQuote { Text("A famous quote") Text("— Original Author") } } ``` ``` -------------------------------- ### Constructing RichTextString with Various Formats Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextString.md Demonstrates how to use the RichTextString.Builder to append text and apply different formats such as bold, italic, code, and links using the withFormat scope. ```kotlin val richText = richTextString { append("Regular ") withFormat(RichTextString.Format.Bold) { append("bold") } append(" and ") withFormat(RichTextString.Format.Italic) { append("italic") } append(" with ") withFormat(RichTextString.Format.Code) { append("code") } append(" and ") withFormat(RichTextString.Format.Link("https://example.com")) { append("link") } } ``` -------------------------------- ### Theme Switching for RichText Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Switch between dark and light themes by conditionally applying RichTextStyle to BasicRichText. This example changes the color of bold text based on the isDarkMode flag. ```kotlin @Composable fun RichTextContent(isDarkMode: Boolean) { val style = if (isDarkMode) { RichTextStyle( stringStyle = RichTextStringStyle( boldStyle = SpanStyle(color = Color.White) ) ) } else { RichTextStyle( stringStyle = RichTextStringStyle( boldStyle = SpanStyle(color = Color.Black) ) ) } BasicRichText(style = style) { Markdown(content) } } ``` -------------------------------- ### Create Rich Text Strings with DSL Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/README.md Utilize the richTextString builder and withFormat to create formatted text, including bold and links. ```kotlin Text(richTextString { append("Hello ") withFormat(RichTextString.Format.Bold) { append("World") } append(" with ") withFormat(RichTextString.Format.Link("https://example.com")) { append("link") } }) ``` -------------------------------- ### Style Text with Custom Styles Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Text.md Illustrates how to apply custom styling to text, including specific styles for bold and code formats, by providing a RichTextStyle to the BasicRichText component. ```kotlin BasicRichText( style = RichTextStyle( stringStyle = RichTextStringStyle( boldStyle = SpanStyle(color = Color.Red, fontWeight = FontWeight.ExtraBold), codeStyle = SpanStyle( fontFamily = FontFamily.Monospace, background = Color.LightGray ) ) ) ) { Text(richTextString { append("Styled ") withFormat(RichTextString.Format.Bold) { append("text") // Appears red and extra bold } }) } ``` -------------------------------- ### Compose RichText Paragraphs Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Shows how to create simple text paragraphs and paragraphs with rich text formatting like bold. ```kotlin // Plain text Text("Simple paragraph") // Formatted text Text(richTextString { append("Formatted ") withFormat(RichTextString.Format.Bold) { append("text") } }) ``` -------------------------------- ### Scoped Styling with WithStyle Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Apply specific RichTextStyle configurations to a subtree of the RichText composable without affecting other elements. This example demonstrates changing paragraph spacing and heading styles. ```kotlin BasicRichText( style = RichTextStyle(paragraphSpacing = 8.sp) ) { Text("Normal spacing") WithStyle( RichTextStyle( paragraphSpacing = 16.sp, headingStyle = { level, _ -> TextStyle(color = Color.Red) } ) ) { Heading(0, "Large spacing, red heading") Text("Large spacing") } Text("Back to normal spacing") } ``` -------------------------------- ### Compose RichText Headings Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Demonstrates creating different levels of headings and headings with formatted text children. ```kotlin // With text Heading(0, "Title") Heading(1, "Subtitle") Heading(2, "Sub-subtitle") // With children Heading(0) { Text("Title with ") Text("formatted parts") } ``` -------------------------------- ### Material Design 3 Theme Entry Point Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Import statement for the Material Design 3 theme module. ```kotlin import com.halilibo.richtext.ui.material3.* ``` -------------------------------- ### Customizing RichText Appearance Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/RichTextString.md Example of creating a custom RichTextStringStyle to override default styles for bold text, code blocks, and links. This custom style is then applied to a BasicRichText composable. ```kotlin import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.unit.sp import com.halilozercan.compose_richtext.material3.Text import com.halilozercan.compose_richtext.material3.TextLinkStyles import com.halilozercan.compose_richtext.material3.RichTextStyle import com.halilozercan.compose_richtext.material3.RichTextString import com.halilozercan.compose_richtext.material3.BasicRichText val customStringStyle = RichTextStringStyle( boldStyle = SpanStyle( fontWeight = FontWeight.ExtraBold, color = Color.Red ), codeStyle = SpanStyle( fontFamily = FontFamily.Monospace, background = Color.LightGray, fontSize = 12.sp ), linkStyle = TextLinkStyles( style = SpanStyle( color = Color.Blue, textDecoration = TextDecoration.Underline ) ) ) BasicRichText( style = RichTextStyle(stringStyle = customStringStyle) ) { Text(richTextString { append("Visit ") withFormat(RichTextString.Format.Link("https://example.com")) { append("our site") } }) } ``` -------------------------------- ### Markdown Composable with Autolink Enabled Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md Demonstrates using the `Markdown` composable with the default `autolink` option enabled, showing how plain text URLs are automatically converted to clickable links. ```kotlin // With autolink enabled (default) BasicRichText { Markdown("Check out https://example.com for more info") // URL is automatically converted to clickable link } ``` -------------------------------- ### Entering RichTextScope with BasicRichText Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/START_HERE.md Demonstrates how to enter the RichTextScope using BasicRichText and utilize RichText composables like Heading and Text within it. ```kotlin BasicRichText { // <- Inside RichTextScope Heading(0, "Title") // <- Can use RichText composables Text("Content") // <- Can use RichText composables } ``` -------------------------------- ### Compose RichText Code Blocks Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Demonstrates how to render code blocks, including options for word wrapping. ```kotlin // Text CodeBlock("val x = 42") // Composed CodeBlock { Text("fun main() {") Text(" println(\"Hello\")") Text("}") } // No wrapping CodeBlock(wordWrap = false) { Text("long line...") } ``` -------------------------------- ### Render Plain Text String Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Text.md Use this variant to display simple, unformatted text content. It takes a single String parameter. ```kotlin BasicRichText { Text("Hello, World!") } ``` -------------------------------- ### Import CommonMark Parser Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Import the necessary CommonMark parser integration for Compose Richtext. ```kotlin import com.halilibo.richtext.commonmark.* ``` -------------------------------- ### Common InfoPanel Usage Pattern Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/InfoPanel.md Illustrates a common pattern for using InfoPanel with composable content, including headings and text, for various alert types. ```kotlin BasicRichText { InfoPanel(InfoPanelType.Primary) { Heading(2, "Note") Text("Additional information goes here") } InfoPanel(InfoPanelType.Danger) { Text("Critical alert text") } InfoPanel(InfoPanelType.Success) { Heading(3, "Complete") Text("Task has been completed successfully") } } ``` -------------------------------- ### Configure Basic RichText Styling Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Set up a BasicRichText composable with a custom paragraph spacing style. This is useful for controlling vertical rhythm between paragraphs. ```kotlin BasicRichText( style = RichTextStyle( paragraphSpacing = 12.sp ) ) { // Content } ``` -------------------------------- ### Basic BlockQuote Usage Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/BlockQuote.md Demonstrates how to use the BlockQuote composable to render a simple block quote with text content. This is the most basic way to display quoted text. ```kotlin ```kotlin BasicRichText { BlockQuote { Text("A famous quote") Text("— Original Author") } } ``` ``` -------------------------------- ### Import richtext-ui Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/MODULES.md Import the core richtext-ui module to access its functionalities. ```kotlin import com.halilibo.richtext.ui.* ``` -------------------------------- ### Compose RichText Import Essentials Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Lists the essential imports required for using various components of the compose-richtext library, including base UI elements, string utilities, and Markdown parsing. ```kotlin // Base UI import com.halilibo.richtext.ui.BasicRichText import com.halilibo.richtext.ui.RichTextScope import com.halilibo.richtext.ui.RichTextStyle import com.halilibo.richtext.ui.Text import com.halilibo.richtext.ui.Heading import com.halilibo.richtext.ui.BlockQuote import com.halilibo.richtext.ui.CodeBlock import com.halilibo.richtext.ui.FormattedList import com.halilibo.richtext.ui.Table import com.halilibo.richtext.ui.HorizontalRule import com.halilibo.richtext.ui.InfoPanel // Strings import com.halilibo.richtext.ui.string.richTextString import com.halilibo.richtext.ui.string.RichTextString // Markdown import com.halilibo.richtext.commonmark.Markdown import com.halilibo.richtext.commonmark.CommonMarkdownParseOptions ``` -------------------------------- ### Compose RichText Lists Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Illustrates the creation of unordered, ordered, and nested lists, including lists generated from data. ```kotlin // Unordered FormattedList(ListType.Unordered, { Text("Item 1") }, { Text("Item 2") }, { Text("Item 3") } ) // Ordered FormattedList(ListType.Ordered, { Text("First") }, { Text("Second") } ) // From data val items = listOf("A", "B", "C") FormattedList( listType = ListType.Unordered, items = items, drawItem = { item -> Text(item) } ) // Nested FormattedList(ListType.Unordered, { Text("Item 1") FormattedList(ListType.Unordered, { Text("Nested 1.1") }, { Text("Nested 1.2") } ) }, { Text("Item 2") } ) ``` -------------------------------- ### Custom Painter-based List Markers Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Utilize painter resources to create image-based markers for unordered lists. ```kotlin // Painter-based markers (images) val painterMarkers = painterUnorderedMarkers( painterResource("bullet1.png"), painterResource("bullet2.png"), painterResource("bullet3.png") ) ``` -------------------------------- ### ListStyle Configuration Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/FormattedList.md Configures the appearance of lists, including indentation, spacing, and custom markers for ordered and unordered lists. ```APIDOC ## ListStyle Configuration for list appearance. ```kotlin @Immutable data class ListStyle( val markerIndent: TextUnit? = null, val contentsIndent: TextUnit? = null, val itemSpacing: TextUnit? = null, val orderedMarkers: (RichTextScope.() -> OrderedMarkers)? = null, val unorderedMarkers: (RichTextScope.() -> UnorderedMarkers)? = null ) ``` ### Parameters | Parameter | Type | Default | |---|---|---| | markerIndent | TextUnit? | 8.sp | | contentsIndent | TextUnit? | 4.sp | | itemSpacing | TextUnit? | 4.sp | | orderedMarkers | (RichTextScope.() -> OrderedMarkers)? | 1., a), i) style | | unorderedMarkers | (RichTextScope.() -> UnorderedMarkers)? | •, ◦, ▸, ▹ | ### Example ```kotlin val customStyle = ListStyle( markerIndent = 12.sp, contentsIndent = 8.sp, itemSpacing = 8.sp, unorderedMarkers = { textUnorderedMarkers("→", "→", "→") } ) BasicRichText( style = RichTextStyle(listStyle = customStyle) ) { FormattedList(ListType.Unordered, { Text("Item 1") }, { Text("Item 2") } ) } ``` ``` -------------------------------- ### Compose RichText Tables Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Illustrates the creation of tables with header rows and body rows, including cells with text content. ```kotlin Table( headerRow = { cell { Text("Name") } cell { Text("Age") } }, bodyRows = { row { cell { Text("Alice") } cell { Text("30") } } row { cell { Text("Bob") } cell { Text("28") } } } ) ``` -------------------------------- ### Configure CommonMarkdownParseOptions Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/types.md Provides configuration options for parsing Markdown. Use this to control features like autolinking plain URLs. ```kotlin class CommonMarkdownParseOptions( val autolink: Boolean ) { fun copy(autolink: Boolean = this.autolink): CommonMarkdownParseOptions companion object { val Default: CommonMarkdownParseOptions = CommonMarkdownParseOptions(autolink = true) } } ``` -------------------------------- ### Render Basic Markdown Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Use BasicRichText and Markdown to render simple Markdown content with headings, paragraphs, bold, and italic text. Ensure BasicRichText is used as a wrapper. ```kotlin BasicRichText { Markdown("# Title\n\nParagraph with **bold** and *italic*.") } ``` -------------------------------- ### ListStyle Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/types.md Configuration data class for customizing the appearance and layout of lists. ```APIDOC ## Data Class: ListStyle ### Description Configuration for list appearance. ### Fields - **markerIndent** (TextUnit?) - Optional - Space before list marker - **contentsIndent** (TextUnit?) - Optional - Space after marker - **itemSpacing** (TextUnit?) - Optional - Space between items - **orderedMarkers** (Function?) - Optional - Numbered marker factory - **unorderedMarkers** (Function?) - Optional - Bullet marker factory ``` -------------------------------- ### Render Markdown with Options Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/QUICK_REFERENCE.md Render Markdown content with specific parsing options, such as enabling autolinks. The markdownText variable should contain the Markdown content. ```kotlin Markdown( content = markdownText, markdownParseOptions = CommonMarkdownParseOptions(autolink = true) ) ``` -------------------------------- ### InfoPanelStyle Data Class Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/types.md Configuration for styling info panels. It allows customization of content padding, background, and text style based on the panel type. ```kotlin @Stable data class InfoPanelStyle( val contentPadding: PaddingValues? = null, val background: @Composable ((InfoPanelType) -> Modifier)? = null, val textStyle: @Composable ((InfoPanelType) -> TextStyle)? = null ) ``` -------------------------------- ### Markdown Composable Signature Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/api-reference/Markdown.md The primary entry point for rendering Markdown content. Parses markdown text and renders it as rich text composables. ```kotlin ```kotlin @Composable fun RichTextScope.Markdown( content: String, markdownParseOptions: CommonMarkdownParseOptions = CommonMarkdownParseOptions.Default, astBlockNodeComposer: AstBlockNodeComposer? = null ) ``` ``` -------------------------------- ### Configure Heading Style by Level Source: https://github.com/halilozercan/compose-richtext/blob/main/_autodocs/configuration.md Customize the appearance of headings based on their level. The lambda receives the heading level and the current text style, returning the resolved text style. ```kotlin RichTextStyle( headingStyle = { level, textStyle -> when (level) { 0 -> TextStyle(fontSize = 32.sp, fontWeight = FontWeight.Bold, color = Color.Blue) 1 -> TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold) else -> textStyle.copy(fontWeight = FontWeight.SemiBold) } } ) ```