ZEP-14 : Refonte de l'assistant d'édition Markdown

Tentons de l'améliorer au besoin des membres !

a marqué ce sujet comme résolu.
Cartouche
ZEP 14
Titre Refonte de l'assistant d'édition Markdown
Révision 2
Date de création 09 Août 2014
Dernière révision 22 Mars 2015
Type Feature
Statut Rédaction

Cette ZEP vise à améliorer l'éditeur MD que nous avons actuellement et elle voit le jour suite à plusieurs idées et suggestions remonté sur le forum idoine par les membres.

La Situation Actuellement

Actuellement, sur le site nous avons cet éditeur :

L'éditeur MD actuel

C'est un éditeur qui est fonctionnel, mais qui d'après certains manquerait de certaines petites choses. Voyons cela.

L'ajout d'une Image

La Modal qui permet l'ajout d'une image

Aujourd'hui, le seul moyen que nous avons pour ajouter une image dans un de nos posts, c'est de passer par un lien. Ce qui nous oblige soit à nous référer à des sites tels que Imgur, ZupImages, ou tout autre site qui permet le stockage rapide d'image en ligne. Soit d'enregistrer l'image sur une galerie sur le site, de récupérer le lien et de le mettre dans notre post.

Vous en conviendrez et serez sûrement d'accord avec eux et moi, ce n'est pas très intuitif et très simple.

La solution ou les solutions ?

Mise en place d'un système de drag'n'drop avec création de galeries automatiques.

On attend l'API pour cela ?

On peut barrer mais pas souligner, pourquoi ?

Certains membres on remonter sur le forum qu'il serait bien qu'on puisse souligner un texte. Argument : mise en forme, en valeur, etc.

Personnellement, je trouve que ce serait une erreur de rajouter cette option dans l'éditeur. Comme plusieurs fois fait remarquer aux membres qui demande cette option, le soulignage sur internet est synonyme de lien hypertexte. Aussi, d'autres moyens sont mis à disposition pour cela, comme le gras ou l'italique.

Aucune balise de soulignement, ne verra le jour, et ceci pour respecter les lois d'internet : soulignement = lien

Raccourcis Clavier

Ssx`x, a proposé sur les forums, de rajouter des raccourcis clavier à l'éditeur.

Par-exemple, Ctrl + B pour mettre en gras, Ctrl + I pour mettre en italique, etc. Ces raccourcis feraît apparaître alors dans la zone d'édition la syntaxe MD qui va avec soit, * * pour l'italique, ** ** pour le gras, etc, etc.

Les Smileys

Les Smileys Type SdZ

Aujourd'hui dans l'éditeur nous avons actuellement aucun bouton qui nous permet de lister et d'ajouter des smileys directement dans le post.

Ça pourrait être utile, pour ceux qui n'ont pas connu le SdZ (et ceux qui l'ont connu mais qui ont oublié ^^ ), de voir qu'il y a d'autre smileys autre que : :) :p :D ^^ . Pour l'instant le seul moyen de savoir que d'autres smileys sont en place c'est d'aller sur ce tutoriel et de descendre jusqu'à ici

Bien cacher ces smileys n'est-ce pas ?

Les Smileys Clem' de Piwit

Peut-être que vous le savez ou non, mais Piwit s'est lancé dans la création de smileys à effigie de Clem' (Clem' est nôtre mascotte pour ceux qui serait passer à côté ;) ). Son travail est actuelle bien aboutit :

Les Smileys Clem' de Piwit

La question qui se pose alors c'est l'intégration.

Comment intégrons-nous cela ?

La question de l'intégration est entrain de se régler sur le sujet propre à ces smileys.

Tout d'abord, posons-nous cette question : est-ce la communauté souhaite que ces smileys soient intégrer à l'éditeur ?

Si la réponse est en majorité oui, une autre question vient naturellement : comment les intégrer ?

J'ai ouvert une issue GH à ce propos. Si vous la lisez vous verrez que deux solutions se sont faite voir.

Tout d'abord, ce pack ne serait pas automatiquement mis en place, l'utilisateur pourrait via les paramètres qui se trouvent dans son profil actionner ou non ce pack

Aperçu "live"

Récemment l'aperçu a été ajaxifier. Mais certains aimerait une solution d'aperçu en quelque sorte direct. Pour l'instant ce qu'il a l'air de se dégager c'est la solution proposé par Javier. À savoir celle-ci :

Solution d'aperçu direct

Voilà pour cette ZEP, sur l'éditeur, je ne vois plus ce que je pourrais rajouter de plus. J'éditerais au fil de la discussion pour rajouter les idées qui viendront par la suite ! ;)


  1. Vous pouvez retrouvez la discussion et le sujet ici 

La question du soulignement a déjà été traitée je ne sais plus ou, avec pour réponse qu'un soulignement équivalait à un lien, et que c'était donc pour ne pas perdre les lecteurs. Je suis relativement d'accord avec cet argument ;)

Mais de manière générale, il a déjà été mentionné à plusieurs reprises à l'époque de la béta et après (grosse flemme de faire une recherche, d'autant avec les 500) que le code de l'éditeur devais globalement être revu pour être plus modulable et permettre lesdites modification. Je pense qu'Alex-D aura un certain nombre de choses à dire à ce sujet ;)

que le code de l'éditeur devais globalement être revu pour être plus modulable et permettre lesdites modification.

Je sais, mais seulement vu que ça avait été discuté durant la bêta et donc de ce fait supprimer, j'ai préféré ne pas l'évoquer directement dans le premier post pour éviter de perdre ceux qui n'était pas là. ;)

Je m'efforce de break avec ZdS pour éviter l'overdose. Mais je passe en coup de vent pour dire que :

  • les smiley sont un autre débat
  • l'éditeur ne manque que d'homogénéité dans le design avec le site (flat toussa) et de l'ajout de tableaux
  • le soulignement = lien, c'est tout c'est la loi de l'Internet
  • il faut rajouter l'insertion d'image "automatique" par drag'n'drop
  • il faut penser à mettre un système de sauvegarde automatique de chaque champ, tant qu'il n'a pas été soumis ou vidé par l'utilisateur, avec un temps limite réglable, le tout stocké chez le client (localStorage)

Un peu HS : pour l'instant je suis en break de dev de façon général, je fais de la musique. Dès que je reprendrais le dev (d'ici une semaine ou deux), je vais dev un éditeur WYSIWYM (j'en ai l'envie) sous forme de plugin jQuery. Il faudrait donc définir les spec souhaités par ZdS pour voir si ce que je veux dev pourrait être utilisé par ZdS. Ce serait un projet séparé mais qui pourrait être utile ici.

Sur ce, des bisous, et bonnes vacances à ceux qui sont en vacances :)

Coucou !

Alors je viens là pour soumettre une petite idée. Soit dit en passant, je ne sais pas si c'est faisable… c'est juste du bonus :)

Ce serait intéressant de pouvoir intégrer des pdf directement dans les messages, avoir une sorte de frame avec dedans le pdf ;)

Voilà c'est tout, bon courage et bonne vacances !

Ce serait intéressant de pouvoir intégrer des pdf directement dans les messages

C'est relativement HS par rapport à l'éditeur, car là tu demande de rajouter une fonctionnalité au markdown du site avant même de l'ajouter à l'éditeur.

Mais sinon, voici ma réponse :

TL;DR : Non.


Un PDF, ça peut faire des centaines de Mo, si on charge ça dans la page, ça va plomber le temps de chargement.

Chacun a son lecteur PDF préféré, laissons à chacun le choix de faire ce qu'il veut. Les liens hypertexte, c'est la vie.

@Pierre_24 : Ah oui, je vais rajouter tout ça, dès que j'ai cinq minutes (ce soir sûrement !) ;)

@Alex-d : Merci, je ne savais que ce raccoucis Ctrl + K était réservé à l'ajout d'un lien. Pour ce qui est de Tab, je veux bien, mais tu as dit dans l'autre sujet qui ça risque d'être délicat, non ?

Ctrl + K = ajout d'un lien.

Alors que moi je propose Tab qui indente (4 espaces) uniquement si on est dans un bloc de code :

1
2
3
 ```html
     <!-- Ici, si on fait tab, ça tabule -->
 ```

Ici, Tab passe au bouton Envoyer.

Alex-D

Je suis pas fan de l'idée. Personnellement je me sers de Ctrl + K sur d'autres supports uniquement pour indenter du code déjà correctement indenté (vous voyez ? non ? j'en étais sûr !).
Explications : quand je copie des portions de codes venant de doc, de mon éditeur ou autre, j'aime le coller et directement faire un raccourci clavier pour qu'il soit décalé de 4 espaces directement. Après pouvoir insérer des tabulations (de 4 espaces, bien sûr.) pourquoi pas mais bon c'est plus agréable de travailler des portions de code dans un outil externe et de les copier/coller seulement.

TL;DR : le but principal du raccourci selon moi est de passer de bloc code à texte brut (et inversement) et non pas insérer des tabulations pour coder dans l'éditeur. Du coup, l'utilisation de Tab serait délicat (car bloque raccourci navigateur, cf mon post dans Bugs & Suggestions)

Du coup, si tu édite dans un éditeur, tu colles, et tu rajoute ```html avant et ``` après, et on en parle plus. Du coup, je ne comprends pas l'intérêt d'un raccourcis pour l'indentation.

Ctrl + K c'est une convention que vous pourrez retrouver chez Google pour les liens, et Ctrl + quoi que ce soit pour de l'indentation, je ne comprends pas.

Si on parle ici d'auto-indentation avec correction et tout qui va bien : faudrait peut-être ne pas s'exciter : on ne recode pas un IDE.

En effet, j'utilise jamais la syntaxe ```<lang> mais plutôt les 4 espaces (habitude de StackOverflow qui gère la coloration automatique selon le sujet de la question), mais du coup il faudrait que le comportement de la touche Tab ne soit altéré que dans un de ces blocs, oui. Ca apportera un plus à ceux qui sont habitué à l'utiliser pour indenter sur le web. (Et je ne parlais pas de corrections d'indentation bien entendu)

Pour ce qui est de Alt + K ou Alt + L, ça semble être une convention dans les logiciels d'avoir K… Peu m'importe, tant que c'est documenté quelque part :)

TL;DR: D'accord sur les arguments avancés par Alex-D : Ctrl + K pour les liens, Tab pour indenter seulement dans les blocs déjà définis (si possible)

Je suis plutôt partisan d'utiliser Tab pour indenter, à la limite conjugué avec une autre touche (Ctrl par exemple, si ça pose pas de problème).

Par contre pourquoi insérer 4 espaces plutôt qu'une vraie tabulation (\t) ? C'est le genre de chose qui peut se gérer en CSS (tab-size), ça…


Je reviens aussi sur le sujet des smileys : j'avais évoqué l'idée d'onglets, certes, mais des alternatives plus sympa (niveau UX) avaient aussi été proposées (et préférées)

Je reviens aussi sur le sujet des smileys : j'avais évoqué l'idée d'onglets, certes, mais des alternatives plus sympa (niveau UX) avaient aussi été proposées (et préférées)

Pour les smileys la discussion a continuné sur GH. La solution proposé par Kje là-bas est de permettre le choix d'uniquement d'un pack de smileys et l'utilisateur verrais les mêmes partout.

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte