From d1b582cd9259999cbdc3de89f555c5c5fb5cd88a Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 13:49:57 +0100 Subject: [PATCH] Add CollaborationCursor demo for React --- .../CollaborationCursor/React/index.html | 15 +++++++ .../CollaborationCursor/React/index.jsx | 40 ++++++++++++++++++ .../CollaborationCursor/React/index.spec.js | 7 ++++ .../CollaborationCursor/React/styles.scss | 42 +++++++++++++++++++ .../CollaborationCursor/Vue/index.spec.js | 4 +- 5 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 demos/src/Extensions/CollaborationCursor/React/index.html create mode 100644 demos/src/Extensions/CollaborationCursor/React/index.jsx create mode 100644 demos/src/Extensions/CollaborationCursor/React/index.spec.js create mode 100644 demos/src/Extensions/CollaborationCursor/React/styles.scss 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