简介

一种内联文本字段，在激活前（通过聚焦、点击或双击）显示为纯文本，随后切换为带提交/取消控件的可编辑输入框。

用法

import { Editable } from "../components/ui";

export default function MyPage() {
  return (
    <Editable label="Project name" defaultValue="Artefact UI Suite" />
  );
}

自定义组合

传入 children 以完全控制预览/输入/控件布局：

import { Editable } from "../components/ui";

export default function MyPage() {
  return (
    <Editable defaultValue="Untitled" activationMode="dblclick">
      <Editable.Label>Title</Editable.Label>
      <Editable.Area>
        <Editable.Preview />
        <Editable.Input />
      </Editable.Area>
      <Editable.Control>
        <Editable.EditTrigger>Edit</Editable.EditTrigger>
        <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
        <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
      </Editable.Control>
    </Editable>
  );
}

CMS 页面构建器

该组件在 页面构建器（content/pages/*.json）中作为 editable 区块提供：

{
  "type": "editable",
  "label": "Project name",
  "defaultValue": "Artefact UI Suite",
  "placeholder": "Untitled",
  "size": "md",
  "activationMode": "focus",
  "submitMode": "both"
}

它在页面构建器中始终以 interactive 渲染。

属性

Root

属性	类型	说明
value	string	当前值（受控）。
defaultValue	string	初始值（非受控）。
edit	boolean	编辑模式是否激活（受控）。
defaultEdit	boolean	初始编辑模式状态（非受控）。
activationMode	"focus" | "dblclick" | "click" | "none"	预览进入编辑模式的方式。默认 "focus"。
submitMode	"enter" | "blur" | "both" | "none"	哪些交互会提交值。默认 "both"。
selectOnFocus	boolean	聚焦时是否选中输入框中的文本。默认 true。
autoResize	boolean	编辑时保持预览可见（按内容调整尺寸），而非隐藏它。
disabled	boolean	禁用所有交互。
readOnly	boolean	阻止进入编辑模式，同时仍允许聚焦。
required	boolean	标记底层输入为必填。
invalid	boolean	标记字段为无效。
placeholder	string | { edit: string; preview: string }	占位符文本，输入与预览可分别不同。
maxLength	number	最大输入长度。
name	string	底层输入的 name，用于原生表单提交。
form	string	通过 id 将输入与 <form> 关联。
translations	Partial<EditableTranslations>	对编辑/提交/取消/输入的 ARIA 字符串的覆盖。
size	"2xs" | "xs" | "sm" | "md" | "lg"	视觉尺寸。默认 "md"。
onValueChange	(details: { value: string }) => void	输入值变化时调用。
onValueCommit	(details: { value: string }) => void	值被提交时调用。
onValueRevert	(details: { value: string }) => void	编辑被取消时调用。
onEditChange	(details: { edit: boolean }) => void	编辑模式切换时调用。
interactive	boolean	强制（或抑制）以水合形式作为岛屿渲染。
class	string	根元素的自定义 CSS 类名。

默认组合

属性	类型	说明
label	JSX.Element | string	渲染在字段上方的标签。
children	JSX.Element	追加在默认预览/输入/控件之后的额外内容。

子组件

部件	说明
Editable.Label	绑定到输入的 <label>；点击它会使预览获得焦点。
Editable.Area	在同一布局槽中包裹 Preview 和 Input。
Editable.Preview	非编辑时显示的只读内容；role="button"，可按 activationMode 用键盘激活。
Editable.Input	编辑时显示的 <input>；按 submitMode 处理 Esc 取消与 Enter/失焦提交。
Editable.Control	包裹编辑/提交/取消触发器。
Editable.EditTrigger	进入编辑模式。编辑中时隐藏。
Editable.SubmitTrigger	提交值并退出编辑模式。非编辑时隐藏。
Editable.CancelTrigger	丢弃修改并退出编辑模式。非编辑时隐藏。
Editable.Context	以渲染属性（render-prop）方式访问可编辑上下文：<Editable.Context>{(ctx) => ...}</Editable.Context>。

无障碍

• Preview 在 activationMode 为 "click" 或 "dblclick" 时可用键盘操作（tabIndex={0}、Enter/Space）；在 "focus" 模式下，仅用 Tab 键聚焦它即可打开编辑模式。
• EditTrigger / SubmitTrigger / CancelTrigger 的 aria-label 取自 translations，并且在当前模式不适用时会被隐藏（不仅是视觉上，而是通过 hidden 属性）。
• Input 在设置了 invalid 时携带 aria-invalid，并携带来自 translations.input 的 aria-label。