Disable Mithril routing for external urls/urls outside of forum in posts

garygreen

I want all @Mentions to link to our main site's user profile page, rather than one on the forum - I've achieved that by changing the routing url generated like so:

app.route.user = function(user) {
	return user.data.attributes.profileUrl; // e.g. http://site.com/username
}

...And a custom serializer that adds the profileUrl attribute to users which points my main site.
Our forum lives at http://site.com/forum/...

The problem I'm experiencing is Mithril seems to be intercepting all clicks to @Mentions in a post... when clicked on, it just goes back to the main discussion listing, as if it doesn't know how to route that <a> at all (presumably because it can't find a matching route, as it's outside the scope of the forum and a unknown route format)

Is there a way to setup a fallback/default route if one wasn't matched? I basically want it to then do window.location.href = <url>

SychO

There is an onclick event to route mention clicks using mithril's router: https://github.com/flarum/framework/blob/5437bf5c238870a92c79ef11eeafd48bf308570f/extensions/mentions/js/src/forum/addPostMentionPreviews.js#L17-L24

garygreen

SychO Thank you, that's put me in the right direction! It looks like it's going to be tricky to achieve what I want, without having to completely override that addPreviews method. I had a look at how Mithril handles defaultRoute but annoyingly it's just a string path, rather than a callback that can be invoked. Maybe I could add a generalised regex route that would always match, as the last route... but it doesn't seem to work:

app.routes['fallback'] = {
	path: '.+',
	resolver: {
		onmatch: function() {
			debugger;
		}
	}
}

Last resort might be to overwrite m.route.set with custom function, and call prototype, seems messy.

clarkwinkelmann

I doubt it will cover all situations, seeing the explicit event listener you just mentioned.

But for other links that would be injected in Mithril templates by Flarum, you could extend the original Link component to hard-code the routing to external (essentially disable internal routing) when the Link component is created with a particular URL.

There are a lot of exceptions inside user-generated content though, since this happens largely outside Mithril components, instead using a lot of explicit javascript.

garygreen

I've decided to solve this by monkey patching m.route.set. The below code will check to see if the path looks like a url i.e. it contains :// and if so, assume it's an external url - these wouldn't match in Mithril routing, so it makes sense to fallback onto manual page navigation.

This may not be the most eloquent solution, but it's super simple, and gives full control over routing. Hope it helps.

function shouldSkipRouting(path) {
	// If it looks like a url, skip Mithril routing
	return path.indexOf('://') > -1;
}

const mset = m.route.set;
window.m.route.set = function(path, params, options) {
	if (shouldSkipRouting(path)) {
		window.location.href = path;
	} else {
		return mset.call(this, path, params, options);
	}
}