v3.0 brainstorming and future plans

[linkesch]

This is just an issue for brainstorming what v3.0 might look like.

Version v1.0 added a lot of new dependencies: handlebars, jquery-sortable, blueimp-file-upload (which has a few dependencies on its own). Including the plugin to your HTML now unfortunately looks like this:

<!-- CSS -->
<link rel="stylesheet" href="bower_components/medium-editor/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="bower_components/medium-editor/dist/css/themes/default.css" id="medium-editor-theme">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">

<!-- JS -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/medium-editor/dist/js/medium-editor.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.min.js"></script>
<script src="bower_components/jquery-sortable/source/js/jquery-sortable-min.js"></script>
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js"></script>

So my major question for v3.0 is: what dependencies do we really need and what can we handle on our own. The idea behind v1.0 was to delegate as much responsibilities to other libraries as possible in order to speed up development, but right now I'm not sure it was the best decision. What do you think?

Maybe we could write our own upload and sortable functions using HTML5.

But what with handlebars? I like separation of JS and HTML. Is there a way to compile templates back to JS without a need to require a template engine in frontend? We don't need to use handlebars if there's a better JS template engine.

Last but not least - jQuery. This plugin started as a jQuery plugin for medium-editor, but I've been asked this question many times - do we really need jQuery if the plugin itself doesn't? Is there really a major advantage in using jQuery?

I started thinking about v3.0 only recently and the first thing that came to my mind were dependencies. What is your experience with the plugin? Do you want to get rid of dependencies, or you don't mind them at all? Or you may have another ideas for v3.0. Please, share your thoughts here.

/cc @ai @Jaza @j0k3r @nleush @vexus2 @KELiON @fbessadok @zh-daniel-huang @OmniaGM @BurnHavoc @brenfrow @enzoz @jonathonsim @tasarsu @Siron @olleicua @miloshadzic @flamerohr @merqurio @inssein @indrasantosa @iparamonau @jbellsey @maxkirchoff @scashin133 @bjrenfrow

[merqurio]

I still working on 0.3 due to all those dependencies that were added because I had to heavily modify the upload part (My server needs to be requested for the url to upload something before actually uploading it).

I'm little bit lost now with all those dependencies :cry:

[j0k3r]

We've integrated the plugin without the default addons. We use a custom one for embed, photo and link (but this one is related to Medium). Mostly because we need to pick embed/photo/link from our own database.

So we just use Handlebar for templating which seems ok to us.

I think it's still the best idea to use deps to delegate instead of reinvent the wheel. Maybe we can find some lighter deps.

About jQuery, it allows to speed up development but it could be a good idea to switch to Vanilla JS. But I guess it will required a lot of work in some case.

[jbellsey]

User modifications

I've monkey-patched the addImage routine, also to pick from an internal image list, with our own custom handlers. So I've removed all the blueimp dependencies from my application, but only by duplicating a bunch of plugin code in my app.

$editor.data('plugin_mediumInsertImages').add = myAddImageCode;

Gross. Extension should be supported by the plugin, since applications will differ so widely. Offering the user a way to modify/subclass/re-compose the plugin during configuration should be top of the list.

In fact, I consider the current implementation (using blueimp) to be a demo application, rather than functionality inherent to the plugin itself. In other words, addImage should be, essentially, an abstract method that must be overridden, or else you end up with a cat picture or something.

Handlebars

We've implemented this plugin in two applications. In one of them the HB dependency was a nightmare to deal with, because our application used an older version of HB. We had to change a lot of working code in the application to upgrade HB, just to use the insert plugin.

The value that HB is bringing to this plugin is very minimal. I tend to prefer a mini-templating engine that does basic text replacements, and offload any logic (looping, etc) to JS. At least for a simple implementation like this; for a full SPA it would be a different story, of course.

var template = '<img src="{{img}}" alt="{{alt}}">',
    output = interpolate(template, {
        img: 'http://placekitten.com/200/300',
        alt: 'meow'
    });

My interpolate routine is a 3-line function with a simple regex. Also, the templates themselves should be easily overridden, without necessarily requiring a grunt build.

jQuery

At the moment, jQuery shouldn't be a requirement. jQuery is providing less and less value these days, especially if you're willing to limit browser compatibility to IE9+. Just use ES5 methods and the DOM API directly; most of it is very straightforward.

[merqurio]

+1 to @jbellsey and his jQuery and handlebar arguments

[websirnik]

I'm following this project, but I never ended up implementing it just because of this dependency list. We are developing Angular app, and do not want to depend jQuery and Handlebars.

[linkesch]

Thanks for your thoughts so far. I see that dependencies are not the best thing for libraries, especially in frontend. My bad.

User modifications: @jbellsey, you're right, but this should be definitely done in the current version too. I'll add it as a separate issue.

Handlebars: I went through our existing templates and they are basically using only ifs and loops. We certainly don't need templating engine for that. The other reasons for using templates are having HTML in separate files and possibility to use new lines and not those horrible JS workarounds. And all this would be possible in the new ES6.

This brings me to an another idea. What do you think about rewriting the plugin to ES6 and using Babel to convert it back to ES5. ES6 will be ratificated this June and it will take some time until it's fully supported in all major browsers, but thanks to Babel we can take advantage of the future now. We could use classes, arrow, templates, defaults, ..., and other things. Many libraries are using ES6 already.

If we're rewriting the plugin to vanilla JS and ditching jQuery, why not to rewrite it straight to ES6?

[jbellsey]

Big yes on ES6. All of my projects are bundled with Browserify, and adding Babel to the build process is super-trivial. As long as you avoid features that require a polyfill (like generators or modules), the transpilation process is clean.

[daviferreira]

:+1:

[j0k3r]

100% agree

[indrasantosa]

Agree

[jamiebuilds]

Hey, Babel contributor here. Let me know if you guys need any help getting setup with or using Babel, or you can always drop by our support chat: https://gitter.im/babel/babel

[linkesch]

@thejameskyle Thanks :+1:

[linkesch]

I renamed this issue to v3.0 brainstorming since I was forced to release v2.0 which breaks backwards compatibility and works only with MediumEditor v4.12.0 and up.

[j0k3r]

v3.0 should definitely target MediumEditor v5.

[askehansen]

I agree with the dependencies.. Also i could use some more callbacks, specifically when starting upload.

[ideadx]

Can't we use dropzone js for file upload? that would help us move away from jQuery.

[rpastorelle]

:+1: Would love to use this with ReactJS (and not depend on jQuery). Would also appreciate NPM support.

[linkesch]

Here is the current state of v3.0: I started working on completely rewriting the plugin to vanilla JS, or ES2015 to be precise (transpiled with Babel). I ditched all the dependencies and we'll use as much HTML5 native function as possible.

Another big difference is that now the plugin will be created as regular medium-editor extension which will allow much closer integration. The reason why this wasn't so before is that I started this plugin way before medium-editor extensions became so capable. Back then extension meant adding custom button to editor's toolbar. Now extensions can do much more and we'll take full advantage of it.

Regarding NPM support, this is ready and it will be released in the next release: https://github.com/orthes/medium-editor-insert-plugin/pull/300. So you don't have to wait for v3.0.

And now about the current version: v2. The plugin reached almost 700 stars and I'm very happy that a lot of projects are using it. That's why we can't simply ditch it and expect everybody to move to v3. It will have completely different API, so if you're using your own customizations and you're overriding some parts of the code, you'll be stuck at v2. So I propose that we gonna continue supporting v2 in a separate branch. As you can see in pull requests, we're still trying to fix bugs and add new features.

When v3 will be release, of course our focus will shift there, but we'll still try to fix bugs and merge PR to v2. To make it simpler, I propose to feature-freeze v2 at that point. We'll make v2 as stable as possible, but new features will be added to v3 from that point on.

So until then, if you want some feature to be added to v2, please start working on it now. The list of proposed enhancements is here: https://github.com/orthes/medium-editor-insert-plugin/issues?q=is%3Aopen+is%3Aissue+label%3Aenhancement

[linkesch]

v2.3.0 was just released and we're finally on npm: https://www.npmjs.com/package/medium-editor-insert-plugin

It's not related to v3.0, but you asked about it.

[nicooprat]

Hi, do you plan to work on v3 again? Looks promising! ;)

[ouabing]

Hi, I'm also looking forward to v3. It seems like the 3.0 branch has not been updated for a long time. :)

[ghost]

How is v3 coming along?

[nicooprat]

I'm working with Meteor, and since then, I used v3 as it is (minus the toolbar part), and it's working pretty well. My use case is very specific and I kind of hard coded everything in my "fork", so it would be useless to publish it.

For now I'm using only Core.js, Plugin.js and utils.js. I was inspired from the images plugin to build new ones. ES6 imports work fine too, it's compatible with latest version of Medium Editor, and I rewrote the CSS myself.

So, I would say that if you can spend some time on it and have some JS knowledge, you could start using it now...

[vinyll]

Also agree to remove jquery and go for VanillaJS. MediumEditor is vanilla and it's a shame to require installing jquery on a project only for this plugin.

[keligijus]

Hey All!

Are there any plans to move along with v3, the no dependancies version?

[vinyll]

I've been using it with the v3. The pictures work ok but the embed video does not work. I'm planning to migrate down to v2 and include jquery only for that, which is a shame… It feels like this plugin for v3 has been dropped as the last updated was a year ago 😞

[keligijus]

@vinyll I'll give v3 a chance. At the moment I only need images, so this might work. Thanks for the update :)

[vinyll]

FYI @keligijus I experimented sometimes some difficulties with inserting text right after the image. Not sure if that's due to the v3, the plugin or whatever though. Works in most basic cases.

[keligijus]

Hey @vinyll, a bit of a dummy question, but is it possible to install v3 via NPM and if so, how can I do that?

[vinyll]

Not sure about that @keligijus. I personally use CDNs:

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.0/css/themes/tim.min.css>
<link rel=stylesheet href=https://cdn.rawgit.com/orthes/medium-editor-insert-plugin/3.0/dist/css/medium-editor-insert.min.css>
<script src=//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js></script>
<script src=https://cdn.rawgit.com/orthes/medium-editor-insert-plugin/3.0/dist/js/medium-editor-insert.min.js></script>