React element suggestions

[doublejosh]

What is required to return a React element for suggestions? I can't get anything to appear. Is this against ProseMirror norms for decorations perhaps?

Why?

• Avoid DOM creation
• Stay within React
• Avoid class names

[doublejosh]

Partial workaround... Still creates DOM and uses named classes.

const SuggestionList = ({ items }) => (
  <div className="suggestion-item-list">
    {items && items.map(i => 
      <div className="suggestion-item">{i.name}</div>
    )}
  </div>
)

const getSuggestionsHTML = (items, type) => {
  if (type === 'mention') {
    return ReactDOMServer.renderToString(<SuggestionList items={items} />)
  }
}

[joelewis]

The dropdown was written without respecting any VDOM abstractions, so this might not be a trivial job. Like you've mentioned ReactDOMServer.renderToString() should do the trick, only drawback being no support for React-style event handlers.

We'd have to fork this project for react support, that implements the dropdown behavior with React.