Wrapper genérico bbcode para componentes de tema

[j.jaffeux (Joffrey Jaffeux)]

Adicionei essa funcionalidade há algum tempo e percebi que não havia postado sobre ela. Agora você pode usar uma sintaxe especial em Markdown para que o conteúdo seja processado e utilizado em componentes de tema, sem precisar escrever um plugin.

// envolvido em div.d-wrap
[wrap=baz foo=bar]Conteúdo[/wrap]

// envolvido em div.d-wrap
[wrap=baz foo=bar]
Conteúdo
[/wrap]

// envolvido em div.d-wrap
[wrap=baz foo=bar]
[/wrap]

// este será renderizado como um span.d-wrap em vez de um div.d-wrap
a [wrap=baz]Conteúdo[/wrap] b

O nome do componente será adicionado como um atributo de dados: data-wrap="baz", e todas as propriedades também serão atributos de dados: data-foo="bar" no elemento.

Se quiser ler sobre um caso de uso real, veja

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

Olá Joffrey,

Obrigado por sugerir esse recurso no outro tópico.

Fiquei animado para tentar usá-lo e ver se funcionaria no meu caso, mas encontrei um problema.

Parece que ele ignora nomes de atributos que possuem múltiplos hífens entre si e, por padrão, seleciona apenas os caracteres após o último hífen.

Estou usando a versão v2.4.0.beta2 +33; peço desculpas se isso já foi corrigido em um commit mais recente.

Exemplos:

// Sem múltiplos hífens, isso funciona bem: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Conteúdo[/wrap]

// Dessa forma, ele omite "user" do nome do atributo e a saída é data-id="1" em vez de data-user-id="1".
[wrap=test2 user-id=1]Conteúdo[/wrap]

A solicitação a seguir é opcional: Existe uma maneira de não envolver o conteúdo dentro da div com a tag <p>?

Obrigado por esse recurso e espero poder usá-lo para resolver meu problema!

[j.jaffeux (Joffrey Jaffeux)]

Posso corrigir o primeiro problema

[j.jaffeux (Joffrey Jaffeux)]

Acabei de enviar uma correção para isso. A pequena diferença é que não vou suportar foo-bar, mas sim fooBar. Agora você pode escrever:

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

E obterá:

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

[4ong (Anatol Myshkin)]

Olá @j.jaffeux
Obrigado por essa funcionalidade! Você sabe qual é a melhor maneira de adicionar uma funcionalidade para coisas como

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Produto #1" data-item-price="10.99">
  Adicionar ao carrinho
</button>

em tópicos? E, de modo geral, como fazer a whitelist de

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

Exemplo funcional - https://codepen.io/thatfrankdev/pen/xxwRXQw

[j.jaffeux (Joffrey Jaffeux)]

Você precisa decorar seu wrap em um componente de tema, como fazemos aqui, por exemplo: discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

[4ong (Anatol Myshkin)]

@j.jaffeux Obrigado pelas ótimas dicas!

[sam (Sam Saffron)]

Recentemente, expandimos isso para dar suporte a componentes genéricos usando:

```customblock param=1
```

Isso será traduzido para:

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

Assim, como um componente, você pode usar data-code-wrap para determinar o tratamento especial e a realce de sintaxe é desabilitado.

Usamos este padrão aqui:

GitHub - discourse/discourse-mermaid-theme-component

Que é um componente de tema oficial do mermaid.