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)]

Hello Joffrey,

Thanks for suggesting this feature in the other topic.

I was excited to try to use it and see if it worked for my case, however I encountered a problem.

It seems to ignore attribute names that has multiple hyphens in between and defaults to only pick the characters after the last hyphen.

I am using v2.4.0.beta2 +33, I apologize if this has been fixed in a newer commit since.

Examples:

// No multiple hyphen this works fine: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Content[/wrap]

// This way it omits "user" from the attribute name and output is data-id="1" instead of data-user-id="1".
[wrap=test2 user-id=1]Content[/wrap]

This following request is optional: Is there a way to not wrap the content inside the div with <p> tag?

Thanks for this feature and hopefully I can use it to fix my problem!

[j.jaffeux (Joffrey Jaffeux)]

I can fix the first issue

[j.jaffeux (Joffrey Jaffeux)]

I just pushed a fix for this, slight difference is that I won’t support foo-bar but fooBar. So you can now write:

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

And you will get:

<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.