diff --git a/demos/src/Extensions/CollaborationCursor/React/index.html b/demos/src/Extensions/CollaborationCursor/React/index.html
new file mode 100644
index 00000000..41bbe8cb
--- /dev/null
+++ b/demos/src/Extensions/CollaborationCursor/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Extensions/CollaborationCursor/React/index.jsx b/demos/src/Extensions/CollaborationCursor/React/index.jsx
new file mode 100644
index 00000000..1f687f83
--- /dev/null
+++ b/demos/src/Extensions/CollaborationCursor/React/index.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+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'
+import Placeholder from '@tiptap/extension-placeholder'
+import './styles.scss'
+
+const ydoc = new Y.Doc()
+const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc)
+
+export default () => {
+ const editor = useEditor({
+ extensions: [
+ Document,
+ Paragraph,
+ Text,
+ Collaboration.configure({
+ document: ydoc,
+ }),
+ CollaborationCursor.configure({
+ provider,
+ user: {
+ name: 'Cyndi Lauper',
+ color: '#f783ac',
+ },
+ }),
+ Placeholder.configure({
+ placeholder:
+ 'Write something … It’ll be shared with everyone else looking at this example.',
+ }),
+ ],
+ })
+
+ return
+}
diff --git a/demos/src/Extensions/CollaborationCursor/React/index.spec.js b/demos/src/Extensions/CollaborationCursor/React/index.spec.js
new file mode 100644
index 00000000..f04c2868
--- /dev/null
+++ b/demos/src/Extensions/CollaborationCursor/React/index.spec.js
@@ -0,0 +1,7 @@
+context('/src/Extensions/CollaborationCursor/React', () => {
+ before(() => {
+ cy.visit('/src/Extensions/CollaborationCursor/React')
+ })
+
+ // TODO: Write tests
+})
diff --git a/demos/src/Extensions/CollaborationCursor/React/styles.scss b/demos/src/Extensions/CollaborationCursor/React/styles.scss
new file mode 100644
index 00000000..1d23d39b
--- /dev/null
+++ b/demos/src/Extensions/CollaborationCursor/React/styles.scss
@@ -0,0 +1,42 @@
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+}
+
+/* Placeholder (at the top) */
+.ProseMirror p.is-editor-empty:first-child::before {
+ color: #adb5bd;
+ content: attr(data-placeholder);
+ float: left;
+ height: 0;
+ pointer-events: none;
+}
+
+/* Give a remote user a caret */
+.collaboration-cursor__caret {
+ border-left: 1px solid #0d0d0d;
+ border-right: 1px solid #0d0d0d;
+ margin-left: -1px;
+ margin-right: -1px;
+ pointer-events: none;
+ position: relative;
+ word-break: normal;
+}
+
+/* Render the username above the caret */
+.collaboration-cursor__label {
+ border-radius: 3px 3px 3px 0;
+ color: #0d0d0d;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ left: -1px;
+ line-height: normal;
+ padding: 0.1rem 0.3rem;
+ position: absolute;
+ top: -1.4em;
+ user-select: none;
+ white-space: nowrap;
+}
diff --git a/demos/src/Extensions/CollaborationCursor/Vue/index.spec.js b/demos/src/Extensions/CollaborationCursor/Vue/index.spec.js
index d35ae9be..463af3c5 100644
--- a/demos/src/Extensions/CollaborationCursor/Vue/index.spec.js
+++ b/demos/src/Extensions/CollaborationCursor/Vue/index.spec.js
@@ -1,6 +1,6 @@
-context('/src/Extensions/CollaborationCursor', () => {
+context('/src/Extensions/CollaborationCursor/Vue', () => {
before(() => {
- cy.visit('/src/Extensions/CollaborationCursor')
+ cy.visit('/src/Extensions/CollaborationCursor/Vue')
})
// TODO: Write tests