Visual markdown editor panel extension


#1

While working on one of my latest projects, I stumbled across an amazing markdown editor “MirrorMark” based on CodeMirror. As I really like the style and the highlighting, I decided to port it over to Kirby and make a panel extension out of it. With this brief explanation in place, let me introduce you to:

Visual Markdown Editor

This Panel field plugin for Kirby 2 enables you to use an intuitive and visual markdown editor without any hazzle. Just drop in the plugin and you’re good to go!

Features

  • Extensive markdown syntax highlighting
  • Convenient toolbar including the most used markdown features
  • Multiple cursors / selections support
  • Help links to support users unfamiliar with markdown
  • Fully compatible with existing content & templates
  • Distraction-free fullscreen mode

Check it out on GitHub! You can find all further setup instructions there.

As always, let me know what you think about it. Every constructive feedback is very welcome and I’m more then happy to optimize and extend the extension based on your feedback!


Snippetfield - Structure field with snippets
#2

Looks great! Thank you.
I was looking for something like this, but hadn’t discovered MirrorMark (it seems to be a very recent project). Every other alternative I’ve seen had big issues. Oh well, I just reported a bunch of serious issues on MirrorMark’s Github page. The project is fresh and the owner seems to be very reactive, things should be ironed-out sooner than later.

What I like is that the original Markdown is kept in the editor. Most of them use contenteditable and html and everything has to be converted to markdown before the page is saved.
This is an editor than doesn’t try to hide markdown.

My only gripe with CodeMirror is that it is pretty useless on a phone. That said I have yet to see a web editor that works well on mobile (some “native” ones in apps work).
An easy workaround would be to disable it when the screen is very narrow.


#3

Just thought the directory name is perhaps a bit generic? “markdown” could be anything related to Markdown…
“mirrormark”?
“visualmarkdown”?


#4

I spotted this in your repositories a little while ago, when it probably wasn’t even finished and started using it. Great job.


#5

You’re right, it is a bit generic.

However, mirrormark is not an option for me. The extension will eventually move away from using MirrorMark but use it’s own CodeMirror overlay instead.

visualmarkdown would make the most sense. I just thought it is too long and looks odd in the blueprints (I know, I’m a bit oversensitive here :slight_smile: )


#6

Thanks a lot! :blush:


#7

Looks really nice:) Maybe clients will prefer the wysiwyg version better, but I think for those who are willing to get along with markdown, it’s a great start.

Only thing I find missing so far, is headers. And maybe the ability to upload an image rather than inserting a placeholder.

Great job.


#8

Thanks for your suggestions.

Headers will definitely be added. I have to see what I can do about uploading images.


#9

Regarding images, I wonder if there is a way to display them in the editor instead of the markdown/Kirbytext?
I also like how Ulysses 3 displays image and link info. Lots of crazy ideas here: http://www.ulyssesapp.com/mac/ in the “Plain Text Enhanced” section.

Very excited by this plugin. I think I’ll use it very soon in a site I’m currently building for a client.


#10

+1 for the image preview


#11

The way Ulysses 3 handles images and links in markdown is awesome! However I don’t think you can implement something similar with CodeMirror, which is what the Editor uses ultimately.


#12

If there was a browser based editor like Ulysses I’d be more then happy to try porting it to Kirby though! :heart_eyes:


#13

Alas I haven’t seen any project close to that level of quality/features yet. I have notes somewhere in a Gdoc with a comparison of some visual Markdown editors. I can share it with you if you’re looking for ideas :wink:


#14

@Malvese Of course, maybe there is an even better base for this field or some additional ideas :blush:


#15

Just saw a post on CommonMark’s forum announcing an upcoming parser. The code is not public yet, but it may be lightweight compared to CodeMirror, as it parses just one language.


#16

Looks promising! I should keep it in mind!


#17

I just released an update to the extension. Here’s what’s new:

New Features:

  • Headline toolbar icons & actions
  • Option to specify the headline levels
  • Option to hide the toolbar

Changes:

  • Updated to MirrorMark 1.0.1

Bugfixes:

  • Show correct fullscreen mode editor for pages with multiple editor fields
  • Allow scrolling in fullscreen mode

As always, you can find the latest version on GitHub.


#18

This is a godsend, thank you so much! I’m going to implement it for a client that likes to create WYSIWYG “masterpieces”… ahem…

A few features that might be nice to have:

  • Some tooltip/hovertext on the toolbar icons
  • A little markdown cheatsheet for the most common tags (could be turned on as an option)
  • Align the header #'s in the gutter like Ulysses does :blush:

#19

Thanks a lot for your suggestions! I’ll see what I can do :wink:


#20

I just tagged a new beta release of the plugin.

A large portion of the code has been rewritten, allowing for much nicer syntax styling, proper multiple cursor support and some more tweaks.

I guess it needs some in-depth testing though, before being released as stable. So any help would be greatly appreciated.

Check out the beta!