Git Product home page Git Product logo

react-prosemirror's Introduction

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

Develop

  1. first run npm install

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

    npm install prosemirror
  3. Now make your changes, then git commit. Use serve-docs to view live updated at http://localhost:5000

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

  5. Then remember to push to master.

react-prosemirror's People

Contributors

geyang avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.