Hard
Your team is building a real-time collaborative text editor. Complete the missing code in the custom hook
1<p>function useCollaborativeEditor(documentId) {</p><p> const [content, setContent] = useState('');</p><p> const [collaborators, setCollaborators] = useState([]);</p><p> const wsRef = useRef(null);</p><p> useEffect(() => {</p><p> wsRef.current = new WebSocket(WEBSOCKET_URL);</p><p> </p><p> wsRef.current.onmessage = (event) => {</p><p> const { type, data } = JSON.parse(event.data);</p><p> </p><p> switch(type) {</p><p> case 'content_update':</p><p> // Missing code here</p><p> break;</p><p> case 'collaborator_joined':</p><p> setCollaborators(prev => [...prev, data.user]);</p><p> break;</p><p> }</p><p> };</p><p> return () => wsRef.current?.close();</p><p> }, [documentId]);</p><p> const updateContent = (newContent) => {</p><p> setContent(newContent);</p><p> // Missing code here</p><p> };</p><p> return { content, collaborators, updateContent };</p><p>}</p>