diff --git a/src/components/post-form/index.ts b/src/components/post-form/index.ts index 0eb63f3c..3d6d75f7 100644 --- a/src/components/post-form/index.ts +++ b/src/components/post-form/index.ts @@ -1 +1 @@ -export { default } from './post-form'; +export { LinkTypePreviewer, default } from './post-form'; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index f9e7f4d2..a9475d1c 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -54,7 +54,7 @@ const useSubmitStore = create((set) => ({ resetSubmitStore: () => set({ subplebbitAddress: undefined, title: undefined, content: undefined, link: undefined, publishCommentOptions: {} }), })); -const LinkTypePreviewer = ({ link }: { link: string }) => { +export const LinkTypePreviewer = ({ link }: { link: string }) => { const mediaInfo = getLinkMediaInfo(link); return isValidURL(link) ? mediaInfo?.type : 'Invalid URL'; }; diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index 0bbc9fba..968bfee4 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/src/components/reply-modal/reply-modal.module.css @@ -71,6 +71,16 @@ cursor: pointer; } +.footer input[type="checkbox"] { + margin: 0 3px; + vertical-align: text-top; +} + +.spoilerButton { + display: inline-block; + padding-top: 2px; +} + .parentCid { color: var(--post-form-field-input-color); position: absolute; diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 17bed746..9f9e0654 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import Draggable from 'react-draggable'; @@ -8,6 +8,7 @@ import { isValidURL } from '../../lib/utils/url-utils'; import useReply from '../../hooks/use-reply'; import useIsMobile from '../../hooks/use-is-mobile'; import styles from './reply-modal.module.css'; +import { LinkTypePreviewer } from '../post-form'; import _ from 'lodash'; interface ReplyModalProps { @@ -24,6 +25,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { const account = useAccount(); const { displayName } = account?.author || {}; + const [url, setUrl] = useState(''); + const textRef = useRef(null); const urlRef = useRef(null); @@ -95,7 +98,15 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { />
- setContent.link(e.target.value)} /> + { + setUrl(e.target.value); + setContent.link(e.target.value); + }} + />
@@ -114,6 +125,19 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { />
+ {url && ( + <> + Embed: {' '} + + )} + + [ + + ] +