https://github.com/geyang/react-prosemirror

https://github.com/geyang/react-prosemirror

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/geyang/react-prosemirror
• Owner: geyang
• Created: 2016-07-21T07:05:45.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-07-26T23:42:30.000Z (over 8 years ago)
• Last Synced: 2024-08-09T22:50:51.161Z (5 months ago)
• Language: JavaScript
• Size: 2.64 MB
• Stars: 16
• Watchers: 0
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React-ProseMirror demo

## About this

This is not a fork of react-prosemirror. This is a different react

wrapper of prosemirror that handles change events and cursors synchronously

to make it easy to do real-time collaboration in a redux architecture.

## Usage

```

npm install @episodeyang/react-prosemirror

```

### How is this README written:

This readme is written with react and markdown. It includes:

1. a **live react-prosemirror component demo**

2. a table of the component's props that is generated automatically

3. **source** of the example component

## Example Component: `ProseMirror`

This component provides both the selection and the serialized document json object

`onChange`.

### Why is this important?

With an input element like this rich text editor, the cursor position ("selection") is part of the component

state. Typically when we think of updating the value of such a component we only think of updating

the content. However if we do that, the cursor position will be lost each time such update happens,

and the user will notice that the cursor jumps to the beginning of the input box on every keystroke.

With redux's synchronous loop, it is necessary for the component to handle document value change and

selection changes together.

This react component does that.

### Live Demo

please see this live demo here:

http://www.episodeyang.com/react-prosemirror

[![react-prosemirror demo](react-prosemirror-demo.gif)](http://www.episodeyang.com/react-prosemirror)

## Develop

1. first run `npm install`

2. now install prosemirror. Because it is a peer dependency, you need to

   install it separately.

   ```shell

   npm install prosemirror

   ```

3. Now make your changes, then git commit. Use `serve-docs` to view live updated at [http://localhost:5000](http://localhost:5000)

4. run `build-docs`, `build-static-docs`, `gh-pages`

5. Then remember to push to master.