ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve collab cursor styling

Browse Source
This commit is contained in:
Hans Pagel
2020-09-27 10:37:48 +02:00
parent 149ce56ad8
commit a6bcea4458
2 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/src/demos/Examples/CollaborativeEditing/style.scss
View File

@@ -1,5 +1,6 @@
.collaboration-users { .collaboration-users {
margin-top: 0.5rem; margin-top: 0.5rem;
&__item { &__item {
display: inline-block; display: inline-block;
border-radius: 5px; border-radius: 5px;
@@ -28,15 +29,8 @@
} }
} }
/* this is a rough fix for the first cursor position when the first paragraph is empty */ /* This gives the remote user caret */
.ProseMirror > .collaboration-cursor:first-child { .collaboration-cursor__caret {
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*/
.collaboration-cursor {
position: relative; position: relative;
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
@@ -45,10 +39,11 @@
word-break: normal; word-break: normal;
pointer-events: none; pointer-events: none;
} }
/* This renders the username above the caret */ /* This renders the username above the caret */
.collaboration-cursor > div { .collaboration-cursor__label {
position: absolute; position: absolute;
top: -1.05em; top: -1.6em;
left: -1px; left: -1px;
font-size: 13px; font-size: 13px;
font-style: normal; font-style: normal;

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

@@ -34,10 +34,11 @@ export default new Extension<CollaborationCursorOptions>()
color: '#cccccc', color: '#cccccc',
render: user => { render: user => {
const cursor = document.createElement('span') const cursor = document.createElement('span')
cursor.classList.add('collaboration-cursor') cursor.classList.add('collaboration-cursor__caret')
cursor.setAttribute('style', `border-color: ${user.color}`) cursor.setAttribute('style', `border-color: ${user.color}`)
const label = document.createElement('div') const label = document.createElement('div')
label.classList.add('collaboration-cursor__label')
label.setAttribute('style', `background-color: ${user.color}`) label.setAttribute('style', `background-color: ${user.color}`)
label.insertBefore(document.createTextNode(user.name), null) label.insertBefore(document.createTextNode(user.name), null)
cursor.insertBefore(label, null) cursor.insertBefore(label, null)