mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-28 23:59:25 +08:00
Merge branch 'docs/vite-demos'
This commit is contained in:
commit
629b2c4713
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@ -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
|
||||
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
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>
|
||||
|
||||
<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;
|
||||
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
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>
|
||||
|
||||
<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;
|
||||
|
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.items {
|
||||
position: relative;
|
||||
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>
|
||||
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()
|
||||
},
|
||||
}
|
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(() => {
|
||||
cy.visit('/demos/Examples/Default/React')
|
||||
cy.visit('/src/Examples/Default/React/')
|
||||
})
|
||||
|
||||
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(() => {
|
||||
cy.visit('/demos/Examples/Default/Vue')
|
||||
cy.visit('/src/Examples/Default/Vue/')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
@ -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()
|
||||
},
|
||||
}
|
@ -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'
|
@ -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({
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
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(() => {
|
||||
cy.visit('/demos/Examples/MarkdownShortcuts/Vue')
|
||||
cy.visit('/src/Examples/MarkdownShortcuts/Vue/')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
@ -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()
|
||||
},
|
||||
}
|
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,
|
||||
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()
|
||||
},
|
||||
}
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
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>
|
||||
|
||||
<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()
|
||||
},
|
||||
}
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user