13987938500

Committed 21 Mar 2025 08:48AM UTC coverage: 31.659% (+0.6%) from 31.087%

Build # 13987938500

Build Type

push

github

Committed by

web-flow

Commit Message

chore: remplace les modales Geist (#1358)

Remplace aussi <Loading> par notre composant.

Run Details

464 of 686 branches covered (67.64%)

Branch coverage included in aggregate %.

42 of 569 new or added lines in 36 files covered. (7.38%)

27 existing lines in 18 files now uncovered.

4396 of 14665 relevant lines covered (29.98%)

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

EcrituresNumeriques / stylo / 13987938500

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