Présentation d'un nouveau menu déroulant d'actions de compositeur pour les types de publication

Refonte de l’éditeur derrière enable_new_composer_actions

Cette mise à jour introduit une expérience d’éditeur repensée et la livre derrière un nouveau changement alpha à venir. Avec le drapeau désactivé (par défaut), rien ne change visuellement. Les administrateurs peuvent opter pour cette fonctionnalité via la page d’administration des changements à venir.

Nouveau menu de publication|vidéo

Ce qui change lorsque le drapeau est activé

  • Menu déroulant des actions unifié. Le menu déroulant hérité composer-actions de SelectKit est remplacé par un nouveau composant Glimmer/DMenu (composer-actions-new.gjs). Il expose toujours les mêmes lignes de changement de mode (répondre au sujet, répondre en tant que nouveau sujet, créer un MP, etc.) avec des libellés et des icônes plus clairs.

  • Les bascules sont intégrées aux actions. Whisper / no-bump / unlist sont maintenant rendus sous forme d’éléments <DToggleSwitch> en bas du même menu déroulant — sans menu de bouton combiné séparé. L’état de la bascule persiste lors des changements de mode (par exemple, activer whisper → passer de « répondre au sujet » à « répondre au message » → whisper toujours actif).

  • Indicateur visuel de type « Whisper ». Un petit bouton à droite du déclencheur du menu déroulant affiche l’état actuel du whisper dans deux variantes visuelles : --public (couleur tertiaire, icône d’œil, « La réponse sera visible ») et --whispering (arrière-plan primary-medium / primary-very-low, icône d’œil barré, « Whispering »). Cliquer dessus bascule le whisper — même chemin de code que la bascule à l’intérieur du menu déroulant, de sorte que les deux restent synchronisés. L’icône du déclencheur elle-même est également remplacée par far-eye-slash lors du whisper.

  • Expérience de modification (UX). Lors de la modification d’un message, le menu déroulant se réduit en un libellé statique sans flèche (icône de crayon + « Modifier le message »). Le bouton « Ajouter un motif de modification », qui se trouvait auparavant ailleurs dans l’interface de l’éditeur, est intégré à ce déclencheur statique sous la forme d’un bouton cliquable « Décrivez votre modification » ; cliquer dessus remplace le libellé par un champ de texte lié à composer.editReason et lui donne le focus.

    • modification
  • Interface de l’éditeur. Le texte/élément .action-title est supprimé — le déclencheur du menu déroulant affiche lui-même le mode actuel.

  • Liens vers les messages/sujets n’apparaîtront désormais que lorsque nécessaire. Un lien vers un sujet s’affichera lors de la navigation hors du sujet, et un lien vers un message s’affichera lors du défilement hors du message ou de la navigation hors de celui-ci.

Notes pour les auteurs de plugins

Le nouveau composant n’est pas une sous-classe de SelectKit, de sorte que les anciennes API d’extension ne s’y appliquent pas. Pour prendre en charge les deux états du drapeau lors de cette phase alpha, les plugins doivent enregistrer les deux API :

Ancienne API (fonctionne uniquement sur l’ancien composant) Nouvelle API (fonctionne uniquement sur le nouveau composant)
api.modifySelectKit("composer-actions").appendContent(...) api.registerValueTransformer("composer-actions-content", ({ value, context }) => { value.push(...); return value; })
api.modifyClass("component:composer-actions", { fooSelected(options, model) { ... } }) api.registerBehaviorTransformer("composer-actions-on-select", ({ context, next }) => { if (context.actionId === "foo") { ...; return; } next(); })

La structure des lignes ({ name, description, icon, id }) est identique dans les deux cas. Le transformateur de comportement reçoit { actionId, options, model } dans son contexte.

:double_exclamation_mark: Les plugins qui n’enregistrent que les anciens hooks disparaîtront silencieusement de l’éditeur dès qu’un administrateur activera le drapeau. Les plugins qui n’enregistrent que les nouveaux transformateurs seront invisibles tant que le drapeau est désactivé (état par défaut pour tous au moment de la fusion).

Références :

  • discourse-post-voting/extend-composer-actions.js — exemple de fonctionnement avec double enregistrement (dans le noyau)

  • discourse-staff-alias — une PR séparée ajoute le double enregistrement là-bas

  • transformers.js — les deux nouveaux noms de transformateurs

Notes de déploiement

  • L’état du drapeau est alpha — activation manuelle pour les tests internes.

  • Les plugins qui s’intègrent aux actions de l’éditeur doivent ajouter un double enregistrement avant que cela ne soit promu en beta/stable.

  • Les tests couvrent les deux états : les spécifications d’acceptation/système existantes couvrent le drapeau désactivé ; les fichiers frères *-new-test.js couvrent le drapeau activé (ainsi que les sélecteurs DOM du nouveau composant pour le menu déroulant unifié, les éléments de bascule, l’indicateur de whisper et les segments de libellé divisés).

20 « J'aime »

Le « lien vers le sujet » s’affiche avec du code HTML en plus du titre du sujet…

Ce n’est pas normal.

Corrigé ici → FIX: Do not render fancyTitle link in composer header by jordanvidrine · Pull Request #40500 · discourse/discourse · GitHub

4 « J'aime »

Serait-il possible de ne pas afficher l’option « Basculer le vote sur les messages » si le type de catégorie sélectionnée n’est pas Idées, ou si les paramètres de la catégorie n’ont pas activé la fonctionnalité de vote sur les messages ? : ))

5 « J'aime »

Cela a du sens pour moi. Je pense que cela pourrait être une régression ? Ou est-ce que cela a toujours été le cas, savez-vous @jordan.vidrine ?

1 « J'aime »

Cela a toujours été le cas : le plugin de vote sur les messages est actif sur l’ensemble du site et non limité par catégorie. Les paramètres au niveau de la catégorie ne servent qu’à définir les valeurs par défaut, et non à empêcher son utilisation.

Nous sommes actuellement dans une phase de transition avec le plugin de vote sur les messages… Je pense que nous devrons mettre au point une migration pour éviter de perturber son utilisation plus générale avant de le restreindre à des catégories spécifiques, simplement parce que le type « idées » est un concept assez récent.

2 « J'aime »

La bonne nouvelle, c’est qu’en attendant, nous disposons de hooks pour autoriser cela dans un composant de thème… cela fonctionne dans un initialiseur pour n’afficher le basculement que dans une catégorie « idées » :

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
    name: "hide-post-voting-toggle",
    after: "extend-composer-actions", 

    initialize() {
      withPluginApi((api) => {
        api.registerValueTransformer(
          "composer-actions-content",
          ({ value, context }) => {
            const category = context.composerModel?.category;
    
            if (!category?.isType("ideas")) {
              return value.filter((item) => item.id !== "togglePostVoting");
            }
    
            return value;
          }
        );
      });
    }
};

8 « J'aime »

Sur ma tablette, le menu déroulant est caché derrière le composeur.

1 « J'aime »

Bonjour @Moin, merci de nous avoir signalé ce problème.

Je n’ai pas pu reproduire le problème de mon côté en utilisant Chromium, Firefox ou Safari, et malheureusement, la vidéo jointe ne se lit pas pour moi.

Pour nous aider à diagnostiquer et à résoudre ce problème, pourriez-vous nous fournir quelques détails supplémentaires ?

  • Système d’exploitation : (par exemple, Android, iOS, Windows, macOS, Linux)

  • Navigateur et version : (par exemple, Chrome 125, Safari 17)

  • Version de Discourse : Vous pouvez la trouver dans votre tableau de bord administrateur, ou en suivant ce guide sur Meta.

Une chose que vous pouvez essayer tout de suite :

Testez le comportement en mode sans échec en ajoutant /safe-mode à la fin de l’URL de votre site (par exemple, https://discourse.example.com/safe-mode).

  • Si le problème disparaît : L’une des personnalisations de votre site (plugins, thèmes ou composants) cause probablement un conflit.

  • Si le problème persiste : C’est un bug principal, et les détails du navigateur et de l’appareil que vous fournissez ci-dessus nous aideront à le localiser et à le corriger.

Merci pour votre persévérance, elle est appréciée, et n’hésitez pas à nous faire savoir si vous avez des questions concernant les informations que j’ai partagées ici.

2 « J'aime »

Ne trouvez-vous pas un peu ridicule de m’expliquer les détails du mode sans échec et comment trouver ma version de Discourse ?

Comme vous pouvez le voir dans la vidéo ci-dessus (je l’ai retransmise - je ne sais pas pourquoi elle était en panne aujourd’hui), j’avais activé le mode sans échec.

La version actuelle est 2a08d5d (elle était différente lorsque j’ai rédigé le rapport). Je peux également reproduire le problème ici - j’ai seulement choisi mon forum parce que les administrateurs ont plus d’options, donc le menu caché était mieux visible. Sur Meta, il est à peine visible. La plupart du temps, il semble que le bouton ne fonctionne pas du tout.

J’utilise une tablette Samsung Galaxy Tab S9 FE (Android 16) avec Firefox.


Je viens de vérifier avec Chrome - cela semble être la même chose :

Habituellement, ce genre de problème est dû au fait que ma tablette a une « taille de bureau » mais est tactile. Similaire aux problèmes ici ou ici.

2 « J'aime »

Merci, ce contexte est utile.

Je n’ai pas de tablette tactile Android, mais je peux reproduire le problème dans Firefox de manière fiable en utilisant le bouton tactile émulé.

Provisoirement, cela peut être résolu avec cette règle de style :

.composer-toggles-menu-content, .composer-actions-dropdown {
    z-index: 1100;
}

Je vais mettre à jour Discourse avec ce correctif prévu et notifier lorsque les modifications seront fusionnées. *Mise à jour : Les modifications sont fusionnées, vous verrez le correctif dans votre prochain déploiement exécutant la version d82dc7c ou plus récente.

Encore merci pour avoir signalé le problème.

3 « J'aime »

Merci !

Petite remarque : comme les modifications sur le dernier message ne remontent plus le sujet, une édition ne fonctionne pas bien en tant que notification. Un de vos collègues a dit à un moment donné qu’il valait mieux publier des mises à jour séparées. C’est intéressant que vous ne le fassiez pas souvent vous-mêmes.