@standhigher/react-email-editor 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +76 -189
  3. package/README.zh-CN.md +76 -189
  4. package/dist/index.d.ts +25 -7
  5. package/dist/index.js +1983 -1059
  6. package/dist/styles.css +677 -390
  7. package/package.json +21 -4
package/README.zh-CN.md CHANGED
@@ -2,244 +2,131 @@
2
2
 
3
3
  [English](./README.md) | 简体中文
4
4
 
5
- React 邮件编辑器，支持区块拖拽、富文本编辑和桌面/移动预览。内容以 JSON 保存，通过组件 ref 导出邮件 HTML。
5
+ React 邮件模板编辑器，支持拖拽区块、画布富文本编辑、桌面/移动预览、JSON 保存和 HTML 导出。
6
6
 
7
- ## 安装与接入
7
+ ## 安装
8
8
 
9
- 需要 React 18 和 React DOM 18。组件库提供 ESM 入口和 TypeScript 类型声明。
9
+ 需要 React 18 和 React DOM 18。提供 ESM 和 TypeScript 类型。
10
10
 
11
11
  ```bash
12
12
  pnpm add @standhigher/react-email-editor
13
13
  ```
14
14
 
15
- 在应用中引入一次样式。以下示例展示空编辑器，并读取当前数据：
15
+ ## 基本接入
16
+
17
+ 在应用入口引入一次样式，通过 `ref` 读取文档和 HTML；保存逻辑由应用实现。
16
18
 
17
19
  ```tsx
18
20
  import { useRef } from "react";
19
21
  import {
22
+ BLOCK_TYPES,
20
23
  EmailEditor,
24
+ createBlockNode,
25
+ createEmailDocument,
21
26
  type EmailEditorHandle,
27
+ type Variable,
22
28
  } from "@standhigher/react-email-editor";
23
29
  import "@standhigher/react-email-editor/styles.css";
24
30
 
31
+ const text = createBlockNode(BLOCK_TYPES.text);
32
+ if (text) text.fields.html = "<p>你好，{{ store_name }}</p>";
33
+ const initialDocument = createEmailDocument(text ? [text] : []);
34
+ const variables: Variable[] = [
35
+ { name: "{{ store_name }}", description: "店铺名称", value: "示例店铺" },
36
+ ];
37
+
25
38
  export function EmailPage() {
26
39
  const editorRef = useRef<EmailEditorHandle>(null);
27
40
 
28
- function readData() {
41
+ function save() {
29
42
  const data = editorRef.current?.getData();
30
43
  if (!data) return;
31
- // 将 data.document、data.json、data.html 或 data.renderedHtml
32
- // 交给应用自己的保存或导出逻辑。
44
+ // 将 data.document 保存到应用，data.html 用于邮件模板导出。
33
45
  console.log(data);
34
46
  }
35
47
 
36
48
  return (
37
49
  <>
38
- <EmailEditor ref={editorRef} height={720} />
39
- <button type="button" onClick={readData}>读取数据</button>
50
+ <EmailEditor
51
+ ref={editorRef}
52
+ initialDocument={initialDocument}
53
+ variables={variables}
54
+ height={720}
55
+ />
56
+ <button type="button" onClick={save}>保存</button>
40
57
  </>
41
58
  );
42
59
  }
43
60
  ```
44
61
 
45
- 保存逻辑由接入方实现。Next.js App Router 中，接入编辑器的组件需使用 `"use client"`。使用 `height="100%"` 时，父容器需要有明确高度。
46
-
47
- ## 本地启动
48
-
49
- 使用 pnpm 和当前受支持的 Node.js LTS；建议使用 Node.js 22.18 或更新版本，以兼容仓库工具链和 TypeScript 测试。
50
-
51
- ```bash
52
- pnpm install --frozen-lockfile
53
- pnpm dev
54
- ```
55
-
56
- 打开 [http://localhost:5173](http://localhost:5173)。playground 直接加载 `src/` 并支持热更新，无需提前构建，也不进入发布包。已有开发服务时直接复用。
57
-
58
- | 命令 | 用途 |
59
- | --- | --- |
60
- | `pnpm dev` | 启动本地 playground，端口为 5173。 |
61
- | `pnpm build` | 在 `dist/` 生成 ESM、类型声明和 CSS。 |
62
- | `pnpm build:watch` | 监听 `src/` 改动并重新构建 `dist/`，不启动预览服务。 |
63
- | `pnpm typecheck` | 检查组件库和 playground 的类型。 |
64
-
65
- 在另一个本地项目联调时，将其依赖指向组件库根目录，按实际位置调整相对路径：
66
-
67
- ```json
68
- {
69
- "dependencies": {
70
- "@standhigher/react-email-editor": "link:../react-email-editor"
71
- }
72
- }
73
- ```
74
-
75
- 先在本仓库执行 `pnpm build`，持续开发时保持 `pnpm build:watch` 运行。消费方执行 `pnpm install`，并使用自己的开发服务。包入口与 CSS 均从 `dist/` 读取。
62
+ 省略 `initialDocument` 即为空编辑器。Next.js App Router 中，接入组件需声明 `"use client"`，CSS 在应用允许的全局样式入口引入。使用 `height="100%"` 时，父容器需要有明确高度。
76
63
 
77
- 两个项目应使用同一个 React 实例。Vite 消费方可按需设置 `resolve.dedupe: ["react", "react-dom"]`。Next.js 消费方可设置 `transpilePackages: ["@standhigher/react-email-editor"]`；使用 Turbopack 且链接目录在项目外时，`turbopack.root` 需覆盖两个项目。
64
+ ## 常用参数
78
65
 
79
- ## 组件参数
66
+ 所有 Props 均可选。
80
67
 
81
- 所有 Props 均为可选项，相关类型从 `@standhigher/react-email-editor` 导出。
82
-
83
- | 参数 | 类型 | 默认值 / 行为 |
68
+ | 参数 | 类型 | 行为 |
84
69
  | --- | --- | --- |
85
- | `initialDocument` | `EmailDocument` | 默认空文档，仅在首次挂载时读取。 |
86
- | `global` | `Partial<EmailGlobalSettings>` | 默认无外部覆盖。传入字段覆盖初始文档的全局设置；后续更新会合并到当前文档。 |
87
- | `blocks` | `BlockDefinition[]` | `[]`。新增自定义区块；同名 `type` 覆盖内置定义，其余内置区块保留。 |
88
- | `variables` | `Variable[]` | `[]`。用于插入和预览替换的变量列表。 |
89
- | `height` | `number \| string` | `"100%"`。数字按 px 处理，字符串使用 CSS 高度值。 |
90
- | `onChange` | `(document: EmailDocument) => void` | 文档变化时触发，包括编辑、重置，以及实际改变文档值的外部全局设置更新。 |
91
- | `onGlobalChange` | `(global: EmailGlobalSettings) => void` | 在编辑器中修改全局设置时触发；外部 `global` 更新和重置不触发此回调。 |
92
-
93
- Reset 恢复首次初始化的文档快照，并重新应用当前 `global` 覆盖项。切换文档时使用新的 React `key` 重新挂载，例如 `<EmailEditor key={documentId} initialDocument={document} />`；仅修改 `initialDocument` 不会替换已打开的文档。省略之前传入的某个 `global` 字段，不会将其恢复为默认值。
70
+ | `initialDocument` | `EmailDocument` | 仅首次挂载读取；切换文档时通过新的 React `key` 重新挂载。 |
71
+ | `height` | `number \| string` | 默认 `"100%"`；数字为 px。 |
72
+ | `global` | `Partial<EmailGlobalSettings>` | 覆盖全局样式，后续更新合并到当前文档；省略字段不会恢复默认值。 |
73
+ | `variables` | `Variable[]` | 插入和预览变量；默认 `[]`，为空时隐藏 Personalization 入口。 |
74
+ | `blocks` | `BlockDefinition[]` | 添加自定义区块，同名 `type` 覆盖内置定义。 |
75
+ | `onChange` | `(document: EmailDocument) => void` | 文档变化时触发，包括实际改变文档值的外部 `global` 更新。 |
76
+ | `onGlobalChange` | `(global: EmailGlobalSettings) => void` | 编辑器内修改全局样式时触发，外部 `global` 更新不触发。 |
94
77
 
95
- ## 配置说明
78
+ 全局样式示例：`global={{ contentWidth: 640, outerPadding: "24px" }}`。默认值通过 `DEFAULT_EMAIL_GLOBAL` 导出。
96
79
 
97
- ### 文档配置
80
+ 内置区块：`heading`、`text`、`button`、`image`、`divider`、`spacer`、`html`，均可通过 `BLOCK_TYPES` 引用。
98
81
 
99
- 通过 `createEmailDocument()` 和 `createBlockNode()` 补齐默认值：
100
-
101
- ```tsx
102
- import {
103
- BLOCK_TYPES,
104
- EmailEditor,
105
- createBlockNode,
106
- createEmailDocument,
107
- type Variable,
108
- } from "@standhigher/react-email-editor";
82
+ ## 保存与导出
109
83
 
110
- const text = createBlockNode(BLOCK_TYPES.text);
111
- if (text) text.fields.html = "<p>你好，{{ store_name }}</p>";
112
-
113
- export const initialDocument = createEmailDocument(text ? [text] : []);
114
- initialDocument.subject = "欢迎订阅";
115
-
116
- const variables: Variable[] = [
117
- { name: "{{ store_name }}", description: "店铺名称", value: "示例店铺" },
118
- ];
119
-
120
- export function TemplateEmailPage() {
121
- return (
122
- <EmailEditor
123
- initialDocument={initialDocument}
124
- variables={variables}
125
- height={720}
126
- />
127
- );
128
- }
84
+ | Ref 方法 | 返回值 |
85
+ | --- | --- |
86
+ | `getData()` | `{ document, json, html, renderedHtml }` |
87
+ | `getDocument()` | 独立的 `EmailDocument` 快照，可存储后传回 `initialDocument`。 |
88
+ | `getJson()` | 格式化的文档 JSON 字符串。 |
89
+ | `getHtml()` | 保留模板表达式的完整邮件 HTML。 |
90
+ | `getRenderedHtml()` | 使用预览数据解析模板后的完整邮件 HTML。 |
91
+
92
+ 不挂载编辑器时，也可直接渲染文档：
93
+
94
+ ```ts
95
+ import { documentToHtml } from "@standhigher/react-email-editor";
96
+
97
+ const html = documentToHtml(initialDocument, undefined, { variables });
98
+ const previewHtml = documentToHtml(initialDocument, undefined, {
99
+ variables,
100
+ resolveHtmlTemplates: true,
101
+ });
129
102
  ```
130
103
 
131
- 如示例所示，同时传入 `initialDocument` 和 `variables`，使变量拥有预览值，并能在导出时补点。`createBlockNode()` 遇到未知类型时返回 `null`。内置区块有 `heading`、`text`、`button`、`image`、`divider`、`spacer` 和 `html`，可通过 `BLOCK_TYPES` 引用。
104
+ 变量的 `name` 原样插入，`description` 和预览值 `value` 可选。导出时仅对与 `variables[].name` 原文精确匹配的 token 补点并保留空格，如 `{{ store_name }}` → `{{ .store_name }}`；其他 Go template 表达式保持原样。预览支持部分 Go template 语法，数据优先级为区块 `defaultData` > `templateData`（`documentToHtml` 选项）> `variables`。
132
105
 
133
- | 文档字段 | 类型 | 说明 |
134
- | --- | --- | --- |
135
- | `version` | `typeof DOCUMENT_VERSION` | 当前版本为 `1`，由 `createEmailDocument()` 填充。 |
136
- | `subject` | `string`，可选 | 邮件主题，编辑器输入上限为 128 个字符。 |
137
- | `global` | `EmailGlobalSettings` | 邮件全局样式，创建函数会补齐默认值。 |
138
- | `blocks` | `EmailBlockNode[]` | 按展示顺序排列的区块。每项包含唯一 `id`、`type`、`fields`，以及可选的 `style` 和预览数据 `defaultData`。 |
139
-
140
- 文档结构仍处于开发阶段，不会自动迁移旧版区块字段。完整模型见[文档类型定义](./src/types/document.ts)。
141
-
142
- ### 全局样式
143
-
144
- 通过 `global` 传入部分设置，例如 `<EmailEditor global={{ contentWidth: 640, outerPadding: "24px" }} />`。`DEFAULT_EMAIL_GLOBAL` 导出完整默认值；`resolveEmailGlobal()` 用于补齐和归一化配置。
145
-
146
- 这些设置控制邮件内容。编辑器的选中边框、工具栏等辅助界面不会进入导出的 HTML。
147
-
148
- | 参数 | 类型 / 可选值 | 默认值 | 说明 |
149
- | --- | --- | --- | --- |
150
- | `contentWidth` | `number` | `600` | 内容宽度，单位 px；取整并限制在 320–900。 |
151
- | `contentAlign` | `"left" \| "center" \| "right"` | `"center"` | 内容整体的水平位置。 |
152
- | `backgroundColor` | `string` | `"#ffffff"` | 邮件外层背景色。 |
153
- | `contentBackgroundColor` | `string` | `"#ffffff"` | 内容背景色。 |
154
- | `contentPadding` | `string` | `"0px"` | 内容内边距。 |
155
- | `outerPadding` | `string` | `"0px"` | 内容外侧留白。 |
156
- | `blockGap` | `string` | `"4px"` | 区块间距。 |
157
- | `textColor` | `string` | `"#000000"` | 默认文字颜色。 |
158
- | `textAlign` | `"left" \| "center" \| "right" \| "justify"` | `"left"` | 默认文字对齐。 |
159
- | `fontFamily` | `string` | `"Arial, Helvetica, sans-serif"` | 默认字体列表。 |
160
- | `fontWeight` | `"normal" \| "bold"` | `"normal"` | 默认字重。 |
161
- | `defaultFontSize` | `string` | `"16px"` | 默认字号。 |
162
- | `defaultLineHeight` | `string` | `"1.5"` | 默认行高。 |
163
- | `paragraphSpacing` | `string` | `"6px"` | 相邻顶层段落的间距。 |
164
- | `listSpacing` | `string` | `"4px"` | 列表整体（`ul` / `ol`）的上下外边距。 |
165
- | `listIndent` | `string` | `"22px"` | 列表缩进。 |
166
- | `linkColor` | `string` | `"#005bd3"` | 默认链接颜色。 |
167
- | `linkDecoration` | `"underline" \| "none"` | `"underline"` | 默认链接装饰。 |
168
- | `borderWidth` | `string` | `"0px"` | 内容边框宽度。 |
169
- | `borderStyle` | `"none" \| "solid" \| "dashed" \| "dotted"` | `"solid"` | 内容边框样式。 |
170
- | `borderColor` | `string` | `"#000000"` | 内容边框颜色。 |
171
- | `borderRadius` | `string` | `"0px"` | 单个圆角值，或按左上、右上、右下、左下排列的四个值。 |
172
-
173
- 间距和尺寸使用 `"16px"` 等 CSS 长度字符串；内边距支持 `"12px 24px"` 等简写，行高也支持无单位数值。桌面画布和预览跟随 `contentWidth`，移动预览的视口宽度为 360px。
174
-
175
- 全局间距和长度配置支持非负的 `px`、`em`、`rem`、`%` 值；除行高外，无单位长度会补为 px。不支持的值（如负长度、`calc()`、`var()`、`vh`、`vw`）会回退为对应全局参数的默认值。
176
-
177
- ### 变量与模板数据
106
+ 当前文档格式仍处于开发阶段，仅接受 `version: 2`，不自动迁移旧文档。使用 `createEmailDocument()` 和 `createBlockNode()` 创建数据。升级差异见 [CHANGELOG](./CHANGELOG.md)。
178
107
 
179
- ```tsx
180
- import type { Variable } from "@standhigher/react-email-editor";
181
-
182
- export const variables: Variable[] = [
183
- { name: "{{ store_name }}", description: "店铺名称", value: "示例店铺" },
184
- ];
185
- ```
186
-
187
- 通过 `EmailEditor` 的 `variables` 参数传入此数组。
188
-
189
- | 字段 | 类型 | 说明 |
190
- | --- | --- | --- |
191
- | `name` | `string` | 必填。下拉展示并原样插入的变量，保留空格，例如 `{{ store_name }}`。 |
192
- | `description` | `string`，可选 | 下拉选项副文案；空字符串或不传时不显示。 |
193
- | `value` | `string`，可选 | 预览时使用的替换文本。 |
108
+ ## 自定义区块
194
109
 
195
- 变量可以带前导点。导出模板 HTML 时，仅对与 `variables[].name` 原文精确匹配（包括空格）的 token 补齐缺失的点，并保留空格，例如 `{{ store_name }}` 变为 `{{ .store_name }}`。其他 Go template 表达式保持原样，默认不会替换为预览值。
110
+ 通过 `blocks` 传入 `BlockDefinition[]`，必填项为 `type`、`title` 和 `render(ctx)`，返回 HTML 字符串。`fields` / `styleFields` 配置检查器，`defaultFields` / `defaultStyle` / `defaultData` 设置初始值。`render` 接收 `mode: "canvas" | "email"`。
196
111
 
197
- 区块节点的 `defaultData: Record<string, unknown>` 可提供结构化预览数据，例如供 `{{range .products}}` 使用的数组。同名数据以区块 `defaultData` 为准，覆盖全局变量。预览解析适用于所有区块渲染出的 HTML，也包括自定义区块。HTML 区块的模板表达式直接写在 `fields.html` 中；预览渲染器支持部分 Go template 语法。
112
+ 内置文字格式存于 `fields.html`，容器样式存于 `style.dimension` / `style.decorations`，按钮、图片和分割线自身样式存于 `style.element`。渲染仅使用区块启用的样式字段。完整定义见 [BlockDefinition](https://github.com/standhigher/react-email-editor/blob/main/src/types/block.ts) 和 [EmailDocument](https://github.com/standhigher/react-email-editor/blob/main/src/types/document.ts)。独立调用 `documentToHtml` 时，第二个参数需传入包含自定义区块的完整定义列表。
198
113
 
199
- ### 区块配置
114
+ ## 本地开发
200
115
 
201
- 区块节点的样式按用途分组：
116
+ 建议 Node.js 22.18+，使用 pnpm：
202
117
 
203
- | 样式分组 | 用途 |
204
- | --- | --- |
205
- | `style.dimension` | 容器内边距 `padding`、外侧留白 `margin`，以及可选的 px 高度 `height`；高度包含内边距，作为最小高度。 |
206
- | `style.decorations` | 容器背景、边框和圆角。 |
207
- | `style.typography` | 区块文字样式，覆盖全局排版设置。 |
208
- | `style.element` | 按钮、图片和分割线等元素自身的样式，例如尺寸和对齐。 |
209
-
210
- Heading 和 Text 默认包含 `16px` 内边距。HTML 区块保留作者显式编写的内联样式。各字段见 [EmailBlockStyle](./src/types/document.ts)。
211
-
212
- 通过 `blocks` 传入稳定的 `BlockDefinition[]` 添加自定义区块。必填项为 `type`、`title` 和 `render(ctx)`；可选的 `fields`、`styleFields` 配置检查器，`defaultFields`、`defaultStyle`、`defaultData` 设置新建节点的初始值。`render(ctx)` 返回 HTML 字符串，接收 `mode: "canvas" | "email"`。
213
-
214
- ```tsx
215
- import { EmailEditor, type BlockDefinition } from "@standhigher/react-email-editor";
216
-
217
- const customBlocks: BlockDefinition[] = [{
218
- type: "notice",
219
- title: "Notice",
220
- defaultStyle: { dimension: { padding: "16px" } },
221
- render: () => '<p style="margin:0;color:#555555;">感谢订阅。</p>',
222
- }];
223
-
224
- export function CustomEmailPage() {
225
- return <EmailEditor blocks={customBlocks} height={720} />;
226
- }
118
+ ```bash
119
+ pnpm install --frozen-lockfile
120
+ pnpm dev
227
121
  ```
228
122
 
229
- 默认会为自定义区块补充通用容器间距和装饰控件。设置 `exactStyleFields: true` 后，只展示传入的样式字段；节点上已有样式仍会参与渲染。完整定义见 [BlockDefinition、FieldConfig 和 StyleFieldConfig](./src/types/block.ts)。
230
-
231
- ## 读取与导出数据
232
-
233
- 通过 `useRef<EmailEditorHandle>(null)` 调用以下方法：
123
+ 打开 [http://localhost:5173](http://localhost:5173)。playground 直接加载 `src/`，已有服务时复用。验证命令：
234
124
 
235
- | 方法 | 返回类型 | 说明 |
236
- | --- | --- | --- |
237
- | `getData()` | `EmailEditorData` | 返回 `{ document, json, html, renderedHtml }`。 |
238
- | `getDocument()` | `EmailDocument` | 返回独立文档快照，可保存或用于下次编辑。 |
239
- | `getJson()` | `string` | 返回格式化的文档 JSON。 |
240
- | `getHtml()` | `string` | 返回完整邮件 HTML，保留模板表达式，仅为 `variables` 中的 token 补齐缺失的点。 |
241
- | `getRenderedHtml()` | `string` | 使用全局变量和区块预览数据解析模板，返回完整邮件 HTML。 |
242
-
243
- 修改返回的文档快照不会改变编辑器内部状态。可使用 `onChange` 订阅文档变化。
125
+ ```bash
126
+ pnpm typecheck
127
+ pnpm lint
128
+ pnpm build
129
+ node --test tests/*.test.mjs tests/*.test.ts
130
+ ```
244
131
 
245
- 不挂载编辑器时，可调用 `documentToHtml(document, definitions?, options?)`。`definitions` 默认为 `DEFAULT_BLOCKS`，文档使用自定义区块时需包含对应定义。`options` 支持 `resolveHtmlTemplates`（默认 `false`）、`variables` 和 `templateData`。未开启解析时，仅对传入 `variables` 中的 token 补点。开启解析时，数据优先级为区块 `defaultData` 高于 `templateData`，高于 `variables`。
132
+ 本地消费方可使用 `link:../react-email-editor`；先运行 `pnpm build`，再运行 `pnpm build:watch` 持续生成 `dist/`。两个项目需共用一个 React 实例；Vite 可按需设置 `resolve.dedupe: ["react", "react-dom"]`，Next.js 可设置 `transpilePackages: ["@standhigher/react-email-editor"]`，Turbopack 的 `root` 需覆盖链接目录。
package/dist/index.d.ts CHANGED
@@ -32,7 +32,7 @@ declare const LINK_DECORATIONS: {
32
32
  };
33
33
  type LinkDecoration = (typeof LINK_DECORATIONS)[keyof typeof LINK_DECORATIONS];
34
34
 
35
- declare const DOCUMENT_VERSION: 1;
35
+ declare const DOCUMENT_VERSION: 2;
36
36
  declare const FONT_FAMILIES: readonly FieldOption[];
37
37
  declare const DEFAULT_EMAIL_GLOBAL: EmailGlobalSettings;
38
38
 
@@ -94,7 +94,7 @@ interface EmailTypographyStyle {
94
94
  linkDecoration?: LinkDecoration;
95
95
  }
96
96
  /** 按钮、图片和分割线自身的样式，与区块容器样式独立。 */
97
- interface EmailElementStyle extends EmailDecorationStyle, EmailTypographyStyle {
97
+ interface EmailElementStyle extends EmailDecorationStyle {
98
98
  padding?: string;
99
99
  width?: string;
100
100
  height?: string;
@@ -103,11 +103,12 @@ interface EmailElementStyle extends EmailDecorationStyle, EmailTypographyStyle {
103
103
  interface EmailSpacingStyle {
104
104
  padding?: string;
105
105
  margin?: string;
106
- /** 内层单元格高度，只使用 px。缺省时不输出 height。 */
106
+ /** 自定义区块可通过 styleFields 启用；内置区块不支持。只使用 px。 */
107
107
  height?: string;
108
108
  }
109
109
  interface EmailBlockStyle {
110
110
  dimension?: EmailSpacingStyle;
111
+ /** 自定义区块可显式启用；内置区块的文字格式存于 fields.html。 */
111
112
  typography?: EmailTypographyStyle;
112
113
  decorations?: EmailDecorationStyle;
113
114
  element?: EmailElementStyle;
@@ -158,6 +159,14 @@ interface BlockRenderContext {
158
159
  mode: RenderMode;
159
160
  global: EmailGlobalSettings;
160
161
  }
162
+ type RichTextProfile = "text" | "heading" | "button";
163
+ /** 显式控制检查器的分组及字段归属，分组按声明顺序展示。 */
164
+ interface BlockInspectorSection {
165
+ title: string;
166
+ fieldNames?: string[];
167
+ styleIds?: string[];
168
+ advancedStyleIds?: string[];
169
+ }
161
170
  interface BlockDefinition {
162
171
  type: string;
163
172
  title: string;
@@ -165,7 +174,8 @@ interface BlockDefinition {
165
174
  description?: string;
166
175
  fields?: FieldConfig[];
167
176
  styleFields?: StyleFieldConfig[];
168
- /** getBlockDefinition 只保留 styleFields，不补容器间距和装饰。 */
177
+ inspectorSections?: BlockInspectorSection[];
178
+ /** 只启用 styleFields，不补容器间距和装饰；渲染也只读取启用的字段。 */
169
179
  exactStyleFields?: boolean;
170
180
  defaultFields?: Record<string, unknown>;
171
181
  defaultStyle?: EmailBlockStyle;
@@ -173,6 +183,7 @@ interface BlockDefinition {
173
183
  defaultData?: Record<string, unknown>;
174
184
  /** Content is edited inline on the canvas and stored in fields.html. */
175
185
  inlineEdit?: boolean;
186
+ inlineEditProfile?: RichTextProfile;
176
187
  render: (ctx: BlockRenderContext) => string;
177
188
  }
178
189
  interface Variable {
@@ -217,18 +228,25 @@ interface RichTextInheritedStyle {
217
228
  fontWeight: FontWeight;
218
229
  lineHeight: string;
219
230
  paragraphSpacing: string;
231
+ listSpacing?: string;
232
+ listIndent?: string;
233
+ linkColor?: string;
234
+ linkDecoration?: string;
220
235
  }
221
236
 
222
237
  interface RichTextProps {
223
238
  initialHtml: string;
239
+ profile?: RichTextProfile;
224
240
  placeholder?: string;
225
241
  variables: Variable[];
226
242
  selected: boolean;
243
+ toolbarId: string;
244
+ toolbarCollapsed: boolean;
227
245
  inherited?: RichTextInheritedStyle;
228
246
  onCommit: (html: string) => void;
229
247
  onSelect: () => void;
230
248
  }
231
- declare function RichText({ initialHtml, placeholder, variables, selected, inherited, onCommit, onSelect, }: RichTextProps): react.JSX.Element;
249
+ declare function RichText({ initialHtml, profile, placeholder, variables, selected, toolbarId, toolbarCollapsed, inherited, onCommit, onSelect, }: RichTextProps): react.JSX.Element;
232
250
 
233
251
  declare const DEFAULT_BLOCKS: BlockDefinition[];
234
252
 
@@ -299,7 +317,7 @@ declare function renderBlockContent(node: EmailBlockNode, definitions?: BlockDef
299
317
  declare function renderBlock(node: EmailBlockNode, definitions?: BlockDefinition[], mode?: RenderMode, global?: EmailGlobalSettings): string;
300
318
  declare function blockToHtml(node: EmailBlockNode, definitions?: BlockDefinition[], mode?: RenderMode, options?: BlockRenderOptionsInput): string;
301
319
 
302
- declare function buildRenderContext(node: EmailBlockNode, mode: RenderMode, global?: EmailGlobalSettings): BlockRenderContext;
320
+ declare function buildRenderContext(node: EmailBlockNode, mode: RenderMode, global?: EmailGlobalSettings, definition?: BlockDefinition | undefined): BlockRenderContext;
303
321
 
304
322
  declare function getBlockDefinition(type: string, definitions?: BlockDefinition[]): BlockDefinition | undefined;
305
323
 
@@ -322,4 +340,4 @@ declare const BLOCK_TYPES: {
322
340
  };
323
341
  type BuiltinBlockType = (typeof BLOCK_TYPES)[keyof typeof BLOCK_TYPES];
324
342
 
325
- export { BLOCK_TYPES, BORDER_STYLES, type BlockDefinition, type BlockRenderContext, type BlockRenderOptions, type BorderStyle, type BuiltinBlockType, DEFAULT_BLOCKS, DEFAULT_EMAIL_GLOBAL, DOCUMENT_VERSION, type DecorationFieldName, type DimensionFieldName, type DocumentHtmlOptions, type EmailBlockNode, type EmailBlockStyle, type EmailDecorationStyle, type EmailDocument, EmailEditor, type EmailEditorData, type EmailEditorHandle, type EmailEditorProps, type EmailElementStyle, type EmailGlobalSettings, type EmailSpacingStyle, type EmailTypographyStyle, FONT_FAMILIES, FONT_WEIGHTS, type FieldConfig, type FieldType, type FontWeight, HORIZONTAL_ALIGNS, type HorizontalAlign, LINK_DECORATIONS, type LinkDecoration, type RenderMode, RichText, STYLE_GROUPS, type StyleControlType, type StyleFieldConfig, type StyleGroup, TEXT_ALIGNS, type TemplateData, type TextAlign, type TypographyFieldName, type Variable, blockToHtml, buildRenderContext, createBlockNode, createDecorationFields, createDimensionFields, createEmailDocument, createTypographyFields, documentToHtml, generateId, getBlockDefinition, mergeTemplateData, renderBlock, renderBlockContent, renderTemplatePreview, resolveBlockStyleFields, resolveEmailGlobal, variablesToTemplateData };
343
+ export { BLOCK_TYPES, BORDER_STYLES, type BlockDefinition, type BlockInspectorSection, type BlockRenderContext, type BlockRenderOptions, type BorderStyle, type BuiltinBlockType, DEFAULT_BLOCKS, DEFAULT_EMAIL_GLOBAL, DOCUMENT_VERSION, type DecorationFieldName, type DimensionFieldName, type DocumentHtmlOptions, type EmailBlockNode, type EmailBlockStyle, type EmailDecorationStyle, type EmailDocument, EmailEditor, type EmailEditorData, type EmailEditorHandle, type EmailEditorProps, type EmailElementStyle, type EmailGlobalSettings, type EmailSpacingStyle, type EmailTypographyStyle, FONT_FAMILIES, FONT_WEIGHTS, type FieldConfig, type FieldType, type FontWeight, HORIZONTAL_ALIGNS, type HorizontalAlign, LINK_DECORATIONS, type LinkDecoration, type RenderMode, RichText, type RichTextProfile, STYLE_GROUPS, type StyleControlType, type StyleFieldConfig, type StyleGroup, TEXT_ALIGNS, type TemplateData, type TextAlign, type TypographyFieldName, type Variable, blockToHtml, buildRenderContext, createBlockNode, createDecorationFields, createDimensionFields, createEmailDocument, createTypographyFields, documentToHtml, generateId, getBlockDefinition, mergeTemplateData, renderBlock, renderBlockContent, renderTemplatePreview, resolveBlockStyleFields, resolveEmailGlobal, variablesToTemplateData };