Hashtags

tolgaaaltas

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

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

matteocontrini

010101 /#(\S+)/g

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

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. 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. 🙁

010101

tolgaaaltas I tested it on my Flarum. It ignores HTML type characters. So, there must be another reason it is conflicting with that one extension. Can you post screenshots? And after re-adding this extension did you ensure caches were clear?

It could be a basic JavaScript conflict. Which happens. Anything in your browser’s dev console? Any errors being reported anywhere else?

010101

Version 1.3 Released!

(Woodpecker) 🌳 ⛏️

Thanks everyone for helping me spot conflicts. It seems like, on my forum at least, that all major conflicts have been resolved. Could there still be a conflict with a particular extension? Sure. That's always possible with any new extension you install. But, what I've done so far should ensure that there are very minimal conflicts now.

Here's what's been fixed/added since the initial release:

New regular expression for the hashtag to link converting which ignores things like injected HTML from other extensions and core. Also, I believe it will recognize any language as well.
Fixed the post/reply mentions. Before, the hover events and scrolling to the mentioned post wasn't working. This extension no longer conflicts with that. 🥳
There was mention of quotes not working but I've never been able to duplicate that. The quote system seems to work fine. So no fix needed there - just mentioning in case someone reads that and is curious.
Post paragraph HTML/CSS instead of just being  are changed to  with this extension (needed for one of above fixes). This also means you have another class to target now as you customize your Flarum; which can't be a bad thing.

Known issue but I'm not considering it an issue right now:

If you try to put a hashtag on the same line as a post mention (not a user mention, specifically the post/reply type mention), the hashtag will not convert. But, nothing in your post or forum will break, just that particular hashtag won't become a link. But, you just need to hit enter, start a new line/paragraph, and then you can type a hashtag. This happens because this extension needs to ignore the lines with a post mention, or else, the post mention breaks.

This was quite challenging but I'm glad I kept at it. It's very handy to be able to quickly give someone a keyword to click on and search in your forum. If someone asks what BBcode your forum supports and you have that posted somewhere, you can most likely just reply and say, "Click here: #bbcode."

[deleted]

010101 thanks for that useful extension. i will give a suggestion. with the hashtags, space character can be support? let's say have a discussion titled "lorem ipsum" hashtag: #lorem ipsum.

010101

[deleted] Thanks for the suggestion! It’s possible but I’m not sure if I want to do that. Then someone could make an entire sentence or paragraph a hashtag which is silly. Of course it could be set up so that after 3 words or so it stops. But, creating a regular link or using Flarum’s built in quote feature is better for that. This extension is more in the spirit of the hashtag that Twitter put on the map, which is a tag with no spaces.

Pollux

[deleted] 010101

You could interpret underscores as spaces though, so #language_packwould translate into #language pack.

jordanjay29

[deleted] Aren't spaces invalid in hashtags on social media platforms? They don't render as part of the hashtag on twitter or instagram/facebook after the space. I'm not aware of any platform where the space is recognized as part of the hashtag (because then where do you stop when there's no closing character for a hashtag?).

You'd want to #use_underscores or #camelCase it, #OrJustCapitalizeEachWord in the hashtag #ifyouevencareaboutlegibilitywhichmostpeopledont.

tolgaaaltas

010101 In Turkey, we have another social media concept. We called it "dictionary." Someone starts discussion and everyone writes their minds. Absolutely there is some differences available from Flarum. If there is an available "Ataturk" discussion, no one can create another one. This is the biggest difference from Flarum.
In this concept; if peoples wants to refferance another discussion, they uses (see: Ataturk) or Ataturk. System can finds automatically right discussions url. In Flarum, maybe you can't directly linked to discussions page but can create another extension for this concept and -like a hashtags- linked to search results. We already have a mention system in Flarum but not this style. We only can see username -and post-.
P.S. You can check Ataturk discussion, first one uses (see: Ataturk) example and fifth & sixth one uses Ataturk example. 🙂

010101

Pollux 🤔 That’s a good idea...

Pollux

jordanjay29 Aren't spaces invalid in hashtags on social media platforms? They don't render as part of the hashtag on twitter or instagram/facebook after the space. I'm not aware of any platform where the space is recognized as part of the hashtag (because then where do you stop when there's no closing character for a hashtag?).

That's it, you need a delimiting character and a space is the most natural candidate if you want to have an elegant, unobtrusive implementation of the concept. That said, as @010101's idea includes a search mechanism that goes beyond hashtags already used, having the possibility to search for phrases makes a lot of sense. A search for languagePack is of pretty limited value no matter how you capitalize any character in the search term, you need the space at least for the search. The same holds true for a search for language_pack

Maybe we could preserve the underscore in the visual representation in my suggestion above (Pollux) and turn it into spaces only in the associated search, so #language_pack would search for "language pack" but being rendered with the underscore: #language_pack (or probably search for both "#language_pack" and "language pack" to include hashtags already used).

010101

tolgaaaltas Yeah, I like that kind of website. It’s refreshing sometimes when you can’t post the same topic more than once. That would definitely be a completely separate extension. Or, one could just require all new topics to go through approval before going live. But I know that’s a pain and not automated. #onetopiconepost 😉

[deleted]

jordanjay29 It seems that suggestion may be out of purpose. but it is not. the extension returns a search query and it does not show the discussions that exist only because of a space character. why do we have to use hashtags that way? twitter and fb is a forum? example i'm writing in any discussion about "flarum installation" and i want to create a hashtag like #flaruminstallation or #flarum installation, which one will give results?

010101

jordanjay29 This is a good discussion. I thought the same thing. And so I’m still on the fence. I mean, I could just create a sister version of this extension. Then whoever wants a traditional looking hashtag they can try this, and then if you want to post more blog style tags (which typically allow spaces) you could use the other extension.

I agree with both sides of the argument. It depends on what you like. Do you want Twitter/Facebook/Instagram style (which technically this extention doesn’t fully do), or do you want something more like blog tags.

I think that’s what I’ll do. Sometime soon, I’ll create a separate extension which will be more like the style of a WordPress tag.

Great stuff. These debates make forums great!

Question for those who want this slightly different version: Do you still want to use the hash (#)? Or, should there be a different identifier. Or, should it simply be BBcode? Like: [t]Language Packs[/t]. T would stand for either “tag” or “terms.” That would convert to a link which searches “Language Packs.” I’m leaning towards BBcode because, then it wouldn’t conflict with this hashtag extension. So you could have both installed and use whichever one fits the situation!

If you agree with going the BBcode route, could I just add it to my existing BBBBcode extension? Or, do you not like all of the BBcode in that extension and would prefer a completely separate one?

@Pollux @[deleted]

« Previous Page Next Page »