7 ms·

Show HN: Writebin, an inline markdown editor

67 points by ryanlbrown 13y ago

ryanlbrown 13y 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.
yukinon 13y 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 13y 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 13y ago
    It would be great to autoindent next line when writing code blocks (that start with 4 space, for example).
    - julianlam 13y ago
      Sounds like you're looking for tabIndent.js
  - McGlockenshire 13y 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.
  - jkrems 13y 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.
ankit84 13y ago
Looks like AdBlockPlus blocks it! Filter in effect '/logger.js'
- ryanlbrown 13y ago
  Oops. Thanks! I'll try to get that fixed :)
jheimark 13y 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 13y 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.
ankit84 13y ago
Some feedback: When you say inline, I expect up/down arrows to work.
- ryanlbrown 13y ago
  We do too, but it wasn't working well enough so we cut it out for now. It will come back soon.
__pThrow 13y 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 13y ago
  Noted. Thanks!
chrismorgan 13y 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 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 13y ago
  Thanks for pointing this out. Haven't had much time to consider things like this yet.
  - chrismorgan 13y 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.
    - ryanlbrown 13y ago
      No, but I want to, I really do. It's just that early designs are more useful if they're pliable.
- evv 13y ago
  Gruber's decision to include html in the markdown "spec" has always perplexed me.
  - chipotle_coyote 13y 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.)
ofxartem 13y 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.
chrismorgan 13y 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 13y ago
  We don't have a solution for reference style links yet, but lists, blockquotes, and code should work.
voltagex_ 13y ago
This looks great. I did think the demo would be like http://raphaelcruzeiro.github.io/jquery-notebook/ 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?
voltagex_ 13y ago
You have no contact details in your profile or on writebin.io - someone here has posted an XSS vulnerability.
__david__ 13y 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
thauburger 13y ago
Thanks for the awesome feedback.
jraedisch 13y 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.
aleem 13y 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?
daGrevis 13y 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 13y 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 13y ago
    Great point regarding link insertion. We'll definitely add that to our todos. Thanks!
- thauburger 13y 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.
shakesbeard 13y ago
Shameless plug for http://bigwhoop.github.io/lyme/ http://bigwhoop.github.io/lyme/. It's a jQuery plugin, open-source and supports up-and-down movement via hotkeys. ;-)
wsc981 13y 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?
flavor8 13y 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 13y 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 13y 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..."?
agumonkey 13y 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 13y ago
  Thanks for pointing this out, we'll take a look.
j_m_b 13y 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 13y 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!
pokstad 13y 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).
mahdix 13y ago
Excuse me for being skeptic, but what is the problem you are going to solve?
bowerbird 13y 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

67 points by ryanlbrown 13y 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.

yukinon 13y 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 13y 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 13y ago
  It would be great to autoindent next line when writing code blocks (that start with 4 space, for example).
  - julianlam 13y ago
    Sounds like you're looking for tabIndent.js
- McGlockenshire 13y 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.
- jkrems 13y 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.

ankit84 13y ago

Looks like AdBlockPlus blocks it! Filter in effect '/logger.js'

ryanlbrown 13y ago
Oops. Thanks! I'll try to get that fixed :)

jheimark 13y 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 13y 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.

ankit84 13y ago

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

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

__pThrow 13y 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 13y ago
Noted. Thanks!

chrismorgan 13y 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 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 13y ago
Thanks for pointing this out. Haven't had much time to consider things like this yet.
- chrismorgan 13y 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.
  - ryanlbrown 13y ago
    No, but I want to, I really do. It's just that early designs are more useful if they're pliable.
evv 13y ago
Gruber's decision to include html in the markdown "spec" has always perplexed me.
- chipotle_coyote 13y 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.)

ofxartem 13y 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.

chrismorgan 13y 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 13y ago
We don't have a solution for reference style links yet, but lists, blockquotes, and code should work.

voltagex_ 13y ago

This looks great. I did think the demo would be like http://raphaelcruzeiro.github.io/jquery-notebook/ 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?

voltagex_ 13y ago

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

__david__ 13y 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

thauburger 13y ago

Thanks for the awesome feedback.

jraedisch 13y 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.

aleem 13y 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?

daGrevis 13y 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 13y 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 13y ago
  Great point regarding link insertion. We'll definitely add that to our todos. Thanks!
thauburger 13y 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.

shakesbeard 13y ago

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

wsc981 13y 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?

flavor8 13y 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 13y 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 13y 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..."?

agumonkey 13y 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 13y ago
Thanks for pointing this out, we'll take a look.

j_m_b 13y 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 13y 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!

pokstad 13y 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).

mahdix 13y ago

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

bowerbird 13y 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