It's been a long time since I last blogged. I've tried many services to write something for my blog. Wordpress, Blogspot, Svbtle and the most recent one is Ghost. None of them stick, mostly because I'm lazy and forgot that I have a blog, partly because I don't know what to write.
The other reason is that every platform I tried always have something missing. Not because they're not great, but rather there's something I want to have that's either impossible (because of platform limitation) or hard because I have to learn the entire framework. I'm lazy after all.
I've known Medium for few times already. I really like their simplicity, and I think their editor is the best blog editor out there. But, my experience with blogging so far makes me hesitated on using Medium.
I want to create my own, but building copycat of Medium Editor seems like much harder task than extending my previous blog platform: Ghost.
Then I found Draft.js.
Draft is a Rich Text Editor framework built on top of React, Facebook's awesome UI library. Draft is different than any rich text editor out there, like TinyMCE, because it's just a small abstraction over ContentEditable. This is actually what makes Draft powerful. Building the editor itself only took a few days. Most of the time was spent on learning the Draft framework itself.
They've already abstracted common operation in text editing like undo-redo, copy & paste, and some optional basic styling like bold, italic and underscore. And by optional I mean you have to explicitly write the code to listen to key events and pass them through Draft utility to convert them into styling operation.
Long story short, I finished the MVP. It took much longer than building the editor itself, because of the integration part (which I will cover in the next post). The MVP only has a few features, like:
- Basic CRUD operation
- WYSIWYG editor
- Medium-style editor toolbar (when you select some text, the toolbar will appear)
- Multiple text types: paragraph, heading, list, quote, code block
- Markdown-based keyboard shortcut (e.g: when you write triple backticks it's automatically converted into code block)
- Draft mode for pending publish
- Autosave
These features are mostly borrowed from Medium. Heck, even the layout are the exact clone because I'm a big fan (and have no creativity). Sorry I can't show you in this post, because currently the editor doesn't support uploading pictures, even embedding pictures via hot linking is not available.
Also, see how you didn't find any link to other pages? That's because creating link is not supported yet. But overall I'm very pleased with this initial version because this allow me to write blog the way I want it to be.
I name it Paper, because it represents the vision I have on a blog platform: It should be simple and accessible to everyone. I'm really excited because I can finally write the journey of building a product from scratch that I actually use to improve itself. And I can't wait to see how it goes.
PS: Source code is not available, yet.