From a3d9892841a0f5e1254261eadb2804c8e9baaabb Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Tue, 28 Jun 2022 18:11:28 +0200
Subject: [PATCH] Relax editable TS types to allow creating editable versions
 of all the JSX.IntrinsicElements elements. (#237)

Enable custom editable components through relaxed typescript types
---
 .../shared/custom-editable-components/App.tsx | 33 +++++++++++++++++++
 .../custom-editable-components/index.tsx      | 10 ++++++
 packages/r3f/src/main/editable.tsx            |  4 +--
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/src/shared/custom-editable-components/App.tsx
 create mode 100644 packages/playground/src/shared/custom-editable-components/index.tsx

diff --git a/packages/playground/src/shared/custom-editable-components/App.tsx b/packages/playground/src/shared/custom-editable-components/App.tsx
new file mode 100644
index 0000000..b00c5cf
--- /dev/null
+++ b/packages/playground/src/shared/custom-editable-components/App.tsx
@@ -0,0 +1,33 @@
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import {getProject} from '@theatre/core'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+
+const EditablePoints = e('points', 'mesh')
+
+function App() {
+  return (
+    <div
+      style={{
+        height: '100vh',
+      }}
+    >
+      <Canvas
+        dpr={[1.5, 2]}
+        linear
+        gl={{preserveDrawingBuffer: true}}
+        frameloop="demand"
+      >
+        <SheetProvider sheet={getProject('Space').sheet('Scene')}>
+          <ambientLight intensity={0.75} />
+          <EditablePoints uniqueName="points">
+            <torusKnotGeometry args={[1, 0.3, 128, 64]} />
+            <meshNormalMaterial />
+          </EditablePoints>
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+export default App
diff --git a/packages/playground/src/shared/custom-editable-components/index.tsx b/packages/playground/src/shared/custom-editable-components/index.tsx
new file mode 100644
index 0000000..5507263
--- /dev/null
+++ b/packages/playground/src/shared/custom-editable-components/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import studio from '@theatre/studio'
+import extension from '@theatre/r3f/dist/extension'
+
+studio.extend(extension)
+studio.initialize()
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/packages/r3f/src/main/editable.tsx b/packages/r3f/src/main/editable.tsx
index 2e28e97..07f5a8b 100644
--- a/packages/r3f/src/main/editable.tsx
+++ b/packages/r3f/src/main/editable.tsx
@@ -14,8 +14,8 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
   config: EditableFactoryConfig,
 ) => {
   const editable = <
-    T extends ComponentType<any> | Keys | 'primitive',
-    U extends T extends Keys ? T : Keys,
+    T extends ComponentType<any> | keyof JSX.IntrinsicElements | 'primitive',
+    U extends Keys,
   >(
     Component: T,
     type: T extends 'primitive' ? null : U,