Bouton de suppression d'image vers l'aperçu du compositeur

Bonjour,

Je pense à une nouvelle fonctionnalité pour supprimer facilement une image de l’éditeur. Il arrive souvent qu’un utilisateur télécharge plusieurs images et ne souhaite en supprimer qu’une seule, ce qui est très compliqué s’il n’est pas familier avec le markdown. Bien sûr, il essaie, mais le résultat est généralement des liens brisés, etc…

Il y a eu une modification du texte alternatif des images qui fonctionne très bien et est conviviale. Elle ajoute la possibilité de modifier le texte alternatif du côté de l’aperçu.


Ce serait formidable de placer un bouton de suppression sur l’image dans l’aperçu. Peut-être une icône :wastebasket: ou un X dans le coin de l’image, et en cliquant sur ce bouton, il pourrait cibler et supprimer le code markdown de l’image réelle. :slightly_smiling_face:

Merci :slightly_smiling_face:

8 « J'aime »

Merci Don, cela semble être un bouton utile et il ne sera probablement pas trop difficile à ajouter. Je vais marquer ceci comme pr-welcome, heureux de voir ceci ajouté.

3 « J'aime »

Je travaille à la résolution de ce problème ; j’ai presque une preuve de concept fonctionnelle.
J’ai juste une confusion entre ces deux composants d-editor.js et composer-editor,js. Ma solution jusqu’à présent est basée sur l’écoute du contenu preview/html lorsqu’il est mis à jour à l’intérieur du composant d-editor.js…etc.
Suis-je dans la bonne direction ?

1 « J'aime »

L’endroit le plus approprié pour supprimer une image serait à côté des boutons que nous affichons au survol pour redimensionner les images et ajouter du texte alternatif dans l’aperçu du compositeur.

image

Le hook pour supprimer le balisage de l’image devrait être très similaire aux boutons 100%/75%/50%. Vous pouvez voir ici comment le redimensionnement de l’image est effectué.

2 « J'aime »

Je suis un peu mitigé quant à l’ajout de cela là, car cela semble si rare d’en avoir besoin et cela ajoutera du bruit visuel.

Je suppose qu’une icône de « corbeille » alignée à droite de cette ligne, afin qu’elle ne soit pas trop proche du bouton d’édition ?

@awesomerobot qu’en penses-tu ?

De plus, je me demande si l’ordre des opérations ici est correct, la rotation et le recadrage sont-ils plus importants ?

3 « J'aime »

Pour simplement ajouter un bouton de suppression, nous pourrions faire :

Déplacer le bouton d’édition vers la gauche (bonus : distance de la souris plus courte de l’entrée du compositeur), puis placer le bouton de suppression à droite… nous avons donc une certaine distance entre les actions inoffensives et dangereuses.

Autres améliorations souhaitables :

  • rendre l’icône d’édition bleue comme les 50 %, 75 %
  • garder le texte noir, mais le rendre cliquable pour accéder également à l’entrée
  • lorsque l’éditeur de titre est ouvert, pouvons-nous le positionner pour qu’il corresponde à la ligne de base du texte d’aperçu (donc une couche z au-dessus) ? Cela rend les choses moins instables au clic :

C’est une portée plus large, mais avec la rotation et le recadrage, nous pourrions vouloir un type de menu complètement différent ?

http://notion.so a un bel exemple :

Ils ont donc leur bouton avec un tas d’options, la mise à l’échelle est un clic et un glisser-déposer sur les poignées…

Un petit détail agréable est que si vous ajoutez une image trop petite pour la superposition du bouton, ils forcent l’image à une échelle qui contient le bouton une fois que vous essayez d’interagir avec elle. Cela évite d’avoir un bouton au survol qui superpose le contenu environnant.

7 « J'aime »

@awesomerobot Merci pour votre retour. J’ai une autre question pour m’assurer que nous sommes sur la même longueur d’onde. Concernant ce point :

Étant donné qu’il existe deux scénarios pour l’apparition du conteneur des “boutons d’échelle” avec le “bouton d’édition alternatif”

Normalement, ceux-ci apparaissent sur la même ligne ; cependant, lorsque le texte alternatif est long, le conteneur alternatif débordera sur la ligne suivante :

Même ligne

Débordement

Revenons maintenant à vos points ci-dessus ; cela aurait du sens en supposant que vous souhaitez que le comportement de débordement soit le comportement par défaut. Sinon, pour un texte alternatif court, le bouton de suppression ne serait qu’un bouton de fermeture de l’édition du texte alternatif.

Une autre alternative consiste simplement à afficher le conteneur de texte alternatif avant les boutons d’échelle, par exemple :

Même ligne :

Débordement :

Il est donc clair que le bouton de suppression vient après 50%, mais on ne sait pas bien comment cela fonctionnerait dans les deux scénarios ci-dessus.

2 « J'aime »

[Mise à jour]

J’ai suivi la deuxième approche ci-dessus :
Voici une vidéo montrant le résultat

Si tout semble bon, je vais refactoriser le code et créer une Pull Request (PR).

8 « J'aime »

Merci d’avoir expliqué les détails supplémentaires ! Je pense que cela semble bien !

6 « J'aime »

Merci ; j’ai déjà soumis une PR FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 « J'aime »

Ceci a maintenant été fusionné aujourd’hui

6 « J'aime »