docs

udecode · Dec 6, 2024 · 81139ba · 81139ba
1 parent aceef6a
commit 81139ba
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git 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
@@ -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<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",
+      "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<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\nexport function RemoteCursorOverlay() {\n  const containerRef = useEditorContainerRef();\n  const [cursors] = useRemoteCursorOverlayPositions<CursorData>({\n    containerRef,\n  });\n\n  return (\n    <>\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"