Rich-markdown-editor: react Dropbox Paper clone | Hacker News Reader

Rich-markdown-editor: react Dropbox Paper clone

github.com

83 pointsrgbrgb21 comments

I wish there was a demo of this somewhere without having to create an account. Hard to evaluate an editor component without one.

Not the op, but similar: https://prosemirror.net/examples

That's what it's based off of,and I think I found my next editor for a project. It's pretty sleek.

OP looks like it's based on Prosemirror:

"A React and Prosemirror based editor that powers Outline.."

FWIW: I was researching editors that supported live Markdown shortcuts (similar to Dropbox Paper) a while back, and found these alternatives to ProseMirror:

HyperMD: https://laobubu.net/HyperMD -- based on CodeMirror

Quill Markdown Shortcuts: https://github.com/patleeman/quill-markdown-shortcuts - plugin for Quill.js

Both have their pluses and minuses. I found HyperMD to be too heavy and opted for Quill + Quill Markdown Shortcuts for my project.

Bit late to the party, but it seems someone put up a demo here: https://codesandbox.io/s/qv10xzjw9j

I use this for a short-cut driven note-taking app I've built, https://mmap.it. Excited to see it get some recognition, it's by far the best wysiwyg editor I've found. Best of luck with outline!

The current title calls it a "react Dropbox Paper clone". Since you use it, I'm curious if you have a sense of how close it gets, and what the gaps are?

Full disclosure: I don't have a ton of experience with Dropbox Paper. From what I've seen there aren't many gaps. There are a few markdown elements in paper that I think have cleaner styling (i.e. lists). I also prefer the automatic syntax highlighting and table UI with dropbox paper. That being said, as far as inline markdown editors go, they are quite close.

Based on the URL of getoutline.com I was hoping it would be an alternative to Workflowy or Dynalist. I wish there were more web outliners.

But for a self-hosted markdown wiki, this looks great. A local authentication option would make it even better (currently uses Slack or Google OAuth).

Is this actually a self-hosted markdown wiki? The description of the repository makes it sound like this is just the editor. The actual "wiki" part doesn't seem like it is open source/self-hosted, you have to use their website.

This is the corresponding wiki, which is also apparently open source and can be self-hosted and lives in the same GitHub org as the editor: https://github.com/outline/outline

Not open source, but fairly freely usable, just don't offer it as a paid service to others: https://github.com/outline/outline/blob/master/LICENSE

The best markdown editor component I've found so far is tail.writer[1] – full-featured and has many themes, including one that looks just like GitHub's comment box.

[1] https://github.pytes.net/tail.writer/

There are two useful features I've found to be rare among markdown editors:

1) Inline application of markup. Discord does this for example. If you write text like this, the message preview retains the '*'s, but the text inside is italisized.

2) Persistence of text formatting when pasting from rich text. Roam Research does this. If I'm copying-and-pasting some rich text with e.g. a link in it, the link will be converted to the markdown format and then pasted.

I think to have a truly great markdown editor you need both of these things, but I've never seen an open source one with support for both. I've had a mind to find one and implement them myself, I might try that with tail.writer.

Something like SimpleMDE ( https://simplemde.com/ ) ?

EasyMDE is the active fork.

https://github.com/Ionaru/easy-markdown-editor

Visual studio code does #1 for me if I'm editing a file with a .md extension.

I don't think it's plugin related, but if it is it'd be one of the top search results.

Discord's input is built on-top of Slate.js [1], which is sort of a more React-based alternative to ProseMirror. I've thought about building the same functionality on ProseMirror but I've always thought, inline decorations only work when you have a small number of marks. For example, you could have `~~==b==~~` be valid markdown, but not nice to look at.

[1] https://www.slatejs.org/examples/markdown-preview

I used this for my blogging platform at https://mdxblog.now.sh.

But i wish it could integrate MDX content, too, so that we could get live React component, too.

This is indeed the best markdown wysiwyg experience I have ever had. Good job @the authors, and thanks for open sourcing!

How about search in Outline? What’s behind it?

I'd never heard of Outline before but when I clicked through to their site, it looks very interesting. It looks like it's half wiki and half Evernote (ie a wiki organized into notebooks).

Outline is a terrible name for it though.

Reply on news.ycombinator.com