import './compose.css'; import { match } from '@formatjs/intl-localematcher'; import '@github/text-expander-element'; import equal from 'fast-deep-equal'; import { forwardRef } from 'preact/compat'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import stringLength from 'string-length'; import { uid } from 'uid/single'; import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; import supportedLanguages from '../data/status-supported-languages'; import urlRegex from '../data/url-regex'; import { api } from '../utils/api'; import db from '../utils/db'; import emojifyText from '../utils/emojify-text'; import openCompose from '../utils/open-compose'; import states, { saveStatus } from '../utils/states'; import store from '../utils/store'; import { getCurrentAccount, getCurrentAccountNS, getCurrentInstance, } from '../utils/store-utils'; import supports from '../utils/supports'; import useInterval from '../utils/useInterval'; import visibilityIconsMap from '../utils/visibility-icons-map'; import Avatar from './avatar'; import Icon from './icon'; import Loader from './loader'; import Modal from './modal'; import Status from './status'; const supportedLanguagesMap = supportedLanguages.reduce((acc, l) => { const [code, common, native] = l; acc[code] = { common, native, }; return acc; }, {}); /* 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, '12 hours': 12 * 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; }; const menu = document.createElement('ul'); menu.role = 'listbox'; menu.className = 'text-expander-menu'; // Set IntersectionObserver on menu, reposition it because text-expander doesn't handle it const windowMargin = 16; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const { left, width } = entry.boundingClientRect; const { innerWidth } = window; if (left + width > innerWidth) { menu.style.left = innerWidth - width - windowMargin + 'px'; } } }); }); observer.observe(menu); const DEFAULT_LANG = match( [new Intl.DateTimeFormat().resolvedOptions().locale, ...navigator.languages], supportedLanguages.map((l) => l[0]), 'en', ); // https://github.com/mastodon/mastodon/blob/c4a429ed47e85a6bbf0d470a41cc2f64cf120c19/app/javascript/mastodon/features/compose/util/counter.js const urlRegexObj = new RegExp(urlRegex.source, urlRegex.flags); const usernameRegex = /(^|[^\/\w])@(([a-z0-9_]+)@[a-z0-9\.\-]+[a-z0-9]+)/gi; const urlPlaceholder = '$2xxxxxxxxxxxxxxxxxxxxxxx'; function countableText(inputText) { return inputText .replace(urlRegexObj, urlPlaceholder) .replace(usernameRegex, '$1@$3'); } function Compose({ onClose, replyToStatus, editStatus, draftStatus, standalone, hasOpener, }) { console.warn('RENDER COMPOSER'); const { masto, instance } = api(); const [uiState, setUIState] = useState('default'); const UID = useRef(draftStatus?.uid || uid()); console.log('Compose UID', UID.current); const currentAccount = getCurrentAccount(); const currentAccountInfo = currentAccount.info; const { configuration } = getCurrentInstance(); console.log('⚙️ Configuration', configuration); 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 [language, setLanguage] = useState( store.session.get('currentLanguage') || DEFAULT_LANG, ); const prevLanguage = useRef(language); const [mediaAttachments, setMediaAttachments] = useState([]); const [poll, setPoll] = useState(null); const prefs = store.account.get('preferences') || {}; const oninputTextarea = () => { if (!textareaRef.current) return; textareaRef.current.dispatchEvent(new Event('input')); }; const focusTextarea = () => { setTimeout(() => { console.debug('FOCUS textarea'); textareaRef.current?.focus(); }, 300); }; useEffect(() => { if (replyToStatus) { const { spoilerText, visibility, language, sensitive } = replyToStatus; if (spoilerText && spoilerTextRef.current) { spoilerTextRef.current.value = spoilerText; } 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(' ')} `; oninputTextarea(); } focusTextarea(); setVisibility(visibility); setLanguage(language || prefs.postingDefaultLanguage || DEFAULT_LANG); setSensitive(sensitive); } else if (editStatus) { const { visibility, language, 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.v1.statuses.fetchSource( editStatus.id, ); console.log({ statusSource }); const { text, spoilerText } = statusSource; textareaRef.current.value = text; textareaRef.current.dataset.source = text; oninputTextarea(); focusTextarea(); spoilerTextRef.current.value = spoilerText; setVisibility(visibility); setLanguage(language || presf.postingDefaultLanguage || DEFAULT_LANG); setSensitive(sensitive); setPoll(composablePoll); setMediaAttachments(mediaAttachments); setUIState('default'); } catch (e) { console.error(e); alert(e?.reason || e); setUIState('error'); } })(); } else { focusTextarea(); console.log('Apply prefs', prefs); if (prefs.postingDefaultVisibility) { setVisibility(prefs.postingDefaultVisibility); } if (prefs.postingDefaultLanguage) { setLanguage(prefs.postingDefaultLanguage); } if (prefs.postingDefaultSensitive) { setSensitive(prefs.postingDefaultSensitive); } } if (draftStatus) { const { status, spoilerText, visibility, language, 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; oninputTextarea(); focusTextarea(); if (spoilerText) spoilerTextRef.current.value = spoilerText; if (visibility) setVisibility(visibility); setLanguage(language || prefs.postingDefaultLanguage || DEFAULT_LANG); if (sensitive !== null) setSensitive(sensitive); if (composablePoll) setPoll(composablePoll); if (mediaAttachments) setMediaAttachments(mediaAttachments); } }, [draftStatus, editStatus, replyToStatus]); const formRef = useRef(); const beforeUnloadCopy = 'You have unsaved changes. Discard this post?'; const canClose = () => { const { value, dataset } = textareaRef.current; // check if loading if (uiState === 'loading') { console.log('canClose', { uiState }); return false; } // 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 === currentAccountInfo.id; 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, uiState, }); 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, }); }, []); const getCharCount = () => { const { value } = textareaRef.current; const { value: spoilerText } = spoilerTextRef.current; return stringLength(countableText(value)) + stringLength(spoilerText); }; const updateCharCount = () => { const count = getCharCount(); states.composerCharacterCount = count; }; useEffect(updateCharCount, []); const escDownRef = useRef(false); useHotkeys( 'esc', () => { escDownRef.current = true; // This won't be true if this event is already handled and not propagated 🤞 }, { enableOnFormTags: true, }, ); useHotkeys( 'esc', () => { if (!standalone && escDownRef.current && confirmClose()) { onClose(); } escDownRef.current = false; }, { enableOnFormTags: true, // Use keyup because Esc keydown will close the confirm dialog on Safari keyup: true, }, ); const prevBackgroundDraft = useRef({}); const draftKey = () => { const ns = getCurrentAccountNS(); return `${ns}#${UID.current}`; }; const saveUnsavedDraft = () => { // Not enabling this for editing status // I don't think this warrant a draft mode for a status that's already posted // Maybe it could be a big edit change but it should be rare if (editStatus) return; const key = draftKey(); const backgroundDraft = { key, replyTo: replyToStatus ? { /* Smaller payload of replyToStatus. Reasons: - No point storing whole thing - Could have media attachments - Could be deleted/edited later */ id: replyToStatus.id, account: { id: replyToStatus.account.id, username: replyToStatus.account.username, acct: replyToStatus.account.acct, }, } : null, draftStatus: { uid: UID.current, status: textareaRef.current.value, spoilerText: spoilerTextRef.current.value, visibility, language, sensitive, poll, mediaAttachments, }, }; if (!equal(backgroundDraft, prevBackgroundDraft.current) && !canClose()) { console.debug('not equal', backgroundDraft, prevBackgroundDraft.current); db.drafts .set(key, { ...backgroundDraft, state: 'unsaved', updatedAt: Date.now(), }) .then(() => { console.debug('DRAFT saved', key, backgroundDraft); }) .catch((e) => { console.error('DRAFT failed', key, e); }); prevBackgroundDraft.current = structuredClone(backgroundDraft); } }; useInterval(saveUnsavedDraft, 5000); // background save every 5s useEffect(() => { saveUnsavedDraft(); // If unmounted, means user discarded the draft // Also means pop-out 🙈, but it's okay because the pop-out will persist the ID and re-create the draft return () => { db.drafts.del(draftKey()); }; }, []); useEffect(() => { const handleItems = (e) => { const { items } = e.clipboardData || e.dataTransfer; const files = []; for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.kind === 'file') { const file = item.getAsFile(); if (file && supportedMimeTypes.includes(file.type)) { files.push(file); } } } if (files.length > 0 && mediaAttachments.length >= maxMediaAttachments) { alert(`You can only attach up to ${maxMediaAttachments} files.`); return; } console.log({ files }); if (files.length > 0) { e.preventDefault(); e.stopPropagation(); // Auto-cut-off files to avoid exceeding maxMediaAttachments const max = maxMediaAttachments - mediaAttachments.length; const allowedFiles = files.slice(0, max); if (allowedFiles.length <= 0) { alert(`You can only attach up to ${maxMediaAttachments} files.`); return; } const mediaFiles = allowedFiles.map((file) => ({ file, type: file.type, size: file.size, url: URL.createObjectURL(file), id: null, description: null, })); setMediaAttachments([...mediaAttachments, ...mediaFiles]); } }; window.addEventListener('paste', handleItems); const handleDragover = (e) => { // Prevent default if there's files if (e.dataTransfer.items.length > 0) { e.preventDefault(); e.stopPropagation(); } }; window.addEventListener('dragover', handleDragover); window.addEventListener('drop', handleItems); return () => { window.removeEventListener('paste', handleItems); window.removeEventListener('dragover', handleDragover); window.removeEventListener('drop', handleItems); }; }, [mediaAttachments]); const [showEmoji2Picker, setShowEmoji2Picker] = useState(false); return (
{currentAccountInfo?.avatarStatic && ( )} {!standalone ? ( {' '} ) : ( hasOpener && ( ) )}
{!!replyToStatus && (
Replying to @ {replyToStatus.account.acct || replyToStatus.account.username} ’s status
)} {!!editStatus && (
Editing source status
)}
{ if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { formRef.current.dispatchEvent( new Event('submit', { cancelable: true }), ); } }} onSubmit={(e) => { 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 /* Let the backend validate this 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 if (mediaAttachments.length > 0) { // If there are media attachments, check if they have no descriptions const hasNoDescriptions = mediaAttachments.some( (media) => !media.description?.trim?.(), ); if (hasNoDescriptions) { const yes = confirm( 'Some media have no descriptions. Continue?', ); if (!yes) return; } } // 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 = removeNullUndefined({ file, description, }); return masto.v2.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 }); } /* NOTE: Using snakecase here because masto.js's `isObject` returns false for `params`, ONLY happens when opening in pop-out window. This is maybe due to `window.masto` variable being passed from the parent window. The check that failed is `x.constructor === Object`, so maybe the `Object` in new window is different than parent window's? Code: https://github.com/neet/masto.js/blob/dd0d649067b6a2b6e60fbb0a96597c373a255b00/src/serializers/is-object.ts#L2 */ let params = { status, // spoilerText, spoiler_text: spoilerText, language, sensitive, poll, // mediaIds: mediaAttachments.map((attachment) => attachment.id), media_ids: mediaAttachments.map( (attachment) => attachment.id, ), }; if (editStatus && supports('@mastodon/edit-media-attributes')) { params.media_attributes = mediaAttachments.map( (attachment) => { return { id: attachment.id, description: attachment.description, // focus // thumbnail }; }, ); } else if (!editStatus) { params.visibility = visibility; // params.inReplyToId = replyToStatus?.id || undefined; params.in_reply_to_id = replyToStatus?.id || undefined; } params = removeNullUndefined(params); console.log('POST', params); let newStatus; if (editStatus) { newStatus = await masto.v1.statuses.update( editStatus.id, params, ); saveStatus(newStatus, instance, { skipThreading: true, }); } else { newStatus = await masto.v1.statuses.create(params, { idempotencyKey: UID.current, }); } setUIState('default'); // Close onClose({ newStatus, instance, }); } catch (e) { console.error(e); alert(e?.reason || e); setUIState('error'); } })(); }} >
{ updateCharCount(); }} /> {' '} {' '}
)} ); return ( <>
{ setShowModal(true); }} > {suffixType === 'image' ? ( ) : suffixType === 'video' || suffixType === 'gifv' ? (
{descTextarea}
{showModal && ( { if (e.target === e.currentTarget) { setShowModal(false); } }} >

{ { image: 'Edit image description', video: 'Edit video description', audio: 'Edit audio description', }[suffixType] }

{suffixType === 'image' ? ( ) : suffixType === 'video' || suffixType === 'gifv' ? (
{descTextarea}
)} ); } function Poll({ lang, 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); }} />
))}
{' '}
); } function filterShortcodes(emojis, searchTerm) { searchTerm = searchTerm.toLowerCase(); // Return an array of shortcodes that start with or contain the search term, sorted by relevance and limited to the first 5 return emojis .sort((a, b) => { let aLower = a.shortcode.toLowerCase(); let bLower = b.shortcode.toLowerCase(); let aStartsWith = aLower.startsWith(searchTerm); let bStartsWith = bLower.startsWith(searchTerm); let aContains = aLower.includes(searchTerm); let bContains = bLower.includes(searchTerm); let bothStartWith = aStartsWith && bStartsWith; let bothContain = aContains && bContains; return bothStartWith ? a.length - b.length : aStartsWith ? -1 : bStartsWith ? 1 : bothContain ? a.length - b.length : aContains ? -1 : bContains ? 1 : 0; }) .slice(0, 5); } function encodeHTML(str) { return str.replace(/[&<>"']/g, function (char) { return '&#' + char.charCodeAt(0) + ';'; }); } function removeNullUndefined(obj) { for (let key in obj) { if (obj[key] === null || obj[key] === undefined) { delete obj[key]; } } return obj; } function CustomEmojisModal({ masto, instance, onClose = () => {}, onSelect = () => {}, }) { const [uiState, setUIState] = useState('default'); const customEmojisList = useRef([]); const [customEmojis, setCustomEmojis] = useState({}); const recentlyUsedCustomEmojis = useMemo( () => store.account.get('recentlyUsedCustomEmojis') || [], ); useEffect(() => { setUIState('loading'); (async () => { try { const emojis = await masto.v1.customEmojis.list(); // Group emojis by category const emojisCat = { '--recent--': recentlyUsedCustomEmojis.filter((emoji) => emojis.find((e) => e.shortcode === emoji.shortcode), ), }; const othersCat = []; emojis.forEach((emoji) => { if (!emoji.visibleInPicker) return; customEmojisList.current?.push?.(emoji); if (!emoji.category) { othersCat.push(emoji); return; } if (!emojisCat[emoji.category]) { emojisCat[emoji.category] = []; } emojisCat[emoji.category].push(emoji); }); if (othersCat.length) { emojisCat['--others--'] = othersCat; } setCustomEmojis(emojisCat); setUIState('default'); } catch (e) { setUIState('error'); console.error(e); } })(); }, []); return (
Custom emojis{' '} {uiState === 'loading' ? ( ) : ( • {instance} )}
{uiState === 'error' && (

Error loading custom emojis

)} {uiState === 'default' && Object.entries(customEmojis).map( ([category, emojis]) => !!emojis?.length && ( <>
{{ '--recent--': 'Recently used', '--others--': 'Others', }[category] || category}
{emojis.map((emoji) => ( ))}
), )}
); } export default Compose;