Soporte HTML para modal de diálogo

Hola,

En una página de categoría, cuando el usuario no puede crear un tema, utilizo un banner de texto con un enlace al tema sobre los niveles de confianza.
Screenshot 2022-12-09 at 9.09.29

El HTML funciona bien en el banner

Pero al hacer clic en el + Nuevo Tema, el modal no maneja el HTML.

Sería muy bueno si el modal también pudiera manejar HTML, al igual que el modal bootbox utilizado anteriormente.

Gracias :slightly_smiling_face:

3 Me gusta

@pmusaraj proporcionó una solución que admite contenido HTML aquí.

4 Me gusta

Hola Tim:

Gracias por el consejo :slightly_smiling_face: Lo cambié con modifyClass pero creo que sería un cambio razonable hacer que este diálogo sea htmlSafe en el núcleo, ya que el banner de categoría también maneja HTML.

import { htmlSafe } from "@ember/template";

export default {
  name: "dialog-html-support",

  initialize() {
    withPluginApi("0.8.7", (api) => {
      api.modifyClass("component:d-navigation", {
        pluginId: "dialog-html-support",

        actions: {
          clickCreateTopicButton() {
            if (this.categoryReadOnlyBanner && !this.hasDraft) {
              this.dialog.alert({
                message: htmlSafe(this.categoryReadOnlyBanner),
              });
            } else {
              this.createTopic();
            }
          },
        },
      });
    });
  },
};
3 Me gusta

¡Hola equipo!

La configuración que se indica a continuación me gustaría solicitar que tuviera la opción de usar un enlace. En mi caso, una categoría puede ser vista por todos; sin embargo, se necesita pertenecer a un Grupo para poder crear y responder a temas.

"Texto del banner cuando un usuario no puede crear un tema en esta categoría: "

Así que intenté usar texto como:

Para participar, necesitas “Aplicar enlace al grupo”.

Desafortunadamente, esta configuración solo admite texto plano, sin enlaces. ¿Podría el equipo considerar cambiar esto?

2 Me gusta

He movido tu publicación a este tema para mantener juntas las solicitudes de este cambio. :+1:

2 Me gusta

¡Gracias Jammydodger!

A veces puede ser difícil darse cuenta de dónde publicar las cosas. Discourse es enorme y eso no es necesariamente algo malo; sin embargo, puede resultar intimidante para aquellos de nosotros que todavía somos relativamente nuevos.

Sin embargo, ahí es donde tu fantástico equipo y comunidad son instrumentales para ayudar a todos.

2 Me gusta

Hola Don y @TimJensen ¿esta solución también corregirá markdown como en mi ejemplo a continuación? para usar:

Para participar en la categoría, necesitas [Aplicar](/g/groupname/members).

El código, supongo, también necesita crear un componente temático. ¿En qué sección debo ingresarlo?


EDITAR:
Hmm… agregar un archivo js en este momento podría estar un poco más allá de mi nivel de habilidad actual. :sad_but_relieved_face: Requeriré un poco de ayuda para lograr esto con éxito.

1 me gusta

Hola Dan,

El banner admite HTML. Este tema trata sobre el diálogo que aparece cuando haces clic en el botón Crear tema.

No, admite HTML. Tu ejemplo sería algo como esto: :arrow_down_small:

Para participar en la categoría necesitas <a href="/g/groupname/members">Aplicar</a>.

Esto debería funcionar en Header para admitir HTML en el diálogo. :slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  const { htmlSafe } = require("@ember/template");

  api.modifyClass("component:d-navigation", {
    pluginId: "dialog-html-support",
        
    actions: {
      clickCreateTopicButton() {
        if (this.categoryReadOnlyBanner && !this.hasDraft) {
          this.dialog.alert({
            message: htmlSafe(this.categoryReadOnlyBanner),
          });
        } else {
          this.createTopic();
        }
      },
    },
  });
</script>
3 Me gusta

Genial, así que todo lo que tengo que hacer es usar html en lugar de markdown.

¿Funcionará el banner si alguien intenta responder y/o crear un nuevo tema dentro de una categoría? ¿Donde, si entiendo correctamente, tu solicitud se relaciona con el tema del componente del botón de nuevo tema?

¿Con tu js simplemente crearías un nuevo componente temático y subirías el archivo *.js? ¿Se necesita algo más en las partes de css, etc.? ¿o simplemente funcionará?

Y si quiero un diálogo antes del botón de enlace, ¿qué se requeriría para codificar? Mis disculpas, todavía estoy aprendiendo.

1 me gusta

Simplemente crea un nuevo componente en administración y pega el código anterior en la sección Común > Encabezado. Permitirá manejar HTML en el modal cuando hagas clic en el botón Nuevo Tema. :slightly_smiling_face:

Demostración

Sin código
Como puedes ver, el banner admite HTML, pero cuando hago clic en el botón Nuevo Tema, el modal (diálogo) no lo admite.


Con código


No estoy seguro de a qué te refieres con :arrow_down_small:

2 Me gusta

Gracias por explicar dónde agregar el código para la corrección de HTML.

En realidad, tu primer video responde perfectamente a mi pregunta y me da claridad. El texto de diálogo previo al botón de enlace es el mismo que el procedimiento de markdown. (El primer video lo muestra cuando falla sin el código en su lugar). También me lo perdí en tu ejemplo de código :facepalm:

es decir

Para participar “markdown”
Para participar “html”

Muchas gracias por ayudarme a entender

Dan

2 Me gusta

Disculpas por la demora, amigos, esto debería solucionarlo: FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub

4 Me gusta

Este tema se cerró automáticamente después de 2 días. Ya no se permiten nuevas respuestas.