14199795070

Committed 01 Apr 2025 03:32PM UTC coverage: 33.016% (+1.1%) from 31.927%

Build # 14199795070

Build Type

push

github

Committed by

ggrossetie

Commit Message

fix: supprime le observe sur le state de l'éditeur (il n'y a plus de state)

Run Details

474 of 709 branches covered (66.85%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

127 existing lines in 8 files now uncovered.

4484 of 14308 relevant lines covered (31.34%)

2.35 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 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 defaultEditorOptions from '../Write/providers/monaco/options.js'
import * as collaborating from './collaborating.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',
]

/**
 * @param props
 * @param props.articleId
 * @return {Element}
 */
export default function CollaborativeTextEditor({ articleId }) {
  const connectingRef = useRef(false)
  const [dynamicStyles, setDynamicStyles] = useState('')
  const [websocketStatus, setWebsocketStatus] = 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',
    }),
    [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: articleId,
      websocketEndpoint,
      user: writerInfo,
      onChange: handleWritersUpdated,
      onStatusUpdated: handleWebsocketStatusUpdated,
    })
    const yText = yDocument.getText('main')
    yText.observe(function () {
      handleUpdateArticleStructureAndStats({ text: yText.toString() })
    })
    setAwareness(awareness)
    setYText(yText)
    return () => {
      connectingRef.current = false
      awareness.destroy()
      if (wsProvider.wsconnected) {
        wsProvider.disconnect()
        wsProvider.destroy()
      }
    }
  }, [articleId, 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 />
      <div className={styles.inlineStatus}>
        <CollaborativeEditorWebSocketStatus status={websocketStatus} />
      </div>
      <Editor
        width={'100%'}
        height={'auto'}
        options={options}
        className={styles.editor}
        defaultLanguage="markdown"
        onMount={handleEditorDidMount}
      />
    </>
  )
}

1	import Editor from '@monaco-editor/react'	×
2	import throttle from 'lodash.throttle'	×
3	import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'	×
4	import { shallowEqual, useDispatch, useSelector } from 'react-redux'	×
5	import { MonacoBinding } from 'y-monaco'	×
6	import { applicationConfig } from '../../config.js'	×
7	import Loading from '../molecules/Loading.jsx'	×
8	import defaultEditorOptions from '../Write/providers/monaco/options.js'	×
9	import * as collaborating from './collaborating.js'	×
10	import CollaborativeEditorStatus from './CollaborativeEditorStatus.jsx'	×
11	import CollaborativeEditorWebSocketStatus from './CollaborativeEditorWebSocketStatus.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	/**
47	* @param props
48	* @param props.articleId
49	* @return {Element}
50	*/
NEW 51	export default function CollaborativeTextEditor({ articleId }) {	×
52	const connectingRef = useRef(false)	×
53	const [dynamicStyles, setDynamicStyles] = useState('')	×
54	const [websocketStatus, setWebsocketStatus] = 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(null)	×
69	const editorCursorPosition = useSelector(	×
UNCOV 70	(state) => state.editorCursorPosition,	×
71	shallowEqual	×
72	)	×
73
74	const options = useMemo(	×
75	() => ({	×
76	...defaultEditorOptions,	×
77	contextmenu: websocketStatus === 'connected',	×
78	readOnly: websocketStatus !== 'connected',	×
79	}),	×
80	[websocketStatus]	×
UNCOV 81	)	×
82
83	const handleUpdateArticleStructureAndStats = throttle(	×
84	({ text }) => {	×
85	dispatch({ type: 'UPDATE_ARTICLE_STATS', md: text })	×
86	dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: text })	×
87	},	×
88	250,	×
89	{ leading: false, trailing: true }	×
UNCOV 90	)	×
91
92	const writerInfo = useMemo(	×
93	() => ({	×
94	id: activeUser._id,	×
95	email: activeUser.email,	×
96	displayName: activeUser.displayName,	×
97	username: activeUser.username,	×
98	color: colors[Math.floor(Math.random() * 14)],	×
99	}),	×
100	[activeUser]	×
UNCOV 101	)	×
102
103	const handleWritersUpdated = useCallback(	×
104	({ states }) => {	×
105	const writers = Object.fromEntries(states)	×
106	dispatch({ type: 'UPDATE_ARTICLE_WRITERS', articleWriters: writers })	×
107	setDynamicStyles(	×
108	Object.entries(writers)	×
109	.map(([key, writer]) => {	×
110	const color = writer.user.color	×
111	return `	×
112	.yRemoteSelection-${key} {	×
UNCOV 113	background-color: ${color};	×
114	}
115	.yRemoteSelectionHead-${key} {	×
116	border-left: ${color} solid 2px;	×
117	border-top: ${color} solid 2px;	×
UNCOV 118	border-bottom: ${color} solid 2px;	×
119	}`
120	})	×
121	.join('\n')	×
122	)	×
123	},	×
124	[setDynamicStyles]	×
UNCOV 125	)	×
126
127	const handleWebsocketStatusUpdated = useCallback(	×
128	(status) => {	×
129	setWebsocketStatus(status)	×
130	},	×
131	[setWebsocketStatus]	×
UNCOV 132	)	×
133
134	const handleEditorDidMount = useCallback(	×
135	(editor) => {	×
136	editorRef.current = editor	×
137	new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)	×
138	},	×
139	[yText, awareness]	×
UNCOV 140	)	×
141
142	useEffect(() => {	×
143	if (connectingRef.current) {	×
144	return	×
145	}	×
146	connectingRef.current = true	×
147	const {	×
148	awareness,	×
149	doc: yDocument,	×
150	wsProvider,	×
151	} = collaborating.connect({	×
152	roomName: articleId,	×
153	websocketEndpoint,	×
154	user: writerInfo,	×
155	onChange: handleWritersUpdated,	×
156	onStatusUpdated: handleWebsocketStatusUpdated,	×
157	})	×
158	const yText = yDocument.getText('main')	×
159	yText.observe(function () {	×
160	handleUpdateArticleStructureAndStats({ text: yText.toString() })	×
161	})	×
162	setAwareness(awareness)	×
163	setYText(yText)	×
164	return () => {	×
165	connectingRef.current = false	×
166	awareness.destroy()	×
167	if (wsProvider.wsconnected) {	×
168	wsProvider.disconnect()	×
169	wsProvider.destroy()	×
170	}	×
UNCOV 171	}	×
172	}, [articleId, websocketEndpoint, writerInfo])	×
173
174	useEffect(() => {	×
175	const line = editorCursorPosition.lineNumber	×
176	const editor = editorRef.current	×
177	editor?.focus()	×
178	const endOfLineColumn = editor?.getModel()?.getLineMaxColumn(line + 1)	×
179	editor?.setPosition({ lineNumber: line + 1, column: endOfLineColumn })	×
UNCOV 180	editor?.revealLineNearTop(line + 1, 1) // smooth	×
181	}, [editorRef, editorCursorPosition])	×
182
183	if (!yText) {	×
UNCOV 184	return <Loading />	×
185	}	×
186
187	return (	×
188	<>	×
189	<style>{dynamicStyles}</style>	×
190	<CollaborativeEditorStatus />	×
191	<div className={styles.inlineStatus}>	×
192	<CollaborativeEditorWebSocketStatus status={websocketStatus} />	×
193	</div>	×
194	<Editor	×
195	width={'100%'}	×
196	height={'auto'}	×
197	options={options}	×
198	className={styles.editor}	×
199	defaultLanguage="markdown"	×
200	onMount={handleEditorDidMount}	×
201	/>	×
202	</>	×
203	)
204	}	×

EcrituresNumeriques / stylo / 14199795070

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