tgecho/react-prosemirror

fails to load plugins

CosticaPuntaru opened this issue · 3 comments

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'm not sure what's going on here. I was able to run your example locally and the menu shows up just fine. You're not getting any import errors or other indications that the menu imports might not be working? Maybe try throwing a breakpoint inside one of those modules to see if they're running? Also check the version of ProseMirror you have installed. Some of the import paths changed.

Have the same issue.

Pretty sure this is happening for the same reason as #14 — since react-prosemirror defines its own dependency on prosemirror, the instance that it uses to instantiate new editors is different from the one that is getting patched with defineOption() by modules.

As currently written, I think it will only work on versions of NPM (the newest one?) that share the module when the version is exactly the same. But if there's any version mismatch at all, or if someone is using any other version of NPM, this won't work.

I think removing the prosemirror dependency and letting the user supply their own would be the easy fix.

@CosticaPuntaru please let me know if this doesn't sort things out.