Envoltorio genérico bbcode para componentes de tema

[j.jaffeux (Joffrey Jaffeux)]

Agregué esta función hace un tiempo y me di cuenta de que no había publicado nada al respecto. Ahora puedes usar una sintaxis especial en Markdown para que se procese y sea utilizable en componentes del tema sin necesidad de escribir un plugin.

// envuelto en div.d-wrap
[wrap=baz foo=bar]Contenido[/wrap]

// envuelto en div.d-wrap
[wrap=baz foo=bar]
Contenido
[/wrap]

// envuelto en div.d-wrap
[wrap=baz foo=bar]
[/wrap]

// este se renderizará como un span.d-wrap en lugar de un div.d-wrap
a [wrap=baz]Contenido[/wrap] b

El nombre del componente se agregará como un atributo de datos: data-wrap="baz" y cada propiedad también será un atributo de datos: data-foo="bar" en el elemento.

Si deseas leer sobre un caso de uso del mundo real, 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)]

Hola @j.jaffeux
¡Gracias por esta función! ¿Sabes cuál es la mejor manera de agregar una función para cosas como:

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Producto #1" data-item-price="10.99">
  Agregar al carrito
</button>

en los temas? Y en general, para permitir explícitamente:

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

Ejemplo funcional: https://codepen.io/thatfrankdev/pen/xxwRXQw

[j.jaffeux (Joffrey Jaffeux)]

Necesitas decorar tu tema en un componente de tema, como hacemos aquí, por ejemplo: discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

[4ong (Anatol Myshkin)]

@j.jaffeux ¡Gracias por el excelente consejo!

[sam (Sam Saffron)]

Recientemente, ampliamos esto para admitir componentes genéricos usando:

```customblock param=1
```

Esto se traducirá a:

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

Por lo tanto, como componente, puede usar data-code-wrap para determinar el manejo especial y el resaltado de sintaxis está deshabilitado.

Usamos este patrón aquí:

GitHub - discourse/discourse-mermaid-theme-component

Que es un componente de tema oficial de mermaid.