@@ -4,56 +4,83 @@ import androidx.compose.foundation.LocalScrollbarStyle
44import androidx.compose.foundation.background
55import androidx.compose.foundation.defaultScrollbarStyle
66import androidx.compose.foundation.layout.Arrangement
7+ import androidx.compose.foundation.layout.Column
78import androidx.compose.foundation.layout.Row
89import androidx.compose.foundation.layout.fillMaxHeight
910import androidx.compose.foundation.layout.fillMaxSize
11+ import androidx.compose.foundation.layout.fillMaxWidth
12+ import androidx.compose.foundation.layout.offset
1013import androidx.compose.foundation.layout.padding
1114import androidx.compose.foundation.rememberScrollState
1215import androidx.compose.foundation.text.BasicTextField
1316import androidx.compose.foundation.text.selection.SelectionContainer
1417import androidx.compose.foundation.verticalScroll
18+ import androidx.compose.material.Slider
1519import androidx.compose.material.Surface
20+ import androidx.compose.material.Text
21+ import androidx.compose.runtime.Composable
1622import androidx.compose.runtime.CompositionLocalProvider
1723import androidx.compose.runtime.getValue
1824import androidx.compose.runtime.mutableStateOf
1925import androidx.compose.runtime.remember
2026import androidx.compose.runtime.setValue
2127import androidx.compose.ui.Modifier
2228import androidx.compose.ui.graphics.Color
29+ import androidx.compose.ui.unit.IntOffset
2330import androidx.compose.ui.unit.dp
31+ import androidx.compose.ui.unit.sp
2432import androidx.compose.ui.window.singleWindowApplication
2533import com.halilibo.richtext.markdown.Markdown
2634import com.halilibo.richtext.ui.CodeBlockStyle
35+ import com.halilibo.richtext.ui.RichText
2736import com.halilibo.richtext.ui.RichTextStyle
37+ import com.halilibo.richtext.ui.Table
2838import com.halilibo.richtext.ui.material.MaterialRichText
39+ import com.halilibo.richtext.ui.resolveDefaults
2940
3041fun main (): Unit = singleWindowApplication(
3142 title = " RichText KMP"
3243) {
44+ var richTextStyle by remember {
45+ mutableStateOf(
46+ RichTextStyle (
47+ codeBlockStyle = CodeBlockStyle (wordWrap = true )
48+ ).resolveDefaults()
49+ )
50+ }
51+
3352 Surface {
34- CompositionLocalProvider (LocalScrollbarStyle provides defaultScrollbarStyle().copy(
35- hoverColor = Color .DarkGray ,
36- unhoverColor = Color .Gray
37- )) {
53+ CompositionLocalProvider (
54+ LocalScrollbarStyle provides defaultScrollbarStyle().copy(
55+ hoverColor = Color .DarkGray ,
56+ unhoverColor = Color .Gray
57+ )
58+ ) {
3859 SelectionContainer {
60+ var text by remember { mutableStateOf(sampleMarkdown) }
3961 Row (
40- modifier = Modifier .padding(32 .dp).fillMaxSize(),
62+ modifier = Modifier
63+ .padding(32 .dp)
64+ .fillMaxSize(),
4165 horizontalArrangement = Arrangement .spacedBy(32 .dp)
4266 ) {
43- var text by remember { mutableStateOf(sampleMarkdown) }
44- BasicTextField (
45- value = text,
46- onValueChange = { text = it },
47- maxLines = Int .MAX_VALUE ,
48- modifier = Modifier .weight(1f )
49- .fillMaxHeight()
50- .background(Color .LightGray )
51- .padding(8 .dp)
52- )
67+ Column (modifier = Modifier .weight(1f )) {
68+ RichTextStyleConfig (richTextStyle = richTextStyle, onChanged = { richTextStyle = it })
69+ BasicTextField (
70+ value = text,
71+ onValueChange = { text = it },
72+ maxLines = Int .MAX_VALUE ,
73+ modifier = Modifier
74+ .fillMaxHeight()
75+ .background(Color .LightGray )
76+ .padding(8 .dp)
77+ )
78+ }
5379 MaterialRichText (
54- modifier = Modifier .weight(1f )
80+ modifier = Modifier
81+ .weight(1f )
5582 .verticalScroll(rememberScrollState()),
56- style = RichTextStyle (codeBlockStyle = CodeBlockStyle (wordWrap = true ))
83+ style = richTextStyle
5784 ) {
5885 Markdown (content = text)
5986 }
@@ -63,6 +90,77 @@ fun main(): Unit = singleWindowApplication(
6390 }
6491}
6592
93+ @Composable
94+ fun RichTextStyleConfig (
95+ richTextStyle : RichTextStyle ,
96+ onChanged : (RichTextStyle ) -> Unit
97+ ) {
98+ Column (modifier = Modifier .fillMaxWidth()) {
99+ Row {
100+ Column (Modifier .weight(1f )) {
101+ Text (" Paragraph spacing:\n ${richTextStyle.paragraphSpacing} " )
102+ Slider (
103+ value = richTextStyle.paragraphSpacing!! .value,
104+ valueRange = 0f .. 20f ,
105+ onValueChange = {
106+ onChanged(richTextStyle.copy(paragraphSpacing = it.sp))
107+ }
108+ )
109+ }
110+ Column (Modifier .weight(1f )) {
111+ Text (" List item spacing:\n ${richTextStyle.listStyle!! .itemSpacing} " )
112+ Slider (
113+ value = richTextStyle.listStyle!! .itemSpacing!! .value,
114+ valueRange = 0f .. 20f ,
115+ onValueChange = {
116+ onChanged(
117+ richTextStyle.copy(
118+ listStyle = richTextStyle.listStyle!! .copy(
119+ itemSpacing = it.sp
120+ )
121+ )
122+ )
123+ }
124+ )
125+ }
126+ }
127+ Row {
128+ Column (Modifier .weight(1f )) {
129+ Text (" Table cell padding:\n ${richTextStyle.tableStyle!! .cellPadding} " )
130+ Slider (
131+ value = richTextStyle.tableStyle!! .cellPadding!! .value,
132+ valueRange = 0f .. 20f ,
133+ onValueChange = {
134+ onChanged(
135+ richTextStyle.copy(
136+ tableStyle = richTextStyle.tableStyle!! .copy(
137+ cellPadding = it.sp
138+ )
139+ )
140+ )
141+ }
142+ )
143+ }
144+ Column (Modifier .weight(1f )) {
145+ Text (" Table border width padding:\n ${richTextStyle.tableStyle!! .borderStrokeWidth!! } " )
146+ Slider (
147+ value = richTextStyle.tableStyle!! .borderStrokeWidth!! ,
148+ valueRange = 0f .. 20f ,
149+ onValueChange = {
150+ onChanged(
151+ richTextStyle.copy(
152+ tableStyle = richTextStyle.tableStyle!! .copy(
153+ borderStrokeWidth = it
154+ )
155+ )
156+ )
157+ }
158+ )
159+ }
160+ }
161+ }
162+ }
163+
66164private val sampleMarkdown = """
67165 # Demo
68166 Based on [this cheatsheet][cheatsheet]
0 commit comments