From 385ee1d1f4978b8021b4aaa8acfa37a0f7d45395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 15 Mar 2021 00:22:17 +0100
Subject: [PATCH] add ref to reactrenderer

---
 .../demos/Examples/Default/React/index.jsx    | 25 ++++++++++++++--
 .../{ReactRenderer.ts => ReactRenderer.tsx}   | 29 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 4 deletions(-)
 rename packages/react/src/{ReactRenderer.ts => ReactRenderer.tsx} (65%)

diff --git a/docs/src/demos/Examples/Default/React/index.jsx b/docs/src/demos/Examples/Default/React/index.jsx
index 08d6cb1a..085713b2 100644
--- a/docs/src/demos/Examples/Default/React/index.jsx
+++ b/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()
diff --git a/packages/react/src/ReactRenderer.ts b/packages/react/src/ReactRenderer.tsx
similarity index 65%
rename from packages/react/src/ReactRenderer.ts
rename to packages/react/src/ReactRenderer.tsx
index 6769f2cb..a1953ee9 100644
--- a/packages/react/src/ReactRenderer.ts
+++ b/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({