add ref to reactrenderer

docs/src/demos/Examples/Default/React/index.jsx

@@ -142,6 +142,26 @@ const MentionList = (props) => {
   )
 }
 
+class MentionList2 extends React.Component {
+
+  onKeyDown(props) {
+    console.log('onKeyDown', props)
+  }
+
+  render() {
+    return (
+      <div>
+        mentions
+        {this.props.items.map((item, index) => (
+          <div key={index}>
+            {item}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
 export default () => {
   const editor = useEditor({
     // onTransaction({ editor }) {
@@ -186,7 +206,7 @@ export default () => {
 
             return {
               onStart: props => {
-                reactRenderer = new ReactRenderer(MentionList, {
+                reactRenderer = new ReactRenderer(MentionList2, {
                   props,
                   editor: props.editor,
                 })
@@ -209,8 +229,7 @@ export default () => {
                 })
               },
               onKeyDown(props) {
-                console.log('keydown', props)
-                // return reactRenderer.ref.onKeyDown(props)
+                return reactRenderer.ref.onKeyDown(props)
               },
               onExit() {
                 popup[0].destroy()

packages/react/src/ReactRenderer.tsx

@@ -7,6 +7,24 @@ export interface ReactRendererOptions {
   props?: { [key: string]: any },
 }
 
+function isFunctionalComponent(Component: any) {
+  return (
+    typeof Component === 'function' // can be various things
+    && !(
+      Component.prototype // native arrows don't have prototypes
+      && Component.prototype.isReactComponent // special property
+    )
+  );
+}
+
+function isClassComponent(Component: any) {
+  return !!(
+    typeof Component === 'function'
+    && Component.prototype
+    && Component.prototype.isReactComponent
+  );
+}
+
 export class ReactRenderer {
   id: string
 
@@ -20,6 +38,8 @@ export class ReactRenderer {
 
   reactElement: React.ReactNode
 
+  ref: React.Component | null = null
+
   constructor(component: any, { props = {}, editor }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
@@ -31,7 +51,14 @@ export class ReactRenderer {
   }
 
   render() {
-    this.reactElement = React.createElement(this.component, this.props)
+    const Component = this.component
+    const props = this.props
+
+    if (isClassComponent(Component)) {
+      props.ref = (ref: React.Component) => this.ref = ref
+    }
+
+    this.reactElement = <Component {...props } />
 
     if (this.editor?.contentComponent) {
       this.editor.contentComponent.setState({