authorgravatar for 97427849+flamboh@users.noreply.github.comoliver <97427849+flamboh@users.noreply.github.com> 2026-09-20 14:31:38-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-20 18:31:38-03:00
log2d8f9a8f55d2195ac820c91f0f1e8f66a055f841
tree1e6277d85a4ab4ed70159211d9e4e6474ac69aa6
parent5d9e27a596884d30499c7401296916fd729c817f
signature Signed by PGP key B5690EEEBB952194

fix(web): keep the timeline still when the resting composer expands (#12771)

1 files changed, 25 insertions(+), 9 deletions(-)

apps/web/src/components/ComposerPromptEditorTiptap.tsx+25-9
......@@ -725,6 +725,19 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
725725 );
726726 }, []);
727727
728 const editorAttributes = useMemo(
729 () => ({
730 class: cn(
731 "composer-tiptap block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent leading-relaxed text-foreground focus:outline-none",
732 className,
733 ),
734 "data-testid": "composer-editor",
735 "data-composer-rich-text": richText ? "true" : "false",
736 "aria-placeholder": placeholder,
737 }),
738 [className, placeholder, richText],
739 );
740
728741 const editor = useEditor(
729742 {
730743 extensions: [
......@@ -787,15 +800,7 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
787800 ),
788801 editable: !disabled,
789802 editorProps: {
790 attributes: {
791 class: cn(
792 "composer-tiptap block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent leading-relaxed text-foreground focus:outline-none",
793 className,
794 ),
795 "data-testid": "composer-editor",
796 "data-composer-rich-text": richText ? "true" : "false",
797 "aria-placeholder": placeholder,
798 },
803 attributes: editorAttributes,
799804 handleKeyDown: (view, event) => {
800805 if (
801806 isMacPlatform(navigator.platform) &&
......@@ -995,6 +1000,17 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
9951000 editorHolder.current = editor;
9961001 }, [editor]);
9971002
1003 // Tiptap forwards option changes to the view from a passive effect, so a
1004 // class change here would reach the ProseMirror element one tick after
1005 // React commits. The chat composer measures its resting and expanded
1006 // geometry in layout effects that run first, and it clamps the prompt
1007 // through `className`, so the attributes are pushed to the view here for
1008 // those measurements to see the layout they are about to reserve for.
1009 useLayoutEffect(() => {
1010 if (!editor?.isInitialized) return;
1011 editor.view.setProps({ attributes: editorAttributes });
1012 }, [editor, editorAttributes]);
1013
9981014 const readSnapshot = useCallback(() => {
9991015 const snapshot = snapshotRef.current;
10001016 if (!editor) return snapshot;