import Button from "@geist-ui/core/dist/button" import Card from "@geist-ui/core/dist/card" import ButtonGroup from "@geist-ui/core/dist/button-group" import Input from "@geist-ui/core/dist/input" import Spacer from "@geist-ui/core/dist/spacer" import Tabs from "@geist-ui/core/dist/tabs" import Textarea from "@geist-ui/core/dist/textarea" import Tooltip from "@geist-ui/core/dist/tooltip" import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react" import styles from './document.module.css' import Trash from '@geist-ui/icons/trash' import Download from '@geist-ui/icons/download' import ExternalLink from '@geist-ui/icons/externalLink' import FormattingIcons from "./formatting-icons" import Skeleton from "react-loading-skeleton" import dynamic from "next/dynamic"; const MarkdownPreview = dynamic(() => import("../preview")) // import Link from "next/link" type Props = { editable?: boolean remove?: () => void title?: string content?: string setTitle?: (title: string) => void setContent?: (content: string) => void handleOnContentChange?: (e: ChangeEvent) => void initialTab?: "edit" | "preview" skeleton?: boolean id?: string } const DownloadButton = ({ rawLink }: { rawLink?: string }) => { return (
) } const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit', skeleton, id, handleOnContentChange }: Props) => { const codeEditorRef = useRef(null) const [tab, setTab] = useState(initialTab) // const height = editable ? "500px" : '100%' const height = "100%"; const handleTabChange = (newTab: string) => { if (newTab === 'edit') { codeEditorRef.current?.focus() } setTab(newTab as 'edit' | 'preview') } const getType = useCallback(() => { if (!title) return const pathParts = title.split(".") const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : "" return language }, [title]) const onTitleChange = useCallback((event: ChangeEvent) => setTitle ? setTitle(event.target.value) : null, [setTitle]) const removeFile = useCallback(() => (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() } } }, [content]) const rawLink = () => { if (id) { return `/file/raw/${id}` } } if (skeleton) { return <>
{editable && }
} return ( <>
{remove && editable &&
{tab === 'edit' && editable && } {rawLink && } {/* */}