New editor approaches

I've invited to open up a new dedicated thread for the discussion on new editor approaches as I didn't want to see the announcement of my own editor plugin, StudioEditor, buried by out-of-the-scope, out of the topic comments, that are perfectly welcome and necessary but kind of annoying if you simply want things focused on the topic exposed. Nobody felt the need to do so, - to open up a new topic -, but there's something important to communicate because the more editors available, the better for GRAV. Any editor has to inscribe itself into the default.yaml substituting the editor options available by default in GRAV, CodeMirror and an enriched textarea...

As I'm inviting the community to develop more editor alternatives here's a basic information about blueprint inheritance probably known to insiders and vital to implement alternative editors:

Vital for Editor Developpers

Once the appetizer of this thread is communicated, I've been looking into the GRAV 2.0 roadmap discussion... additional editors, including WYSIWYG, or improvements on existing is a repeating topic as it was in the out of topic discussion on StudioEditor.

With the introduction done, get yourself into it, working on editors, and discuss here :-)

Post Scriptum: the availability of hooks can do harm sometimes. Hooks need incredibly good documentation, especially about when not to use them...

Have a look at Milkdown, that's a nice approach. Playground is incredible. Took me a minute to find this one. There are things out there, much better than StudioEditor or NextGen Editor. The challenge is to implement this. Why not a community effort? Put your hands on it. For me it's surprising that there's been no community effort to solve a problem that's many years old...

A list of what I want to see in a an editor for GRAV:

• WYSIWYG Markdown Editor
• What you see based on current theme, very important
• Dual panel editor option with constant sync both ways and the possibility to minimize either, source markdown and editable preview and maximization of the editor view of the other
• sync scroll of both views
• Build into Admin or available with admin without any extra cost, it's a CMS you can charge for a lot of extra features but when it comes to editing itself, it's core, it's audience, it's satisfaction
• Allowing multiple editor instances in blueprints which would allow theme authors to attach great editing experience not only for main content but also for more complex and structured site layouts

@saveva:
For me it’s surprising that there’s been no community effort to solve a problem that’s many years old…

Having been around for a while, I'm not surprised.

@saveva:
A list of what I want to see in a an editor for GRAV

(BTW why is everyone capitalising GRAV lately?)

I'm trying to think of a good place to put these where we can up- downvote them individually...

FWIW my list when I was hacking up a couple of my own:

• a good extensibility framework to support customisations per site
• add or remove toolbar buttons/widgets
• upload images directly which also adds them as page media
• check image metafiles for default alt/title/caption to populate, which can be overridden per embed
• drag images from page media OR a toolbar with names and thumbnails of available media (basically an easy way to embed existing images)
• intelligent selection actions following cursor: e.g. edit a link or an image embed
• gallery and lightbox tools (maybe achieved by integrating with shortcodes)
• ability to add classes to some elements, ideally a selection of classes available in CSS (probably difficult!)
• ability to choose whether to use relative, site-relative, or absolute URLs for links and images
• customisable miniature dropdown forms to embed structures like product references or maps.

Not too much! 😉

I implemented some of these with varying success in my past attempts. I will see if I can set up a demo or post some screenies.

Workin:

Quite happy with the progress... still some miles to go to make a typesafe, vue-based advanced editor...

It's not so much about WYSIWYG, it's about in-line, in-context object editing, that's the real challenge... Contents may and will mix objects: images, math, diagrams, tables... no solution, not even WORD or PAGES are WYSIWYG in all of these contexts... We can rely on pure text for math formulas or diagram instructions but we want to be as WYSIWYG for many other things, even for basic table editing or code blocks... to implement easy and straight-forward editing for different types of content chunks... distraction free editing... more with less editing...

A little joke 😄

Probably this month I will publish an editor project based on remark, unified, etc. on github. Once it's on github it does not mean that it's ready for release to the wild, i18n integration, GRAV plugin and configuration support and a lot more won't be available out of the box. What will work, a basic setup with Commonmark, GFM and some GRAVFM (Grav flavoured markdown :-)) in a side by side WYSIWYG and a Codemirror Markdown instance... Markdown will never allow for a full-fledged WYSIWYG-editor but there are ways to make editing much more user friendly.

What's available now in my development:

• side by side markdown and wysiwyg/m
• support for html snippets
• support for underline
• support for tables with basic table editing features
• slash fast edit actions to add content chunks, e.g. image, link, math, diagram, code blocks
• special emojis slash tool
• handy inline text format tool for bold, italic, link, underline, strikethrough
• nice inline handling tool for links and images
  (you can find many of those in the react example, but not all, I've added some new stuff, integration but as a little challenge I wanted to port most of these things to vue to learn things about Milkdown.)

I will provide some basic typography handling for ellipsis, etc. as well before publishing with the idea to provide examples... What's for sure, I want collaborators and people willing to push things much further... I've stated this already and I repeat, I'm to old for this shit...

In the end there will be two "editor" approaches provided by me for GRAV:

• StudioEditor
• MilkdownEditor

Both of them are valid approaches...