Wrapper bbcode generico per i componenti del tema

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

20 Mi Piace

Ciao Joffrey,

Grazie per aver suggerito questa funzionalità nell’altro argomento.

Ero entusiasta di provare a usarla e vedere se funzionava nel mio caso, tuttavia ho riscontrato un problema.

Sembra ignorare i nomi degli attributi che contengono più trattini e si limita a selezionare i caratteri dopo l’ultimo trattino.

Sto utilizzando la versione v2.4.0.beta2 +33; mi scuso se ciò è stato corretto in un commit più recente.

Esempi:

// Nessun trattino multiplo, funziona correttamente: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Contenuto[/wrap]

// In questo modo viene omesso "user" dal nome dell'attributo e l'output è data-id="1" invece di data-user-id="1".
[wrap=test2 user-id=1]Contenuto[/wrap]

Questa richiesta seguente è facoltativa: esiste un modo per non avvolgere il contenuto all’interno del div con il tag <p>?

Grazie per questa funzionalità e spero di poterla utilizzare per risolvere il mio problema!

Posso risolvere il primo problema

1 Mi Piace

Ho appena applicato una correzione per questo: la piccola differenza è che non supporterò foo-bar ma fooBar. Ora puoi scrivere:

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

E otterrai:

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

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

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

4 Mi Piace

@j.jaffeux Grazie per il fantastico consiglio!

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:

Che è un componente tema mermaid ufficiale.

9 Mi Piace