Auto-enlazar palabras

ErikMH · 8 Enero, 2020 16:51

Tengo Linkify funcionando casi exactamente como quiero:

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

Esto cubre los “números TBI” ingresados por los usuarios en muchas formas diferentes:

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

Me gusta esta flexibilidad.

Desafortunadamente, no maneja la forma canónica de ingresar estos números:

TBI #17

Parece que nada de lo que pueda hacer coincidirá correctamente con el # (hashtag, almohadilla, signo numeral, octotopo, marca de hash, signo de libra, símbolo de tres en raya). He probado

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

por supuesto, y no funcionan; pero ni siquiera un comodín completo funciona:

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

Parece que la funcionalidad emergente de categorías podría estar interfiriendo y no permitiendo que Linkify realice su trabajo de coincidencia, incluso cuando el usuario no elige una de las categorías ofrecidas.

¿Es este un comportamiento esperado o un error? ¿Alguien conoce alguna forma de solucionarlo?

danekhollas · 8 Enero, 2020 20:30

Sí, si inspeccionas el código fuente HTML, Discourse parece colocar cualquier cosa precedida por el símbolo de almohadilla (#) en un elemento separado, lo que interrumpe el flujo del tema linkify. No creo que haya una solución sencilla para esto, lo siento. Teme que tengas que bifurcar el tema y personalizarlo específicamente para este caso, a menos que alguien tenga una mejor idea.

eextra · 9 Enero, 2020 14:16

Este complemento funciona bien, gracias. Sin embargo, en combinación con abrify no funciona. ¿Es posible que el enlace también funcione con la clase que añade este plugin: GitHub - metabrainz/discourse-abbrify-words: Discourse theme component for automatically adding <abbr> to abbreviations and acronyms · GitHub.

danekhollas · 9 Enero, 2020 14:50

Creo que el problema es que el plugin abbrify omite las etiquetas de enlace de forma predeterminada. Puedes intentar solucionarlo modificando el código, eliminando la línea 16 en 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, "\\$&");
          }

Avísame si funcionó o si necesitas más orientación.

eextra · 9 Enero, 2020 14:54

Parece que está funcionando, muchas gracias.

Por cierto, ¿hay alguna diferencia si se edita solo en la plantilla de CSS/HTML en lugar de hacerlo directamente desde GitHub?

danekhollas · 9 Enero, 2020 15:05

Sí, debes tener cuidado al actualizar el componente del tema desde GitHub, ya que sobrescribirá tus cambios locales en CSS/HTML.

eextra · 9 Enero, 2020 15:11

Gracias, me pregunto si es posible hacer lo mismo, pero agregar una clase diferente en lugar del atributo abriffy, por ejemplo, dfn data-info o span aria-label u otro de este tipo

por ejemplo, para jugar con el contenido: attr()

danekhollas · 9 Enero, 2020 15:18

Sí, definitivamente. Puedes probar jugando con la función createAbbr (o con la función correspondiente en el 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 · 9 Enero, 2020 15:30

Muy bueno. Tengo que probarlo un poco.
Supongo que aquí puede haber muchas posibilidades. ¿Tienes alguna idea de cómo usar JSON y la API de alguna manera?

Por ejemplo, para poder mostrar palabras de Abriffy y otros datos en WordPress a través de la API?

danekhollas · 9 Enero, 2020 15:43

No estoy seguro de a qué te refieres. ¿Podrías ser más concreto sobre lo que intentas lograr? Los componentes de tema se ejecutan en Discourse; no existe una API para usarlos en otros lugares. Sin embargo, en la mayoría de los casos, deberías poder usar el código JS simplemente copiándolo a otro lugar y modificando las partes específicas de Discourse.

jrgong · 20 Febrero, 2020 12:42

¿Hay alguna manera de excluir el contenido en oneboxes de que se convierta en enlace?

danekhollas · 20 Febrero, 2020 14:01

Puedes intentar agregar la etiqueta <aside> en la configuración de etiquetas omitidas. Aunque no estoy seguro de que todos los oneboxes estén dentro de la etiqueta <aside>. Quizás necesitemos un filtro basado en el nombre de la clase,

@sam, ¿qué opinas de esto? Esto parecería un comportamiento predeterminado razonable (no autolink en oneboxes).

sam · 21 Febrero, 2020 00:28

La configuración de filtro basada en clases suena perfecta; por defecto, deberíamos excluir un cuadro.

danekhollas · 23 Febrero, 2020 19:28

Vale, intentaré enviar un PR la próxima semana.

cherrot · 24 Febrero, 2020 09:52

Hola, hoy he instalado correctamente este componente de tema para mi tema predeterminado Light. Sin embargo, no funciona para mí.

He probado con expresiones regulares y con las palabras de enlace predeterminadas (discourse y meta). Ninguna ha tenido éxito.

Tengo instalada la versión v2.3.0.beta2 +256. ¿Tienen algún consejo para depurar esto? Gracias de antemano

danekhollas · 28 Febrero, 2020 18:16

Hemos realizado una refactorización del código recientemente y es posible que debas actualizar tu Discourse (lo cual es conveniente de todos modos, ya que acaba de lanzarse la versión 2.4 )

danekhollas · 10 Marzo, 2020 16:50

Linkify en oneboxes ahora debería estar deshabilitado de forma predeterminada. @jrgong ¿Podrías actualizar tu tema y probarlo?

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 · 14 Abril, 2020 02:59

Parece que esto aún no se ha resuelto. Pensé que podría crear una copia de seguridad exportando el componente desde la interfaz de administración, pero la exportación no incluye la configuración personalizada.

Una idea: ¿y si la configuración con todas sus filas se convierte en un área de texto editable al hacer doble clic? Algo similar a los editores Editar CSS/HTML. Eso facilitaría la copia de seguridad y la exportación, así como la importación de una lista de elementos con un elemento por línea.

Antes:

Al hacer doble clic:

Por otro lado: es posible que veas algunas expresiones regulares extrañas allí, pero no se puede usar | en estos campos de configuración. Quizás eso también se podría solucionar con la propuesta anterior.

eextra · 29 Mayo, 2020 14:46

¡Hola de nuevo, amigo! ¿Qué te parece convertir palabras/enlaces en imagen(es) usando el plugin linkify/abrify?

danekhollas · 29 Mayo, 2020 15:04

Probablemente no sea posible con el plugin actual, pero no debería ser difícil modificarlo para que genere etiquetas <img> en lugar de <a>.

Tema		Respuestas	Vistas
Add <abbr> tags to words in posts Theme component	26	8353	5 Octubre 2023
In-line topic search-and-linking, e.g. Roam-like bracket links Feature	18	1913	9 Agosto 2022
Start a topic by pasting a link (like Reddit) Announcements new-feature , featured-link	75	11972	27 Marzo 2017
How can I enable: Auto-hyperlinking text to reference to other posts? Support	5	1053	28 Marzo 2023
Auto-replace text with link to topic Support	3	2747	17 Enero 2022

Auto-enlazar palabras

Temas relacionados