Show HN: Writebin, an inline markdown editor

Show HN: Writebin, an inline markdown editor(writebin.io)

67 points by ryanlbrown 12 years ago | 49 comments

daGrevis 12 years ago |

This is really cool and I'm really a big supporter for this type of editors!

Some suggestions:

* There should be an option “demo page“,

* Paragraphs should be drag-n-droppable,

* Arrow keys should take me to the previous/next paragraph,

* There should be “a plus icon“ above and below each paragraph,

* Inline editor should contain buttons for “bold“, “italic“ etc..,

* Pressing “the bold button“ when there's a highlighted word should wrap it in two stars etc.;

Is the thing open-sourced? I would like to help improve it and use it in my blog for writing things.

roryokane 12 years ago | |

The buttons for surrounding text with one or two asterisks/underscores should not be “bold” and “italic”, but rather “strong” and “emphasized”. Those are the HTML tags they generate, which need not look bold and italic. To generate actual <b> and <i> HTML tags in Markdown, you have to write them inline; there is no syntax shortcut.

Also, to add on to your suggestion that buttons should interact with highlighted words, the link-making button that already exists should also wrap a highlighted word with the link instead of overwriting it. For example, if “here” is highlighted, clicking the button should replace it with “[here](|)”, where ‘|’ is the cursor.

thauburger 12 years ago | | |

Great point regarding link insertion. We'll definitely add that to our todos. Thanks!

thauburger 12 years ago | |

@daGrevis thanks for the kind words and feature suggestions. Based on the feedback, it looks like we'll be focusing on better inline navigation support very soon. We haven't talked about the open source route, as we wanted to get a base editor up and running first. We'd love for you to beta test though, as blogging is definitely a use case we'd love to make better.

chrismorgan 12 years ago |

You might want to be careful about security. Here's a harmless (at the time of writing!) XSS vulnerability: http://writebin.io/d/GTFx9CxV

    <img onerror='alert("uh oh")' src=z> ← that there is an example of the sort of security hole (XSS) this has. Remember: Markdown is by default a *horribly* insecure format.

ryanlbrown 12 years ago | |

Thanks for pointing this out. Haven't had much time to consider things like this yet.

chrismorgan 12 years ago | | |

I have this request: could you please make security your first priority when you design things? If you leave it until later, it'll keep on being left until later, and it's far too likely never to happen. At the very least, it is likely to be significantly more expensive to implement later and is more likely to have holes.

evv 12 years ago | |

Gruber's decision to include html in the markdown "spec" has always perplexed me.

tommorris 12 years ago | | |

The point of Markdown is to abstract away the common HTML use cases in a markup format. There's plenty of HTML semantics where mapping them into Markdown would be both painful and unhelpful. Like, I'm probably one of a small number of weirdos who uses code, samp, kbd and var. Good luck turning those into blobs of memorable punctuation.

Sometimes I want to put custom attributes on links: rel and class, but also RDFa attributes like property and classof. Without the ability to make a link the old-fashioned way, you can't do that.

Markdown gives shortcuts for the common stuff and allows authors to use HTML tags for the fiddly bits that it doesn't optimise. Markdown without HTML fallback for the use cases Markdown doesn't optimize for would make Markdown fairly useless.

If you went the other route and tried to turn all of HTML into Markdown syntax, you'd have an unusable language. Including HTML is the least bad of the options, IMHO.

chipotle_coyote 12 years ago | | |

I'm pretty sure that's because Markdown was written specifically for pre-processing HTML blog posts. It was never meant to be a full-on replacement for HTML, but simply a way to make the HTML that you're most likely to use when writing such a post easier to write. If I'm the only person who can post to my blog, there are no security issues introduced by using Markdown. (Or at least, no more security issues than would be introduced if I could use pure HTML for posting on my blog.)

kordless 12 years ago | |

You have to be pretty careful with it, but you can use Bleach to white list the tags.

voltagex_ 12 years ago |

This looks great. I did think the demo would be like http://raphaelcruzeiro.github.io/jquery-notebook/ - might be a good "distraction-free" mode.

Offtopic: where can I learn to make sites that look like this?

yukinon 12 years ago |

This looks really great, and I had fun playing around with it.

One small thing that stuck out: there isn't any way to make a newline. You have to make an entirely new comment. Or is there some shortcut key I'm missing? On a lot of text editors, it's Shift + Enter.

ryanlbrown 12 years ago | |

You're right. We chose not to allow hand-wrapped paragraphs because the newlines have no effect on the resulting rendered HTML. In some cases, it will allow newlines (lists, blockquotes).

sigsergv 12 years ago | | |

It would be great to autoindent next line when writing code blocks (that start with 4 space, for example).

jkrems 12 years ago | | |

It was one of the first things I tried and it immediately disturbed the normal flow. Markdown normally allows for a "one line per sentence"-style. If you are used to that, the current behavior quickly becomes annoying.

McGlockenshire 12 years ago | | |

This breaks simple things, like trying to do multiple lines of four-space indented code formatting, for example.

It also breaks trying to type out quotes and nested quotes.

jheimark 12 years ago |

This is great stuff. Writing markdown is much more rewarding when it pops as you write it like this. I usually write using half of my screen, using another window as a reference, so side-by-side never works for me. This works well!

small suggestion: would be great to have a way to navigate by keyboard between paragraphs (tab / shift-tab?). if that feature exists, I couldn't find the keystrokes.

ryanlbrown 12 years ago | |

Thanks for trying it out. We spent some time trying to get arrow keys (and crtl+p crtl+n) to move to the next/previous paragraph when you hit the bottom/top of the current one, but a cursor position bug prevented that from working so we cut it for now. This something we definitely want though, we'll bring it back as soon as we can.

flavor8 12 years ago |

I'm bothered by the overuse of the word "beautiful". Please reconsider using that to describe your product. It's 2013's "epic".

Also, you need much better keyboard support. Jumping between sections shouldn't require using the mouse.

thauburger 12 years ago | |

I think that's totally fair feedback regarding the product description. Any suggestions? Also, we agree on the inline navigation. There's some complexities based on the limited information textarea exposes regarding caret positions, but we'll be working on an alternative solution.

flavor8 12 years ago | | |

I'm not convinced that you need an adjective to describe the documents. Describe the process/tool instead.

Something like: "An elegant markdown editor for..."?

j_m_b 12 years ago |

It seems every time I have a dream for something, it appears on HN the next day!

In academic writing, everyone I know uses MS Word. My fantasy is to use a markdown editor that could take the generated html and produce pdf's. If this editor had a way to generate insertable references along with nicely formatted tables, it could easily be a replacement for such a thing.

It would also be nice if something like this had a git backend to it that would allow a version control of the document that allowed multiple authors to contribute. Also, author notes would be nice. Anyhow, that is my wish list. Awesome project.. really dig the simplicity!

thauburger 12 years ago | |

That's a great use case that we'd love to support. I like the versioning suggestion as well. Thanks for the great feedback!

__david__ 12 years ago |

Firefox 28 beta: I end up with an all white screen and this in the javascript console:

    ReferenceError: _Logger is not defined toolbar.js:1
    TypeError: ToolbarView is not a function app.js:1

agumonkey 12 years ago |

For a reason, new documents show an empty page under:

    Chromium Version 32.0.1700.107 (248368)

console shows:

    GET http://writebin.io/f/js/logger.js  2ZNsPsJy:21
    Uncaught ReferenceError: _Logger is not defined toolbar.js:1
    GET http://www.google-analytics.com/analytics.js  2ZNsPsJy:29
    Uncaught TypeError: Property 'ToolbarView' of object [object Object] is not a function app.js:1

thauburger 12 years ago | |

Thanks for pointing this out, we'll take a look.

aleem 12 years ago |

This is an awesome concept for markdown UI. I know this is still in early stages with more features coming but allowing up/down arrows to move between blocks would make it a lot easier to navigate.

Undo doesn't work which is kind of annoying. That is something that plagues most of the editors using ace, showdown, et al. Could you get away with just text areas?

ryanlbrown 12 years ago |

We're trying to deviate from the common side-by-side pattern. It's not perfect, but we couldn't wait any longer to share it. We're working on accounts. Be sure to leave your email in the sidebar if you'd like to participate in the Beta. Let thauburger and I know what you think. Thanks.

wsc981 12 years ago |

Nice work. I did encounter a double space "bug" when editing existing content. Visually the double space won't appear in the HTML output, but you do notice it while editing and is slightly annoying.

Perhaps a "write to PDF" feature could be a nice addition?

jraedisch 12 years ago |

Support for selecting your inline position per touch on mobile browsers is missing. I often start a list by writing a sentence and adding the "-" afterwards.

Otherwise it is very useful. I would love to use something like it for my own projects.

shakesbeard 12 years ago |

Shameless plug for http://bigwhoop.github.io/lyme/. It's a jQuery plugin, open-source and supports up-and-down movement via hotkeys. ;-)

bowerbird 12 years ago |

i am polishing an app that's "highly similar", (a.k.a., nearly identical), so... first of all, let me compliment you on your excellent insight. :+)

your website says "accounts coming soon". and i'm curious what that means. whatever it is, i should probably inform you that my app is javascript that works exclusively client-side, saving where you like, including your own site. (with a "last-resort" option to save on my site) and i will be encouraging people to _take_it_, for free (as in beer and speech), which means there might not be much money in this arena...

-bowerbird

__pThrow 12 years ago |

Looks good, though I wish it had emacs bindings to search back and forth and move through paragraphs and lines.

I also wish it had support for various markdown extensions like table of contents and in page anchors.

But certainly looks terrific.

ryanlbrown 12 years ago | |

Noted. Thanks!

pokstad 12 years ago |

Cool product, but when I read "inline" I thought it would render the markdown in real time (this editor waits until you press Enter to go to the next paragraph).

ankit84 12 years ago |

Looks like AdBlockPlus blocks it!

Filter in effect '/logger.js'

ryanlbrown 12 years ago | |

Oops. Thanks! I'll try to get that fixed :)

chrismorgan 12 years ago |

Things that go across more than one line more or less don't work; for example, links where you specify the target on another line.

ryanlbrown 12 years ago | |

We don't have a solution for reference style links yet, but lists, blockquotes, and code should work.

voltagex_ 12 years ago |

You have no contact details in your profile or on writebin.io - someone here has posted an XSS vulnerability.

ofxartem 12 years ago |

because you cannot host jQuery on your own site, you may or may not need jQuery.

edit: turns out, adblock didn't like logger.js. but the jquery and underscores are still refusing to be served. You may or may not need underscore as well.

mahdix 12 years ago |

Excuse me for being skeptic, but what is the problem you are going to solve?

ankit84 12 years ago |

Some feedback:

When you say inline, I expect up/down arrows to work.

ryanlbrown 12 years ago | |

We do too, but it wasn't working well enough so we cut it out for now. It will come back soon.

thauburger 12 years ago |

Thanks for the awesome feedback.

GET http://writebin.io/f/js/logger.js 2ZNsPsJy:21 Uncaught ReferenceError: _Logger is not defined toolbar.js:1 GET http://www.google-analytics.com/analytics.js 2ZNsPsJy:29 Uncaught TypeError: Property 'ToolbarView' of object [object Object] is not a function app.js:1