+ {renderTrigger ? (
+ renderTrigger({ isOpen, value, toggleOpen, clearValue })
+ ) : (
+
+ {value && (
+
+ )}
+
+ {value && (
+
+ {value}
+
+ )}
- {value && (
-
- {value}
+
)}
-
-
{isOpen && (
void;
inlineActions?: ReactNode;
rightActions?: ReactNode;
+ allowBlockFormatting?: boolean;
}
export interface RichTextToolbarRef {
@@ -71,7 +72,13 @@ const ToolbarButton = ({
};
function RichTextToolbarComponent(
- { editor, onLinkAdd, inlineActions, rightActions }: RichTextToolbarProps,
+ {
+ editor,
+ onLinkAdd,
+ inlineActions,
+ rightActions,
+ allowBlockFormatting = true,
+ }: RichTextToolbarProps,
ref: Ref
,
): ReactElement {
const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
@@ -154,19 +161,23 @@ function RichTextToolbarComponent(
isActive={editorState.isItalic}
onClick={() => editor.chain().focus().toggleItalic().run()}
/>
-
- }
- isActive={editorState.isBulletList}
- onClick={() => editor.chain().focus().toggleBulletList().run()}
- />
- }
- isActive={editorState.isOrderedList}
- onClick={() => editor.chain().focus().toggleOrderedList().run()}
- />
+ {allowBlockFormatting ? (
+ <>
+
+ }
+ isActive={editorState.isBulletList}
+ onClick={() => editor.chain().focus().toggleBulletList().run()}
+ />
+ }
+ isActive={editorState.isOrderedList}
+ onClick={() => editor.chain().focus().toggleOrderedList().run()}
+ />
+
+ ) : null}
void;
+ suggestions?: UserShortProfile[];
}
export function useMentionAutocomplete({
@@ -24,12 +25,13 @@ export function useMentionAutocomplete({
sourceId,
userId,
onOffsetUpdate,
+ suggestions,
}: UseMentionAutocompleteProps) {
const { requestMethod } = useRequestProtocol();
- const [query, setQuery] = useState(undefined);
+ const [query, setQuery] = useState(undefined);
const [selected, setSelected] = useState(0);
const mentionRangeRef = useRef(null);
- const queryRef = useRef(undefined);
+ const queryRef = useRef(undefined);
const selectedRef = useRef(0);
const mentionsRef = useRef([]);
@@ -43,12 +45,40 @@ export function useMentionAutocomplete({
{ postId, query, sourceId },
{ requestKey: JSON.stringify(key) },
),
- enabled: !!userId && typeof query !== 'undefined',
+ enabled: !suggestions && !!userId && typeof query !== 'undefined',
refetchOnWindowFocus: false,
refetchOnMount: false,
});
- const mentions = data?.recommendedMentions;
+ const mentions = useMemo(() => {
+ if (!suggestions) {
+ return data?.recommendedMentions?.filter(
+ (mention) => mention.id !== userId,
+ );
+ }
+
+ if (typeof query === 'undefined') {
+ return [];
+ }
+
+ const normalizedQuery = query.trim().toLowerCase();
+ const filtered = suggestions.filter((suggestion) => {
+ if (suggestion.id === userId) {
+ return false;
+ }
+
+ if (!normalizedQuery) {
+ return true;
+ }
+
+ return (
+ suggestion.username.toLowerCase().startsWith(normalizedQuery) ||
+ suggestion.name?.toLowerCase().startsWith(normalizedQuery) === true
+ );
+ });
+
+ return filtered.slice(0, 8);
+ }, [data?.recommendedMentions, query, suggestions, userId]);
useEffect(() => {
queryRef.current = query;
diff --git a/packages/shared/src/components/fields/RichTextInput.tsx b/packages/shared/src/components/fields/RichTextInput.tsx
index c13e0a79f5c..9d6cc674f70 100644
--- a/packages/shared/src/components/fields/RichTextInput.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.tsx
@@ -1,4 +1,5 @@
import type {
+ ForwardedRef,
FormEventHandler,
MutableRefObject,
ReactElement,
@@ -27,12 +28,7 @@ import Image from '@tiptap/extension-image';
import { ImageIcon, AtIcon, MarkdownIcon } from '../icons';
import { EditIcon } from '../icons/Edit';
import { GifIcon } from '../icons/Gif';
-import {
- Button,
- ButtonColor,
- ButtonSize,
- ButtonVariant,
-} from '../buttons/Button';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
import { RecommendedMentionTooltip } from '../tooltips/RecommendedMentionTooltip';
import { SimpleTooltip } from '../tooltips/SimpleTooltip';
import { SavingLabel } from './MarkdownInput/SavingLabel';
@@ -59,6 +55,7 @@ import { useImageUpload } from './RichTextEditor/useImageUpload';
import { useDraftStorage } from './RichTextEditor/useDraftStorage';
import { useToastNotification } from '../../hooks/useToastNotification';
import styles from './RichTextEditor/richtext.module.css';
+import type { UserShortProfile } from '../../lib/user';
const RecommendedEmojiTooltip = dynamic(
() =>
@@ -144,6 +141,10 @@ interface RichTextInputProps {
enabledCommand?: Partial>;
editCommentId?: string;
parentCommentId?: string;
+ mentionSuggestions?: UserShortProfile[];
+ allowBlockFormatting?: boolean;
+ minHeightClassName?: string;
+ markdownToHtml?: (markdown: string) => string;
}
export interface RichTextInputRef {
@@ -175,8 +176,12 @@ function RichTextInput(
enabledCommand = {},
editCommentId,
parentCommentId,
+ mentionSuggestions,
+ allowBlockFormatting = true,
+ minHeightClassName = 'min-h-[8rem]',
+ markdownToHtml = markdownToHtmlBasic,
}: RichTextInputProps,
- ref: MutableRefObject,
+ ref: ForwardedRef,
): ReactElement {
const shouldShowSubmit = !!submitCopy;
const { user } = useAuthContext();
@@ -251,6 +256,7 @@ function RichTextInput(
sourceId,
userId: user?.id,
onOffsetUpdate: updateOffset,
+ suggestions: mentionSuggestions,
});
const emoji = useEmojiAutocomplete({
@@ -295,6 +301,11 @@ function RichTextInput(
const editor = useEditor({
extensions: [
StarterKit.configure({
+ heading: allowBlockFormatting ? undefined : false,
+ bulletList: allowBlockFormatting ? undefined : false,
+ orderedList: allowBlockFormatting ? undefined : false,
+ listItem: allowBlockFormatting ? undefined : false,
+ codeBlock: allowBlockFormatting ? undefined : false,
blockquote: false,
horizontalRule: false,
}),
@@ -313,7 +324,7 @@ function RichTextInput(
...(maxLength ? [CharacterCount.configure({ limit: maxLength })] : []),
LinkShortcut,
],
- content: markdownToHtmlBasic(input),
+ content: markdownToHtml(input),
onUpdate: ({ editor: updatedEditor }) => {
if (isSyncingRef.current) {
isSyncingRef.current = false;
@@ -361,7 +372,7 @@ function RichTextInput(
const trimmedText = textToInsert.trim();
if (trimmedText && looksLikeMarkdown(trimmedText)) {
- const convertedHtml = markdownToHtmlBasic(trimmedText);
+ const convertedHtml = markdownToHtml(trimmedText);
if (convertedHtml) {
event.preventDefault();
editorRef.current
@@ -484,12 +495,10 @@ function RichTextInput(
const switchToRichMode = useCallback(() => {
if (editorRef.current) {
isSyncingRef.current = true;
- editorRef.current.commands.setContent(
- markdownToHtmlBasic(inputRef.current),
- );
+ editorRef.current.commands.setContent(markdownToHtml(inputRef.current));
}
setIsMarkdownMode(false);
- }, []);
+ }, [markdownToHtml]);
const onMarkdownInput = useCallback(
(event: React.FormEvent) => {
@@ -576,7 +585,7 @@ function RichTextInput(
return;
}
isSyncingRef.current = true;
- editor.commands.setContent(markdownToHtmlBasic(value));
+ editor.commands.setContent(markdownToHtml(value));
},
focus: () => {
if (isMarkdownMode) {
@@ -606,10 +615,10 @@ function RichTextInput(
if (editor) {
isSyncingRef.current = true;
- editor.commands.setContent(markdownToHtmlBasic(initialContent));
+ editor.commands.setContent(markdownToHtml(initialContent));
}
}
- }, [editor, initialContent, input, updateInput]);
+ }, [editor, initialContent, input, markdownToHtml, updateInput]);
const actionIcon =
upload.queueCount === 0 ? (
@@ -637,9 +646,10 @@ function RichTextInput(
+ );
+};
+
+interface LiveBadgeProps {
+ isLive: boolean;
+}
+
+const LiveBadge = ({ isLive }: LiveBadgeProps): ReactElement => (
+
+
+
+ {isLive ? 'Live' : 'Setup'}
+
+
+);
+
+const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => {
+ const router = useRouter();
+ const { displayToast } = useToastNotification();
+ const { isAuthReady, showLogin, user } = useAuthContext();
+ const {
+ status,
+ errorMessage,
+ roomState,
+ role,
+ participantId,
+ sendChatMessage,
+ deleteChatMessage,
+ setParticipantChatEnabled,
+ promoteSpeaker,
+ removeSpeaker,
+ kickParticipant,
+ canChat,
+ localStream,
+ remoteStreams,
+ reactions,
+ chatMessages,
+ } = useLiveRoomConnection();
+ const {
+ data: room,
+ error: roomError,
+ isLoading: isRoomLoading,
+ } = useLiveRoomQuery(roomId);
+
+ const handleLeave = (): void => {
+ router.push(`${webappUrl}live`);
+ };
+
+ const [moderationBusy, setModerationBusy] = useState
(null);
+ const [activeTab, setActiveTab] = useState('chat');
+ const streamDuration = useStreamDuration(roomState?.status === 'live');
+
+ const guardedModerationAction = async (
+ key: string,
+ fn: () => Promise,
+ ): Promise => {
+ if (moderationBusy) {
+ return;
+ }
+ setModerationBusy(key);
+ try {
+ await fn();
+ } catch (err) {
+ displayToast(err instanceof Error ? err.message : 'Action failed');
+ } finally {
+ setModerationBusy(null);
+ }
+ };
+
+ const handleSendChatMessage = async (body: string): Promise => {
+ try {
+ await sendChatMessage(body);
+ } catch (err) {
+ displayToast(err instanceof Error ? err.message : 'Message failed');
+ }
+ };
+
+ const handleChatLogin = (): void => {
+ showLogin({ trigger: AuthTriggers.MainButton });
+ };
+
+ const handleDeleteChatMessage = async (messageId: string): Promise => {
+ try {
+ await deleteChatMessage(messageId);
+ } catch (err) {
+ displayToast(
+ err instanceof Error ? err.message : 'Could not delete message',
+ );
+ }
+ };
+
+ const handleSetParticipantChatEnabled = async (
+ targetParticipantId: string,
+ nextCanChat: boolean,
+ ): Promise => {
+ try {
+ await setParticipantChatEnabled(targetParticipantId, nextCanChat);
+ } catch (err) {
+ displayToast(
+ err instanceof Error ? err.message : 'Could not update chat access',
+ );
+ }
+ };
+
+ const handleKickChatParticipant = async (
+ targetParticipantId: string,
+ ): Promise => {
+ try {
+ await kickParticipant(targetParticipantId);
+ } catch (err) {
+ displayToast(err instanceof Error ? err.message : 'Could not kick user');
+ }
+ };
+
+ const participantIds = useMemo(() => {
+ const ids = new Set();
+
+ Object.keys(roomState?.participants ?? {}).forEach((id) => {
+ if (id && id !== room?.host.id) {
+ ids.add(id);
+ }
+ });
+ chatMessages.forEach((message) => {
+ if (message.participantId && message.participantId !== room?.host.id) {
+ ids.add(message.participantId);
+ }
+ });
+
+ return [...ids];
+ }, [chatMessages, room?.host.id, roomState?.participants]);
+ const participantProfileQueries = useQueries({
+ queries: participantIds.map((id) => ({
+ queryKey: generateQueryKey(
+ RequestKey.Profile,
+ undefined,
+ 'live-room-participant',
+ id,
+ ),
+ queryFn: () => getUserShortInfo(id),
+ staleTime: ONE_MINUTE,
+ })),
+ });
+ const participantProfilesById = new Map();
+ participantIds.forEach((id, index) => {
+ const profile = participantProfileQueries[index]?.data;
+ if (profile) {
+ participantProfilesById.set(id, profile);
+ }
+ });
+
+ if (!isAuthReady || isRoomLoading) {
+ return (
+
+
+
+ );
+ }
+
+ if (roomError || !room) {
+ return (
+
+
+ We couldn't load this live room
+
+
+ {roomError?.message ?? 'The room may no longer be available.'}
+
+
+
+ );
+ }
+
+ if (status === 'error' || status === 'closed') {
+ return (
+
+
+ {status === 'closed'
+ ? 'Live room connection closed'
+ : "We couldn't connect to this live room"}
+
+ {errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+
+ );
+ }
+
+ const isHost = role === 'host';
+ const isCreated = roomState?.status === 'created';
+ const isLive = roomState?.status === 'live';
+ const isEnded = roomState?.status === 'ended' || room.status === 'ended';
+ const roomMode = roomState?.mode ?? room.mode;
+ const isFreeForAll = roomMode === 'free_for_all';
+ const participantCount = roomState
+ ? Object.keys(roomState.participants).length
+ : 0;
+ const activeSpeakerIds =
+ roomState?.stage.activeSpeakerParticipantIds.filter(
+ (id) => !!roomState.participants[id] && id !== room.host.id,
+ ) ?? [];
+ const queuedParticipantIds =
+ roomState?.stage.speakerQueueParticipantIds.filter(
+ (id) => !!roomState.participants[id],
+ ) ?? [];
+ const audienceParticipantIds = roomState
+ ? Object.values(roomState.participants)
+ .map((participant) => participant.participantId)
+ .filter(
+ (id) =>
+ id !== room.host.id &&
+ !activeSpeakerIds.includes(id) &&
+ !queuedParticipantIds.includes(id),
+ )
+ : [];
+ const stageLimit = roomState?.stage.speakerLimit ?? null;
+ const remainingSeats =
+ stageLimit === null
+ ? null
+ : Math.max(stageLimit - activeSpeakerIds.length, 0);
+ let waitingPrompt = 'Audience can join the queue';
+ if (isFreeForAll) {
+ waitingPrompt =
+ remainingSeats === 0
+ ? 'The stage is full right now'
+ : `${remainingSeats ?? 0} open stage spots`;
+ } else if (queuedParticipantIds.length > 0) {
+ waitingPrompt = `${queuedParticipantIds.length} in queue`;
+ }
+ const hostProfile = room.host;
+ const hostDisplayProfile = buildDisplayProfile(room.host);
+ participantProfilesById.set(room.host.id, hostProfile);
+ const mentionSuggestions = [
+ hostProfile,
+ ...participantIds
+ .map((id) => participantProfilesById.get(id))
+ .filter((profile): profile is UserShortProfile => !!profile),
+ ];
+
+ const stageSpeakers: {
+ id: string;
+ profile: UserShortProfile;
+ stream: MediaStream | null;
+ selfView: boolean;
+ isHost: boolean;
+ }[] = [];
+ const hostStream = buildParticipantStream(
+ room.host.id,
+ remoteStreams,
+ localStream,
+ participantId,
+ );
+ stageSpeakers.push({
+ id: room.host.id,
+ profile: hostDisplayProfile,
+ stream: hostStream,
+ selfView: room.host.id === participantId,
+ isHost: true,
+ });
+ activeSpeakerIds.forEach((activeSpeakerId) => {
+ stageSpeakers.push({
+ id: activeSpeakerId,
+ profile: buildDisplayProfile(
+ participantProfilesById.get(activeSpeakerId) ??
+ buildParticipantProfile(activeSpeakerId),
+ ),
+ stream: buildParticipantStream(
+ activeSpeakerId,
+ remoteStreams,
+ localStream,
+ participantId,
+ ),
+ selfView: activeSpeakerId === participantId,
+ isHost: false,
+ });
+ });
+
+ const showAudienceWaiting = isCreated && !isHost;
+
+ return (
+
+
+
+
+
+
+
+ {room.topic}
+
+
+ {roomState ? (
+
+ {isLive ? (
+
+
+
+ {formatStreamDuration(streamDuration)}
+
+
+ ) : null}
+
+
+
+
+
+ watching
+
+
+
+
+
+
+ {stageSpeakers.map((speaker) => {
+ const canModerate = isHost && !speaker.isHost;
+ return (
+
+
+ guardedModerationAction(
+ `tile-remove-${speaker.id}`,
+ () => removeSpeaker(speaker.id),
+ )
+ : undefined
+ }
+ onKick={
+ canModerate
+ ? () =>
+ guardedModerationAction(
+ `tile-kick-${speaker.id}`,
+ () => kickParticipant(speaker.id),
+ )
+ : undefined
+ }
+ isRemoving={moderationBusy === `tile-remove-${speaker.id}`}
+ isKicking={moderationBusy === `tile-kick-${speaker.id}`}
+ moderationDisabled={!!moderationBusy}
+ />
+
+ );
+ })}
+ {stageSpeakers.length === 1 ? (
+
+
+
+
+
+
+ Waiting for the next speaker
+
+
+ {waitingPrompt}
+
+
+
+ ) : null}
+
+
+
+ Waiting for the host to start the room…
+
+
+
+ ) : null}
+
+ {isEnded ? (
+
+
+
+ This live room has ended
+
+
+
+
+
+
+
+
+ {children}
+
+);
+
+interface DeviceSplitButtonProps {
+ isOn: boolean;
+ isLoading: boolean;
+ toggleAriaLabel: string;
+ caretAriaLabel: string;
+ caretMenuLabel: string;
+ toggleIcon: IconType;
+ onToggle: () => void;
+ devices: LiveRoomDeviceInfo[];
+ selectedId: string | null;
+ onSelect: (deviceId: string) => void;
+ emptyLabel: string;
+ extra?: ReactNode;
+}
+
+const DeviceSplitButton = ({
+ isOn,
+ isLoading,
+ toggleAriaLabel,
+ caretAriaLabel,
+ caretMenuLabel,
+ toggleIcon,
+ onToggle,
+ devices,
+ selectedId,
+ onSelect,
+ emptyLabel,
+ extra,
+}: DeviceSplitButtonProps): ReactElement => {
+ const variant = isOn ? ButtonVariant.Primary : ButtonVariant.Secondary;
+ return (
+
+
+
+
+ }
+ aria-label={caretAriaLabel}
+ className="!w-6 !rounded-l-none !border-l-0 !px-0"
+ />
+
+
+
+
+ {caretMenuLabel}
+
+ {devices.length === 0 ? (
+
+ {emptyLabel}
+
+ ) : (
+ devices.map((device) => {
+ const isSelected = device.deviceId === selectedId;
+ return (
+
onSelect(device.deviceId)}
+ aria-label={device.label}
+ >
+
+
+ {isSelected ? (
+
+ ) : null}
+
+ {device.label}
+
+
+ );
+ })
+ )}
+ {extra ? (
+
+ {extra}
+
+ ) : null}
+
+
+
+ {reactionsOpen ? (
+
+ {REACTION_EMOJIS.map((emoji) => (
+
+ ))}
+ {
+ if (!emoji) {
+ return;
+ }
+
+ handleCustomReaction(emoji);
+ }}
+ renderTrigger={({ isOpen, toggleOpen }) => (
+ }
+ aria-label="Custom reaction"
+ aria-expanded={isOpen}
+ disabled={!!busy}
+ onClick={toggleOpen}
+ />
+ )}
+ />
+
+ ) : null}
+
+
+ {canPublish ? (
+
+ : }
+ onToggle={() => guarded('mic', toggleMic)}
+ devices={microphones}
+ selectedId={selectedMicId}
+ onSelect={(id) => {
+ selectMic(id).catch((err: unknown) =>
+ displayToast(
+ err instanceof Error
+ ? err.message
+ : 'Failed to switch mic',
+ ),
+ );
+ }}
+ emptyLabel="No microphones"
+ extra={
+ localAudioStream ? (
+
+
+ Input
+
+
+
+ ) : null
+ }
+ />
+ }
+ onToggle={() => guarded('camera', toggleCamera)}
+ devices={cameras}
+ selectedId={selectedCameraId}
+ onSelect={(id) => {
+ selectCamera(id).catch((err: unknown) =>
+ displayToast(
+ err instanceof Error
+ ? err.message
+ : 'Failed to switch camera',
+ ),
+ );
+ }}
+ emptyLabel="No cameras"
+ />
+
+ ) : null}
+
+ {canPublish ?
: null}
+
+
+
+ {isModerated && isAudience ? (
+ }
+ loading={busy === 'queue'}
+ disabled={!canJoinQueue}
+ onClick={handleJoinQueue}
+ >
+ {isQueued ? 'Queued' : 'Join queue'}
+
+ ) : null}
+ {isFreeForAll && isAudience ? (
+ }
+ loading={busy === 'join-stage'}
+ disabled={!canJoinStage}
+ onClick={handleJoinStage}
+ >
+ {isStageFull ? 'Stage full' : 'Join stage'}
+
+ ) : null}
+ {canLeaveStage ? (
+ }
+ loading={busy === 'leave-stage'}
+ onClick={handleLeaveStage}
+ >
+ Leave stage
+
+ ) : null}
+
+
+
+
+
+ {showGoLive ? (
+
+ ) : null}
+ {isHost ? (
+
+ ) : (
+ }
+ aria-label="Leave"
+ onClick={onLeave}
+ >
+ Leave
+
+ )}
+
+
+
+