Como acessar o conteúdo não compilado de um componente de tema?

Dev
1

Estou desenvolvendo um componente de tema onde gostaria de fazer algo semelhante a:

[code]
main() {
  printf("Hello World!\n");
}
[/code]

o que resulta em:

main() {
  printf("Hello World!\n");
}

Estou usando api.decorateCooked() para isso, mas como o conteúdo já está “cozido”, todo espaço “redundante” foi removido, por exemplo, o espaço antes de printf no exemplo acima.

Como posso acessar o texto “não cozido” exatamente como o usuário o digitou?

Para deixar claro: o que quero suportar com meu componente de tema é permitir que o usuário escreva algo como:

[mytag]
main() {
  printf("Hello World!\n");
}
[/mytag]

o que meu componente de tema entende e substitui por uma transformação do texto dentro de [mytag] ... [/mytag].

2

Para acessar o código bruto, você precisará usar um plugin.

No entanto, o que você pode fazer é usar o helper wrap, dessa forma você terá uma div para trabalhar.

[wrap=test]
hello world
[/wrap]

Renderiza para:

<div class="d-wrap" data-wrap="test">
<p>hello world</p>
</div>
3

Obrigado.

É possível instalar um plugin personalizado em uma instância do Discourse hospedada pelo próprio Discourse no plano gratuito? De qualquer forma, não consegui descobrir como fazer.

Seria possível implementar suporte para raw nos componentes de tema? Se sim, vocês aceitariam um PR para isso?

O helper wrap não faz o que eu pedi. Ele também remove a indentação.

4

Infelizmente, nossos planos gratuito, padrão e empresarial não permitem plugins personalizados. Utilizamos um cluster que hospeda muitos clientes diferentes e não temos um mecanismo para executar um plugin apenas para um único cliente.

Oferecer a capacidade de injetar uma extensão de Markdown por meio de um componente de tema é algo que considerei no passado, mas não temos planos concretos de implementá-la. Seria extremamente difícil de adicionar.

E quanto ao duplo envolvimento? Isso certamente manterá toda a indentação.

[wrap=test]
```
1
  1
    3
```
[/wrap]

Talvez até mesmo usar algo assim funcione; você terá um elemento distinto para trabalhar:

```custom
test
```
5

É extremamente difícil também para você ou apenas para alguém como eu, sem conhecimento prévio da implementação? Onde reside a dificuldade? Seria mais fácil fazer algo mais simples do que uma extensão completa do Markdown, como acesso somente leitura ao raw?

Sim, essa pode ser uma opção. Obrigado.

6

O front-end não recebe o conteúdo do post raw. Ele só recebe a versão processada (cooked). Isso significa que os payloads para o cliente são menores. Além disso, o servidor é o último responsável pela conversão de Markdown para HTML. Se fizéssemos tudo isso em tempo de execução no navegador, estaríamos adicionando muitos custos extras e teríamos vetores de segurança complicados para nos preocupar.

7

@sam Obrigado pela sua ajuda. Sua sugestão deu certo e também proporcionou uma sintaxe bastante adequada para o usuário:

Screenshot from 2020-05-04 13-40-01
Screenshot from 2020-05-04 13-40-01948×460 23.4 KB

:sunglasses:

8

Só para deixar claro: você sabe que, se o que você realmente quer são blocos de café, pode envolver blocos de código com três crases, certo? Não consigo dizer em que grau seu exemplo é uma metáfora.

9

@pfaffman Não sei o que você quer dizer com blocos de café, mas sim, sei que três crases geram um bloco de código.

Não entendo por que meu exemplo deveria ser uma metáfora. Para quê? A imagem que postei é uma captura de tela para mostrar o que meu componente de tema gera para o código fornecido.

10

Desculpe. Coffee e code são quase iguais no meu teclado móvel. Eu os escrevi errado toda vez que tentei formar a frase!

Procurei e procurei, mas não consigo ver, no seu exemplo, qual é a diferença entre a sua imagem e um bloco de código padrão.

11

O gráfico que o componente do meu tema adicionou.

12

Oh! Então você quer algo como o plugin de matemática, mas para sua linguagem de gráficos em vez de TeX?

13

Sim, eu acho que sim. Eu ainda não vi o plugin de matemática, mas parece ter um conceito similar. É a mesma função básica do Discourse Graphviz, mas este aqui consegue fazer coisas muito mais avançadas, como transições animadas entre gráficos e possui uma série de opções para controlar e estilizar tudo.

14

Também existe Discourse Graphviz, que, creio eu, ainda não resolve seu problema, já que você não pode instalar um plugin.

15

Aqui está o repositório do GitHub caso você tenha interesse. Ele ainda não foi implantado oficialmente em nenhum lugar, pois preciso escrever uma documentação detalhada sobre como usá-lo primeiro.

16

Então parece que funciona, e talvez eu esteja perdendo algo, mas a solução seria enviar suas alterações como um PR e, em seguida, nossa solução estaria disponível nos planos empresariais.

17

Desculpe, não entendi o que você quer dizer. É um componente de tema e pode ser instalado em qualquer instância do Discourse pela interface web pelo administrador, independentemente do plano que esteja utilizando.

18

Provavelmente eu não entendi. Mas parece que o que você quer fazer é estender o plugin graphviz para suportar mais recursos do Graphviz e que faz mais sentido integrá-los a esse plugin.

Mas eu realmente não entendi o que você está procurando, então posso estar completamente equivocado.

19

Agora entendi o que você quis dizer. Não, como estamos no plano gratuito, não poderíamos usar esse plugin e, portanto, desenvolvi um componente de tema em vez disso. Os recursos extras foram uma espécie de bônus que foi facilmente adicionado, pois é baseado em outra biblioteca diferente do plugin existente.

Plugins e componentes de tema são muito diferentes, então não acho que seja possível reutilizar código entre eles, mas imagino que seria possível para alguém adicionar a mesma funcionalidade ao plugin existente, caso tenham interesse.