Implementing Relative Links/Images/Emails in MarkdownTextBlock

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md

@@ -273,6 +273,40 @@ results in:
 
 There are other methods of generating links that aren't appropriate for discussion-board style comments.  See the [Markdown Syntax](http://daringfireball.net/projects/markdown/syntax#link) if you're interested in more info.
 
+ 
+
+Relative links are also supported
+
+>\[Relative Link\]\(/Assets/Photos/Photos.json\)
+
+results in:
+
+>[Relative Link](/Assets/Photos/Photos.json)
+
+ 
+
+>\[Relative Link 2\]\(../Photos/Photos.json\)
+
+results in:
+
+>[Relative Link 2](../Photos/Photos.json)
+
+**Note:** Relative Links has to be Manually Handled in `LinkClicked` Event.
+
+*****
+
+# Email Links
+
+Emails can be used as Masked Links or Direct email links. 
+
+>[Email\]\(`email@email.com`) 
+
+will be rendered to [Email](email@email.com)
+
+>`email@email.com` 
+
+will be rendered to email@email.com
+
 *****
 
 # IMAGES
@@ -281,11 +315,25 @@ To add an image, it is almost like a link. You just need to add a \! before.
 
 So inline image syntax looks like this:
 
->\!\[Toolkit logo](https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/Microsoft.Toolkit.Uwp.SampleApp/Assets/ToolkitLogo.png)
+>\!\[Toolkit logo](https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/Microsoft.Toolkit.Uwp.SampleApp/Assets/Helpers.png)
 
 which renders in:
 
-![Toolkit logo](https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/Microsoft.Toolkit.Uwp.SampleApp/Assets/ToolkitLogo.png)
+![Toolkit logo](https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/Microsoft.Toolkit.Uwp.SampleApp/Assets/Helpers.png)
+
+Rendering Images is now supported through prefix. use property **ImageLinkPrefix**
+
+ 
+
+Example: if you set **ImageLinkPrefix** to **ms-appx://** then
+
+>\!\[Local Image](/Assets/NotificationAssets/Sunny-Square.png)
+
+ 
+
+renders in
+
+![Local Image](/Assets/NotificationAssets/Sunny-Square.png)
 
 *****
 
@@ -317,6 +365,12 @@ And finally some unquoted text.
 
 *****
 
+# EMOJIS
+
+You can use nearly all emojis from this [list](https://gist.github.com/rxaviers/7360908). Text like `:smile:` will display :smile: emoji.
+
+*****
+
 # MISCELLANEOUS
 
 ### Tables

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/MarkdownTextBlock.bind

@@ -41,6 +41,7 @@
                                         Header1Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
                                         Foreground="Black" 
                                         LinkForeground="BlueViolet"
+                                        ImageLinkPrefix="ms-appx://"
                                         Text="{Binding ElementName=UnformattedText, Path=Text}" />
         </ScrollViewer>        
     </Grid>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/MarkdownTextBlockPage.xaml.cs

@@ -18,6 +18,7 @@
 using Windows.System;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Popups;
 
 namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
@@ -69,7 +70,14 @@ private void SetInitalText(string text)
 
         private async void MarkdownText_LinkClicked(object sender, UI.Controls.LinkClickedEventArgs e)
         {
-            await Launcher.LaunchUriAsync(new Uri(e.Link));
+            if (e.Link.StartsWith("../") || e.Link.StartsWith("/"))
+            {
+                await new MessageDialog("Masked relative links needs to be manually handled.").ShowAsync();
+            }
+            else
+            {
+                await Launcher.LaunchUriAsync(new Uri(e.Link));
+            }
         }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.cs

@@ -184,6 +184,24 @@ public Thickness CodeBorderThickness
             typeof(MarkdownTextBlock),
             new PropertyMetadata(null, OnPropertyChangedStatic));
 
+        /// <summary>
+        /// Gets or sets the Prefix of Image Link.
+        /// </summary>
+        public string ImageLinkPrefix
+        {
+            get { return (string)GetValue(ImageLinkPrefixProperty); }
+            set { SetValue(ImageLinkPrefixProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets the dependency property for <see cref="ImageLinkPrefix"/>.
+        /// </summary>
+        public static readonly DependencyProperty ImageLinkPrefixProperty = DependencyProperty.Register(
+            nameof(ImageLinkPrefix),
+            typeof(string),
+            typeof(MarkdownTextBlock),
+            new PropertyMetadata(string.Empty, OnPropertyChangedStatic));
+
         /// <summary>
         /// Gets or sets the brush used to render the text inside a code block.  If this is
         /// <c>null</c>, then Foreground is used.
@@ -1243,6 +1261,14 @@ private async void Hyperlink_Click(Hyperlink sender, HyperlinkClickEventArgs arg
         /// <returns>A <see cref="Task"/> representing the asynchronous operation.</returns>
         async Task<ImageSource> IImageResolver.ResolveImageAsync(string url, string tooltip)
         {
+            if (!Uri.TryCreate(url, UriKind.Absolute, out Uri uri))
+            {
+                if (!string.IsNullOrEmpty(ImageLinkPrefix))
+                {
+                    url = string.Format("{0}{1}", ImageLinkPrefix, url);
+                }
+            }
+
             var eventArgs = new ImageResolvingEventArgs(url, tooltip);
             ImageResolving?.Invoke(this, eventArgs);
 

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Parse/Inlines/HyperlinkInline.cs

@@ -13,6 +13,7 @@
 using System;
 using System.Collections.Generic;
 using Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Helpers;
+using System.Linq;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Parse
 {
@@ -375,14 +376,18 @@ internal static Common.InlineParseResult ParseEmailAddress(string markdown, int
             // Note: it is intended that this code match the reddit.com markdown parser; there are
             // many characters which are legal in email addresses but which aren't picked up by
             // reddit (for example: '$' and '!').
+
+            // Special characters as per https://en.wikipedia.org/wiki/Email_address#Local-part allowed
+            char[] allowedchars = new char[] { '!', '#', '$', '%', '&', '\'', '*', '+', '-', '/', '=', '?', '^', '_', '`', '{', '|', '}', '~' };
+
             int start = tripPos;
             while (start > minStart)
             {
                 char c = markdown[start - 1];
                 if ((c < 'a' || c > 'z') &&
                     (c < 'A' || c > 'Z') &&
                     (c < '0' || c > '9') &&
-                    c != '+' && c != '-' && c != '_' && c != '.')
+                    !allowedchars.Contains(c))
                 {
                     break;
                 }

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Parse/Inlines/ImageInline.cs

@@ -134,7 +134,7 @@ internal static Common.InlineParseResult Parse(string markdown, int start, int e
         /// <returns> The textual representation of this object. </returns>
         public override string ToString()
         {
-            return string.Format("[{0}]: {1}", Tooltip, Url);
+            return string.Format("![{0}]: {1}", Tooltip, Url);
         }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Parse/Inlines/MarkdownLinkInline.cs

@@ -13,6 +13,7 @@
 using System;
 using System.Collections.Generic;
 using Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Helpers;
+using System.Text.RegularExpressions;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Parse
 {
@@ -193,9 +194,16 @@ internal static Common.InlineParseResult Parse(string markdown, int start, int m
                 }
 
                 // Check the URL is okay.
-                if (!IsUrlValid(url))
+                if (!IsUrlEmail(url))
                 {
-                    return null;
+                    if (!IsUrlValid(url))
+                    {
+                        return null;
+                    }
+                }
+                else
+                {
+                    tooltip = url = string.Format("mailto:{0}",url);
                 }
 
                 // We found a regular stand-alone link.
@@ -264,6 +272,16 @@ public void ResolveReference(MarkdownDocument document)
             ReferenceId = null;
         }
 
+        /// <summary>
+        /// Checks if the given URL is an Email.
+        /// </summary>
+        /// <param name="url"> The URL to check. </param>
+        /// <returns> <c>true</c> if the URL is valid; <c>false</c> otherwise. </returns>
+        private static bool IsUrlEmail(string url)
+        {
+            return Regex.IsMatch(url, "(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])");
+        }
+
         /// <summary>
         /// Checks if the given URL is allowed in a markdown link.
         /// </summary>
@@ -272,7 +290,7 @@ public void ResolveReference(MarkdownDocument document)
         private static bool IsUrlValid(string url)
         {
             // URLs can be relative.
-            if (url.StartsWith("/") || url.StartsWith("#"))
+            if (url.StartsWith("/") || url.StartsWith("#") || url.StartsWith("../"))
             {
                 return true;
             }