diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 2484ece0..7dca9193 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -154,4 +154,10 @@ .uploadButton span { font-weight: normal; +} + +.error { + font-weight: bold; + padding: 5px; + color: red; } \ No newline at end of file diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 21236627..e02b00a8 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -59,6 +59,19 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: const comment = useComment({ commentCid: postCid }); const address = comment?.author?.address; + const [lengthError, setLengthError] = useState(null); + + const checkContentLength = useRef( + _.debounce((content: string, t: Function) => { + const length = content.trim().length; + if (length > 2000) { + setLengthError(`${t('error')}: ${t('comment_field_too_long', { length })}`); + } else { + setLengthError(null); + } + }, 1000), + ).current; + const resetFields = () => { if (textRef.current) { textRef.current.value = ''; @@ -97,6 +110,9 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: const currentContent = textRef.current?.value.trim() || ''; const currentUrl = urlRef.current?.value.trim() || ''; + checkContentLength.cancel(); + setLengthError(null); + if (!currentTitle && !currentContent && !currentUrl) { alert(t('empty_comment_alert')); return; @@ -106,6 +122,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: return; } + if (currentContent.length > 2000) { + alert(t('error') + ': ' + t('field_too_long')); + return; + } + if ((isInAllView || isInSubscriptionsView) && !publishPostOptions.subplebbitAddress) { alert(t('no_board_selected_warning')); return; @@ -190,12 +211,16 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: const handleContentChange = (e: React.ChangeEvent) => { const formattedContent = formatMarkdown(e.target.value); isInPostView ? setPublishReplyOptions({ content: formattedContent }) : setPublishPostOptions({ content: formattedContent }); + checkContentLength(formattedContent, t); }; const onPublishReply = () => { const currentContent = textRef.current?.value.trim() || ''; const currentUrl = urlRef.current?.value.trim() || ''; + checkContentLength.cancel(); + setLengthError(null); + if (!currentContent && !currentUrl) { alert(t('empty_comment_alert')); return; @@ -206,6 +231,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: return; } + if (currentContent.length > 2000) { + alert(t('error') + ': ' + t('field_too_long')); + return; + } + publishReply(); }; @@ -316,6 +346,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: {t('comment')}