Merge branch 'feature/collaboration-with-yjs' into main

docs/package.json

@@ -21,7 +21,9 @@
     "react-dom": "^16.13.1",
     "remark-container": "^0.1.2",
     "typescript": "^4.0.3",
-    "vue-github-button": "^1.1.2"
+    "vue-github-button": "^1.1.2",
+    "y-webrtc": "^10.1.6",
+    "yjs": "^13.3.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",

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

@@ -0,0 +1,5 @@
+context('/examples/collaboration', () => {
+  before(() => {
+    cy.visit('/examples/collaboration')
+  })
+})

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

@@ -0,0 +1,63 @@
+<template>
+  <editor-content :editor="editor" />
+</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 CollaborationCursor from '@tiptap/extension-collaboration-cursor'
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      ydoc: null,
+      provider: null,
+      type: null,
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.ydoc = new Y.Doc()
+    this.provider = new WebrtcProvider('example', this.ydoc)
+    this.type = this.ydoc.getXmlFragment('prosemirror')
+
+    this.editor = new Editor({
+      // TODO: This is added by every new user.
+      // content: `
+      //   <p>Example Text</p>
+      // `,
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Collaboration({
+          provider: this.provider,
+          type: this.type,
+        }),
+        CollaborationCursor({
+          provider: this.provider,
+          name: 'Other User',
+          color: '#d6336c',
+        }),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+    this.provider.destroy()
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss">

docs/src/demos/Examples/Collaboration/style.scss

@@ -0,0 +1,32 @@
+/* this is a rough fix for the first cursor position when the first paragraph is empty */
+.ProseMirror > .collaboration-cursor:first-child {
+  margin-top: 16px;
+}
+.ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
+  margin-top: 16px
+}
+/* This gives the remote user caret. The colors are automatically overwritten*/
+.collaboration-cursor {
+  position: relative;
+  margin-left: -1px;
+  margin-right: -1px;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  word-break: normal;
+  pointer-events: none;
+}
+/* This renders the username above the caret */
+.collaboration-cursor > div {
+  position: absolute;
+  top: -1.05em;
+  left: -1px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  white-space: nowrap;
+}

docs/src/docPages/api/extensions/collaboration-cursor.md

@@ -0,0 +1,2 @@
+# Collaboration Cursor
+

docs/src/docPages/api/extensions/collaboration.md

@@ -1,2 +1,2 @@
 # Collaboration
-Enables you to collaborate with others on one document.
+Enables you to collaborate with others on one document.

docs/src/docPages/examples/collaboration.md

@@ -1,3 +1,5 @@
 # Collaboration
 
-<demo name="Examples/Collaboration" />
+<!-- <demo name="Examples/Collaboration" :show-source="false"/> -->
+
+<demo name="Examples/Collaboration" />

docs/src/links.yaml

@@ -56,9 +56,8 @@
         #   draft: true
         # - title: Focus
         #   link: /examples/focus
-        # - title: Collaboration
-        #   link: /examples/collaboration
-        #   draft: true
+        - title: Collaboration
+          link: /examples/collaboration
         # - title: Title
         #   link: /examples/title
         #   draft: true
@@ -117,9 +116,12 @@
         # - title: CodeBlockHighlight
         #   link: /api/extensions/code-block-highlight
         #   draft: true
-        # - title: Collaboration
-        #   link: /api/extensions/collaboration
-        #   draft: true
+        - title: Collaboration
+          link: /api/extensions/collaboration
+          draft: true
+        - title: CollaborationCursor
+          link: /api/extensions/collaboration-cursor
+          draft: true
         - title: Document
           link: /api/extensions/document
         - title: HardBreak