Function AddModifyPost

src/Components/Modify/Post/AddModifyPost.jsx:131–240

({type})

}

export default function AddModifyPost({type}) {
    const mode = type === "new" ? "添加" : "编辑";
    const navigate = useNavigate();
    const submit = useSubmit();
    const loaderData = useLoaderData();
    const postObj = loaderData?.postObj;
    const preparedPostContent = useMemo(
        () => preparePostContentForEditing(postObj?.content ?? ""),
        [postObj?.content]
    );
    const [title, setTitle] = useState(postObj?.title ?? "");
    const [content, setContent] = useState(preparedPostContent.content);
    const [attachments, setAttachments] = useState(preparedPostContent.attachments);
    const [contentError, setContentError] = useState("");
    const [submitting, setSubmitting] = useState(false);
    const attachmentsRef = useRef(attachments);
    const theme = useTheme();
    const darkMode = theme.palette.mode === 'dark';
    const contentBytes = estimateFinalPostContentBytes(content, attachments);
    const contentTooLarge = contentBytes > POST_CONTENT_MAX_BYTES;
    const postContentMessage = contentTooLarge
        ? `文章内容不能超过 ${formatPostContentSize(POST_CONTENT_MAX_BYTES)}，当前 ${formatPostContentSize(contentBytes)}。`
        : contentError;
    useEffect(() => {
        attachmentsRef.current = attachments;
    }, [attachments]);

    const handleAttachmentPrepared = useCallback((file) => {
        const attachment = createPostAttachmentFromFile(file);
        const nextAttachments = new Map(attachmentsRef.current);
        nextAttachments.set(attachment.token, attachment);
        attachmentsRef.current = nextAttachments;
        setAttachments(nextAttachments);
        return attachment.token;
    }, []);
    const resolveAttachmentPreview = useCallback(
        (src) => getPostAttachmentPreviewUrl(src, attachmentsRef.current),
        []
    );

    async function handleSubmit(event) {
        event.preventDefault();
        if (contentTooLarge || submitting) {
            return;
        }
        const form = event.currentTarget;
        const submitter = event.nativeEvent.submitter;
        setSubmitting(true);
        try {
            const finalizedContent = await finalizePostContentAttachments(content, attachmentsRef.current);
            const finalizedContentBytes = getUtf8ByteLength(finalizedContent);
            if (finalizedContentBytes > POST_CONTENT_MAX_BYTES) {
                setContentError(`文章内容不能超过 ${formatPostContentSize(POST_CONTENT_MAX_BYTES)}，当前 ${formatPostContentSize(finalizedContentBytes)}。`);
                return;
            }
            const formData = new FormData(form);
            if (submitter?.name) {
                formData.set(submitter.name, submitter.value);