Extras de MD Composer

¿Es posible mover la opción de Crear encuesta (en escritorio) fuera del menú extra y junto al resto de los botones de formato?

Al igual que tu solicitud en móvil, requiere una edición un poco más compleja, que no puedo agregar en este componente del tema. Pero debería ser factible en un componente personalizado para escritorio siguiendo la lógica presentada por angus y spirobel.

3 Me gusta

¿Cómo se pueden quitar los botones del centro y alinear los de izquierda y derecha?

Por cierto, me encanta este componente.

¡Hola!

Puedes agregar estas líneas de CSS en tu tema o en un componente:

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

Supongo que te referías al botón de justificar, ya que el de alineación a la izquierda no se ha añadido en el mismo componente.

1 me gusta

¿Es posible mover todos estos nuevos botones dentro del botón/menú Opciones?

Es posible, pero tendrás que indagar un poco en el código.

En Escritorio > Cabecera encontrarás todo el JavaScript; solo necesitas cambiar algunas líneas.

Por ejemplo, el código para un botón en la barra de herramientas se ve así:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "underline_button",
        group: "fontStyles",
        icon: "underline",
        perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
    });
});

Debes cambiarlo usando esto:

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "underline",
      icon: "underline",
      label: "underline_button"
  };
});

Y agrega la acción en esta parte:

api.modifyClass("controller:composer", {
  actions: {
    underline() {
      this.get("toolbarEvent").applySurround('[u]', '[/u]', "underline_text");
    },
    floatleft() {
      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
    },
    columns() {
      this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
    }
  }
});

La traducción debería estar bien.

Verás rápidamente si hay algún error, ya que Discourse muestra mensajes de error al guardar los cambios.

5 Me gusta

Gran componente, @Steven. Sería genial si también pudiéramos tener H1, H2 y H3.

2 Me gusta

¿Se puede agregar el [color] [/color] a este componente del tema? Si es así, sería perfecto, ya que entonces se podría usar el compositor oficial de Discourse con bbcode+md. Actualmente estoy usando la barra de herramientas de formato + mdcomposer. Claro, puedo usar CSS para ocultar los botones adicionales, pero hay lugares donde no se usa CSS, como en el panel de administración o en el plugin Custom Wizard de Pavilion. El botón de color se usa mucho.

Esto es lo que tengo con CSS: (lo cual es perfecto)
image

Esto es lo que tengo sin él:
image

1 me gusta

Mi plan es tener un componente para quienes no deseen usar un plugin. Pero crearé una rama con color bbcode. Lo probaré en unas horas si tengo tiempo. Te avisaré cuando esté listo y cómo instalarlo.

Probablemente aprovecharé el tiempo para reorganizar el componente del tema; prefiero un tc simple por defecto. Usaré una rama con todas las opciones que incluya botones de subíndice, y una rama bbcode para quienes tengan el plugin oficial de bbcode.

2 Me gusta

Gracias, los botones de subíndice/superíndice son una de las razones para seguir usando el editor md, algo que otros complementos y componentes de temas carecen. El bbcode oficial incluye muchas cosas que no están en el complemento de la barra de herramientas de formato, como el [spoiler] [/spoiler]. Para tener lo mejor de ambos mundos, creo que es mejor mantener el bbcode de Discourse y luego agregar los botones que necesitamos a través de mdcomposer.

No pensé que los botones de scripts fueran populares, así que los mantendré en el componente base.

Haré algunas ramas: una sencilla con solo algunos botones de formato básico, y una rama de color que añade un bbcode de color.

2 Me gusta

¡Hola a todos,

Solo quería informarles que se ha agregado una nueva rama color al compositor de markdown. Ahora pueden usar el plugin oficial de bbcode de Discourse + el compositor de markdown (rama color) + la alerta de spoilers de Discourse (difuminar spoilers). Creo que esta es la mejor combinación disponible para los botones del compositor en Discourse.

También existe la idea de agregar un selector de color usando esta biblioteca gratuita:

Si alguien quiere ayudar y sabe cómo agregar un selector de color, ¡no dude en ayudar a Steven!

2 Me gusta

¿Cómo podría ocultar o eliminar completamente algunos de estos botones? Solo necesitamos unos pocos y noté que al eliminar un botón no se elimina el elemento que sigue apareciendo en la lista (seguirá siendo un espacio en blanco sin ningún icono visible).

La mejor manera es agregar algunas líneas de CSS en tu tema actual

Te di estos ejemplos para los botones de alineación, si quieres eliminarlos

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

También puedo darte el código CSS para los botones específicos que quieras ocultar

5 Me gusta

Hola Steven, gran componente. ¡Gracias por compartir!

Una pregunta rápida: ¿Sería posible implementar algunos botones para agregar espacios de no separación (por ejemplo, nbsp, ensp, emsp)? ¿Qué debería usar en lugar de applySurround?

Algunos miembros de mi comunidad tienen dificultades para formatear las publicaciones (principalmente la sangría) y creo que sería útil para ellos.

¡Gracias!

Sí, puedes agregar fácilmente un botón y, en lugar de applysurround, usar addText

Tengo este ejemplo antiguo que puedes usar

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "br_button",
        group: "extras",
        icon: "level-down-alt",
        perform: e => e.addText('<br>', 'br_text')
    });
});
3 Me gusta

¡Gracias! ¡Eso funcionará!

Hmm… Parece que no tienes tachado en la Barra de herramientas de formato de Discourse, pero sí aquí. Prefiero la Barra de herramientas de formato, ya que tiene todo lo demás y más, pero me gustaría tener el tachado como opción. ¿Qué recomiendas, dado que la compatibilidad es un problema entre estos dos?

Podría añadir un botón de tachado en la barra de herramientas del plugin, podría ser relevante en el futuro.

Lo pensaré, pero mientras tanto, puedes usar el plugin y añadir este componente: GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer

Añadirá un botón de tachado en la acción del menú emergente, es compatible con el plugin.

3 Me gusta

Envié un PR: https://github.com/MonDiscourse/md-composer-extras/pull/10 que, a menos que haya omitido una coma o algo así, debería solucionar

Para evitar errores en las pruebas, agregue una clave `pluginId` a su llamada `modifyClass`. Esto asegurará que la modificación solo se aplique una vez.
2 Me gusta