14067013312

Committed 25 Mar 2025 06:09PM UTC coverage: 31.801%. First build

Build # 14067013312

Build Type

Pull #1364

github

Committed by

web-flow

Commit Message

Merge 7897facea into 0ab3e35d3

Pull Request Pull Request #1364: chore: ajout d'une menu sur l'interface d'écriture collaborative

Run Details

470 of 703 branches covered (66.86%)

Branch coverage included in aggregate %.

3 of 281 new or added lines in 9 files covered. (1.07%)

4483 of 14872 relevant lines covered (30.14%)

2.26 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 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 Loading from '../molecules/Loading.jsx'
import * as collaborating from './collaborating.js'
import defaultEditorOptions from '../Write/providers/monaco/options.js'
import CollaborativeEditorStatus from './CollaborativeEditorStatus.jsx'
import CollaborativeEditorWebSocketStatus from './CollaborativeEditorWebSocketStatus.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(null)
  const editorCursorPosition = useSelector(
    (state) => state.editorCursorPosition,
    shallowEqual
  )

  const options = useMemo(
    () => ({
      ...defaultEditorOptions,
      contextmenu: websocketStatus === 'connected',
      readOnly:
        websocketStatus !== 'connected' ||
        collaborativeSessionState !== 'started',
    }),
    [websocketStatus, collaborativeSessionState]
  )

  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?.revealLineNearTop(line + 1, 1) // smooth
  }, [editorRef, editorCursorPosition])

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

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

EcrituresNumeriques / stylo / 14067013312

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