import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react" import styles from "./document.module.css" import Trash from "@geist-ui/icons/trash" import FormattingIcons from "./formatting-icons" import TextareaMarkdown, { TextareaMarkdownRef } from "textarea-markdown-editor" import { Button, Input, Spacer, Tabs, Textarea } from "@geist-ui/core/dist" import Preview from "@components/preview" // import Link from "next/link" type Props = { title?: string content?: string setTitle?: (title: string) => void handleOnContentChange?: (e: ChangeEvent) => void initialTab?: "edit" | "preview" remove?: () => void onPaste?: (e: any) => void } const Document = ({ onPaste, remove, title, content, setTitle, initialTab = "edit", 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" && } {/* */}