Enveloppe générique bbcode pour les composants de thème

[j.jaffeux (Joffrey Jaffeux)]

J’ai ajouté cette fonctionnalité il y a quelque temps et je me suis rendu compte que je n’en avais pas parlé. Vous pouvez désormais utiliser une syntaxe spéciale en Markdown pour qu’elle soit traitée et utilisable dans les composants de thème sans avoir à écrire de plugin.

// enveloppé dans un div.d-wrap
[wrap=baz foo=bar]Contenu[/wrap]

// enveloppé dans un div.d-wrap
[wrap=baz foo=bar]
Contenu
[/wrap]

// enveloppé dans un div.d-wrap
[wrap=baz foo=bar]
[/wrap]

// celui-ci sera rendu sous forme de span.d-wrap au lieu de div.d-wrap
a [wrap=baz]Contenu[/wrap] b

Le nom du composant sera ajouté en tant qu’attribut de données : data-wrap="baz", et chaque propriété sera également un attribut de données : data-foo="bar" sur l’élément.

Si vous souhaitez consulter un cas d’utilisation réel, consultez

Placeholder Forms

Summary Placeholder Forms will let you build dynamic documentation, by creating a form that replaces any occurrence of a =PATTERN= in your post with the value from a text or selectable input field. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-placeholder-theme-component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component …

[lcestou (Lutechi)]

Bonjour Joffrey,

Merci d’avoir suggéré cette fonctionnalité dans l’autre sujet.

J’étais enthousiaste à l’idée de l’essayer pour voir si cela fonctionnait dans mon cas, mais j’ai rencontré un problème.

Il semble ignorer les noms d’attributs contenant plusieurs tirets et se contente par défaut de prendre les caractères après le dernier tiret.

J’utilise la version v2.4.0.beta2 +33 ; je m’excuse si cela a été corrigé dans un commit plus récent depuis.

Exemples :

// Pas de tiret multiple, cela fonctionne bien : data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Contenu[/wrap]

// De cette façon, il omet "user" du nom d'attribut et le résultat est data-id="1" au lieu de data-user-id="1".
[wrap=test2 user-id=1]Contenu[/wrap]

La demande suivante est facultative : Existe-t-il un moyen de ne pas envelopper le contenu à l’intérieur du div avec la balise <p> ?

Merci pour cette fonctionnalité, et j’espère pouvoir l’utiliser pour résoudre mon problème !

[j.jaffeux (Joffrey Jaffeux)]

Je peux résoudre le premier problème

[j.jaffeux (Joffrey Jaffeux)]

Je viens de pousser une correction pour cela. La légère différence est que je ne prendrai pas en charge foo-bar, mais fooBar. Vous pouvez donc maintenant écrire :

[wrap=foo userId=1]
[/wrap]

Et vous obtiendrez :

<div data-wrap="foo" data-user-id="1">
</div>

[4ong (Anatol Myshkin)]

Bonjour @j.jaffeux,
Merci pour cette fonctionnalité ! Savez-vous quelle est la meilleure approche pour ajouter une fonctionnalité pour des éléments comme :

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Produit #1" data-item-price="10.99">
  Ajouter au panier
</button>

dans les sujets ? Et en général, comment autoriser :

class="snipcart-add-item" data-item-id="product-1"

Exemple fonctionnel : https://codepen.io/thatfrankdev/pen/xxwRXQw

[j.jaffeux (Joffrey Jaffeux)]

Vous devez décorer votre thème dans un composant de thème, comme nous le faisons ici par exemple : discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

[4ong (Anatol Myshkin)]

@j.jaffeux Merci pour ces excellents conseils !

[sam (Sam Saffron)]

Récemment, nous avons étendu cela pour prendre en charge les composants génériques en utilisant :

```customblock param=1
```

Cela sera traduit en :

<pre data-code-param="1" data-code-wrap="customblock"><code></code></pre>

Ainsi, en tant que composant, vous pouvez utiliser data-code-wrap pour déterminer une gestion spéciale et la coloration syntaxique est désactivée.

Nous avons utilisé ce modèle ici :

GitHub - discourse/discourse-mermaid-theme-component

Qui est un composant de thème mermaid officiel.