render react in demo component

content/posts/react.md

@@ -5,4 +5,4 @@ slug: react
 
 This is a basic example of tiptap.
 
-<react-wrapper />
+<demo name="React" mode="react" />

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,

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>

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()

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'