Qu'est-ce que l'édition collaborative en temps réel ?

L'édition collaborative en temps réel permet à plusieurs personnes de travailler sur le même document simultanément, avec les modifications de chaque personne instantanément visibles pour tous les autres. Les premiers systèmes utilisaient la Transformation Opérationnelle (OT) — une technique qui réordonne les modifications conflictuelles à la volée — mais l'OT nécessite un serveur central pour arbitrer chaque modification. Les systèmes modernes comme Yjs utilisent les Types de Données Répliqués sans Conflit (CRDTs) : un cadre mathématique où deux répliques quelconques peuvent être fusionnées dans n'importe quel ordre et convergent toujours vers le même résultat, sans avoir besoin d'une autorité centrale pour décider qui « gagne ».

Les CRDTs rendent l'édition hors ligne naturelle : les utilisateurs peuvent continuer à éditer même lorsqu'ils sont déconnectés, et leurs modifications fusionnent proprement lorsqu'ils se reconnectent. C'est pourquoi les éditeurs collaboratifs en temps réel construits sur les CRDTs semblent instantanés — les modifications sont appliquées localement en premier et synchronisées avec les pairs après, plutôt que d'attendre un aller-retour vers un serveur avant d'apparaître à l'écran.

Description de l'outil

L'Éditeur de Code Collaboratif est un éditeur de code multijoueur en temps réel alimenté par Yjs et CodeMirror 6. Partagez l'URL de la salle avec vos coéquipiers et tous les membres de la salle éditent le même document ensemble, avec le curseur et la sélection de chaque personne affichés dans un indicateur étiqueté.

L'éditeur supporte la coloration syntaxique pour des dizaines de langages de programmation, sélectionnables via un menu déroulant de langue partagé — changer la langue dans un navigateur la met à jour pour tous les membres de la salle instantanément. Les fichiers peuvent être chargés depuis votre disque local avec le bouton Ouvrir un fichier et téléchargés avec Enregistrer le fichier.

Fonctionnalités

  • Curseurs multi-utilisateurs en direct : Le curseur et la sélection de chaque collaborateur sont affichés avec une étiquette codée par couleur et nommée ; plusieurs curseurs à la même position sont regroupés en un seul indicateur « N utilisateurs » pour réduire le bruit visuel.
  • Sélection de langue partagée : Le langage de programmation actif est persisté dans la salle afin que tous les participants voient toujours la même coloration syntaxique, et les nouveaux arrivants obtiennent immédiatement l'état correct.
  • Ouvrir et enregistrer les fichiers localement : Chargez n'importe quel fichier source du disque directement dans l'éditeur partagé, ou téléchargez le document actuel en tant que fichier avec l'extension correcte.

Comment ça marche

Lorsque vous rejoignez une salle, l'éditeur crée un document Yjs avec un nœud Y.Text partagé représentant le contenu du fichier. Chaque frappe est codée en tant que mise à jour Yjs binaire compacte, sérialisée en Base64, et diffusée sur une salle WebSocket. Tous les pairs connectés appliquent la mise à jour à leur propre réplique ; en raison de la garantie CRDT, toutes les répliques convergent vers le même texte indépendamment de l'ordre d'arrivée des mises à jour.

Les positions du curseur et de la sélection sont partagées via une couche Awareness légère qui achemine les données de position via la même salle WebSocket. L'état complet du document est débité et écrit dans le stockage persistant de la salle chaque seconde, afin que les utilisateurs qui rejoignent après le début de la session reçoivent le document actuel immédiatement.

Options expliquées

  • Menu déroulant de langue — Sélectionne le langage de coloration syntaxique pour l'éditeur. Le choix est diffusé à tous les membres de la salle afin que tous voient une coloration cohérente. Le menu déroulant est désactivé jusqu'à ce que vous soyez connecté à une salle.
  • Ouvrir un fichier — Ouvre un sélecteur de fichier local et charge le contenu textuel du fichier sélectionné dans le document Yjs partagé, remplaçant le contenu actuel pour tous les membres de la salle.
  • Enregistrer le fichier — Télécharge le contenu actuel de l'éditeur en tant que fichier. L'extension du fichier est automatiquement choisie en fonction du langage sélectionné.
  • Thème — L'éditeur suit votre préférence système sombre/clair (stockée dans localStorage). Basculez votre thème OS ou navigateur pour passer entre les thèmes d'éditeur sombre et clair de style VS Code.

Limitations

  • Une connexion WebSocket active au serveur relais est requise pour la synchronisation ; si la connexion est perdue, les modifications effectuées hors ligne se resynchroniseront automatiquement lors de la reconnexion.
  • Il n'y a pas d'historique de version persistant — une fois qu'une session se termine et que la salle est fermée, le document disparaît à moins que vous l'ayez enregistré localement avec le bouton Enregistrer le fichier.
  • Les fichiers binaires (images, binaires compilés, etc.) ne peuvent pas être chargés ; l'éditeur fonctionne uniquement avec les fichiers source en texte brut.
  • Cet outil est en bêta ; la stabilité de la salle et le nombre maximum d'utilisateurs simultanés peuvent être limités.

Conseils

  • Partagez l'URL complète de la salle depuis la barre d'adresse de votre navigateur pour inviter des collaborateurs — l'ID de la salle est codé dans l'URL.
  • Enregistrez une copie locale avec Enregistrer le fichier à la fin d'une session ; les données de la salle ne sont pas garanties de persister indéfiniment.
  • Si l'étiquette du curseur d'un collaborateur couvre du code important, l'étiquette bascule automatiquement vers la gauche lorsqu'elle est près du bord droit de l'éditeur.