endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add responsive styles for media content in editor and preview

Browse Source
This commit is contained in:
Ender 2025-10-24 18:19:43 +02:00
parent b93e0ac9c1
commit a05fdda2d2
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/admin/src/components/EditorShell.tsx
View File

@ -255,7 +255,14 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
{activeStep === 3 && ( {activeStep === 3 && (
<Box> <Box>
<Typography variant="subtitle1" sx={{ mb: 1 }}>Edit Content</Typography> <Typography variant="subtitle1" sx={{ mb: 1 }}>Edit Content</Typography>
<RichEditor ref={editorRef as any} value={draft} onChange={(html) => setDraft(html)} placeholder="Write your post..." /> <Box sx={{
overflowX: 'auto',
'& img': { maxWidth: '100%', height: 'auto' },
'& figure img': { display: 'block', margin: '0 auto' },
'& video, & iframe': { maxWidth: '100%' },
}}>
<RichEditor ref={editorRef as any} value={draft} onChange={(html) => setDraft(html)} placeholder="Write your post..." />
</Box>
{draftId && ( {draftId && (
<Typography variant="caption" sx={{ mt: 1, display: 'block' }}>ID: {draftId}</Typography> <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>ID: {draftId}</Typography>
)} )}
@ -286,7 +293,17 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
<Alert severity="error">{previewError}</Alert> <Alert severity="error">{previewError}</Alert>
)} )}
{!previewLoading && !previewError && ( {!previewLoading && !previewError && (
<Box sx={{ p: 1.5, border: '1px solid #eee', borderRadius: 1, bgcolor: '#fff' }} <Box
sx={{
p: 1.5,
border: '1px solid #eee',
borderRadius: 1,
bgcolor: '#fff',
overflowX: 'auto',
'& img': { maxWidth: '100%', height: 'auto' },
'& figure img': { display: 'block', margin: '0 auto' },
'& video, & iframe': { maxWidth: '100%' },
}}
dangerouslySetInnerHTML={{ __html: previewHtml || draft }} dangerouslySetInnerHTML={{ __html: previewHtml || draft }}
/> />
)} )}