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

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

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.