12925854411

Committed 23 Jan 2025 09:11AM UTC coverage: 25.831% (-4.7%) from 30.523%

Build # 12925854411

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1192 from EcrituresNumeriques/feat/vite6

Run Details

322 of 518 branches covered (62.16%)

Branch coverage included in aggregate %.

3448 of 14077 relevant lines covered (24.49%)

1.66 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/front/src/components/collaborative/CollaborativeTextEditor.jsx

import { Loading } from '@geist-ui/core'
import PropTypes from 'prop-types'
import Editor from '@monaco-editor/react'
import throttle from 'lodash.throttle'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { MonacoBinding } from 'y-monaco'
import { applicationConfig } from '../../config.js'
import * as collaborating from './collaborating.js'
import CollaborativeEditorStatus from './CollaborativeEditorStatus.jsx'

import styles from './CollaborativeTextEditor.module.scss'

const colors = [
  // navy
  '#70b8ff',
  // blue
  '#75bfff',
  // aqua
  '#7FDBFF',
  // teal
  '#39CCCC',
  // olive
  '#92d3b6',
  // green
  '#97e7a0',
  // yellow
  '#ffeb66',
  // orange
  '#ffbb80',
  // red
  '#ff726b',
  // maroon
  '#ff6666',
  // fuchsia
  '#f674d8',
  // purple
  '#e46ff6',
  // gray
  '#AAAAAA',
  // silver
  '#DDDDDD',
]

export default function CollaborativeTextEditor({
  articleId,
  collaborativeSessionCreatorId,
  collaborativeSessionId,
  onCollaborativeSessionStateUpdated,
}) {
  const connectingRef = useRef(false)
  const [dynamicStyles, setDynamicStyles] = useState('')
  const [websocketStatus, setWebsocketStatus] = useState('')
  const [collaborativeSessionState, setCollaborativeSessionState] = useState('')
  const [yText, setYText] = useState(null)
  const [awareness, setAwareness] = useState(null)
  const { websocketEndpoint } = applicationConfig
  const activeUser = useSelector(
    (state) => ({
      _id: state.activeUser._id,
      email: state.activeUser.email,
      displayName: state.activeUser.displayName,
      username: state.activeUser.username,
    }),
    shallowEqual
  )
  const dispatch = useDispatch()
  const editorRef = useRef()
  const editorCursorPosition = useSelector(
    (state) => state.editorCursorPosition,
    shallowEqual
  )

  const options = useMemo(
    () => ({
      automaticLayout: true,
      readOnly:
        websocketStatus !== 'connected' ||
        collaborativeSessionState !== 'started',
      contextmenu: websocketStatus === 'connected',
      autoClosingBrackets: 'never',
      wordBasedSuggestions: false,
      overviewRulerLanes: 0,
      hideCursorInOverviewRuler: true,
      overviewRulerBorder: false,
      scrollBeyondLastLine: false,
      wordWrap: 'on',
      wrappingIndent: 'none',
      minimap: {
        enabled: false,
      },
    }),
    [websocketStatus]
  )

  const handleUpdateArticleStructureAndStats = throttle(
    ({ text }) => {
      dispatch({ type: 'UPDATE_ARTICLE_STATS', md: text })
      dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: text })
    },
    250,
    { leading: false, trailing: true }
  )

  const writerInfo = useMemo(
    () => ({
      id: activeUser._id,
      email: activeUser.email,
      displayName: activeUser.displayName,
      username: activeUser.username,
      color: colors[Math.floor(Math.random() * 14)],
    }),
    [activeUser]
  )

  const handleWritersUpdated = useCallback(
    ({ states }) => {
      const writers = Object.fromEntries(states)
      dispatch({ type: 'UPDATE_ARTICLE_WRITERS', articleWriters: writers })
      setDynamicStyles(
        Object.entries(writers)
          .map(([key, writer]) => {
            const color = writer.user.color
            return `
.yRemoteSelection-${key} {
  background-color: ${color};
}
.yRemoteSelectionHead-${key} {
  border-left: ${color} solid 2px;
  border-top: ${color} solid 2px;
  border-bottom: ${color} solid 2px;
}`
          })
          .join('\n')
      )
    },
    [setDynamicStyles]
  )

  const handleWebsocketStatusUpdated = useCallback(
    (status) => {
      setWebsocketStatus(status)
    },
    [setWebsocketStatus]
  )

  const handleEditorDidMount = useCallback(
    (editor) => {
      editorRef.current = editor
      new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)
    },
    [yText, awareness]
  )

  useEffect(() => {
    if (connectingRef.current) {
      return
    }
    connectingRef.current = true
    const {
      awareness,
      doc: yDocument,
      wsProvider,
    } = collaborating.connect({
      roomName: collaborativeSessionId,
      websocketEndpoint,
      user: writerInfo,
      onChange: handleWritersUpdated,
      onStatusUpdated: handleWebsocketStatusUpdated,
    })
    const yText = yDocument.getText('main')
    const yState = yDocument.getText('state')
    yText.observe(function () {
      handleUpdateArticleStructureAndStats({ text: yText.toString() })
    })
    yState.observe(function () {
      setCollaborativeSessionState(yState.toString())
      onCollaborativeSessionStateUpdated({ state: yState.toString() })
    })
    setAwareness(awareness)
    setYText(yText)
    return () => {
      connectingRef.current = false
      awareness.destroy()
      wsProvider.disconnect()
      wsProvider.destroy()
    }
  }, [collaborativeSessionId, websocketEndpoint, writerInfo])

  useEffect(() => {
    const line = editorCursorPosition.lineNumber
    const editor = editorRef.current
    editor?.focus()
    const endOfLineColumn = editor?.getModel()?.getLineMaxColumn(line + 1)
    editor?.setPosition({ lineNumber: line + 1, column: endOfLineColumn })
    editor?.revealLine(line + 1, 1) // smooth
  }, [editorRef, editorCursorPosition])

  if (!yText) {
    return <Loading />
  }

  return (
    <>
      <style>{dynamicStyles}</style>
      <CollaborativeEditorStatus
        articleId={articleId}
        collaborativeSessionState={collaborativeSessionState}
        websocketStatus={websocketStatus}
        collaborativeSessionCreatorId={collaborativeSessionCreatorId}
      />
      <Editor
        options={options}
        className={styles.editor}
        defaultLanguage="markdown"
        onMount={handleEditorDidMount}
      />
    </>
  )
}

CollaborativeTextEditor.propTypes = {
  articleId: PropTypes.string.isRequired,
  collaborativeSessionId: PropTypes.string.isRequired,
  collaborativeSessionCreatorId: PropTypes.string.isRequired,
  onCollaborativeSessionStateUpdated: PropTypes.func,
}

1	import { Loading } from '@geist-ui/core'	×
2	import PropTypes from 'prop-types'	×
3	import Editor from '@monaco-editor/react'	×
4	import throttle from 'lodash.throttle'	×
5	import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'	×
6	import { shallowEqual, useDispatch, useSelector } from 'react-redux'	×
7	import { MonacoBinding } from 'y-monaco'	×
8	import { applicationConfig } from '../../config.js'	×
9	import * as collaborating from './collaborating.js'	×
10	import CollaborativeEditorStatus from './CollaborativeEditorStatus.jsx'	×
11
12	import styles from './CollaborativeTextEditor.module.scss'	×
13
14	const colors = [	×
15	// navy
16	'#70b8ff',	×
17	// blue
18	'#75bfff',	×
19	// aqua
20	'#7FDBFF',	×
21	// teal
22	'#39CCCC',	×
23	// olive
24	'#92d3b6',	×
25	// green
26	'#97e7a0',	×
27	// yellow
28	'#ffeb66',	×
29	// orange
30	'#ffbb80',	×
31	// red
32	'#ff726b',	×
33	// maroon
34	'#ff6666',	×
35	// fuchsia
36	'#f674d8',	×
37	// purple
38	'#e46ff6',	×
39	// gray
40	'#AAAAAA',	×
41	// silver
42	'#DDDDDD',	×
43	]	×
44
45	export default function CollaborativeTextEditor({	×
46	articleId,	×
47	collaborativeSessionCreatorId,	×
48	collaborativeSessionId,	×
49	onCollaborativeSessionStateUpdated,	×
50	}) {	×
51	const connectingRef = useRef(false)	×
52	const [dynamicStyles, setDynamicStyles] = useState('')	×
53	const [websocketStatus, setWebsocketStatus] = useState('')	×
54	const [collaborativeSessionState, setCollaborativeSessionState] = useState('')	×
55	const [yText, setYText] = useState(null)	×
56	const [awareness, setAwareness] = useState(null)	×
57	const { websocketEndpoint } = applicationConfig	×
58	const activeUser = useSelector(	×
59	(state) => ({	×
60	_id: state.activeUser._id,	×
61	email: state.activeUser.email,	×
62	displayName: state.activeUser.displayName,	×
63	username: state.activeUser.username,	×
64	}),	×
65	shallowEqual	×
66	)	×
67	const dispatch = useDispatch()	×
68	const editorRef = useRef()	×
69	const editorCursorPosition = useSelector(	×
70	(state) => state.editorCursorPosition,	×
71	shallowEqual	×
72	)	×
73
74	const options = useMemo(	×
75	() => ({	×
76	automaticLayout: true,	×
77	readOnly:	×
78	websocketStatus !== 'connected' \|\|	×
79	collaborativeSessionState !== 'started',	×
80	contextmenu: websocketStatus === 'connected',	×
81	autoClosingBrackets: 'never',	×
82	wordBasedSuggestions: false,	×
83	overviewRulerLanes: 0,	×
84	hideCursorInOverviewRuler: true,	×
85	overviewRulerBorder: false,	×
86	scrollBeyondLastLine: false,	×
87	wordWrap: 'on',	×
88	wrappingIndent: 'none',	×
89	minimap: {	×
90	enabled: false,	×
91	},	×
92	}),	×
93	[websocketStatus]	×
94	)	×
95
96	const handleUpdateArticleStructureAndStats = throttle(	×
97	({ text }) => {	×
98	dispatch({ type: 'UPDATE_ARTICLE_STATS', md: text })	×
99	dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: text })	×
100	},	×
101	250,	×
102	{ leading: false, trailing: true }	×
103	)	×
104
105	const writerInfo = useMemo(	×
106	() => ({	×
107	id: activeUser._id,	×
108	email: activeUser.email,	×
109	displayName: activeUser.displayName,	×
110	username: activeUser.username,	×
111	color: colors[Math.floor(Math.random() * 14)],	×
112	}),	×
113	[activeUser]	×
114	)	×
115
116	const handleWritersUpdated = useCallback(	×
117	({ states }) => {	×
118	const writers = Object.fromEntries(states)	×
119	dispatch({ type: 'UPDATE_ARTICLE_WRITERS', articleWriters: writers })	×
120	setDynamicStyles(	×
121	Object.entries(writers)	×
122	.map(([key, writer]) => {	×
123	const color = writer.user.color	×
124	return `	×
125	.yRemoteSelection-${key} {	×
126	background-color: ${color};	×
127	}
128	.yRemoteSelectionHead-${key} {	×
129	border-left: ${color} solid 2px;	×
130	border-top: ${color} solid 2px;	×
131	border-bottom: ${color} solid 2px;	×
132	}`
133	})	×
134	.join('\n')	×
135	)	×
136	},	×
137	[setDynamicStyles]	×
138	)	×
139
140	const handleWebsocketStatusUpdated = useCallback(	×
141	(status) => {	×
142	setWebsocketStatus(status)	×
143	},	×
144	[setWebsocketStatus]	×
145	)	×
146
147	const handleEditorDidMount = useCallback(	×
148	(editor) => {	×
149	editorRef.current = editor	×
150	new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)	×
151	},	×
152	[yText, awareness]	×
153	)	×
154
155	useEffect(() => {	×
156	if (connectingRef.current) {	×
157	return	×
158	}	×
159	connectingRef.current = true	×
160	const {	×
161	awareness,	×
162	doc: yDocument,	×
163	wsProvider,	×
164	} = collaborating.connect({	×
165	roomName: collaborativeSessionId,	×
166	websocketEndpoint,	×
167	user: writerInfo,	×
168	onChange: handleWritersUpdated,	×
169	onStatusUpdated: handleWebsocketStatusUpdated,	×
170	})	×
171	const yText = yDocument.getText('main')	×
172	const yState = yDocument.getText('state')	×
173	yText.observe(function () {	×
174	handleUpdateArticleStructureAndStats({ text: yText.toString() })	×
175	})	×
176	yState.observe(function () {	×
177	setCollaborativeSessionState(yState.toString())	×
178	onCollaborativeSessionStateUpdated({ state: yState.toString() })	×
179	})	×
180	setAwareness(awareness)	×
181	setYText(yText)	×
182	return () => {	×
183	connectingRef.current = false	×
184	awareness.destroy()	×
185	wsProvider.disconnect()	×
186	wsProvider.destroy()	×
187	}	×
188	}, [collaborativeSessionId, websocketEndpoint, writerInfo])	×
189
190	useEffect(() => {	×
191	const line = editorCursorPosition.lineNumber	×
192	const editor = editorRef.current	×
193	editor?.focus()	×
194	const endOfLineColumn = editor?.getModel()?.getLineMaxColumn(line + 1)	×
195	editor?.setPosition({ lineNumber: line + 1, column: endOfLineColumn })	×
196	editor?.revealLine(line + 1, 1) // smooth	×
197	}, [editorRef, editorCursorPosition])	×
198
199	if (!yText) {	×
200	return <Loading />	×
201	}	×
202
203	return (	×
204	<>	×
205	<style>{dynamicStyles}</style>	×
206	<CollaborativeEditorStatus	×
207	articleId={articleId}	×
208	collaborativeSessionState={collaborativeSessionState}	×
209	websocketStatus={websocketStatus}	×
210	collaborativeSessionCreatorId={collaborativeSessionCreatorId}	×
211	/>	×
212	<Editor	×
213	options={options}	×
214	className={styles.editor}	×
215	defaultLanguage="markdown"	×
216	onMount={handleEditorDidMount}	×
217	/>	×
218	</>	×
219	)
220	}	×
221
222	CollaborativeTextEditor.propTypes = {	×
223	articleId: PropTypes.string.isRequired,	×
224	collaborativeSessionId: PropTypes.string.isRequired,	×
225	collaborativeSessionCreatorId: PropTypes.string.isRequired,	×
226	onCollaborativeSessionStateUpdated: PropTypes.func,	×
227	}	×

EcrituresNumeriques / stylo / 12925854411

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous