diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index 87fdbd1b60..91522e2b79 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -1478,8 +1478,7 @@ }, { "dependencies": [ - "@slate-yjs/react", - "@udecode/plate-core" + "@slate-yjs/react" ], "doc": { "description": "A cursor overlay to display multiplayer cursors in the yjs plugin.", diff --git a/apps/www/public/r/styles/default/remote-cursor-overlay.json b/apps/www/public/r/styles/default/remote-cursor-overlay.json index 7f8dfd9c6c..57518c68a1 100644 --- a/apps/www/public/r/styles/default/remote-cursor-overlay.json +++ b/apps/www/public/r/styles/default/remote-cursor-overlay.json @@ -1,7 +1,6 @@ { "dependencies": [ - "@slate-yjs/react", - "@udecode/plate-core" + "@slate-yjs/react" ], "doc": { "description": "A cursor overlay to display multiplayer cursors in the yjs plugin.", @@ -14,7 +13,7 @@ }, "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, '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 \n \n {data?.name}\n \n \n );\n}\n\nfunction RemoteSelection({\n caretPosition,\n data,\n selectionRects,\n}: CursorOverlayData) {\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 \n {selectionRects.map((position, i) => (\n \n ))}\n {caretPosition && }\n \n );\n}\n\ntype RemoteCursorsProps = PropsWithChildren<{\n className?: string;\n}>;\n\nexport function RemoteCursorOverlay({ children }: RemoteCursorsProps) {\n const containerRef = useEditorContainerRef();\n const [cursors] = useRemoteCursorOverlayPositions({\n containerRef,\n });\n\n return (\n <>\n {children}\n {cursors.map((cursor) => (\n \n ))}\n \n );\n}\n", + "content": "'use client';\n// Lifted from slate-yjs https://github.com/BitPhinix/slate-yjs/blob/main/examples/frontend/src/pages/RemoteCursorOverlay/Overlay.tsx\n\nimport React, { type CSSProperties, useState } from 'react';\n\nimport {\n type CursorOverlayData,\n useRemoteCursorOverlayPositions,\n} from '@slate-yjs/react';\nimport { useEditorContainerRef } from '@udecode/plate-common/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, '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 \n \n {data?.name}\n \n \n );\n}\n\nfunction RemoteSelection({\n caretPosition,\n data,\n selectionRects,\n}: CursorOverlayData) {\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 \n {selectionRects.map((position, i) => (\n \n ))}\n {caretPosition && }\n \n );\n}\n\nexport function RemoteCursorOverlay() {\n const containerRef = useEditorContainerRef();\n const [cursors] = useRemoteCursorOverlayPositions({\n containerRef,\n });\n\n return (\n <>\n {cursors.map((cursor) => (\n \n ))}\n \n );\n}\n", "path": "plate-ui/remote-cursor-overlay.tsx", "target": "components/plate-ui/remote-cursor-overlay.tsx", "type": "registry:ui"