Ajouter un meilleur support d'annulation lors de l'insertion de texte formaté

Fonctionnalité
1

Actuellement dans Discourse, si vous collez du texte brut dans le compositeur, le comportement habituel du navigateur via Ctrl+Z annulera ce collage et supprimera le texte collé. Cependant, si vous collez du texte formaté comme ce texte en gras, l’annulation ne fonctionne pas. De même, le collage de liens par-dessus du texte pour les transformer en liens ne peut pas être annulé, pas plus que le markdown inséré via des raccourcis comme Ctrl+B ou lors de l’ajout de formatage à partir des options de la barre d’outils du compositeur. Idéalement, une grande partie de cela devrait être ajoutée à la pile d’annulation afin que Ctrl+Z fonctionne.

Laissez-moi vous décrire ce qui m’arrive assez souvent.

  1. Je copie du texte d’un autre site web qui se trouve être un lien, en gras, un en-tête, etc. (Parfois, ce fait est enregistré et parfois non.)
  2. Je vais sur Discourse pour coller ce texte dans mon message déjà partiellement écrit.
  3. J’appuie sur Ctrl+V qui insère le texte formaté.
  4. Je réalise mon erreur et j’appuie sur Ctrl+Z, ce qui ne fait rien.
  5. Je supprime manuellement le texte formaté que j’ai inséré par erreur. (Le plus souvent, c’est la version liée que j’ai collée par erreur, donc ce n’est pas comme si je devais juste supprimer un ‘#’ ou quelque chose comme ça.)
  6. J’appuie sur Ctrl+Maj+V, ce que j’aurais dû faire la première fois pour coller le texte non formaté.

Évidemment, il s’agit en partie d’une erreur de l’utilisateur, et quand je ne me trompe pas, ce n’est que deux étapes (copier depuis un autre site web, coller en texte brut dans Discourse). Mais quand je me trompe (ce qui arrive souvent car j’ai l’habitude d’appuyer simplement sur Ctrl+V étant donné que la plupart des sites web ne font pas de collage formaté), ce serait bien si je pouvais gagner du temps en faisant fonctionner Ctrl+Z normalement.

4 « J'aime »
2

C’est généralement un comportement natif du navigateur, et ce n’est pas quelque chose que Discourse fait. Essayez de tester avec une simple zone de texte en HTML.

3

D’accord, l’annulation ne fonctionne pas par défaut lorsque vous utilisez JavaScript pour modifier une entrée. Mais j’ai cherché sur Google et j’ai trouvé que document.execCommand peut insérer du texte tout en l’ajoutant à la pile d’annulation.

Par exemple, si vous faites document.getElementById('myInput').value = 'asd' puis Ctrl+Z, cela n’annulera pas.

Mais si vous faites document.execCommand('insertText', false, 'asd') pendant que le curseur est là où vous le souhaitez (ce qui devrait être le cas selon le flux de travail actuel de Discourse), le texte est correctement inséré et Ctrl+Z supprimera le texte ajouté comme prévu.

Fondamentalement, je me demande si document.execCommand (ou un autre processus si une autre approche est considérée comme meilleure) peut être utilisé pour ajouter à la pile d’annulation afin que Ctrl+Z fonctionne dans ces cas.

3 « J'aime »
4

Non — nous avons intentionnellement supprimé cette prise en charge de Discourse il y a des années, préférant laisser la gestion native d’annulation de la zone de texte du navigateur fonctionner comme elle le devrait sur tous les sites web standard.

5

Je pense que je rate quelque chose. Que signifie exactement « laisser la gestion native d’annulation de la zone de texte du navigateur fonctionner » ? Autant que je sache, l’annulation pour le texte formaté ne fonctionne pas du tout dans Discourse, alors dites-vous que l’absence d’annulation est le comportement standard d’un site Web ?

La raison pour laquelle je suis confus est que je ne peux penser à aucun site Web (à l’exception de choses comme Microsoft Word où l’annulation fonctionne) qui prend en charge le collage formaté en dehors de Discourse. Je n’ai donc rien à comparer à Discourse pour voir ce qui est « standard ». Si vous pouviez me montrer quelques sites Web pour comparaison, ce serait très utile.

2 « J'aime »
6

Voir

Cliquez sur Essayer vous-même, puis entrez du texte dans la zone de texte, faites une pause, puis appuyez sur Ctrl+Z pour annuler vos actions. Voici une démo. D’abord, nous appuyons sur le bouton Essayer vous-même, ce qui affiche un textarea HTML dans le navigateur.

image
image633×305 15.4 KB

Je saisis du texte dans la zone de texte. Comme vous pouvez le voir sur la capture d’écran, j’ai tapé

JE VIENS DE TAPPER CE TEXTE YAYYYY !

image
image613×302 17.5 KB

Maintenant, après avoir tapé, j’appuie sur Ctrl+Z pour annuler ma saisie, et je vois ceci :

image
image617×297 16.4 KB

Notez que le texte est revenu à son état précédent, et que cela a été géré à 100 % par le navigateur lui-même, sans aucun code JavaScript impliqué.

7

Ma compréhension est que @seanblue demande si nous pouvons modifier les API du navigateur que nous utilisons lors de la manipulation de la zone de texte afin de mieux guider le navigateur pour qu’il puisse mieux gérer l’annulation. Cela ne s’appliquerait donc qu’aux raccourcis clavier, à la barre d’outils, au téléchargement et à d’autres éléments similaires.

Je ne suis pas contre l’ajustement des choses ici, mais je crains que certaines de ces API ne nécessitent beaucoup de soin, il y a certainement un risque de régressions.

Je ne suis pas contre des expériences ici, peut-être si la communauté souhaite envoyer des PR pour nous montrer comment faire.

7 « J'aime »
8

Nous pourrions certainement faire mieux ici. Bon nombre de nos boutons de barre d’outils et de notre comportement de collage sophistiqué définissent directement la valeur de la zone de texte en JavaScript. Cela casse totalement l’historique natif d’annulation/rétablissement du navigateur.

Au lieu de cela, chaque fois que nous apportons des modifications programmatiques à la zone de texte, nous devrions utiliser document.execCommand (comme l’a mentionné @seanblue). De cette façon, le navigateur l’interprète de la même manière qu’une action utilisateur et l’insère proprement dans l’historique d’annulation/rétablissement.

la commande insertText, que vous pouvez utiliser pour remplacer programmatiquement du texte à la position du curseur tout en préservant le tampon d’annulation (historique des modifications) dans des éléments textarea et input simples.

10 « J'aime »
9

Mais cette zone de texte ne gère pas le texte formaté, ce dont je ne parle pas. Je sais que les navigateurs gèrent l’annulation du texte normalement tapé et collé. Mon point est que Discourse ne gère pas l’annulation du texte formaté collé. Suivez ces étapes pour voir de quoi je parle.

Tout d’abord, ouvrez le compositeur Discourse :

image
image916×497 19 KB

Maintenant, copiez le texte suivant et collez-le dans le compositeur : ceci est un test

image
image922×510 15.4 KB

Maintenant, appuyez sur Ctrl+Z, et le texte collé est supprimé. C’est identique au comportement que vous avez démontré dans votre message.

image
image926×504 19.2 KB

Maintenant, copiez le texte suivant à la place et collez-le dans le compositeur : ceci est un test génial
Notez qu’il le colle avec le markdown pour italiser “génial”.

image
image916×499 15.8 KB

Maintenant, appuyez sur Ctrl+Z et remarquez que le texte collé est toujours là. C’est de cela que je parle.

image
image922×507 16 KB

C’est exact. Je ne suggère pas de gérer l’annulation vous-même en JavaScript. Je suggère que lorsque vous manipulez la zone de texte, vous en informiez le navigateur afin qu’il puisse annuler le changement lui-même lorsque l’utilisateur appuie sur Ctrl+Z.

Pour ce que ça vaut, 99% de ma frustration serait résolue si Ctrl+Z fonctionnait après avoir collé du texte formaté. Serait-il idéal si chaque opération pouvait être annulée avec Ctrl+Z ? Bien sûr. Mais la plupart des autres opérations peuvent être annulées en répétant l’opération d’origine (par exemple, faire Ctrl+B peut ajouter et supprimer le markdown gras). Mais avec le collage, il a le potentiel d’inclure une quantité significative de markdown inattendue, y compris des en-têtes, des liens et même des tableaux, c’est pourquoi il est si important que l’annulation fonctionne dans ce cas.

Si nous limitions la portée à la gestion de l’annulation dans le cas du collage formaté et ignorions les autres raccourcis, boutons de la barre d’outils, etc., cela réduirait-il suffisamment le risque pour tenter le coup ?

9 « J'aime »
10

Je vois ; entre votre explication et celle de @david, je comprends la distinction. Je n’utilise tout simplement pas vraiment ces boutons dans l’éditeur la plupart du temps. Je tape les choses dans la zone de texte en utilisant le clavier de mon ordinateur (physique ou à l’écran), et cela est géré de manière transparente par le navigateur.

6 « J'aime »
11

C’est compréhensible. J’ai aussi tendance à taper le markdown plutôt qu’à utiliser les boutons de la barre d’outils pour cela, donc cet aspect n’est pas vraiment un problème pour moi. Je n’ai mentionné les éléments de la barre d’outils dans le message d’origine que pour souligner que cela n’arrive pas uniquement lors du collage de texte formaté. La possibilité d’annuler les actions de la barre d’outils n’est pas très importante car l’utilisateur effectue ces actions intentionnellement. Mais lors du collage, le formatage est souvent accidentel et inattendu, donc pouvoir annuler cela serait très pratique.

6 « J'aime »
12

Je voulais juste faire un suivi sur ce point et voir la probabilité que cela soit traité dans un avenir prévisible.

3 « J'aime »
13

Pas encore planifié, mais oui, cela semble faire l’affaire. Je pense que nous devrions modifier notre implémentation pour la barre d’outils, les raccourcis comme CTRL-B et les mentions.

Cependant, c’est un changement assez complexe, je dirais qu’il faudrait environ 1 à 3 semaines de travail pour tout intégrer. Il y a beaucoup de choses à prendre en compte :

  • Copier-coller des images
  • Téléversements
  • Gras / Italique
  • Liens
  • @mentions
  • #autocomplétion

Je soutiens ce changement mais je ne suis pas sûr de quand nous pourrons le planifier… Je suppose que je suis d’accord pour le prévoir pour notre prochaine version, des objections @codinghorror ?

J’aime le fait que vous pourrez faire CTRL-Z jusqu’à une boîte vide au lieu d’être bloqué sur votre première mention, lien, etc…

8 « J'aime »
14

Une chose intéressante est que (à mon avis) cela peut raisonnablement être fait progressivement plutôt que d’avoir à tout publier d’un coup. Évidemment, je ne sais pas si ce sera le cas d’un point de vue technique, mais d’un point de vue utilisateur, je pense que ce serait bien. Certaines séparations logiques pourraient être :

  • Coller du texte qui devient formaté, y compris des choses comme le gras, les images et les liens
  • Auto-complétion des mentions, catégories/tags, emoji
  • Raccourcis clavier comme Ctrl+B pour le gras
  • Actions de la barre d’outils, comme gras, masquer les détails, flouter les spoilers, etc.

J’ai l’impression que chacun de ces groupes pourrait être réalisé individuellement sans confondre les utilisateurs, et personnellement, c’est dans cet ordre que je l’implémenterais.

8 « J'aime »
15

Je prévois ce travail pour notre prochaine version, cela signifie que nous allons régler cela au cours des 6 prochains mois environ, cela ne se fera pas du jour au lendemain, mais nous ferons des progrès ici.

8 « J'aime »
16

Cela fait quatre mois, alors je voulais prendre des nouvelles pour voir où cela en était. :slight_smile:

2 « J'aime »
17

Oui, je vous entends parfaitement, mais cela va prendre encore un peu de temps.

Cela s’est transformé en une refonte complète nécessaire du compositeur. Notre plan à long terme est de prendre en charge une couche d’abstraction différente pour le compositeur, qui est maintenant collée SUPER durement au fait qu’il s’agisse toujours d’un élément TEXTAREA.

La première étape pour débloquer la situation est de prendre en charge un compositeur contenteditable qui ressemble et se comporte comme notre zone de texte actuelle.

Je ne pense pas que nous commencerons ce projet avant 3 mois, car nous avons 3 autres très grands projets avant celui-ci, mais je pense certainement que nous commencerons ce projet cette année.

2 « J'aime »
18

Pas de soucis, je cherchais juste une mise à jour.

Wow, je n’avais jamais entendu parler de contenteditable jusqu’à présent. Pourriez-vous partager une brève explication technique sur la raison pour laquelle ce changement est nécessaire/souhaitable ? Si ce n’est pas le cas, ce n’est pas grave, je suis juste curieux.

19

C’est un peu compliqué, mais nous voulons nous lancer dans l’expérimentation d’éditeurs riches. Cela nous le permettrait.

La raison pour laquelle ce travail est sur la voie critique est que tous nos internes sont fortement liés à une implémentation spécifique (TEXTAREA). Nous n’avons pas une seule fonction pour interagir avec le compositeur, c’est plutôt comme copier-coller 20 implémentations différentes.

Ce que nous aimerions faire, c’est avoir un petit composant “squelette” qui dit :

  • Voici comment sélectionner du texte
  • Voici comment insérer du texte

Et ainsi de suite… ensuite, nous pourrons réimplémenter le squelette en tant que contenteditable ou une implémentation de TEXTAREA compatible avec l’annulation.

Cependant, beaucoup de code doit être déplacé pour permettre cela.

2 « J'aime »
22

J’ai pu faire quelques progrès ici :

Ce n’est pas aussi complet que le travail à long terme décrit par @sam. Mais je pense que cela devrait aider à court terme. Cela devrait préserver l’historique d’annulation lors du collage de texte enrichi, de la citation et lors de l’utilisation de la plupart des boutons/raccourcis clavier de l’éditeur.

C’est maintenant en ligne sur Meta - faites savoir si vous remarquez des problèmes.

3 « J'aime »