Studioeditor Editor plugin

A new and quite old Markdown and WYSIWYG Editor plugin you may use inside of the GRAV Admin. The editor is based on Stackedit.

The editor is named Studio Editor as it was developed for a propietary GRAV theme named Studio some years ago.

The current version 1.1.1 has been revised a bit and tested on a current GRAV installation. The plugin extends the default page blueprint but allows to extend your proprietary blueprints as well.

I may propose the plugin for inclusion in the GRAV plugins repository to allow for installation via the admin plugin.

Currently the Studio Editor requires or supports some additional plugins:

• Admin (required)
• smartypants
• webp
• prism-highlight

Please provide feedback.

u

Thanks for sharing! This is a significant gap for non-technical clients, possibly filled by the Premium plugin but I never found out because I couldn't afford it.

I made one myself based on Stackedit+ in the last year. I abandoned it when I realised how difficult Stackedit is to customise. Threads in their repo suggested that its author only wanted to scratch their own itch and had no interest in going beyond their own requirements at the time. So I would normally not bother sharing my repo because it's incomplete (not even a description!). However, you or someone else may find something useful there.

I put a bit more effort into Admin Addon Toast Ui Editor Plugin after that. A couple of clients are using it but it's still far from what I hoped. It allowed some customisations and I was able to add an upload widget (Stackedit required Google Drive), but ToastUI's docs are confusing and then I hit a wall. Reading open issues on its repo lead me to lose hope in developing it further. Such a shame.

I've done a serious amount of searching for other Markdown editors I might embed but they generally fit only what they were built for and can't be easily customised, or possibly can but have insufficient documentation. I continue to look out though. However, I suspect someone more comfortable with Typescript/JS could make something work.

I should add that it took me a lot of trial and error to figure out how to interact with Grav's media API via JS. That was disappointing.

Markdown is great, but many users do not envision how the markdown will be visualized. For this reason the StackEdit approach is great. In fact we see it here on discourse, we dispose of live preview which makes things a bit more intuitive, a bit more what you see is what you get.

Yeah, customization, even the first implementation was a beast, a heavy one and doing the revision now was near to overwhelming as I had to dive into a huge code basis I had forgotten about. Probably 60% to 70% of the files in the repository are not used at all, others are duplicated to allow for testing, e.g. Markdown.Editor.js.
During the revision process I spent some time for example on shortcuts, trying to make the shortcut events consistent with user expectations, e.g. inside of the editor you can use Meta key + B for example, if the focus is put on another element you would have to use Meta key + Shift + B for bold. This allows to use Meta key + R for reload if the focus lies outside of the StudioEditor field, or Meta key + b for bold if for whatever reason there's a build-in editor attached to an input in the blueprint.

Thx for your reply. You're welcome to collaborate, even to take over the project. I would even say that an editor like this should be build-in as an option right into GRAV for free. Would be a great addition which would for sure allow to broaden the user base.

Probably that's due to my lack of knowledge, but visiting the related posts section exposed below I found one WYSIWYG Editor - Really not available that includes some of my personal posts, especially the last two where I announce that I've achieved an implementation of StackEdit. Looking up Muut I found:

Muut

Studioeditor in action...

Studioeditor includes drag and drop for images as well...

@saveva:
Studioeditor includes drag and drop for images as well…

Definitely trying this soon then! I have a small list of features I think users who are not tech savvy expect, and some that would greatly improve their editing experience. I'll list those in an issue or discussion thread on Github sometime.

@saveva, @hughbris, I've been digging into several parts of the code and I'm getting the impression that the Stackedit code base, on which the plugin has been build, is a very very old version.

Stackedit has been abandoned in 2018/2019, but the code used in the plugin seems even older...

The fact that Stackedit has already been abandoned a long time ago, would, for me, already be a no go in itself. There is no support, no bug fixes, no nothing...

I don't think I would use this in paid assignments...

I've been looking around for alternatives, but unfortunately, I haven't found a suitable replacement (yet).

True, I've stated that this plugin is more than 6 years old. Nevertheless, at least at Github there are no security alerts and the code works perfectly. I'm fixing the blueprint problem right now. And why not maintain the code basis? This is well worth the price as one of the biggest problems for GRAV is the lack of a more user-friendly editor. A valid alternative path is to implement the editor basis build right into discourse we are using here. But that's not my call. I'm not really in the business anymore. Whatever the outcome, GRAV needs some improvements when it comes to Markdown editing. The concept of live preview makes things transparent and easier, close to WYSIWYG.

And yes, it's hard to find valid alternatives 🙂

Thx for the reply.

Hello @pamtbaau

Just to make things a bit clearer, it's true for example that you find a very old jquery library inside. As I stated, more than 50% is not used, the plugin uses for example the current jquery library from admin, 3.x. as you can see in the main.js

Probably it's a good idea to update many of the bower-libs and to recreate a valid json file for this as many of the libraries still receive their updates.

This reduces files to watch and maintain to extensions and to a rather small set of javascript files.

I've published v1.1.4 now with a bit of code cleanup. Putting more work into cleanup and update of the underlying libraries is a bigger task which I will undertake if I see that there's demand for the plugin.

First step would be to create a package json file for the libraries and to upgrade / replace and maintain libraries. I wrote this plugin many years ago for a project and didn't manage to prepare it back than for a public release.

Let's see what happens over the next weeks... and if the plugin with the fixes makes it into the available packages via GPM. Lacking approval by @rhuk for the GPM would be a showstopper. What's fair and correct is to include a message that the current code basis includes some rather old libraries, so everybody can decide if he feels confident using it. Will do so in the next release. Using it inside Admin makes it quite save as there's no frontend exposure and browsers accept the code without any warnings and errors.

I'm yet to try this plugin but feel like I should do so soon.

IMO it's better to make any future comments about problems to its repo's issues :person_shrugging:

Don't know how you've been trying to identify possible upgrade strategies, but there's definitely Markdown-it which will be my choice. The more important question: is there a need for a better editing experience in GRAV, I answered this question for myself with yes when I wrote StudioEditor more than 6 years ago. Is there a need for better editing experience in GRAV 6 years later? I'd say yes today as well.

@saveva,

@saveva:
Don’t know how you’ve been trying to identify possible upgrade strategies [...]

Not sure I understand what you mean by this. Do you perhaps mean Stackedit replacements?

@saveva:
[...] but there’s definitely Markdown-it which will be my choice.

Markdown-it seems to be a parser only and not an editor.

I've done some more research and found some viable replacements for Codemirror/Stackedit.

Motivation to replace Codemirror:
I guess your initial desire to create StudioEditor is to improve the UX for content creators/editors. The target audience of Markdown has never been the content creator (IMHO).

Possible replacements of Codemirror:
Improving the UX of the content editor could be done in several ways:

• Remain editing Markdown and show a live preview pane like Stackedit does.
  Sure this improves the UX somewhat, but unfortunately, the user is still editing Markdown.
• Using a single pane WYSIWYG editor.
  I think this is what most editors are used to: An interface like Word/Writer without bothering what happens under the hood.
  • This could be the popular TinyMCE which generates HTML.
    IMHO it doesn't matter what it generates, as long as the content creator is happy with the UX. And Grav will happily consume HTML and a Grav plugin is already available.
  • Other alternatives that do generate Markdown under the hood, are the modern frameworks like Slate.js (still in beta, see demo), Prosemirror (see demo with switching between Markdown and preview), and Quill.js (uses json, but Markdown plugin is available).
    As a bonus:
  • All three are actively maintained
  • They use modern modules
  • All three are created using Typescript... Hooray!

Agreed, as I posted, improving user experience when it comes to editing is the horizon, improving GRAV and the user basis of GRAV should be the horizon, with that said, every initiative is welcome. Will have a look in your findings. I would even say that a good editor shouldn't be a paid feature as a good editor makes GRAV more attractive and will allow to obtain more money for other paid services and plugins, but that's not up to me, to decide strategies, only thing I can do is to pinpoint some brainstorming. I've returned to GRAV after some years finding that some essential problems haven't been focused like I would focus them, but there may exist a lot of reasoning behind that's unknown to me and as a less frequent poster and member of the community, it's not up to me... Only thing I can do is offering some vision, Studioeditor, with all its shortcomings is an example. What's for sure, many years have past since I wrote this plugin and the little effort I put into it now to make it available publicly doesn't mean a thing, the idea behind does so.

And for the fun: Studioeditor is an editor build around a parser, that's what it's all about.

I remember now when I worked out StudioEditor, for my wife, never did any professional work related with GRAV, took me one week to do it, and it's more than 6, no 8 years ago, or more, I haven't updated the site of my wife for many years (https://tessa.es), for her website when she started to do ceramics, even put some effort into payment gateways, etc. Some of the stuff I released but without really taking care in the end, sorry. Did my real money with other sfuff. I don't want to sound harsh, maybe I'm too energetic returning after so many years. I wouldn't have done so without an artist, I'm doing a favor, Grav came to my mind and I re-descovered for myself that I've been doing a lot of stuff, nothing I would have agreed to be payed for, free stuff back than, and free stuff now. Sorry if I'm too intense @pamtbaau, that's a personal defect which won't be fixed at my age anymore. 😄 Not joking with my age by the way.

Or putting it straight: everybody is invited to do something better, and I'll be the first to use it... but for now there's nothing better than StudioEditor. For something more than 8 years old, incredible or problematic... Really, community, put your efforts into this. I already announced on GRAV that whoever wants to collaborate or even take over the plugin, welcome. If you feel about doing something different, great as well. Why can we edit with a Stackedit approach on Discourse and not in GRAV?

Should update the site of my wife, nothing available anymore, of what's exposed :-)

So many projects, the best to be together... don't loose yourself doing computer shit, that's the best advice I can offer...

@pamtbaau:
IMHO it doesn’t matter what it generates, as long as the content creator is happy

I was tempted to lean this way during my search because there are many more options for WYSIWYG HTML editors. The problem for me is that they create awful markup - inaccessible, non-semantic, bloated (e.g. layers of unnecessary or empty divs, inline styles). Many of the problems, I think, stem from not cleaning up after edits. I think tag soup creates problems that just keep building up over time. An obvious one for me, probably not others, is tracking edits with version control.

I think you can easily pick a few holes in what I just wrote. Markdown can also get messy with time and it is much less expressive than (i.e. a subset of) HTML. I guess I like how neatly markdown keeps content, I really dislike tag soup. HTML editors absolutely make sense if you don't care about that.

Also, I did look at Quill a while ago. Will check to see if I was disciplined enough to take notes about why I didn't proceed with it. Thanks for the other tips.

Interesting discussion, but I believe this is about StudioEditor not about alternative editing solutions. StudioEditor is a valid approach and whoever wants to use it, is free to do so. As there seems to be some need for discussion I would open a thread called Editing solutions for GRAV...