for some reason i can't seem to make it load the menu bar or other plugin
the editors shows up, works as expected, if i use ctrl+b/i it changes the text as expected, but no menuBar

import React, {Component, PropTypes} from 'react';
import cx from 'classnames';
import shallowCompare from 'react-addons-shallow-compare';

import ProseMirror from 'react-prosemirror';
import 'prosemirror/dist/inputrules/autoinput';
import 'prosemirror/dist/menu/menubar';
import 'prosemirror/dist/menu/tooltipmenu';
import 'prosemirror/dist/menu/menu';

import '../publishing-platform-widget.scss';

export default class Paragraph extends Component {
  static propTypes = {
    className: PropTypes.string,
    children: PropTypes.node,
    onChange: PropTypes.func,
    onRemove: PropTypes.func,
    value: PropTypes.string,
    toolbar: PropTypes.array,
  };

  static defaultProps = {
    value: '',
  };

  constructor(props) {
    super(props);

    this.state = {
      value: props.value
    };

    this.handleTextChange = this.onTextChange.bind(this);
  }

  onTextChange(value) {
    this.setState({
      text: value,
    });

    if (this.props.onChange) {
      this.props.onChange(value);
    }
  }

  render() {
    const {
      onChange,
      ...props,
      } = this.props;

    return (
      <div >
        <ProseMirror
          options={{
            menuBar:true,
            tooltipMenu: true,
            autoInput: true,
            docFormat: 'html',
          }}
          ref="editor"
          defaultValue={this.props.value}
          onChange={this.handleTextChange}>
        </ProseMirror>
      </div>
    );
  }
}

I am trying to get the output to go to a Mongo Database, when setting up the getInitialState I keep getting the error "Trying to set a document with a different schema" when inspecting it says that it's react-prosemirror that is giving the error. how do you have your schema set up, I am using this as an article writer, so I have more fields than just the ProseMirror. Does this not play well with other fields?

README:

import 'prosemirror/src/convert/to_markdown'

is now something like

import 'prosemirror/src/parse/markdown'
import 'prosemirror/src/serialize/markdown'

This repo should have a notice of deprecation or unmaintenance. It's not working with latest ProseMirror and the last commit was 8 months ago.

In html model, although the passed-in value has some tags like that this editor can not render, it should not clear them away when I call getContent.

How to support video?

Hi @tgecho,

When I browse the rendered tree in React Dev Tools, the react-prosemirror component has a name '.'
I am using the ES2015 way for creating components, but I belive you could either add displayName property when calling createClass or let React to automatically figure it out for you, by exporting ProseMirror the following way:

const ProseMirror = React.createClass({...});
export default ProseMirror;

With thanks,
Laszlo

Thanks for your work on this component,
Just trying to get started but looks like the latest version needs to be released to NPM.

Cheers.

http://prosemirror.net/guide/basics.html

I'm using json docFormat and with schema-basic i get Uncaught RangeError: Schema option does not correspond to schema used in doc option. Which node should be passed to doc: schema.parseDOM in options?

Hello, npm package seem wrong.

npm install react-prosemirror
ls /node_modules/react-prosemirror

return

..                    
LICENSE               
package.json          
README.md             

No js file !
Ami44

It seems that the .change handler for pm is only called for user initiated changes (setContent doesn't cause it be triggered). This means that the wrapper never sets a _lastValue if a new value is passed into it (until the user changes something).

Flow which causes this:

Start with value1
Modify to value2 (via keyboard)
Set value={value1}
Set value={value2}

value2 never gets repopulated because _lastValue is still set to value2, so setContent is never called.

I 'fixed it' locally by adding the follow after setContent:
this._lastValue = this.pm.getContent(this.props.options.docFormat);

Thanks for this component!

I am using prosemirror 0.8.0. Looks like the following code doesn't work.

It says cannot read schema of undefined.

import React, {PropTypes, Component} from 'react';
import autobind from 'autobind-decorator';
import ProseMirror from 'react-prosemirror';
import 'prosemirror/dist/inputrules';
import 'prosemirror/dist/menu/menubar';
import 'prosemirror/dist/menu/tooltipmenu';
import 'prosemirror/dist/menu/menu';
import 'prosemirror/dist/markdown';

const options = {
  menuBar: true,
  tooltipMenu: true,
  autoInput: true
};

@autobind
export default class RichTextCard extends Component {

  componentWillMount() {
    this.setState({value: "<h1>What is your story?</h1>"});
  }

  onChange(state) {
    this.setState({value, state});
    console.log(state);
  }

  render() {
    console.log('====>', this.state, options);
    return (
      <div className="card rich-text-card">
        <h1>Rich Text Editor</h1>
        <ProseMirror value={this.state.value} onChange={this.onChange} options={options} ref="pm"></ProseMirror>
      </div>
    );
  }
}

I just updated to 0.2.0, when I run my compiler it throws out an error saying that 'prosemirror' cannot be found in /node_modules/react-prosemirror/dist looking at the index.js and taking out _prosemirror = require('prosemirror') it runs just fine, but then it can't find _prosemirror when you call it on line 57 for
this.pm = new _prosemirror.ProseMirror(options)

also after updating it couldn't find markdown, or any of the other options that were in the dist folder, it appears they have all been deleted, even after uninstalling it and reinstalling it. this is a great rich text editor, and I hope we can figure out whats going on, especially since the page I am currently doing some work on is the page that has this component.

It would be great if react-prosemirror would support the latest version of react.
I'm currently getting a warning for https://github.com/tgecho/react-prosemirror/blob/master/index.js#L36 which tells me to strip getDOMNode() and use this.refs.pm.appendChild(this.pm.wrapper) instead.

If I create a react-prosemirror component instance with a custom schema, then any time the parent component' render method runs, I get the above error.

Just a side note, inside componentDidUpdate, when previous and current options are compared, the non-primitive values (schema, place, commands and doc [ if it is in some fancy format]) will be never equal, due to the 'shallow' equality checking, therefore pm.setOption is called unnecessary. I have not dig into this deeper, so not sure how does this affect performance, however it might worth to keep it in mind.

So back to the real issue, since I am not changing the schema in the parent component, I just made a dirty hack in componentDidUpdate, and filtered out schema, like this:

Object.keys(current).filter( k => k!=='schema').forEach(...);

However if someone wants pass in different schema objects to react-prosemirror, based on some state or props of the parent component, then the inability of changing schema of an existing ProseMirror instance, could be problematic. What do you think?

Since react-prosemirror relies on Object.assign it needs to be compiled with babel-runtime. Hence it would be great to update to update the README for other developers.

{
  test: /\.js?$/,
  include: [/prosemirror/, /react-prosemirror/],
  loaders: ["babel-loader?optional=runtime"]
},

Evernote contents copy & paste to the react-prosemirror demo.

First scene my demo.

Only the first line will be copied.

Second scene your demo.

working fine.

my repo here

I really wonder why not working fine my sample.

Thanks!

Just wondering, have you considered removing prosemirror from dependencies, and then having the user npm install --save prosemirror for themselves, so that you don't have to re-peg against new ProseMirror versions? Since it's at 0.3.0 now. Might be easier!

When I delete all the text inside the editor, then the editor stops updating itself.
The root cause of this problem is that during the initiation of this._lastValue, this.props.value becomes falsy. I think it could be easily fixed by checking whether this.props.value is undefined instead.