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 { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea, Tooltip } from "@geist-ui/core" import Preview from "@components/preview" // import Link from "next/link" type Props = { title?: string content?: string setTitle?: (title: string) => void setContent?: (content: string) => void handleOnContentChange?: (e: ChangeEvent) => void initialTab?: "edit" | "preview" skeleton?: boolean remove?: () => void onPaste?: (e: any) => void } const Document = ({ onPaste, remove, title, content, setTitle, setContent, initialTab = 'edit', skeleton, 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 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]) if (skeleton) { return <>
{remove && }
} return ( <>
{remove &&
{tab === 'edit' && } {/* */}