Suporte HTML para modal de diálogo

Olá,

Em uma página de categoria, quando o usuário não pode criar um tópico, eu uso um texto de banner com um link para o tópico sobre níveis de confiança.
Screenshot 2022-12-09 at 9.09.29

O HTML funciona bem no banner.

Mas ao clicar em + Novo Tópico, o modal não processa o HTML.

Seria muito bom se o modal também pudesse processar HTML, assim como o modal bootbox usado anteriormente.

Obrigado :slightly_smiling_face:

3 curtidas

@pmusaraj forneceu uma solução que suporta conteúdo HTML aqui.

4 curtidas

Olá Tim,

Obrigado pela dica :slightly_smiling_face: Eu mudei isso com modifyClass, mas acho que seria uma mudança razoável tornar este diálogo htmlSafe no core, já que o banner da categoria também lida com 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 curtidas

Olá equipe!

A configuração abaixo, gostaria de solicitar a opção de poder usar um link. No meu caso, uma Categoria pode ser visualizada por todos; no entanto, você precisa pertencer a um Grupo para poder Criar e responder a tópicos.

"Texto do banner quando um usuário não pode criar um tópico nesta categoria: "

Então eu tentei usar um texto como:

Para participar, você precisa “Aplicar link ao grupo”.

Infelizmente, esta configuração suporta apenas texto simples, sem links. A equipe poderia considerar mudar isso?

2 curtidas

Eu movi sua postagem para este tópico para manter as solicitações para esta alteração juntas. :+1:

2 curtidas

Obrigado Jammydodger!

Às vezes, pode ser difícil perceber onde é melhor postar as coisas. O Discourse é enorme e isso não é necessariamente uma coisa ruim; no entanto, pode torná-lo intimidante para nós que ainda somos relativamente novos.

No entanto, é aí que sua fantástica equipe e comunidade, na maioria das vezes, são fundamentais para ajudar a todos!

2 curtidas

Olá Don e @TimJensen essa solução também corrigirá markdown como no meu exemplo abaixo? para usar:

Para participar da categoria você precisa [Aplicar](/g/groupname/members).

O código também, presumo, precisa criar um componente de tema. Em qual seção devo inseri-lo?


EDIT:
Hmm.. adicionar um arquivo js no momento pode estar um pouco além do meu nível de habilidade atual. :sad_but_relieved_face: Precisarei de um pouco de orientação para conseguir isso com sucesso.

1 curtida

Olá Dan,

O banner suporta HTML. Este tópico é sobre a caixa de diálogo que aparece quando você clica no botão Criar tópico.

Não, ele suporta HTML. Seu exemplo seria algo como isto: :arrow_down_small:

Para participar da categoria, você precisa :arrow_lower_right: Aplicar :arrow_lower_left:.

Isso deve funcionar no Header para suportar HTML na caixa de 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 curtidas

legal, então tudo que eu preciso fazer é usar html em vez de markdown.

então o banner funcionará se alguém tentar responder e/ou criar um novo tópico dentro da categoria? Onde, se eu entendi corretamente, sua solicitação está relacionada, digamos, ao componente temático do botão de novo tópico?

Com seu js, você criaria um novo componente temático e faria o upload do arquivo *.js? Há mais alguma coisa necessária nas partes de css, etc.? ou funcionará?

E se eu quiser um diálogo antes do botão de link, o que seria necessário em termos de código. minhas desculpas, ainda estou aprendendo

1 curtida

Basta criar um novo componente no admin e colar o código acima na seção Common > Header. Isso permitirá o manuseio de HTML na modal quando você clicar no botão Novo Tópico. :slightly_smiling_face:

Demonstração

Sem código
Como você pode ver, o banner suporta HTML, mas quando clico no botão Novo Tópico, a modal (diálogo) não o suporta.


Com código


Não tenho certeza do que você quer dizer com :arrow_down_small:

2 curtidas

Obrigado por explicar onde adicionar o código para a correção do HTML.

Na verdade, seu primeiro vídeo responde perfeitamente à minha pergunta e me dá clareza. O texto de diálogo prévio antes do botão de link é o mesmo que o procedimento de markdown. (O primeiro vídeo mostra isso quando falha sem o código no lugar) Eu também perdi isso no seu exemplo de código :facepalm:
ie
Para participar “markdown”
Para participar “html”

Muito obrigado por me ajudar a me esclarecer.
Dan

2 curtidas

Desculpe pela demora, pessoal, isso deve resolver: FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub

4 curtidas

Este tópico foi fechado automaticamente após 2 dias. Novas respostas não são mais permitidas.