outline/rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:

A fast, collaborative, knowledge base for your team built using React and Node.js.
Try out Outline using our hosted version at www.getoutline.com.

This is the source code that runs Outline and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at getoutline.com. You can also find documentation on using Outline in our guide.

If you'd like to run your own copy of Outline or contribute to development then this is the place for you.

Installation

Please see the documentation for running your own copy of Outline in a production configuration.

If you have questions or improvements for the docs please create a thread in GitHub discussions.

Development

There is a short guide for setting up a development environment if you wish to contribute changes, fixes, and improvements to Outline.

Contributing

Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!

Before submitting a pull request please discuss with the core team by creating or commenting in an issue on GitHub – we'd also love to hear from you in the discussions. This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.

If you’re looking for ways to get started, here's a list of ways to help us improve Outline:

• Translation into other languages
• Issues with good first issue label
• Performance improvements, both on server and frontend
• Developer happiness and documentation
• Bugs and other issues listed on GitHub

Architecture

If you're interested in contributing or learning more about the Outline codebase please refer to the architecture document first for a high level overview of how the application is put together.

Debugging

In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.

HTTP logging is disabled by default, but can be enabled by setting the DEBUG=http environment variable.

Tests

We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.

To add new tests, write your tests with Jest and add a file with .test.js extension next to the tested code.

# To run all tests
make test

# To run backend tests in watch mode
make watch

Once the test database is created with make test you may individually run frontend and backend tests directly.

# To run backend tests
yarn test:server

# To run a specific backend test
yarn test:server myTestFile

# To run frontend tests
yarn test:app

Migrations

Sequelize is used to create and run migrations, for example:

yarn sequelize migration:generate --name my-migration
yarn sequelize db:migrate

Or to run migrations on test database:

yarn sequelize db:migrate --env test

Activity

License

Outline is BSL 1.1 licensed.

rich-markdown-editor's Issues

Deleting an image leaves a weird empty node

Reproduction steps

• Upload an image
• Select the image (blue outline)
• Hit delete

The editor will appear to lose focus but there is actually a weird node focused. Hitting delete again puts things back to normal.

Why is this package using forked Slate plugins (e.g. @tommoor/slate-edit-list)?

It looks like most of the Slate plugins for this project are forks. For instance, the @tommoor/slate-edit-list plugin a few years behind its parent project GitbookIO/slate-edit-list. In fact, it looks like there are two forks of slate-edit-list which have more recently been maintained:

• https://github.com/productboard/slate-edit-list (Most recently updated)
• https://github.com/GitbookIO/slate-edit-list

(Same goes for the slate-edit-code, slate-edit-blockquote, and slate-trailing-block plugins).

I'm guessing the older @tommoor/slate-edit-list npm module is being used for legacy/compatibility reasons? If so, why was it forked in the first place? Is there any benefit of looking into using the more recent plugin versions?

paragraph change to head1 if insert horizontal line after it.

Editing status:

After saving:

But it will be fine if there is blank line between paragraph and horizontal line.

No cursor on newlines

First off, thanks for this fantastic tool. I've spent many, many hours slaving over delightedly working with Slate and Markdown in Netlify CMS (integration if you're curious), and was hoping to find a drop-in solution like this for a separate project. Was quite glad to find it!

I've noticed the cursor isn't visible on newlines, whether in the empty editor or after pressing enter. This isn't the case in Outline, but it is when the Editor component is loaded by itself.

Repro here: https://codesandbox.io/s/1o0mkrv2pl

Any thoughts?

Creating a link from an empty selection triggers an error

At the canvas if you double-click at an empty starting line and select the link option, it triggers an error.

The error is triggered by a TypeError

Ability to reorder checkbox list items by dragging

ala github issues

Resetting state

Any interest in adding a method for resetting the state of the editor (to defaultValue or empty string, just like at load)? Dynamic import is the only way at the moment, but it'd be nice for a single instance to be able to reset on the fly, eg. when switching to a different entry.

Server side rendering

It seems that currently this component doesn't supports SSR. We are using Next.JS internaly and would like to use this to display our blog posts, but we can't only rely on client-side rendering because that would defeat the whole point of using Next, that is SEO for free.

I will push a PR with SSR support soon, this issue is here to keep track of progress !

Double clicking the first word after checkbox does not select the word

Instead the cursor moves to the front of the list item

Realtime editing

Hi,

I would like to know if it's possible to impl. realtime editing by feeding the slate value to the underlying slate editor when a document is modified in the database. It seems that now the only "defaultValue" is exposed...

Thanks!

Cannot create link in bullet point text

If I start typing or click the input field, the input goes away, see attached gif:

Build without So.js

slug imports So.js which is huge. Thoughts on moving to webpack compiling to ignore this on the package level?

For library users: add new webpack.IgnorePlugin(/unicode\/category\/So/) to reduce build size.

Override Styles

I see that you allow for overriding the variables in the theme but it would be really fantastic to override the CSS that is applied to StyledEditor as well.

Support multiple programming languages in the `code` block

I have a pretty nice implementation in plain SlateJS. Will try to port that over to RME. Let me know if this is a welcome addition, or any ideas.

Applying inline code mark should remove any existing marks

Reproduction Steps

• Make some text bold
• Make the same text inline code
• Bold should be removed, but isn't – you end up with bold inline code.

blank spaces at the beginning of line will change to code block

• Editing status:
  

• Edit done status:
  

thanks.

Drag & Drop of .jpg does not work on Chrome 72.0.3626.109 on OSX

It appears that the file type is being reported as image/jpeg and the slate-drop-or-paste-images plugin is only being initialized with a jpg type here: https://github.com/outline/rich-markdown-editor/blob/master/src/plugins.js#L46

Seems weird that the slate-drop-or-paste-images plugin is referring to 'extensions', as in file extensions, but what it's actually looking at is the MIME type reported by the browser.

Keyboard shortcuts on first line

I love what you've built here.

Problem:
Keyboard shortcuts (like bolding) do not activate marks on the first line of the editor. However, clicking "bold" from the toolbar seems to work. The shortcuts only seem to work after going to new line.

Disable plugins

How do we disable plugins like drag and drop image uploader or magnify image on click? If not how can I disable it

Block Insert trigger is activated based on mouse location in window, not parent element

If the intention is for this to be a somewhat general rich markdown component, the Block Insert trigger behaviour kinda prevents that, since it is looking at mouse position in relation to the width of the window to trigger itself:

    const windowWidth = window.innerWidth * 0.33;
    const result = findClosestRootNode(this.props.editor.value, ev);
    const newState = { ...this.state };

    newState.active = ev.clientX < windowWidth;

The assumption here is that the Editor will only ever be used in a circumstance where it's taking up the full page?

A more forgiving approach might be to just look and see if the mouse position is to the left of the target:

newState.active = result && ev.clientX < result.bounds.left;

This basically has the same behaviour as the window inner width calculation without behaving weirdly if the edit is used in a form, say.

Happy to open a PR if it'll be accepted.

Thanks!

Pasting bullet point list doesn't format as list

To reproduce:

Copy and paste this:

- Bananas are great
- Outline is cool
- Open source rocks

Into the editor

What happens?

Editor does not pick up the list as a list:

Expected

List is formatted as markdown list:

Warning: Expected server HTML to contain a matching <h2> in <div>.

I seem to get a lot of these errors in the console, is this normal?

index.js:2178 Warning: Expected server HTML to contain a matching

in

.

Sometimes it's also like can't find matching

in

Seems to be related to when I enable this editor

External plugin order

Hi again 😀,

I have a question regarding the additional slate plugins setup. It seems that currently additional plugins will be added after outline's plugins:
this.plugins = this.plugins.concat(props.plugins);

I wonder shouldn't the external plugins have a higher priority in the building sequence? Because external plugins can always default to the outline plugins by not processing in certain conditions but the not the other way around.

Best!

BlockToolbar light theme default icon color

Hi,
I saw that the light theme uses
blockToolbarBackground: colors.greyLight, blockToolbarTrigger: colors.greyMid, blockToolbarTriggerIcon: colors.white,
This make the block toolbar not really visible. I think we should probably use something other than colors.white for the trigger icon?

I can create a PR if needed.

PS: I have a general question regarding the relation between this repo and the outline repo. Are they always in sync? And for all issues regarding the editor, it should be put here?

Best

Markdown shortcuts in codeblocks

Looks like markdown shortcuts are applied when writing in a codeblock

Cannot run example

Running:

• yarn install
• yarn start

And then opening http://localhost:8080

Gives this error in the JS console:

Cannot find module 'regenerator-runtime/runtime'

node --version
v8.12.0

Editor will skip words usually when I use Chinese Sogou input method.

When I use Chinese Sogou input method in Mac OS, it will skip words very often.
This issue didn't happen before v7.0. Also I tried slate demo, it happened too, but very rarely.

Hope to get some help, thanks.

crash when delete last character of link

Also when select the whole line and click link ToolbarButton, crash too.

Thanks!

Dark image preview if editor is in dark mode

Opening an issue for this. Let me know if any objections. Will submit a pull request for it later.

Minified React error #185 on when adding a new document

I created a document in https://www.getoutline.com and while typing in it throws

Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at n.v.setState (react.production.min.js:12)
at n.t.componentWillReceiveProps (styled-components.browser.cjs.js:1748)
at updateClassInstance (react-dom.production.min.js:110)
at beginWork (react-dom.production.min.js:133)
at r (react-dom.production.min.js:160)
at i (react-dom.production.min.js:160)
a.(anonymous function) @ bugsnag-3.min.js:1
u @ react-dom.production.min.js:163
a @ react-dom.production.min.js:161
_ @ react-dom.production.min.js:167
w @ react-dom.production.min.js:167
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
handleChange @ index.js:204
Zt.onChange @ slate-react.js:4309
Zt.change @ slate-react.js:4280
Zt.onEvent @ slate-react.js:4296
n.(anonymous function) @ slate-react.js:4052
(anonymous) @ slate-react.js:2088
x @ debounce.js:95
(anonymous) @ debounce.js:105
w @ debounce.js:172
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at m (react-dom.production.min.js:165)
at u (react-dom.production.min.js:164)
at a (react-dom.production.min.js:161)
at _ (react-dom.production.min.js:167)
at w (react-dom.production.min.js:167)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
m @ react-dom.production.min.js:165
u @ react-dom.production.min.js:164
a @ react-dom.production.min.js:161
_ @ react-dom.production.min.js:167
w @ react-dom.production.min.js:167
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
handleChange @ index.js:204
Zt.onChange @ slate-react.js:4309
Zt.change @ slate-react.js:4280
Zt.onEvent @ slate-react.js:4296
n.(anonymous function) @ slate-react.js:4052
(anonymous) @ slate-react.js:2088
x @ debounce.js:95
(anonymous) @ debounce.js:105
w @ debounce.js:172
a.bugsnag @ bugsnag-3.min.js:1
bugsnag-3.min.js:1 [Violation] 'selectionchange' handler took 1587ms
[Violation] Forced reflow while executing JavaScript took 262ms
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseUp (index.js:97)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseUp @ index.js:97
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseDown (index.js:95)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseDown @ index.js:95
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at handleChange (index.js:204)
at t.Zt.onChange (slate-react.js:4309)
at t.Zt.change (slate-react.js:4280)
at t.Zt.onEvent (slate-react.js:4296)
at Object.n.(anonymous function) [as onSelect] (https://www.getoutline.com/static/0.bundle.6a6f34408928a1ae8001.js:1:225394)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
handleChange @ index.js:204
Zt.onChange @ slate-react.js:4309
Zt.change @ slate-react.js:4280
Zt.onEvent @ slate-react.js:4296
n.(anonymous function) @ slate-react.js:4052
value @ slate-react.js:2244
n.(anonymous function) @ slate-react.js:2120
L @ react-dom.production.min.js:25
invokeGuardedCallback @ react-dom.production.min.js:24
invokeGuardedCallbackAndCatchFirstError @ react-dom.production.min.js:24
Y @ react-dom.production.min.js:29
Q @ react-dom.production.min.js:31
te @ react-dom.production.min.js:31
X @ react-dom.production.min.js:30
ae @ react-dom.production.min.js:33
$t @ react-dom.production.min.js:92
qt @ react-dom.production.min.js:69
batchedUpdates @ react-dom.production.min.js:170
lt @ react-dom.production.min.js:53
Jt @ react-dom.production.min.js:70
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseUp (index.js:97)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseUp @ index.js:97
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseDown (index.js:95)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseDown @ index.js:95
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseUp (index.js:97)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseUp @ index.js:97
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseDown (index.js:95)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseDown @ index.js:95
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseUp (index.js:97)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseUp @ index.js:97
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseDown (index.js:95)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseDown @ index.js:95
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseUp (index.js:97)
at a.bugsnag (bugsnag-3.min.js:1)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
a.handleMouseUp @ index.js:97
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at handleChange (index.js:204)
at t.Zt.onChange (slate-react.js:4309)
at t.Zt.change (slate-react.js:4280)
at t.Zt.onEvent (slate-react.js:4296)
at Object.n.(anonymous function) [as onSelect] (https://www.getoutline.com/static/0.bundle.6a6f34408928a1ae8001.js:1:225394)
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueSetState @ react-dom.production.min.js:107
v.setState @ react.production.min.js:12
handleChange @ index.js:204
Zt.onChange @ slate-react.js:4309
Zt.change @ slate-react.js:4280
Zt.onEvent @ slate-react.js:4296
n.(anonymous function) @ slate-react.js:4052
(anonymous) @ slate-react.js:2088
x @ debounce.js:95
(anonymous) @ debounce.js:105
w @ debounce.js:172
a.bugsnag @ bugsnag-3.min.js:1
react-dom.production.min.js:13 Uncaught (in promise) Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueForceUpdate (react-dom.production.min.js:108)
at t.v.forceUpdate (react.production.min.js:12)
at e.onInvalidate (index.js:622)
at e.runReaction (mobx.js:2958)
at Qt (mobx.js:3086)
at Xt (mobx.js:3064)
at mobx.js:3093
d @ react-dom.production.min.js:13
v @ react-dom.production.min.js:165
h @ react-dom.production.min.js:164
enqueueForceUpdate @ react-dom.production.min.js:108
v.forceUpdate @ react.production.min.js:12
(anonymous) @ index.js:622
e.runReaction @ mobx.js:2958
Qt @ mobx.js:3086
Xt @ mobx.js:3064
(anonymous) @ mobx.js:3093
batchedUpdates @ react-dom.production.min.js:170
lt @ react-dom.production.min.js:53
Xt @ mobx.js:3093
Jt @ mobx.js:3069
It @ mobx.js:2625
e.reportChanged @ mobx.js:68
t.setNewValue @ mobx.js:770
ge @ mobx.js:1622
set @ mobx.js:1579
de @ mobx.js:1507
De @ mobx.js:1724
Ee @ mobx.js:1696
value @ Document.js:295
(anonymous) @ Document.js:172
_ @ runtime.js:65
(anonymous) @ runtime.js:303
e.(anonymous function) @ runtime.js:117
r @ Document.js:37
(anonymous) @ Document.js:37
(anonymous) @ Document.js:37
(anonymous) @ Document.js:196
g @ debounce.js:95
O @ debounce.js:142
_ @ debounce.js:130
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
_ @ debounce.js:133
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
_ @ debounce.js:133
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
_ @ debounce.js:133
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
_ @ debounce.js:133
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
_ @ debounce.js:133
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
_ @ debounce.js:133
a.bugsnag @ bugsnag-3.min.js:1
(anonymous) @ bugsnag-3.min.js:1
setTimeout (async)
(anonymous) @ bugsnag-3.min.js:1
(anonymous) @ debounce.js:103
x @ debounce.js:170
o.onChange @ Document.js:217
(anonymous) @ index.js:206
vr @ react-dom.production.min.js:106
commitLifeCycles @ react-dom.production.min.js:148
t @ react-dom.production.min.js:157
_ @ react-dom.production.min.js:168
w @ react-dom.production.min.js:167
batchedUpdates @ react-dom.production.min.js:170
lt @ react-dom.production.min.js:53
Xt @ mobx.js:3093
Jt @ mobx.js:3069
It @ mobx.js:2625
e.reportChanged @ mobx.js:68
t.setNewValue @ mobx.js:770
ge @ mobx.js:1622
set @ mobx.js:1579
(anonymous) @ Document.js:145
_ @ runtime.js:65
(anonymous) @ runtime.js:303
e.(anonymous function) @ runtime.js:117
r @ Document.js:37
(anonymous) @ Document.js:37
Promise.then (async)
r @ Document.js:37
(anonymous) @ Document.js:37
(anonymous) @ Document.js:37
value @ Document.js:78
t.componentDidMount @ method_decorator.js:60
B.i @ index.js:526
commitLifeCycles @ react-dom.production.min.js:148
t @ react-dom.production.min.js:157
_ @ react-dom.production.min.js:168
w @ react-dom.production.min.js:167
batchedUpdates @ react-dom.production.min.js:170
lt @ react-dom.production.min.js:53
Jt @ react-dom.production.min.js:70
a.bugsnag @ bugsnag-3.min.js:1
73react-dom.production.min.js:13 Uncaught Error: Minified React error #185; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at d (react-dom.production.min.js:13)
at v (react-dom.production.min.js:165)
at h (react-dom.production.min.js:164)
at Object.enqueueSetState (react-dom.production.min.js:107)
at t.v.setState (react.production.min.js:12)
at a.handleMouseMove (BlockInsert.js:129)
at a.bugsnag (bugsnag-3.min.js:1)

Questions about mobile

Hi,

It seems like the editor doesn't work very well in mobile: markdown is not recognized, some issues with keyboard interaction... I would like to know the current status of support for mobile and the milestones for it.

It's a really awesome editor in general and if you provide some pointers I could find time to work on it as well :)

Thanks!

How to set focus on the end of rich-markdown-editor

Hello

How can I set focus on the end of the end of rich-markdown-editor? I want to implement something similar to your 'ClickablePadding' component in the outline production website. User clicks on the padding area, and the focus is automatically set on the end of the editor.

Module not found: Error: Can't resolve 'boundless-arrow-key-navigation/build' and many others

Hello

I am adopting rich-markdown-editor component in my electron typescript app.

yarn add rich-markdown-editor

To avoid typescript types error, I did:

//@ts-ignore
import Editor from 'rich-markdown-editor'

When I build the project, I receive the following build errors:

[WEBPACK] Errors building renderer.js
Module not found: Error: Can't resolve 'boundless-arrow-key-navigation/build' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'outline-icons' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'outline-icons' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'outline-icons' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'outline-icons' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'outline-icons' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'react-keydown' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'react-keydown' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'react-medium-image-zoom' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'slate-prism' in '\node_modules\rich-markdown-editor\lib'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'
Module not found: Error: Can't resolve 'styled-components' in '\node_modules\rich-markdown-editor\lib\components\Toolbar'

Cannot edit image caption

Hi,

Thanks for this excellent project. I have a question regarding the Image.js component. I was wondering since in the schema, isVoid is set to true, and we set contentEditable={false}, how come you can still edit the caption textarea on getoutline.com? I tried implementing the same thing, but when I set isVoid: true, I cannot enter caption in the textbox. Thanks!

Has a hard time with larger amounts of data.

Hey everyone!

Really enjoying this project, I've learned a lot by playing around with this.

I've noticed an issue where if I'm testing larger amounts of text data, let's say 100 paragraphs or so, the editor will hang pretty intensely. I'm not exactly sure why. I thought it was because of how I was saving data to my redux store, but after switching it so we'd pull the data from a local cache first, it still hung. I tested it on getoutline.com and when I put in a larger amount of data to a document, it actually just crashes the whole tab.

I haven't been able to dig in yet, but my first ideas are it might be related to something with how this wrapper is processing saved data/historical changes or something. I've tested on just a vanilla slate editor and it can take huge amounts of text data.

I'll report back as I have more time to dig in, but if this is a known limitation or issue, I'd love any direction :)

Thanks! and thanks for the great library.

Any plans to support markdown and/or jsx

There is any plan to provide support for mdx https://mdxjs.com/ ?

There is a roadmap for upcoming features?

Great project by the way ;)

Optional minimap

Would be great if this could be made optional.

Maximum update depth exceeded when selecting a text

I am having an issue, there is a similar closed issue, but the stack trace is different. I installed the latest version and tried to play with an example. It happens when I select a text. When I select first time it is OK, the error happens if I select the second time.

This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (invariant.js:42)
    at scheduleWork$1 (react-dom.development.js:16222)
    at Object.enqueueSetState (react-dom.development.js:11300)
    at RichMarkdownEditor.Component.setState (react.development.js:270)
    at handleChange (index.js:204)
    at Editor.onChange (slate-react.js:4183)
    at Editor.change (slate-react.js:4154)
    at Editor.onEvent (slate-react.js:4170)
    at Object._this.(:8080/anonymous function) [as onSelect] (webpack:///./node_modules/slate-react/lib/slate-react.js?:3921:23)
    at HTMLDocument.eval (slate-react.js:1960)``

Parse markdown link syntax `[link](to)` as link

Just like typing -<space> will insert a bullet point, I think typing [outline](https://www.getoutline.com/) should format the same as doing the link via the UI

Blank line misinterpreted as a new paragraph

The control seems to misinterpret blank line as a new paragraph. For example,

const str = `
Paragraph 1

Paragraph 2`

<RichMarkdownEditor
     defaultValue={str}
/>

This results in a 3rd paragraph between 'Paragraph 1' and 'Paragraph 2' in the editor.
I'm using github md css to style the output of RichMarkdownEditor. This additional paragraph doubles the space between each paragraph.

An empty paragraph should be automatically inserted after images

It's tricky to continue writing past an image (You have to know to hit ENTER) if there is no empty para to click into.

From: outline/outline#685

Make title optional

The aim of this editor isn't to be incredibly flexible, if you want that use Slate – however one small change would make this useful for a much wider array of usecases, make the forced title section optional.

"Maximum update depth exceeded" in Toolbar__Menu

Hi! After a fresh clone, yarn install and yarn start, I'm getting a "Maximum update depth exceeded" error if I try and select any text.

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

The above error occurred in the <Toolbar__Menu> component:
    in Toolbar__Menu (created by Toolbar)
    in Portal (created by Toolbar)
    in Toolbar (created by RichMarkdownEditor)
    in div (created by Flex__Container)
    in Flex__Container (created by Flex)
    in Flex (created by src__MaxWidth)
    in src__MaxWidth (created by RichMarkdownEditor)
    in div (created by Flex__Container)
    in Flex__Container (created by Flex)
    in Flex (created by RichMarkdownEditor)
    in RichMarkdownEditor

This makes it impossible to actually use the editor. :) Using FF 60 beta, but occurs in Chrome 65 too.

Opt-out of toolbars

I see you've added options to the theme to selectively hide toolbar buttons, that's great 🎉

Is there a quick way to opt out of toolbars entirely? I haven't spotted one.
Changing the theme to hide all toolbar buttons doesn’t help, it just displays empty toolbars.

I can try to submit a PR for the change, although not sure where it would make most sense: as a theme option or as a React prop?

Sanitize markdown

The markdown output currently is not great where it needlessly escapes a lot of characters, for instance a . will become \.. Just putting this on the radar. When using the raw markdown somewhere else for instance when exporting, this is not great.

State is lost between starting and finishing the upload of an image

If you upload an image and make changes to the document at the same time, all the changes are reset after the image finished uploading.

Images with left-align, right-align options and text wrap

Support for left, right, center align options for images will be pretty useful!
It will allow us to wrap text along side the images.

Something like Dropbox Paper does:

Implement support for lazy loading

Native with no fallback will be okay for this

https://addyosmani.com/blog/lazy-loading/

Optimizing slate-drop-or-paste-images

While auditing bundles I noticed that slate-drop-or-paste-images includes mime-types dependency which is pretty sizeable. As this lib uses a fixed list of allowed images it would be easy to replace the dependency with a hardcoded list of allowed mimetypes. E.g. change extensions prop into validateImage callback which would get either extension or the mimetype and we would performs the validation on rich-markdown-editor. If this sounds good, happy to PR both libs.

Table of contents on live content

Hey again!

I'm curious if it's possible to show the Table of Contents always (ala dropbox paper), regardless of if the editor is in readOnly mode? see this line -> https://github.com/outline/rich-markdown-editor/blob/master/src/index.js#L271

Was this choice made for a specific reason?

Thanks!