Merge branch 'docs/vite-demos'

This commit is contained in:
Philipp Kühn 2021-08-26 16:23:33 +02:00
commit 629b2c4713
370 changed files with 4379 additions and 1555 deletions

View File

@ -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
View 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
View 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
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

241
demos/preview/Demo.vue Normal file
View 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>

View 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
View 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
View 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
View 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
View 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
View 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
View File

@ -0,0 +1 @@
/preview/* /preview/index.html 200

38
demos/setup/helper.ts Normal file
View 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
View 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
View 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
View 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
View File

@ -0,0 +1,6 @@
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

View 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>

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Book/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Book/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View File

@ -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;

View 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>

View File

@ -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()
},
}

View File

@ -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;
}

View File

@ -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;

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/CollaborativeEditing/Vue/', () => {
before(() => {
cy.visit('/src/Examples/CollaborativeEditing/Vue/')
})
// TODO: Write tests
})

View File

@ -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;

View 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>

View File

@ -81,7 +81,7 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.items {
position: relative;
border-radius: 0.25rem;

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Community/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Community/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View File

@ -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(() => {

View 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>

View File

@ -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(() => {

View File

@ -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()
},
}

View File

@ -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'

View File

@ -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({

View 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>

View File

@ -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()
},
}

View 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>

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Formatting/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Formatting/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Images/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Images/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View 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>

View File

@ -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(() => {

View File

@ -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()
},
}

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/BubbleMenu/React/', () => {
before(() => {
cy.visit('/src/Examples/BubbleMenu/React/')
})
// TODO: Write tests
})

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/BubbleMenu/Vue/', () => {
before(() => {
cy.visit('/src/Examples/BubbleMenu/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Minimal/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Minimal/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Savvy/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Savvy/Vue/')
})
// TODO: Write tests
})

View File

@ -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()
},
}

View 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>

View 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>

View File

@ -0,0 +1,7 @@
context('/src/Examples/Tables/Vue/', () => {
before(() => {
cy.visit('/src/Examples/Tables/Vue/')
})
// TODO: Write tests
})

View File

@ -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