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

EcrituresNumeriques / stylo / 14472767041

15 Apr 2025 03:02PM UTC coverage: 33.491% (+2.1%) from 31.374%
14472767041

push

github

ggrossetie
fix: surcharge le style de liens externes pour ne pas afficher l'icone par défaut

515 of 777 branches covered (66.28%)

Branch coverage included in aggregate %.

5016 of 15738 relevant lines covered (31.87%)

2.3 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'
×
7
import { useArticleVersion } from '../../hooks/article.js'
×
8
import { useCollaboration } from '../../hooks/collaboration.js'
×
9
import Alert from '../molecules/Alert.jsx'
×
10

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

16
import styles from './CollaborativeTextEditor.module.scss'
×
17

18
/**
19
 * @param {object} props
20
 * @param {string} props.articleId
21
 * @param {string|undefined} props.versionId
22
 * @returns {Element}
23
 */
24
export default function CollaborativeTextEditor({ articleId, versionId }) {
×
25
  const { yText, awareness, websocketStatus, dynamicStyles } = useCollaboration(
×
26
    { articleId, versionId }
×
27
  )
×
28
  const { version, error, isLoading } = useArticleVersion({ versionId })
×
29
  const dispatch = useDispatch()
×
30
  const editorRef = useRef(null)
×
31
  const editorCursorPosition = useSelector(
×
32
    (state) => state.editorCursorPosition,
×
33
    shallowEqual
×
34
  )
×
35

36
  const hasVersion = useMemo(() => !!versionId, [versionId])
×
37

38
  const options = useMemo(
×
39
    () => ({
×
40
      ...defaultEditorOptions,
×
41
      contextmenu: hasVersion ? false : websocketStatus === 'connected',
×
42
      readOnly: hasVersion ? true : websocketStatus !== 'connected',
×
43
    }),
×
44
    [websocketStatus, hasVersion]
×
45
  )
×
46

47
  const handleUpdateArticleStructureAndStats = throttle(
×
48
    ({ text }) => {
×
49
      dispatch({ type: 'UPDATE_ARTICLE_STATS', md: text })
×
50
      dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: text })
×
51
    },
×
52
    250,
×
53
    { leading: false, trailing: true }
×
54
  )
×
55

56
  const handleCollaborativeEditorDidMount = useCallback(
×
57
    (editor) => {
×
58
      editorRef.current = editor
×
59
      if (yText && awareness) {
×
60
        new MonacoBinding(
×
61
          yText,
×
62
          editor.getModel(),
×
63
          new Set([editor]),
×
64
          awareness
×
65
        )
×
66
      }
×
67
    },
×
68
    [yText, awareness]
×
69
  )
×
70

71
  const handleEditorDidMount = useCallback((editor) => {
×
72
    editorRef.current = editor
×
73
  }, [])
×
74

75
  let timeoutId
×
76
  useEffect(() => {
×
77
    if (yText) {
×
78
      yText.observe(function () {
×
79
        dispatch({
×
80
          type: 'UPDATE_ARTICLE_WORKING_COPY_STATUS',
×
81
          status: 'syncing',
×
82
        })
×
83
        if (timeoutId) {
×
84
          clearTimeout(timeoutId)
×
85
        }
×
86
        timeoutId = setTimeout(() => {
×
87
          dispatch({
×
88
            type: 'UPDATE_ARTICLE_WORKING_COPY_STATUS',
×
89
            status: 'synced',
×
90
          })
×
91
        }, 4000)
×
92

93
        handleUpdateArticleStructureAndStats({ text: yText.toString() })
×
94
      })
×
95
    }
×
96
  }, [yText])
×
97

98
  useEffect(() => {
×
99
    if (version) {
×
100
      dispatch({ type: 'UPDATE_ARTICLE_STATS', md: version.md })
×
101
      dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md: version.md })
×
102
    }
×
103
  }, [version])
×
104

105
  useEffect(() => {
×
106
    const line = editorCursorPosition.lineNumber
×
107
    const editor = editorRef.current
×
108
    editor?.focus()
×
109
    const endOfLineColumn = editor?.getModel()?.getLineMaxColumn(line + 1)
×
110
    editor?.setPosition({ lineNumber: line + 1, column: endOfLineColumn })
×
111
    editor?.revealLineNearTop(line + 1, 1) // smooth
×
112
  }, [editorRef, editorCursorPosition])
×
113

114
  if (!yText && !version) {
×
115
    return <Loading />
×
116
  }
×
117

118
  if (isLoading) {
×
119
    return <Loading />
×
120
  }
×
121

122
  if (error) {
×
123
    return <Alert message={error.message} />
×
124
  }
×
125

126
  return (
×
127
    <>
×
128
      <style>{dynamicStyles}</style>
×
129
      <CollaborativeEditorStatus versionId={versionId} />
×
130
      <div className={styles.inlineStatus}>
×
131
        <CollaborativeEditorWebSocketStatus status={websocketStatus} />
×
132
      </div>
×
133
      {version && (
×
134
        <Editor
×
135
          width={'100%'}
×
136
          height={'auto'}
×
137
          value={version.md}
×
138
          options={options}
×
139
          className={styles.editor}
×
140
          defaultLanguage="markdown"
×
141
          onMount={handleEditorDidMount}
×
142
        />
×
143
      )}
144
      <div
×
145
        className={clsx(styles.collaborativeEditor, versionId && styles.hidden)}
×
146
      >
147
        <Editor
×
148
          width={'100%'}
×
149
          height={'auto'}
×
150
          options={options}
×
151
          className={styles.editor}
×
152
          defaultLanguage="markdown"
×
153
          onMount={handleCollaborativeEditorDidMount}
×
154
        />
×
155
      </div>
×
156
    </>
×
157
  )
158
}
×
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