集成 TextareaAutosize UI 组件

这是一个基于 react-textarea-autosize 构建的自适应高度 textarea 组件，会根据内容自动调整高度，并内置服务端渲染兼容性与平滑过渡效果。

安装

你可以通过 Tiptap CLI 添加该 primitive

npx @tiptap/cli@latest add textarea-autosize

用法

import { TextareaAutosize } from '@/components/tiptap-ui-primitive/textarea-autosize'

export default function MyComponent() {
  const [value, setValue] = React.useState('')

  return (
    <div>
      {/* 基础自适应高度 textarea */}
      <TextareaAutosize
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="开始输入吧……我会随内容增长！"
      />

      {/* 带有最小和最大行数的 textarea */}
      <TextareaAutosize minRows={3} maxRows={8} placeholder="我最少 3 行，最多 8 行" />

      {/* 自定义尺寸调整行为的 textarea */}
      <TextareaAutosize
        minRows={2}
        maxRows={10}
        cacheMeasurements={true}
        placeholder="我缓存尺寸，更好性能"
      />
    </div>
  )
}

属性

TextareaAutosize

基于 react-textarea-autosize 构建，增加了服务端渲染兼容支持。

名称	类型	默认值	说明
minRows	`number`	1	最小行数
maxRows	`number`	Infinity	最大行数
value	`string`	-	受控的内容值
onChange	`(event: ChangeEvent) => void`	-	内容变化事件回调

依赖

react-textarea-autosize：提供自动调整高度功能的底层库
use-isomorphic-layout-effect：支持服务端渲染的自定义布局 Effect Hook

Previously间隔器

Next up工具栏