diff --git a/components/comment.js b/components/comment.js
index 81fd2685..4b816d88 100644
--- a/components/comment.js
+++ b/components/comment.js
@@ -104,13 +104,12 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
>
{reply ? 'cancel' : 'reply'}
}
- {reply &&
-
{item.comments && !noComments
diff --git a/components/form.js b/components/form.js
index 63792f79..40210798 100644
--- a/components/form.js
+++ b/components/form.js
@@ -3,9 +3,13 @@ import InputGroup from 'react-bootstrap/InputGroup'
import BootstrapForm from 'react-bootstrap/Form'
import Alert from 'react-bootstrap/Alert'
import { Formik, Form as FormikForm, useFormikContext, useField } from 'formik'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import copy from 'clipboard-copy'
import Thumb from '../svgs/thumb-up-fill.svg'
+import { Nav } from 'react-bootstrap'
+import Markdown from '../svgs/markdown-line.svg'
+import styles from './form.module.css'
+import Text from '../components/text'
export function SubmitButton ({ children, variant, ...props }) {
const { isSubmitting } = useFormikContext()
@@ -55,11 +59,60 @@ export function InputSkeleton ({ label }) {
)
}
-export function Input ({ label, prepend, append, hint, showValid, groupClassName, ...props }) {
- const [field, meta] = props.readOnly ? [{}, {}] : useField(props)
+export function MarkdownInput ({ label, groupClassName, ...props }) {
+ const [tab, setTab] = useState('write')
+ const [, meta] = useField(props)
+
+ useEffect(() => {
+ !meta.value && setTab('write')
+ }, [meta.value])
+
return (
-
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function FormGroup ({ className, label, children }) {
+ return (
+
{label && {label}}
+ {children}
+
+ )
+}
+
+function InputInner ({ prepend, append, hint, showValid, ...props }) {
+ const [field, meta] = props.readOnly ? [{}, {}] : useField(props)
+
+ return (
+ <>
{prepend && (
@@ -85,7 +138,15 @@ export function Input ({ label, prepend, append, hint, showValid, groupClassName
{hint}
)}
-
+ >
+ )
+}
+
+export function Input ({ label, groupClassName, ...props }) {
+ return (
+
+
+
)
}
diff --git a/components/form.module.css b/components/form.module.css
new file mode 100644
index 00000000..da8afac0
--- /dev/null
+++ b/components/form.module.css
@@ -0,0 +1,12 @@
+.noTopLeftRadius textarea {
+ border-top-left-radius: 0;
+}
+
+.markdownInput textarea {
+ margin-top: -1px;
+}
+
+.markdownInput .text {
+ margin-top: -1px;
+ height: auto;
+}
\ No newline at end of file
diff --git a/components/reply.js b/components/reply.js
index 7179ed1d..06790912 100644
--- a/components/reply.js
+++ b/components/reply.js
@@ -1,4 +1,4 @@
-import { Form, Input, SubmitButton } from '../components/form'
+import { Form, MarkdownInput, SubmitButton } from '../components/form'
import * as Yup from 'yup'
import { gql, useMutation } from '@apollo/client'
import styles from './reply.module.css'
@@ -62,7 +62,7 @@ export default function Reply ({ parentId, onSuccess, autoFocus }) {
}
}}
>
-
-
text
optional>}
name='text'
as='textarea'
diff --git a/styles/globals.scss b/styles/globals.scss
index 70491496..b84fc152 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -44,6 +44,10 @@ $container-max-widths: (
md: 720px,
lg: 900px,
) !default;
+$nav-link-padding-y: .1rem;
+$nav-tabs-link-active-bg: #fff;
+$nav-tabs-link-hover-border-color: transparent;
+$nav-tabs-link-active-border-color: #ced4da #ced4da $nav-tabs-link-active-bg;
@import "~bootstrap/scss/bootstrap";
@@ -90,6 +94,21 @@ footer {
}
}
+.nav-tabs {
+ border-bottom: 0;
+}
+
+.nav-tabs .nav-link {
+ font-size: 80%;
+ color: #6c757d;
+ z-index: 100;
+ position: relative;
+}
+
+.nav-tabs .nav-link.active {
+ height: 100%;
+}
+
.form-label {
font-size: 92%;
font-weight: bold;
diff --git a/svgs/markdown-fill.svg b/svgs/markdown-fill.svg
new file mode 100644
index 00000000..835f23ce
--- /dev/null
+++ b/svgs/markdown-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/svgs/markdown-line.svg b/svgs/markdown-line.svg
new file mode 100644
index 00000000..2babc532
--- /dev/null
+++ b/svgs/markdown-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file