Interação entre componente de tema, javascript do tema e "previews"

[craigconstantine]

j/s

Tenho algum j/s personalizado no meu tema. (É a minha solução para: Interactive SVG using <object>? - #9 by craigconstantine ) Eventualmente, vou mover o j/s para um repositório Git e instalá-lo como um componente de tema adequado. Por enquanto, simplesmente tenho o j/s colado no cabeçalho do meu tema. Imagino que esse problema possa desaparecer se eu instalasse esse j/s como um componente adequado, mas não parece ser esse o caso para mim.

Meu j/s modifica o DOM antes de ser enviado ao navegador…

api.decorateCooked(
    $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
    { id: 'umbdv' }
);

Em ação…

Ele seleciona os <div data-custom="… apropriados e, em seguida, adiciona novos elementos. Por exemplo, na captura de tela a seguir, tudo abaixo das setas é inserido pelo j/s. (Você pode vê-lo em ação aqui: https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

O que estou vendo…

Estou usando o componente Topic List Previews ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ) e meu j/s parece não ser chamado.

Nesta captura de tela, a string /vmm/gibberish… é o conteúdo bruto do <div data-custom="… aparecendo porque meu j/s nunca chega até ele via api.decorateCooked(….

A mesma coisa acontece nos e-mails que são enviados…

O que eu gostaria…

Na verdade, não quero que ele faça a substituição completa. Longa história. Eu apenas gostaria de expandir meu j/s para que ele possa colocar uma string estática lá, em vez do gibberish puro do meu bloco <div data-custom="….

Existe algum outro método api. no qual eu possa me conectar?

[david (David Taylor)]

Infelizmente, não há uma API JavaScript para modificar os ‘excertos’ dos tópicos na lista de tópicos. Os componentes de tema também não têm acesso ao conteúdo renderizado no lado do servidor (ou seja, e-mails) por motivos de segurança. Se você quiser modificar e-mails, precisará usar um plugin.

No entanto, me pergunto se podemos resolver isso de outra maneira. Atualmente, você está colando algo assim no editor:

<div data-custom="umbdv">/vmm/longstringhere</div>

Em vez disso, você poderia fazer algo assim:

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  conteúdo de fallback para e-mails/excertos
</div>

Ou, se estiver se sentindo super criativo, você pode usar o wrapper genérico de BBCode para fazer isso:

[wrap=umbdv longstring="/vmm/longstringhere"]
Conteúdo de fallback
[/wrap]

Isso gerará automaticamente um div como:

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">Conteúdo de fallback</p>
</div>

Em seguida, você precisará ajustar o código do seu componente de tema para que ele exclua o conteúdo de fallback e o substitua pelo que você deseja exibir.

[craigconstantine]

…ooooooooh, isso resolveria. Vou fazer alguns ajustes e aviso de volta.

[craigconstantine]

…sim, funciona perfeitamente @david, obrigado!

[pfaffman (Jay Pfaffman)]

Às vezes, o não é o suficiente. Esta é uma ótima resposta, e estou muito perto de entender JavaScript e CSS o suficiente para d-wrap minha cabeça com isso.