mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

annotations: improve the example, clean up

Browse Source
This commit is contained in:
Hans Pagel 2021-02-11 22:45:22 +01:00
parent cd149001b1
commit c140d11d79
7 changed files with 63 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Experiments/Annotation/index.spec.js
View File

@ -1,6 +1,6 @@
context('/demos/Extensions/Annotations', () => {
context('/demos/Experiments/Annotation', () => {
before(() => {
cy.visit('/demos/Extensions/Annotations')
cy.visit('/demos/Experiments/Annotation')
})
// TODO: Write tests

66
docs/src/demos/Experiments/Annotation/index.vue
View File

@ -1,17 +1,33 @@
<template>
<div>
<div v-if="editor">
<button @click="addAnnotation" :disabled="!editor.can().addAnnotation()">
add annotation
<h2>
Original Editor
</h2>
<button @click="addComment" :disabled="!editor.can().addAnnotation()">
comment
</button>
<editor-content :editor="editor" />
<div v-for="comment in comments" :key="comment.type.spec.data.id">
{{ comment.type.spec.data }}
<button @click="deleteAnnotation(comment.type.spec.data.id)">
<button @click="deleteComment(comment.type.spec.data.id)">
remove
</button>
</div>
<h2>
Another Editor
</h2>
<button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
comment
</button>
<editor-content :editor="anotherEditor" />
<h2>
Y.js document
</h2>
{{ json }}
</div>
</div>
</template>
@ -21,6 +37,10 @@ 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 Collaboration from '@tiptap/extension-collaboration'
import Bold from '@tiptap/extension-bold'
import Heading from '@tiptap/extension-heading'
import * as Y from 'yjs'
import Annotation from './extension'
export default {
@ -31,19 +51,28 @@ export default {
data() {
return {
editor: null,
anotherEditor: null,
comments: [],
ydoc: null,
}
},
mounted() {
this.ydoc = new Y.Doc()
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
Bold,
Heading,
Annotation.configure({
onUpdate: items => { this.comments = items },
}),
Collaboration.configure({
document: this.ydoc,
}),
],
content: `
<p>
@ -54,19 +83,44 @@ export default {
</p>
`,
})
this.anotherEditor = new Editor({
extensions: [
Document,
Paragraph,
Text,
Bold,
Heading,
Annotation,
Collaboration.configure({
document: this.ydoc,
}),
],
})
},
methods: {
addAnnotation() {
const content = prompt('Annotation', '')
addComment() {
const content = prompt('Comment', '')
this.editor.commands.addAnnotation(content)
},
deleteAnnotation(id) {
addAnotherComment() {
const content = prompt('Comment', '')
this.anotherEditor.commands.addAnnotation(content)
},
deleteComment(id) {
this.editor.commands.deleteAnnotation(id)
},
},
computed: {
json() {
return this.ydoc.toJSON()
},
},
beforeDestroy() {
this.editor.destroy()
},

7
docs/src/demos/Experiments/Comments/index.spec.js
View File

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

145
docs/src/demos/Experiments/Comments/index.vue
View File

@ -1,145 +0,0 @@
<template>
<div>
<div v-if="editor">
<h2>
Original
</h2>
<button @click="addComment" :disabled="!editor.can().addAnnotation()">
comment
</button>
<editor-content :editor="editor" />
<div v-for="comment in comments" :key="comment.type.spec.data.id">
{{ comment.type.spec.data }}
<button @click="deleteComment(comment.type.spec.data.id)">
remove
</button>
</div>
<!-- <br>
<h2>
ProseMirror JSON from Y.js document
</h2>
{{ rawDocument }} -->
<br>
<h2>
Y.js document
</h2>
{{ json }}
<br>
<h2>
Mirror
</h2>
<editor-content :editor="anotherEditor" />
</div>
</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 Collaboration from '@tiptap/extension-collaboration'
import Bold from '@tiptap/extension-bold'
import Heading from '@tiptap/extension-heading'
import * as Y from 'yjs'
import { yDocToProsemirrorJSON } from 'y-prosemirror'
import Annotation from '../Annotation/extension'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
anotherEditor: null,
comments: [],
ydoc: null,
}
},
mounted() {
this.ydoc = new Y.Doc()
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
Bold,
Heading,
Annotation.configure({
onUpdate: items => { this.comments = items },
}),
Collaboration.configure({
document: this.ydoc,
}),
],
content: `
<p>
Annotations can be used to add additional information to the content, for example comments. They live on a different level than the actual editor content.
</p>
<p>
This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another tiptap instance. :-)
</p>
`,
})
this.anotherEditor = new Editor({
extensions: [
Document,
Paragraph,
Text,
// Annotation.configure({
// onUpdate: items => { this.comments = items },
// }),
Collaboration.configure({
document: this.ydoc,
}),
],
})
},
methods: {
addComment() {
const content = prompt('Comment', '')
this.editor.commands.addAnnotation(content)
},
deleteComment(id) {
this.editor.commands.deleteAnnotation(id)
},
},
computed: {
rawDocument() {
return yDocToProsemirrorJSON(this.ydoc, 'default')
},
json() {
return this.ydoc.toJSON()
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
.annotation {
background: #9DEF8F;
}
</style>

1
docs/src/docPages/experiments.md
View File

@ -3,7 +3,6 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
## New
* [Linter](/experiments/linter)
* [Annotation](/experiments/annotation)
* [Comments](/experiments/comments)
* [Color](/experiments/color)
* [Commands](/experiments/commands)

5
docs/src/docPages/experiments/annotation.md
View File

@ -1,5 +0,0 @@
# Annotation
⚠️ Experiment
<demo name="Experiments/Annotation" />

2
docs/src/docPages/experiments/comments.md
View File

@ -2,4 +2,4 @@
⚠️ Experiment
<demo name="Experiments/Comments" />
<demo name="Experiments/Annotation" />