From c1068aedcff4c718f6ecc70bf5258a51bc267ac8 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 13:44:05 +0100 Subject: [PATCH] Add Collaboration extension demo for React --- .../Extensions/Collaboration/React/index.html | 15 ++++++++ .../Extensions/Collaboration/React/index.jsx | 34 +++++++++++++++++++ .../Collaboration/React/index.spec.js | 7 ++++ .../Collaboration/React/styles.scss | 15 ++++++++ 4 files changed, 71 insertions(+) create mode 100644 demos/src/Extensions/Collaboration/React/index.html create mode 100644 demos/src/Extensions/Collaboration/React/index.jsx create mode 100644 demos/src/Extensions/Collaboration/React/index.spec.js create mode 100644 demos/src/Extensions/Collaboration/React/styles.scss diff --git a/demos/src/Extensions/Collaboration/React/index.html b/demos/src/Extensions/Collaboration/React/index.html new file mode 100644 index 00000000..f0a75292 --- /dev/null +++ b/demos/src/Extensions/Collaboration/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Extensions/Collaboration/React/index.jsx b/demos/src/Extensions/Collaboration/React/index.jsx new file mode 100644 index 00000000..6e86178f --- /dev/null +++ b/demos/src/Extensions/Collaboration/React/index.jsx @@ -0,0 +1,34 @@ +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 Placeholder from '@tiptap/extension-placeholder' +import * as Y from 'yjs' +import { WebrtcProvider } from 'y-webrtc' +import './styles.scss' + +const ydoc = new Y.Doc() + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc) + +export default () => { + const editor = useEditor({ + extensions: [ + Document, + Paragraph, + Text, + Collaboration.configure({ + document: ydoc, + }), + Placeholder.configure({ + placeholder: + 'Write something … It’ll be shared with everyone else looking at this example.', + }), + ], + }) + + return +} diff --git a/demos/src/Extensions/Collaboration/React/index.spec.js b/demos/src/Extensions/Collaboration/React/index.spec.js new file mode 100644 index 00000000..e2c2a4c3 --- /dev/null +++ b/demos/src/Extensions/Collaboration/React/index.spec.js @@ -0,0 +1,7 @@ +context('/src/Extensions/Collaboration/React/', () => { + before(() => { + cy.visit('/src/Extensions/Collaboration/React/') + }) + + // TODO: Write tests +}) diff --git a/demos/src/Extensions/Collaboration/React/styles.scss b/demos/src/Extensions/Collaboration/React/styles.scss new file mode 100644 index 00000000..807c9824 --- /dev/null +++ b/demos/src/Extensions/Collaboration/React/styles.scss @@ -0,0 +1,15 @@ +/* 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; +}