Bouton Compositeur de surligneur

:information_source: Résumé Un bouton de surligneur pour la barre d’outils du compositeur Discourse
: eyeglasses: Aperçu Démo Vidéo
:hammer_and_wrench: Dépôt GitHub - denvergeeks/discourse-highlight-wrap-theme-component: A Text Highlighter Button for the Discourse Composer Toolbar
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau aux thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Le bouton ressemble à un stylo surligneur… discourse-highlighter-button Il sert au but très spécifique et limité de cliquer sur un bouton dans la barre d’outils du compositeur pour insérer <mark>ceci</mark>.

:information_source: Ctrl-H est le raccourci clavier que vous pouvez utiliser au lieu de cliquer sur le bouton.

Dans les paramètres, vous pouvez remplacer la couleur de fond (Surligneur) et la couleur du texte dans les parties surlignées.

Un grand merci à @pfaffman et @merefield et @Lilly et @JammyDodger et @Canapin pour leur aide !

14 « J'aime »

C’est incroyable. Bien joué :clap:t2: :star_struck:

3 « J'aime »

C’est très bien.\n\nOù est défini .d-wrap ?\nil s’affiche avec cette couleur sur le mien avec le thème par défaut… j’aimerais qu’il ait la couleur de surlignage comme dans votre vidéo, merci\n\nimage

On dirait que c’est le réglage de la variable de couleur --highlight-medium dans la palette que vous utilisez pour ce thème

Voici à quoi ressemble l’une de mes palettes :

Ce composant utilise la nuance moyenne de la couleur de surbrillance. Vous pouvez voir la couleur exacte dans votre guide de style s’il est activé dans admin-settings-(styleguide enabled or styleguide admin only) le guide de style des couleurs du thème se trouve à /styleguide/atoms/colors

2 « J'aime »

Il pourrait être intéressant de proposer une PR ou une suggestion pour une substitution de la couleur du surlignage. :slight_smile:

2 « J'aime »

oui, je pensais, il vaut mieux avoir un réglage pour cela

2 « J'aime »

J’ajoute un paramètre… je reviens tout de suite

1 « J'aime »

Utiliser <mark>mark</mark> serait-il plus attendu ? Je pense que cela utilise la couleur ‘highlight’ de la palette de couleurs.

<mark>mark</mark>

3 « J'aime »

OK, j’ai mis un paramètre pour qu’il soit par défaut à #ff8.

1 « J'aime »

Haha, j’étais sur le point de vous soumettre une pr :slight_smile:

Happy Super Hero Girls GIF by DC

Bien, je viens de tirer, ça fonctionne très bien ! :grinning:

2 « J'aime »

Salut @denvergeeks :slight_smile:

Voici comment votre style diffère (avec les paramètres par défaut) de \u003cmark\u003e (qui utilise une variable de couleur Discourse, le rendant lisible quel que soit le schéma de couleurs que vous avez choisi) :

Sur un thème sombre :

3 « J'aime »

Parfait @Canapin, je vais intégrer ça !

Ou, si quelqu’un veut faire une QPR (revue de qualité et de processus), faites-le moi savoir car je n’aurai peut-être pas le temps aujourd’hui.

OK, ceci utilise maintenant la suggestion de @Canapin d’utiliser la balise \u003cmark\u003e intégrée et les valeurs par défaut CSS correspondantes.

De plus, il fournit maintenant des paramètres pour remplacer la couleur de fond (Highlighter) et la couleur du texte dans les portions mises en surbrillance. Merci à @Lilly pour ce CSS conditionnel.

1 « J'aime »

J’essaie de créer un sélecteur de couleur json mais ça ne fonctionne pas. J’obtiens juste une fenêtre pop-up vide avec un bouton de sauvegarde. :woman_facepalming:t2:
Peut-être que je vais voir si un sélecteur en javascript est possible d’une manière ou d’une autre. La palette de couleurs et l’interface du badge ont des fonctions de sélecteur de couleur js, mais cela ne fonctionnerait peut-être qu’avec un plugin.

1 « J'aime »

Pour moi, ces paramètres ne sont pas des remplacements. Ils doivent être remplis, sinon cela ne fait rien.

Et… je suis sur le thème par défaut et à cause du manque de café du matin, je suis au ralenti — je n’ai pas vérifié si cela provenait du thème lui-même.

Modifier : non, le thème ou le schéma de couleurs ne jouent aucun rôle. Alors, suivra-t-il le schéma de couleurs et sera-t-il un remplacement, ou est-ce un paramètre obligatoire ?

Essayez de mettre à jour le composant et actualisez la page. Je ne parviens pas à reproduire l’erreur.

Insère-t-il la balise <mark></mark> ?

Je l’ai mis à jour d’abord avant d’essayer. Et non, il utilise wrap. Donc je suis un peu en retard ?

Le réglage JSON du sélecteur de couleur (dans un thème/composant) ne fonctionne pas sur Discourse, en effet.
Je pense que la bonne pratique serait d’utiliser les variables de couleur Discourse en général au lieu de choisir des couleurs arbitraires dans un thème ou un composant qui ne s’intégreront pas bien en fonction des autres thèmes et couleurs choisis par les utilisateurs.

Un utilisateur a créé un sélecteur de couleur pour l’éditeur il y a quelque temps, mais je ne suis pas sûr que le code ait été publié :

2 « J'aime »