import './compose.css'; import '@github/text-expander-element'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import stringLength from 'string-length'; import emojifyText from '../utils/emojify-text'; import openCompose from '../utils/open-compose'; import store from '../utils/store'; import visibilityIconsMap from '../utils/visibility-icons-map'; import Avatar from './avatar'; import Icon from './icon'; import Loader from './loader'; import Status from './status'; /* NOTES: - Max character limit includes BOTH status text and Content Warning text */ const expiryOptions = { '5 minutes': 5 * 60, '30 minutes': 30 * 60, '1 hour': 60 * 60, '6 hours': 6 * 60 * 60, '1 day': 24 * 60 * 60, '3 days': 3 * 24 * 60 * 60, '7 days': 7 * 24 * 60 * 60, }; const expirySeconds = Object.values(expiryOptions); const oneDay = 24 * 60 * 60; const expiresInFromExpiresAt = (expiresAt) => { if (!expiresAt) return oneDay; const delta = (new Date(expiresAt).getTime() - Date.now()) / 1000; return expirySeconds.find((s) => s >= delta) || oneDay; }; function Compose({ onClose, replyToStatus, editStatus, draftStatus, standalone, hasOpener, }) { const [uiState, setUIState] = useState('default'); const accounts = store.local.getJSON('accounts'); const currentAccount = store.session.get('currentAccount'); const currentAccountInfo = accounts.find( (a) => a.info.id === currentAccount, ).info; const configuration = useMemo(() => { const instances = store.local.getJSON('instances'); const currentInstance = accounts.find( (a) => a.info.id === currentAccount, ).instanceURL; const config = instances[currentInstance].configuration; console.log(config); return config; }, []); const { statuses: { maxCharacters, maxMediaAttachments, charactersReservedPerUrl }, mediaAttachments: { supportedMimeTypes, imageSizeLimit, imageMatrixLimit, videoSizeLimit, videoMatrixLimit, videoFrameRateLimit, }, polls: { maxOptions, maxCharactersPerOption, maxExpiration, minExpiration }, } = configuration; const textareaRef = useRef(); const spoilerTextRef = useRef(); const [visibility, setVisibility] = useState('public'); const [sensitive, setSensitive] = useState(false); const [mediaAttachments, setMediaAttachments] = useState([]); const [poll, setPoll] = useState(null); useEffect(() => { if (replyToStatus) { const { spoilerText, visibility, sensitive } = replyToStatus; if (spoilerText && spoilerTextRef.current) { spoilerTextRef.current.value = spoilerText; spoilerTextRef.current.focus(); } else { const mentions = new Set([ replyToStatus.account.acct, ...replyToStatus.mentions.map((m) => m.acct), ]); const allMentions = [...mentions].filter( (m) => m !== currentAccountInfo.acct, ); if (allMentions.length > 0) { textareaRef.current.value = `${allMentions .map((m) => `@${m}`) .join(' ')} `; textareaRef.current.dispatchEvent(new Event('input')); } textareaRef.current.focus(); } setVisibility(visibility); setSensitive(sensitive); } if (draftStatus) { const { status, spoilerText, visibility, sensitive, poll, mediaAttachments, } = draftStatus; const composablePoll = !!poll?.options && { ...poll, options: poll.options.map((o) => o?.title || o), expiresIn: poll?.expiresIn || expiresInFromExpiresAt(poll.expiresAt), }; textareaRef.current.value = status; textareaRef.current.dispatchEvent(new Event('input')); spoilerTextRef.current.value = spoilerText; setVisibility(visibility); setSensitive(sensitive); setPoll(composablePoll); setMediaAttachments(mediaAttachments); } else if (editStatus) { const { visibility, sensitive, poll, mediaAttachments } = editStatus; const composablePoll = !!poll?.options && { ...poll, options: poll.options.map((o) => o?.title || o), expiresIn: poll?.expiresIn || expiresInFromExpiresAt(poll.expiresAt), }; setUIState('loading'); (async () => { try { const statusSource = await masto.statuses.fetchSource(editStatus.id); console.log({ statusSource }); const { text, spoilerText } = statusSource; textareaRef.current.value = text; textareaRef.current.dispatchEvent(new Event('input')); textareaRef.current.dataset.source = text; spoilerTextRef.current.value = spoilerText; setVisibility(visibility); setSensitive(sensitive); setPoll(composablePoll); setMediaAttachments(mediaAttachments); setUIState('default'); } catch (e) { console.error(e); alert(e?.reason || e); setUIState('error'); } })(); } }, [draftStatus, editStatus, replyToStatus]); const textExpanderRef = useRef(); const textExpanderTextRef = useRef(''); useEffect(() => { if (textExpanderRef.current) { const handleChange = (e) => { // console.log('text-expander-change', e); const { key, provide, text } = e.detail; textExpanderTextRef.current = text; if (text === '') { provide( Promise.resolve({ matched: false, }), ); return; } const type = { '@': 'accounts', '#': 'hashtags', }[key]; provide( new Promise((resolve) => { const resultsIterator = masto.search({ type, q: text, limit: 5, }); resultsIterator.next().then(({ value }) => { if (text !== textExpanderTextRef.current) { return; } const results = value[type]; console.log('RESULTS', value, results); const menu = document.createElement('ul'); menu.role = 'listbox'; menu.className = 'text-expander-menu'; results.forEach((result) => { const { name, avatarStatic, displayName, username, acct, emojis, } = result; const displayNameWithEmoji = emojifyText(displayName, emojis); const item = document.createElement('li'); item.setAttribute('role', 'option'); if (acct) { item.dataset.value = acct; // Want to use here, but will need to render to string 😅 item.innerHTML = ` ${displayNameWithEmoji || username}
@${acct}
`; } else { item.dataset.value = name; item.innerHTML = ` #${name} `; } menu.appendChild(item); }); console.log('MENU', results, menu); resolve({ matched: results.length > 0, fragment: menu, }); }); }), ); }; textExpanderRef.current.addEventListener( 'text-expander-change', handleChange, ); textExpanderRef.current.addEventListener('text-expander-value', (e) => { const { key, item } = e.detail; e.detail.value = key + item.dataset.value; }); } }, []); const formRef = useRef(); const beforeUnloadCopy = 'You have unsaved changes. Are you sure you want to discard this post?'; const canClose = () => { const { value, dataset } = textareaRef.current; // check for status and media attachments const hasMediaAttachments = mediaAttachments.length > 0; if (!value && !hasMediaAttachments) { console.log('canClose', { value, mediaAttachments }); return true; } // check if all media attachments have IDs const hasIDMediaAttachments = mediaAttachments.length > 0 && mediaAttachments.every((media) => media.id); if (hasIDMediaAttachments) { console.log('canClose', { hasIDMediaAttachments }); return true; } // check if status contains only "@acct", if replying const isSelf = replyToStatus?.account.id === currentAccount; const hasOnlyAcct = replyToStatus && value.trim() === `@${replyToStatus.account.acct}`; // TODO: check for mentions, or maybe just generic "@username", including multiple mentions like "@username1@username2" if (!isSelf && hasOnlyAcct) { console.log('canClose', { isSelf, hasOnlyAcct }); return true; } // check if status is same with source const sameWithSource = value === dataset?.source; if (sameWithSource) { console.log('canClose', { sameWithSource }); return true; } console.log('canClose', { value, hasMediaAttachments, hasIDMediaAttachments, poll, isSelf, hasOnlyAcct, sameWithSource, }); return false; }; const confirmClose = () => { if (!canClose()) { const yes = confirm(beforeUnloadCopy); return yes; } return true; }; useEffect(() => { // Show warning if user tries to close window with unsaved changes const handleBeforeUnload = (e) => { if (!canClose()) { e.preventDefault(); e.returnValue = beforeUnloadCopy; } }; window.addEventListener('beforeunload', handleBeforeUnload, { capture: true, }); return () => window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true, }); }, []); return (
{currentAccountInfo?.avatarStatic && ( )} {!standalone ? ( {' '} ) : ( hasOpener && ( ) )}
{!!replyToStatus && (
Replying to @ {replyToStatus.account.acct || replyToStatus.account.username} ’s status
)} {!!editStatus && (
Editing source status
)}
{ e.preventDefault(); const formData = new FormData(e.target); const entries = Object.fromEntries(formData.entries()); console.log('ENTRIES', entries); let { status, visibility, sensitive, spoilerText } = entries; // Pre-cleanup sensitive = sensitive === 'on'; // checkboxes return "on" if checked // Validation if (stringLength(status) > maxCharacters) { alert(`Status is too long! Max characters: ${maxCharacters}`); return; } if ( sensitive && stringLength(status) + stringLength(spoilerText) > maxCharacters ) { alert( `Status and content warning is too long! Max characters: ${maxCharacters}`, ); return; } if (poll) { if (poll.options.length < 2) { alert('Poll must have at least 2 options'); return; } if (poll.options.some((option) => option === '')) { alert('Some poll choices are empty'); return; } } // TODO: check for URLs and use `charactersReservedPerUrl` to calculate max characters // Post-cleanup spoilerText = (sensitive && spoilerText) || undefined; status = status === '' ? undefined : status; setUIState('loading'); (async () => { try { console.log('MEDIA ATTACHMENTS', mediaAttachments); if (mediaAttachments.length > 0) { // Upload media attachments first const mediaPromises = mediaAttachments.map((attachment) => { const { file, description, id } = attachment; console.log('UPLOADING', attachment); if (id) { // If already uploaded return attachment; } else { const params = { file, description, skipPolling: true, }; return masto.mediaAttachments.create(params).then((res) => { if (res.id) { attachment.id = res.id; } return res; }); } }); const results = await Promise.allSettled(mediaPromises); // If any failed, return if ( results.some((result) => { return result.status === 'rejected' || !result.value?.id; }) ) { setUIState('error'); // Alert all the reasons results.forEach((result) => { if (result.status === 'rejected') { console.error(result); alert(result.reason || `Attachment #${i} failed`); } }); return; } console.log({ results, mediaAttachments }); } const params = { status, spoilerText, sensitive, poll, mediaIds: mediaAttachments.map((attachment) => attachment.id), }; if (!editStatus) { params.visibility = visibility; params.inReplyToId = replyToStatus?.id || undefined; } console.log('POST', params); let newStatus; if (editStatus) { newStatus = await masto.statuses.update(editStatus.id, params); } else { newStatus = await masto.statuses.create(params); } setUIState('default'); // Close onClose({ newStatus, }); } catch (e) { console.error(e); alert(e?.reason || e); setUIState('error'); } })(); }} >
{' '} {' '}
{mediaAttachments.length > 0 && (
{mediaAttachments.map((attachment, i) => { const { id } = attachment; return ( { setMediaAttachments((attachments) => { const newAttachments = [...attachments]; newAttachments[i].description = value; return newAttachments; }); }} onRemove={() => { setMediaAttachments((attachments) => { return attachments.filter((_, j) => j !== i); }); }} /> ); })}
)} {!!poll && ( { if (poll) { const newPoll = { ...poll }; setPoll(newPoll); } else { setPoll(null); } }} /> )}
{' '} {' '}
{uiState === 'loading' && }{' '}
); } function MediaAttachment({ attachment, disabled, onDescriptionChange = () => {}, onRemove = () => {}, }) { const { url, type, id, description } = attachment; const suffixType = type.split('/')[0]; return (
{suffixType === 'image' ? ( ) : suffixType === 'video' || suffixType === 'gifv' ? (
{!!id ? (
Uploaded

{description || No description}

) : ( )}
); } function Poll({ poll, disabled, onInput = () => {}, maxOptions, maxExpiration, minExpiration, maxCharactersPerOption, }) { const { options, expiresIn, multiple } = poll; return (
{options.map((option, i) => (
{ const { value } = e.target; options[i] = value; onInput(poll); }} />
))}
{' '}
); } export default Compose;