Show HN: Writebin, an inline markdown editor(writebin.io)
writebin.io
Show HN: Writebin, an inline markdown editor
http://writebin.io
49 comments
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.
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.
Great point regarding link insertion. We'll definitely add that to our todos. Thanks!
@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.
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 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.Thanks for pointing this out. Haven't had much time to consider things like this yet.
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.
No, but I want to, I really do. It's just that early designs are more useful if they're pliable.
Gruber's decision to include html in the markdown "spec" has always perplexed me.
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.
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.
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.)
I've used it for that, and the inclusion of HTML is sometimes a nice "escape hatch": you can write pages mostly in Markdown, but include inline HTML when you need to add formatting or interaction to a page that Markdown's own syntax doesn't support.
Some Markdown parsers have an option to sanitize embedded HTML, e.g. Discount, and its bindings in various languages, does a very basic s/</\</g when the "no html" option is used: http://www.pell.portland.or.us/~orc/Code/discount/
Some Markdown parsers have an option to sanitize embedded HTML, e.g. Discount, and its bindings in various languages, does a very basic s/</\</g when the "no html" option is used: http://www.pell.portland.or.us/~orc/Code/discount/
You have to be pretty careful with it, but you can use Bleach to white list the tags.
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?
Offtopic: where can I learn to make sites that look like this?
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.
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.
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).
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.
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.
It also breaks trying to type out quotes and nested quotes.
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.
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.
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.
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.
Also, you need much better keyboard support. Jumping between sections shouldn't require using the mouse.
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.
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..."?
Something like: "An elegant markdown editor for..."?
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!
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!
That's a great use case that we'd love to support. I like the versioning suggestion as well. Thanks for the great feedback!
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:1For a reason, new documents show an empty page under:
Chromium Version 32.0.1700.107 (248368)
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:1Thanks for pointing this out, we'll take a look.
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?
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?
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.
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?
Perhaps a "write to PDF" feature could be a nice addition?
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.
Otherwise it is very useful. I would love to use something like it for my own projects.
Shameless plug for http://bigwhoop.github.io/lyme/. It's a jQuery plugin, open-source and supports up-and-down movement via hotkeys. ;-)
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
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
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.
I also wish it had support for various markdown extensions like table of contents and in page anchors.
But certainly looks terrific.
Noted. Thanks!
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).
Looks like AdBlockPlus blocks it!
Filter in effect '/logger.js'
Filter in effect '/logger.js'
Oops. Thanks! I'll try to get that fixed :)
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.
We don't have a solution for reference style links yet, but lists, blockquotes, and code should work.
You have no contact details in your profile or on writebin.io - someone here has posted an XSS vulnerability.
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.
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.
Excuse me for being skeptic, but what is the problem you are going to solve?
Some feedback:
When you say inline, I expect up/down arrows to work.
When you say inline, I expect up/down arrows to work.
We do too, but it wasn't working well enough so we cut it out for now. It will come back soon.
Thanks for the awesome feedback.
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.