Hacer 2 clics no es realmente mucho trabajo, pero esta es una buena oportunidad para ofrecer una explicación general que documente cómo trabajar con los botones del compositor, centrándose en lo que intentas lograr.
Agregar botones a la barra de herramientas se realiza con un método diferente de la API de plugins.
La barra de herramientas utiliza este método plugin-api.js.es6#L375-L391, mientras que el menú emergente utiliza este otro plugin-api.js.es6#L396-L411.
El plugin de respuestas predefinidas utiliza el método del menú emergente de la siguiente manera:
No puedes mover el botón a menos que hagas un fork del plugin, lo cual no es muy recomendable.
Lo que sí puedes hacer es agregar otro botón en la barra de herramientas que haga lo mismo y ocultar el antiguo. Para crear un botón en la barra de herramientas, necesitarás revisar cómo se agregan otros botones.
Hay dos tipos de botones en la barra de herramientas. El primero son los botones que manejan el formato, como Negrita y Cursiva. Dado que no son similares a lo que quieres lograr, los ignoraremos por ahora.
El otro tipo son los botones que insertan elementos como fechas y emojis. Veamos el botón de fecha - calendario.
Ahora tenemos un ejemplo al que recurrir. Intentemos crear el nuevo botón.
Comenzamos con esto:
api.onToolbarCreate(toolbar => {
toolbar.addButton({
});
});
y agregamos los atributos del botón de respuesta predefinida uno por uno. Como referencia, estos son:
id: "canned_replies_button",
icon: "far-clipboard",
action: "showCannedRepliesButton",
label: "canned_replies.composer_button_text"
id: esto te permite agregar clases CSS al botón; usaremos custom-canned-button.
icon: el icono que usará el botón; lo mantendremos igual.
label: los botones emergentes tienen texto, mientras que los botones del compositor no, así que necesitamos cambiarlo a title y usar el mismo valor.
action: aquí es donde defines qué hace el botón. Pongamos todo junto:
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "custom-canned-replies",
icon: "far-clipboard",
action: "showCannedRepliesButton",
title: "canned_replies.composer_button_text"
});
});
Si lo pruebas, obtendrás un botón en la barra de herramientas, pero al hacer clic no hará nada. Esto sucede porque la acción showCannedRepliesButton no está definida. Esto ocurre debido al contexto diferente, ya que lo estás haciendo en un tema.
Si revisas el plugin de respuestas predefinidas, notarás que esa acción está definida en el controlador del compositor:
El siguiente paso es que hagas referencia al controlador del compositor para poder enviar esa acción cuando se hace clic en el botón. Puedes hacerlo así:
const composerController = api.container.lookup("controller:composer");
api.onToolbarCreate(toolbar => {
toolbar.addButton({
title: "canned_replies.composer_button_text",
id: "custom-canned-replies",
group: "extras",
icon: "far-clipboard",
sendAction: () => composerController.send("showCannedRepliesButton")
});
});
Observa que usamos el mismo patrón del botón de calendario para sendAction. Las dos únicas excepciones son que, en lugar de esto:
toolbar.context.send, usamos composerController.send
y no estamos pasando el evento, ya que creo que no es necesario.
Esto debería darte un botón completamente funcional en la barra de herramientas:
Pero aún no hemos terminado, ya que este botón ahora es visible para todos los miembros. Los permisos de uso aún se aplican y, si un usuario sin permisos intenta hacer clic, solo obtendrá un error. Sin embargo, un botón roto no es bueno, así que arreglémoslo.
Los permisos para usar respuestas predefinidas están aquí:
Así que solo necesitamos replicar esas condiciones para la adición del botón. Algo como esto:
const currentUser = api.getCurrentUser();
const canUseCannedReplies = currentUser
? currentUser.can_use_canned_replies
: false;
if (!canUseCannedReplies) return;
Esto asegurará que el botón solo se muestre si tienes los permisos requeridos.
Pongamos todo junto:
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "move-canned-button",
initialize() {
withPluginApi("0.8.7", api => {
const currentUser = api.getCurrentUser();
const canUseCannedReplies = currentUser
? currentUser.can_use_canned_replies
: false;
if (!canUseCannedReplies) return;
const composerController = api.container.lookup("controller:composer");
api.onToolbarCreate(toolbar => {
toolbar.addButton({
title: "canned_replies.composer_button_text",
id: "custom-canned-replies",
group: "extras",
icon: "far-clipboard",
sendAction: () => composerController.send("showCannedRepliesButton")
});
});
});
}
};
Esto va en este archivo dentro de un componente de tema:
javascripts/discourse/initializers/move-canned-button.js.es6
si estás usando la nueva característica Split up theme Javascript into multiple files, altamente recomendada.
O puedes simplemente agregar este script en la pestaña de encabezado de tu tema si lo estás haciendo desde el panel de administración.
Sintaxis antigua
<script type="text/discourse-plugin"
version="0.8">
const currentUser = api.getCurrentUser();
const canUseCannedReplies = currentUser
? currentUser.can_use_canned_replies
: false;
if (!canUseCannedReplies) return;
const composerController = api.container.lookup("controller:composer");
api.onToolbarCreate(toolbar => {
toolbar.addButton({
title: "canned_replies.composer_button_text",
id: "custom-canned-replies",
group: "extras",
icon: "far-clipboard",
sendAction: () => composerController.send("showCannedRepliesButton")
});
});
</script>
Lo último que necesitas es ocultar el botón antiguo, y puedes hacerlo así:
.toolbar-popup-menu-options {
[data-name="Canned replies"] {
display: none;
}
}