forked from github/cinny
Add new space settings (#2293)
This commit is contained in:
Ajay Bura
@@ -0,0 +1,396 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
IconButton,
|
||||
Icon,
|
||||
Icons,
|
||||
Scroll,
|
||||
Switch,
|
||||
Button,
|
||||
MenuItem,
|
||||
config,
|
||||
color,
|
||||
} from 'folds';
|
||||
import { Page, PageContent, PageHeader } from '../../../components/page';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../../state/settings';
|
||||
import { copyToClipboard } from '../../../utils/dom';
|
||||
import { useRoom } from '../../../hooks/useRoom';
|
||||
import { useRoomState } from '../../../hooks/useRoomState';
|
||||
import { StateEventEditor, StateEventInfo } from './StateEventEditor';
|
||||
import { SendRoomEvent } from './SendRoomEvent';
|
||||
import { useRoomAccountData } from '../../../hooks/useRoomAccountData';
|
||||
import { CutoutCard } from '../../../components/cutout-card';
|
||||
import {
|
||||
AccountDataEditor,
|
||||
AccountDataSubmitCallback,
|
||||
} from '../../../components/AccountDataEditor';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
|
||||
type DeveloperToolsProps = {
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
|
||||
const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
|
||||
const mx = useMatrixClient();
|
||||
const room = useRoom();
|
||||
|
||||
const roomState = useRoomState(room);
|
||||
const accountData = useRoomAccountData(room);
|
||||
|
||||
const [expandState, setExpandState] = useState(false);
|
||||
const [expandStateType, setExpandStateType] = useState<string>();
|
||||
const [openStateEvent, setOpenStateEvent] = useState<StateEventInfo>();
|
||||
const [composeEvent, setComposeEvent] = useState<{ type?: string; stateKey?: string }>();
|
||||
|
||||
const [expandAccountData, setExpandAccountData] = useState(false);
|
||||
const [accountDataType, setAccountDataType] = useState<string | null>();
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setOpenStateEvent(undefined);
|
||||
setComposeEvent(undefined);
|
||||
setAccountDataType(undefined);
|
||||
}, []);
|
||||
|
||||
const submitAccountData: AccountDataSubmitCallback = useCallback(
|
||||
async (type, content) => {
|
||||
await mx.setRoomAccountData(room.roomId, type, content);
|
||||
},
|
||||
[mx, room.roomId]
|
||||
);
|
||||
|
||||
if (accountDataType !== undefined) {
|
||||
return (
|
||||
<AccountDataEditor
|
||||
type={accountDataType ?? undefined}
|
||||
content={accountDataType ? accountData.get(accountDataType) : undefined}
|
||||
submitChange={submitAccountData}
|
||||
requestClose={handleClose}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (composeEvent) {
|
||||
return <SendRoomEvent {...composeEvent} requestClose={handleClose} />;
|
||||
}
|
||||
|
||||
if (openStateEvent) {
|
||||
return <StateEventEditor {...openStateEvent} requestClose={handleClose} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false}>
|
||||
<Box grow="Yes" gap="200">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<Text size="H3" truncate>
|
||||
Developer Tools
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes">
|
||||
<Scroll hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
<Box direction="Column" gap="700">
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Options</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Enable Developer Tools"
|
||||
after={
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={developerTools}
|
||||
onChange={setDeveloperTools}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
{developerTools && (
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Room ID"
|
||||
description={`Copy room ID to clipboard. ("${room.roomId}")`}
|
||||
after={
|
||||
<Button
|
||||
onClick={() => copyToClipboard(room.roomId ?? '<NO_ROOM_ID_FOUND>')}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
>
|
||||
<Text size="B300">Copy</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{developerTools && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Data</Text>
|
||||
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="New Message Event"
|
||||
description="Create and send a new message event within the room."
|
||||
after={
|
||||
<Button
|
||||
onClick={() => setComposeEvent({})}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
>
|
||||
<Text size="B300">Compose</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Room State"
|
||||
description="State events of the room."
|
||||
after={
|
||||
<Button
|
||||
onClick={() => setExpandState(!expandState)}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
before={
|
||||
<Icon
|
||||
src={expandState ? Icons.ChevronTop : Icons.ChevronBottom}
|
||||
size="100"
|
||||
filled
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text size="B300">{expandState ? 'Collapse' : 'Expand'}</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{expandState && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Box justifyContent="SpaceBetween">
|
||||
<Text size="L400">Events</Text>
|
||||
<Text size="L400">Total: {roomState.size}</Text>
|
||||
</Box>
|
||||
<CutoutCard>
|
||||
<MenuItem
|
||||
onClick={() => setComposeEvent({ stateKey: '' })}
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="0"
|
||||
before={<Icon size="50" src={Icons.Plus} />}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
Add New
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
{Array.from(roomState.keys())
|
||||
.sort()
|
||||
.map((eventType) => {
|
||||
const expanded = eventType === expandStateType;
|
||||
const stateKeyToEvents = roomState.get(eventType);
|
||||
if (!stateKeyToEvents) return null;
|
||||
|
||||
return (
|
||||
<Box id={eventType} key={eventType} direction="Column" gap="100">
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
setExpandStateType(expanded ? undefined : eventType)
|
||||
}
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="0"
|
||||
before={
|
||||
<Icon
|
||||
size="50"
|
||||
src={expanded ? Icons.ChevronBottom : Icons.ChevronRight}
|
||||
/>
|
||||
}
|
||||
after={<Text size="L400">{stateKeyToEvents.size}</Text>}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
{eventType}
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
{expanded && (
|
||||
<div
|
||||
style={{
|
||||
marginLeft: config.space.S400,
|
||||
borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
setComposeEvent({ type: eventType, stateKey: '' })
|
||||
}
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="0"
|
||||
before={<Icon size="50" src={Icons.Plus} />}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
Add New
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
{Array.from(stateKeyToEvents.keys())
|
||||
.sort()
|
||||
.map((stateKey) => (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setOpenStateEvent({
|
||||
type: eventType,
|
||||
stateKey,
|
||||
});
|
||||
}}
|
||||
key={stateKey}
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="0"
|
||||
after={<Icon size="50" src={Icons.ChevronRight} />}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
{stateKey ? `"${stateKey}"` : 'Default'}
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</CutoutCard>
|
||||
</Box>
|
||||
)}
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Account Data"
|
||||
description="Private personalization data stored within room."
|
||||
after={
|
||||
<Button
|
||||
onClick={() => setExpandAccountData(!expandAccountData)}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
before={
|
||||
<Icon
|
||||
src={expandAccountData ? Icons.ChevronTop : Icons.ChevronBottom}
|
||||
size="100"
|
||||
filled
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text size="B300">{expandAccountData ? 'Collapse' : 'Expand'}</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{expandAccountData && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Box justifyContent="SpaceBetween">
|
||||
<Text size="L400">Events</Text>
|
||||
<Text size="L400">Total: {accountData.size}</Text>
|
||||
</Box>
|
||||
<CutoutCard>
|
||||
<MenuItem
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="0"
|
||||
before={<Icon size="50" src={Icons.Plus} />}
|
||||
onClick={() => setAccountDataType(null)}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
Add New
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
{Array.from(accountData.keys())
|
||||
.sort()
|
||||
.map((type) => (
|
||||
<MenuItem
|
||||
key={type}
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="0"
|
||||
after={<Icon size="50" src={Icons.ChevronRight} />}
|
||||
onClick={() => setAccountDataType(type)}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
{type}
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</CutoutCard>
|
||||
</Box>
|
||||
)}
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
|
||||
import { MatrixError } from 'matrix-js-sdk';
|
||||
import {
|
||||
Box,
|
||||
Chip,
|
||||
Icon,
|
||||
Icons,
|
||||
IconButton,
|
||||
Text,
|
||||
config,
|
||||
Button,
|
||||
Spinner,
|
||||
color,
|
||||
TextArea as TextAreaComponent,
|
||||
Input,
|
||||
} from 'folds';
|
||||
import { Page, PageHeader } from '../../../components/page';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useRoom } from '../../../hooks/useRoom';
|
||||
import { useAlive } from '../../../hooks/useAlive';
|
||||
import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { syntaxErrorPosition } from '../../../utils/dom';
|
||||
import { Cursor } from '../../../plugins/text-area';
|
||||
|
||||
const EDITOR_INTENT_SPACE_COUNT = 2;
|
||||
|
||||
export type SendRoomEventProps = {
|
||||
type?: string;
|
||||
stateKey?: string;
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = useRoom();
|
||||
const alive = useAlive();
|
||||
const composeStateEvent = typeof stateKey === 'string';
|
||||
|
||||
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [jsonError, setJSONError] = useState<SyntaxError>();
|
||||
const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
|
||||
textAreaRef,
|
||||
EDITOR_INTENT_SPACE_COUNT
|
||||
);
|
||||
|
||||
const [submitState, submit] = useAsyncCallback<
|
||||
object,
|
||||
MatrixError,
|
||||
[string, string | undefined, object]
|
||||
>(
|
||||
useCallback(
|
||||
(evtType, evtStateKey, evtContent) => {
|
||||
if (typeof evtStateKey === 'string') {
|
||||
return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
|
||||
}
|
||||
return mx.sendEvent(room.roomId, evtType as any, evtContent);
|
||||
},
|
||||
[mx, room]
|
||||
)
|
||||
);
|
||||
const submitting = submitState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (submitting) return;
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const typeInput = target?.typeInput as HTMLInputElement | undefined;
|
||||
const stateKeyInput = target?.stateKeyInput as HTMLInputElement | undefined;
|
||||
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
|
||||
if (!typeInput || !contentTextArea) return;
|
||||
|
||||
const evtType = typeInput.value;
|
||||
const evtStateKey = stateKeyInput?.value;
|
||||
const contentStr = contentTextArea.value.trim();
|
||||
|
||||
let parsedContent: object;
|
||||
try {
|
||||
parsedContent = JSON.parse(contentStr);
|
||||
} catch (e) {
|
||||
setJSONError(e as SyntaxError);
|
||||
return;
|
||||
}
|
||||
setJSONError(undefined);
|
||||
|
||||
if (parsedContent === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
submit(evtType, evtStateKey, parsedContent).then(() => {
|
||||
if (alive()) {
|
||||
requestClose();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (jsonError) {
|
||||
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
|
||||
const cursor = new Cursor(errorPosition, errorPosition, 'none');
|
||||
operations.select(cursor);
|
||||
getTarget()?.focus();
|
||||
}
|
||||
}, [jsonError, operations, getTarget]);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false} balance>
|
||||
<Box alignItems="Center" grow="Yes" gap="200">
|
||||
<Box alignItems="Inherit" grow="Yes" gap="200">
|
||||
<Chip
|
||||
size="500"
|
||||
radii="Pill"
|
||||
onClick={requestClose}
|
||||
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||
>
|
||||
<Text size="T300">Developer Tools</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
grow="Yes"
|
||||
style={{ padding: config.space.S400 }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
aria-disabled={submitting}
|
||||
>
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">{composeStateEvent ? 'State Event Type' : 'Message Event Type'}</Text>
|
||||
<Box gap="300">
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Input
|
||||
variant="Background"
|
||||
name="typeInput"
|
||||
size="400"
|
||||
radii="300"
|
||||
readOnly={submitting}
|
||||
defaultValue={type}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
variant="Success"
|
||||
size="400"
|
||||
radii="300"
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
|
||||
>
|
||||
<Text size="B400">Send</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{submitState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{submitState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
{composeStateEvent && (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">State Key (Optional)</Text>
|
||||
<Input
|
||||
variant="Background"
|
||||
name="stateKeyInput"
|
||||
size="400"
|
||||
radii="300"
|
||||
readOnly={submitting}
|
||||
defaultValue={stateKey}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Box shrink="No">
|
||||
<Text size="L400">JSON Content</Text>
|
||||
</Box>
|
||||
<TextAreaComponent
|
||||
ref={textAreaRef}
|
||||
name="contentTextArea"
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
onKeyDown={handleKeyDown}
|
||||
resize="None"
|
||||
spellCheck="false"
|
||||
required
|
||||
readOnly={submitting}
|
||||
/>
|
||||
{jsonError && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>
|
||||
{jsonError.name}: {jsonError.message}
|
||||
</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Icon,
|
||||
Icons,
|
||||
IconButton,
|
||||
Chip,
|
||||
Scroll,
|
||||
config,
|
||||
TextArea as TextAreaComponent,
|
||||
color,
|
||||
Spinner,
|
||||
Button,
|
||||
} from 'folds';
|
||||
import { MatrixError } from 'matrix-js-sdk';
|
||||
import { Page, PageHeader } from '../../../components/page';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { TextViewerContent } from '../../../components/text-viewer';
|
||||
import { useStateEvent } from '../../../hooks/useStateEvent';
|
||||
import { useRoom } from '../../../hooks/useRoom';
|
||||
import { StateEvent } from '../../../../types/matrix/room';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useAlive } from '../../../hooks/useAlive';
|
||||
import { Cursor } from '../../../plugins/text-area';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { syntaxErrorPosition } from '../../../utils/dom';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
|
||||
import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
|
||||
|
||||
const EDITOR_INTENT_SPACE_COUNT = 2;
|
||||
|
||||
type StateEventEditProps = {
|
||||
type: string;
|
||||
stateKey: string;
|
||||
content: object;
|
||||
requestClose: () => void;
|
||||
};
|
||||
function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEditProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = useRoom();
|
||||
const alive = useAlive();
|
||||
|
||||
const defaultContentStr = useMemo(
|
||||
() => JSON.stringify(content, undefined, EDITOR_INTENT_SPACE_COUNT),
|
||||
[content]
|
||||
);
|
||||
|
||||
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [jsonError, setJSONError] = useState<SyntaxError>();
|
||||
const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
|
||||
textAreaRef,
|
||||
EDITOR_INTENT_SPACE_COUNT
|
||||
);
|
||||
|
||||
const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
|
||||
useCallback(
|
||||
(c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
|
||||
[mx, room, type, stateKey]
|
||||
)
|
||||
);
|
||||
const submitting = submitState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (submitting) return;
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
|
||||
if (!contentTextArea) return;
|
||||
|
||||
const contentStr = contentTextArea.value.trim();
|
||||
|
||||
let parsedContent: object;
|
||||
try {
|
||||
parsedContent = JSON.parse(contentStr);
|
||||
} catch (e) {
|
||||
setJSONError(e as SyntaxError);
|
||||
return;
|
||||
}
|
||||
setJSONError(undefined);
|
||||
|
||||
if (
|
||||
parsedContent === null ||
|
||||
defaultContentStr === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
submit(parsedContent).then(() => {
|
||||
if (alive()) {
|
||||
requestClose();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (jsonError) {
|
||||
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
|
||||
const cursor = new Cursor(errorPosition, errorPosition, 'none');
|
||||
operations.select(cursor);
|
||||
getTarget()?.focus();
|
||||
}
|
||||
}, [jsonError, operations, getTarget]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
grow="Yes"
|
||||
style={{ padding: config.space.S400 }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
aria-disabled={submitting}
|
||||
>
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">State Event</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title={type}
|
||||
description={stateKey}
|
||||
after={
|
||||
<Box gap="200">
|
||||
<Button
|
||||
variant="Success"
|
||||
size="300"
|
||||
radii="300"
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
|
||||
>
|
||||
<Text size="B300">Save</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
onClick={requestClose}
|
||||
disabled={submitting}
|
||||
>
|
||||
<Text size="B300">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
|
||||
{submitState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{submitState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Box shrink="No">
|
||||
<Text size="L400">JSON Content</Text>
|
||||
</Box>
|
||||
<TextAreaComponent
|
||||
ref={textAreaRef}
|
||||
name="contentTextArea"
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
onKeyDown={handleKeyDown}
|
||||
defaultValue={defaultContentStr}
|
||||
resize="None"
|
||||
spellCheck="false"
|
||||
required
|
||||
readOnly={submitting}
|
||||
/>
|
||||
{jsonError && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>
|
||||
{jsonError.name}: {jsonError.message}
|
||||
</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type StateEventViewProps = {
|
||||
content: object;
|
||||
eventJSONStr: string;
|
||||
onEditContent?: (content: object) => void;
|
||||
};
|
||||
function StateEventView({ content, eventJSONStr, onEditContent }: StateEventViewProps) {
|
||||
return (
|
||||
<Box direction="Column" style={{ padding: config.space.S400 }} gap="400">
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Box gap="200" alignItems="End">
|
||||
<Box grow="Yes">
|
||||
<Text size="L400">State Event</Text>
|
||||
</Box>
|
||||
{onEditContent && (
|
||||
<Box shrink="No" gap="200">
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
outlined
|
||||
onClick={() => onEditContent(content)}
|
||||
>
|
||||
<Text size="B300">Edit</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<SequenceCard variant="SurfaceVariant">
|
||||
<Scroll visibility="Always" size="300" hideTrack>
|
||||
<TextViewerContent
|
||||
size="T300"
|
||||
style={{
|
||||
padding: `${config.space.S300} ${config.space.S100} ${config.space.S300} ${config.space.S300}`,
|
||||
}}
|
||||
text={eventJSONStr}
|
||||
langName="JSON"
|
||||
/>
|
||||
</Scroll>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export type StateEventInfo = {
|
||||
type: string;
|
||||
stateKey: string;
|
||||
};
|
||||
export type StateEventEditorProps = StateEventInfo & {
|
||||
requestClose: () => void;
|
||||
};
|
||||
|
||||
export function StateEventEditor({ type, stateKey, requestClose }: StateEventEditorProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = useRoom();
|
||||
const stateEvent = useStateEvent(room, type as unknown as StateEvent, stateKey);
|
||||
const [editContent, setEditContent] = useState<object>();
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
|
||||
const canEdit = canSendStateEvent(type, getPowerLevel(mx.getSafeUserId()));
|
||||
|
||||
const eventJSONStr = useMemo(() => {
|
||||
if (!stateEvent) return '';
|
||||
return JSON.stringify(stateEvent.event, null, EDITOR_INTENT_SPACE_COUNT);
|
||||
}, [stateEvent]);
|
||||
|
||||
const handleCloseEdit = useCallback(() => {
|
||||
setEditContent(undefined);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false} balance>
|
||||
<Box alignItems="Center" grow="Yes" gap="200">
|
||||
<Box alignItems="Inherit" grow="Yes" gap="200">
|
||||
<Chip
|
||||
size="500"
|
||||
radii="Pill"
|
||||
onClick={requestClose}
|
||||
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||
>
|
||||
<Text size="T300">Developer Tools</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes" direction="Column">
|
||||
{editContent ? (
|
||||
<StateEventEdit
|
||||
type={type}
|
||||
stateKey={stateKey}
|
||||
content={editContent}
|
||||
requestClose={handleCloseEdit}
|
||||
/>
|
||||
) : (
|
||||
<StateEventView
|
||||
content={stateEvent?.getContent() ?? {}}
|
||||
onEditContent={canEdit ? setEditContent : undefined}
|
||||
eventJSONStr={eventJSONStr}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './DevelopTools';
|
||||
Reference in New Issue
Block a user