mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 22:36:14 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

Browse Source
This commit is contained in:
Philipp Kühn 2020-11-30 14:20:43 +01:00
commit a3d21ca7eb
7 changed files with 68 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@ -71,29 +71,33 @@
<button @click="setName">
Set Name
</button>
<button @click="changeName">
<button @click="updateCurrentUser({ name: getRandomName() })">
Random Name
</button>
<button @click="changeColor">
<button @click="updateCurrentUser({ color: getRandomColor() })">
Random Color
</button>
</div>
<div class="collaboration-status">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }}
</div>
<div class="collaboration-users">
<div
class="collaboration-users__item"
:style="`background-color: ${user.color}`"
v-for="user in users"
:key="user.clientId"
:style="`background-color: ${otherUser.color}`"
v-for="otherUser in users"
:key="otherUser.clientId"
>
{{ user.name }}
{{ otherUser.name }}
</div>
</div>
<editor-content :editor="editor" />
<div :class="`collaboration-status collaboration-status--${status}`">
<template v-if="status">
{{ status }},
</template>
{{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
</div>
</div>
</template>
@ -103,8 +107,13 @@ import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import * as Y from 'yjs'
import { WebrtcProvider } from 'y-webrtc'
// import { WebsocketProvider } from 'y-websocket'
import { IndexeddbPersistence } from 'y-indexeddb'
const getRandomElement = list => {
return list[Math.floor(Math.random() * list.length)]
}
export default {
components: {
EditorContent,
@ -112,17 +121,25 @@ export default {
data() {
return {
currentUser: {
name: this.getRandomName(),
color: this.getRandomColor(),
},
indexdb: null,
editor: null,
users: [],
status: null,
}
},
mounted() {
const ydoc = new Y.Doc()
const provider = new WebrtcProvider('tiptap-collaboration-example', ydoc)
// const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'tiptap-collaboration-example', ydoc)
provider.on('status', event => {
this.status = event.status
})
this.indexdb = new IndexeddbPersistence('tiptap-collaboration-example', ydoc)
this.editor = new Editor({
@ -133,10 +150,7 @@ export default {
}),
CollaborationCursor.configure({
provider,
user: {
name: this.name,
color: this.color,
},
user: this.currentUser,
onUpdate: users => {
this.users = users
},
@ -150,32 +164,19 @@ export default {
const name = window.prompt('Name')
if (name) {
this.name = name
return this.updateUser()
return this.updateCurrentUser({
name,
})
}
},
changeName() {
this.name = this.getRandomName()
this.updateUser()
},
changeColor() {
this.color = this.getRandomColor()
this.updateUser()
},
updateUser() {
this.editor.chain().focus().user({
name: this.name,
color: this.color,
}).run()
// this.updateState()
updateCurrentUser(attributes) {
this.currentUser = { ...this.currentUser, ...attributes }
this.editor.chain().focus().user(this.currentUser).run()
},
getRandomColor() {
return this.getRandomElement([
return getRandomElement([
'#616161',
'#A975FF',
'#FB5151',
@ -188,14 +189,10 @@ export default {
},
getRandomName() {
return this.getRandomElement([
return getRandomElement([
'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
])
},
getRandomElement(list) {
return list[Math.floor(Math.random() * list.length)]
},
},
beforeDestroy() {
@ -221,21 +218,27 @@ export default {
/* Some information about the status */
.collaboration-status {
background: #eee;
color: #666;
border-radius: 5px;
padding: 0.5rem 1rem;
margin-top: 1rem;
color: #616161;
&::before {
content: ' ';
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background: green;
background: #ccc;
border-radius: 50%;
margin-right: 0.5rem;
}
&--connecting::before {
background: #fd9170;
}
&--connected::before {
background: #9DEF8F;
}
}
/* Give a remote user a caret */

354
docs/src/demos/Examples/CollaborativeEditingWs/index.vue
View File

@ -1,354 +0,0 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
<br>
<br>
<button @click="setName">
Set Name
</button>
<button @click="changeName">
Random Name
</button>
<button @click="changeColor">
Random Color
</button>
</div>
<div class="collaboration-status">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }}
</div>
<div class="collaboration-users">
<div
class="collaboration-users__item"
:style="`background-color: ${user.color}`"
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</div>
</div>
<editor-content :editor="editor" />
<div class="collaboration-log">
<div class="collaboration-log__item" v-for="(item, index) in log" :key="index">
[{{ item.timestamp.toLocaleString() }}]
{{ item.status }}
</div>
</div>
</div>
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import * as Y from 'yjs'
// import { WebrtcProvider } from 'y-webrtc'
import { WebsocketProvider } from 'y-websocket'
import { IndexeddbPersistence } from 'y-indexeddb'
export default {
components: {
EditorContent,
},
data() {
return {
documentName: 'tiptap-collaboration-example',
name: this.getRandomName(),
color: this.getRandomColor(),
ydoc: null,
provider: null,
type: null,
indexdb: null,
editor: null,
users: [],
log: [],
}
},
mounted() {
this.ydoc = new Y.Doc()
this.type = this.ydoc.getXmlFragment('prosemirror')
this.indexdb = new IndexeddbPersistence(this.documentName, this.ydoc)
// this.provider = new WebrtcProvider(this.documentName, this.ydoc)
// this.provider = new WebsocketProvider('ws://websocket.tiptap.dev', this.documentName, this.ydoc)
this.provider = new WebsocketProvider('ws://127.0.0.1:1234', this.documentName, this.ydoc)
this.provider.on('status', event => {
this.log.unshift({
timestamp: new Date(),
status: event.status,
})
})
this.provider.awareness.on('change', this.updateState)
this.editor = new Editor({
extensions: [
...defaultExtensions(),
Collaboration.configure({
type: this.type,
}),
CollaborationCursor.configure({
provider: this.provider,
name: this.name,
color: this.color,
}),
],
})
this.updateState()
},
methods: {
setName() {
const name = window.prompt('Name')
if (name) {
this.name = name
return this.updateUser()
}
},
changeName() {
this.name = this.getRandomName()
this.updateUser()
},
changeColor() {
this.color = this.getRandomColor()
this.updateUser()
},
updateUser() {
this.editor.chain().focus().user({
name: this.name,
color: this.color,
}).run()
this.updateState()
},
getRandomColor() {
return this.getRandomElement([
'#616161',
'#A975FF',
'#FB5151',
'#fd9170',
'#FFCB6B',
'#68CEF8',
'#80cbc4',
'#9DEF8F',
])
},
getRandomName() {
return this.getRandomElement([
'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
])
},
getRandomElement(list) {
return list[Math.floor(Math.random() * list.length)]
},
updateState() {
const { states } = this.provider.awareness
this.users = Array.from(states.entries()).map(state => {
return {
id: state[0],
...state[1].user,
}
})
},
},
beforeDestroy() {
this.editor.destroy()
this.provider.destroy()
},
}
</script>
<style lang="scss">
/* A list of all available users */
.collaboration-users {
margin-top: 0.5rem;
&__item {
display: inline-block;
border-radius: 5px;
padding: 0.25rem 0.5rem;
color: white;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
}
/* Some information about the status */
.collaboration-status {
background: #eee;
color: #666;
border-radius: 5px;
padding: 0.5rem 1rem;
margin-top: 1rem;
&::before {
content: ' ';
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background: green;
border-radius: 50%;
margin-right: 0.5rem;
}
}
.collaboration-log {
background: #0D0D0D;
border-radius: 5px;
color: #9DEF8F;
font-family: monospace;
margin-top: 1rem;
padding: 0.25rem 0.5rem;
}
/* Give a remote user a caret */
.collaboration-cursor__caret {
position: relative;
margin-left: -1px;
margin-right: -1px;
border-left: 1px solid black;
border-right: 1px solid black;
word-break: normal;
pointer-events: none;
}
/* Render the username above the caret */
.collaboration-cursor__label {
position: absolute;
top: -1.4em;
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;
}
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
background: none;
font-size: 0.8rem;
}
}
img {
max-width: 100%;
height: auto;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
}
</style>

14
docs/src/demos/Examples/CollaborativeEditingWs/server.js
View File

@ -1,14 +0,0 @@
/*
import { Server } from '@hocuspocus/server'
import { LevelDB } from '@hocuspocus/leveldb'
const server = Server.configure({
port: 1234,
persistence: new LevelDB({
path: './database',
}),
})
server.listen()
*/

5
docs/src/docPages/examples/collaborative-editing-ws.md
View File

@ -1,5 +0,0 @@
# Collaborative editing
Websockets
<demo name="Examples/CollaborativeEditingWs" />

29
docs/src/docPages/examples/collaborative-editing.md
View File

@ -1,19 +1,28 @@
# Collaborative editing
:::premium Requires Pro Extensions
We kindly ask you to sponsor us, before using this example in production. [Read more](/sponsor)
:::
This example shows how you can use tiptap to let multiple users collaborate in the same document in real-time.
This example shows how you can use tiptap to let different users collaboratively work on the same text in real-time.
It connects client with WebRTC and merges changes to the document (no matter where they come from) with the awesome library [Y.js](https://github.com/yjs/yjs) by Kevin Jahns. Be aware that in a real-world scenario you would probably add a server, which is also able to merge changes with Y.js.
If you want to learn more about collaborative text editing, [check out our guide on that topic](/guide/collaborative-editing). Anyway, it’s showtime now:
It connects all clients to a WebSocket server and merges changes to the document with the power of [Y.js](https://github.com/yjs/yjs). If you want to learn more about collaborative text editing, check out [our guide on collaborative editing](/guide/collaborative-editing).
:::warning Shared Document
Be nice! The content of this editor is shared with other users from the Internet.
:::
<!-- <demo name="Examples/CollaborativeEditing" :show-source="false"/> -->
<demo name="Examples/CollaborativeEditing" />
In case you’re wondering what kind of sorcery you need on the server to achieve this, here is the backend code for the demo:
```js
import { Server } from '@hocuspocus/server'
import { LevelDB } from '@hocuspocus/leveldb'
const server = Server.configure({
port: 1234,
persistence: new LevelDB({
path: './database',
}),
})
server.listen()
```

3
docs/src/links.yaml
View File

@ -20,9 +20,6 @@
- title: Collaborative editing
link: /examples/collaborative-editing
pro: true
- title: Collaborative editing 🚧
link: /examples/collaborative-editing-ws
draft: true
- title: Markdown shortcuts
link: /examples/markdown-shortcuts
# - title: Formatting

3
packages/extension-collaboration-cursor/src/index.ts
View File

@ -46,7 +46,8 @@ const CollaborationCursor = Extension.create({
* Update details of the current user
*/
user: (attributes: { [key: string]: any }): Command => () => {
this.options.provider.awareness.setLocalStateField('user', attributes)
this.options.user = attributes
this.options.provider.awareness.setLocalStateField('user', this.options.user)
this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
return true