Prosemirror: Async contentDOMRef for NodeViews using react

[patsimm]

We are currently trying to render our NodeViews using react. Currently it is not possible to call ReactDOM.render synchronously, which gives us a hard time putting things together. When creating a NodeView the contentDOMRef has to be set synchronously in the constructor. When rendering with react this is not possible. It would be very nice to have the option to somehow set contentDOMRef asynchronously.

This issue at react's github is strongly tied to my issue here: https://github.com/facebook/react/issues/12227

If needed I can build a minimal setup repository to show how we set up prosemirror and react exactly.

[marijnh]

This isn't supported and won't be supported. Often, you can just create a simple 'framing' DOM structure containing the outer node and the content wrapper, and render fancy framework DOM alongside the content, in an uneditable sibling node. That also avoids problems with stuff being editable that really shouldn't be.

[awdyson]

@patsimm not exactly sure what you're getting at, but does this help?
I'm creating an orphaned node and appending it via React's ref callback;

// nodeView class
  constructor(baseArgs: BaseArgs) {
    this.dom = document.createElement('paragraph');
    this.contentDOM = document.createElement('content')

    ReactDOM.render(
      <ParagraphComponent
        contentDOM={this.contentDOM}
        getPos={this.getPos}
        node={this.node}
        view={this.view}
      />,
      this.dom
    );
  }

  ignoreMutation() {
    return true;
  }

class ParagraphComponent extends PureComponent<Props> {
  appendContentDOM = ref => {
    if (ref) ref.appendChild(this.props.contentDOM);
  };

  render() {
    const { getPos, node, view } = this.props;
    return (
      <div css="position: relative" ref={this.appendContentDOM}>
        <NodeMenu getPos={getPos} node={node} view={view} />
        {/* contentDOM appended here */}
      </div>
    );
  }
}