diff --git a/packages/nicolium/src/features/compose/containers/preview-compose-container.tsx b/packages/nicolium/src/features/compose/containers/preview-compose-container.tsx index 639de31ff..807a2b2dc 100644 --- a/packages/nicolium/src/features/compose/containers/preview-compose-container.tsx +++ b/packages/nicolium/src/features/compose/containers/preview-compose-container.tsx @@ -12,6 +12,7 @@ import StatusReplyMentions from '@/components/statuses/status-reply-mentions'; import Icon from '@/components/ui/icon'; import IconButton from '@/components/ui/icon-button'; import Text from '@/components/ui/text'; +import Toggle from '@/components/ui/toggle'; import { useCompose, useComposeActions } from '@/stores/compose'; import type { NormalizedStatus as Status } from '@/normalizers/status'; @@ -32,7 +33,9 @@ const PreviewComposeContainer: React.FC = ({ composeId } const { updateCompose } = useComposeActions(); const intl = useIntl(); - const previewedStatus = useCompose(composeId).preview as unknown as Status; + const compose = useCompose(composeId); + const autoUpdate = compose.previewAutoUpdate; + const previewedStatus = compose.preview as unknown as Status; const handleClose = () => { updateCompose(composeId, (draft) => { @@ -40,6 +43,12 @@ const PreviewComposeContainer: React.FC = ({ composeId } }); }; + const handleSwitchAutoUpdate: React.ChangeEventHandler = (event) => { + updateCompose(composeId, (draft) => { + draft.previewAutoUpdate = event.target.checked; + }); + }; + const status = previewedStatus ?? null; if (!status) { @@ -58,6 +67,10 @@ const PreviewComposeContainer: React.FC = ({ composeId } + + + + = ({ composeId, isWysiwyg }) => { const [editor] = useLexicalComposerContext(); const features = useFeatures(); const { urlPrivacy, ignoreHashtagCasingSuggestions } = useSettings(); - const { actions } = useComposeStore.getState(); + const actions = useComposeActions(); + const submitCompose = useSubmitCompose(composeId); const checkUrls = useCallback( debounce((editorState: EditorState) => { @@ -88,6 +89,13 @@ const StatePlugin: React.FC = ({ composeId, isWysiwyg }) => { [urlPrivacy.clearLinksInCompose], ); + const updatePreview = useCallback( + debounce(() => { + submitCompose({ preview: true }); + }, 2000), + [], + ); + const checkHashtagCasingSuggestions = useCallback( debounce((editorState: EditorState) => { if (ignoreHashtagCasingSuggestions) return; @@ -201,6 +209,9 @@ const StatePlugin: React.FC = ({ composeId, isWysiwyg }) => { draft.editorStateMap[draft.modifiedLanguage] = data as string; draft.textMap[draft.modifiedLanguage] = text; } + if (draft.preview && draft.previewAutoUpdate) { + updatePreview(); + } }); checkUrls(editorState); checkHashtagCasingSuggestions(editorState); diff --git a/packages/nicolium/src/locales/en.json b/packages/nicolium/src/locales/en.json index 13b2cb5f0..5a6b42a9b 100644 --- a/packages/nicolium/src/locales/en.json +++ b/packages/nicolium/src/locales/en.json @@ -683,6 +683,7 @@ "compose_form.poll.remove_option": "Remove this answer", "compose_form.poll_placeholder": "Add a poll topic…", "compose_form.preview": "Preview post", + "compose_form.preview.auto_update": "Auto-update", "compose_form.preview.close": "Hide preview", "compose_form.preview_label": "Preview", "compose_form.publish": "Post", diff --git a/packages/nicolium/src/stores/compose.ts b/packages/nicolium/src/stores/compose.ts index 5f0e415ca..259808359 100644 --- a/packages/nicolium/src/stores/compose.ts +++ b/packages/nicolium/src/stores/compose.ts @@ -136,6 +136,7 @@ interface Compose { hashtagCasingSuggestion: string | null; hashtagCasingSuggestionIgnored: boolean | null; preview: Partial | null; + previewAutoUpdate: boolean; suggestedLanguage: string | null; showLocationPicker: boolean; @@ -191,6 +192,7 @@ const newCompose = (params: Partial = {}): Compose => ({ hashtagCasingSuggestion: null, hashtagCasingSuggestionIgnored: null, preview: null, + previewAutoUpdate: false, suggestedLanguage: null, showLocationPicker: false,