ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add GuideGettingStarted demos

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-25 18:27:05 +02:00
parent f99357b9a3
commit b1a87e4ad6
4 changed files with 147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
demos/src/GuideGettingStarted/VModel/Vue/Editor.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
modelValue: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
modelValue(value) {
// HTML
const isSame = this.editor.getHTML() === value
// JSON
// const isSame = this.editor.getJSON().toString() === value.toString()
if (isSame) {
return
}
this.editor.commands.setContent(this.value, false)
},
},
mounted() {
this.editor = new Editor({
extensions: [
StarterKit,
],
content: this.modelValue,
onUpdate: () => {
// HTML
this.$emit('update:modelValue', this.editor.getHTML())
// JSON
// this.$emit('update:modelValue', this.editor.getJSON())
},
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

15
demos/src/GuideGettingStarted/VModel/Vue/index.html Normal file
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('GuideGettingStarted/VModel', source)
</script>
</body>
</html>

7
demos/src/GuideGettingStarted/VModel/Vue/index.spec.js Normal file
View File

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

62
demos/src/GuideGettingStarted/VModel/Vue/index.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div>
<editor v-model="content" />
<div class="content">
<h3>Content</h3>
<pre><code>{{ content }}</code></pre>
</div>
</div>
</template>
<script>
import Editor from './Editor.vue'
export default {
components: {
Editor,
},
data() {
return {
content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
}
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
}
.content {
padding: 1rem 0 0;
h3 {
margin: 1rem 0 0.5rem;
}
pre {
border-radius: 5px;
color: #333;
}
code {
display: block;
white-space: pre-wrap;
font-size: 0.8rem;
padding: 0.75rem 1rem;
background-color:#e9ecef;
color: #495057;
}
}
</style>