fix: extract draft input box to EditorAgentDraftTextarea component for unified handling of auto-sizing and add fallback behavior

2026-07-22 14:39:10 +08:00
parent 550c3cda1a
commit c864dfc05e
5 changed files with 225 additions and 40 deletions
@@ -60,7 +60,7 @@
 - 对话框与左侧素材 / 图层侧栏**不互斥**，允许同时展开，便于在对话中选取和核对画布素材；左侧栏切换不改变 Agent 面板开关状态。
 - 桌面端对话框固定宽约 360–400px；移动端抽屉式全宽覆盖；收起态为胶囊/圆形入口按钮。
 - 底部消息输入框随输入内容从单行高度自动增长，最大高度为
-  128px；使用浏览器原生 `field-sizing: content` 随内容和可用宽度自适应，手机旋转、分屏或响应式断点变化后由浏览器按新的换行结果自动调整。内容超过最大高度后停止增长并启用内部纵向滚动，内容缩短或清空后同步收缩。内部滚动条使用浅灰窄滑块和透明轨道，上下留白不得溢出输入框圆角边界；输入框在窄屏下允许收缩且不产生横向滚动。
+  128px；输入框及其 Enter 提交、原生自适应和兼容降级统一封装在独立 `EditorAgentDraftTextarea` 组件中。支持 `field-sizing: content` 的浏览器使用原生内容尺寸自适应，不支持该属性的旧 Safari / iOS WebView 使用前端测量降级，并在宽度变化时重新计算换行高度。内容超过最大高度后停止增长并启用内部纵向滚动，内容缩短或清空后同步收缩。内部滚动条使用浅灰窄滑块和透明轨道，上下留白不得溢出输入框圆角边界；输入框在窄屏下允许收缩且不产生横向滚动。
 - 会话管理入口在对话框头部：当前会话标题 + 历史会话下拉（按更新时间倒序）+ 新建对话按钮，全部包在对话框内。
 - 当前会话没有任何已发送消息时，新建对话按钮置灰且不可点击；输入框草稿和未发送附件不算会话内容。当前会话已有消息时可新建，新建成功后只切换到返回的空白会话，输入文字、附件及附件选择状态与切换历史会话时一样原样保留，旧会话继续保留在历史会话下拉中；创建失败同样不修改草稿。
 - 新会话创建请求 pending 时禁用历史会话下拉和发送动作，但输入框与附件仍可编辑；会话列表或历史消息加载期间同样禁用发送。表单提交处理器必须复用相同门禁，不能先清空草稿再由 hook 静默跳过发送。
@@ -1087,34 +1087,6 @@ describe('EditorAgentConversationPanelView', () => {
    expect(inputWheel.defaultPrevented).toBe(false);
  });

-  it('uses native content sizing with minimum and maximum height constraints', async () => {
-    const client = createClient();
-
-    render(
-      <EditorAgentConversationPanelView
-        open
-        onToggleOpen={vi.fn()}
-        client={client}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
-    });
-
-    const input = screen.getByLabelText(
-      '发送给画布 Agent',
-    ) as HTMLTextAreaElement;
-    expect(input.className).toContain(
-      'editor-agent-conversation__draft-input',
-    );
-    expect(input.className).toContain('[field-sizing:content]');
-    expect(input.className).toContain('min-h-10');
-    expect(input.className).toContain('max-h-32');
-    expect(input.className).toContain('overflow-y-auto');
-    expect(input.className).not.toContain('overflow-y-hidden');
-  });
-
  it('confirms conversation deletion from an independent dialog', async () => {
    const client = createClient();
    render(
@@ -27,6 +27,7 @@ import { PlatformDangerConfirmDialog } from '@/src/components/common/PlatformDan
 import { PlatformToolModalShell } from '@/src/components/common/PlatformToolModalShell.tsx';
 import AttachmentChip from '@/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx';
 import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
+import { EditorAgentDraftTextarea } from '@/src/components/image-editor/EditorAgentConversation/EditorAgentDraftTextarea.tsx';
 import {
  MessageBubble,
  ThinkingBubble,
@@ -704,19 +705,10 @@ export function EditorAgentConversationPanelView({
            >
              <Paperclip className="h-4 w-4" aria-hidden="true" />
            </button>
-            <textarea
-              className="editor-agent-conversation__draft-input max-h-32 min-h-10 min-w-0 flex-1 resize-none overflow-x-hidden overflow-y-auto overscroll-contain rounded-3xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 outline-none [field-sizing:content] focus:border-slate-400"
-              aria-label="发送给画布 Agent"
+            <EditorAgentDraftTextarea
              value={draftText}
-              rows={1}
-              onChange={(event) => setDraftText(event.currentTarget.value)}
+              onChange={setDraftText}
              onPaste={handleInputPaste}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter' && !event.shiftKey) {
-                  event.preventDefault();
-                  event.currentTarget.form?.requestSubmit();
-                }
-              }}
            />
            <button
              type="submit"
@@ -0,0 +1,118 @@
+/* @vitest-environment jsdom */
+
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import type { FormEvent } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { EditorAgentDraftTextarea } from './EditorAgentDraftTextarea.tsx';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('EditorAgentDraftTextarea', () => {
+  it('uses native field sizing when the browser supports it', () => {
+    const supports = vi.fn().mockReturnValue(true);
+    const resizeObserver = vi.fn();
+    const onChange = vi.fn();
+    vi.stubGlobal('CSS', { supports });
+    vi.stubGlobal('ResizeObserver', resizeObserver);
+
+    render(
+      <EditorAgentDraftTextarea
+        value=""
+        onChange={onChange}
+      />,
+    );
+
+    const input = screen.getByLabelText(
+      '发送给画布 Agent',
+    ) as HTMLTextAreaElement;
+    expect(supports).toHaveBeenCalledWith('field-sizing', 'content');
+    expect(resizeObserver).not.toHaveBeenCalled();
+    expect(input.className).toContain('[field-sizing:content]');
+    expect(input.className).toContain('min-h-10');
+    expect(input.className).toContain('max-h-32');
+    expect(input.className).toContain('overflow-y-auto');
+    expect(input.style.height).toBe('');
+
+    fireEvent.change(input, { target: { value: '新草稿' } });
+    expect(onChange).toHaveBeenCalledWith('新草稿');
+  });
+
+  it('falls back to measured sizing and remeasures when width changes', () => {
+    let resizeObserverCallback!: ResizeObserverCallback;
+    const observe = vi.fn();
+    const disconnect = vi.fn();
+    vi.stubGlobal('CSS', { supports: vi.fn().mockReturnValue(false) });
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn().mockImplementation((callback: ResizeObserverCallback) => {
+        resizeObserverCallback = callback;
+        return {
+          observe,
+          unobserve: vi.fn(),
+          disconnect,
+        };
+      }),
+    );
+
+    const { rerender, unmount } = render(
+      <EditorAgentDraftTextarea value="" onChange={vi.fn()} />,
+    );
+    const input = screen.getByLabelText(
+      '发送给画布 Agent',
+    ) as HTMLTextAreaElement;
+    expect(observe).toHaveBeenCalledWith(input);
+    let contentHeight = 92;
+    Object.defineProperty(input, 'scrollHeight', {
+      configurable: true,
+      get: () => contentHeight,
+    });
+
+    rerender(
+      <EditorAgentDraftTextarea
+        value="第一行\n第二行\n第三行\n第四行\n第五行"
+        onChange={vi.fn()}
+      />,
+    );
+    expect(input.style.height).toBe('92px');
+    expect(input.style.overflowY).toBe('hidden');
+
+    contentHeight = 180;
+    act(() => {
+      resizeObserverCallback(
+        [
+          {
+            target: input,
+            contentRect: { width: 180 },
+          } as unknown as ResizeObserverEntry,
+        ],
+        {} as ResizeObserver,
+      );
+    });
+    expect(input.style.height).toBe('128px');
+    expect(input.style.overflowY).toBe('auto');
+
+    unmount();
+    expect(disconnect).toHaveBeenCalledTimes(1);
+  });
+
+  it('submits on Enter and keeps Shift+Enter for line breaks', () => {
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+    render(
+      <form onSubmit={onSubmit}>
+        <EditorAgentDraftTextarea value="草稿" onChange={vi.fn()} />
+      </form>,
+    );
+
+    const input = screen.getByLabelText('发送给画布 Agent');
+    fireEvent.keyDown(input, { key: 'Enter', shiftKey: true });
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,103 @@
+import {
+  type ClipboardEventHandler,
+  type KeyboardEvent,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+const DRAFT_MIN_HEIGHT_PX = 40;
+const DRAFT_MAX_HEIGHT_PX = 128;
+
+// for fallback on some browser
+function supportsNativeFieldSizing() {
+  return (
+    typeof CSS !== 'undefined' &&
+    typeof CSS.supports === 'function' &&
+    CSS.supports('field-sizing', 'content')
+  );
+}
+
+function resizeFallbackTextarea(textarea: HTMLTextAreaElement) {
+  textarea.style.height = 'auto';
+  const contentHeight = textarea.scrollHeight;
+  const nextHeight = Math.min(
+    Math.max(contentHeight, DRAFT_MIN_HEIGHT_PX),
+    DRAFT_MAX_HEIGHT_PX,
+  );
+  textarea.style.height = `${nextHeight}px`;
+  textarea.style.overflowY =
+    contentHeight > DRAFT_MAX_HEIGHT_PX ? 'auto' : 'hidden';
+}
+
+export function EditorAgentDraftTextarea({
+  value,
+  onChange,
+  onPaste,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  onPaste?: ClipboardEventHandler<HTMLTextAreaElement>;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || supportsNativeFieldSizing()) {
+      return;
+    }
+    resizeFallbackTextarea(textarea);
+  }, [value]);
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || supportsNativeFieldSizing()) {
+      return undefined;
+    }
+
+    let previousWidth = textarea.getBoundingClientRect().width;
+    const resizeWhenWidthChanges = (nextWidth: number) => {
+      if (Math.abs(nextWidth - previousWidth) < 0.5) {
+        return;
+      }
+      previousWidth = nextWidth;
+      resizeFallbackTextarea(textarea);
+    };
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          resizeWhenWidthChanges(entry.contentRect.width);
+        }
+      });
+      observer.observe(textarea);
+      return () => observer.disconnect();
+    }
+
+    const handleWindowResize = () => {
+      resizeWhenWidthChanges(textarea.getBoundingClientRect().width);
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, []);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      event.currentTarget.form?.requestSubmit();
+    }
+  };
+
+  return (
+    <textarea
+      ref={textareaRef}
+      className="editor-agent-conversation__draft-input max-h-32 min-h-10 min-w-0 flex-1 resize-none overflow-x-hidden overflow-y-auto overscroll-contain rounded-3xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 outline-none [field-sizing:content] focus:border-slate-400"
+      aria-label="发送给画布 Agent"
+      value={value}
+      rows={1}
+      onChange={(event) => onChange(event.currentTarget.value)}
+      onPaste={onPaste}
+      onKeyDown={handleKeyDown}
+    />
+  );
+}