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

EcrituresNumeriques / stylo / 14591892548

22 Apr 2025 09:52AM UTC coverage: 37.471% (+1.0%) from 36.441%
14591892548

push

github

web-flow
feat: supprime l'éditeur de texte legacy (#1426)

Co-authored-by: Thomas Parisot <138627+thom4parisot@users.noreply.github.com>

530 of 757 branches covered (70.01%)

Branch coverage included in aggregate %.

3 of 57 new or added lines in 15 files covered. (5.26%)

214 existing lines in 12 files now uncovered.

5221 of 14591 relevant lines covered (35.78%)

2.49 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 Editor from '@monaco-editor/react'
×
2
import clsx from 'clsx'
×
3
import throttle from 'lodash.throttle'
×
4
import React, { useCallback, useEffect, useMemo, useRef } from 'react'
×
5
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
×
6
import { MonacoBinding } from 'y-monaco'
×
NEW
7
import { useArticleVersion, useEditableArticle } from '../../hooks/article.js'
×
NEW
8
import { useBibliographyCompletion } from '../../hooks/bibliography.js'
×
9
import { useCollaboration } from '../../hooks/collaboration.js'
×
10
import Alert from '../molecules/Alert.jsx'
×
11

12
import Loading from '../molecules/Loading.jsx'
×
13
import defaultEditorOptions from '../Write/providers/monaco/options.js'
×
14
import CollaborativeEditorStatus from './CollaborativeEditorStatus.jsx'
×
15
import CollaborativeEditorWebSocketStatus from './CollaborativeEditorWebSocketStatus.jsx'
×
16

17
import styles from './CollaborativeTextEditor.module.scss'
×
18
import MonacoEditor from '../molecules/MonacoEditor.jsx'
×
19

20
/**
21
 * @param {object} props
22
 * @param {string} props.articleId
23
 * @param {string|undefined} props.versionId
24
 * @returns {Element}
25
 */
26
export default function CollaborativeTextEditor({ articleId, versionId }) {
×
27
  const { yText, awareness, websocketStatus, dynamicStyles } = useCollaboration(
×
28
    { articleId, versionId }
×
29
  )
×
30
  const { version, error, isLoading } = useArticleVersion({ versionId })
×
NEW
31
  const { provider: bibliographyCompletionProvider } =
×
NEW
32
    useBibliographyCompletion()
×
NEW
33
  const { bibliography } = useEditableArticle({
×
NEW
34
    articleId,
×
NEW
35
    versionId,
×
NEW
36
  })
×
37
  const dispatch = useDispatch()
×
38
  const editorRef = useRef(null)
×
39
  const editorCursorPosition = useSelector(
×
40
    (state) => state.editorCursorPosition,
×
41
    shallowEqual
×
42
  )
×
43

44
  const hasVersion = useMemo(() => !!versionId, [versionId])
×
45

46
  const options = useMemo(
×
47
    () => ({
×
48
      ...defaultEditorOptions,
×
49
      contextmenu: hasVersion ? false : websocketStatus === 'connected',
×
50
      readOnly: hasVersion ? true : websocketStatus !== 'connected',
×
51
    }),
×
52
    [websocketStatus, hasVersion]
×
53
  )
×
54

55
  const handleUpdateArticleStructureAndStats = throttle(
×
56
    ({ text }) => {
×
57
      dispatch({ type: 'UPDATE_ARTICLE_STATS', md: text })
×
58
      dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: text })
×
59
    },
×
60
    250,
×
61
    { leading: false, trailing: true }
×
62
  )
×
63

64
  const handleCollaborativeEditorDidMount = useCallback(
×
NEW
65
    (editor, monaco) => {
×
66
      editorRef.current = editor
×
NEW
67
      const completionProvider = bibliographyCompletionProvider.register(monaco)
×
NEW
68
      editor.onDidDispose(() => completionProvider.dispose())
×
69
      if (yText && awareness) {
×
70
        new MonacoBinding(
×
71
          yText,
×
72
          editor.getModel(),
×
73
          new Set([editor]),
×
74
          awareness
×
75
        )
×
76
      }
×
77
    },
×
78
    [yText, awareness]
×
79
  )
×
80

81
  const handleEditorDidMount = useCallback((editor) => {
×
82
    editorRef.current = editor
×
83
  }, [])
×
84

85
  let timeoutId
×
86
  useEffect(() => {
×
87
    if (yText) {
×
88
      yText.observe(function () {
×
89
        dispatch({
×
90
          type: 'UPDATE_ARTICLE_WORKING_COPY_STATUS',
×
91
          status: 'syncing',
×
92
        })
×
93
        if (timeoutId) {
×
94
          clearTimeout(timeoutId)
×
95
        }
×
96
        timeoutId = setTimeout(() => {
×
97
          dispatch({
×
98
            type: 'UPDATE_ARTICLE_WORKING_COPY_STATUS',
×
99
            status: 'synced',
×
100
          })
×
101
        }, 4000)
×
102

103
        handleUpdateArticleStructureAndStats({ text: yText.toString() })
×
104
      })
×
105
    }
×
106
  }, [yText])
×
107

108
  useEffect(() => {
×
109
    if (version) {
×
110
      dispatch({ type: 'UPDATE_ARTICLE_STATS', md: version.md })
×
111
      dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: version.md })
×
112
    }
×
113
  }, [version])
×
114

NEW
115
  useEffect(() => {
×
NEW
116
    if (bibliography) {
×
NEW
117
      bibliographyCompletionProvider.bibTeXEntries = bibliography.entries
×
NEW
118
    }
×
NEW
119
  }, [bibliography])
×
120

121
  useEffect(() => {
×
122
    const line = editorCursorPosition.lineNumber
×
123
    const editor = editorRef.current
×
124
    editor?.focus()
×
125
    const endOfLineColumn = editor?.getModel()?.getLineMaxColumn(line + 1)
×
126
    editor?.setPosition({ lineNumber: line + 1, column: endOfLineColumn })
×
127
    editor?.revealLineNearTop(line + 1, 1) // smooth
×
128
  }, [editorRef, editorCursorPosition])
×
129

130
  if (!yText && !version) {
×
131
    return <Loading />
×
132
  }
×
133

134
  if (isLoading) {
×
135
    return <Loading />
×
136
  }
×
137

138
  if (error) {
×
139
    return <Alert message={error.message} />
×
140
  }
×
141

142
  return (
×
143
    <>
×
144
      <style>{dynamicStyles}</style>
×
145
      <CollaborativeEditorStatus versionId={versionId} />
×
146
      <div className={styles.inlineStatus}>
×
147
        <CollaborativeEditorWebSocketStatus status={websocketStatus} />
×
148
      </div>
×
149
      {version && (
×
150
        <MonacoEditor
×
151
          width={'100%'}
×
152
          height={'auto'}
×
153
          value={version.md}
×
154
          options={options}
×
155
          className={styles.editor}
×
156
          defaultLanguage="markdown"
×
157
          onMount={handleEditorDidMount}
×
158
        />
×
159
      )}
160
      <div
×
161
        className={clsx(styles.collaborativeEditor, versionId && styles.hidden)}
×
162
      >
163
        <MonacoEditor
×
164
          width={'100%'}
×
165
          height={'auto'}
×
166
          options={options}
×
167
          className={styles.editor}
×
168
          defaultLanguage="markdown"
×
169
          onMount={handleCollaborativeEditorDidMount}
×
170
        />
×
171
      </div>
×
172
    </>
×
173
  )
174
}
×
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