Auto-Linkify Palavras

ErikMH · Janeiro 8, 2020, 4:51pm

Tenho o Linkify funcionando quase exatamente como eu quero:

/TBI\s*\W?(\d*)/,https://tbi.example.com/tbi/$1/

Isso cobre os “números TBI” inseridos pelos usuários em muitas formas diferentes:

TBI 17
TBI-17
TBI17
TBI -17
TBI*17
etc.

Gosto dessa flexibilidade.

Infelizmente, ele não lida com a forma canônica de inserir esses números:

TBI #17

Parece que nada que eu faça conseguirá corresponder corretamente ao # (hashtag, hash, sinal de número, octothorpe, marca de hash, sinal de libra, símbolo de jogo da velha). Já tentei

/TBI\s*#?(\d*)/,https://tbi.example.com/tbi/$1/
/TBI\s*\#?(\d*)/,https://tbi.example.com/tbi/$1/

obviamente, e não funcionaram; mas nem mesmo um curinga completo funciona:

/TBI\s*.?(\d*)/,https://tbi.example.com/tbi/$1/

Parece que a funcionalidade de pop-up de categorias pode estar assumindo isso e não permitindo que o Linkify realize sua correspondência — mesmo quando o usuário não escolhe uma das categorias oferecidas.

Esse é o comportamento esperado ou um bug? Alguém sabe de uma maneira de contornar isso?

danekhollas · Janeiro 8, 2020, 8:30pm

Sim, se você inspecionar o código-fonte HTML, o Discourse parece colocar qualquer coisa precedida por hashtag em um elemento span separado, o que quebra o fluxo do tema linkify. Não acho que haja uma solução fácil para isso, desculpe. Você precisaria fazer um fork do tema e personalizá-lo especificamente para este caso, receio, a menos que alguém tenha uma ideia melhor.

eextra · Janeiro 9, 2020, 2:16pm

Esse plug funciona bem, obrigado. No entanto, em combinação com o abrify, não funciona.
É possível que o link funcione também com a classe que ele adiciona com este plugin:
GitHub - metabrainz/discourse-abbrify-words: Discourse theme component for automatically adding <abbr> to abbreviations and acronyms · GitHub.

danekhollas · Janeiro 9, 2020, 2:50pm

Acho que o problema é que o plugin abbrify ignora as tags de link por padrão. Você pode tentar corrigir isso modificando o código e excluindo a linha 16 em head_tag.html

'a': 1,

github.com/metabrainz/discourse-abbrify-words

common/head_tag.html

a6651cf1c


      
            let split = pair.split(",");
            words[split[0].toLowerCase()] = split[1];
          });
          
          if (!hasWords) {
            return;
          }
          
          // roughly guided by https://stackoverflow.com/questions/8949445/javascript-bookmarklet-to-replace-text-with-a-link
          let skipTags = {
            'a': 1,
            'abbr': 1,
            'iframe': 1,
            'code': 1,
            'pre': 1
          };
          
          let escapeRegExp = function(str) {
             return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
          }

Me avise se funcionou ou se precisar de mais orientações.

eextra · Janeiro 9, 2020, 2:54pm

Parece que está funcionando, muito obrigado.

A propósito, faz alguma diferença se ele editar apenas no template CSS/HTML em vez de diretamente no GitHub?

danekhollas · Janeiro 9, 2020, 3:05pm

Sim, você precisa ter cuidado ao atualizar o componente do tema a partir do GitHub, pois ele substituirá suas alterações locais no CSS/HTML.

eextra · Janeiro 9, 2020, 3:11pm

Obrigado. Eu me pergunto se é possível fazer o mesmo, mas adicionar uma classe diferente em vez do atributo abriffy, por exemplo, dfn data-info ou span aria-label ou outro desse tipo

por exemplo, para brincar com o conteúdo: attr()

danekhollas · Janeiro 9, 2020, 3:18pm

Sim, com certeza. Você pode tentar brincar com a função createAbbr (ou com a função correspondente no tema linkify)

github.com/metabrainz/discourse-abbrify-words

common/head_tag.html

a6651cf1c


      
          
          let escapeRegExp = function(str) {
             return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
          }
          
          let keys = Object.keys(words).sort((x,y) => y.length - x.length);
          
          let escapedWords = "((" + keys.map(w => escapeRegExp(w)).join(")|(") + "))";
          let regex = new RegExp("(\\W|^)" + escapedWords + "(\\W|$)", "ig");
          
          let createAbbr = function(text) {
              let lower = text.toLowerCase();
              let title = words[lower];
              var abbr = document.createElement('abbr');
              abbr.innerHTML = text;
              abbr.title = title;
              abbr.className = 'abbrify-word';
              return abbr;
          };
          
          let autoabbr = function(text) {

eextra · Janeiro 9, 2020, 3:30pm

Muito bom. Tenho que experimentá-lo um pouco.
Acho que pode haver muitas possibilidades aqui. Você tem alguma ideia de como usar JSON e API de alguma forma?

Por exemplo, para exibir palavras do Abriefy e outros dados no WordPress por meio da API?

danekhollas · Janeiro 9, 2020, 3:43pm

Não tenho certeza do que você quer dizer. Poderia ser mais específico sobre o que está tentando alcançar? Os componentes do tema rodam no Discourse; não há uma API para usá-los em outro lugar. No entanto, na maioria dos casos, você deve conseguir usar o código JavaScript simplesmente copiando-o para outro lugar e modificando as partes específicas do Discourse.

jrgong · Fevereiro 20, 2020, 12:42pm

Existe alguma maneira de excluir o conteúdo em oneboxes de ser convertido em links?

danekhollas · Fevereiro 20, 2020, 2:01pm

Você pode tentar adicionar a tag <aside> nas configurações de tags ignoradas. Embora eu não tenha certeza de que todos os oneboxes estejam dentro do <aside>. Talvez precisemos de um filtro baseado no nome da classe,

@sam, o que você acha disso? Isso pareceria um comportamento padrão razoável (não criar links automáticos em oneboxes).

sam · Fevereiro 21, 2020, 12:28am

A configuração de filtro baseada em classes parece perfeita; por padrão, devemos excluir uma caixa.

danekhollas · Fevereiro 23, 2020, 7:28pm

Certo, vou tentar enviar uma PR na próxima semana.

cherrot · Fevereiro 24, 2020, 9:52am

Olá, instalei com sucesso este componente de tema para o meu tema padrão Light hoje. No entanto, ele não está funcionando para mim.

Tentei usar regex e as palavras linkificadas padrão (discourse e meta). Nenhum dos dois funcionou.

Tenho instalado a versão v2.3.0.beta2 +256. Alguma dica para depurar isso, por favor? Obrigado desde já

danekhollas · Fevereiro 28, 2020, 6:16pm

Realizamos uma refatoração de código recentemente e é possível que você precise atualizar seu Discourse (o que é conveniente, já que a versão 2.4 acabou de ser lançada )

danekhollas · Março 10, 2020, 4:50pm

O Linkify nas oneboxes agora deve estar desativado por padrão. @jrgong, você poderia atualizar seu tema e testar?

github.com/discourse/discourse-linkify-words

FEATURE: New excluded classes setting. (#16)

master ← danielhollas:excluded_classes

merged 03:20PM - 10 Mar 20 UTC

danielhollas

+29 -10

As per user request on meta: https://meta.discourse.org/t/linkify-words-in-post/…82193/160?u=danekhollas By default, we will not autolink inside oneboxes. The easiest way to test this is in quotes, by adding `quote` as an excluded class. ![image](https://user-images.githubusercontent.com/9539441/75583097-46900480-5a6d-11ea-8a59-285350fdf07c.png) FYI @SamSaffron

tomtjes · Abril 14, 2020, 2:59am

Parece que isso ainda não foi resolvido? Eu achei que poderia criar um backup exportando o componente pela interface de administração, mas a exportação não inclui as configurações personalizadas.

Uma ideia: e se a configuração, com todas as suas linhas, se transformasse em uma área de texto editável ao ser clicada duas vezes? Algo semelhante aos editores Editar CSS/HTML? Isso facilitaria muito o backup/exportação, além de permitir importar uma lista de itens com um item por linha.

Antes:

Ao clicar duas vezes:

Mudando de assunto: você pode ver algumas Regex estranhas ali, mas não é possível usar | nesses campos de configuração. Talvez isso também pudesse ser resolvido com a proposta acima.

eextra · Maio 29, 2020, 2:46pm

Olá novamente, meu amigo! Como você acha que seria transformar palavras ou links (usando o plugin linkify/abrify) em imagem(s)?

danekhollas · Maio 29, 2020, 3:04pm

Provavelmente não é possível com o plugin atual, mas não deve ser difícil modificar o plugin para gerar tags <img> em vez de <a>.

Tópico		Respostas	Visualizações
Add <abbr> tags to words in posts Theme component	26	8353	5 de Outubro de 2023
In-line topic search-and-linking, e.g. Roam-like bracket links Feature	18	1913	9 de Agosto de 2022
Start a topic by pasting a link (like Reddit) Announcements new-feature , featured-link	75	11977	27 de Março de 2017
How can I enable: Auto-hyperlinking text to reference to other posts? Support	5	1056	28 de Março de 2023
Auto-replace text with link to topic Support	3	2749	17 de Janeiro de 2022

Auto-Linkify Palavras

Tópicos relacionados