mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 03:39:01 +08:00
add basic vite setup
This commit is contained in:
Philipp Kühn
parent
96a7310b9d
commit
15c7e1955a
12
demos/index.html
Normal file
12
demos/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>Index</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<a href="/preview/">Preview</a>
|
||||
</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-[400px]"
|
||||
v-resize.quiet="{ scrolling: 'omit' }"
|
||||
:src="src"
|
||||
width="100%"
|
||||
height="0"
|
||||
frameborder="0"
|
||||
@load="onLoad"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
this.isLoading = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
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')
|
||||
10
demos/preview/index.vue
Normal file
10
demos/preview/index.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<ul v-if="$route.path === '/'">
|
||||
<li v-for="route in $router.options.routes" :key="route.path">
|
||||
<router-link :to="route.path">
|
||||
{{ route.path }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<router-view v-else />
|
||||
</template>
|
||||
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()
|
||||
})
|
||||
}
|
||||
59
demos/setup/style.scss
Normal file
59
demos/setup/style.scss
Normal file
@ -0,0 +1,59 @@
|
||||
$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;
|
||||
}
|
||||
|
||||
::-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;
|
||||
}
|
||||
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/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>
|
||||
168
demos/src/Examples/Default/React/index.jsx
Normal file
168
demos/src/Examples/Default/React/index.jsx
Normal file
@ -0,0 +1,168 @@
|
||||
import React from 'react'
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import './styles.scss'
|
||||
|
||||
const MenuBar = ({ editor }) => {
|
||||
if (!editor) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
className={editor.isActive('bold') ? 'is-active' : ''}
|
||||
>
|
||||
bold
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
className={editor.isActive('italic') ? 'is-active' : ''}
|
||||
>
|
||||
italic
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
className={editor.isActive('strike') ? 'is-active' : ''}
|
||||
>
|
||||
strike
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleCode().run()}
|
||||
className={editor.isActive('code') ? 'is-active' : ''}
|
||||
>
|
||||
code
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
||||
clear marks
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().clearNodes().run()}>
|
||||
clear nodes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().setParagraph().run()}
|
||||
className={editor.isActive('paragraph') ? 'is-active' : ''}
|
||||
>
|
||||
paragraph
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
|
||||
>
|
||||
h1
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
|
||||
>
|
||||
h2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
|
||||
>
|
||||
h3
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
|
||||
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
|
||||
>
|
||||
h4
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
|
||||
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
|
||||
>
|
||||
h5
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
|
||||
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
|
||||
>
|
||||
h6
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
className={editor.isActive('bulletList') ? 'is-active' : ''}
|
||||
>
|
||||
bullet list
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
className={editor.isActive('orderedList') ? 'is-active' : ''}
|
||||
>
|
||||
ordered list
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
className={editor.isActive('codeBlock') ? 'is-active' : ''}
|
||||
>
|
||||
code block
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
className={editor.isActive('blockquote') ? 'is-active' : ''}
|
||||
>
|
||||
blockquote
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
|
||||
horizontal rule
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
|
||||
hard break
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().undo().run()}>
|
||||
undo
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().redo().run()}>
|
||||
redo
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
content: `
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That’s a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that’s amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
`,
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MenuBar editor={editor} />
|
||||
<EditorContent editor={editor} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
22
demos/src/Examples/Default/React/index.spec.js
Normal file
22
demos/src/Examples/Default/React/index.spec.js
Normal file
@ -0,0 +1,22 @@
|
||||
context('/demos/Examples/Default/React', () => {
|
||||
before(() => {
|
||||
cy.visit('/demos/Examples/Default/React')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<h1>Example Text</h1>')
|
||||
cy.get('.ProseMirror').type('{selectall}')
|
||||
})
|
||||
})
|
||||
|
||||
it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror h1').should('exist')
|
||||
cy.get('.ProseMirror p').should('not.exist')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: '0' })
|
||||
.find('p')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
})
|
||||
56
demos/src/Examples/Default/React/styles.scss
Normal file
56
demos/src/Examples/Default/React/styles.scss
Normal file
@ -0,0 +1,56 @@
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #0D0D0D;
|
||||
color: #FFF;
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 2px solid rgba(#0D0D0D, 0.1);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
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>
|
||||
22
demos/src/Examples/Default/Vue/index.spec.js
Normal file
22
demos/src/Examples/Default/Vue/index.spec.js
Normal file
@ -0,0 +1,22 @@
|
||||
context('/demos/Examples/Default/Vue', () => {
|
||||
before(() => {
|
||||
cy.visit('/demos/Examples/Default/Vue')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<h1>Example Text</h1>')
|
||||
cy.get('.ProseMirror').type('{selectall}')
|
||||
})
|
||||
})
|
||||
|
||||
it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror h1').should('exist')
|
||||
cy.get('.ProseMirror p').should('not.exist')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: '0' })
|
||||
.find('p')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
})
|
||||
188
demos/src/Examples/Default/Vue/index.vue
Normal file
188
demos/src/Examples/Default/Vue/index.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
italic
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
|
||||
strike
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
|
||||
code
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetAllMarks().run()">
|
||||
clear marks
|
||||
</button>
|
||||
<button @click="editor.chain().focus().clearNodes().run()">
|
||||
clear nodes
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
|
||||
paragraph
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
|
||||
h1
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
|
||||
h2
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
|
||||
h3
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
|
||||
h4
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
|
||||
h5
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
|
||||
h6
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
|
||||
bullet list
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
|
||||
ordered list
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||
code block
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
||||
blockquote
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setHorizontalRule().run()">
|
||||
horizontal rule
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setHardBreak().run()">
|
||||
hard break
|
||||
</button>
|
||||
<button @click="editor.chain().focus().undo().run()">
|
||||
undo
|
||||
</button>
|
||||
<button @click="editor.chain().focus().redo().run()">
|
||||
redo
|
||||
</button>
|
||||
</div>
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
content: `
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That’s a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that’s amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #0D0D0D;
|
||||
color: #FFF;
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 2px solid rgba(#0D0D0D, 0.1);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
demos/tailwind.config.js
Normal file
106
demos/tailwind.config.js
Normal file
@ -0,0 +1,106 @@
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
module.exports = {
|
||||
mode: 'jit',
|
||||
purge: [
|
||||
'./preview/**/*.{vue,js,ts,jsx,tsx}',
|
||||
],
|
||||
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
code: {
|
||||
attrName: '#faf594',
|
||||
attrValue: '##b9f18d',
|
||||
doctype: '#616161',
|
||||
keyword: '##958df1',
|
||||
punctuation: '##70cff8',
|
||||
string: '#b9f18d',
|
||||
tag: '#f98181',
|
||||
},
|
||||
transparency: {
|
||||
box: {
|
||||
3: 'rgba(13, 13, 13, 0.03)',
|
||||
5: 'rgba(13, 13, 13, 0.05)',
|
||||
},
|
||||
},
|
||||
gray: {
|
||||
DEFAULT: '',
|
||||
900: '#0d0d0d',
|
||||
800: '#262626',
|
||||
700: '#3a3a3a',
|
||||
600: '#4e4e4e',
|
||||
500: '#616161',
|
||||
400: '#737373',
|
||||
300: '#919191',
|
||||
200: '#b3b3b3',
|
||||
100: '#d6d6d6',
|
||||
50: '#e8e8e8',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: '#faf594',
|
||||
50: '#fffffa',
|
||||
100: '#fffef4',
|
||||
200: '#fefde4',
|
||||
300: '#fdfbd4',
|
||||
400: '#fcf8b4',
|
||||
500: '#faf594',
|
||||
600: '#e1dd85',
|
||||
700: '#bcb86f',
|
||||
800: '#969359',
|
||||
900: '#7b7849',
|
||||
},
|
||||
success: {
|
||||
DEFAULT: '#b9f18d',
|
||||
50: '#fcfef9',
|
||||
100: '#f8fef4',
|
||||
200: '#eefce3',
|
||||
300: '#e3f9d1',
|
||||
400: '#cef5af',
|
||||
500: '#b9f18d',
|
||||
600: '#a7d97f',
|
||||
700: '#8bb56a',
|
||||
800: '#6f9155',
|
||||
900: '#5b7645',
|
||||
},
|
||||
},
|
||||
spacing: {},
|
||||
borderRadius: {
|
||||
xxs: '0.4rem',
|
||||
box: '0.75rem',
|
||||
},
|
||||
fontSize: {
|
||||
'2xl': '2.75rem',
|
||||
xl: '1.5rem',
|
||||
lg: '1.17rem',
|
||||
sm: '0.85rem',
|
||||
},
|
||||
lineHeight: {
|
||||
DEFAULT: '1.7rem',
|
||||
'2xl': '3.16rem',
|
||||
xl: '1.8rem',
|
||||
lg: '1.6rem',
|
||||
},
|
||||
transition: {},
|
||||
height: {
|
||||
18: '4.5rem',
|
||||
},
|
||||
padding: {
|
||||
18: '4.5rem',
|
||||
},
|
||||
zIndex: {},
|
||||
boxShadow: {},
|
||||
textShadow: {},
|
||||
fontFamily: {
|
||||
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
||||
mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
extend: {
|
||||
opacity: ['disabled'],
|
||||
},
|
||||
},
|
||||
}
|
||||
7
demos/tsconfig.json
Normal file
7
demos/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"types": ["vite/client"],
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
143
demos/vite.config.ts
Normal file
143
demos/vite.config.ts
Normal file
@ -0,0 +1,143 @@
|
||||
// @ts-nocheck
|
||||
import {
|
||||
resolve,
|
||||
basename,
|
||||
dirname,
|
||||
join,
|
||||
} from 'path'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import fs from 'fs'
|
||||
import globby from 'globby'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import reactRefresh from '@vitejs/plugin-react-refresh'
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: globby.sync('./**/index.html', {
|
||||
ignore: ['dist'],
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
vue(),
|
||||
reactRefresh(),
|
||||
|
||||
{
|
||||
name: 'raw',
|
||||
resolveId(id, importer) {
|
||||
if (id.startsWith('raw!')) {
|
||||
const [, relativePath] = id.split('raw!')
|
||||
const fullPath = join(dirname(importer), relativePath)
|
||||
|
||||
return `virtual!${fullPath}!!${uuid()}`
|
||||
}
|
||||
},
|
||||
load(id) {
|
||||
if (id.startsWith('virtual!')) {
|
||||
const path = id.split('!!')[0].replace('virtual!', '')
|
||||
const data = fs.readFileSync(path, 'utf8')
|
||||
|
||||
return `export default ${JSON.stringify(data)}`
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'demos',
|
||||
resolveId(id) {
|
||||
if (id === '@demos') {
|
||||
return '@demos'
|
||||
}
|
||||
},
|
||||
load(id) {
|
||||
if (id === '@demos') {
|
||||
const demos = globby
|
||||
.sync('./src/*/*', { onlyDirectories: true })
|
||||
.map(demoPath => {
|
||||
const name = demoPath.replace('./src/', '')
|
||||
const tabs = globby
|
||||
.sync(`./src/${name}/*`, { onlyDirectories: true })
|
||||
.map(tabPath => ({
|
||||
name: basename(tabPath),
|
||||
}))
|
||||
|
||||
return {
|
||||
name,
|
||||
tabs,
|
||||
}
|
||||
})
|
||||
|
||||
return `export const demos = ${JSON.stringify(demos)}`
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'source',
|
||||
resolveId(id, importer) {
|
||||
if (id === '@source') {
|
||||
return `source!${dirname(importer)}!!${uuid()}`
|
||||
}
|
||||
},
|
||||
load(id) {
|
||||
if (id.startsWith('source!')) {
|
||||
const path = id.split('!!')[0].replace('source!', '')
|
||||
const files = globby
|
||||
.sync(`${path}/**/*`, {
|
||||
ignore: [
|
||||
'**/index.html',
|
||||
'**/*.spec.js',
|
||||
'**/*.spec.ts',
|
||||
],
|
||||
})
|
||||
.map(filePath => {
|
||||
const name = filePath.replace(`${path}/`, '')
|
||||
|
||||
return {
|
||||
name,
|
||||
content: fs.readFileSync(`${path}/${name}`, 'utf8'),
|
||||
}
|
||||
})
|
||||
|
||||
return `export default ${JSON.stringify(files)}`
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'middleware',
|
||||
apply: 'serve',
|
||||
configureServer(viteDevServer) {
|
||||
return () => {
|
||||
viteDevServer.middlewares.use(async (req, res, next) => {
|
||||
if (req.originalUrl.startsWith('/preview')) {
|
||||
req.url = '/preview/index.html'
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
resolve: {
|
||||
alias: [
|
||||
...globby.sync('../packages/*', { onlyDirectories: true })
|
||||
.map(name => name.replace('../packages/', ''))
|
||||
.map(name => {
|
||||
return { find: `@tiptap/${name}`, replacement: resolve(`../packages/${name}/src/index.ts`) }
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
// server: {
|
||||
// fs: {
|
||||
// // Allow serving files from one level up to the project root
|
||||
// allow: ['..']
|
||||
// }
|
||||
// }
|
||||
})
|
||||
@ -2,6 +2,7 @@
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"demos",
|
||||
"packages/*"
|
||||
],
|
||||
"browserslist": [
|
||||
@ -11,6 +12,7 @@
|
||||
],
|
||||
"scripts": {
|
||||
"start": "yarn --cwd ./docs start",
|
||||
"start:demos": "yarn --cwd ./demos start",
|
||||
"lint": "eslint --quiet --no-error-on-unmatched-pattern ./",
|
||||
"lint:fix": "eslint --fix --quiet --no-error-on-unmatched-pattern ./",
|
||||
"test:open": "cypress open --project tests",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user