Sample, native and HTML image sample

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",
+      "CORE"
-      "INLINE_PARSER"
     ],
     "tags": [
       "parsing",

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" +
+      "<img src=\"https://picsum.photos/id/237/1024/800\" width=\"100%\" height=\"auto\"></img>" +
+      "";
+
+    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
+    );
+  }
+}