Add custom link handlers

package.json

@@ -19,6 +19,7 @@
     "@fontsource/roboto": "^4.5.8",
     "@khanacademy/simple-markdown": "^0.8.3",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
+    "@tauri-apps/api": "^1.0.2",
     "@tippyjs/react": "^4.2.6",
     "babel-polyfill": "^6.26.0",
     "blurhash": "^1.1.5",

src/util/linkHandlers.js

@@ -0,0 +1,27 @@
+import { invoke } from '@tauri-apps/api/tauri';
+import handleMatrix from './linkHandlers/matrix.to';
+
+const handlers = {
+  'matrix.to': (url) => handleMatrix(url),
+};
+
+export default function handleLink(e) {
+  const url = new URL(e.target.href);
+  const handler = handlers[url.hostname];
+
+  if (handler) {
+    handler(url);
+    e.preventDefault();
+    return;
+  }
+
+  // if running inside tauri, let the backend handle the opening of the url
+  // useful so we can open urls in the user's browser specified app or a specified app
+  if (window.__TAURI__) {
+    e.preventDefault();
+    invoke('open_link', { url: e.target.href, bypassHandlers: false });
+  } else {
+    window.open(e.target.href);
+    e.preventDefault();
+  }
+}

src/util/linkHandlers/matrix.to.js

@@ -0,0 +1,30 @@
+import initMatrix from '../../client/initMatrix';
+import { selectRoom, selectTab, openJoinAlias } from '../../client/action/navigation';
+
+function handleMatrix(url) {
+  const mx = initMatrix.matrixClient;
+  const rooms = mx.getRooms();
+
+  const roomName = url.hash.slice(2);
+
+  let joinedRoom;
+
+  rooms.forEach((room) => {
+    if (room.roomId === roomName
+      || room.getCanonicalAlias() === roomName
+      || roomName in room.getAltAliases()) {
+      joinedRoom = room;
+    }
+  });
+
+  if (joinedRoom) {
+    if (joinedRoom.isSpaceRoom()) selectTab(joinedRoom.roomId);
+    else selectRoom(joinedRoom.roomId);
+
+    return;
+  }
+
+  openJoinAlias(roomName);
+}
+
+export default handleMatrix;

src/util/twemojify.jsx

@@ -5,27 +5,48 @@ import linkifyHtml from 'linkify-html';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 import { sanitizeText } from './sanitize';
+import handleLink from './linkHandlers';
 
 const Math = lazy(() => import('../app/atoms/math/Math'));
 
-const mathOptions = {
-  replace: (node) => {
-    const maths = node.attribs?.['data-mx-maths'];
-    if (maths) {
-      return (
-        <Suspense fallback={<code>{maths}</code>}>
-          <Math
-            content={maths}
-            throwOnError={false}
-            errorColor="var(--tc-danger-normal)"
-            displayMode={node.name === 'div'}
-          />
-        </Suspense>
-      );
-    }
-    return null;
-  },
-};
+function replaceMath(node) {
+  const maths = node.attribs?.['data-mx-maths'];
+
+  return (
+    <Suspense fallback={<code>{maths}</code>}>
+      <Math
+        content={maths}
+        throwOnError={false}
+        errorColor="var(--tc-danger-normal)"
+        displayMode={node.name === 'div'}
+      />
+    </Suspense>
+  );
+}
+
+function replaceLink(node) {
+  if (node.children?.[0]?.type !== 'text') { return null; }
+
+  return (
+    <a href={node.attribs?.href} onClick={(e) => handleLink(e)}>
+      { node.children[0].data }
+    </a>
+  );
+}
+
+function parseOptions(maths = false) {
+  return {
+    replace: (node) => {
+      if (maths) {
+        if (node.attribs?.['data-mx-maths']) { return replaceMath(node); }
+      }
+
+      if (node.name === 'a') { return replaceLink(node); }
+
+      return null;
+    },
+  };
+}
 
 /**
  * @param {string} text - text to twemojify
@@ -49,5 +70,8 @@ export function twemojify(text, opts, linkify = false, sanitize = true, maths =
       rel: 'noreferrer noopener',
     });
   }
-  return parse(content, maths ? mathOptions : null);
+
+  const elements = parse(content, parseOptions(maths));
+
+  return elements;
 }