Markdown Text Editor

[WilliamABradley]

I have written a small Markdown Toolbar that has buttons that modify a RichEditBox's Content, modelled after the functionality of the GitHub Markdown Editor, however, it currently only has a subset of the features of Markdown as I am using it for a Trakt.TV comments section, which only uses a small subset of the Markup.
Implementing the rest of the set would be a simple task with the Helper Methods I have written.
Does that sound like an interesting Control to add to the UWPCommunityToolkit?

It supports the ability to Revert formatting of selected text, if the selected text has already got that formatting applied, as a quick undo feature, much like GitHub (Also works for Lists & Quotes).

It produces a link creator Dialog when pressing the Link button, which probably could just insert the formatting if say CTRL key was held down.

Currently is has a dependency on FontAwesome as for some reason MDL2 Assets doesn't have an ordered list icon, however, the font pack is free for all Project Types.

The eye button, is a custom button for Trakt.TV as it does inline Spoilers with [spoiler][/spoiler] tags, which I convert into Reddit style spoilers of [Spoiler](/s *Spoiler Text*), which allows it to be read and handled by the MarkDownTextBlock without having to modify the UI or code structure of the Control. However, in order to capture this type of custom behaviour, I would likely need an event to intercept the Raw Text being sent to the previewer in order to allow for custom formatting, such as these spoilers, or the various flavours of Markdown.

Also in the top right is a button that goes straight to this Cheat sheet.

I'm sure it is possible to make an RTF to Markdown converter, and use that for conversion, but ain't nobody got time for that.

[nmetulev]

Thanks for suggesting this. Just to clarify, the toolbar allows editing markdown text, not rich text? If so, wondering if it could also have an option to do rich text editing (re: #1081)? If so, we could potentially have one control that supports both

[WilliamABradley]

Hi there, the toolbar only allows editing Markdown Text, although it could probably be easily modified to also accept Rich Text, but I have no need for Rich Text.

Would it be a better if I just provided Toolbar UI & allow users to x:bind their own RichEditBox. Meaning that their UI would have to Provide both the RichEditBox & Previewer? Or provide it in a combo such as in my current UI?

[nmetulev]

That makes sense. I'd love to see what other contributors think about using this as a starting point to a unified toolbar control for editing both RTF and markdown in a RichEditBox. I'd also love to see what the control looks like right now (code wise)?

[Vijay-Nirmal]

My opinion is to create unified toolbar control for editing both RTF and Markdown in a RichEditBox. It will reduce the number of controls for the same purpose. We can easily archive Previewer with the existing tools.

[Odonno]

@WilliamABradley I don't see why you need FontAwesome. I found there is a list icon in MDL2 Assets, and even in Segoe UI. Here is one possible icon you can use :

[WilliamABradley]

@Odonno there is a List Icon, but not a Numbered List Icon. Perhaps one could be created, by combining Assets and Paths, but I don't have the Experience to Create such a thing and Use it as an IconElement.

OneNote has one, and I was sadly disappointed that I found out but giving myself permission to the WindowsApps folders to find out that OneNote is an HTML/JS App so there was no access to that Sweet Sweet numbered Icon.

[Odonno]

@WilliamABradley Oh sorry, I thought it was about unordered list. Mea Culpa.

But again, I don't think where the problem is. You have icons for numbers from 1 to 16. That should be enough for a start, no?

[WilliamABradley]

@Odonno I'm open to suggestions, Is it possible to create one from taking a Template of IconElement and Creating Custom XAML with these Assets?

If so, I will give it a go in the morning. I am more than happy to drop the dependency on FontAwesome as the font sticks out as being to thick.

[Odonno]

@WilliamABradley Here is how to do it :

<TextBlock Text="&#xE00B;" FontFamily="Segoe MDL2 Assets" />

You will need to copy the value of the icon you want. So, for example, the number 1 icon will be :

<TextBlock Text="&#xF146;" FontFamily="Segoe MDL2 Assets" />

I hope it can help you.