Pendant de nombreuses années, j'ai été hanté par cette démangeaison - en essayant de trouver l'éditeur de texte «parfait» pour la collaboration. Mais pas n'importe quel éditeur de texte qui prend en charge la collaboration, oh non, ma tâche est de trouver (enfin, au moins chercher) des éditeurs de texte ouverts avec un travail de groupe en temps réel (c'est-à-dire non seulement du texte brut, mais aussi contenu structuré). Ainsi, cet article se concentre sur une catégorie assez niche d'outils open source et les technologies sur lesquelles ils fonctionnent. Si vos intérêts sont plus larges, vous pouvez vous référer à cette liste d'éditeurs constamment mise à jour .

Alors. J'ai sauté plusieurs fois d'une falaise et plongé dans une mer presque infinie de programmes de collaboration en temps réel. En volant vers le bas, cette plongée revigorante au fond de la piscine, je la connais déjà bien. Habituellement, cela commence par une excitation et une surprise initiales ( saut ) dans les nouvelles technologies et recherches de bas niveau, puis vient un sentiment de congestion et un désir d'émerger ( hé, assez profond ici ) et d'explorer la partie appliquée, puis la période où mes pensées sont mieux décrites avec la phrase: "Suis-je vraiment si stupide pour ça?" (très probablement), car généralement la documentation, la démo et le code ne correspondent pas ou n'ont pas de sens, le composant de collaboration sur le serveur ne démarre pas et il y a des situations limites où plus de deux utilisateurs entrent le même mot, et ... c'est tout ( surface, à bout de souffle ).

Après cela, il est difficile de soulever à nouveau le sujet, la prochaine étape est une sorte d'hiver de réflexion, dans un exercice, en attente de conditions météorologiques extrêmes, lorsque je laisse généralement le code semi-fini fonctionner pendant des mois ... ou des années. Jusqu'à ce que nous nous rencontrions à nouveau, un type de données répliqué sans conflit!


Fig. 1. Bond

Le fait est qu'en 2017 j'étais tellement enthousiasmé par les perspectives d'un algorithme (une sorte de CRDT ) décrit dans un article de recherche que j'ai passé plusieurs jours et l'ai implémenté en JavaScript , seulement pour découvrir qu'il y a une situation limite dans l'article scientifique pour lequel aucune solution n'est donnée (enfin ... mais peut-être tout de même?). À ce moment-là, je me suis tourné vers l'auteur, mais je n'ai pas reçu de réponse, et j'ai constaté que cette situation frontalière particulière était considérée dans un algorithme similaire par une autre équipe, mais bon sang, à cause de ces subtilités dans la mise en œuvre, je pourrais peut-être la transférer à Lisp ... SO STOP! Que se passe-t-il ici? Bien sûr, je ne veux pas introduire un nouvel algorithme à partir de travaux de recherche et résoudre ses problèmes! Qu'est-ce que je fais, comment suis-je arrivé ici? Rembobinons!

Ce dont j'ai vraiment besoin (et probablement vous aussi, cher lecteur), c'est d'un éditeur plug-and-play, un produit fini . Ce qui résout le problème de la collaboration en temps réel. Ce qui permet à plusieurs utilisateurs connectés, à des milliers de kilomètres l'un de l'autre, de modifier un document structuré en appuyant sur les touches du clavier et de voir les modifications de chacun sur leur écran. C’est tout. Cependant, les éditeurs sont difficiles ... et je n'ai tout simplement pas pu trouver un tel outil.

Jusqu'ici.

L'année 2019 est arrivée (la démangeaison est revenue avec force ), et cette fois non seulement l'éditeur magique est apparu, mais en fait même deux candidats pour avoir satisfait aux spécifications tant attendues. Au départ, je voulais survoler le terrain avec vous et lister presque tous les éditeurs de texte pour la collaboration, mais cela ne semble pas ajouter beaucoup de valeur . Au lieu de cela, concentrons-nous sur deux éditeurs qui peuvent devenir «de cette façon».

Mais il y a deux éditeurs, et vous devez faire un choix - ce serait bien de considérer objectivement celui qui est vraiment le mieux adapté. J'offre un système de classification profondément scientifique avec les catégories suivantes (en utilisant le kiwi comme unité standard de bien):

1. Licence ouverte : ajoute 1 kiwi (c'est aussi un critère d'exclusion)
   
2. Prise en charge de l' image : ajoute 1 kiwi
   
3. Support de table : ajoute 1 kiwi
   
4. Prise en charge de la liste : ajoute 1 kiwi
   
5. Support mathématique : ajoute 1 kiwi
   
6. Prise en charge de la collaboration en temps réel : ajoute 1 kiwi
   
7. Composants serveur disponibles: 1 kiwi
   
8. Prise en charge du curseur et des surlignages à distance : 1 Kiwi (c'est-à-dire que vous pouvez voir les curseurs d'autres utilisateurs)
   
9. Travailler hors ligne : 1 kiwi (c'est assez difficile à déterminer)
   
10. Expérience de production: 1 Kiwi
    
11. Support mobile : 1 Kiwi

Avec un tel système de notation, l'éditeur peut obtenir un maximum de 11 unités de kiwi. Commençons!

Ckeditor 5

Figure 2. Interface CKEditor 5 (l'une des options possibles), source

Commençons par CKEditor 5, la dernière version d'une large gamme d'éditeurs de qualité . Il est beau. Je sais, je sais que ce n'est pas un critère, et cela n'a pas vraiment d'importance (et nous ne sommes peut-être même pas d'accord), mais je n'avais qu'à dire sur sa beauté. Donc, cet éditeur prend beaucoup de kiwi: il est sous licence GPL ( quelques discussions sur les limitations ici ), (+1), prend en charge les images, les tableaux, les listes (+3), les mathématiques sont prises en charge par le plugin (+1) et il prend également en charge la collaboration en temps réel avec le curseur supprimé et les sélections (+2). Les créateurs de CKEditor ont écrit un article de blog détaillé et étonnant sur la façon dont ils l'ont développé à l' aide de transformations opérationnelles.

Cependant, je n'ai pas pu trouver l'implémentation de serveur nécessaire pour une collaboration en temps réel, et toute la documentation indique le besoin obligatoire de leur service cloud et de leur composant (payant), même dans les projets compatibles avec la GPL.

Le niveau de prise en charge hors ligne est difficile à déterminer , mais il semble qu'il ne soit pas complètement complet (par exemple, l'éditeur peut supporter une connexion brièvement interrompue, mais pas pendant plusieurs jours de travail hors ligne). Probablement un demi-kiwi? Il en va de même pour le support mobile, il y a aussi des travaux sur le support complet (+0,5). Et le dernier moment, CKEditor est certainement utilisé dans la production, mais je n'ai pas pu trouver une liste de produits basés sur lui (+0,5).

Un bon éditeur, mais le manque d'un serveur de collaboration open source abordable est vraiment déprimant.

Note complète: 8.5 / 11

Éditeur Atlaskit

Fig. 3. Éditeur Atlaskit par Atlassian

Il y a environ un an, Atlassian a lancé le système open source Atlaskit Design , et de nombreux atouts sont venus avec, y compris un éditeur complet et prêt à l'emploi basé sur ProseMirror . J'ai déjà l'impression que c'est peut-être l'éditeur que nous recherchions! Il est publié sous la licence Apache 2.0, selon beaucoup, comme une licence open source très permissive (+1 kiwi). Il prend non seulement en charge les images, les tableaux et les listes, mais les supporte exceptionnellement bien (+3 kiwi)! L'implémentation des tableaux, qui fait très défaut à la plupart des éditeurs, est excellente ici:


Fig. 4. Gestion des tables dans Atlaskit Editor

Malheureusement, les mathématiques ne sont pas prises en charge, mais l'éditeur lui-même est basé sur ProseMirror, il ne devrait donc pas être un problème d'y ajouter une solution existante (+0,5). Il prend définitivement en charge la collaboration en temps réel avec des curseurs et des sélections distants (+2), c'est l'un des meilleurs exemples d'interface utilisateur de la prise en charge que j'ai jamais vu (par exemple, les curseurs distants sont obscurcis s'ils se chevauchent avec les vôtres, et d'autres excellents détails de mise en œuvre ) De plus, d'après mes tests, le support hors ligne semble très solide (+1) - cela est probablement dû à l'approche de «compétence centrale» que ProseMirror utilise pour la collaboration . Wow, nous avons déjà atteint 7,5 kiwis, et bien d'autres points! Allez-y!

Malheureusement, c'est ici que nous sommes confrontés à une dure réalité. Comme CKEditor, aucune implémentation côté serveur n'est disponible pour la collaboration en temps réel. Les gens paresseux. Grande déception. Je me demande si cela peut être corrigé? ..

Dans tous les cas, si vous continuez à descendre selon les critères, alors tout le reste vaut le qiwi: il est définitivement utilisé en production (millions d'utilisateurs), et il a un support mobile (+2). Juste au moment où j'allais annoncer le gagnant (un total de 9,5 kiwis) et publier ce post, quelque chose d'autre est apparu. Il s'avère que les logos et badges utilisés dans l'éditeur et de nombreux autres composants Atlaskit sont sous licence sous la licence ADG très restrictive, qui stipule que vous ne pouvez pas les utiliser en dehors de l'univers Atlassian. Cependant, les mêmes icônes sont largement utilisées et étroitement intégrées dans l'éditeur. Major numéro deux, et je leur prends le kiwi. Nous sommes revenus à 8.5, et si vous comptez, vous voyez que le résultat est maintenant le même. Et il est final.

Maintenant, si vous pouviez faire quelque chose avec ces icônes ...

Je pensais qu'après toutes les dernières avancées dans les éditeurs de texte en ligne, il serait très triste de rester avec deux grands éditeurs avec des fonctionnalités incroyables que vous ne pouvez toujours pas utiliser dans les projets open source - soit en raison de problèmes de licence, du manque de blocs de construction accessibles, ou à la fois cela et un autre.

Par conséquent, j'ai d'abord développé le côté serveur (basé sur PostgreSQL, le framework PubSweet et le mix REST / WebSockets), le code est disponible ici . C'est assez simple, mais il fait son travail et assure la persistance des documents et du canal de communication en temps réel. Étonnamment, grâce à l'énorme communauté ProseMirror, j'ai pu comprendre comment tout devrait fonctionner sans avoir une spécification d'interface exacte (+1 kiwi).

Et puis j'ai remplacé les icônes utilisées par l'éditeur par les icônes de l'ensemble Feather . En particulier, trois colis ont dû être remplacés. Étant donné que la licence ADG, entre autres, interdit tout travail dérivé, ces packages ont dû être refaits à partir de zéro. Probablement, à cause de cela, certaines fonctions ont été perdues, principalement du point de vue de l'accessibilité pour les personnes handicapées, mais une bonne base ouverte a été créée pour un développement ultérieur. Par exemple, dans certains cas, il n'y a pas de meilleure alternative pour les icônes , donc si vous voulez contribuer à ce projet, voici le premier problème (+1 kiwi)!

Tout cela signifie que nous ne sommes plus qu'à un demi-qiwi du résultat parfait (mais nous pourrons probablement faire face aux mathématiques). Ce qui s'est passé, c'est en quoi je ne croyais pas quand j'ai commencé ce voyage. Cela signifie également que nous avons un gagnant clair dans cette bataille, et finalement Atlaskit Editor a gagné grâce à la communauté ProseMirror diversifiée, ouverte et utile . Consultez la documentation du projet pour savoir par où commencer. Je crois que si vous lancez un nouveau projet et envisagez la possibilité d'une coopération en temps réel, c'est un excellent point de départ, même avec toutes les réserves .


Fig. 5. Démontrer les capacités d'édition en temps réel dans Atlaskit Editor

Résultat final (corrigé): 10,5 / 11

Mention honorable

Il y a deux éditeurs que je voudrais mentionner, bien qu'ils ne disposent pas actuellement d'une solution prête à l'emploi pour la collaboration en temps réel, mais les deux sont construits au-dessus des bibliothèques qui prennent en charge cette fonctionnalité. Peut-être que les deux ont des plans.


Fig. 6. Éditeur de cire (traitement de texte basé sur ProseMirror)

Le premier est la cire (du nom des anciens comprimés de cire) de la Fondation Coko. Ce traitement de texte a d' abord été créé sur la bibliothèque de substances ( référentiel ), et maintenant il a été reconstruit sous ProseMirror ( référentiel ). Il est exclusivement rempli de fonctionnalités. Ce ne sont pas exactement les fonctions pour lesquelles nous donnons le kiwi, mais ce sont néanmoins d'excellentes fonctions. La cire a été initialement conçue pour la composition de livres , elle prend en charge les notes (annotations numérotées courantes dans les livres), l'historique des modifications, la recherche et le remplacement, les ornements et autres. Peut-être donner des oranges pour ça ? Dans ce cas, Wax recevra 4 kiwis (licence ouverte, images, listes, utilisation en production) et quelques oranges, éventuellement quatre. . C'est beaucoup de fruits!

La texture

Fig. 7. Texture, éditeur basé sur les substances

Enfin, nous avons Texture , un éditeur très spécifique, professionnel (mais open source) pour créer du contenu scientifique au format JATS (standard XML pour les articles de revues). Si vous pratiquez le comptage des fruits, nous manquerons certainement de doigts: une licence ouverte, des tableaux, des images, un support en mathématiques approfondies, des liens et des références croisées, des listes, un support de métadonnées, la liste continue! Je le répète, Wax et Texture sont tous les deux de merveilleux éditeurs , et la seule chose qui les empêche de tirer le maximum de kiwi est le manque de fonctionnalités de co-édition en temps réel, auxquelles cet article est consacré.

Conclusion

Si vous créez un système dans lequel l'édition collaborative en temps réel est un élément clé, vous avez choisi le bon moment. L'année dernière, le paysage a mûri et maintenant des solutions ouvertes presque plug-and-play sont apparues ici. Peut-être qu'avec votre aide, exactement dans un an, nous aurons toute une série de projets ouverts. Et peut-être, seulement possible, nous utiliserons également des outils construits au-dessus de ces couches ouvertes, sans même le savoir.

Lectures complémentaires

1. Données imprégnées d'histoire: arbres causaux et CRDT opérationnels
   
2. Leçons de la création d'un éditeur de texte en temps réel
   
3. Exemple de traitement de texte HTML
   
4. Co-édition dans ProseMirror