• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

EcrituresNumeriques / stylo / 13987938500

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

push

github

web-flow
chore: remplace les modales Geist (#1358)

Remplace aussi <Loading> par notre composant.

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
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
}
×
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc