@@ -130,12 +138,12 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
cols={48}
rows={3}
wrap='soft'
- ref={textRef}
+ ref={setTextRef}
+ defaultValue={selectedText}
onChange={(e) => {
const content = e.target.value.replace(/\n/g, '\n\n');
setContent.content(content);
}}
- autoFocus={!isMobile} // autofocus causes auto scroll to top on mobile
/>
{!(isInAllView || isInSubscriptionsView) && offlineAlert}
diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts
index d15cc2b1..3dc66472 100644
--- a/src/hooks/use-reply-modal.ts
+++ b/src/hooks/use-reply-modal.ts
@@ -1,21 +1,26 @@
import { useState, useCallback } from 'react';
import useIsMobile from './use-is-mobile';
+import useSelectedTextStore from '../stores/use-selected-text-store';
const useReplyModal = () => {
const [showReplyModal, setShowReplyModal] = useState(false);
const [activeCid, setActiveCid] = useState
(null);
+ const { resetSelectedText, setSelectedText } = useSelectedTextStore();
// on mobile, the position is absolute instead of fixed, so we need to calculate the top position
const isMobile = useIsMobile();
const [scrollY, setScrollY] = useState(0);
const closeModal = useCallback(() => {
+ resetSelectedText();
setActiveCid(null);
setShowReplyModal(false);
- }, []);
+ }, [resetSelectedText]);
const openReplyModal = useCallback(
(cid: string) => {
+ let text = document.getSelection()?.toString();
+ text && setSelectedText(`>${text}\n`);
if (isMobile) {
const currentScrollY = window.scrollY;
setScrollY(currentScrollY);
@@ -27,7 +32,7 @@ const useReplyModal = () => {
setShowReplyModal(true);
}
},
- [activeCid, isMobile],
+ [activeCid, isMobile, setSelectedText],
);
return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };
diff --git a/src/stores/use-selected-text-store.ts b/src/stores/use-selected-text-store.ts
new file mode 100644
index 00000000..48f5d683
--- /dev/null
+++ b/src/stores/use-selected-text-store.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface SelectedTextState {
+ selectedText: string;
+ setSelectedText: (text: string) => void;
+ resetSelectedText: () => void;
+}
+
+const useSelectedTextStore = create((set) => ({
+ selectedText: '',
+ setSelectedText: (text) => set({ selectedText: text }),
+ resetSelectedText: () => set({ selectedText: '' }),
+}));
+
+export default useSelectedTextStore;