Testez notre nouveau compositeur !

Nous travaillons sur un nouveau mode d’éditeur de texte enrichi pour notre compositeur afin de faciliter la rédaction sur Discourse. Nous sommes maintenant prêts à commencer à le tester pour obtenir plus de commentaires de notre communauté sur cette fonctionnalité !

Notre implémentation s’appuie sur l’excellent ProseMirror et son module Markdown non essentiel, en utilisant le schéma, l’analyse et les définitions de sérialisation du module comme base pour d’autres fonctionnalités spécifiques à Discourse.

Ce sujet servira à la fois de guide pour tester le nouveau compositeur et de hub pour suivre les commentaires. Merci d’avance pour toute votre aide ! :sparkling_heart:

:gear: Utiliser le nouveau compositeur dans votre communauté

Nous considérons toujours le compositeur comme expérimental, mais vous pouvez commencer à l’utiliser dans votre communauté en activant le paramètre rich editor :

:writing_hand: Connaître le nouveau compositeur

Le nouveau compositeur est un éditeur de texte enrichi qui simplifie l’expérience de rédaction, en particulier pour les utilisateurs non techniques qui ne sont pas à l’aise avec Markdown. Cet éditeur prend toujours en charge Markdown, mais le formatage est rendu immédiatement pour une expérience WYSIWYG (« ce que vous voyez est ce que vous obtenez ») qui ressemble à d’autres outils de composition web modernes (comme Notion ou Google Docs).

Pour accéder au nouveau compositeur, cliquez sur le commutateur dans la barre d’outils. Cela vous permettra de passer du mode actuel uniquement Markdown au nouvel éditeur de texte enrichi. Vous pouvez cliquer à nouveau sur le commutateur pour revenir en arrière, si nécessaire.

toggle

Ce que vous testez aujourd’hui est la première version du nouveau compositeur. Il n’est pas encore destiné à remplacer complètement le compositeur actuel uniquement Markdown. Nous nous sommes d’abord concentrés sur les bases, qui devraient couvrir les besoins de la plupart des utilisateurs.

Veuillez examiner les sections ci-dessous pour comprendre ce qui est actuellement possible et ce qui n’est pas encore prêt dans le nouveau compositeur. Nous mettrons à jour ces sections au fil du temps à mesure que le support s’étendra !

:green_circle: Fonctionnalités prises en charge

Les fonctionnalités suivantes sont prises en charge dans le nouveau compositeur :

  • Possibilité d’ajouter un titre et de définir des catégories et des tags
  • Éditeur à volet unique en mode éditeur de texte enrichi (c’est-à-dire pas de volet de prévisualisation)
  • Commutateur pour passer des modes éditeur uniquement Markdown et éditeur de texte enrichi
  • Formatage de base [1] pris en charge en Markdown, raccourcis clavier et icônes de barre d’outils
  • Support des emojis
  • Conversion automatique de Markdown en texte enrichi lors du collage de texte brut (par exemple, **gras**gras)
  • Conversion automatique d’émoticônes (par exemple, :):slight_smile: )
  • Interface utilisateur d’image pour redimensionner, légender ou grouper des images ajoutées
  • Interface utilisateur de lien pour visiter, modifier, copier ou supprimer des liens ajoutés et modifier leurs titres
  • Interface de création de tableaux
  • Interface de création de sondages
  • Notes de bas de page
  • Support des mentions et des hashtags
  • HTML en ligne <html> [2]
  • Remplacements typographiques (par exemple, ™ , → , ± )
  • Téléchargements d’images
  • Pièces jointes de fichiers
  • Citations de sujets et de discussions
  • Masquer les détails
  • Spoiler flou (avec limitations, voir la section Fonctionnalités manquantes)
  • Oneboxes
  • Conversion automatique de la règle horizontale (c’est-à-dire taper --- convertit en règle horizontale)

:red_circle: Fonctionnalités manquantes

Les fonctionnalités suivantes que nous savons être actuellement manquantes ou pas encore entièrement prises en charge dans le nouveau compositeur :

  • Interface utilisateur de tableau pour ajouter ou supprimer des colonnes et des lignes après la création du tableau
  • Interface utilisateur de sondage pour modifier des sondages précédemment créés
  • Support de barre d’outils pour ajouter des titres
  • Support amélioré du spoiler flou pour ajouter du flou au texte existant, prendre en charge le flou en ligne et faciliter la suppression du flou.
  • Tout ce qui n’est pas explicitement noté dans la section des fonctionnalités prises en charge (par exemple, le support des diagrammes Mermaid)

:mega: Tester et partager vos commentaires

Lorsque vous testez, vous pourriez rencontrer des problèmes où le compositeur ne se comporte pas comme prévu. Lorsque cela se produit, veuillez nous en informer ! Vos commentaires sont un atout inestimable pour nous aider à améliorer le nouveau compositeur afin qu’il soit prêt à être mis à disposition dans votre communauté.

Veuillez fournir des étapes de reproduction spécifiques, des informations sur votre navigateur / appareil, et toutes captures d’écran ou enregistrements pertinents ! Vous pouvez également consulter notre suivi des problèmes connus ci-dessous pour voir si quelqu’un a déjà signalé ce que vous voyez. Nous maintiendrons ces sections à jour à mesure que nous identifierons et corrigerons les problèmes.

N’oubliez pas que vous pouvez toujours revenir au mode uniquement Markdown en utilisant le commutateur si vous rencontrez un problème avec le nouveau compositeur.

:bug: Bugs

  • Sur Firefox, il semble que vous ne puissiez pas positionner le curseur avant une mention lorsqu’elle commence le message (c’est en fait possible mais visuellement peu clair)

:art: Problèmes d’UX

  • Empêcher certains formats partiels sur les liens pour éviter un style inattendu
  • Appliquer un rendu visuel / une validation attendue aux hashtags de catégories, de tags et de canaux de discussion
  • Appliquer un rendu visuel / une validation attendue aux mentions d’utilisateurs et de groupes
  • Le curseur est focalisé à l’intérieur de la citation (au lieu de la ligne en dessous) lors du début d’un message avec une citation ou lors de la copie / du collage de citations

:wrench: Améliorations pour les développeurs

  • Améliorer l’analyse du HTML en ligne (par exemple, pour <a>)

  1. Gras, italique, souligné (pas de support de barre d’outils), barré (uniquement Markdown via ~~), liens, citations, code, cases à cocher (uniquement Markdown via [ ]; support de barre d’outils à venir), listes à puces, listes numérotées ↩︎

  2. Certains sont convertis en Markdown le plus proche (par exemple, s, strike, strong, b, em, i, code ; u n’est spécifiquement pas pris en charge car il ne se convertit pas en un vrai soulignement) ; d’autres seront autorisés en tant que nœuds « html_inline » (par exemple, kbd, sup, sub, small, big, del, ins, mark) ↩︎

71 « J'aime »

Bon travail !

Il y a quelques problèmes avec les balises de divulgation :

  1. Si vous mettez du texte en surbrillance et choisissez « Masquer le spoiler », le texte est remplacé par « Ce texte sera masqué », perdant ainsi ce que vous aviez mis en surbrillance.

  2. Les spoilers en ligne ne fonctionnent pas, ils sont placés sur une nouvelle ligne.

  3. Il n’y a aucun moyen de désactiver un spoiler.

11 « J'aime »

Merci Shaun, j’ai noté dans le OP que nous avons plus de travail à faire sur les spoilers.

9 « J'aime »

J’attendais cette fonctionnalité et c’est génial que Discourse ait enfin franchi cette étape :clap:

Une seule chose pour l’instant : ça semble bizarre d’avoir une zone de texte aussi étroite pour écrire notre message.

Évidemment, j’étais très habitué à la vue côte à côte du compositeur et de l’aperçu, mais cela semble maintenant… étrange. Peut-être que j’ai juste besoin de temps. Oui, probablement. :smile:

18 « J'aime »

Progrès fantastiques ! :heart:

La deuxième chose que j’ai remarquée est que le style actuel ne s’active (et ne se désactive) pas visuellement dans la barre d’outils, même s’il reste en vigueur. Il serait vraiment agréable que le style actuel soit mis en surbrillance jusqu’à ce qu’il soit désactivé.

C’est tout pour l’instant !

(Je fonde mes commentaires sur le thème gris ambre)

15 « J'aime »

Ce sont de bonnes observations — pour l’instant, nous nous sommes principalement concentrés sur l’éditeur lui-même (où vous tapez réellement), mais nous avons prévu des améliorations pour le conteneur de composition et la barre d’outils qui devraient résoudre ces problèmes.

10 « J'aime »

Un défaut un peu étrange, mais lorsque le compositeur est ouvert, c’est ce qui arrive à l’indicateur de réponse.

Je testerai complètement lorsque je serai sur mon ordinateur plus tard, mais cela semble prometteur.

4 « J'aime »

Enfin là ! :heart_eyes: C’est beaucoup de travail dévoilé ; excellent travail ! Ce sera un avantage considérable pour les utilisateurs qui ne sont pas à l’aise avec Markdown.

Problème de téléchargement pointu :

Si vous téléchargez une image et passez à markdown, le markdown de téléchargement n’est pas là et génère une erreur :
image

Inversement, le téléchargement à partir de markdown, puis le passage au nouvel éditeur ne génère pas d’erreur, mais l’image n’apparaît pas.

12 « J'aime »

Je me demande si nous devrions simplement bloquer le changement jusqu’à ce que le téléchargement soit terminé… nous pouvons potentiellement convertir des espaces réservés entre les éditeurs, mais cela ne semble pas si utile.

11 « J'aime »

Oui, je pense la même chose. Le blocage semble être une bonne idée !
Lorsque je télécharge une grosse image avec une connexion lente, je n’ai pas pu m’empêcher de tester le commutateur jusqu’à ce que ce soit fait. :grinning_face_with_smiling_eyes:

11 « J'aime »

Le nouveau design est superbe. J’adore la façon dont Discourse itère au fil du temps, essaie de nouvelles idées et implique la communauté.

Quelques observations subjectives, si vous cherchez des commentaires :

  • Le bouton d’alignement (gauche/droite) est une icône non conventionnelle et une fonctionnalité qui semble très spécifique. Étant donné que les icônes s’enroulent sur deux lignes sur mobile, je supprimerais simplement cette fonctionnalité. De même, la fonctionnalité “insérer la date” est avancée/spécifique et pourrait être cachée dans le menu :gear:. Ainsi, les icônes restantes tiendraient toutes sur une seule ligne.
  • La fonctionnalité de téléversement de vidéos m’a dérouté, même en tant qu’utilisateur technique. Que devrais-je fournir dans la case “source vidéo” ? De plus, les boutons sont visuellement un peu désordonnés (voir ci-dessous).
  • Le bouton “M” (basculant entre le texte brut et l’aperçu) ne révèle pas son utilité avant que vous ne cliquiez dessus. Il y a de l’espace libre en bas de l’éditeur entre les boutons :wastebasket: et GIF et je pense qu’un bouton d’aperçu aurait plus de sens ici. Et vous auriez de la place pour le mot “aperçu”.

8 « J'aime »

Ce sont des fonctionnalités que nous avons activées sur meta à un moment donné, probablement pour une expérience. Elles ne sont pas disponibles par défaut et nous pourrions les désactiver ou les cacher derrière l’icône :gear:

Je suis d’accord avec cela. Je ne sais pas pourquoi nous incluons toujours cela si proéminemment dans le menu. Je l’utilise tout le temps moi-même, mais j’utilise aussi fréquemment beaucoup de fonctionnalités derrière le menu :gear: !

D’accord, au moins un texte d’aide au survol aiderait à la découvrabilité ici.

À l’avenir, je soupçonne que nous voudrons utiliser par défaut le nouveau compositeur et faire du passage au markdown un mouvement de puissance, que les utilisateurs avancés connaîtront ou pourront découvrir.

9 « J'aime »

:megaphone: Ces éléments de menu ne sont pas vraiment liés au nouveau compositeur, nous n’avons donc pas besoin de nous y concentrer ici. Si des personnes ont d’autres commentaires sur les éléments de menu, veuillez créer de nouveaux sujets Feature ou effectuer une recherche.

Cela dit :

  • J’ai supprimé le bouton « Insérer une vidéo » ici sur meta, qui est fourni via le composant de thème Insert Video.

  • Le bouton « Basculer la direction » dépend du paramètre de site support mixed text direction que nous garderons activé sur meta car nous testons activement la fonctionnalité multilingue actuellement.

  • Sur meta, nous avons également GIF et Ask AI auxquels nous voulons permettre un accès privilégié.

6 « J'aime »

Félicitations à l’équipe ! J’ai remarqué une divergence concernant le oneboxing. Coller une URL depuis le navigateur génère un onebox, mais la taper ne le fait pas. Jusqu’à ce que vous reveniez en arrière pour voir l’aperçu markdown qui le déclenche.

test : Coller depuis la barre du navigateur ici : https://google.com/ Taper ici : https://google.com

6 « J'aime »

Appuyer sur Retour dans le nouveau compositeur WYSIWYG crée un double saut de ligne (une rupture de paragraphe). Je n’aime pas ça (bien que je suppose que ce soit subjectif), mais je n’aime surtout pas ça pour les listes à puces/numérotées, où il y a beaucoup d’espace entre les éléments de la liste.

  • ceci

  • est

  • trop

  • d’espace

13 « J'aime »

Vous pouvez appuyer sur \u003ckbd\u003eshift\u003c/kbd\u003e + \u003ckbd\u003eEntrée\u003c/kbd\u003e pour éviter le double saut de ligne, bien que cela ne fonctionne pas pour les listes.
Je suis d’accord que ce changement de comportement ne devrait pas être la valeur par défaut.

7 « J'aime »

Excellent travail, c’est un pas dans la bonne direction ! Cependant, j’ai encore quelques problèmes d’UX de base que j’aurais aimé voir résolus, mais j’y reviendrai plus tard.

Le bon :
J’adore le nouveau mode éditeur unique, c’est vraiment cool et les images en ligne dans le compositeur fonctionnent très bien.
Même s’il s’agit d’une préversion, cela fonctionne toujours comme je m’y attendais, je n’ai personnellement rien remarqué d’absent (à part --- que j’utilise beaucoup).

Le mauvais :
Les boutons qui sont partout ici sont déroutants, il devrait y avoir un seul endroit pour tous. Remplacez l’icône de double flèche vers le bas par un X. De plus, au lieu de <<, peut-être pourrait-il simplement s’agir d’un axe Y déplaçable pour que nous puissions contrôler sa taille au lieu d’un seul ou le fermer ?

Je déteste toujours autant la rangée d’icônes en haut et le menu “engrenage” “plus”, c’est encombré et déroutant à utiliser. Je me souviens qu’il y avait un sujet à ce sujet dans une certaine mesure, mais je ne le trouve pas.

Sur mon ordinateur de travail (Windows Firefox), le bouton markdown est décalé.
image

Toujours excellent, j’aimerais juste que ces points soient corrigés :+1:

Ajouté à notre section :art: Problèmes d’UX dans le message initial pour correction.

C’est une fonctionnalité manquante connue et nous avons l’intention d’ajouter la prise en charge :

Nous prévoyons des améliorations pour le conteneur et la barre d’outils de l’éditeur, mais pour l’instant, les changements sont limités à l’éditeur lui-même. Nous pouvons garder cela à l’esprit pour ces changements futurs.

Je ne peux pas dire d’après cette description ou cette capture d’écran ce qui s’est mal passé exactement — pourriez-vous partager quelques détails supplémentaires pour que je puisse y jeter un œil ?

5 « J'aime »

Ce n’est peut-être qu’une impression visuelle, mais au moins pour moi, il semble qu’il soit un peu trop haut.

1 « J'aime »