CoastalCommitsPastes/client/components/document/index.tsx

85 lines
3.4 KiB
TypeScript
Raw Normal View History

2022-03-08 03:37:18 -05:00
import { Button, ButtonGroup, Card, Input, Tabs, Textarea } from "@geist-ui/core"
import { ChangeEvent, FormEvent, memo, useEffect, useReducer, useRef, useState } from "react"
2022-03-06 19:46:59 -05:00
import styles from './document.module.css'
import MarkdownPreview from '../preview'
import { Trash } from '@geist-ui/icons'
2022-03-08 03:37:18 -05:00
import FormattingIcons from "../formatting-icons"
2022-03-06 19:46:59 -05:00
type Props = {
editable: boolean
remove?: () => void
title?: string
content?: string
setTitle?: (title: string) => void
setContent?: (content: string) => void
2022-03-07 01:16:08 -05:00
initialTab?: "edit" | "preview"
2022-03-06 19:46:59 -05:00
}
2022-03-07 01:16:08 -05:00
const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit' }: Props) => {
2022-03-06 19:46:59 -05:00
const codeEditorRef = useRef<HTMLTextAreaElement>(null)
const [tab, setTab] = useState(initialTab)
const handleTabChange = (newTab: string) => {
if (newTab === 'edit') {
codeEditorRef.current?.focus()
}
setTab(newTab as 'edit' | 'preview')
}
2022-03-06 19:46:59 -05:00
const removeFile = (remove?: () => void) => {
if (remove) {
if (content && content.trim().length > 0) {
const confirmed = window.confirm("Are you sure you want to remove this file?")
if (confirmed) {
remove()
}
} else {
remove()
}
}
}
return (
2022-03-07 21:36:36 -05:00
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
2022-03-06 19:46:59 -05:00
<div className={styles.fileNameContainer}>
<Input
placeholder="MyFile.md"
value={title}
onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
marginTop="var(--gap-double)"
size={1.2}
font={1.2}
label="Filename"
disabled={!editable}
width={"100%"}
/>
{remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
</div>
<div className={styles.descriptionContainer}>
{tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
<Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
2022-03-06 19:46:59 -05:00
<Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
<Textarea
ref={codeEditorRef}
2022-03-08 03:37:18 -05:00
placeholder="Type some contents..."
2022-03-06 19:46:59 -05:00
value={content}
onChange={(event) => setContent ? setContent(event.target.value) : null}
width="100%"
height="500px"
disabled={!editable}
resize="vertical"
className={styles.textarea}
/>
</Tabs.Item>
<Tabs.Item label="Preview" value="preview">
<MarkdownPreview height={500} content={content} />
</Tabs.Item>
</Tabs>
2022-03-08 03:37:18 -05:00
</div >
</Card >
2022-03-06 19:46:59 -05:00
)
}
export default memo(Document)