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

add GuideContent demos

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-25 18:21:37 +02:00
parent b95c81baff
commit f99357b9a3
15 changed files with 674 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/GuideContent/ExportHTML/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('GuideContent/ExportHTML', source)
</script>
</body>
</html>

19
demos/src/GuideContent/ExportHTML/Vue/index.spec.js Normal file
View File

@@ -0,0 +1,19 @@
context('/demos/Guide/Content/ExportHTML', () => {
before(() => {
cy.visit('/demos/Guide/Content/ExportHTML')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should return html', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const html = editor.getHTML()
expect(html).to.equal('<p>Example Text</p>')
})
})
})

170
demos/src/GuideContent/ExportHTML/Vue/index.vue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<div>
<div class="actions" v-if="editor">
<button class="button" @click="setContent">
Set Content
</button>
<button class="button" @click="clearContent">
Clear Content
</button>
<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>
</div>
<editor-content :editor="editor" />
<div class="export">
<h3>HTML</h3>
<pre><code>{{ html }}</code></pre>
</div>
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
html: null,
}
},
mounted() {
this.editor = new Editor({
content: `
<p>
Wow, this editor instance exports its content as HTML.
</p>
`,
extensions: [
StarterKit,
],
})
// Get the initial content …
this.html = this.editor.getHTML()
// … and get the content after every change.
this.editor.on('update', () => {
this.html = this.editor.getHTML()
})
},
methods: {
setContent() {
// You can pass a HTML document to the editor.
this.editor.commands.setContent(`
<p>
It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.
</p>
`, true)
// It’s likely that you’d like to focus the Editor after most commands.
this.editor.commands.focus()
},
clearContent() {
this.editor
.chain()
.clearContent(true)
.focus()
.run()
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Style the export */
.export {
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;
}
}
/* 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;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
}
</style>

15
demos/src/GuideContent/ExportJSON/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('GuideContent/ExportJSON', source)
</script>
</body>
</html>

32
demos/src/GuideContent/ExportJSON/Vue/index.spec.js Normal file
View File

@@ -0,0 +1,32 @@
context('/demos/Guide/Content/ExportJSON', () => {
before(() => {
cy.visit('/demos/Guide/Content/ExportJSON')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should return json', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const json = editor.getJSON()
expect(json).to.deep.equal({
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Example Text',
},
],
},
],
})
})
})
})

177
demos/src/GuideContent/ExportJSON/Vue/index.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<div>
<div class="actions" v-if="editor">
<button class="button" @click="setContent">
Set Content
</button>
<button class="button" @click="clearContent">
Clear Content
</button>
<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>
</div>
<editor-content :editor="editor" />
<div class="export">
<h3>JSON</h3>
<pre><code v-html="json" /></pre>
</div>
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
json: null,
}
},
mounted() {
this.editor = new Editor({
content: `
<p>
Wow, this editor instance exports its content as JSON.
</p>
`,
extensions: [
StarterKit,
],
})
// Get the initial content …
this.json = this.editor.getJSON()
// … and get the content after every change.
this.editor.on('update', () => {
this.json = this.editor.getJSON()
})
},
methods: {
setContent() {
// You can pass a JSON document to the editor.
this.editor.commands.setContent({
type: 'doc',
content: [{
type: 'paragraph',
content: [
{
type: 'text',
text: 'It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.',
},
],
}],
}, true)
// It’s likely that you’d like to focus the Editor after most commands.
this.editor.commands.focus()
},
clearContent() {
this.editor
.chain()
.clearContent(true)
.focus()
.run()
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Style the export */
.export {
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;
}
}
/* 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;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
}
</style>

15
demos/src/GuideContent/GenerateHTML/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('GuideContent/GenerateHTML', source)
</script>
</body>
</html>

7
demos/src/GuideContent/GenerateHTML/Vue/index.spec.js Normal file
View File

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

52
demos/src/GuideContent/GenerateHTML/Vue/index.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<pre><code>{{ output }}</code></pre>
</template>
<script>
// Option 1: Browser + server-side
import { generateHTML } from '@tiptap/html'
// Option 2: Browser-only (lightweight)
// import { generateHTML } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Bold from '@tiptap/extension-bold'
const json = {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Example ',
},
{
type: 'text',
marks: [
{
type: 'bold',
},
],
text: 'Text',
},
],
},
],
}
export default {
computed: {
output() {
return generateHTML(json, [
Document,
Paragraph,
Text,
Bold,
// other extensions …
])
},
},
}
</script>

15
demos/src/GuideContent/GenerateJSON/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('GuideContent/GenerateJSON', source)
</script>
</body>
</html>

7
demos/src/GuideContent/GenerateJSON/Vue/index.spec.js Normal file
View File

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

30
demos/src/GuideContent/GenerateJSON/Vue/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<pre><code>{{ output }}</code></pre>
</template>
<script>
// Option 1: Browser + server-side
import { generateJSON } from '@tiptap/html'
// Option 2: Browser-only (lightweight)
// import { generateJSON } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Bold from '@tiptap/extension-bold'
const html = '<p>Example <strong>Text</strong></p>'
export default {
computed: {
output() {
return generateJSON(html, [
Document,
Paragraph,
Text,
Bold,
// other extensions …
])
},
},
}
</script>

15
demos/src/GuideContent/ReadOnly/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('GuideContent/ReadOnly', source)
</script>
</body>
</html>

29
demos/src/GuideContent/ReadOnly/Vue/index.spec.js Normal file
View File

@@ -0,0 +1,29 @@
context('/demos/Guide/Content/ReadOnly', () => {
before(() => {
cy.visit('/demos/Guide/Content/ReadOnly')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.clearContent()
})
})
it('should be read-only', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setEditable(false)
cy.get('.ProseMirror').type('Edited: ')
cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
})
})
it('should be editable', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setEditable(true)
cy.get('.ProseMirror').type('Edited: ')
cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
})
})
})

76
demos/src/GuideContent/ReadOnly/Vue/index.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div class="editor">
<div class="checkbox">
<input type="checkbox" id="editable" v-model="editable">
<label for="editable">editable</label>
</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,
editable: false,
}
},
mounted() {
this.editor = new Editor({
editable: this.editable,
content: `
<p>
This text is <strong>read-only</strong>. No matter what you try, you are not able to edit something. Okay, if you toggle the checkbox above you’ll be able to edit the text.
</p>
<p>
If you want to check the state, you can call <code>editor.isEditable()</code>.
</p>
`,
extensions: [
StarterKit,
],
})
},
watch: {
editable() {
this.editor.setEditable(this.editable)
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
.checkbox {
margin-bottom: 1rem;
input[type="checkbox"] {
margin-right: 0.5rem;
}
}
[contenteditable=false] {
color: #999;
cursor: not-allowed;
}
</style>