diff --git a/app-sample/samples.json b/app-sample/samples.json index 5ae4e370..8fa9e674 100644 --- a/app-sample/samples.json +++ b/app-sample/samples.json @@ -1,4 +1,19 @@ [ + { + "javaClassName": "io.noties.markwon.app.samples.image.NativeAndHtmlImageSample", + "id": "20200803115847", + "title": "Native and HTML image", + "description": "Define images in both native markdown and HTML. Native markdown images take 100% of available width", + "artifacts": [ + "HTML", + "IMAGE" + ], + "tags": [ + "HTML", + "image", + "rendering" + ] + }, { "javaClassName": "io.noties.markwon.app.samples.BlockHandlerSample", "id": "20200729090524", @@ -780,12 +795,13 @@ ] }, { - "javaClassName": "io.noties.markwon.app.samples.GithubUserIssueOnTextAddedSample", + "javaClassName": "io.noties.markwon.app.samples.GithubUserIssueInlineParsingSample", "id": "20200629162024", "title": "User mention and issue (via text)", "description": "Github-like user mention and issue rendering via `CorePlugin.OnTextAddedListener`", "artifacts": [ - "CORE" + "CORE", + "INLINE_PARSER" ], "tags": [ "parsing", @@ -794,13 +810,12 @@ ] }, { - "javaClassName": "io.noties.markwon.app.samples.GithubUserIssueInlineParsingSample", + "javaClassName": "io.noties.markwon.app.samples.GithubUserIssueOnTextAddedSample", "id": "20200629162024", "title": "User mention and issue (via text)", "description": "Github-like user mention and issue rendering via `CorePlugin.OnTextAddedListener`", "artifacts": [ - "CORE", - "INLINE_PARSER" + "CORE" ], "tags": [ "parsing", diff --git a/app-sample/src/main/java/io/noties/markwon/app/samples/image/NativeAndHtmlImageSample.java b/app-sample/src/main/java/io/noties/markwon/app/samples/image/NativeAndHtmlImageSample.java new file mode 100644 index 00000000..0ca0292c --- /dev/null +++ b/app-sample/src/main/java/io/noties/markwon/app/samples/image/NativeAndHtmlImageSample.java @@ -0,0 +1,75 @@ +package io.noties.markwon.app.samples.image; + +import androidx.annotation.NonNull; + +import org.commonmark.node.Image; + +import io.noties.markwon.AbstractMarkwonPlugin; +import io.noties.markwon.Markwon; +import io.noties.markwon.MarkwonSpansFactory; +import io.noties.markwon.RenderProps; +import io.noties.markwon.app.sample.Tags; +import io.noties.markwon.app.sample.ui.MarkwonTextViewSample; +import io.noties.markwon.html.HtmlPlugin; +import io.noties.markwon.image.AsyncDrawable; +import io.noties.markwon.image.AsyncDrawableSpan; +import io.noties.markwon.image.ImageProps; +import io.noties.markwon.image.ImageSize; +import io.noties.markwon.image.ImagesPlugin; +import io.noties.markwon.sample.annotations.MarkwonArtifact; +import io.noties.markwon.sample.annotations.MarkwonSampleInfo; + +@MarkwonSampleInfo( + id = "20200803115847", + title = "Native and HTML image", + description = "Define images in both native markdown and HTML. Native markdown images take 100% of available width", + artifacts = {MarkwonArtifact.IMAGE, MarkwonArtifact.HTML}, + tags = {Tags.rendering, Tags.image, Tags.html} +) +public class NativeAndHtmlImageSample extends MarkwonTextViewSample { + @Override + public void render() { + final String md = "" + + "# Native image\n" + + "![alt](https://picsum.photos/id/237/1024/800)\n\n" + + "# HTML image\n" + + "" + + ""; + + final Markwon markwon = Markwon.builder(context) + .usePlugin(ImagesPlugin.create()) + .usePlugin(HtmlPlugin.create()) + .usePlugin(new AbstractMarkwonPlugin() { + @Override + public void configureSpansFactory(@NonNull MarkwonSpansFactory.Builder builder) { + builder.setFactory(Image.class, (configuration, props) -> new AsyncDrawableSpan( + configuration.theme(), + new AsyncDrawable( + ImageProps.DESTINATION.require(props), + configuration.asyncDrawableLoader(), + configuration.imageSizeResolver(), + imageSize(props) + ), + AsyncDrawableSpan.ALIGN_BOTTOM, + ImageProps.REPLACEMENT_TEXT_IS_LINK.get(props, false) + )); + } + }) + .build(); + + markwon.setMarkdown(textView, md); + } + + // Use defined image size or make its width 100% + @NonNull + private static ImageSize imageSize(@NonNull RenderProps props) { + final ImageSize imageSize = ImageProps.IMAGE_SIZE.get(props); + if (imageSize != null) { + return imageSize; + } + return new ImageSize( + new ImageSize.Dimension(100F, "%"), + null + ); + } +}