Modèles de compositeur d'URL

Composant de thème
1

C’est un composant assez spécialisé pour mon site, mais je le partage ici car il pourrait être utile. Il ajoute un modèle au compositeur basé sur une chaîne dans l’URL.

Il y a eu beaucoup de discussions sur la possibilité d’avoir des modèles de compositeur pour les tags. Cela n’a pas fonctionné dans mon cas d’utilisation, alors j’ai construit ceci à la place. Il peut être utilisé en cas d’urgence, ou légèrement modifié pour fonctionner également avec les tags.

Github : GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found

Modèles de Compositeur d’URL

Un composant de thème Discourse qui pré-remplit le compositeur avec du texte modèle basé sur les paramètres d’URL. Conçu pour fonctionner de manière transparente avec Docuss afin de fournir des modèles spécifiques au contexte pour différents types d’interactions.

Fonctionnalités

  • Prise en charge des paramètres d’URL : Détecte automatiquement ?composer_template=X dans les URL et applique le modèle correspondant
  • Types de modèles multiples : Configurez jusqu’à 6 modèles différents pour différentes fonctions (rapport, participation, invitation, modèles personnalisés)
  • Ouverture automatique du compositeur : Ouvre éventuellement le compositeur automatiquement lors de la visite d’un lien Docuss sans fils de discussion existants
  • Application flexible : Les modèles peuvent s’appliquer uniquement au premier message, à toutes les réponses, ou aux deux
  • Persistance de session : Utilise sessionStorage pour maintenir la sélection du modèle lors de la navigation entre les pages
  • Mode débogage : Active la journalisation détaillée dans la console pour dépanner l’application du modèle

Installation

  1. Installez le composant de thème sur Discourse :

    • Allez dans Admin → Personnaliser → Thèmes
    • Cliquez sur « Installer » → « Depuis un dépôt Git »
    • Entrez : https://github.com/focallocal/url-composer-templates
    • Ajoutez le composant à votre thème actif

  2. Aucune reconstruction de plugin requise ! La prise en charge du paramètre composer_template existe déjà dans dcs-discourse-plugin et dcs-client.

  3. Déployez votre application React (fl-maps) avec les composants DCSLink mis à jour qui transmettent la prop composerTemplate.

  4. Configurez les modèles dans les paramètres du composant (Admin → Personnaliser → Thèmes → votre thème → url-composer-templates → Paramètres).

Configuration

Paramètres des modèles

Chaque modèle possède trois options de configuration :

Modèle 1 (Rapport)

  • template_1_id : report - La valeur du paramètre d’URL pour déclencher ce modèle
  • template_1_text : Le texte à pré-remplir dans le compositeur
  • template_1_use_for : first_post - Appliquer uniquement lors de la création de nouveaux sujets

Modèle 2 (Participation)

  • template_2_id : going - Pour les interactions de type « Je participe »
  • template_2_text : Texte pré-rempli pour les confirmations de participation
  • template_2_use_for : all_replies - Appliquer à toutes les réponses (pas aux premiers messages)

Modèle 3 (Invitation)

  • template_3_id : invite - Pour les interactions d’invitation
  • template_3_text : Texte pré-rempli pour les invitations
  • template_3_use_for : all_replies - Appliquer à toutes les réponses

Modèles 4-6 (Personnalisés)

  • Désactivés par défaut
  • Peuvent être activés et personnalisés pour des cas d’utilisation spécifiques
  • Configurez l’ID, le texte et la portée d’application selon les besoins

Paramètres d’ouverture automatique

  • enable_auto_open_composer : true - Lorsqu’il est activé, ouvre automatiquement le compositeur si :
    • Un lien Docuss est cliqué (l’URL contient ?composer_template=X)
    • Aucun fil de discussion n’existe encore pour cette combinaison de tags
    • Aide les utilisateurs à démarrer des discussions immédiatement

Mode Débogage

  • debug_mode : false - Activez pour voir les journaux détaillés de la console avec des préfixes emoji :
    • :artist_palette: Journaux d’application du modèle
    • :rocket: Journaux d’ouverture automatique du compositeur

Intégration Docuss

Intégration automatique

Le composant url-composer-templates est conçu pour fonctionner automatiquement avec Docuss. Lorsque vous avez les deux :

  • Ce composant installé sur votre instance Discourse
  • Le client et le plugin Docuss mis à jour (avec prise en charge de composer_template)

Les modèles seront appliqués automatiquement en fonction de :

  1. Mode d’interaction :
    • Mode DISCUSS → Utilise les indices triggerId (going, invite) ou utilise report par défaut
    • Mode COMMENT → Utilise le modèle report

Modèles personnalisés via attributs HTML

Pour un contrôle plus précis, vous pouvez spécifier des modèles directement dans votre HTML en utilisant l’attribut data-dcs-composer-template :

<!-- Exemple : Bouton de rapport -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  Signaler un problème
</div>

<!-- Exemple : Bouton de participation -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  Je participe !
</div>

<!-- Exemple : Bouton d'invitation -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  Inviter des amis
</div>

<!-- Exemple : Modèle personnalisé -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  Donner un avis
</div>

Correspondance des ID de modèle

Le composant fait correspondre les ID de modèle du paramètre d’URL avec les ID de modèle configurés :

Paramètre d’URL Paramètre de modèle Fonction par défaut
?composer_template=report template_1_id Rapports de bugs, problèmes
?composer_template=going template_2_id RSVP d’événements
?composer_template=invite template_3_id Invitations
?composer_template=custom1 template_4_id Utilisation personnalisée
?composer_template=custom2 template_5_id Utilisation personnalisée
?composer_template=custom3 template_6_id Utilisation personnalisée

Fonctionnement

Flux d’application du modèle

  1. Détection de l’URL : Lorsqu’un utilisateur navigue vers une URL avec ?composer_template=X, le composant stocke l’ID du modèle dans sessionStorage
  2. Interception du compositeur : Lorsque le compositeur s’ouvre, le composant recherche un ID de modèle stocké
  3. Correspondance du modèle : Trouve le modèle correspondant en fonction de l’ID
  4. Validation de la portée : Vérifie si le modèle doit s’appliquer (premier message, réponse ou les deux)
  5. Insertion du texte : Pré-remplit le compositeur avec le texte du modèle
  6. Nettoyage : Marque le modèle comme appliqué pour éviter une nouvelle application

Flux d’ouverture automatique

  1. Détection du paramètre : Vérifie si l’URL contient ?composer_template=X et si l’ouverture automatique est activée
  2. Recherche de sujet : Recherche les sujets existants avec la combinaison de tags actuelle
  3. Ouverture du compositeur : Si aucun sujet n’est trouvé, ouvre automatiquement le compositeur
  4. Application du modèle : Le modèle est ensuite appliqué via le flux normal ci-dessus

Cas d’utilisation d’exemple

Site Web d’événement

# settings.yml
template_2_id: "going"
template_2_text: "Je prévois d'assister ! 🎉\n\nAu plaisir de vous y voir."
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "J'aimerais inviter des amis à cet événement.\n\nPersonnes invitées :\n- \n\nPourquoi ils devraient venir :\n"
template_3_use_for: "first_post"

Suivi des problèmes

template_1_id: "bug"
template_1_text: "**Description du bug :**\n\n**Étapes pour reproduire :**\n1. \n2. \n3. \n\n**Comportement attendu :**\n\n**Comportement actuel :**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**Demande de fonctionnalité :**\n\n**Cas d'utilisation :**\n\n**Solution proposée :**\n"
template_4_use_for: "first_post"

Engagement communautaire

template_1_id: "question"
template_1_text: "**Ma question :**\n\n**Ce que j'ai essayé :**\n\n**Contexte supplémentaire :**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "Voici ce qui a fonctionné pour moi :\n\n**Solution :**\n\n**Pourquoi cela fonctionne :**\n"
template_2_use_for: "all_replies"

Dépannage

Les modèles ne s’appliquent pas

  1. Vérifiez le paramètre d’URL : Assurez-vous que l’URL contient ?composer_template=X où X correspond à un ID de modèle
  2. Activez le mode débogage : Activez debug_mode dans les paramètres pour voir les journaux de la console
  3. Vérifiez la portée du modèle : Vérifiez si le paramètre use_for correspond à votre action (création de sujet vs réponse)
  4. Effacez SessionStorage : Ouvrez la console du navigateur et exécutez : sessionStorage.clear()

L’ouverture automatique ne fonctionne pas

  1. Vérifiez le paramètre : Assurez-vous que enable_auto_open_composer est défini sur true
  2. Vérifiez l’URL : L’ouverture automatique ne fonctionne que lorsque l’URL contient ?composer_template=X
  3. Vérifiez les sujets existants : L’ouverture automatique ne se déclenche que lorsqu’AUCUN sujet n’existe avec la combinaison de tags
  4. Activez le mode débogage : Recherchez les journaux avec l’emoji :rocket: dans la console

Le mauvais modèle s’applique

  1. Vérifiez les ID de modèle : Assurez-vous que votre paramètre d’URL correspond exactement à l’ID du modèle (sensible à la casse)
  2. Vérifiez la priorité : Si plusieurs modèles peuvent correspondre, le premier modèle correspondant est utilisé
  3. Effacez la session : sessionStorage pourrait contenir d’anciennes valeurs : sessionStorage.clear()

Problèmes d’intégration Docuss

  1. Mettez à jour Docuss : Assurez-vous d’avoir les dernières versions de :
    • dcs-client (avec prise en charge de composerTemplate dans HtmlBased.js)
    • dcs-discourse-plugin (avec génération de paramètres d’URL dans DcsIFrame.js.es6)
  2. Vérifiez les attributs HTML : Vérifiez que data-dcs-composer-template est correctement défini sur les déclencheurs
  3. Inspectez le réseau : Vérifiez l’onglet Réseau des outils de développement du navigateur pour voir si les paramètres d’URL sont ajoutés

Historique des versions

v1.0.0 (Actuel)

  • Sortie initiale
  • Prise en charge de 6 modèles configurables
  • Sélection de modèle basée sur les paramètres d’URL
  • Ouverture automatique du compositeur pour les liens Docuss
  • Persistance SessionStorage
  • Mode débogage pour le dépannage

Contribution

Vous avez trouvé un bug ou avez une demande de fonctionnalité ? Veuillez ouvrir un problème sur le dépôt GitHub.

Licence

Ce composant est open source et disponible sous la licence MIT.

Crédits

Développé par Andy@Focallocal pour une utilisation avec Docuss - un système permettant d’intégrer des discussions Discourse dans n’importe quel site web.