import { useRef, useState } from 'react' import { Form, useActionData, useLoaderData, useNavigation } from 'react-router-dom' import { CheckboxFieldUncontrolled, InputError, InputFieldUncontrolled, MenuBar } from '../../components/Inputs' import { ProfileSection } from '../../components/ProfileSection' import { useAppSelector } from '../../hooks' import { BlogFormErrors, BlogPageLoaderResult } from 'types' import '../../styles/innerPage.css' import '../../styles/styles.css' import '../../styles/write.css' import { LoadingSpinner } from 'components/LoadingSpinner' import { marked } from 'marked' import DOMPurify from 'dompurify' import { EditorContent, useEditor } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import Link from '@tiptap/extension-link' import Image from '@tiptap/extension-image' import { AlertPopup } from 'components/AlertPopup' export const WritePage = () => { const userState = useAppSelector((state) => state.user) const data = useLoaderData() as BlogPageLoaderResult const formErrors = useActionData() as BlogFormErrors const navigation = useNavigation() const blog = data?.blog const title = data?.blog ? 'Edit blog post' : 'Submit a blog post' const html = marked.parse(blog?.content || '', { async: false }) const sanitized = DOMPurify.sanitize(html) const [content, setContent] = useState(sanitized) const editor = useEditor({ content: content, extensions: [ StarterKit, Link, Image.configure({ inline: true, HTMLAttributes: { class: 'IBMSMSMBSSPostImg' } }) ], onUpdate: ({ editor }) => { setContent(editor.getHTML()) } }) const formRef = useRef(null) const [showConfirmPopup, setShowConfirmPopup] = useState(false) const handleReset = () => { setShowConfirmPopup(true) } const handleResetConfirm = (confirm: boolean) => { setShowConfirmPopup(false) // Cancel if not confirmed if (!confirm) return formRef.current?.reset() } return (

{title}

{navigation.state === 'loading' && ( )} {navigation.state === 'submitting' && ( )}
{editor && (
{typeof formErrors?.content !== 'undefined' && ( )}
)} {typeof blog?.dTag !== 'undefined' && ( )} {typeof blog?.rTag !== 'undefined' && ( )} {typeof blog?.published_at !== 'undefined' && ( )}
{showConfirmPopup && ( setShowConfirmPopup(false)} header={'Are you sure?'} label={ blog ? `Are you sure you want to clear all changes?` : `Are you sure you want to clear all field data?` } /> )}
{userState.auth && userState.user?.pubkey && ( )}
) }