fix: GIFs, topic display, formatting toolbar, Copy Link in Invite, support URL

- RoomInput: GIF domain check uses endsWith('.giphy.com') — handles all Giphy CDN shards; all silent failure paths now show user-facing error - RoomProfile: topic plain-text field is now HTML-stripped (no markdown syntax visible in header); formatting toolbar (B/I/S/code) above the textarea wraps selected text with correct markdown syntax - InviteUserPrompt: Copy Link button added to dialog header with 'Copied!' confirmation; removed Copy Link from both three-dot menus - RoomViewHeader/RoomNavItem: unused copy-link imports removed - nginx (live): support_page URL updated from lotusguild.org → matrix.lotusguild.org Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-02 09:55:04 -04:00
parent 16a15efe9b
commit 0bbfe17559
5 changed files with 119 additions and 70 deletions
@@ -34,7 +34,13 @@ import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../../utils/keyboard';
 import { useDirectUsers } from '../../hooks/useDirectUsers';
-import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
+import {
+  getCanonicalAliasOrRoomId,
+  getMxIdLocalPart,
+  getMxIdServer,
+  isRoomAlias,
+  isUserId,
+} from '../../utils/matrix';
 import { Membership } from '../../../types/matrix/room';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
@@ -42,6 +48,9 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
 import { useAlive } from '../../hooks/useAlive';
+import { copyToClipboard } from '../../utils/dom';
+import { getMatrixToRoom } from '../../plugins/matrix-to';
+import { getViaServers } from '../../plugins/via-servers';

 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
  limit: 1000,
@@ -58,6 +67,15 @@ type InviteUserProps = {
 export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
  const mx = useMatrixClient();
  const alive = useAlive();
+  const [linkCopied, setLinkCopied] = useState(false);
+
+  const handleCopyLink = () => {
+    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
+    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
+    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
+    setLinkCopied(true);
+    setTimeout(() => setLinkCopied(false), 2000);
+  };

  const inputRef = useRef<HTMLInputElement>(null);
  const directUsers = useDirectUsers();
@@ -172,7 +190,18 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                    Invite
                  </Text>
                </Box>
-                <Box shrink="No">
+                <Box shrink="No" gap="100" alignItems="Center">
+                  <Button
+                    size="300"
+                    variant={linkCopied ? 'Success' : 'Secondary'}
+                    fill="Soft"
+                    radii="300"
+                    before={<Icon size="100" src={linkCopied ? Icons.Check : Icons.Link} />}
+                    onClick={handleCopyLink}
+                    aria-label="Copy room link"
+                  >
+                    <Text size="B300">{linkCopied ? 'Copied!' : 'Copy Link'}</Text>
+                  </Button>
                  <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                    <Icon src={Icons.Cross} />
                  </IconButton>
@@ -4,6 +4,7 @@ import {
  Button,
  Chip,
  color,
+  config,
  Icon,
  Icons,
  Input,
@@ -11,7 +12,7 @@ import {
  Text,
  TextArea,
 } from 'folds';
-import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import React, { FormEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import Linkify from 'linkify-react';
 import classNames from 'classnames';
@@ -43,6 +44,22 @@ import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';

 const MARKDOWN_PATTERN = /(\*\*|__|\*|_|~~|`|\[.+?\]\(.+?\))/;

+function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholder: string) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const selected = textarea.value.substring(start, end);
+  const inner = selected || placeholder;
+  const replacement = `${syntax}${inner}${syntax}`;
+  const newValue = textarea.value.substring(0, start) + replacement + textarea.value.substring(end);
+  const nativeSetter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
+  nativeSetter?.call(textarea, newValue);
+  textarea.dispatchEvent(new Event('input', { bubbles: true }));
+  const cursorStart = start + syntax.length;
+  const cursorEnd = cursorStart + inner.length;
+  textarea.focus();
+  textarea.setSelectionRange(cursorStart, cursorEnd);
+}
+
 function topicMarkdownToHtml(text: string): string {
  return text
    .replace(/&/g, '&amp;')
@@ -60,11 +77,11 @@ function topicMarkdownToHtml(text: string): string {

 function buildTopicContent(topic: string): Record<string, string> {
  if (!MARKDOWN_PATTERN.test(topic)) return { topic };
-  return {
-    topic,
-    format: 'org.matrix.custom.html',
-    formatted_body: topicMarkdownToHtml(topic),
-  };
+  const formattedBody = topicMarkdownToHtml(topic);
+  // Use HTML-stripped text as the plain topic so the header shows clean text, not raw markdown syntax
+  const plainTopic = formattedBody.replace(/<br>/g, '\n').replace(/<[^>]+>/g, '');
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  return { topic: plainTopic, format: 'org.matrix.custom.html', formatted_body: formattedBody };
 }

 type RoomProfileEditProps = {
@@ -96,6 +113,7 @@ export function RoomProfileEdit({
    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication) ?? undefined)
    : undefined;

+  const topicRef = useRef<HTMLTextAreaElement>(null);
  const [imageFile, setImageFile] = useState<File>();
  const avatarFileUrl = useObjectURL(imageFile);
  const uploadingAvatar = avatarFileUrl ? roomAvatar === avatar : false;
@@ -247,20 +265,60 @@ export function RoomProfileEdit({
        />
      </Box>
      <Box direction="Inherit" gap="100">
-        <Text size="L400">Topic</Text>
+        <Box alignItems="Center" justifyContent="SpaceBetween">
+          <Text size="L400">Topic</Text>
+          {canEditTopic && !submitting && (
+            <Box gap="100">
+              {(
+                [
+                  { label: 'B', syntax: '**', placeholder: 'bold', title: 'Bold' },
+                  { label: 'I', syntax: '*', placeholder: 'italic', title: 'Italic' },
+                  {
+                    label: 'S',
+                    syntax: '~~',
+                    placeholder: 'strikethrough',
+                    title: 'Strikethrough',
+                  },
+                  { label: '`', syntax: '`', placeholder: 'code', title: 'Inline Code' },
+                ] as const
+              ).map(({ label, syntax, placeholder, title }) => (
+                <button
+                  key={label}
+                  type="button"
+                  title={title}
+                  aria-label={title}
+                  onClick={() =>
+                    topicRef.current && wrapSelection(topicRef.current, syntax, placeholder)
+                  }
+                  style={{
+                    padding: `${config.space.S100} ${config.space.S200}`,
+                    border: `1px solid ${color.Surface.ContainerLine}`,
+                    borderRadius: config.radii.R300,
+                    background: color.Surface.Container,
+                    color: color.Surface.OnContainer,
+                    cursor: 'pointer',
+                    fontSize: '0.8rem',
+                    fontWeight: label === 'B' ? 700 : label === 'I' ? undefined : undefined,
+                    fontStyle: label === 'I' ? 'italic' : undefined,
+                    fontFamily: label === '`' ? 'monospace' : 'inherit',
+                    lineHeight: 1,
+                  }}
+                >
+                  {label}
+                </button>
+              ))}
+            </Box>
+          )}
+        </Box>
        <TextArea
+          ref={topicRef}
          name="topicTextArea"
          defaultValue={topic}
-          placeholder="Describe this room. Markdown supported: **bold**, *italic*, [link](url)"
+          placeholder="Describe this room… supports **bold**, *italic*, ~~strikethrough~~, `code`"
          variant="Secondary"
          radii="300"
          readOnly={!canEditTopic || submitting}
        />
-        {canEditTopic && (
-          <Text size="T200" priority="300">
-            Supports markdown: **bold**, *italic*, ~~strikethrough~~, `code`, [text](url)
-          </Text>
-        )}
      </Box>
      {submitState.status === AsyncStatus.Error && (
        <Text size="T200" style={{ color: color.Critical.Main }}>
@@ -36,16 +36,12 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { getPowersLevelFromMatrixEvent, usePowerLevels } from '../../hooks/usePowerLevels';
-import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../utils/notifications';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { stopPropagation } from '../../utils/keyboard';
-import { getMatrixToRoom } from '../../plugins/matrix-to';
-import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
-import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -225,13 +221,6 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
      setInvitePrompt(true);
    };

-    const handleCopyLink = () => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-      const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-      copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
-      requestClose();
-    };
-
    const handleRoomSettings = () => {
      openRoomSettings(room.roomId, space?.roomId);
      requestClose();
@@ -298,16 +287,6 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
              Invite
            </Text>
          </MenuItem>
-          <MenuItem
-            onClick={handleCopyLink}
-            size="300"
-            after={<Icon size="100" src={Icons.Link} />}
-            radii="300"
-          >
-            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-              Copy Link
-            </Text>
-          </MenuItem>
          <MenuItem
            onClick={() => {
              requestClose();
@@ -538,23 +538,26 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
      async (gifUrl: string, w: number, h: number) => {
        setGifUploading(true);
        try {
-          // Only fetch from trusted Giphy CDN domains
-          const allowed = [
-            'media.giphy.com',
-            'i.giphy.com',
-            'media0.giphy.com',
-            'media1.giphy.com',
-            'media2.giphy.com',
-            'media3.giphy.com',
-            'media4.giphy.com',
-          ];
+          // Only fetch from trusted Giphy CDN domains (match any *.giphy.com subdomain)
          const { hostname } = new URL(gifUrl);
-          if (!allowed.includes(hostname)) return;
+          if (!hostname.endsWith('.giphy.com') && hostname !== 'giphy.com') {
+            setGifError('GIF source not trusted.');
+            setTimeout(() => setGifError(null), 4000);
+            return;
+          }

          const res = await fetch(gifUrl);
-          if (!res.ok) return;
+          if (!res.ok) {
+            setGifError('Failed to download GIF from Giphy.');
+            setTimeout(() => setGifError(null), 4000);
+            return;
+          }
          const contentType = res.headers.get('content-type') ?? '';
-          if (!contentType.startsWith('image/')) return;
+          if (!contentType.startsWith('image/')) {
+            setGifError('Unexpected GIF format. Please try another.');
+            setTimeout(() => setGifError(null), 4000);
+            return;
+          }

          const blob = await res.blob();
          if (blob.size > 20 * 1024 * 1024) {
@@ -38,7 +38,7 @@ import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
-import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, mxcUrlToHttp } from '../../utils/matrix';
 import { getStateEvents } from '../../utils/room';
 import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
@@ -46,13 +46,10 @@ import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../utils/notifications';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useLocalRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
-import { getMatrixToRoom } from '../../plugins/matrix-to';
-import { getViaServers } from '../../plugins/via-servers';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
@@ -107,13 +104,6 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
    setInvitePrompt(true);
  };

-  const handleCopyLink = () => {
-    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
-    requestClose();
-  };
-
  const openSettings = useOpenRoomSettings();
  const parentSpace = useSpaceOptionally();
  const handleOpenSettings = () => {
@@ -193,16 +183,6 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
            </Text>
          </MenuItem>
        )}
-        <MenuItem
-          onClick={handleCopyLink}
-          size="300"
-          after={<Icon size="100" src={Icons.Link} />}
-          radii="300"
-        >
-          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-            Copy Link
-          </Text>
-        </MenuItem>
        {!isServerNotice && (
          <MenuItem
            onClick={handleOpenSettings}