diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx new file mode 100644 index 000000000..c38cc8c5b --- /dev/null +++ b/app/soapbox/components/copyable-input.tsx @@ -0,0 +1,48 @@ +import React, { useRef } from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Button, HStack, Input } from './ui'; + +interface ICopyableInput { + /** Text to be copied. */ + value: string, +} + +/** An input with copy abilities. */ +const CopyableInput: React.FC = ({ value }) => { + const input = useRef(null); + + const selectInput = () => { + input.current?.select(); + + if (navigator.clipboard) { + navigator.clipboard.writeText(value); + } else { + document.execCommand('copy'); + } + }; + + return ( + + + + + + ); +}; + +export default CopyableInput; diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx index 15826ff2d..e3ae339fc 100644 --- a/app/soapbox/components/ui/button/button.tsx +++ b/app/soapbox/components/ui/button/button.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import * as React from 'react'; import { Link } from 'react-router-dom'; @@ -12,8 +13,8 @@ interface IButton { block?: boolean, /** Elements inside the - - ); -}; diff --git a/app/soapbox/features/ui/components/embed-modal.tsx b/app/soapbox/features/ui/components/embed-modal.tsx index a715b50a7..ae149e138 100644 --- a/app/soapbox/features/ui/components/embed-modal.tsx +++ b/app/soapbox/features/ui/components/embed-modal.tsx @@ -2,8 +2,9 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { closeModal } from 'soapbox/actions/modals'; +import CopyableInput from 'soapbox/components/copyable-input'; import SafeEmbed from 'soapbox/components/safe-embed'; -import { Modal, Stack, Text, Input, Divider } from 'soapbox/components/ui'; +import { Modal, Stack, Text, Divider } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; import useEmbed from 'soapbox/queries/embed'; @@ -22,10 +23,6 @@ const EmbedModal: React.FC = ({ url, onError }) => { } }, [isError]); - const handleInputClick: React.MouseEventHandler = (e) => { - e.currentTarget.select(); - }; - const handleClose = () => { dispatch(closeModal('EMBED')); }; @@ -40,12 +37,7 @@ const EmbedModal: React.FC = ({ url, onError }) => { - +
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts index 2043e3545..c9eac3688 100644 --- a/app/soapbox/utils/features.ts +++ b/app/soapbox/utils/features.ts @@ -242,7 +242,10 @@ const getInstanceFeatures = (instance: Instance) => { * Ability to embed posts on external sites. * @see GET /api/oembed */ - embeds: v.software === MASTODON, + embeds: any([ + v.software === MASTODON, + v.software === TRUTHSOCIAL, + ]), /** * Ability to add emoji reactions to a status.