add iframe to demo content

docs/src/components/Demo/index.vue

@@ -1,14 +1,8 @@
 <template>
-  <div v-if="inline && mainFile">
-    <component :is="mainFile" v-if="mode === 'vue'" />
-    <react-renderer :component="mainFile" v-if="mode === 'react'" />
-  </div>
+  <demo-frame v-if="inline && mainFile" v-bind="props" />
   <div class="demo" v-else>
     <template v-if="mainFile">
-      <div class="demo__preview">
-        <component :is="mainFile" v-if="mode === 'vue'" />
-        <react-renderer :component="mainFile" v-if="mode === 'react'" />
-      </div>
+      <demo-frame class="demo__preview" v-bind="props" />
       <div class="demo__source" v-if="showSource">
         <div class="demo__tabs" v-if="showFileNames">
           <button
@@ -44,66 +38,25 @@
 </template>
 
 <script>
-import collect from 'collect.js'
 import Prism from '~/components/Prism'
+import DemoFrame from '~/components/DemoFrame'
+import DemoMixin from '~/components/DemoMixin'
 
 export default {
+  mixins: [DemoMixin],
+
   components: {
-    ReactRenderer: () => import(/* webpackChunkName: "react-renderer" */ '~/components/ReactRenderer'),
+    DemoFrame,
     Prism,
   },
 
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-
-    mode: {
-      type: String,
-      default: 'vue',
-    },
-
-    inline: {
-      type: Boolean,
-      default: false,
-    },
-
-    highlight: {
-      type: String,
-      default: null,
-    },
-
-    showSource: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
   data() {
     return {
-      loading: true,
-      files: [],
-      content: null,
       currentIndex: 0,
-      syntax: {
-        vue: 'html',
-      },
     }
   },
 
   computed: {
-    mainFile() {
-      const file = this.files
-        .find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
-
-      if (!file) {
-        return false
-      }
-
-      return require(`~/demos/${file.path}`).default
-    },
-
     showFileNames() {
       return this.files.length > 1
     },
@@ -120,29 +73,6 @@ export default {
       return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
     },
   },
-
-  mounted() {
-    this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
-      .filter(path => path.startsWith(`./${this.name}/`))
-      .filter(path => !path.endsWith('.spec.js') && !path.endsWith('.spec.ts'))
-      .map(path => path.replace('./', ''))
-      .map(path => {
-        const extension = path.split('.').pop()
-
-        return {
-          path,
-          name: path.replace(`${this.name}/`, ''),
-          content: require(`!!raw-loader!~/demos/${path}`).default,
-          extension,
-          highlight: this.syntax[extension] || extension,
-        }
-      })
-      .filter(item => {
-        return ['vue', 'ts', 'js', 'jsx', 'scss'].includes(item.extension)
-      })
-      .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue'))
-      .toArray()
-  },
 }
 </script>
 

docs/src/components/DemoContent/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div v-if="mainFile">
+    <component :is="mainFile" v-if="mode === 'vue'" />
+    <react-renderer :component="mainFile" v-if="mode === 'react'" />
+  </div>
+</template>
+
+<script>
+import DemoMixin from '~/components/DemoMixin'
+
+export default {
+  mixins: [DemoMixin],
+
+  components: {
+    ReactRenderer: () => import(/* webpackChunkName: "react-renderer" */ '~/components/ReactRenderer'),
+  },
+}
+</script>

docs/src/components/DemoFrame/index.vue

@@ -6,7 +6,7 @@
     <iframe
       v-show="!isLoading"
       v-resize
-      :src="`demos/${name}?${query}`"
+      :src="`/demos/${name}?${query}`"
       style="background-color: transparent;"
       width="100%"
       height="0"
@@ -60,13 +60,8 @@ export default {
   methods: {
     onLoad() {
       this.isLoading = false
-      console.log('onLoad')
     },
   },
-
-  mounted() {
-    console.log('load')
-  },
 }
 </script>
 

docs/src/components/DemoMixin/index.js

@@ -0,0 +1,85 @@
+import collect from 'collect.js'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    mode: {
+      type: String,
+      default: 'vue',
+    },
+
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+
+    highlight: {
+      type: String,
+      default: null,
+    },
+
+    showSource: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      files: [],
+      syntax: {
+        vue: 'html',
+      },
+    }
+  },
+
+  computed: {
+    props() {
+      return {
+        name: this.name,
+        mode: this.mode,
+        inline: this.inline,
+        highlight: this.highlight,
+        showSource: this.showSource,
+      }
+    },
+
+    mainFile() {
+      const file = this.files
+        .find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
+
+      if (!file) {
+        return false
+      }
+
+      return require(`~/demos/${file.path}`).default
+    },
+  },
+
+  mounted() {
+    this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
+      .filter(path => path.startsWith(`./${this.name}/`))
+      .filter(path => !path.endsWith('.spec.js') && !path.endsWith('.spec.ts'))
+      .map(path => path.replace('./', ''))
+      .map(path => {
+        const extension = path.split('.').pop()
+
+        return {
+          path,
+          name: path.replace(`${this.name}/`, ''),
+          content: require(`!!raw-loader!~/demos/${path}`).default,
+          extension,
+          highlight: this.syntax[extension] || extension,
+        }
+      })
+      .filter(item => {
+        return ['vue', 'ts', 'js', 'jsx', 'scss'].includes(item.extension)
+      })
+      .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue'))
+      .toArray()
+  },
+}

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -157,7 +157,9 @@ export default {
   &__content {
     padding: 1rem;
     max-height: 30rem;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     &::-webkit-scrollbar-thumb {
       background-color: rgba(black, 0.1);

docs/src/main.js

@@ -5,7 +5,6 @@ import 'prismjs/components/prism-scss.js'
 import PortalVue from 'portal-vue'
 import iframeResize from 'iframe-resizer/js/iframeResizer'
 import App from '~/layouts/App'
-import DemoFrame from '~/components/DemoFrame'
 
 Prism.manual = true
 
@@ -34,6 +33,5 @@ export default function (Vue, { head }) {
 
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
-  Vue.component('DemoFrame', DemoFrame)
   Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo'))
 }

docs/src/pages/index.vue

@@ -13,7 +13,7 @@
     </app-section>
 
     <app-section>
-      <demo-frame name="Examples/CollaborativeEditing" inline />
+      <demo name="Examples/CollaborativeEditing" inline />
     </app-section>
 
     <app-section>

docs/src/templates/DemoPage/index.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="demo-page">
-    <demo :name="$context.name" v-bind="props" />
+    <demo-content :name="$context.name" />
   </div>
 </template>
 
 <script>
+import DemoContent from '~/components/DemoContent'
+
 export default {
+  components: {
+    DemoContent,
+  },
+
   metaInfo() {
     return {
       title: this.$context.name,
@@ -17,36 +23,6 @@ export default {
       ],
     }
   },
-
-  methods: {
-    fromString(value) {
-      if (typeof value !== 'string') {
-        return value
-      }
-
-      if (value.match(/^\d*(\.\d+)?$/)) {
-        return Number(value)
-      }
-
-      if (value === 'true') {
-        return true
-      }
-
-      if (value === 'false') {
-        return false
-      }
-
-      return value
-    },
-  },
-
-  computed: {
-    props() {
-      return Object.fromEntries(Object
-        .entries(this.$route.query)
-        .map(([key, value]) => [key, this.fromString(value)]))
-    },
-  },
 }
 </script>