Merge branch 'docs/vite-demos'
This commit is contained in:
Philipp Kühn
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@@ -92,7 +92,7 @@ jobs:
|
|||||||
uses: cypress-io/github-action@v2
|
uses: cypress-io/github-action@v2
|
||||||
with:
|
with:
|
||||||
cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
|
cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
|
||||||
start: yarn start
|
start: yarn start:demos
|
||||||
wait-on: 'http://localhost:3000'
|
wait-on: 'http://localhost:3000'
|
||||||
project: ./tests
|
project: ./tests
|
||||||
browser: chrome
|
browser: chrome
|
||||||
|
|||||||
10
demos/index.html
Normal file
10
demos/index.html
Normal file
@@ -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>
|
||||||
50
demos/package.json
Normal file
50
demos/package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
demos/postcss.config.js
Normal file
6
demos/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
241
demos/preview/Demo.vue
Normal file
241
demos/preview/Demo.vue
Normal file
@@ -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>
|
||||||
58
demos/preview/DemoFrame.vue
Normal file
58
demos/preview/DemoFrame.vue
Normal file
@@ -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>
|
||||||
148
demos/preview/Shiki.vue
Normal file
148
demos/preview/Shiki.vue
Normal file
@@ -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>
|
||||||
12
demos/preview/index.html
Normal file
12
demos/preview/index.html
Normal file
@@ -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>
|
||||||
57
demos/preview/index.js
Normal file
57
demos/preview/index.js
Normal file
@@ -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')
|
||||||
28
demos/preview/index.vue
Normal file
28
demos/preview/index.vue
Normal file
@@ -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>
|
||||||
138
demos/preview/style.css
Normal file
138
demos/preview/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
1
demos/public/_redirects
Normal file
1
demos/public/_redirects
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/preview/* /preview/index.html 200
|
||||||
38
demos/setup/helper.ts
Normal file
38
demos/setup/helper.ts
Normal file
@@ -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)
|
||||||
|
})
|
||||||
|
}
|
||||||
19
demos/setup/react.tsx
Normal file
19
demos/setup/react.tsx
Normal file
@@ -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()
|
||||||
|
})
|
||||||
|
}
|
||||||
65
demos/setup/style.scss
Normal file
65
demos/setup/style.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
18
demos/setup/vue.ts
Normal file
18
demos/setup/vue.ts
Normal file
@@ -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()
|
||||||
|
})
|
||||||
|
}
|
||||||
6
demos/shims-vue.d.ts
vendored
Normal file
6
demos/shims-vue.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import { DefineComponent } from 'vue'
|
||||||
|
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
15
demos/src/Examples/Book/React/index.html
Normal file
15
demos/src/Examples/Book/React/index.html
Normal file
@@ -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>
|
||||||
15
demos/src/Examples/Book/Vue/index.html
Normal file
15
demos/src/Examples/Book/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Book/Vue/index.spec.js
Normal file
7
demos/src/Examples/Book/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Book/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Book/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import { content } from '../content.js'
|
import { content } from '../content.js'
|
||||||
|
|
||||||
@@ -99,7 +99,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/CodeBlockLanguage/React/index.html
Normal file
15
demos/src/Examples/CodeBlockLanguage/React/index.html
Normal file
@@ -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>
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
|
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -45,7 +45,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.code-block {
|
.code-block {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
15
demos/src/Examples/CodeBlockLanguage/Vue/index.html
Normal file
15
demos/src/Examples/CodeBlockLanguage/Vue/index.html
Normal file
@@ -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>
|
||||||
@@ -9,12 +9,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-2'
|
import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
|
||||||
import Document from '@tiptap/extension-document'
|
import Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||||||
import CodeBlockComponent from './CodeBlockComponent'
|
import CodeBlockComponent from './CodeBlockComponent.vue'
|
||||||
|
|
||||||
// load all highlight.js languages
|
// load all highlight.js languages
|
||||||
import lowlight from 'lowlight'
|
import lowlight from 'lowlight'
|
||||||
@@ -71,7 +71,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<template v-for="(item, index) in items">
|
<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" />
|
<menu-item v-else :key="index" v-bind="item" />
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@@ -150,11 +150,11 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.divider {
|
.divider {
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
background-color: rgba($colorBlack, 0.1);
|
background-color: rgba(#000, 0.1);
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
@@ -6,12 +6,14 @@
|
|||||||
:title="title"
|
:title="title"
|
||||||
>
|
>
|
||||||
<svg class="remix">
|
<svg class="remix">
|
||||||
<use :xlink:href="require('remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
|
<use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
icon: {
|
icon: {
|
||||||
@@ -34,10 +36,16 @@ export default {
|
|||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
remixiconUrl,
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.menu-item {
|
.menu-item {
|
||||||
width: 1.75rem;
|
width: 1.75rem;
|
||||||
height: 1.75rem;
|
height: 1.75rem;
|
||||||
15
demos/src/Examples/CollaborativeEditing/Vue/index.html
Normal file
15
demos/src/Examples/CollaborativeEditing/Vue/index.html
Normal file
@@ -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>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/CollaborativeEditing/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/CollaborativeEditing/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Collaboration from '@tiptap/extension-collaboration'
|
import Collaboration from '@tiptap/extension-collaboration'
|
||||||
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
|
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
|
||||||
@@ -144,20 +144,20 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
this.provider.destroy()
|
this.provider.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.editor {
|
.editor {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 400px;
|
max-height: 26rem;
|
||||||
color: #0D0D0D;
|
color: #0D0D0D;
|
||||||
background-color: $colorWhite;
|
background-color: #FFF;
|
||||||
border: 3px solid #0D0D0D;
|
border: 3px solid #0D0D0D;
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
|
|
||||||
15
demos/src/Examples/Community/React/index.html
Normal file
15
demos/src/Examples/Community/React/index.html
Normal file
@@ -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>
|
||||||
@@ -81,7 +81,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.items {
|
.items {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
15
demos/src/Examples/Community/Vue/index.html
Normal file
15
demos/src/Examples/Community/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Community/Vue/index.spec.js
Normal file
7
demos/src/Examples/Community/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Community/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Community/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -42,13 +42,13 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import tippy from 'tippy.js'
|
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 Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
import CharacterCount from '@tiptap/extension-character-count'
|
import CharacterCount from '@tiptap/extension-character-count'
|
||||||
import Mention from '@tiptap/extension-mention'
|
import Mention from '@tiptap/extension-mention'
|
||||||
import MentionList from './MentionList'
|
import MentionList from './MentionList.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -88,8 +88,11 @@ export default {
|
|||||||
return {
|
return {
|
||||||
onStart: props => {
|
onStart: props => {
|
||||||
component = new VueRenderer(MentionList, {
|
component = new VueRenderer(MentionList, {
|
||||||
parent: this,
|
// using vue 2:
|
||||||
propsData: props,
|
// parent: this,
|
||||||
|
// propsData: props,
|
||||||
|
props,
|
||||||
|
editor: props.editor,
|
||||||
})
|
})
|
||||||
|
|
||||||
popup = tippy('body', {
|
popup = tippy('body', {
|
||||||
@@ -141,7 +144,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Default/React/index.html
Normal file
15
demos/src/Examples/Default/React/index.html
Normal file
@@ -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>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
context('/demos/Examples/Default/React', () => {
|
context('/src/Examples/Default/React/', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.visit('/demos/Examples/Default/React')
|
cy.visit('/src/Examples/Default/React/')
|
||||||
})
|
})
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
15
demos/src/Examples/Default/Vue/index.html
Normal file
15
demos/src/Examples/Default/Vue/index.html
Normal file
@@ -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>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
context('/demos/Examples/Default/Vue', () => {
|
context('/src/Examples/Default/Vue/', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.visit('/demos/Examples/Default/Vue')
|
cy.visit('/src/Examples/Default/Vue/')
|
||||||
})
|
})
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -122,7 +122,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { NodeViewWrapper } from '@tiptap/vue-2'
|
import { NodeViewWrapper } from '@tiptap/vue-3'
|
||||||
import { v4 as uuid } from 'uuid'
|
import { v4 as uuid } from 'uuid'
|
||||||
import * as d3 from 'd3'
|
import * as d3 from 'd3'
|
||||||
import simplify from 'simplify-js'
|
import simplify from 'simplify-js'
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Node, mergeAttributes } from '@tiptap/core'
|
import { Node, mergeAttributes } from '@tiptap/core'
|
||||||
import { VueNodeViewRenderer } from '@tiptap/vue-2'
|
import { VueNodeViewRenderer } from '@tiptap/vue-3'
|
||||||
import Component from './Component.vue'
|
import Component from './Component.vue'
|
||||||
|
|
||||||
export default Node.create({
|
export default Node.create({
|
||||||
15
demos/src/Examples/Drawing/Vue/index.html
Normal file
15
demos/src/Examples/Drawing/Vue/index.html
Normal file
@@ -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>
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import Document from '@tiptap/extension-document'
|
import Document from '@tiptap/extension-document'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
import Paper from './Paper.js'
|
import Paper from './Paper.js'
|
||||||
@@ -33,7 +33,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Formatting/React/index.html
Normal file
15
demos/src/Examples/Formatting/React/index.html
Normal file
@@ -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>
|
||||||
15
demos/src/Examples/Formatting/Vue/index.html
Normal file
15
demos/src/Examples/Formatting/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Formatting/Vue/index.spec.js
Normal file
7
demos/src/Examples/Formatting/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Formatting/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Formatting/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import TextAlign from '@tiptap/extension-text-align'
|
import TextAlign from '@tiptap/extension-text-align'
|
||||||
import Highlight from '@tiptap/extension-highlight'
|
import Highlight from '@tiptap/extension-highlight'
|
||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Images/React/index.html
Normal file
15
demos/src/Examples/Images/React/index.html
Normal file
@@ -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>
|
||||||
15
demos/src/Examples/Images/Vue/index.html
Normal file
15
demos/src/Examples/Images/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Images/Vue/index.spec.js
Normal file
7
demos/src/Examples/Images/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Images/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Images/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import Document from '@tiptap/extension-document'
|
import Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
@@ -53,7 +53,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/MarkdownShortcuts/React/index.html
Normal file
15
demos/src/Examples/MarkdownShortcuts/React/index.html
Normal file
@@ -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>
|
||||||
15
demos/src/Examples/MarkdownShortcuts/Vue/index.html
Normal file
15
demos/src/Examples/MarkdownShortcuts/Vue/index.html
Normal file
@@ -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>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
context('/demos/Examples/MarkdownShortcuts/Vue', () => {
|
context('/src/Examples/MarkdownShortcuts/Vue/', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.visit('/demos/Examples/MarkdownShortcuts/Vue')
|
cy.visit('/src/Examples/MarkdownShortcuts/Vue/')
|
||||||
})
|
})
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Highlight from '@tiptap/extension-highlight'
|
import Highlight from '@tiptap/extension-highlight'
|
||||||
import Typography from '@tiptap/extension-typography'
|
import Typography from '@tiptap/extension-typography'
|
||||||
@@ -46,7 +46,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Menus/React/index.html
Normal file
15
demos/src/Examples/Menus/React/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Menus/React/index.spec.js
Normal file
7
demos/src/Examples/Menus/React/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/BubbleMenu/React/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/BubbleMenu/React/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
15
demos/src/Examples/Menus/Vue/index.html
Normal file
15
demos/src/Examples/Menus/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Menus/Vue/index.spec.js
Normal file
7
demos/src/Examples/Menus/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/BubbleMenu/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/BubbleMenu/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -44,7 +44,7 @@ import {
|
|||||||
EditorContent,
|
EditorContent,
|
||||||
BubbleMenu,
|
BubbleMenu,
|
||||||
FloatingMenu,
|
FloatingMenu,
|
||||||
} from '@tiptap/vue-2'
|
} from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -76,7 +76,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Minimal/React/index.html
Normal file
15
demos/src/Examples/Minimal/React/index.html
Normal file
@@ -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>
|
||||||
15
demos/src/Examples/Minimal/Vue/index.html
Normal file
15
demos/src/Examples/Minimal/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Minimal/Vue/index.spec.js
Normal file
7
demos/src/Examples/Minimal/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Minimal/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Minimal/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import Document from '@tiptap/extension-document'
|
import Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
@@ -37,7 +37,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Savvy/Vue/index.html
Normal file
15
demos/src/Examples/Savvy/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Savvy/Vue/index.spec.js
Normal file
7
demos/src/Examples/Savvy/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Savvy/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Savvy/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import Document from '@tiptap/extension-document'
|
import Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
@@ -54,7 +54,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
15
demos/src/Examples/Tables/React/index.html
Normal file
15
demos/src/Examples/Tables/React/index.html
Normal file
@@ -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>
|
||||||
15
demos/src/Examples/Tables/Vue/index.html
Normal file
15
demos/src/Examples/Tables/Vue/index.html
Normal file
@@ -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>
|
||||||
7
demos/src/Examples/Tables/Vue/index.spec.js
Normal file
7
demos/src/Examples/Tables/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/src/Examples/Tables/Vue/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Examples/Tables/Vue/')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Table from '@tiptap/extension-table'
|
import Table from '@tiptap/extension-table'
|
||||||
import TableRow from '@tiptap/extension-table-row'
|
import TableRow from '@tiptap/extension-table-row'
|
||||||
@@ -158,7 +158,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
this.editor.destroy()
|
this.editor.destroy()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user