JQuery Notebook – A Medium-like editor wrapped inside a jQuery plugin | Hacker News Reader

JQuery Notebook – A Medium-like editor wrapped inside a jQuery plugin

raphaelcruzeiro.github.io

112 pointsrcruzeiro62 comments

Really nice. Great to see someone putting attention into WYSIWYG rather than yet _another_ Markdown editor. And it supports keyboard shortcuts too (cmd-B, cmd-I etc.)!

Only suggestion I'd make is to speed up the transition when the palette moves around, or maybe replace it with a fast fade in/out - the animation gets in the way.

Would you say that it is the animation itself (the bubble moving from its previous position) or the duration of the animation?

Thanks for your feedback!

I would say that is the animation itself, intead following me around from the previous point, i would like that just appear below me with a shorter duration, also the style seems a little bit dated.

Yeah, looking at it now it seems iOS < 5.

What do you think about no gradients and no transparency? Something flat-ish?

The transparency is fine maybe a 0.8 in the alpha channel would do the job, the color is there but the gradient is too harsh, the border line is just there with not purpose and lastly the bubble take so long to hide after i am finish with it that annoys me. Other than that is a great project, i will give a shot to the source code later. Cheers

I removed the gradient, the border and the transparency. It's looking better now. I'll now make some experiments with shortening the animation time.

The main issue is that the bar moves location. It's really jarring. It would be better if it just sprouted above the text I was editing, instead of flying in to position.

Other than that, great job, impressive work.

Agree, the animation is distracting. I'd rather that the bar fade-in (quickly) in place. Otherwise, this is awesome, and I'm going to use it.

I'll work on the animation then.

Thanks for the feedback!

Yeah, I think the animation as "move-from-previous-place" is a mistake, in that I don't think it matches our mental model (or my mental model) - I don't think of the toolbar as something that remains tied to the place I was previously editing after I stop editing there.

Thanks but I think I'll stick with this little gem.

https://github.com/daviferreira/medium-editor

Didn't know that one thanks!

For your projects, do you consider the fact that this component does not depend on a specific framework to be a positive thing? I ask because when I started writing my editor, I considered to go jQuery free, but then I decided to stick with jQuery and create it as a jQuery plugin since people are used to components wrapped this way.

If I were building a project that used jquery, then this would be a good thing.

But these days I prefer things to be as vanilla as possible. jquery is becoming more of a burden than help given how much better modern browsers are becoming.

In the not-too-distant future I picture myself stripping jQuery from my projects, so the less tie-in the better.

How exactly is jQuery a burden?

How jQuery is a burden beyond the extra 32kb gziped file that the browser have to load? Please don't try the " i am cool because i hate jQuery" mantra. Cheers

I personally prefer libraries without dependencies when possible.

Edit: http://YouMightNotNeedjQuery.com might be of assistance

Now it's a race, if jQuery Notebook gets up to snuff by the time I need it, I'll use it, if not, Medium Editor it is (personally, I don't care if I have jQuery or not, I'm a pragmatist).

Stay with jQuery but focus on building an awesome media handler.

The other medium-editor repo isnt focusing at all on handling user-uploaded media and that really sucks.

I would switch immediately if you had baked-in integration for

-Youtube inline upload -Images upload

But again, thats just my opinion. The other repo is pretty significant and gaining a lot of traction but I think they will end up relying completely on 3rd parties to handle assets. I think if you focused on media, you could compete and be a more beginner-friendly editor.

Best of luck to you, I love the Medium editor and may end up sending you some pull requests if you keep this thing going.

Video and image are definitely on the roadmap. As soon as I get the issues related to the standard editor features out of the way I'll begin to implement image and video.

I will definitely be following along. It looks like many others will be too.

Quick note - if I delete everything in the textarea, I can't undo to get back to where I was. Strangely this is something I do often - not sure why.

This is something I hadn't tested. I'll take a good look on this issue. This execCommand thing is new to me. I had never used it before I decided to create this editor.

Like it. Making text H1 or H2, it's impossible to make it normal text after. Is that a bug?

It is not yet implemented. The issue is already listed on Github. It should be a 2 minutes task to implement it.

Github user TrevorHinesley has sent a pull request for this issue and it has already been merged into master ;)

Interesting piece of work - 2 related scroll problems. When you paste a long piece of text in your editor: - the palette doesn't position near the text where you double click (it remains at the top of the document) - any undo action, which change text below the fold doesn't scroll the editor where the change occurs. Good luck with that promising project. Most people who took the contenteditable route to build an editor (ace and codemirror for instance), eventually decided to fully implement the editor themselves...

Thank you for your feedback. I'll take a look on these issues you reported ;)

Love it!

But, you need lists. In fact, I'd either document the exact commands you have implemented, or implement all the commands Medium offers, since you're inspired by Medium:

https://medium.com/help-center/128f049a7ad

I want to use this, but I need lists before I do. I'll be using it to write interviews with breweries around the world in a brewery site I'm building.

* Note: I've never used Medium, so needed to Google what commands it has to offer.

Thanks for the feedback! Lists are definitely on the way!

We now have support for numbered an bulleted lists ;)

Am I the only one who reads 'wrapped inside a jQuery plugin' and thinks 'great, yet another awesome-looking library rendered completely useless'?

I get why someone might dislike jQuery plugins, but to think that something is "completely useless" by being wrapped in a jQuery plugin is, IMO, a little extreme.

I'm ambivalent to jQuery plugins themselves, as I simply don't use jQuery. Therefore, any code 'wrapped in a jQuery plugin' (as opposed to, for example, writing well-designed, generic JavaScript objects and providing a jQuery plugin wrapper) is useless to me.

As it is to anyone who's not living in the past, where jQuery's presence in an app was an article of blind faith.

"Fork me on Github!"

It's cool to hate on jQuery right now (for some odd reason), but don't let that get you down. This is an awesome start and I'll definitely be keeping an eye on it.

We do a lot of front-end editing on WordPress and this might make a handy replacement for the bulky tinyMCE that gets used.

Thanks man!

There are still a few thing missing for the first official release but I think we're getting there real soon ;)

I much prefer editing like this than in markdown!

FYI, when I hit "enter" I expect a new paragraph to be created.

Thanks for your feedback!

If there is any behaviour that you consider weird, or any feature that you think is missing just create an issue on Github. Also, pull requests are more then welcome ;)

Fixed!

How do I remove hyperlink markup from a piece of text?

It's still not possible to remove a hyperlink. I have created an issue on Github https://github.com/raphaelcruzeiro/jquery-notebook/issues/35

Thank you for pointing this out!

This is cool. Is there anyway you could get markdown (or some similar format) to work with it. Essentially this (http://mangomarkdown.com/) but open source. That would be awesome!

It's certainly an interesting challenge to make the plugin output markdown and I have also considered it. I think that if there are people willing to contribute to this feature we could do it.

I think it may well be worthwhile to do so... In the past, I used pandoc to go from html segments to markdown in order to scrub/cleanup imported input... the eventual goal was to support markdown as a base input in the editor, with a side-by-side view.

I like markdown a lot, but I think the point is to "learn" markdown, and maybe an editor with a side-by-side preview is better if that's your target? The point of markdown is to be a slightly enhanced text input.

Cool! Ya, I have a project that is on the back burner I am planning to work on at some point in the near future that I would like to use. I have started playing around with Codemirror and the newish texteditable HTML tag to see what could be done!

I like githubs flavor of markdown, because I would like the ability to perhaps make todo lists (and maybe other things that may be useful).

I'm curious: what is the point of markdown if you're using a specialized visual editor to write it?

Markdown is still a simpler, more lightweight markup than HTML. Storing text in Markdown is good when conversion is not just to HTML but other formats (e.g. EPUB). Even if the text is always going to be converted to HTML, it would make changing the HTML output more straightforward.

Thanks, makes sense.

I definitely like Markdown's simplicity, but sometimes it feels limiting because the content I am creating includes block elements and special styles that are not in markdown's vocabulary (like a block for a warning).

Nice plugin. There is another project( https://github.com/sofish/pen) similar to this that supports lists and also can be used with markdown

I took a look at this project when deciding if I should implement my own. I think both my project and pen editor are going to make each other better with a little competition ;)

Love it, very nicely done. The only issue I have is with the animation (movie the popup from the previous position to the current one). It looks nice but it's off-putting. A fade-in/out would work fine.

Is it just me or is there a lot of spacing in between lines? Every time I hit return, it feels like I've hit 3 returns.

Overall, impressive! Would pay for a quality and light one of these.

This is just a question of styling. You can set the margin for p elements on your own css ;)

You can't press Enter to line break. Was that intended?

Short answer: No it is not but it's already fixed ;)

Long answer: The editor mode in the default options was mistakenly set to 'inline' and as the demo does not set this option the editor had the new paragraph feature locked.

I wonder if anybody would wrap this into a open-source wiki project.

I'm currently looking at open alternatives to Confluence, haven't found anything that's as easy to use on the editing front.

I'm surprised no one has tried to emulate Quip's editor yet

https://quip.com/

There isn't an indication of what that might be on that page.

It didn't work on android Browser, what a bad.

Mobile support is on the way ;)

CKEditor 4 also supports inline editing like this.

very nice.

Reply on news.ycombinator.com