Envoltorio genérico bbcode para componentes de tema

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:

20 Me gusta

Hola Joffrey,

Gracias por sugerir esta función en otro tema.

Estaba emocionado por probarla y ver si funcionaba en mi caso, pero me encontré con un problema.

Parece que ignora los nombres de atributos que tienen múltiples guiones en medio y, por defecto, solo toma los caracteres después del último guion.

Estoy usando la versión v2.4.0.beta2 +33; disculpa si esto ya se ha corregido en un commit más reciente.

Ejemplos:

// Sin múltiples guiones, esto funciona bien: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Contenido[/wrap]

// De esta forma omite "user" del nombre del atributo y el resultado es data-id="1" en lugar de data-user-id="1".
[wrap=test2 user-id=1]Contenido[/wrap]

La siguiente solicitud es opcional: ¿Existe alguna forma de no envolver el contenido dentro del div con la etiqueta <p>?

Gracias por esta función y espero poder usarla para solucionar mi problema.

Puedo solucionar el primer problema

1 me gusta

Acabo de aplicar una corrección para esto. La diferencia menor es que no admitiré foo-bar, sino fooBar. Ahora puedes escribir:

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

Y obtendrás:

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

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

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

4 Me gusta

@j.jaffeux ¡Gracias por el excelente consejo!

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í:

Que es un componente de tema oficial de mermaid.

9 Me gusta