Extras de MD Composer

[Steven]

Este componente de tema agrega algunas opciones de formato en el editor: subrayado, centrar, alinear a la derecha, justificar y tachado. Puedes personalizar el texto de cada botón en la configuración, haciéndolo compatible con todos los idiomas. Existe una versión RTL (cambia alinear a la derecha por alinear a la izquierda).

Compatibilidad

Este componente de tema es una alternativa a la Barra de herramientas de formato de Discourse, no recomiendo usar ambas.

Recomiendo el plugin, pero si no deseas (o no puedes) instalar un plugin, este componente de tema podría agregar suficientes opciones en el editor para ti.

Además, para adaptar el componente en dispositivos móviles, oculté algunos botones: lista con viñetas, lista y justificar. Parecían los menos útiles en este tipo de dispositivo.

Para foros en idiomas RTL, aquí está la versión RTL: GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

¡Házmelo saber si hay algún problema!

	Vista previa	md-composer-extras - Vista previa
	Repositorio	md-composer-extras
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

¡Es realmente increíble lo que se puede lograr con los componentes de temas! Muy bien hecho.

[verilog15 (verilog)]

¡Bien hecho
¿Crees que es posible convertir de alguna manera las etiquetas HTML a una etiqueta predeterminada como [Center] y que algo en el backend las convierta de nuevo (por razones de interfaz de usuario)?

[Steven]

En aquel momento, no era posible crear algunos bbcodes fácilmente con componentes de tema; no sé si ahora sí lo sea.

Por ahora, si deseas un botón de centrado de bbcode en el editor, la mejor opción es usar el plugin: Formatting toolbar

[Johani (Joe)]

Una etiqueta como [center] aún requerirá un plugin, pero tienes razón, @Steven

En el momento de la creación de este componente, tenías que usar las etiquetas HTML <div>. Sin embargo, ahora puedes usar [wrap="foo"][/wrap] en temas y componentes.

Puedes leer más sobre esto aquí:

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Aquí tienes un ejemplo sencillo:

[wrap="center"] 
Algun texto centrado 
[/wrap]

Esto generaría el siguiente marcado cuando se procese la publicación:

<div class="d-wrap" data-wrap="center">
  <p>Algun texto centrado</p>
</div>

Lo cual puedes seleccionar con un selector de atributo CSS de la siguiente manera:

[data-wrap="center"] {
  text-align: center;
}

Y esto generaría algo como lo que se muestra tanto en la vista previa del editor como en la publicación renderizada:

O también:

[wrap="right"] 
Algun texto alineado a la derecha 
[/wrap]

Lo que resultaría en este marcado procesado:

<div class="d-wrap" data-wrap="right">
  <p>Algun texto centrado</p>
</div>

Luego puedes agregar este CSS:

[data-wrap="right"] {
  text-align: right;
}

Para obtener este resultado:

Dado que el componente actualmente utiliza el atributo HTML align, este cambio debería ser 100 % compatible hacia atrás.

Pruébalo cuando tengas tiempo y no dudes en enviarme un mensaje privado si tienes alguna pregunta al respecto.

[thwright]

Acabo de enviar solicitudes de extracción para los componentes de envoltura.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

Añadí más solicitudes de extracción para el flotado a la izquierda, con una opción CSS para el flotado a la derecha, moví el botón de tachado para que esté junto a los botones de negrita, cursiva y subrayado, y creé un botón básico de columnas. Este último podría funcionar mejor como un componente independiente o moverse al menú emergente.

Eliminé la solicitud de extracción; necesita más modificaciones. También estoy buscando agregar botones de superíndice e subíndice, pero una vez que se añaden eventos de calendario, slick y mosaicos, hay demasiados botones en el compositor móvil en su versión vertical. No debería ser un problema en la versión horizontal, pero si todos los botones deben ser accesibles desde cualquiera de los menús, entonces deberían moverse al menú emergente.

¿Qué opinas, @Steven, sobre cómo quieres manejar esto?

Simplemente dividiré el archivo JS principal en dos archivos y trabajaré en CSS responsivo.

Idealmente, también deberíamos agregar configuraciones para desactivar/ocultar los botones según sea necesario.

---

EDITA: He implementado los cambios mencionados (pero los elementos no tienen una opción para ocultarse fuera del CSS) y solo necesito probar los cambios antes de enviar una solicitud de extracción.

[thwright]

Esa PR debería estar bien ahora, @Steven.

https://github.com/iunctis/md-composer-extras/pull/8

Esta PR implementa la adaptabilidad, las flotaciones, las columnas, el superíndice y el subíndice. Consulta el README para ver cómo funcionan las columnas.

[ondrej]

Hola,
No tengo idea de por qué estoy recibiendo esto. Lo subí el otro día. Estoy en la última versión de esto. Al menos eso es lo que me dice.
Gracias

[Steven]

Recientemente implementé una actualización, pero debería funcionar correctamente. Acabo de probarla en un sitio web tanto en escritorio como en móvil.

¿Podrías intentar eliminar el componente y reinstalarlo? Parece que está roto en tu foro.

¿O también utilizas el plugin de la barra de herramientas de formato? Podría estar creando iconos duplicados.

[ondrej]

OK, gracias. Lo revisaré y haré lo que dices. ¡Feliz cumpleaños también!

[zuker (Matías)]

¿Es posible ocultar algunos iconos?

[Steven]

¿Cuáles quieres ocultar? Te ayudo a hacerlo.

[zuker (Matías)]

Strike, sub, sup ¡Gracias!

[Steven]

La forma más sencilla sería agregar estas líneas de CSS en tu tema, en Común > CSS

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}