markdown textareas

components/text.js

@@ -1,9 +1,44 @@
 import styles from './text.module.css'
+import ReactMarkdown from 'react-markdown'
+import gfm from 'remark-gfm'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+/* Use `…/dist/cjs/…` if you’re not in ESM! */
+import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
 export default function Text ({ children }) {
   return (
-    <pre className={styles.text}>
+    <div className={styles.text}>
+      <ReactMarkdown
+        components={{
+          h1: 'h6',
+          h2: 'h6',
+          h3: 'h6',
+          h4: 'h6',
+          h5: 'h6',
+          h6: 'h6',
+          table: ({ node, ...props }) =>
+            <div className='table-responsive'>
+              <table className='table table-bordered table-sm' {...props} />
+            </div>,
+          code ({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '')
+            return !inline
+              ? (
+                <SyntaxHighlighter showLineNumbers style={atomDark} language={match && match[1]} PreTag='div' {...props}>
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+                )
+              : (
+                <code className={className} style={atomDark} {...props}>
                   {children}
-    </pre>
+                </code>
+                )
+          }
+        }}
+        remarkPlugins={[gfm]}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
   )
 }

components/text.module.css

@@ -1,7 +1,32 @@
 .text {
     font-size: 90%;
+    font-family: inherit;
+}
+
+.text p {
+    margin-bottom: .5rem;
     white-space: pre-wrap;
     word-break: break-word;
-    font-family: inherit;
+}
-    margin: 0;
+
+.text pre {
+    margin-bottom: .5rem;
+}
+
+.text > *:last-child {
+    margin-bottom: 0;
+}
+
+.text img {
+    max-width: 100%;
+    max-height: 300px;
+}
+
+.text table {
+    width: auto;
+}
+
+.text blockquote {
+    border-left: 2px solid #212529;
+    padding-left: 1rem;
 }

package.json

@@ -20,7 +20,7 @@
     "formik": "^2.2.6",
     "graphql": "^15.5.0",
     "ln-service": "^51.7.0",
-    "next": "10.0.9",
+    "next": "^10.2.3",
     "next-auth": "^3.13.3",
     "next-seo": "^4.24.0",
     "prisma": "^2.25.0",
@@ -28,6 +28,9 @@
     "react": "17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "17.0.1",
+    "react-markdown": "^6.0.2",
+    "react-syntax-highlighter": "^15.4.3",
+    "remark-gfm": "^1.0.0",
     "sass": "^1.32.8",
     "secp256k1": "^4.0.2",
     "swr": "^0.5.4",