support matrix.to links (#1849)

* support room via server params and eventId

* change copy link to matrix.to links

* display matrix.to links in messages as pill and stop generating url previews for them

* improve editor mention to include viaServers and eventId

* fix mention custom attributes

* always try to open room in current space

* jump to latest remove target eventId from url

* add create direct search options to open/create dm with url

src/app/hooks/router/useSearchParamsViaServers.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { getRoomSearchParams } from '../../pages/pathSearchParam';
+import { decodeSearchParamValueArray } from '../../pages/pathUtils';
+
+export const useSearchParamsViaServers = (): string[] | undefined => {
+  const [searchParams] = useSearchParams();
+  const roomSearchParams = useMemo(() => getRoomSearchParams(searchParams), [searchParams]);
+  const viaServers = roomSearchParams.viaServers
+    ? decodeSearchParamValueArray(roomSearchParams.viaServers)
+    : undefined;
+
+  return viaServers;
+};

src/app/hooks/useMentionClickHandler.ts

@@ -0,0 +1,43 @@
+import { ReactEventHandler, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRoomNavigate } from './useRoomNavigate';
+import { useMatrixClient } from './useMatrixClient';
+import { isRoomId, isUserId } from '../utils/matrix';
+import { openProfileViewer } from '../../client/action/navigation';
+import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
+import { _RoomSearchParams } from '../pages/paths';
+
+export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
+  const mx = useMatrixClient();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const navigate = useNavigate();
+
+  const handleClick: ReactEventHandler<HTMLElement> = useCallback(
+    (evt) => {
+      evt.preventDefault();
+      const target = evt.currentTarget;
+      const mentionId = target.getAttribute('data-mention-id');
+      if (typeof mentionId !== 'string') return;
+
+      if (isUserId(mentionId)) {
+        openProfileViewer(mentionId, roomId);
+        return;
+      }
+
+      const eventId = target.getAttribute('data-mention-event-id') || undefined;
+      if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
+        if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
+        else navigateRoom(mentionId, eventId);
+        return;
+      }
+
+      const viaServers = target.getAttribute('data-mention-via') || undefined;
+      const path = getHomeRoomPath(mentionId, eventId);
+
+      navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
+    },
+    [mx, navigate, navigateRoom, navigateSpace, roomId]
+  );
+
+  return handleClick;
+};

src/app/hooks/useRoomNavigate.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { NavigateOptions, useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { getCanonicalAliasOrRoomId } from '../utils/matrix';
 import {
@@ -12,12 +12,14 @@ import { useMatrixClient } from './useMatrixClient';
 import { getOrphanParents } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
+import { useSelectedSpace } from './router/useSelectedSpace';
 
 export const useRoomNavigate = () => {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
+  const spaceSelectedId = useSelectedSpace();
 
   const navigateSpace = useCallback(
     (roomId: string) => {
@@ -28,24 +30,29 @@ export const useRoomNavigate = () => {
   );
 
   const navigateRoom = useCallback(
-    (roomId: string, eventId?: string) => {
+    (roomId: string, eventId?: string, opts?: NavigateOptions) => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
 
       const orphanParents = getOrphanParents(roomToParents, roomId);
       if (orphanParents.length > 0) {
-        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, orphanParents[0]);
-        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId));
+        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(
+          mx,
+          spaceSelectedId && orphanParents.includes(spaceSelectedId)
+            ? spaceSelectedId
+            : orphanParents[0]
+        );
+        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts);
         return;
       }
 
       if (mDirects.has(roomId)) {
-        navigate(getDirectRoomPath(roomIdOrAlias, eventId));
+        navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts);
         return;
       }
 
-      navigate(getHomeRoomPath(roomIdOrAlias, eventId));
+      navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
     },
-    [mx, navigate, roomToParents, mDirects]
+    [mx, navigate, spaceSelectedId, roomToParents, mDirects]
   );
 
   return {

src/app/hooks/useSpoilerClickHandler.ts

@@ -0,0 +1,14 @@
+import { ReactEventHandler, useCallback } from 'react';
+
+export const useSpoilerClickHandler = (): ReactEventHandler<HTMLElement> => {
+  const handleClick: ReactEventHandler<HTMLElement> = useCallback((evt) => {
+    const target = evt.currentTarget;
+    if (target.getAttribute('aria-pressed') === 'true') {
+      evt.stopPropagation();
+      target.setAttribute('aria-pressed', 'false');
+      target.style.cursor = 'initial';
+    }
+  }, []);
+
+  return handleClick;
+};