feat(subplebbit settings): add markdown preview for description

This commit is contained in:
plebeius.eth
2024-02-10 11:02:02 +01:00
parent 3b3fdd0c52
commit 30caa7e7ab
2 changed files with 21 additions and 1 deletions

View File

@@ -65,6 +65,15 @@
white-space: pre-wrap;
}
.descriptionMarkdownPreviewTitle {
margin: 10px 0;
font-size: 16px;
}
.descriptionPreview {
font-size: 14px;
}
.readOnlyRoleExclude {
font-size: 12px;
}

View File

@@ -16,6 +16,7 @@ import styles from './subplebbit-settings.module.css';
import { isValidURL } from '../../../lib/utils/url-utils';
import { OptionInput, Exclude, getDefaultChallengeDescription, getDefaultChallengeOptions, getDefaultChallengeSettings } from '../../../lib/utils/challenge-utils';
import LoadingEllipsis from '../../../components/loading-ellipsis';
import Markdown from '../../../components/markdown';
import Sidebar from '../../../components/sidebar';
import { isCreateSubplebbitView, isSubplebbitSettingsView } from '../../../lib/utils/view-utils';
@@ -112,7 +113,17 @@ const Description = ({ isReadOnly = false }: { isReadOnly?: boolean }) => {
{isReadOnly ? (
<pre className={styles.readOnlyDescription}>{description}</pre>
) : (
<textarea value={description ?? ''} onChange={(e) => setSubplebbitSettingsStore({ description: e.target.value })} />
<>
<textarea value={description ?? ''} onChange={(e) => setSubplebbitSettingsStore({ description: e.target.value })} />
<div className={styles.descriptionPreview}>
{description && (
<>
<div className={styles.descriptionMarkdownPreviewTitle}>Markdown Preview:</div>
<Markdown content={description} />
</>
)}
</div>
</>
)}
</div>
</div>