Markdown editor without separate preview
Hey, so I'm planing on creating either a WPF or an Avalonia application, that serves as markdown editor (prefered avalonia, because of cross plattform).
The markdown editor should be inspired by Obsidian or Notion, meaning you don't have a separate preview, but instead get the markdown rendered directly "block wise" in the same area where you can type.
I first thought of having a textbox and whenever you press
enter a new textblock gets rendered with the markdown converted to html for example. When you click on this textblock it gets converted to an editable textbox again.
However with this approach I would loose all the features a single textbox has, like ctrl+z etc.
Anybody has some idea how I could manage the live rendering of markdown?5 Replies
i think that if you go down this route, you're probably going to have to write/customise your own control anyway, so prepare to put in some work for getting features like ctrl+z working in any case
but what i would suggest is that you need to entirely disentangle your thinking about the app's internal state and its presentation layer
your app, conceptually, will probably have a
string property in the viewmodel that contains the user's raw markdown, with the *s and -s and such
that property being updated behind the scenes via hooks on the input to a textbox
parsing and rendering that raw string to pleasant markdown would be done as part of the presentation layer of your control
it's been a while since i worked directly with wpf or avalonia so i forget the details, but yeah... focus strongly on separating the internal representation from the visual representation and you won't have to juggle around with multiple controls, or swapping out one control for another
i feel like i was rambling just there, apologies if it's not too usefulNo, thanks that was helpful. I was feeling kinda skeptical bout the project when I noticed that the handling may get quite complex. But I guess it's gonna be okay.
Regarding the separation of view and "backend": this is my very first time working with MVVM, but I've worked with MVC pattern before, so this shouldn't be new.
Iirc Obsidian is just wraps VSCode under the hood.
Whut? No way
Yeah I'm sorry I was mistaken.
Obsidian uses CodeMirror https://docs.obsidian.md/Plugins/Editor/Editor as it's editor. However there seem to be plugins for Obsidian, which implement the Monaco editor. Which is the Editor used in VSCode.
Developer Documentation
Editor - Developer Documentation
The Editor class exposes operations for reading and manipulating an active Markdown document in edit mode. If you want to access the editor in a command, use the editorCallback. If you want to use th…