add cursor styling and configuration, remove second demo, disable initial content

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

@@ -22,19 +22,23 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      content: `
-        <p>
-          This is a radically reduced version of tiptap. It has only support for a document, paragraphs and text. That’s it. It’s probably too much for real minimalists though.
-        </p>
-        <p>
-          The paragraph extension is not literally required, but you need at least one node. That node can be something different, for example to render a task list and only that task list.
-        </p>
-      `,
+      // TODO: This is added by every new user.
+      // content: `
+      //   <p>
+      //     This is a radically reduced version of tiptap. It has only support for a document, paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+      //   </p>
+      //   <p>
+      //     The paragraph extension is not literally required, but you need at least one node. That node can be something different, for example to render a task list and only that task list.
+      //   </p>
+      // `,
       extensions: [
         Document(),
         Paragraph(),
         Text(),
-        Yjs(),
+        Yjs({
+          name: 'Other User',
+          color: '#d6336c',
+        }),
       ],
     })
   },
@@ -44,3 +48,5 @@ export default {
   },
 }
 </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 > .ProseMirror-yjs-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*/
+.ProseMirror-yjs-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 */
+.ProseMirror-yjs-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;
+}