Show HN: Writebin, an inline markdown editor | Better HN

Show HN: Writebin, an inline markdown editor | Better HN

49 comments

daGrevis12y 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.

roryokane12y 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.

thauburger12y ago

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

thauburger12y 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.

chrismorgan12y 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.

ryanlbrownOP12y ago

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

chrismorgan12y 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.

evv12y ago

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

tommorris12y 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_coyote12y 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.)

kordless12y ago

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

voltagex_12y 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?

yukinon12y 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.

ryanlbrownOP12y 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).

sigsergv12y ago

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

jkrems12y 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.

McGlockenshire12y 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.

jheimark12y 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.

ryanlbrownOP12y 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.

flavor812y 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.

thauburger12y 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.

flavor812y 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_b12y 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!

thauburger12y 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__12y 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

agumonkey12y 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

thauburger12y ago

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

aleem12y 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?

ryanlbrownOP12y 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.

wsc98112y 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?

jraedisch12y 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.

shakesbeard12y ago

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

bowerbird12y 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

__pThrow12y 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.

ryanlbrownOP12y ago

Noted. Thanks!

pokstad12y 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).

ankit8412y ago

Looks like AdBlockPlus blocks it!

Filter in effect '/logger.js'

ryanlbrownOP12y ago

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

chrismorgan12y 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.

ryanlbrownOP12y ago

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

voltagex_12y ago

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

ofxartem12y 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.

mahdix12y ago

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

ankit8412y ago

Some feedback:

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

ryanlbrownOP12y ago

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

thauburger12y ago

Thanks for the awesome feedback.

j / k navigate · click thread line to collapse