Merge branch 'docs/vite-demos'

2024-11-28 15:49:23 +08:00 · 2021-08-26 16:23:33 +02:00 · 2021-08-26 16:23:33 +02:00 · 629b2c4713
commit 629b2c4713
parent c5f3d0161b 121616537b
370 changed files with 4379 additions and 1555 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -92,7 +92,7 @@ jobs:
      uses: cypress-io/github-action@v2
      with:
        cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
-        start: yarn start
+        start: yarn start:demos
        wait-on: 'http://localhost:3000'
        project: ./tests
        browser: chrome
--- a/demos/index.html
+++ b/demos/index.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="refresh" content="0; url=/preview/" />
+  </head>
+  <body>
+  </body>
+</html>
--- a/demos/package.json
+++ b/demos/package.json
@ -0,0 +1,50 @@
+{
+  "name": "tiptap-demos",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "_build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview --port 3000"
+  },
+  "dependencies": {
+    "@tiptap/core": "^2.0.0-beta.101",
+    "@tiptap/starter-kit": "^2.0.0-beta.99",
+    "@tiptap/vue-3": "^2.0.0-beta.52",
+    "@types/prosemirror-commands": "^1.0.4",
+    "@types/prosemirror-inputrules": "^1.0.4",
+    "@types/prosemirror-keymap": "^1.0.4",
+    "@types/prosemirror-model": "^1.13.1",
+    "@types/prosemirror-schema-list": "^1.0.3",
+    "@types/prosemirror-state": "^1.2.7",
+    "@types/prosemirror-transform": "^1.1.4",
+    "@types/prosemirror-view": "^1.17.2",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "autoprefixer": "^10.3.1",
+    "iframe-resizer": "^4.3.2",
+    "postcss": "^8.3.6",
+    "prosemirror-view": "^1.18.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "shiki": "^0.9.7",
+    "tailwindcss": "^2.2.7",
+    "uuid": "^8.3.2",
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.11",
+    "y-prosemirror": "^1.0.9",
+    "y-webrtc": "^10.2.0",
+    "y-websocket": "^1.3.16",
+    "yjs": "^13.5.11"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.5.0",
+    "@vue/compiler-sfc": "^3.1.4",
+    "globby": "^11.0.4",
+    "sass": "^1.35.2",
+    "typescript": "^4.3.5",
+    "vite": "^2.5.1",
+    "vue-tsc": "^0.3.0"
+  }
+}
--- a/demos/postcss.config.js
+++ b/demos/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- 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-[28rem]"
+      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,28 @@
+<template>
+  <ul v-if="$route.path === '/'">
+    <li
+      class="p-5 border-b-2 border-black"
+      v-for="route in $router.options.routes"
+      :key="route.path"
+    >
+      <router-link
+        class="block mb-2 font-medium"
+        :to="route.path"
+      >
+        {{ route.props.name }}
+      </router-link>
+
+      <div class="flex">
+        <a
+          class="mr-4 text-sm text-gray-300 font-medium"
+          v-for="(tab, index) in route.props.tabs"
+          :key="index"
+          :href="`/src/${route.props.name}/${tab.name}/`"
+        >
+          {{ tab.name }}
+        </a>
+      </div>
+    </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;
+}
--- a/demos/public/_redirects
+++ b/demos/public/_redirects
@ -0,0 +1 @@
+/preview/*   /preview/index.html   200
--- a/demos/setup/helper.ts
+++ b/demos/setup/helper.ts
@ -0,0 +1,38 @@
+const waitUntilElementExists = (selector: any, callback: (element: Element) => void) => {
+  const element = document.querySelector(selector)
+
+  if (element) {
+    return callback(element)
+  }
+
+  setTimeout(() => waitUntilElementExists(selector, callback), 500)
+}
+
+const sendData = (eventName: string, data: any) => {
+  const event = new CustomEvent(eventName, { detail: data })
+
+  window.parent.document.dispatchEvent(event)
+}
+
+export function splitName(name: string) {
+  const parts = name.split('/')
+
+  if (parts.length !== 2) {
+    throw Error('Demos must always be within exactly one category. Nested categories are not supported.')
+  }
+
+  return parts
+}
+
+export function debug() {
+  sendData('editor', null)
+  // @ts-ignore
+  sendData('source', window.source)
+
+  waitUntilElementExists('.ProseMirror', element => {
+    // @ts-ignore
+    const editor = element.editor
+
+    sendData('editor', editor)
+  })
+}
--- a/demos/setup/react.tsx
+++ b/demos/setup/react.tsx
@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import { debug, splitName } from './helper'
+import './style.scss'
+
+export default function init(name: string, source: any) {
+  // @ts-ignore
+  window.source = source
+  document.title = name
+
+  const [demoCategory, demoName] = splitName(name)
+
+  import(`../src/${demoCategory}/${demoName}/React/index.jsx`)
+    .then(module => {
+      ReactDOM.render(<module.default />, document.getElementById('app'))
+      debug()
+    })
+}
--- a/demos/setup/style.scss
+++ b/demos/setup/style.scss
@ -0,0 +1,65 @@
+$colorBlack: #000;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 1rem;
+  min-height: 10rem;
+}
+
+::-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);
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+.ProseMirror:focus {
+  outline: none;
+}
+
+.is-active {
+  background: black;
+  color: white;
+}
--- a/demos/setup/vue.ts
+++ b/demos/setup/vue.ts
@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import { debug, splitName } from './helper'
+import './style.scss'
+
+export default function init(name: string, source: any) {
+  // @ts-ignore
+  window.source = source
+  document.title = name
+
+  const [demoCategory, demoName] = splitName(name)
+
+  import(`../src/${demoCategory}/${demoName}/Vue/index.vue`)
+    .then(module => {
+      createApp(module.default).mount('#app')
+      debug()
+    })
+}
--- a/demos/shims-vue.d.ts
+++ b/demos/shims-vue.d.ts
@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/demos/src/Examples/Book/React/index.html
+++ b/demos/src/Examples/Book/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Book', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Book/React/index.jsx
+++ b/docs/src/demos/Examples/Book/React/index.jsx
--- a/docs/src/demos/Examples/Book/React/styles.scss
+++ b/docs/src/demos/Examples/Book/React/styles.scss
--- a/demos/src/Examples/Book/Vue/index.html
+++ b/demos/src/Examples/Book/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Book', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Book/Vue/index.spec.js
+++ b/demos/src/Examples/Book/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Book/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Book/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Book/Vue/index.vue
+++ b/docs/src/demos/Examples/Book/Vue/index.vue
@ -70,7 +70,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { content } from '../content.js'

@ -99,7 +99,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/docs/src/demos/Examples/Book/content.js
+++ b/docs/src/demos/Examples/Book/content.js
--- a/docs/src/demos/Examples/CodeBlockLanguage/React/CodeBlockComponent.jsx
+++ b/docs/src/demos/Examples/CodeBlockLanguage/React/CodeBlockComponent.jsx
--- a/docs/src/demos/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss
+++ b/docs/src/demos/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss
--- a/demos/src/Examples/CodeBlockLanguage/React/index.html
+++ b/demos/src/Examples/CodeBlockLanguage/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/CodeBlockLanguage', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/CodeBlockLanguage/React/index.jsx
+++ b/docs/src/demos/Examples/CodeBlockLanguage/React/index.jsx
--- a/docs/src/demos/Examples/CodeBlockLanguage/React/styles.scss
+++ b/docs/src/demos/Examples/CodeBlockLanguage/React/styles.scss
--- a/docs/src/demos/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue
+++ b/docs/src/demos/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue
@ -16,7 +16,7 @@
 </template>

 <script>
-import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'

 export default {
  components: {
@ -45,7 +45,7 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
 .code-block {
  position: relative;

--- a/demos/src/Examples/CodeBlockLanguage/Vue/index.html
+++ b/demos/src/Examples/CodeBlockLanguage/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/CodeBlockLanguage', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/CodeBlockLanguage/Vue/index.vue
+++ b/docs/src/demos/Examples/CodeBlockLanguage/Vue/index.vue
@ -9,12 +9,12 @@
 </template>

 <script>
-import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-2'
+import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import CodeBlockComponent from './CodeBlockComponent'
+import CodeBlockComponent from './CodeBlockComponent.vue'

 // load all highlight.js languages
 import lowlight from 'lowlight'
@ -71,7 +71,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <template v-for="(item, index) in items">
-      <div class="divider" v-if="item.type === 'divider'" :key="index" />
+      <div class="divider" v-if="item.type === 'divider'" :key="`divider${index}`" />
      <menu-item v-else :key="index" v-bind="item" />
    </template>
  </div>
@ -150,11 +150,11 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
 .divider {
  width: 2px;
  height: 1.25rem;
-  background-color: rgba($colorBlack, 0.1);
+  background-color: rgba(#000, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.75rem;
 }
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
@ -6,12 +6,14 @@
    :title="title"
  >
    <svg class="remix">
-      <use :xlink:href="require('remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
+      <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
    </svg>
  </button>
 </template>

 <script>
+import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
+
 export default {
  props: {
    icon: {
@ -34,10 +36,16 @@ export default {
      default: null,
    },
  },
+
+  data() {
+    return {
+      remixiconUrl,
+    }
+  },
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
 .menu-item {
  width: 1.75rem;
  height: 1.75rem;
--- a/demos/src/Examples/CollaborativeEditing/Vue/index.html
+++ b/demos/src/Examples/CollaborativeEditing/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/CollaborativeEditing', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/CollaborativeEditing/Vue/index.spec.js
+++ b/demos/src/Examples/CollaborativeEditing/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/CollaborativeEditing/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/CollaborativeEditing/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@ -21,7 +21,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
@ -144,20 +144,20 @@ export default {
    },
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
    this.provider.destroy()
  },
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
 .editor {
  display: flex;
  flex-direction: column;
-  max-height: 400px;
+  max-height: 26rem;
  color: #0D0D0D;
-  background-color: $colorWhite;
+  background-color: #FFF;
  border: 3px solid #0D0D0D;
  border-radius: 0.75rem;

--- a/docs/src/demos/Examples/Community/React/MentionList.jsx
+++ b/docs/src/demos/Examples/Community/React/MentionList.jsx
--- a/docs/src/demos/Examples/Community/React/MentionList.scss
+++ b/docs/src/demos/Examples/Community/React/MentionList.scss
--- a/demos/src/Examples/Community/React/index.html
+++ b/demos/src/Examples/Community/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Community', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Community/React/index.jsx
+++ b/docs/src/demos/Examples/Community/React/index.jsx
--- a/docs/src/demos/Examples/Community/React/styles.scss
+++ b/docs/src/demos/Examples/Community/React/styles.scss
--- a/docs/src/demos/Examples/Community/Vue/MentionList.vue
+++ b/docs/src/demos/Examples/Community/Vue/MentionList.vue
@ -81,7 +81,7 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
 .items {
  position: relative;
  border-radius: 0.25rem;
--- a/demos/src/Examples/Community/Vue/index.html
+++ b/demos/src/Examples/Community/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Community', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Community/Vue/index.spec.js
+++ b/demos/src/Examples/Community/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Community/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Community/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Community/Vue/index.vue
+++ b/docs/src/demos/Examples/Community/Vue/index.vue
@ -42,13 +42,13 @@

 <script>
 import tippy from 'tippy.js'
-import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-2'
+import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CharacterCount from '@tiptap/extension-character-count'
 import Mention from '@tiptap/extension-mention'
-import MentionList from './MentionList'
+import MentionList from './MentionList.vue'

 export default {
  components: {
@ -88,8 +88,11 @@ export default {
              return {
                onStart: props => {
                  component = new VueRenderer(MentionList, {
-                    parent: this,
-                    propsData: props,
+                    // using vue 2:
+                    // parent: this,
+                    // propsData: props,
+                    props,
+                    editor: props.editor,
                  })

                  popup = tippy('body', {
@ -141,7 +144,7 @@ export default {
    },
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/Default/React/index.html
+++ b/demos/src/Examples/Default/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Default', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Default/React/index.jsx
+++ b/docs/src/demos/Examples/Default/React/index.jsx
--- a/docs/src/demos/Examples/Default/React/index.spec.js
+++ b/docs/src/demos/Examples/Default/React/index.spec.js
@ -1,6 +1,6 @@
-context('/demos/Examples/Default/React', () => {
+context('/src/Examples/Default/React/', () => {
  before(() => {
-    cy.visit('/demos/Examples/Default/React')
+    cy.visit('/src/Examples/Default/React/')
  })

  beforeEach(() => {
--- a/docs/src/demos/Examples/Default/React/styles.scss
+++ b/docs/src/demos/Examples/Default/React/styles.scss
--- a/demos/src/Examples/Default/Vue/index.html
+++ b/demos/src/Examples/Default/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Default', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Default/Vue/index.spec.js
+++ b/docs/src/demos/Examples/Default/Vue/index.spec.js
@ -1,6 +1,6 @@
-context('/demos/Examples/Default/Vue', () => {
+context('/src/Examples/Default/Vue/', () => {
  before(() => {
-    cy.visit('/demos/Examples/Default/Vue')
+    cy.visit('/src/Examples/Default/Vue/')
  })

  beforeEach(() => {
--- a/docs/src/demos/Examples/Default/Vue/index.vue
+++ b/docs/src/demos/Examples/Default/Vue/index.vue
@ -70,7 +70,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'

 export default {
@ -122,7 +122,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@ -26,7 +26,7 @@
 </template>

 <script>
-import { NodeViewWrapper } from '@tiptap/vue-2'
+import { NodeViewWrapper } from '@tiptap/vue-3'
 import { v4 as uuid } from 'uuid'
 import * as d3 from 'd3'
 import simplify from 'simplify-js'
--- a/docs/src/demos/Examples/Drawing/Paper.js
+++ b/docs/src/demos/Examples/Drawing/Paper.js
@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import Component from './Component.vue'

 export default Node.create({
--- a/demos/src/Examples/Drawing/Vue/index.html
+++ b/demos/src/Examples/Drawing/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Drawing', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Drawing/index.vue
+++ b/docs/src/demos/Examples/Drawing/index.vue
@ -5,7 +5,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Text from '@tiptap/extension-text'
 import Paper from './Paper.js'
@ -33,7 +33,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/Formatting/React/index.html
+++ b/demos/src/Examples/Formatting/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Formatting', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Formatting/React/index.jsx
+++ b/docs/src/demos/Examples/Formatting/React/index.jsx
--- a/docs/src/demos/Examples/Formatting/React/styles.scss
+++ b/docs/src/demos/Examples/Formatting/React/styles.scss
--- a/demos/src/Examples/Formatting/Vue/index.html
+++ b/demos/src/Examples/Formatting/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Formatting', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Formatting/Vue/index.spec.js
+++ b/demos/src/Examples/Formatting/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Formatting/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Formatting/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Formatting/Vue/index.vue
+++ b/docs/src/demos/Examples/Formatting/Vue/index.vue
@ -43,7 +43,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import TextAlign from '@tiptap/extension-text-align'
 import Highlight from '@tiptap/extension-highlight'
@ -97,7 +97,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/Images/React/index.html
+++ b/demos/src/Examples/Images/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Images', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Images/React/index.jsx
+++ b/docs/src/demos/Examples/Images/React/index.jsx
--- a/docs/src/demos/Examples/Images/React/styles.scss
+++ b/docs/src/demos/Examples/Images/React/styles.scss
--- a/demos/src/Examples/Images/Vue/index.html
+++ b/demos/src/Examples/Images/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Images', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Images/Vue/index.spec.js
+++ b/demos/src/Examples/Images/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Images/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Images/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Images/Vue/index.vue
+++ b/docs/src/demos/Examples/Images/Vue/index.vue
@ -8,7 +8,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@ -53,7 +53,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/MarkdownShortcuts/React/index.html
+++ b/demos/src/Examples/MarkdownShortcuts/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/MarkdownShortcuts', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/MarkdownShortcuts/React/index.jsx
+++ b/docs/src/demos/Examples/MarkdownShortcuts/React/index.jsx
--- a/docs/src/demos/Examples/MarkdownShortcuts/React/styles.scss
+++ b/docs/src/demos/Examples/MarkdownShortcuts/React/styles.scss
--- a/demos/src/Examples/MarkdownShortcuts/Vue/index.html
+++ b/demos/src/Examples/MarkdownShortcuts/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/MarkdownShortcuts', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/MarkdownShortcuts/Vue/index.spec.js
+++ b/docs/src/demos/Examples/MarkdownShortcuts/Vue/index.spec.js
@ -1,6 +1,6 @@
-context('/demos/Examples/MarkdownShortcuts/Vue', () => {
+context('/src/Examples/MarkdownShortcuts/Vue/', () => {
  before(() => {
-    cy.visit('/demos/Examples/MarkdownShortcuts/Vue')
+    cy.visit('/src/Examples/MarkdownShortcuts/Vue/')
  })

  beforeEach(() => {
--- a/docs/src/demos/Examples/MarkdownShortcuts/Vue/index.vue
+++ b/docs/src/demos/Examples/MarkdownShortcuts/Vue/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Highlight from '@tiptap/extension-highlight'
 import Typography from '@tiptap/extension-typography'
@ -46,7 +46,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/Menus/React/index.html
+++ b/demos/src/Examples/Menus/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Menus', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Menus/React/index.jsx
+++ b/docs/src/demos/Examples/Menus/React/index.jsx
--- a/demos/src/Examples/Menus/React/index.spec.js
+++ b/demos/src/Examples/Menus/React/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/BubbleMenu/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/BubbleMenu/React/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Menus/React/styles.scss
+++ b/docs/src/demos/Examples/Menus/React/styles.scss
--- a/demos/src/Examples/Menus/Vue/index.html
+++ b/demos/src/Examples/Menus/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Menus', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Menus/Vue/index.spec.js
+++ b/demos/src/Examples/Menus/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/BubbleMenu/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/BubbleMenu/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Menus/Vue/index.vue
+++ b/docs/src/demos/Examples/Menus/Vue/index.vue
@ -44,7 +44,7 @@ import {
  EditorContent,
  BubbleMenu,
  FloatingMenu,
-} from '@tiptap/vue-2'
+} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'

 export default {
@ -76,7 +76,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/Minimal/React/index.html
+++ b/demos/src/Examples/Minimal/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Minimal', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Minimal/React/index.jsx
+++ b/docs/src/demos/Examples/Minimal/React/index.jsx
--- a/docs/src/demos/Examples/Minimal/React/styles.scss
+++ b/docs/src/demos/Examples/Minimal/React/styles.scss
--- a/demos/src/Examples/Minimal/Vue/index.html
+++ b/demos/src/Examples/Minimal/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Minimal', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Minimal/Vue/index.spec.js
+++ b/demos/src/Examples/Minimal/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Minimal/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Minimal/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Minimal/Vue/index.vue
+++ b/docs/src/demos/Examples/Minimal/Vue/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@ -37,7 +37,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/docs/src/demos/Examples/Savvy/ColorHighlighter.ts
+++ b/docs/src/demos/Examples/Savvy/ColorHighlighter.ts
--- a/docs/src/demos/Examples/Savvy/SmilieReplacer.ts
+++ b/docs/src/demos/Examples/Savvy/SmilieReplacer.ts
--- a/docs/src/demos/Examples/Savvy/findColors.ts
+++ b/docs/src/demos/Examples/Savvy/findColors.ts
--- a/demos/src/Examples/Savvy/Vue/index.html
+++ b/demos/src/Examples/Savvy/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Savvy', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Savvy/Vue/index.spec.js
+++ b/demos/src/Examples/Savvy/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Savvy/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Savvy/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Savvy/index.vue
+++ b/docs/src/demos/Examples/Savvy/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@ -54,7 +54,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/demos/src/Examples/Tables/React/index.html
+++ b/demos/src/Examples/Tables/React/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Tables', source)
+    </script>
+  </body>
+</html>
--- a/docs/src/demos/Examples/Tables/React/index.jsx
+++ b/docs/src/demos/Examples/Tables/React/index.jsx
--- a/docs/src/demos/Examples/Tables/React/styles.scss
+++ b/docs/src/demos/Examples/Tables/React/styles.scss
--- a/demos/src/Examples/Tables/Vue/index.html
+++ b/demos/src/Examples/Tables/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Examples/Tables', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Tables/Vue/index.spec.js
+++ b/demos/src/Examples/Tables/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Examples/Tables/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Tables/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/docs/src/demos/Examples/Tables/Vue/index.vue
+++ b/docs/src/demos/Examples/Tables/Vue/index.vue
@ -60,7 +60,7 @@
 </template>

 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Table from '@tiptap/extension-table'
 import TableRow from '@tiptap/extension-table-row'
@ -158,7 +158,7 @@ export default {
    })
  },

-  beforeDestroy() {
+  beforeUnmount() {
    this.editor.destroy()
  },
 }
--- a/Show More
+++ b/Show More