My quixotic attempts at creating a WYSIWYG Markdown Edit Box

[AlexanderBlackman]

I've wanted a Markdown Edit Box for years, and have experimenting with creating one recently. Markdown is simple enough to edit for us coders, but it can be confusing for others. The basic RichEditBox isn't an alternative as RTF is difficult to store and search, also, Images are encoded into the string, leading to a stupidly large size.

Failures

A custom control with an unclickable MarkdownTextBlock(MDT) over a TextBox in one grid.

How: Set the MDT's IsHitTestVisible to false. Used Hotkeys to add markdown formating around the Text
Issues: Caret position was wildly misalligned, lots of confusing behaviour if markdown syntax is used by accident. The whole MDT needs to be rerendered each change.

Piping RTF content to markdown and visa versa.

How: Tried to use open source libraries to convert RTF to HTML then HTML to Markdown and visa versa.
Theoretical advantage: HTML paragraph alignment can be stored in Markdown.
Issues: There's no WinUI compatible library to convert RTF to HTML.

Partial successes

Piping RichEdit box to Markdown via Pandoc.

How: Used Pandoc.exe via PandocNet, with a MarkdownText dp bindable to the markdown source. Added a hotkey/Context menu button to make Headings.
Positives: It converts well to Markdown.
Issues: Converting from markdown loses a lot of information, I can't even work out how to keep the necessary line spacing. Also, Pandoc is a seperate program that'll need to be installed. It's quite slow too and pictures are a no no.

Github-style switching between a TextBox for editing and MDT for display.

How: Use focus events and a button to switch. User directly writes markdown but can use hotkeys/buttons to add syntax.
Positives: It works, and popups can be to insert more complex elements. Allows all markdown and is seamlessly quick.
Issues: Live previewing the markdown requires rerendering the whole control's content. Markdown is less accessible to non-coders.

Uncompleted Experiments

Using Regex to convert between RTF and MD

Theory: RTF tags and MD tags can be detected.
Issues: I don't know enough about RTF syntax to do this, also, information will be lost and it'll have the same issue with pictures.

Temporarily converting MDT's underlying RichTextBlock's Inlines into a text entry InlineUIElementContainer

Theory: MDT's have a child RichTextBlock containing an inline collection, this'd allow us to edit one Inline at a time without rerendering the whole thing.
Progress: I've managed to log/convert individual text Inlines on click,
Issues: Non text inclines are harder to access, also the user will still have to type markdown unless we somehow load a different text control depending on the type. I'm not very skilled, so this is getting super complex. Also, there's no caret in TextBlocks, making it harder to find the position.

Does anyone have any ideas?

[gautambjain]

I had gone through similar struggle for my note app which was for Windows initially (RTF, RichEditCtrl) and then when I made phone apps with syncing capabilities.

Finally I took this route. The following was implemented in MAUI. You should be able to take similar approach in WinUI 3 also.

1. On my Windows app, I provide 2 editors - Standard editor and Markdown editor. The standard editor uses RTF but when those notes are synced with the phone, they appear as plain text (unformatted).
2. So we encourage users to use Markdown editor if they want formatting on phones too. For this we had written Markdown to RTF converter to show it inside RichEditCtrl on Windows. Couldn't use Markdown to HTML on Windows due to app's design. On phone app, the same Markdown will be converted to HTML and shown inside BlazorWebView. Inside BlazorWebView we use Syncfusion's RichTextEditor control which is very good and it as inbuilt support for markdown and html.

Hope you get an idea.