-
-
Notifications
You must be signed in to change notification settings - Fork 755
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3835 from calctree/dpnova/feat/yjs-remote-cursor-…
…overlay feat: show remote cursors when in collaboration.
- Loading branch information
Showing
10 changed files
with
331 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
apps/www/public/r/styles/default/remote-cursor-overlay.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "dependencies": [ | ||
| "@slate-yjs/react", | ||
| "@udecode/plate-core" | ||
| ], | ||
| "doc": { | ||
| "description": "A cursor overlay to display multiplayer cursors in the yjs plugin.", | ||
| "docs": [ | ||
| { | ||
| "route": "/docs/collaboration" | ||
| } | ||
| ], | ||
| "examples": [] | ||
| }, | ||
| "files": [ | ||
| { | ||
| "content": "import React, {\n type CSSProperties,\n type PropsWithChildren,\n useState,\n} from 'react';\n\nimport {\n type CursorOverlayData,\n useRemoteCursorOverlayPositions,\n} from '@slate-yjs/react';\nimport { useEditorContainerRef } from '@udecode/plate-core/react';\n\nexport function addAlpha(hexColor: string, opacity: number): string {\n const normalized = Math.round(Math.min(Math.max(opacity, 0), 1) * 255);\n\n return hexColor + normalized.toString(16).toUpperCase();\n}\n\nexport type CursorData = {\n color: string;\n name: string;\n};\n\ntype CaretProps = Pick<CursorOverlayData<CursorData>, 'caretPosition' | 'data'>;\nconst cursorOpacity = 0.7;\nconst hoverOpacity = 1;\n\nfunction Caret({ caretPosition, data }: CaretProps) {\n const [isHover, setIsHover] = useState(false);\n\n const handleMouseEnter = () => {\n setIsHover(true);\n };\n const handleMouseLeave = () => {\n setIsHover(false);\n };\n const caretStyle: CSSProperties = {\n ...caretPosition,\n background: data?.color,\n opacity: cursorOpacity,\n transition: 'opacity 0.2s',\n };\n const caretStyleHover = { ...caretStyle, opacity: hoverOpacity };\n\n const labelStyle: CSSProperties = {\n background: data?.color,\n opacity: cursorOpacity,\n transform: 'translateY(-100%)',\n transition: 'opacity 0.2s',\n };\n const labelStyleHover = { ...labelStyle, opacity: hoverOpacity };\n\n return (\n <div\n className=\"absolute w-0.5\"\n style={isHover ? caretStyleHover : caretStyle}\n >\n <div\n className=\"absolute top-0 whitespace-nowrap rounded rounded-bl-none px-1.5 py-0.5 text-xs text-white\"\n style={isHover ? labelStyleHover : labelStyle}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {data?.name}\n </div>\n </div>\n );\n}\n\nfunction RemoteSelection({\n caretPosition,\n data,\n selectionRects,\n}: CursorOverlayData<CursorData>) {\n if (!data) {\n return null;\n }\n\n const selectionStyle: CSSProperties = {\n // Add a opacity to the background color\n backgroundColor: addAlpha(data.color, 0.5),\n };\n\n return (\n <React.Fragment>\n {selectionRects.map((position, i) => (\n <div\n key={i}\n className=\"pointer-events-none absolute\"\n style={{ ...selectionStyle, ...position }}\n ></div>\n ))}\n {caretPosition && <Caret caretPosition={caretPosition} data={data} />}\n </React.Fragment>\n );\n}\n\ntype RemoteCursorsProps = PropsWithChildren<{\n className?: string;\n}>;\n\nexport function RemoteCursorOverlay({ children }: RemoteCursorsProps) {\n const containerRef = useEditorContainerRef();\n const [cursors] = useRemoteCursorOverlayPositions<CursorData>({\n containerRef,\n });\n\n return (\n <>\n {children}\n {cursors.map((cursor) => (\n <RemoteSelection key={cursor.clientId} {...cursor} />\n ))}\n </>\n );\n}\n", | ||
| "path": "plate-ui/remote-cursor-overlay.tsx", | ||
| "target": "components/plate-ui/remote-cursor-overlay.tsx", | ||
| "type": "registry:ui" | ||
| } | ||
| ], | ||
| "name": "remote-cursor-overlay", | ||
| "registryDependencies": [], | ||
| "type": "registry:ui" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
apps/www/src/registry/default/plate-ui/remote-cursor-overlay.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| 'use client'; | ||
| // Lifted from slate-yjs https://github.com/BitPhinix/slate-yjs/blob/main/examples/frontend/src/pages/RemoteCursorOverlay/Overlay.tsx | ||
|
|
||
| import React, { type CSSProperties, useState } from 'react'; | ||
|
|
||
| import { | ||
| type CursorOverlayData, | ||
| useRemoteCursorOverlayPositions, | ||
| } from '@slate-yjs/react'; | ||
| import { useEditorContainerRef } from '@udecode/plate-common/react'; | ||
|
|
||
| export function addAlpha(hexColor: string, opacity: number): string { | ||
| const normalized = Math.round(Math.min(Math.max(opacity, 0), 1) * 255); | ||
|
|
||
| return hexColor + normalized.toString(16).toUpperCase(); | ||
| } | ||
|
|
||
| export type CursorData = { | ||
| color: string; | ||
| name: string; | ||
| }; | ||
|
|
||
| type CaretProps = Pick<CursorOverlayData<CursorData>, 'caretPosition' | 'data'>; | ||
| const cursorOpacity = 0.7; | ||
| const hoverOpacity = 1; | ||
|
|
||
| function Caret({ caretPosition, data }: CaretProps) { | ||
| const [isHover, setIsHover] = useState(false); | ||
|
|
||
| const handleMouseEnter = () => { | ||
| setIsHover(true); | ||
| }; | ||
| const handleMouseLeave = () => { | ||
| setIsHover(false); | ||
| }; | ||
| const caretStyle: CSSProperties = { | ||
| ...caretPosition, | ||
| background: data?.color, | ||
| opacity: cursorOpacity, | ||
| transition: 'opacity 0.2s', | ||
| }; | ||
| const caretStyleHover = { ...caretStyle, opacity: hoverOpacity }; | ||
|
|
||
| const labelStyle: CSSProperties = { | ||
| background: data?.color, | ||
| opacity: cursorOpacity, | ||
| transform: 'translateY(-100%)', | ||
| transition: 'opacity 0.2s', | ||
| }; | ||
| const labelStyleHover = { ...labelStyle, opacity: hoverOpacity }; | ||
|
|
||
| return ( | ||
| <div | ||
| className="absolute w-0.5" | ||
| style={isHover ? caretStyleHover : caretStyle} | ||
| > | ||
| <div | ||
| className="absolute top-0 whitespace-nowrap rounded rounded-bl-none px-1.5 py-0.5 text-xs text-white" | ||
| style={isHover ? labelStyleHover : labelStyle} | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| {data?.name} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function RemoteSelection({ | ||
| caretPosition, | ||
| data, | ||
| selectionRects, | ||
| }: CursorOverlayData<CursorData>) { | ||
| if (!data) { | ||
| return null; | ||
| } | ||
|
|
||
| const selectionStyle: CSSProperties = { | ||
| // Add a opacity to the background color | ||
| backgroundColor: addAlpha(data.color, 0.5), | ||
| }; | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| {selectionRects.map((position, i) => ( | ||
| <div | ||
| key={i} | ||
| className="pointer-events-none absolute" | ||
| style={{ ...selectionStyle, ...position }} | ||
| ></div> | ||
| ))} | ||
| {caretPosition && <Caret caretPosition={caretPosition} data={data} />} | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| export function RemoteCursorOverlay() { | ||
| const containerRef = useEditorContainerRef(); | ||
| const [cursors] = useRemoteCursorOverlayPositions<CursorData>({ | ||
| containerRef, | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| {cursors.map((cursor) => ( | ||
| <RemoteSelection key={cursor.clientId} {...cursor} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.