tldraw/dist-esm/lib/ui/components/CursorChatBubble.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../src/lib/ui/components/CursorChatBubble.tsx"],
  "sourcesContent": ["import { preventDefault, track, useEditor } from '@tldraw/editor'\nimport {\n\tChangeEvent,\n\tClipboardEvent,\n\tKeyboardEvent,\n\tRefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\n\n// todo:\n// - not cleaning up\nconst CHAT_MESSAGE_TIMEOUT_CLOSING = 2000\nconst CHAT_MESSAGE_TIMEOUT_CHATTING = 5000\n\nexport const CursorChatBubble = track(function CursorChatBubble() {\n\tconst editor = useEditor()\n\tconst { isChatting, chatMessage } = editor.getInstanceState()\n\n\tconst rTimeout = useRef<any>(-1)\n\tconst [value, setValue] = useState('')\n\n\tuseEffect(() => {\n\t\tconst closingUp = !isChatting && chatMessage\n\t\tif (closingUp || isChatting) {\n\t\t\tconst duration = isChatting ? CHAT_MESSAGE_TIMEOUT_CHATTING : CHAT_MESSAGE_TIMEOUT_CLOSING\n\t\t\trTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\teditor.updateInstanceState({ chatMessage: '', isChatting: false })\n\t\t\t\tsetValue('')\n\t\t\t\teditor.focus()\n\t\t\t}, duration)\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout(rTimeout.current)\n\t\t}\n\t}, [editor, chatMessage, isChatting])\n\n\tif (isChatting)\n\t\treturn <CursorChatInput value={value} setValue={setValue} chatMessage={chatMessage} />\n\n\treturn chatMessage.trim() ? <NotEditingChatMessage chatMessage={chatMessage} /> : null\n})\n\nfunction usePositionBubble(ref: RefObject<HTMLInputElement>) {\n\tconst editor = useEditor()\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tconst { x, y } = editor.inputs.currentScreenPoint\n\t\tref.current?.style.setProperty('transform', `translate(${x}px, ${y}px)`)\n\n\t\t// Positioning the chat bubble\n\t\tfunction positionChatBubble(e: PointerEvent) {\n\t\t\tconst { minX, minY } = editor.getViewportScreenBounds()\n\t\t\tref.current?.style.setProperty(\n\t\t\t\t'transform',\n\t\t\t\t`translate(${e.clientX - minX}px, ${e.clientY - minY}px)`\n\t\t\t)\n\t\t}\n\n\t\twindow.addEventListener('pointermove', positionChatBubble)\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('pointermove', positionChatBubble)\n\t\t}\n\t}, [ref, editor])\n}\n\nconst NotEditingChatMessage = ({ chatMessage }: { chatMessage: string }) => {\n\tconst editor = useEditor()\n\tconst ref = useRef<HTMLInputElement>(null)\n\n\tusePositionBubble(ref)\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName=\"tl-cursor-chat tl-cursor-chat__bubble\"\n\t\t\tstyle={{ backgroundColor: editor.user.getColor() }}\n\t\t>\n\t\t\t{chatMessage}\n\t\t</div>\n\t)\n}\n\nconst CursorChatInput = track(function CursorChatInput({\n\tchatMessage,\n\tvalue,\n\tsetValue,\n}: {\n\tchatMessage: string\n\tvalue: string\n\tsetValue(value: string): void\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst placeholder = chatMessage || msg('cursor-chat.type-to-chat')\n\n\tusePositionBubble(ref)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tconst textMeasurement = editor.textMeasure.measureText(value || placeholder, {\n\t\t\tfontFamily: 'var(--font-body)',\n\t\t\tfontSize: 12,\n\t\t\tfontWeight: '500',\n\t\t\tfontStyle: 'normal',\n\t\t\tmaxWidth: null,\n\t\t\tlineHeight: 1,\n\t\t\tpadding: '6px',\n\t\t})\n\n\t\telm.style.setProperty('width', textMeasurement.w + 'px')\n\t}, [editor, value, placeholder])\n\n\tuseLayoutEffect(() => {\n\t\t// Focus the input\n\t\tconst raf = editor.timers.requestAnimationFrame(() => {\n\t\t\tref.current?.focus()\n\t\t})\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(raf)\n\t\t}\n\t}, [editor])\n\n\tconst stopChatting = useCallback(() => {\n\t\teditor.updateInstanceState({ isChatting: false })\n\t\teditor.focus()\n\t}, [editor])\n\n\t// Update the chat message as the user types\n\tconst handleChange = useCallback(\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst { value } = e.target\n\t\t\tsetValue(value.slice(0, 64))\n\t\t\teditor.updateInstanceState({ chatMessage: value })\n\t\t},\n\t\t[editor, setValue]\n\t)\n\n\t// Handle some keyboard shortcuts\n\tconst handleKeyDown = useCallback(\n\t\t(e: KeyboardEvent) => {\n\t\t\tconst elm = ref.current\n\t\t\tif (!elm) return\n\n\t\t\t// get this from the element so that this hook doesn't depend on value\n\t\t\tconst { value: currentValue } = elm\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Enter': {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\te.stopPropagation()\n\n\t\t\t\t\t// If the user hasn't typed anything, stop chatting\n\t\t\t\t\tif (!currentValue) {\n\t\t\t\t\t\tstopChatting()\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\n\t\t\t\t\t// Otherwise, 'send' the message\n\t\t\t\t\tsetValue('')\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tstopChatting()\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[stopChatting, setValue]\n\t)\n\n\tconst handlePaste = useCallback((e: ClipboardEvent) => {\n\t\te.stopPropagation()\n\t}, [])\n\n\treturn (\n\t\t<input\n\t\t\tref={ref}\n\t\t\tclassName={`tl-cursor-chat`}\n\t\t\tstyle={{ backgroundColor: editor.user.getColor() }}\n\t\t\tonBlur={stopChatting}\n\t\t\tonChange={handleChange}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonPaste={handlePaste}\n\t\t\tvalue={value}\n\t\t\tplaceholder={placeholder}\n\t\t\tspellCheck={false}\n\t\t/>\n\t)\n})\n"],
  "mappings": "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",
  "names": ["CursorChatBubble", "CursorChatInput", "value"]
}