feat: Tiptap collab demo styling

ueberdosis · Mar 31, 2023 · 87840b0 · 87840b0
1 parent 958925f
commit 87840b0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 231 deletions.
diff --git a/demos/src/Demos/SingleRoomCollab/React/MenuBar.jsx b/demos/src/Demos/SingleRoomCollab/React/MenuBar.jsx
diff --git a/demos/src/Demos/SingleRoomCollab/React/MenuBar.scss b/demos/src/Demos/SingleRoomCollab/React/MenuBar.scss
diff --git a/demos/src/Demos/SingleRoomCollab/React/MenuItem.jsx b/demos/src/Demos/SingleRoomCollab/React/MenuItem.jsx
diff --git a/demos/src/Demos/SingleRoomCollab/React/MenuItem.scss b/demos/src/Demos/SingleRoomCollab/React/MenuItem.scss
diff --git a/demos/src/Demos/SingleRoomCollab/React/index.jsx b/demos/src/Demos/SingleRoomCollab/React/index.jsx
@@ -4,9 +4,6 @@ import { TiptapCollabProvider } from '@hocuspocus/provider'
 import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-import Highlight from '@tiptap/extension-highlight'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, {
@@ -15,8 +12,6 @@ import React, {
 } from 'react'
 import * as Y from 'yjs'
 
-import MenuBar from './MenuBar'
-
 const room = 'room-1'
 const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D']
 const names = [
@@ -75,9 +70,6 @@ export default () => {
       StarterKit.configure({
         history: false,
       }),
-      Highlight,
-      TaskList,
-      TaskItem,
       CharacterCount.configure({
         limit: 10000,
       }),
@@ -115,9 +107,13 @@ export default () => {
 
   return (
     <div className="editor">
-      {editor && <MenuBar editor={editor} />}
-      <EditorContent className="editor__content" editor={editor} />
-      <div className="editor__footer">
+      <div className="editor__header">
+        <div className="dots">
+          <span className="dot"></span>
+          <span className="dot"></span>
+          <span className="dot"></span>
+        </div>
+        <div className="editor__users">
           <div className={`editor__status editor__status--${status}`}>
             {status === 'connected'
               ? `${editor.storage.collaborationCursor.users.length} user${editor.storage.collaborationCursor.users.length === 1 ? '' : 's'} online in ${room}`
@@ -127,6 +123,8 @@ export default () => {
             <button onClick={setName}>{currentUser.name}</button>
           </div>
         </div>
+      </div>
+      <EditorContent className="editor__content" editor={editor} />
     </div>
   )
 }
diff --git a/demos/src/Demos/SingleRoomCollab/React/styles.scss b/demos/src/Demos/SingleRoomCollab/React/styles.scss
@@ -85,7 +85,7 @@
 
 .editor {
   background-color: #fff;
-  border: 3px solid #0d0d0d;
+  border: 2px solid #0d0d0d;
   border-radius: 0.75rem;
   color: #0d0d0d;
   display: flex;
@@ -94,14 +94,19 @@
 
   &__header {
     align-items: center;
-    background: #0d0d0d;
-    border-bottom: 3px solid #0d0d0d;
+    border-bottom: 2px solid #0d0d0d;
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
     display: flex;
-    flex: 0 0 auto;
-    flex-wrap: wrap;
-    padding: 0.25rem;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+  }
+
+  &__users {
+    color: rgba(#000, 0.8);
+    display: flex;
+    font-size: 0.85rem;
+    gap: 1rem;
   }
 
   &__content {
@@ -112,20 +117,6 @@
     -webkit-overflow-scrolling: touch;
   }
 
-  &__footer {
-    align-items: center;
-    border-top: 3px solid #0d0d0d;
-    color: #0d0d0d;
-    display: flex;
-    flex: 0 0 auto;
-    font-size: 12px;
-    flex-wrap: wrap;
-    font-weight: 600;
-    justify-content: space-between;
-    padding: 0.25rem 0.75rem;
-    white-space: nowrap;
-  }
-
   /* Some information about the status */
   &__status {
     align-items: center;
@@ -152,22 +143,18 @@
     }
   }
 
-  &__name {
-    button {
-      background: none;
-      border: none;
-      border-radius: 0.4rem;
-      color: #0d0d0d;
-      font: inherit;
-      font-size: 12px;
-      font-weight: 600;
-      padding: 0.25rem 0.5rem;
-
-      &:hover {
-        background-color: #0d0d0d;
-        color: #fff;
-      }
-    }
+  &__name button {
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    line-height: normal;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    width: auto;
   }
 }
 
@@ -186,7 +173,7 @@
 .collaboration-cursor__label {
   border-radius: 3px 3px 3px 0;
   color: #0d0d0d;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-style: normal;
   font-weight: 600;
   left: -1px;
@@ -197,3 +184,15 @@
   user-select: none;
   white-space: nowrap;
 }
+
+.dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  background: #000;
+  border-radius: 100%;
+  height: 0.625rem;
+  width: 0.625rem;
+}