add basic live demo component

docs/gridsome.config.js

@@ -44,6 +44,7 @@ module.exports = {
       },
     },
   ],
+  runtimeCompiler: true,
   chainWebpack(config) {
     // Load variables for all vue-files
     const types = ['vue-modules', 'vue', 'normal-modules', 'normal']

docs/package.json

@@ -23,6 +23,7 @@
     "remark-toc": "^7.0.0",
     "typescript": "^4.0.3",
     "vue-github-button": "^1.1.2",
+    "vue-live": "^1.14.0",
     "y-indexeddb": "^9.0.5",
     "y-webrtc": "^10.1.6",
     "yjs": "^13.3.2"

docs/src/components/Demo/style.scss

@@ -64,7 +64,7 @@
   }
 
   &__link {
-    text-align: right;
+    // text-align: right;
   }
 
   &__error {
@@ -72,4 +72,4 @@
     color: $colorRed;
     background-color: rgba($colorRed, 0.1);
   }
-}
+}

docs/src/components/LiveDemo/CustomLayout.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="live-demo">
+    <div class="live-demo__preview">
+      <slot name="preview" />
+    </div>
+    <div class="live-demo__editor">
+      <slot name="editor" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    let firstLoad = true
+    const pre = this.$el.getElementsByClassName('prism-editor__editor')[0]
+    const textarea = this.$el.getElementsByClassName('prism-editor__textarea')[0]
+
+    const resizeObserver = new ResizeObserver(() => {
+      const width = pre.scrollWidth
+      const height = pre.scrollHeight
+      textarea.style.width = `${width}px`
+      textarea.style.height = `${height}px`
+
+      if (!firstLoad) {
+        textarea.blur()
+        textarea.focus()
+      }
+
+      firstLoad = false
+    })
+
+    resizeObserver.observe(pre)
+
+    this.$once('hook:beforeDestroy', () => {
+      resizeObserver.unobserve(pre)
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.live-demo {
+  background-color: $colorWhite;
+  overflow: hidden;
+  border-radius: 0.5rem;
+
+  &__preview {
+    padding: 1.5rem;
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-width: 0;
+  }
+
+  &__editor {
+    background-color: rgba($colorBlack, 0.9);
+    color: rgba($colorWhite, 0.7);
+  }
+
+  &__editor ::v-deep {
+    .prism-editor-wrapper {
+      overflow: auto;
+      max-height: unquote("max(300px, 60vh)");
+      padding: 1.5rem;
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba($colorWhite, 0.25);
+      }
+    }
+
+    .prism-editor__container {
+      position: relative;
+    }
+
+    .prism-editor__textarea {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      z-index: 1;
+      resize: none;
+      -webkit-text-fill-color: transparent;
+      overflow: hidden;
+    }
+  }
+}
+</style>

docs/src/components/LiveDemo/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="live-demo">
+    <template v-if="mainFile">
+      <div class="live-demo__preview">
+        <vue-live
+          :code="mainFile.content"
+          :layout="CustomLayout"
+          :requires="requires"
+          @error="(e) => handleError(e)"
+        />
+      </div>
+      <div class="live-demo__source" v-if="showSource">
+        <div class="live-demo__tabs" v-if="showFileNames">
+          <button
+            class="live-demo__tab"
+            :class="{ 'is-active': currentIndex === index}"
+            v-for="(file, index) in files"
+            :key="index"
+            @click="currentIndex = index"
+          >
+            {{ file.name }}
+          </button>
+        </div>
+        <div class="live-demo__code" v-if="activeFile" :key="activeFile.path">
+          <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
+        </div>
+      </div>
+      <div class="live-demo__meta">
+        <div class="live-demo__name">
+          Demo/{{ name }}
+        </div>
+        <a class="live-demo__link" :href="githubUrl" target="_blank">
+          Edit on GitHub →
+        </a>
+      </div>
+    </template>
+    <div v-else class="live-demo__error">
+      Could not find a demo called “{{ name }}”.
+    </div>
+  </div>
+</template>
+
+<script>
+import collect from 'collect.js'
+import { VueLive } from 'vue-live'
+import * as starterKit from '@tiptap/vue-starter-kit'
+import Prism from '~/components/Prism'
+import CustomLayout from './CustomLayout'
+
+export default {
+  components: {
+    Prism,
+    VueLive,
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    showSource: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      files: [],
+      content: null,
+      currentIndex: 0,
+      CustomLayout,
+      syntax: {
+        vue: 'markup',
+      },
+      requires: {
+        '@tiptap/vue-starter-kit': starterKit,
+      },
+    }
+  },
+
+  computed: {
+    mainFile() {
+      const file = this.files
+        .find(item => item.path.endsWith('.vue') || item.path.endsWith('.jsx'))
+
+      if (!file) {
+        return
+      }
+
+      return file
+
+      // return require(`~/demos/${file.path}`).default
+    },
+
+    showFileNames() {
+      return this.files.length > 1
+    },
+
+    activeFile() {
+      return this.files[this.currentIndex]
+    },
+
+    githubUrl() {
+      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}`))
+      .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', 'jsx', 'scss'].includes(item.extension)
+      })
+      .sortBy(item => item.path.split('/').length)
+      .toArray()
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss" scoped />

docs/src/components/LiveDemo/style.scss

@@ -0,0 +1,75 @@
+.live-demo {
+  background-color: $colorWhite;
+  overflow: hidden;
+  border-radius: 0.5rem;
+
+  &__preview {
+    padding: 1.5rem;
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-width: 0;
+  }
+
+  &__source {
+    // background-color: $colorBlack;
+  }
+
+  &__tabs {
+    padding: 1rem 1.5rem 0 1.5rem;
+    background-color: rgba($colorBlack, 0.9);
+  }
+
+  &__tab {
+    display: inline-flex;
+    position: relative;
+    background-color: transparent;
+    color: rgba($colorWhite, 0.7);
+    padding: 0.1rem 0.5rem;
+    border-radius: 5px;
+    font-weight: 500;
+    border: none;
+    margin-right: 0.5rem;
+
+    &:first-child {
+      margin-left: -0.5rem;
+    }
+
+    &.is-active,
+    &:hover {
+      color: $colorWhite;
+      background-color: rgba($colorWhite, 0.1);
+    }
+  }
+
+  &__code {
+    pre {
+      margin: 0;
+      border-radius: 0;
+    }
+  }
+
+  &__meta {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 1.5rem;
+    border: 1px solid rgba($colorWhite, 0.1);
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    border-top-width: 0;
+    background-color: rgba($colorBlack, 0.9);
+    color: $colorWhite;
+  }
+
+  &__link {
+    // text-align: right;
+  }
+
+  &__error {
+    padding: 1rem 1.5rem;
+    color: $colorRed;
+    background-color: rgba($colorRed, 0.1);
+  }
+}

docs/src/docPages/examples/basic.md

@@ -1,3 +1,4 @@
 # Basic
 
-<demo name="Examples/Basic" />
+<live-demo name="Examples/Basic" />
+<demo name="Examples/Basic" />

docs/src/layouts/App/prism.scss

@@ -9,6 +9,13 @@ $codeBlue: #89ddff;
 $codeTeal: #80cbc4;
 $codePurple: #c792ea;
 
+.prism-editor__textarea {
+  background: transparent;
+  border: 0;
+}
+
+.prism-editor__textarea,
+.prism-editor__editor,
 code[class*="language-"],
 pre[class*="language-"] {
   position: relative;
@@ -221,4 +228,4 @@ pre[class*="language-"].language-scss > code {
   &::after {
     display: none;
   }
-}
+}

docs/src/main.js

@@ -4,12 +4,14 @@ import 'prismjs/components/prism-jsx.js'
 import 'prismjs/components/prism-scss.js'
 import App from '~/layouts/App'
 import Demo from '~/components/Demo'
+import LiveDemo from '~/components/LiveDemo'
 import Tab from '~/components/Tab'
 import ReactRenderer from '~/components/ReactRenderer'
 
 export default function (Vue) {
   Vue.component('Layout', App)
   Vue.component('Demo', Demo)
+  Vue.component('LiveDemo', LiveDemo)
   Vue.component('Tab', Tab)
   Vue.component('ReactRenderer', ReactRenderer)
 }