Auto-Linkify Words

Theme component
,
89

I just made it wiki, so go ahead :innocent:

3 Likes
90

Is there any way to linkify words in quotes? It seems whenever a linkified word is in a quote, the linkify CSS class is stripped.

91

Yes, this was an intentional decision, we thought that quote indicate that no magic should be applied. You can easily modify the code to fix that though: Just include the quotes in variables leftWordBoundary and rightWordBoundary like this

  let leftWordBoundary = "(\\s|[\"\'\\([{]|^)";
  let rightWordBoundary = "([\"\':.;,!?…\\]})]|\\s|$)";

Let me know if this works or if you need more guidance.

2 Likes
92

it seems the issue is rather that when quoting a text passage with a linkified word, it picks up the link as a regular one and adds it in markdown which obviously does not include any CSS class

so to display the link in the quote properly, the markdown link has be either stripped when pressing “quote button”. the workaround provided would help then.

93

Oh, I misunderstood. Do you mean quoting like this :arrow_double_up:? Or something else? What do you mean by “quote” button? Could you be more specific what do you mean by quoting and step by step instructions how to reproduce?

I did a test on my site and it seems to me that it works just fine inside the quoted text. (and btw: this should be largely independent of any CSS).

As long as the text is not inside the <a>, <pre>, <iframe> or <code> tags, it should work.

If this theme would be installed here in meta we could test it, but it is probably not.

EDIT: Indeed, when you quote the text with autolink, it is converted to a proper full markdown link. But I would call that a win. What are the downsides of this behaviour?

1 Like
94

Well played, Sam, well played. :face_with_raised_eyebrow:

I took a stab at it, please have a look and clean up if needed.

1 Like
95

One more small PR :angel:

I added a new settings for user-selectable excluded HTML tags. For example, in our case we do not want anything inside the header tags <hX> to be linkified.

https://github.com/discourse/discourse-linkify-words/pull/5

The default is the same as before i.e. <pre> and <code>.

Exclusion of <a> and <iframe> is hardcoded and cannot be changed by the settings.

5 Likes
96

Could this be used to add affiliate codes to URLs too? For example:

https://webshop.com/product/name

Gets linked to

https://webshop.com/product/name?code=123

I’ve been trying with regexp, but I suspect the autolinker might be interfering here?

1 Like
97

Hmm, I am not sure I am understanding correctly. What keyword do you want to get autolinked? Which regex did you use?

EDIT: So you’re trying to turn one URL into another? Yeah, in that case autolinker in Discourse would interfere. Not sure what’s the best solution here. I guess it would not be super hard to customize the code to handle this specific case. At this moment, this theme skips everything inside the <a> tag.

1 Like
98

Yeah, that’s right. Now that I know, I’ll take a look at the code and see if I can use a modified version. Thanks!

99

Yeah I think this definitely would be helpful, especially for when a poster uses the same word multiple times because it’s part of what they’re doing, it creates a page all littered with links of the same word

100

Here is a regular expression that the theme component won’t let me add:

/(козий +рынок|козьего +рынка|козьем +рынке|козьему +рынку)/i, https://forum.kozovod.com/c/kozij-rynok

As soon as I click on the green “OK” button:

image

… it does this:

image
image.png794×195 13 KB

Also, case-insensitivity flag is not preserved, e.g. /козий рынок/i won’t recognise Козий рынок

1 Like
102

Hi @meglio,

thanks for the report! I think the first problem is with the | character because it is used internally in this list input component as a delimiter. I am not quite sure how to approach this. Any ideas, @joffreyjaffeux?

A workaround for now would be to split the regex into several different regexes without |

As for the case sensitivity, do you see a problem only in this specific example or does it not work for you at all? I wonder whether this flag works for non-latin alphabets?

2 Likes
103

Yes looks so. I’d suggest allowing either a backslashed “|” or a double “||” as a valid "| symbol in regex. Maintaining 4 regexes instead of one is a workaround though.

I only tried with non-latin alphabets as that’s what is used on our forum.

1 Like
104

@maja can you suggest a way for @meglio to enter his regular expression?

1 Like
105

I think fundamentally we need a way of escaping pipes in lists, double pipe is sort of workable but requires a custom list parser, I suspect we just need to fix this at the source and allow site settings and theme settings to natively support this. I guess a workaround for now in this theme setting is to use a very rare char as the item separator like a rare Unicode seldom used and split on that

5 Likes
106

Hmm, but how do you set the splitting character? Can it be specified in the settings.yaml?

https://github.com/discourse/discourse-linkify-words/blob/aa8156eaab881740d4245a47db951935462dc463/settings.yaml#L1

Because in the JS code itself, the | char seems to be “hard-coded”

https://github.com/discourse/discourse-linkify-words/blob/aa8156eaab881740d4245a47db951935462dc463/common/head_tag.html#L5

1 Like
107

Yeah we need a new change to select kit to support this cc @joffreyjaffeux

4 Likes
108

Can I suggest there is a checkbox to make this case sensitive? Or the the trigger is based on regex?

For example I’d like it to trigger for Discourse but not discourse.

Would this be a suggestion you guys can take on, or would you be open to a Pull Request?

2 Likes
109

Sure totally open to having a PR here.

2 Likes