mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 15:49:23 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve the multiple editors example

Browse Source
This commit is contained in:
Hans Pagel 2021-01-18 16:13:36 +01:00
parent 473f057533
commit 8f1ca0f4dd
3 changed files with 55 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/package.json
View File

@ -28,6 +28,7 @@
"vue-github-button": "^1.1.2",
"vue-live": "^1.16.0",
"y-indexeddb": "^9.0.6",
"y-prosemirror": "^1.0.5",
"y-webrtc": "^10.1.7",
"y-websocket": "^1.3.8",
"yjs": "^13.4.7"

60
docs/src/demos/Examples/MultipleEditors/index.vue
View File

@ -18,6 +18,12 @@
<div v-if="description" class="form__item form__item--description">
<editor-content :editor="description" />
</div>
<div class="form__label">
JSON
</div>
<div class="form__item form__item--json">
<code>{{ json }}</code>
</div>
</div>
</template>
@ -31,7 +37,7 @@ import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { yDocToProsemirrorJSON } from 'y-prosemirror'
const ParagraphDocument = Document.extend({
content: 'paragraph',
@ -55,13 +61,12 @@ export default {
title: null,
tasks: null,
description: null,
ydoc: null,
}
},
mounted() {
const ydoc = new Y.Doc()
this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-multiple-editors-example', ydoc)
this.ydoc = new Y.Doc()
this.title = new Editor({
extensions: [
@ -69,10 +74,11 @@ export default {
Paragraph,
Text,
Collaboration.configure({
document: ydoc,
document: this.ydoc,
field: 'title',
}),
],
content: '<p>No matter what you do, this’ll be a single paragraph.',
})
this.tasks = new Editor({
@ -83,10 +89,17 @@ export default {
TaskList,
CustomTaskItem,
Collaboration.configure({
document: ydoc,
document: this.ydoc,
field: 'tasks',
}),
],
content: `
<ul data-type="taskList">
<li data-type="taskItem" data-checked="true">And this</li>
<li data-type="taskItem" data-checked="false">is a task list</li>
<li data-type="taskItem" data-checked="false">and only a task list.</li>
</ul>
`,
})
this.description = new Editor({
@ -95,13 +108,28 @@ export default {
Paragraph,
Text,
Collaboration.configure({
document: ydoc,
document: this.ydoc,
field: 'description',
}),
],
content: `
<p>
This can be lengthy text.
</p>
`,
})
},
computed: {
json() {
return {
title: yDocToProsemirrorJSON(this.ydoc, 'title'),
tasks: yDocToProsemirrorJSON(this.ydoc, 'tasks'),
description: yDocToProsemirrorJSON(this.ydoc, 'description'),
}
},
},
beforeDestroy() {
this.title.destroy()
this.tasks.destroy()
@ -150,5 +178,23 @@ export default {
&--title {
font-size: 1.6rem;
}
&--json {
background: #0D0D0D;
color: #FFF;
font-size: 0.8rem;
}
}
pre {
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
background: none;
font-size: 0.8rem;
}
}
</style>

6
docs/src/docPages/examples/multiple-editors.md
View File

@ -1,9 +1,5 @@
# Multiple editors
The following examples has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which is synced with other users.
:::warning Shared Document
Be nice! The content of this editor is shared with other users from the Internet.
:::
The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced with other users.
<demo name="Examples/MultipleEditors" />