Wrapper bbcode generico per i componenti del tema

[j.jaffeux (Joffrey Jaffeux)]

Ho aggiunto questa funzione un po’ di tempo fa e mi sono reso conto di non averne parlato. Ora puoi utilizzare una sintassi speciale in Markdown per renderla pronta e utilizzabile nei componenti del tema senza dover scrivere un plugin.

// racchiuso in div.d-wrap
[wrap=baz foo=bar]Contenuto[/wrap]

// racchiuso in div.d-wrap
[wrap=baz foo=bar]
Contenuto
[/wrap]

// racchiuso in div.d-wrap
[wrap=baz foo=bar]
[/wrap]

// questo verrà renderizzato come span.d-wrap invece di div.d-wrap
a [wrap=baz]Contenuto[/wrap] b

Il nome del componente verrà aggiunto come attributo data: data-wrap="baz" e ogni proprietà verrà aggiunta anch’essa come attributo data: data-foo="bar" sull’elemento.

Se vuoi leggere un caso d’uso reale, consulta

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

Ciao @j.jaffeux
Grazie per questa funzionalità! Sai qual è il modo migliore per aggiungere una funzionalità per elementi come

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Product #1" data-item-price="10.99">
  Aggiungi al carrello
</button>

nelle discussioni? E in generale, come mettere in whitelist

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

Esempio funzionante: https://codepen.io/thatfrankdev/pen/xxwRXQw

[j.jaffeux (Joffrey Jaffeux)]

Devi decorare il tuo wrap in un componente tema, come facciamo noi qui ad esempio: discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

[4ong (Anatol Myshkin)]

@j.jaffeux Grazie per il fantastico consiglio!

[sam (Sam Saffron)]

Recentemente abbiamo ampliato questo per supportare componenti generici utilizzando:

```customblock param=1
```

Questo verrà tradotto in:

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

Quindi, come componente, puoi usare data-code-wrap per determinare una gestione speciale e l’evidenziazione della sintassi è disabilitata.

Abbiamo utilizzato questo pattern qui:

GitHub - discourse/discourse-mermaid-theme-component

Che è un componente tema mermaid ufficiale.