add an example to sync multiple tiptap instances with one Y.js document

docs/src/demos/Examples/MultipleEditors/index.spec.js

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

docs/src/demos/Examples/MultipleEditors/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="form">
+    <div class="form__label">
+      Title
+    </div>
+    <div v-if="title" class="form__item form__item--title">
+      <editor-content :editor="title" />
+    </div>
+    <div class="form__label">
+      Tasks
+    </div>
+    <div v-if="tasks" class="form__item form__item--tasks">
+      <editor-content :editor="tasks" />
+    </div>
+    <div class="form__label">
+      Description
+    </div>
+    <div v-if="description" class="form__item form__item--description">
+      <editor-content :editor="description" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+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'
+
+const ParagraphDocument = Document.extend({
+  content: 'paragraph',
+})
+
+const TaskListDocument = Document.extend({
+  content: 'taskList',
+})
+
+const CustomTaskItem = TaskItem.extend({
+  content: 'text*',
+})
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      title: null,
+      tasks: null,
+      description: null,
+    }
+  },
+
+  mounted() {
+    const ydoc = new Y.Doc()
+
+    this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-multiple-editors-example', ydoc)
+
+    this.title = new Editor({
+      extensions: [
+        ParagraphDocument,
+        Paragraph,
+        Text,
+        Collaboration.configure({
+          document: ydoc,
+          fragment: 'title',
+        }),
+      ],
+    })
+
+    this.tasks = new Editor({
+      extensions: [
+        TaskListDocument,
+        Paragraph,
+        Text,
+        TaskList,
+        CustomTaskItem,
+        Collaboration.configure({
+          document: ydoc,
+          fragment: 'tasks',
+        }),
+      ],
+    })
+
+    this.description = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Collaboration.configure({
+          document: ydoc,
+          fragment: 'description',
+        }),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.title.destroy()
+    this.tasks.destroy()
+    this.description.destroy()
+    this.provider.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.form__label {
+  color: #868e96;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+}
+
+.form__item {
+  margin: 0 0 1rem;
+  padding: 1rem;
+  border-radius: 5px;
+  border: 1px solid #e9ecef;
+
+  &--title {
+    font-size: 1.6rem;
+  }
+}
+</style>

docs/src/docPages/examples/multiple-editors.md

@@ -0,0 +1,9 @@
+# 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.
+:::
+
+<demo name="Examples/MultipleEditors" />

docs/src/links.yaml

@@ -34,6 +34,8 @@
     - title: Drawing
       link: /examples/drawing
       draft: true
+    - title: Multiple editors
+      link: /examples/multiple-editors
 
 - title: Guide
   items: