fix: focus lost when transitioning from immersive to markdown
This commit is contained in:
@@ -30,8 +30,8 @@ interface TextComposeStepProps {
|
|||||||
const IMMERSIVE_CHAR_LIMIT = 120;
|
const IMMERSIVE_CHAR_LIMIT = 120;
|
||||||
|
|
||||||
function getImmersiveTextStyle(length: number) {
|
function getImmersiveTextStyle(length: number) {
|
||||||
if (length < 30) return { size: "text-5xl", weight: "font-semibold" };
|
if (length < 70) return { size: "text-5xl", weight: "font-semibold" };
|
||||||
if (length < 70) return { size: "text-3xl", weight: "font-semibold" };
|
if (length < 130) return { size: "text-3xl", weight: "font-semibold" };
|
||||||
return { size: "text-2xl", weight: "font-normal" };
|
return { size: "text-2xl", weight: "font-normal" };
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -118,13 +118,22 @@ export function TextComposeStep({
|
|||||||
}, [textContent]);
|
}, [textContent]);
|
||||||
const linkPreviews = useAllLinkMetadata(debouncedText);
|
const linkPreviews = useAllLinkMetadata(debouncedText);
|
||||||
|
|
||||||
|
const hasEnrichments = attachments.length > 0 || linkPreviews.length > 0;
|
||||||
|
const immersive = textContent.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !forceCardMode;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!previewMode) {
|
if (!previewMode) {
|
||||||
// Small timeout so the textarea is mounted before focusing
|
// Small timeout so the textarea is mounted before focusing
|
||||||
const t = setTimeout(() => textareaRef.current?.focus(), 0);
|
const t = setTimeout(() => {
|
||||||
|
const el = textareaRef.current;
|
||||||
|
if (el) {
|
||||||
|
el.focus();
|
||||||
|
el.selectionStart = el.selectionEnd = el.value.length;
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
return () => clearTimeout(t);
|
return () => clearTimeout(t);
|
||||||
}
|
}
|
||||||
}, [previewMode, forceCardMode]);
|
}, [previewMode, forceCardMode, immersive]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
textareaRef.current?.focus();
|
textareaRef.current?.focus();
|
||||||
@@ -146,9 +155,6 @@ export function TextComposeStep({
|
|||||||
[onCancel, onAdvance, textContent],
|
[onCancel, onAdvance, textContent],
|
||||||
);
|
);
|
||||||
|
|
||||||
const hasEnrichments = attachments.length > 0 || linkPreviews.length > 0;
|
|
||||||
const immersive = textContent.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !forceCardMode;
|
|
||||||
|
|
||||||
const strip = (
|
const strip = (
|
||||||
<AttachmentStrip
|
<AttachmentStrip
|
||||||
attachments={attachments}
|
attachments={attachments}
|
||||||
|
|||||||
Reference in New Issue
Block a user