example doesn't work

[geyang]

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>
    );
  }
}

[MrNiftyCoder]

I think the author of this react component has abandoned it. Prosemirror has changed much of their API which has caused this component to break. I messed with this one for a while before I decided to just integrate Prosemirror directly into my React application.

[tgecho]

I haven't fully/intentionally abandoned this, but I haven't had much time to get up to speed with the 0.8.0 API changes. I've updated the peerDependency to at least accurately reflect version compatibility until I can get things sorted out.

[geyang]

Thanks guys for the replies! I now at least know where to look.

[geyang]

Hey guys, I just wrote one that works with the newest prose mirror.

You can look at the demo here:

www.episodeyang.com/react-prosemirror

I want to polish this up. Would you guys mind if I publish it on npm under the name of react-prosemirror?

The contract is a bit different and I can explain why.

[tgecho]

@episodeyang that's really interesting! I can't say I'm totally sold on the idea of so closely tracking the selection. I've had enough issues with trying to make sure the value/doc stays in sync. My goal was to mimic the idiomatic react form API. I'm curious to better understand the specific cases in which you use this ability. I'd happily link to it as a valid alternative.

As it is, I already have this component updated to work with 0.8.x, I just need to fix up the unit tests and docs.

[geyang]

Cool!

I actually think I have solved the value/doc sync perfectly. Prose mirror's internal polling is in the way, and one just need to flush the DOM when need to.

The react form component doesn't include the cursor, and it is fine. The cursor/doc sync is needed whenever you have multiple inputs to the component, such as when you are doing real-time collaboration, or when your network delay is long enough that the user is effectively collaborating with him/herself.

Here is the demo in action: