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

add new pages, add more content

Browse Source
This commit is contained in:
Hans Pagel
2020-11-06 14:49:40 +01:00
parent e8bcb994cf
commit d4a8058539
15 changed files with 120 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -1,14 +1,83 @@
<template>
<div>
<button @click="setName">
Set Name
</button>
<button @click="changeName">
Random Name
</button>
<button @click="changeColor">
Random Color
</button>
<div v-if="editor">
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().removeMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().heading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().heading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().hardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
<br>
<br>
<button @click="setName">
Set Name
</button>
<button @click="changeName">
Random Name
</button>
<button @click="changeColor">
Random Color
</button>
</div>
<div class="collaboration-status">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }}
@@ -29,7 +98,7 @@
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
@@ -60,21 +129,15 @@ export default {
mounted() {
this.ydoc = new Y.Doc()
this.provider = new WebrtcProvider(this.documentName, this.ydoc)
this.type = this.ydoc.getXmlFragment('prosemirror')
this.indexdb = new IndexeddbPersistence(this.documentName, this.ydoc)
this.provider = new WebrtcProvider(this.documentName, this.ydoc)
this.provider.awareness.on('change', this.updateState)
this.editor = new Editor({
// TODO: This is added by every new user.
// content: `
// <p>Example Text</p>
// `,
extensions: [
Document(),
Paragraph(),
Text(),
...defaultExtensions(),
Collaboration({
provider: this.provider,
type: this.type,

9
docs/src/demos/Examples/Focus/index.spec.js
View File

@@ -1,9 +0,0 @@
context('/examples/focus', () => {
before(() => {
cy.visit('/examples/focus')
})
it('should have class', () => {
cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
})
})

66
docs/src/demos/Examples/Focus/index.vue
View File

@@ -1,66 +0,0 @@
<template>
<div>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Code from '@tiptap/extension-code'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
import Focus from '@tiptap/extension-focus'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document(),
Paragraph(),
Text(),
Code(),
BulletList(),
ListItem(),
Focus({
className: 'has-focus',
nested: true,
}),
],
autoFocus: true,
content: `
<p>
The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
</p>
<ul>
<li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
<li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
</ul>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
.has-focus {
border-radius: 3px;
box-shadow: 0 0 0 3px #3ea4ffe6;
}
</style>

31
docs/src/demos/Examples/History/index.spec.js
View File

@@ -1,31 +0,0 @@
context('/examples/history', () => {
before(() => {
cy.visit('/examples/history')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
})
})
it('should not have a mistake', () => {
cy.get('.ProseMirror').then(() => {
cy.get('.ProseMirror').should('not.contain', 'Mistake')
})
})
it('should have a mistake', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.insertText('Mistake')
cy.get('.ProseMirror').should('contain', 'Mistake')
})
})
it('the mistake should be removed again', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.undo()
cy.get('.ProseMirror').should('not.contain', 'Mistake')
})
})
})

47
docs/src/demos/Examples/History/index.vue
View File

@@ -1,47 +0,0 @@
<template>
<div>
<div v-if="editor">
<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, defaultExtensions } from '@tiptap/vue-starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: `
<p>
With the <code>History</code> extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
</p>
<p>
And yes, you can also use a keyboard shortcut to undo changes (<code>Control/Cmd</code> <code>Z</code>) or redo changes (<code>Control/Cmd</code> <code>Shift</code> <code>Z</code>).
</p>
`,
extensions: defaultExtensions(),
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

13
docs/src/demos/Extensions/Focus/index.vue
View File

@@ -10,6 +10,9 @@ import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Focus from '@tiptap/extension-focus'
import Code from '@tiptap/extension-code'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
export default {
components: {
@@ -32,15 +35,19 @@ export default {
className: 'has-focus',
nested: true,
}),
Code(),
BulletList(),
ListItem(),
],
autoFocus: true,
content: `
<p>
The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
</p>
<p>
Nested elements will be focused with the default setting nested: true. Otherwise the whole item will get the focus class, even when just a single nested item is selected.
</p>
<ul>
<li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
<li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
</ul>
`,
})
},

7
docs/src/demos/Extensions/History/index.vue
View File

@@ -39,7 +39,12 @@ export default {
History(),
],
content: `
<p>Edit this text and press undo to test this extension.</p>
<p>
With the History extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
</p>
<p>
And yes, you can also use a keyboard shortcut to undo changes (Control/Cmd Z) or redo changes (Control/Cmd Shift Z).
</p>
`,
})
},