From 11587da272308ff13261e7d6b5060041be696b05 Mon Sep 17 00:00:00 2001 From: Jeziel Lago Date: Fri, 5 Jan 2024 14:31:26 -0300 Subject: [PATCH] Create samples by type of markdown rendering --- .../compose/markdowntext/MarkdownRender.kt | 2 +- .../compose/markdowntext/MarkdownText.kt | 23 +- .../compose/markdown/MainActivity.kt | 274 ++++++++++++++++-- sample/src/main/res/raw/markdown | 253 ---------------- 4 files changed, 260 insertions(+), 292 deletions(-) delete mode 100644 sample/src/main/res/raw/markdown diff --git a/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownRender.kt b/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownRender.kt index 02fd999..b22bc2f 100644 --- a/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownRender.kt +++ b/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownRender.kt @@ -20,7 +20,7 @@ internal object MarkdownRender { linkifyMask: Int, onLinkClicked: ((String) -> Unit)? = null ): Markwon { - val coilImageLoader = imageLoader ?:createCoilImageLoader(context) + val coilImageLoader = imageLoader ?: createCoilImageLoader(context) return Markwon.builder(context) .usePlugin(HtmlPlugin.create()) .usePlugin(CoilImagesPlugin.create(context, coilImageLoader)) diff --git a/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownText.kt b/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownText.kt index 8a2c4f5..bb06fea 100644 --- a/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownText.kt +++ b/markdowntext/src/main/java/dev/jeziellago/compose/markdowntext/MarkdownText.kt @@ -118,16 +118,6 @@ fun MarkdownText( setMaxLines(maxLines) setLinkTextColor(linkTextColor.toArgb()) - applyTextColor(style.color.takeOrElse { defaultColor }.toArgb()) - applyLineHeight(style) - applyFontSize(style) - applyLineSpacing(style) - applyTextDecoration(style) - - style.textAlign?.let { applyTextAlign(it) } - style.fontStyle?.let { applyFontStyle(it) } - style.fontWeight?.let { applyFontWeight(it) } - setTextIsSelectable(isTextSelectable) movementMethod = LinkMovementMethod.getInstance() @@ -147,6 +137,19 @@ fun MarkdownText( } }, update = { textView -> + with(textView) { + applyTextColor(style.color.takeOrElse { defaultColor }.toArgb()) + applyFontSize(style) + applyLineHeight(style) + applyLineSpacing(style) + applyTextDecoration(style) + + with(style) { + textAlign?.let { applyTextAlign(it) } + fontStyle?.let { applyFontStyle(it) } + fontWeight?.let { applyFontWeight(it) } + } + } markdownRender.setMarkdown(textView, markdown) if (disableLinkMovementMethod) { textView.movementMethod = null diff --git a/sample/src/main/java/dev/jeziellago/compose/markdown/MainActivity.kt b/sample/src/main/java/dev/jeziellago/compose/markdown/MainActivity.kt index d9932f4..2ce40bf 100644 --- a/sample/src/main/java/dev/jeziellago/compose/markdown/MainActivity.kt +++ b/sample/src/main/java/dev/jeziellago/compose/markdown/MainActivity.kt @@ -8,51 +8,269 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.material.Card import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import dev.jeziellago.compose.markdowntext.MarkdownText class MainActivity : AppCompatActivity() { - private var rawMarkdown = "" - override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - rawMarkdown = String(resources.openRawResource(R.raw.markdown).readBytes()) + - "\n# HTML SECTION ${String(resources.openRawResource(R.raw.html).readBytes())}" - setContent { - SampleMarkdown() - } + setContent { SampleMarkdown() } } @Composable fun SampleMarkdown() { - Card( - modifier = Modifier.fillMaxWidth(), - elevation = 10.dp + LazyColumn( + modifier = Modifier + .padding(8.dp) + .fillMaxWidth() + .clickable { + Toast + .makeText(this@MainActivity, "On text click", Toast.LENGTH_SHORT) + .show() + }, ) { - LazyColumn( - modifier = Modifier - .padding(8.dp) - .clickable { - Toast - .makeText(this@MainActivity, "On text click", Toast.LENGTH_SHORT) - .show() - }, - ) { - item { - MarkdownText( - markdown = rawMarkdown, - viewId = - R.id.markdownTextId, + item { + MarkdownText( + markdown = """ + ## Justify + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + """.trimIndent(), + style = TextStyle( textAlign = TextAlign.Justify, - disableLinkMovementMethod = false ) - } + ) + } + item { + MarkdownText( + markdown = """ + ## Color + + This text should appears in Blue color. + + """.trimIndent(), + style = TextStyle( + color = Color.Blue + ) + ) + } + item { + MarkdownText( + markdown = """ + --- + __Advertisement :)__ + + - __[nodeca](https://nodeca.github.io/pica/demo/)__ - high quality and fast image + resize in browser. + - __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly + i18n with plurals support and easy syntax. + + You will like those projects! + + --- + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + # h1 Heading 8-) + ## h2 Heading + ### h3 Heading + #### h4 Heading + ##### h5 Heading + ###### h6 Heading + + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + ## Horizontal Rules + + ___ + + --- + + *** + + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + ## Emphasis + + **This is bold text** + + __This is bold text__ + + *This is italic text* + + _This is italic text_ + + ~~Strikethrough~~ + + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + ## Links + + [link text](http://dev.nodeca.com) + + [link with title](http://nodeca.github.io/pica/demo/ "title text!") + + Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + """.trimIndent(), + ) + } + item { + MarkdownText( + modifier = Modifier.fillMaxWidth(), + markdown = """ + ## Images + + ![Minion](https://octodex.github.com/images/minion.png) + ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + + """.trimIndent(), + ) + } + item { + MarkdownText( + modifier = Modifier.fillMaxWidth(), + markdown = """ + Content + with + line + break + + """.trimIndent(), + ) + } + item { + MarkdownText( + modifier = Modifier.fillMaxWidth(), + markdown = """ + ## Tables + + | Option | Description | + | ------ | ----------- | + | data | path to data files to supply the data that will be passed into templates. | + | engine | engine to be used for processing templates. Handlebars is the default. | + | ext | extension to be used for dest files. | + + Right aligned columns + + | Option | Description | + | ------:| -----------:| + | data | path to data files to supply the data that will be passed into templates. | + | engine | engine to be used for processing templates. Handlebars is the default. | + | ext | extension to be used for dest files. | + + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + ## Lists + + Unordered + + + Create a list by starting a line with `+`, `-`, or `*` + + Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit + + Very easy! + + Ordered + + 1. Lorem ipsum dolor sit amet + 2. Consectetur adipiscing elit + 3. Integer molestie lorem at massa + + + 1. You can use sequential numbers... + 1. ...or keep all the numbers as `1.` + + Start numbering with offset: + + 57. foo + 1. bar + + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + ## Blockquotes + + > Blockquotes can also be nested... + >> ...by using additional greater-than signs right next to each other... + > > > ...or with spaces between arrows. + + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = """ + ## Code + + Inline `code` + + Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + + Block code "fences" + + ``` + Sample text here... + ``` + + more code here.. + + ``` js + var foo = function (bar) { + return bar++; + }; + + console.log(foo(5)); + ``` + """.trimIndent(), + ) + } + item { + MarkdownText( + markdown = "\n# HTML SECTION ${ + String( + resources.openRawResource(R.raw.html).readBytes() + ) + }", + ) } } } -} \ No newline at end of file +} diff --git a/sample/src/main/res/raw/markdown b/sample/src/main/res/raw/markdown deleted file mode 100644 index 9b2f7cd..0000000 --- a/sample/src/main/res/raw/markdown +++ /dev/null @@ -1,253 +0,0 @@ -## Justified text - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - ---- -__Advertisement :)__ - -- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image - resize in browser. -- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly - i18n with plurals support and easy syntax. - -You will like those projects! - ---- - -# h1 Heading 8-) -## h2 Heading -### h3 Heading -#### h4 Heading -##### h5 Heading -###### h6 Heading - - -## Horizontal Rules - -___ - ---- - -*** - - -## Typographic replacements - -Enable typographer option to see result. - -(c) (C) (r) (R) (tm) (TM) (p) (P) +- - -test.. test... test..... test?..... test!.... - -!!!!!! ???? ,, -- --- - -"Smartypants, double quotes" and 'single quotes' - - -## Emphasis - -**This is bold text** - -__This is bold text__ - -*This is italic text* - -_This is italic text_ - -~~Strikethrough~~ - - -## Blockquotes - - -> Blockquotes can also be nested... ->> ...by using additional greater-than signs right next to each other... -> > > ...or with spaces between arrows. - - -## Lists - -Unordered - -+ Create a list by starting a line with `+`, `-`, or `*` -+ Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - * Ac tristique libero volutpat at - + Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -+ Very easy! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - - -1. You can use sequential numbers... -1. ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -``` js -var foo = function (bar) { - return bar++; -}; - -console.log(foo(5)); -``` - -## Tables - -| Option | Description | -| ------ | ----------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -Right aligned columns - -| Option | Description | -| ------:| -----------:| -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - - -## Links - -[link text](http://dev.nodeca.com) - -[link with title](http://nodeca.github.io/pica/demo/ "title text!") - -Autoconverted link https://github.com/nodeca/pica (enable linkify to see) - - -## Images - -![Minion](https://octodex.github.com/images/minion.png) -![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") - -Like links, Images also have a footnote style syntax - -![Alt text][id] - -With a reference later in the document defining the URL location: - -[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" - - -## Plugins - -The killer feature of `markdown-it` is very effective support of -[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). - - -### [Emojies](https://github.com/markdown-it/markdown-it-emoji) - -> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum: -> -> Shortcuts (emoticons): :-) :-( 8-) ;) - -see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. - - -### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) - -- 19^th^ -- H~2~O - - -### [\](https://github.com/markdown-it/markdown-it-ins) - -++Inserted text++ - - -### [\](https://github.com/markdown-it/markdown-it-mark) - -==Marked text== - - -### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) - -Footnote 1 link[^first]. - -Footnote 2 link[^second]. - -Inline footnote^[Text of inline footnote] definition. - -Duplicated footnote reference[^second]. - -[^first]: Footnote **can have markup** - - and multiple paragraphs. - -[^second]: Footnote text. - - -### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) - -Term 1 - -: Definition 1 -with lazy continuation. - -Term 2 with *inline markup* - -: Definition 2 - - { some code, part of Definition 2 } - - Third paragraph of definition 2. - -_Compact style:_ - -Term 1 -~ Definition 1 - -Term 2 -~ Definition 2a -~ Definition 2b - - -### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) - -This is HTML abbreviation example. - -It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. - -*[HTML]: Hyper Text Markup Language - -### [Custom containers](https://github.com/markdown-it/markdown-it-container) - -::: warning -*here be dragons* -::: -Content -with -line -break \ No newline at end of file