Extras du compositeur MD

Est-il possible de déplacer l’option « Sondage de construction » (sur ordinateur) du menu supplémentaire et de la placer à côté des autres boutons de mise en forme ?

Comme votre demande sur mobile, cela nécessite une édition un peu plus complexe, que je ne peux pas ajouter dans ce composant de thème. Mais cela devrait être réalisable dans un composant personnalisé pour le bureau en suivant la logique présentée par angus et spirobel.

3 « J'aime »

Comment supprimer le centre et aligner les boutons gauche et droite ?

Soit dit en passant, j’adore ce composant.

Bonjour !

Vous pouvez ajouter ces lignes CSS dans votre thème ou dans un composant :

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

Je suppose que vous vouliez dire le bouton justifié, car l’alignement à gauche n’a pas été ajouté dans le même composant.

1 « J'aime »

Est-il possible de déplacer tous ces nouveaux boutons dans le bouton/menu Options ?

C’est possible, mais vous devrez un peu fouiller dans le code.

Dans Bureau > En-tête, vous trouverez tout le JavaScript ; vous devrez modifier quelques lignes.

Par exemple, le code pour un bouton dans la barre d’outils ressemble à ceci :

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "underline_button",
        group: "fontStyles",
        icon: "underline",
        perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
    });
});

Vous devez le remplacer par ceci :

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "underline",
      icon: "underline",
      label: "underline_button"
  };
});

Et ajoutez l’action dans cette partie :

api.modifyClass("controller:composer", {
  actions: {
    underline() {
      this.get("toolbarEvent").applySurround('[u]', '[/u]', "underline_text");
    },
    floatleft() {
      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
    },
    columns() {
      this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
    }
  }
});

La traduction devrait convenir.

Vous verrez rapidement si quelque chose ne va pas, car Discourse affiche un message d’erreur lorsque vous enregistrez les modifications.

5 « J'aime »

Super composant @Steven
Ce serait génial si nous pouvions aussi avoir H1, H2 et H3

2 « J'aime »

Peut-on ajouter le bouton [color] [/color] à ce composant de thème ? Si c’est possible, ce serait parfait, car on pourrait alors utiliser le compositeur officiel bbcode+md de Discourse. Actuellement, j’utilise la barre d’outils de mise en forme + mdcomposer. Bien sûr, je pourrais utiliser du CSS pour masquer les boutons supplémentaires, mais il existe des endroits où le CSS n’est pas utilisé, comme dans le panneau d’administration ou le plugin Custom Wizard de Pavilion. Le bouton couleur est très utilisé.

Voici ce que j’obtiens avec du CSS (ce qui est parfait) :
image

Voici ce que j’obtiens sans :
image

1 « J'aime »

Mon plan est de créer un composant pour les personnes qui ne souhaitent pas installer de plugin. Cependant, je vais créer une branche avec des codes BB de couleur. J’essaierai cela dans quelques heures si j’ai le temps. Je vous tiendrai informé quand ce sera prêt et comment l’installer.

Je vais probablement utiliser ce temps pour réorganiser le composant du thème. Je préfère un tc simple par défaut ; j’utiliserai une branche avec toutes les options et des boutons en indice, ainsi qu’une branche BB pour ceux qui ont le plugin BB officiel.

2 « J'aime »

Merci, les boutons de sous-script/sur-script sont l’une des raisons de continuer à utiliser l’éditeur Markdown, que d’autres plugins et composants de thème ne proposent pas. Le bbcode officiel inclut de nombreuses fonctionnalités absentes du plugin de barre d’outils de mise en forme, comme le [spoiler] [/spoiler]. Pour avoir le meilleur des deux mondes, je pense qu’il vaut mieux conserver le bbcode de Discourse, puis ajouter les boutons dont nous avons besoin via mdcomposer.

Je ne pensais pas que les boutons de script étaient populaires, je les garderai dans le composant de base.

Je vais créer quelques branches : une simple avec seulement quelques boutons de mise en forme de base, et une branche couleur qui ajoute un bbcode couleur.

2 « J'aime »

Salut à tous,

Je voulais juste vous informer qu’une nouvelle branche color a été ajoutée au compositeur md. Désormais, vous pouvez utiliser le plugin bbcode officiel de Discourse + le compositeur md (branche color) + l’alerte de spoiler de Discourse (flouter les spoilers). Je pense que c’est la meilleure combinaison disponible pour les boutons du compositeur sur Discourse.

Il y a aussi l’idée d’ajouter un sélecteur de couleur en utilisant cette bibliothèque gratuite :

Si quelqu’un souhaite aider et sait comment ajouter un sélecteur de couleur, n’hésitez pas à aider Steven !

2 « J'aime »

Comment puis-je masquer ou supprimer complètement certains de ces boutons ? Nous n’avons besoin que de quelques-uns d’entre eux, et j’ai remarqué que la suppression d’un bouton ne supprime pas l’élément correspondant, qui reste toujours listé (il apparaît alors comme un espace vide sans icône visible).

La meilleure méthode consiste à ajouter quelques lignes CSS dans votre thème actuel.

J’ai fourni ces exemples pour les boutons d’alignement, si vous souhaitez les supprimer.

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

Je peux également vous fournir le code CSS pour les boutons spécifiques que vous souhaitez masquer.

5 « J'aime »

Salut Steven, excellent composant. Merci de l’avoir partagé !

Une question rapide : serait-il possible d’implémenter des boutons pour ajouter des espaces insécables (par exemple, nbsp ; ensp ; emsp ? Que devrais-je utiliser à la place de applySurround ?

Certains membres de ma communauté ont du mal à formater les publications (principalement l’indentation) et je pense que cela leur serait utile.

Merci !

Oui, vous pouvez facilement ajouter un bouton, et au lieu d’applysurround, j’utilise addText

J’ai cet ancien exemple que vous pouvez utiliser

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "br_button",
        group: "extras",
        icon: "level-down-alt",
        perform: e => e.addText('<br>', 'br_text')
    });
});
3 « J'aime »

Merci ! Ça fera l’affaire !

Hmm… Vous ne semblez pas avoir de barré dans la barre d’outils de formatage Discourse, mais vous l’avez ici. Je préfère la barre d’outils de formatage car elle a tout le reste et plus encore, mais j’aimerais avoir le barré comme option. Que recommandez-vous étant donné que la compatibilité est un problème entre ces deux ?

Je pourrais ajouter un bouton barré dans la barre d’outils du plugin, cela pourrait être pertinent à l’avenir.

J’y réfléchirai, mais en attendant, vous pouvez utiliser le plugin et ajouter ce composant : GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer

Il ajoutera un bouton barré dans l’action du menu contextuel, il est compatible avec le plugin.

3 « J'aime »

J’ai soumis une PR : https://github.com/MonDiscourse/md-composer-extras/pull/10 qui, à moins que je n’aie mal placé une virgule ou autre chose, devrait corriger

Pour éviter les erreurs dans les tests, ajoutez une clé `pluginId` à votre appel `modifyClass`. Cela garantira que la modification n'est appliquée qu'une seule fois.
2 « J'aime »