docs: auto detect languages from demo main file

docs/src/components/DemoFrame/index.vue

@@ -23,11 +23,6 @@ export default {
       required: true,
     },
 
-    mode: {
-      type: String,
-      default: 'vue',
-    },
-
     inline: {
       type: Boolean,
       default: false,
@@ -52,7 +47,7 @@ export default {
 
   computed: {
     query() {
-      return `mode=${this.mode}&inline=${this.inline}&highlight=${this.highlight}&showSource=${this.showSource}`
+      return `inline=${this.inline}&highlight=${this.highlight}&showSource=${this.showSource}`
     },
   },
 

docs/src/components/DemoMixin/index.js

@@ -7,11 +7,6 @@ export default {
       required: true,
     },
 
-    mode: {
-      type: String,
-      default: 'vue',
-    },
-
     inline: {
       type: Boolean,
       default: false,
@@ -41,7 +36,6 @@ export default {
     props() {
       return {
         name: this.name,
-        mode: this.mode,
         inline: this.inline,
         highlight: this.highlight,
         showSource: this.showSource,
@@ -49,14 +43,27 @@ export default {
     },
 
     mainFile() {
-      const file = this.files
+      if (!this.mainFilePath) {
-        .find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
-
-      if (!file) {
         return false
       }
 
-      return require(`~/demos/${file.path}`).default
+      return require(`~/demos/${this.mainFilePath}`).default
+    },
+
+    mainFilePath() {
+      const file = this.files.find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
+
+      if (file) {
+        return file.path
+      }
+    },
+
+    mode() {
+      if (this.mainFilePath?.endsWith('.jsx')) {
+        return 'react'
+      }
+
+      return 'vue'
     },
   },
 

docs/src/docPages/installation/next.md

@@ -7,4 +7,4 @@ The following guide describes how to integrate tiptap with your [Next.js](https:
 
 TODO
 
-<demo name="React" mode="react" />
+<demo name="React" />

docs/src/docPages/installation/react.md

@@ -7,4 +7,4 @@ The following guide describes how to integrate tiptap with your [React](https://
 
 TODO
 
-<demo name="React" mode="react" />
+<demo name="React" />