From 30fccac47c28ce7b3a93737102a4631c0aee0407 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 11 Feb 2021 16:11:33 +0100
Subject: [PATCH] docs: auto detect languages from demo main file

---
 docs/src/components/DemoFrame/index.vue |  7 +-----
 docs/src/components/DemoMixin/index.js  | 29 +++++++++++++++----------
 docs/src/docPages/installation/next.md  |  2 +-
 docs/src/docPages/installation/react.md |  2 +-
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index abf8ddb4b..410fe9e68 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/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}`
     },
   },
 
diff --git a/docs/src/components/DemoMixin/index.js b/docs/src/components/DemoMixin/index.js
index 6746ba597..019a80b1f 100644
--- a/docs/src/components/DemoMixin/index.js
+++ b/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
-        .find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
-
-      if (!file) {
+      if (!this.mainFilePath) {
         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'
     },
   },
 
diff --git a/docs/src/docPages/installation/next.md b/docs/src/docPages/installation/next.md
index 10ad2d60a..a71e9336c 100644
--- a/docs/src/docPages/installation/next.md
+++ b/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" />
diff --git a/docs/src/docPages/installation/react.md b/docs/src/docPages/installation/react.md
index b7d6acfc7..511150c97 100644
--- a/docs/src/docPages/installation/react.md
+++ b/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" />