Add Markdown preview to SupportAdd page

homenoc · May 6, 2023 · b3bb3f8 · b3bb3f8
1 parent f495e1a
commit b3bb3f8
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/pages/Support/SupportAddDialog.tsx b/src/pages/Support/SupportAddDialog.tsx
@@ -18,6 +18,8 @@ import { useSnackbar } from 'notistack'
 import { Post } from '../../api/Support'
 import { Get } from '../../api/Info'
 import { StyledTextFieldVeryLong } from '../../style'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export function SupportAddDialog(props: { groupEnable: boolean }) {
   const { groupEnable } = props
@@ -124,6 +126,16 @@ export function SupportAddDialog(props: { groupEnable: boolean }) {
                 variant="outlined"
               />
             </Grid>
+            <Grid item xs={12}>
+              <h3>内容のプレビュー ↓</h3>
+              <ReactMarkdown
+                skipHtml={true}
+                remarkPlugins={[remarkGfm]}
+              >
+                {data.data}
+              </ReactMarkdown>
+              内容のプレビュー ↑
+            </Grid>
           </Grid>
         </DialogContent>
         <DialogActions>