add basic vite setup

2021-08-25 11:52:20 +02:00
parent 96a7310b9d
commit 15c7e1955a
28 changed files with 2452 additions and 27 deletions
--- a/demos/preview/Demo.vue
+++ b/demos/preview/Demo.vue
@@ -0,0 +1,241 @@
+<template>
+  <demo-frame
+    v-if="inline"
+    :src="currentIframeUrl"
+    :key="currentIframeUrl"
+  />
+  <div class="antialiased" v-else>
+    <div v-if="showTabs">
+      <button
+        v-for="(language, index) in sortedTabs"
+        :key="index"
+        @click="setTab(language.name)"
+        class="px-4 py-2 rounded-t-lg text-xs uppercase font-bold tracking-wide"
+        :class="[currentTab === language.name
+          ? 'bg-black text-white'
+          : 'text-black'
+        ]"
+      >
+        {{ language.name }}
+      </button>
+    </div>
+    <div class="overflow-hidden rounded-b-xl">
+      <div
+        class="border-2 border-black last:rounded-b-xl"
+        :class="[
+          showTabs && firstTabSelected
+            ? 'rounded-tr-xl'
+            : 'rounded-t-xl',
+        ]"
+      >
+        <demo-frame
+          :src="currentIframeUrl"
+          :key="currentIframeUrl"
+        />
+      </div>
+
+      <div class="bg-black text-white" v-if="!hideSource && currentFile">
+        <div class="flex overflow-x-auto">
+          <div class="flex flex-auto px-4 border-b-2 border-gray-800">
+            <button
+              class="inline-flex relative mr-4 py-2 pb-[calc(0.3rem + 2px)] mb-[-2px] border-b-2 border-transparent font-mono text-sm"
+              :class="[!showDebug && currentFile.content === file.content
+                ? 'text-white border-white font-bold'
+                : 'text-gray-400'
+              ]"
+              v-for="(file, index) in source"
+              :key="index"
+              @click="setFile(file.name)"
+            >
+              {{ file.name }}
+            </button>
+
+            <button
+              v-if="debugJSON"
+              class="inline-flex relative py-2 pb-[calc(0.3rem + 2px)] mb-[-2px] border-b-2 border-transparent font-mono text-sm ml-auto"
+              :class="[showDebug
+                ? 'text-white border-white font-bold'
+                : 'text-gray-400'
+              ]"
+              @click="showDebug = !showDebug"
+            >
+              Positions
+            </button>
+          </div>
+        </div>
+
+        <div class="overflow-dark overflow-auto max-h-[500px] relative text-white">
+          <shiki
+            class="overflow-visible p-4"
+            :language="debugJSON && showDebug ? 'js' : getFileExtension(currentFile.name)"
+            :code="debugJSON && showDebug ? debugJSON : currentFile.content"
+            key="debug"
+          />
+        </div>
+
+        <div class="flex justify-between px-4 py-2 text-md text-gray-400 border-t border-gray-800">
+          <a :href="currentIframeUrl">
+            {{ name }}/{{ currentTab }}
+          </a>
+          <a :href="githubUrl" target="_blank">
+            Edit on GitHub →
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDebugJSON } from '@tiptap/core'
+import DemoFrame from './DemoFrame.vue'
+import Shiki from './Shiki.vue'
+
+export default {
+  components: {
+    DemoFrame,
+    Shiki,
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    tabs: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      data: [],
+      sources: {},
+      currentTab: null,
+      currentFile: null,
+      tabOrder: ['Vue', 'React'],
+      debugJSON: null,
+      showDebug: false,
+    }
+  },
+
+  computed: {
+    showTabs() {
+      return this.sortedTabs.length > 1
+    },
+
+    currentIframeUrl() {
+      return `/src/${this.name}/${this.currentTab}/`
+    },
+
+    firstTabSelected() {
+      return this.sortedTabs[0].name === this.currentTab
+    },
+
+    sortedTabs() {
+      return [...this.tabs].sort((a, b) => {
+        return this.tabOrder.indexOf(a.name) - this.tabOrder.indexOf(b.name)
+      })
+    },
+
+    query() {
+      return Object.fromEntries(Object
+        .entries(this.$route.query)
+        .map(([key, value]) => [key, this.fromString(value)]))
+    },
+
+    inline() {
+      return this.query.inline || false
+    },
+
+    hideSource() {
+      return this.query.hideSource || false
+    },
+
+    githubUrl() {
+      return `https://github.com/ueberdosis/tiptap-pro-extensions/tree/main/demos/src/${this.name}`
+    },
+
+    source() {
+      return this.sources[this.currentTab]
+    },
+  },
+
+  methods: {
+    getFileExtension(name) {
+      return name.split('.').pop()
+    },
+
+    setTab(name) {
+      this.currentTab = name
+      this.sources = {}
+      this.currentFile = null
+    },
+
+    setFile(name) {
+      this.showDebug = false
+      this.currentFile = this.source.find(item => item.name === name)
+    },
+
+    onSource(event) {
+      this.sources[this.currentTab] = event.detail
+      this.setFile(this.source[0].name)
+    },
+
+    onEditor(event) {
+      const editor = event.detail
+
+      if (!editor) {
+        this.debugJSON = null
+
+        return
+      }
+
+      this.debugJSON = JSON.stringify(getDebugJSON(editor.state.doc), null, '  ')
+
+      editor.on('update', () => {
+        this.debugJSON = JSON.stringify(getDebugJSON(editor.state.doc), null, '  ')
+      })
+    },
+
+    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
+      }
+
+      if (value === 'null') {
+        return null
+      }
+
+      return value
+    },
+  },
+
+  mounted() {
+    // TODO: load language from url params
+    this.setTab(this.sortedTabs[0]?.name)
+
+    window.document.addEventListener('editor', this.onEditor, false)
+    window.document.addEventListener('source', this.onSource, false)
+  },
+
+  beforeUnmount() {
+    window.document.removeEventListener('editor', this.onEditor)
+    window.document.removeEventListener('source', this.onSource)
+  },
+}
+</script>
--- a/demos/preview/DemoFrame.vue
+++ b/demos/preview/DemoFrame.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-col relative min-h-[5rem]">
+    <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none" v-if="isLoading">
+      <svg
+        class="animate-spin -ml-1 mr-3 h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+      </svg>
+    </div>
+    <iframe
+      class="bg-transparent max-h-[400px]"
+      v-resize.quiet="{ scrolling: 'omit' }"
+      :src="src"
+      width="100%"
+      height="0"
+      frameborder="0"
+      @load="onLoad"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: {
+      required: true,
+      type: String,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: true,
+    }
+  },
+
+  methods: {
+    onLoad() {
+      this.isLoading = false
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>
--- a/demos/preview/Shiki.vue
+++ b/demos/preview/Shiki.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-if="html" v-html="html" />
+  <pre v-else><code>{{ code }}</code></pre>
+</template>
+
+<script>
+import * as shiki from 'shiki'
+import onigasm from 'shiki/dist/onigasm.wasm?url'
+import theme from 'shiki/themes/material-darker.json'
+import langHTML from 'shiki/languages/html.tmLanguage.json'
+import langJS from 'shiki/languages/javascript.tmLanguage.json'
+import langJSX from 'shiki/languages/jsx.tmLanguage.json'
+import langTS from 'shiki/languages/typescript.tmLanguage.json'
+import langTSX from 'shiki/languages/tsx.tmLanguage.json'
+import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
+import langVue from 'shiki/languages/vue.tmLanguage.json'
+import langCSS from 'shiki/languages/css.tmLanguage.json'
+import langSCSS from 'shiki/languages/scss.tmLanguage.json'
+
+export default {
+  props: {
+    code: {
+      default: '',
+      type: String,
+    },
+
+    language: {
+      default: 'js',
+      type: String,
+    },
+  },
+
+  data() {
+    return {
+      html: null,
+      highlighter: window?.highlighter,
+    }
+  },
+
+  watch: {
+    code: {
+      immediate: true,
+      handler() {
+        this.render()
+      },
+    },
+
+    highlighter: {
+      immediate: true,
+      handler() {
+        this.render()
+      },
+    },
+  },
+
+  methods: {
+    render() {
+      try {
+        requestAnimationFrame(() => {
+          this.html = this.highlighter?.codeToHtml(this.code, this.language)
+        })
+      } catch {
+        console.warn(`[shiki]: missing language: ${this.language}`)
+      }
+    },
+
+    async initHighlighter() {
+      if (window.highlighter) {
+        return
+      }
+
+      const arrayBuffer = await fetch(onigasm).then(response => response.arrayBuffer())
+
+      shiki.setOnigasmWASM(arrayBuffer)
+
+      const highlighter = await shiki.getHighlighter({
+        theme,
+        langs: [
+          {
+            id: 'html',
+            scopeName: langHTML.scopeName,
+            grammar: langHTML,
+            embeddedLangs: ['javascript', 'css'],
+          },
+          {
+            id: 'javascript',
+            scopeName: langJS.scopeName,
+            grammar: langJS,
+            aliases: ['js'],
+          },
+          {
+            id: 'jsx',
+            scopeName: langJSX.scopeName,
+            grammar: langJSX,
+          },
+          {
+            id: 'typescript',
+            scopeName: langTS.scopeName,
+            grammar: langTS,
+            aliases: ['ts'],
+          },
+          {
+            id: 'tsx',
+            scopeName: langTSX.scopeName,
+            grammar: langTSX,
+          },
+          {
+            id: 'vue-html',
+            scopeName: langVueHTML.scopeName,
+            grammar: langVueHTML,
+            embeddedLangs: ['vue', 'javascript'],
+          },
+          {
+            id: 'vue',
+            scopeName: langVue.scopeName,
+            grammar: langVue,
+            embeddedLangs: ['json', 'markdown', 'pug', 'haml', 'vue-html', 'sass', 'scss', 'less', 'stylus', 'postcss', 'css', 'typescript', 'coffee', 'javascript'],
+          },
+          {
+            id: 'css',
+            scopeName: langCSS.scopeName,
+            grammar: langCSS,
+          },
+          {
+            id: 'scss',
+            scopeName: langSCSS.scopeName,
+            grammar: langSCSS,
+            embeddedLangs: ['css'],
+          },
+        ],
+      })
+
+      window.highlighter = highlighter
+      this.highlighter = highlighter
+    },
+  },
+
+  created() {
+    this.initHighlighter()
+  },
+}
+</script>
+
+<style>
+.shiki {
+  background-color: transparent !important;
+}
+</style>
--- a/demos/preview/index.html
+++ b/demos/preview/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Preview</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/preview/index.js"></script>
+  </body>
+</html>
--- a/demos/preview/index.js
+++ b/demos/preview/index.js
@@ -0,0 +1,57 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './index.vue'
+import Demo from './Demo.vue'
+import { demos } from '@demos'
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import iframeResize from 'iframe-resizer/js/iframeResizer'
+import './style.css'
+
+const routes = demos
+  .map(({ name, tabs }) => {
+    return {
+      path: `/${name}`,
+      component: Demo,
+      props: {
+        name,
+        tabs,
+      },
+    }
+  })
+
+const router = createRouter({
+  history: createWebHistory('preview'),
+  routes,
+})
+
+createApp(App)
+  .directive('resize', {
+    beforeMount: (el, { value = {} }) => {
+      el.addEventListener('load', () => {
+        iframeResize({
+          ...value,
+          // messageCallback(messageData) {
+          //   if (messageData.message.type !== 'resize') {
+          //     return
+          //   }
+
+          //   const style = window.getComputedStyle(el.parentElement)
+          //   const maxHeight = parseInt(style.getPropertyValue('max-height'), 10)
+
+          //   if (messageData.message.height > maxHeight) {
+          //     el.setAttribute('scrolling', 'auto')
+          //   } else {
+          //     el.setAttribute('scrolling', 'no')
+          //   }
+
+          //   el?.iFrameResizer?.resize?.()
+          // },
+        }, el)
+      })
+    },
+    unmounted(el) {
+      el?.iFrameResizer?.removeListeners?.()
+    },
+  })
+  .use(router)
+  .mount('#app')
--- a/demos/preview/index.vue
+++ b/demos/preview/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <ul v-if="$route.path === '/'">
+    <li v-for="route in $router.options.routes" :key="route.path">
+      <router-link :to="route.path">
+        {{ route.path }}
+      </router-link>
+    </li>
+  </ul>
+  <router-view v-else />
+</template>
--- a/demos/preview/style.css
+++ b/demos/preview/style.css
@@ -0,0 +1,138 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff") format("woff"),
+  ;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2") format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff") format("woff"),
+  ;
+}
+
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  border: 4px solid transparent;
+  background-clip: padding-box;
+  border-radius: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.overflow-dark:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.overflow-dark::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}