Fix Theme#listItemColor and OL

This commit is contained in:
Dimitry Ivanov 2018-08-21 11:31:28 +03:00
parent dc5cc9471c
commit 1a4418c461
15 changed files with 229 additions and 16 deletions

View File

@ -87,6 +87,8 @@ public class MarkdownRenderer {
0x20000000 0x20000000
); );
final int red = 0xFFff0000;
final SpannableConfiguration configuration = SpannableConfiguration.builder(context) final SpannableConfiguration configuration = SpannableConfiguration.builder(context)
.asyncDrawableLoader(loader) .asyncDrawableLoader(loader)
.urlProcessor(urlProcessor) .urlProcessor(urlProcessor)
@ -94,6 +96,7 @@ public class MarkdownRenderer {
.theme(SpannableTheme.builderWithDefaults(context) .theme(SpannableTheme.builderWithDefaults(context)
.codeBackgroundColor(background) .codeBackgroundColor(background)
.codeTextColor(prism4jTheme.textColor()) .codeTextColor(prism4jTheme.textColor())
.listItemColor(red)
.build()) .build())
.factory(new GifAwareSpannableFactory(gifPlaceholder)) .factory(new GifAwareSpannableFactory(gifPlaceholder))
.trimWhiteSpaceEnd(false) .trimWhiteSpaceEnd(false)

View File

@ -1,5 +1,5 @@
<template> <template>
<a :href="linkHref()" v-text="linkText()"></a> <a :href="linkHref()" target="_blank" rel="noopener noreferrer">{{linkText()}}<OutboundLink/></a>
</template> </template>
<script> <script>
@ -23,6 +23,13 @@ var map = {
}, },
"html-blocks": { "html-blocks": {
href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements" href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements"
},
"jsoup": {
displayName: "Jsoup",
href: "https://github.com/jhy/jsoup/"
},
"markwon-jsoup": {
href: "https://github.com/noties/Markwon/tree/master/markwon-html-parser-impl/src/main/java/ru/noties/markwon/html/impl/jsoup"
} }
}; };

View File

@ -0,0 +1,15 @@
<template>
<table>
<tr><td><b>name</b></td><td><code>{{name}}</code></td></tr>
<tr><td><b>type</b></td><td><code>{{type}}</code></td></tr>
<tr><td><b>default</b></td><td v-html="defaults"></td></tr>
</table>
</template>
<script>
export default {
name: "ThemeProperty",
props: ["name", "type", "defaults"]
};
</script>

View File

@ -8,15 +8,18 @@ module.exports = {
themeConfig: { themeConfig: {
nav: [ nav: [
{ text: 'Install', link: '/docs/install.md' }, { text: 'Install', link: '/docs/install.md' },
{ text: 'Changelog', link: '/CHANGELOG.md' },
{ text: 'Github', link: 'https://github.com/noties/Markwon' } { text: 'Github', link: 'https://github.com/noties/Markwon' }
], ],
sidebar: [ sidebar: [
'/', '/',
'/docs/getting-started.md', '/docs/getting-started.md',
'/docs/configure.md', '/docs/configure.md',
'/docs/html.md', '/docs/theme.md',
'/docs/syntax-highlight.md', '/docs/factory.md',
'/docs/image-loader.md', '/docs/image-loader.md',
'/docs/syntax-highlight.md',
'/docs/html.md',
'/docs/view.md' '/docs/view.md'
] ]
} }

1
docs/CHANGELOG.md Normal file
View File

@ -0,0 +1 @@
# Changelog

0
docs/deploy.sh Normal file → Executable file
View File

View File

@ -1 +1,42 @@
# Configuration # Configuration
factories
basic info
there are a lot of options, but using default instance will probably fit the needs (except maybe for image loader)
## Theme
## Images
### Async loader
### Size resolver <Badge text="1.0.1" />
## Syntax highlight
Although interface was there initially only starting with {version} there is an implementation
refer to doc
## Link resolver
Interface to respond to action when a link span is clicked
## URL processor
Interface to pre-process all URLs in a document (assets, relative, absolute)
## Factory <Badge text="1.1.0" />
## softBreakAddsNewLine <Badge text="1.1.1" />
issue, reason
## trimWhiteSpaceEnd <Badge text="2.0.0" />
compact mode
## HTML <Badge text="2.0.0" />
### Parser
### Renderer
### htmlIgnoreNonClosedTags

1
docs/docs/factory.md Normal file
View File

@ -0,0 +1 @@
# Factory <Badge text="1.1.0" />

View File

@ -1,6 +1,6 @@
# Getting started # Getting started
:::tip Installation :::tip Installation
Please follow [installation](/docs/install.md) section instructions Please follow [installation](/docs/install.md) instructions
to learn how to add `Markwon` to your project to learn how to add `Markwon` to your project
::: :::

View File

@ -1,12 +1,12 @@
# HTML # HTML
<Badge text="2.x.x" /> <Badge text="2.0.0" />
Starting with version `2.x.x` `Markwon` brings the whole HTML parsing/rendering Starting with version `2.0.0` `Markwon` brings the whole HTML parsing/rendering
stack _on-site_. The main reason for this are _special_ definitions of HTML nodes stack _on-site_. The main reason for this are _special_ definitions of HTML nodes
by <Link name="commonmark-spec" />. More specifically: <Link name="commonmark-spec#inline" displayName="inline" /> by <Link name="commonmark-spec" />. More specifically: <Link name="commonmark-spec#inline" displayName="inline" />
and <Link name="commonmark-spec#block" displayName="block" />. and <Link name="commonmark-spec#block" displayName="block" />.
These two are _a bit_ different from _native_ HTML understanding. These two are _a bit_ different from _native_ HTML understanding.
Well, they are completely different and share only the same names as Well, they are _completely_ different and share only the same names as
<Link name="html-inlines" displayName="HTML-inline"/> and <Link name="html-blocks" displayName="HTML-block"/> <Link name="html-inlines" displayName="HTML-inline"/> and <Link name="html-blocks" displayName="HTML-block"/>
elements. This leads to situations when for example an `<i>` tag is considered elements. This leads to situations when for example an `<i>` tag is considered
a block when it's used like this: a block when it's used like this:
@ -84,11 +84,89 @@ This might seem like a minor problem, but add more tags to a document,
introduce some deeply nested structures, spice openning and closing tags up introduce some deeply nested structures, spice openning and closing tags up
by adding markdown markup between them and finally write _malicious_ HTML code :laughing:! by adding markdown markup between them and finally write _malicious_ HTML code :laughing:!
Because of this I There is no such problem on the _frontend_ for which commonmark specification is mostly
aimed as _frontend_ runs in a web-browser environment. After all _parsed_ markdown
will become HTML tags (most common usage). And web-browser will know how to render final result.
afterall creating an implementation of a web browser is not a purpose of this library. We, on the other hand, do not posess HTML heritage (*thank :robot:!*), but still
want to display some HTML to style resulting markdown a bit. That's why `Markwon`
incorporated own HTML parsing logic. It is based on the <Link name="jsoup" /> project.
And makes usage of the `Tokekiser` class that allows to _tokenise_ input HTML.
All other code that doesn't follow this purpose was removed. It's safe to use
in projects that already have `jsoup` dependency as `Markwon` repackaged **jsoup** source classes
(which could be found <Link name="markwon-jsoup" displayName="here"/>)
html-entities ## Parser
There are no additional steps to configure HTML parsing. It's enabled by default.
If you wish to _exclude_ it, please follow the [exclude](#exclude-html-parsing) section below.
The key class here is: `MarkwonHtmlParser` that is defined in `markwon-html-parser-api` module.
`markwon-html-parser-api` is a simple module that defines HTML parsing contract and
does not provide implementation.
To change what implementation `Markwon` should use, `SpannableConfiguration` can be used:
```java{2}
SpannableConfiguration.builder(context)
.htmlParser(MarkwonHtmlParser)
.build();
```
`markwon-html-parser-impl` on the other hand provides `MarkwonHtmlParser` implementation.
It's called `MarkwonHtmlParserImpl`. It can be created like this:
```java
final MarkwonHtmlParser htmlParser = MarkwonHtmlParserImpl.create();
// or
final MarkwonHtmlParser htmlParser = MarkwonHtmlParserImpl.create(HtmlEmptyTagReplacement);
```
### Empty tag replacement
In order to append text content for self-closing, void or just _empty_ HTML tags,
`HtmlEmptyTagReplacement` can be used. As we cannot set Span for empty content,
we must represent empty tag with text during parsing stage (if we want it to be represented).
Consider this:
* `<img src="me-sad.JPG">`
* `<br />`
* `<who-am-i></who-am-i>`
By default (`HtmlEmptyTagReplacement.create()`) will handle `img` and `br` tags.
`img` will be replaced with `alt` property if it is present and `\uFFFC` if it is not.
And `br` will insert a new line.
### Non-closed tags
It's possible that your HTML can contain non-closed tags. By default `Markwon` will ignore them,
but if you wish to get a bit closer to a web-browser experience, you can allow this behaviour:
```java{2}
SpannableConfiguration.builder(context)
.htmlIgnoreNonClosedTags(false)
.build();
```
:::warning Note
If there is (for example) an `<i>` tag at the start of a document and it's not closed
and `Markwon` is configured to **not** ignore non-closed tags (`.htmlIgnoreNonClosedTags(false)`),
it will make the whole document in italics
:::
### Implementation note
`MarkwonHtmlParserImpl` does not create a unified HTML node. Instead it creates
2 collections: inline tags and block tags. Inline tags are represented as a `List`
of inline tags (<Link name="html-inlines" displayName="reference" />). And
block tags are structured in a tree. This helps to achieve _browser_-like behaviour,
when open inline tag is applied to all content (even if inside blocks) until closing tag.
All tags that are not _inline_ are considered to be _block_ ones.
## Renderer
### Custom tag handler
CssInlineStyleParser
## Exclude HTML parsing ## Exclude HTML parsing
@ -112,3 +190,10 @@ dependencies {
Excluding `markwon-html-parser-impl` this way will result in Excluding `markwon-html-parser-impl` this way will result in
`MarkwonHtmlParser#noOp` implementation. No further steps are `MarkwonHtmlParser#noOp` implementation. No further steps are
required. required.
:::warning Note
Excluding `markwon-html-parser-impl` won't remove *all* the content between
HTML tags. It will if `commonmark` decides that a specific fragment is a
`HtmlBlock`, but it won't if fragment is considered a `HtmlInline` as `HtmlInline`
does not contain contents (just a tag definition).
:::

View File

@ -1 +1 @@
# Image loader # Images

View File

@ -5,6 +5,10 @@ next: /docs/getting-started.md
# Installation # Installation
<MavenBadges />
proguard when using image-loader
## Snapshot ## Snapshot
![markwon-snapshot](https://img.shields.io/nexus/s/https/oss.sonatype.org/ru.noties/markwon.svg?label=markwon) ![markwon-snapshot](https://img.shields.io/nexus/s/https/oss.sonatype.org/ru.noties/markwon.svg?label=markwon)

50
docs/docs/theme.md Normal file
View File

@ -0,0 +1,50 @@
# Theme
Here is the list of properties that can be configured via `SpannableTheme#builder` factory
method. If you wish to control what is out of this list, you can use [SpannableFactory](/docs/factory.md)
abstraction which lets you to gather full control of Spans that are used to display markdown.
## Link color
Controls the color of a [link](#)
<ThemeProperty name="linkColor" type="@ColorInt int" defaults="Default link color of a context where markdown is displayed <sup>*</sup>" />
<sup>*</sup> `TextPaint#linkColor` will be used to determine linkColor of a context
## Block margin
Starting margin before text content for the:
* lists
* blockquotes
* task lists
<ThemeProperty name="blockMargin" type="@Px int" defaults="24dp" />
## Block quote
Customizations for the `blockquote` stripe
> Quote
### Stripe width
Width of a blockquote stripe
<ThemeProperty name="blockQuoteWidth" type="@Px int" defaults="1/4 of the <a href='#block-margin'>block margin</a>" />
### Stripe color
Color of a blockquote stripe
<ThemeProperty name="blockQuoteColor" type="@ColorInt int" defaults="textColor with <code>25</code> (0-255) alpha value" />
## List
### List item color
Controls the color of a list item. For ordered list: leading number,
for unordered list: bullet.
* UL
1. OL

View File

@ -1 +1 @@
# View # MarkwonView

View File

@ -10,6 +10,7 @@ public class OrderedListItemSpan implements LeadingMarginSpan {
private final SpannableTheme theme; private final SpannableTheme theme;
private final String number; private final String number;
private final Paint paint = ObjectsPool.paint();
// we will use this variable to check if our order number text exceeds block margin, // we will use this variable to check if our order number text exceeds block margin,
// so we will use it instead of block margin // so we will use it instead of block margin
@ -39,7 +40,9 @@ public class OrderedListItemSpan implements LeadingMarginSpan {
return; return;
} }
theme.applyListItemStyle(p); paint.set(p);
theme.applyListItemStyle(paint);
final int numberWidth = (int) (p.measureText(number) + .5F); final int numberWidth = (int) (p.measureText(number) + .5F);
@ -60,6 +63,6 @@ public class OrderedListItemSpan implements LeadingMarginSpan {
} }
// @since 1.1.1 we are using `baseline` argument to position text // @since 1.1.1 we are using `baseline` argument to position text
c.drawText(number, left, baseline, p); c.drawText(number, left, baseline, paint);
} }
} }