From fa5909a477cac7e732e07c605dfe8875e2bafab9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 16 Apr 2020 21:12:31 +0200
Subject: [PATCH] render react in demo component

---
 content/posts/react.md                         |  2 +-
 src/components/Demo/index.vue                  | 18 +++++++++++++++---
 src/components/ReactWrapper/index.vue          | 15 ++++++++++-----
 .../React}/index.jsx                           |  2 +-
 src/main.js                                    |  1 +
 5 files changed, 28 insertions(+), 10 deletions(-)
 rename src/{components/ReactTestComponent => demos/React}/index.jsx (93%)

diff --git a/content/posts/react.md b/content/posts/react.md
index d12cda60..60cf19cd 100644
--- a/content/posts/react.md
+++ b/content/posts/react.md
@@ -5,4 +5,4 @@ slug: react
 
 This is a basic example of tiptap.
 
-<react-wrapper />
\ No newline at end of file
+<demo name="React" mode="react" />
\ No newline at end of file
diff --git a/src/components/Demo/index.vue b/src/components/Demo/index.vue
index 0640095d..aecd65fc 100644
--- a/src/components/Demo/index.vue
+++ b/src/components/Demo/index.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="demo">
     <div class="demo__preview" v-if="mainFile">
-      <component :is="mainFile" />
+      <component :is="mainFile" v-if="mode === 'vue'"/>
+      <react-wrapper :component="mainFile" v-if="mode === 'react'" />
     </div>
     <div class="demo__source">
       <div class="demo__tabs" v-if="showFileNames">
@@ -23,12 +24,22 @@
 </template>
 
 <script>
+import ReactWrapper from '~/components/ReactWrapper'
+
 export default {
+  components: {
+    ReactWrapper,
+  },
   props: {
     name: {
       type: String,
       required: true,
     },
+
+    mode: {
+      type: String,
+      default: 'vue',
+    },
   },
 
   data() {
@@ -38,6 +49,7 @@ export default {
       currentIndex: 0,
       syntax: {
         js: 'javascript',
+        jsx: 'jsx',
         vue: 'markup',
         css: 'css',
       },
@@ -46,7 +58,7 @@ export default {
 
   computed: {
     mainFile() {
-      const file = this.files.find(item => item.path.endsWith('.vue'))
+      const file = this.files.find(item => item.path.endsWith('.vue') || item.path.endsWith('.jsx'))
 
       if (!file) {
         return
@@ -68,7 +80,7 @@ export default {
     this.files = require.context(`~/demos/`, true)
       .keys()
       .filter(path => path.startsWith(`./${this.name}`))
-      .filter(path => path.endsWith('.vue') || path.endsWith('.js') || path.endsWith('.css'))
+      .filter(path => path.endsWith('.vue') || path.endsWith('.js') || path.endsWith('.css') || path.endsWith('.jsx'))
       .map(path => path.replace('./', ''))
       .map(path => ({
         path,
diff --git a/src/components/ReactWrapper/index.vue b/src/components/ReactWrapper/index.vue
index 47b2b005..a54a8ace 100644
--- a/src/components/ReactWrapper/index.vue
+++ b/src/components/ReactWrapper/index.vue
@@ -5,15 +5,20 @@
 <script>
 import React from 'react'
 import ReactDOM from 'react-dom'
-import ReactTestComponent from '~/components/ReactTestComponent/index.jsx'
 
 export default {
-  mounted(){
-    ReactDOM.render(React.createElement(ReactTestComponent, this.$props), this.$el)
+  props: {
+    component: {
+      required: true,
+    }
   },
 
-  beforeDestroy(){
+  mounted() {
+    ReactDOM.render(React.createElement(this.component), this.$el)
+  },
+
+  beforeDestroy() {
     ReactDOM.unmountComponentAtNode(this.$el)
-  }
+  },
 }
 </script>
\ No newline at end of file
diff --git a/src/components/ReactTestComponent/index.jsx b/src/demos/React/index.jsx
similarity index 93%
rename from src/components/ReactTestComponent/index.jsx
rename to src/demos/React/index.jsx
index 501a59e5..91d21573 100644
--- a/src/components/ReactTestComponent/index.jsx
+++ b/src/demos/React/index.jsx
@@ -11,7 +11,7 @@ export default class TestComponent extends Component {
   componentDidMount() {
     this.editor = new Editor({
       element: this.editorNode.current,
-      content: '<p>rendered in <strong>react</strong></p>',
+      content: '<p>rendered in <strong>react</strong>!</p>',
       extensions: extensions(),
     })
     this.forceUpdate()
diff --git a/src/main.js b/src/main.js
index 3098267c..43302690 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import Prism from 'prismjs'
 import 'prismjs/themes/prism-coy.css'
+import 'prismjs/components/prism-jsx.js'
 import DefaultLayout from '~/layouts/Default.vue'
 import Demo from '~/components/Demo'
 import Tab from '~/components/Tab'