Hashtags

010101

Hashtags

Retired April 2, 2021 (If you do not use the rich text extension this extension can still be used, but it will no longer be supported. Use at your own risk.)

Adds "hashtag to link" ability to Flarum by turning any word that begins with a "#" into a link. When the link is clicked, a search is performed for related posts. This does not track hashtag popularity.

As an added bonus, you may tag a phrase or multiple keywords with spaces, versus posting a traditional "hashtag." But, you will have to use a BBcode which looks like this (uses a "t" for tag):
[t]your search phrase[/t]

Hashtags will not convert into links if they are within a paragraph with formatting. This is on purpose to avoid any HTML/Markdown conflicts. Hashtags will turn into links if in a plain text paragraph like this one, or on their own line.

Install

composer require zerosonesfun/hashtags

Update

composer update zerosonesfun/hashtags

Remove

composer remove zerosonesfun/hashtags

Screenshot

Links

Github: https://github.com/zerosonesfun/hashtags
Packagist: https://packagist.org/packages/zerosonesfun/hashtags

Play with the code here:

SezginYILDIRIM

010101 This plugin disables FancyBox plugin. It has been tried in beta 12.

tolgaaaltas

I reported an issue on GitHub. This extension seems doesn't works fine with Turkish characters.

Alshain

tolgaaaltas

Change extend.php, Line 29:

entries[i].innerHTML = entries[i].innerHTML.replace(/#(\w+)/g,'<a href="/?q=$1" title="Find more posts tagged with #$1">#$1</a>');

entries[i].innerHTML = entries[i].innerHTML.replace(/#([a-zA-Z0-9ğüşöçİĞÜŞÖÇ]+)/g,'<a href="/?q=$1" title="Find more posts tagged with #$1">#$1</a>');

010101

tolgaaaltas Try updating this extension and let me know if it works now with Turkish characters. All I have done is, I changed the RegEx from "w" which looks for any English letter, to "S" which looks for any character. This may not work either because it seems as though current JavaScript RegEx was built to work best/easiest with English characters.

But, once JavaScript ES6 is widely adopted, there are new shortcuts available to include all Unicode.

There are also additional plugins or libraries I could add to this to ensure any new ES6 RegEx code works. But, I'm on my phone in a parking lot right now and I'm just not going down that path today.

Also, this should work even if your Flarum is in a subdirectory, I know someone mentioned that.

Finally, see Alshain's post to get an idea around how you can mess around with this part of the code yourself.

If anyone finds a better, tested and working, JavaScript RegEx, let me know! And by tested and working I mean tested with this exact extension. Because a RegEx out there might work for one situation, but not work with this extension's code. 🙂

Hiob

Great job ! Thanks @010101 🙂

tolgaaaltas

Alshain thank you. 🙂

rob006

Alshain Some more generic regexp, which may fix this for other languages too: https://stackoverflow.com/a/18185811/5812455

Also I'm pretty sure that this extension does not work correctly on forums installed in subdirectory (for example https://example.com/forum).

010101

rob006 This solution hasn't worked so far but I'll keep trying later. I read somewhere that a JavaScript RegEx should use double slashes between each character you want included. This solution has single slashes. That may or may not make a difference.

010101

Cool, really good feedback, thanks everyone! Yes, I will need to look into optimizing the regex for more languages. And, good point around the search link not working for certain installations. I think if I simply remove the slash in the URL that will fix it. Worst case I can add instructions around how to quickly/easily mess around with the search URL. Because you can also do something like, have your hashtags search Twitter instead of your forum. Or, search Google. Be right back with a new version.

rob006

010101 Works for me: https://jsfiddle.net/qskueazw/

010101 I think if I simply remove the slash in the URL that will fix it.

I think it will make it only worse - for example from this topic URL will be resolved to https://discuss.flarum.org/d/20945-hashtags?q=hashtag. You need to get forum base URL from Flarum and use it in generated URL.

tolgaaaltas

010101 Thank you for quick fix. Now works normally.

tolgaaaltas

I just figured out this extension broke FancyBox.

010101

tolgaaaltas

Sorry about that. It is because it is looking for any "#" character to know when to add a link. Certain extensions may be coded in such a way that the JavaScript in this extension breaks them because it's not smart enough to ignore certain # characters. Most of the time the JavaScript ignores behind the scenes hashtags, but it depends.

If you really love fancybox, you'll have to remove this extension. But, if you'd rather have hashtag links, remove fancybox.

Or, you could go with a different symbol. The only issue is, because of Twitter, so many people are very used to tags being #thetag. So, if you use a different beginning identifying character, your forum members would have to get used to using it instead of "#."

For example, you could go with "+." Your tags would then look like: +thetag. This way, there will be less conflicts because a lot of HTML and CSS uses #... but not + or another special character.

If you want to mess around with this, go to line 29 in this extension's extend.php file. You will see this:
entries[i].innerHTML = entries[i].innerHTML.replace(/#(\S+)/g,'<a href="/?q=$1" title="Find more posts tagged with #$1">#$1</a>');

Right after innerHTML.replace you will see (/#; change that # to another character.

Another problem with this though is if I ever release a new version of this extension and you update... you will lose this change. But, it's quick to edit and change back.

tolgaaaltas

010101 Thank you for explain the problem. Sadly, i disabled hashtags. 🙁

matteocontrini

010101 /#(\S+)/g

Add \b on both sides to make sure that only words are matched

010101

Version 1.2 Released!

(Parrot)

Now with HTML ignorify (tm)!
- In other words, now this should not break other extensions.

Proof:
https://codepen.io/zerosonesfun/pen/PMQyae

And in case you like looking at RegEx, this is the beautiful solution:
/((?!([\S])).|^)#(\S+)\b/g

So, tolgaaaltas - if you want you could try this again.

And, now the world has a new simple JavaScript snippet which I think is better than a lot of the Hashtag JavaScript snippets out there. Even this autolinker.js I found out there didn't do this. In other words, you could use this on your regular website, WordPress, or wherever and it's so easy to implement a 3 year old could do it! 🙂 Just look at how it is done on the above CodePen page.

If you already have this installed, do the good 'ol:
composer update zerosonesfun/hashtags

clarkwinkelmann

Actually, this extension breaks any other extension relying on javascript events on the post content. Because it's replacing the innerHTML of the whole post, it removes all event listeners (EDIT: actually, only paragraphs. code blocks or lists aren't affected).

This means the quotes from Flarum also partially stop working. There's no longer any preview when hovering and clicking on the mention forces a reload of the whole page instead of just scrolling to the place.

Also if there's a hashtag in the middle of an inline code block, it will be converted to a link as well.

There's an issue matching any inline content that's inside an HTML element. For example `#test` is replaced with a link to #test</code>. **#bold** is replaced with a link to bold</strong>. matteocontrini suggestion might fix this.

010101

clarkwinkelmann This means the quotes from Flarum also partially stop working. There's no longer any preview when hovering and clicking on the mention forces a reload of the whole page instead of just scrolling to the place.

Oops. Just reading this part. I thought the only issue was it not ignoring HTML or other code. Which I think is fixed now. But, you’re right. It’s breaking scrolling to mentions. But, the quote part still works for me. You sure about that part? I’m thinking it’s only the mentions. Which is big. But, that could be the last major thing to fix.

matteocontrini

I've had to do a similar thing recently and I got to this regex:

\b(WORD)\b(?![^<]*>|[^<>]*</[^p])

which is inspired by this one. From what I remember it should match anything that is inside a paragraph but not inside other HTML tags.

The regex is then applied by extending the init method of the CommentPost.

010101

@matteocontrini @clarkwinkelmann @tolgaaaltas

Something as simple as this might work too:
(?<!["])\#(\S+)

I’m at work right now so I can’t do anything related to this. But, I’ll do some testing at some point.

The above says, match hashtags, BUT, not if a “ (quote) character precedes the hashtag. Why do this? Because most of the conflicts have to do with this type of situation: <a href=“#something”> It sees that # and converts it. But, with the above regexp, that will be ignored.

I’ll try the other ideas above too.

010101

@matteocontrini Thanks for the \b suggestion. It will work at the end, preventing things like a period from being converted. So, that’s good. But, adding that at the beginning does nothing.

But I think I’ve found a solution. Something like what I posted above would work. The problem is it uses a negative look behind. Not all browsers support that yet. So, instead, the following also seems to work. I will test it out on my forum, and if it works, I’ll push out a new version for this extension.

((?!([="<])).|^)#(\S+)\b

It’s so simple, beautiful, and compact. That’s what I love.

tolgaaaltas

010101 I will try again asap. Thank you for your effort.
Edit: Still same. 🙁