diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index ada47ed3..8daaf256 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/src/components/reply-modal/reply-modal.module.css @@ -62,7 +62,6 @@ .content textarea { vertical-align: top; - padding-top: 18px; } .footer button { @@ -81,14 +80,9 @@ padding-top: 2px; } -.parentCid { - color: var(--post-form-field-input-color); - position: absolute; - width: auto; - background-color: var(--post-form-field-input-background-color, white); - padding: 2px; - left: 1px; - top: 1px; +.publishButton { + width: 75px; + filter: var(--filter80) } .offlineBoard { diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index c559aeaa..b4a1a440 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -23,7 +23,7 @@ interface ReplyModalProps { const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { const { t } = useTranslation(); const { subplebbitAddress } = useParams() as { subplebbitAddress: string }; - const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid: parentCid, subplebbitAddress }); + const { setContent, publishReply } = useReply({ cid: parentCid, subplebbitAddress }); const account = useAccount(); const { displayName } = account?.author || {}; const [url, setUrl] = useState(''); @@ -45,15 +45,9 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { return; } publishReply(); + closeModal(); }; - useEffect(() => { - if (typeof replyIndex === 'number') { - closeModal(); - resetContent(); - } - }, [replyIndex, resetContent, closeModal]); - const nodeRef = useRef(null); const isMobile = useIsMobile(); @@ -97,6 +91,23 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { } }; + const contentPrefix = `c/${parentCid && Plebbit.getShortCid(parentCid)}\n`; + + const handleContentInput = (e: React.ChangeEvent) => { + const { value } = e.target; + if (!value.startsWith(contentPrefix)) { + e.target.value = contentPrefix + value.slice(contentPrefix.length); + } + }; + + const handleContentChange = (e: React.ChangeEvent) => { + // remove the prefix from the content to publish, and also add newlines for markdown + const contentWithoutPrefix = e.target.value.slice(contentPrefix.length).replace(/\n/g, '\n\n'); + if (textRef.current && textRef.current.value !== contentWithoutPrefix) { + setContent.content(contentWithoutPrefix); + } + }; + const modalContent = (
@@ -131,19 +142,15 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { />
- - {`c/${parentCid && Plebbit.getShortCid(parentCid)}`} -