remons-markdown-editor 1.0.0-beta.2 → 1.0.0-beta.21

package/readme.md

@@ -1,91 +1,309 @@
-# remons-markdown-editor
-
-基于 React 的 Markdown 编辑器组件，支持工具栏编辑、实时预览、同步滚动和自定义容器等功能。
-
-## 安装
-
-```bash
-npm install remons-markdown-editor
-```
-
-## 基本用法
-
-```tsx
-import { MarkdownEditor } from 'remons-markdown-editor'
-import 'remons-markdown-editor/style.css'
-
-export default function App() {
-  return <MarkdownEditor />
-}
-```
-
-## API
-
-### MarkdownEditorProps
-
-| 属性名 | 类型 | 默认值 | 说明 |
-|--------|------|--------|------|
-| value | string | - | 受控模式下的内容 |
-| defaultValue | string | '' | 非受控模式下的初始内容 |
-| onChange | (value: string) => void | - | 内容变更回调 |
-| showPreview | boolean | true | 是否显示预览面板 |
-| fullscreen | boolean | false | 是否显示全屏按钮 |
-
-### MarkdownEditorRef
-
-| 方法名 | 返回类型 | 说明 |
-|--------|----------|------|
-| getContent | () => string | 获取当前编辑器内容 |
-
-## 自定义容器
-
-通过 `useRegisterToolbar` hook 注册自定义容器组件，支持单个或批量注册：
-
-```tsx
-import { MarkdownEditor, useRegisterToolbar } from 'remons-markdown-editor'
-import 'remons-markdown-editor/style.css'
-
-const schema = {
-  name: 'alert',
-  label: '警告框',
-  icon: <AlertOutlined />,
-  fields: [{ key: 'level', defaultValue: 'info' }],
-  renderDialog: (props, onChange) => (
-    <div>
-      <input
-        value={props.level}
-        onChange={e => onChange('level', e.target.value)}
-      />
-    </div>
-  ),
-}
-
-export default function App() {
-  // 单个注册
-  useRegisterToolbar(schema)
-  return <MarkdownEditor />
-}
-```
-
-### 批量注册
-
-```tsx
-export default function App() {
-  useRegisterToolbar([schema1, schema2, schema3])
-  return <MarkdownEditor />
-}
-```
-
-### ComponentSchema
-
-| 属性名 | 类型 | 必填 | 说明 |
-|--------|------|------|------|
-| name | string | 是 | 容器名称，对应 :::name 语法 |
-| label | string | 是 | 工具栏按钮显示的标签 |
-| icon | ReactNode | 否 | 工具栏按钮显示的图标，默认使用 ReadOutlined |
-| fields | DialogField[] | 是 | 弹窗属性字段配置 |
-| renderDialog | Function | 是 | 弹窗内容渲染函数，接收当前属性值和变更回调 |
-
-## 依赖
-
-此包需要 React 18 或 19 作为 peer dependency。
+# remons-markdown-editor
+
+基于 React 的 Markdown 编辑器组件，支持工具栏编辑、实时预览、同步滚动和自定义容器等功能。
+
+## 安装
+
+```bash
+npm install remons-markdown-editor
+```
+
+## 基本用法
+
+```tsx
+import { MarkdownEditor } from 'remons-markdown-editor'
+import 'remons-markdown-editor/style.css'
+
+export default function App() {
+  return <MarkdownEditor />
+}
+```
+
+## API
+
+### MarkdownEditorProps
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | string | - | 受控模式下的内容 |
+| defaultValue | string | '' | 非受控模式下的初始内容 |
+| onChange | (value: string) => void | - | 内容变更回调 |
+| showPreview | boolean | true | 是否显示预览面板 |
+| fullscreen | boolean | false | 是否显示全屏按钮 |
+| previewOptions | PreviewOptions | - | 预览渲染配置，类型继承自 `RenderMarkdownProps` |
+| uploadConfig | ImageUploadConfig | - | 图片上传配置 |
+
+### MarkdownEditorRef
+
+| 方法名 | 返回类型 | 说明 |
+|--------|----------|------|
+| getContent | () => string | 获取当前编辑器内容 |
+
+### PreviewOptions
+
+预览渲染配置，类型继承自 `RenderMarkdownProps`（来自 `remons-render-markdown`），并扩展了 `languages` 字段：
+
+```typescript
+import type { RenderMarkdownProps } from 'remons-render-markdown'
+
+export type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
+  languages?: Record<string, any> | null | undefined
+}
+```
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| languages | Record<string, any> | - | 自定义代码高亮语言配置 |
+| customRenderers | MarkdownPlugin[] | - | 自定义 markdown-it 渲染插件 |
+| excludedSelectors | string[] | - | 图片预览排除名单 |
+| isSlotMermaid | boolean | - | 是否使用 slot 方式渲染 mermaid |
+| isShowCollapsed | boolean | - | 是否显示代码折叠 |
+| defaultCollapsed | boolean | - | 默认识否折叠代码 |
+| showBackTop | boolean | - | 是否显示返回顶部 |
+| isPrintPreview | boolean | - | 是否为打印模式 |
+| mermaidDebounce | number | - | Mermaid 渲染防抖延迟（ms） |
+| cdn | Record<string, string> | - | 自定义 CDN 配置 |
+| chartConfig | (text: string) => string | - | 渲染前文本修改函数 |
+| languages | Record<string, any> | - | 自定义代码高亮语言配置 |
+
+更多配置请参考 [remons-render-markdown](https://github.com/liRemons/render-markdown)。
+
+### ImageUploadConfig
+
+图片上传配置：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| uploadUrl | string | - | 图片上传接口地址（需与 onUploadImage 二选一） |
+| onUploadImage | (file: File) => Promise<string \| null> | - | 自定义图片上传函数（优先级高于 uploadUrl） |
+| onGetUploadUrl | (result: any) => string \| null | - | 处理服务器返回结果的回调，用于自定义 URL 提取逻辑 |
+
+## 使用示例
+
+### 自定义预览配置
+
+```tsx
+import { MarkdownEditor } from 'remons-markdown-editor'
+import type { PreviewOptions } from 'remons-markdown-editor'
+import { languagesCommon } from 'remons-render-markdown'
+import 'remons-markdown-editor/style.css'
+
+function App() {
+  const previewOptions: PreviewOptions = {
+    // 自定义高亮语言（在 languagesCommon 基础上扩展）
+    languages: {
+      ...languagesCommon,
+      // 添加自定义语言配置
+    },
+    // 自定义 markdown-it 插件，可使用 remons-markdown-plugins 按需导入
+    // 参考 https://github.com/liRemons/markdown-plugin
+    customRenderers: [
+      (md) => md.use(yourCustomPlugin)
+    ],
+    // 禁用 mermaid slot 渲染
+    isSlotMermaid: false,
+    // 自定义排除选择器
+    excludedSelectors: ['.my-custom-class'],
+  }
+
+  return <MarkdownEditor previewOptions={previewOptions} />
+}
+```
+
+### 自定义图片上传
+
+```tsx
+import { MarkdownEditor } from 'remons-markdown-editor'
+import type { ImageUploadConfig } from 'remons-markdown-editor'
+import 'remons-markdown-editor/style.css'
+
+function App() {
+  // 方式一：配置上传地址
+  const uploadConfig: ImageUploadConfig = {
+    uploadUrl: 'https://your-api.com/upload/image'
+  }
+  return <MarkdownEditor uploadConfig={uploadConfig} />
+
+  // 方式二：自定义上传函数（完全接管上传逻辑）
+  const customUpload: ImageUploadConfig = {
+    onUploadImage: async (file) => {
+      const formData = new FormData()
+      formData.append('file', file)
+
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Authorization': 'Bearer your-token'
+        }
+      })
+
+      const result = await response.json()
+      // 返回图片 URL，失败返回 null
+      return result.url || null
+    }
+  }
+  return <MarkdownEditor uploadConfig={customUpload} />
+
+  // 方式三：自定义 URL 提取逻辑（服务器返回相对路径时）
+  const uploadWithTransform: ImageUploadConfig = {
+    uploadUrl: 'https://your-api.com/upload/image',
+    onGetUploadUrl: (result) => {
+      const path = result.data?.path
+      // 如果返回的是相对路径，拼接为完整 URL
+      if (path && path.startsWith('/')) {
+        return `https://your-api.com${path}`
+      }
+      return path || null
+    }
+  }
+  return <MarkdownEditor uploadConfig={uploadWithTransform} />
+}
+```
+
+`uploadUrl` 或 `onUploadImage` 至少需要配置一个，否则图片上传按钮将被禁用。
+
+- **uploadUrl**：配置后，编辑器会使用 `FormData` 格式发送 `POST` 请求，`file` 字段为图片文件。接口返回的 `data.path` 将作为图片地址。
+- **onUploadImage**：自定义上传函数，完全接管上传逻辑。接收 `File` 对象，返回 `Promise<string | null>`，返回的图片 URL 会直接插入到编辑器中。
+- **onGetUploadUrl**：处理服务器返回结果的回调，用于自定义 URL 提取逻辑。当服务器返回的数据格式与默认格式不一致时，可通过此回调提取和转换 URL。
+
+### 自定义容器
+
+支持两种注册模式：
+
+#### 自动表单模式（推荐）
+
+如果字段的 `componentType` 已配置，弹窗会自动生成对应表单，无需手动编写 `renderDialog`：
+
+```tsx
+import { MarkdownEditor, useRegisterToolbar } from 'remons-markdown-editor'
+import { AlertOutlined } from '@ant-design/icons'
+import 'remons-markdown-editor/style.css'
+
+const schema = {
+  name: 'alert',
+  label: '警告框',
+  icon: <AlertOutlined />,
+  fields: [
+    { key: 'type', name: '类型', componentType: 'select', defaultValue: 'info',
+      componentProps: { options: [
+        { label: '信息', value: 'info' },
+        { label: '成功', value: 'success' },
+        { label: '警告', value: 'warning' },
+        { label: '错误', value: 'error' },
+      ]} },
+    { key: 'content', name: '内容', componentType: 'textarea', defaultValue: '',
+      componentProps: { rows: 3 } },
+    { key: 'enabled', name: '启用', componentType: 'switch', defaultValue: true },
+  ],
+}
+
+export default function App() {
+  useRegisterToolbar(schema)
+  return <MarkdownEditor />
+}
+```
+
+支持的 componentType：
+- `input` - 文本输入框
+- `textarea` - 多行文本框
+- `number` - 数字输入框
+- `select` - 下拉选择（需配置 `componentProps.options`）
+- `switch` - 开关
+- `slider` - 滑块
+- `rate` - 评分
+- `color` - 颜色选择器
+- `date` - 日期选择
+- `dateRange` - 日期范围选择
+
+#### 容器模式（自定义渲染）
+
+插入 `:::name` 格式的容器，支持弹窗编辑属性。需要手动编写 `renderDialog` 自定义渲染弹窗内容：
+
+```tsx
+import { MarkdownEditor, useRegisterToolbar } from 'remons-markdown-editor'
+import 'remons-markdown-editor/style.css'
+
+const schema = {
+  name: 'alert',
+  label: '警告框',
+  icon: <AlertOutlined />,
+  fields: [{ key: 'level', defaultValue: 'info' }],
+  renderDialog: (props, onChange) => (
+    <div>
+      <input
+        value={props.level}
+        onChange={e => onChange('level', e.target.value)}
+      />
+    </div>
+  ),
+}
+
+export default function App() {
+  useRegisterToolbar(schema)
+  return <MarkdownEditor />
+}
+```
+
+#### 标签包裹模式
+
+插入简单的标签包裹文本，如 `<plugin-container>...</plugin-container>`，适合不需要弹窗编辑的场景：
+
+```tsx
+import { MarkdownEditor, useRegisterToolbar } from 'remons-markdown-editor'
+import 'remons-markdown-editor/style.css'
+
+export default function App() {
+  useRegisterToolbar({
+    name: 'plugin-container',
+    label: '自定义容器',
+    icon: <AlertOutlined />,
+    wrapTags: ['<plugin-container>', '</plugin-container>'],
+  })
+  return <MarkdownEditor />
+}
+```
+
+点击对应按钮会自动切换（添加/移除）标签包裹。
+
+### 批量注册
+
+```tsx
+export default function App() {
+  useRegisterToolbar([schema1, schema2, schema3])
+  return <MarkdownEditor />
+}
+```
+
+### ComponentSchema
+
+| 属性名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| name | string | 是 | 容器/组件名称 |
+| label | string | 是 | 工具栏按钮显示的标签 |
+| icon | ReactNode | 否 | 工具栏按钮显示的图标 |
+| fields | DialogField[] | 容器模式可选（自动表单模式需要 componentType） | 弹窗属性字段配置 |
+| renderDialog | Function | 容器模式可选（自动表单模式不需要） | 弹窗内容渲染函数 |
+| wrapTags | [string, string] | 标签模式必填 | 开闭标签对，如 `['<tag>', '</tag>']` |
+
+注：`wrapTags` 模式下不需要 `fields` 和 `renderDialog`。两种模式只需配置一种。
+
+如果 `fields` 中的字段配置了 `componentType`，则会自动生成表单，无需 `renderDialog`。
+
+### DialogField
+
+弹窗属性字段配置：
+
+| 属性名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| key | string | 是 | 字段唯一标识 |
+| name | string | 否 | 字段标签（默认使用 key） |
+| componentType | string | 否 | 组件类型，支持：`input`、`textarea`、`number`、`select`、`switch`、`slider`、`rate`、`color`、`date`、`dateRange` |
+| componentProps | object | 否 | 传递给组件的属性 |
+| defaultValue | any | 否 | 字段默认值 |
+
+当 `fields` 中的字段配置了 `componentType` 时，弹窗会自动生成对应表单，无需手动编写 `renderDialog`。
+
+## 依赖
+
+此包需要 React 18 作为 peer dependency。

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Toolbar/renderers/TablePicker/index.module.less","../src/App.css"],"sourcesContent":[".container {\n  padding: 4px;\n  display: block;\n  min-width: 200px;\n  background: #fff;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.grid {\n  display: grid;\n  gap: 2px;\n  transition: all 0.1s ease;\n  justify-content: flex-start;\n}\n.grid .cell {\n  width: 24px;\n  height: 24px;\n  border: 1px solid #e8e8e8;\n  border-radius: 2px;\n  background: transparent;\n  cursor: pointer;\n  transition: all 0.1s ease;\n}\n.grid .cell.cellActive {\n  border-color: #91caff;\n  background: #ddf4ff;\n}\n.hint {\n  padding: 12px 16px;\n  color: #999;\n  font-size: 12px;\n  text-align: center;\n  cursor: pointer;\n}\n.label {\n  margin-top: 8px;\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n  min-height: 20px;\n  text-align: center;\n}\n","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');\n\n\n.app {\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.app.fullscreen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  background: #fff;\n  width: 100vw;\n  height: 100vh;\n}\n\n.toolbar {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  background: #f6f8fa;\n  border-bottom: 1px solid #d0d7de;\n  gap: 4px;\n  overflow-x: auto;\n}\n\n.toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 32px;\n  height: 32px;\n  padding: 0 8px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 500;\n  color: #24292f;\n  transition: background-color 0.15s, color 0.15s;\n  white-space: nowrap;\n}\n\n.toolbar-button:hover {\n  background: #e1e4e8;\n  color: #0969da;\n}\n\n.toolbar-button:active {\n  background: #d0d7de;\n}\n\n.toolbar-button.ant-btn {\n  min-width: 32px;\n  height: 32px;\n  padding: 0 8px;\n  border-color: transparent !important;\n  box-shadow: none !important;\n}\n\n.toolbar-button.ant-btn:hover {\n  background: #e1e4e8;\n  color: #0969da;\n  border-color: transparent !important;\n  box-shadow: none !important;\n}\n\n.toolbar-button.ant-btn:active {\n  border-color: transparent !important;\n  box-shadow: none !important;\n}\n\n:where(.css-dev-only-do-not-override-u6izyw).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {\n  border: none !important\n}\n\n.toolbar-separator {\n  width: 1px;\n  height: 24px;\n  background: #d0d7de;\n  margin: 0 4px;\n}\n\n.split-panels {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.split-panels .ant-splitter {\n  height: 100%;\n}\n\n.split-panels .ant-splitter-panel {\n  min-height: 0;\n}\n\n.editor {\n  height: 100%;\n \n}\n\n.cm-scroller {\n font-family: Consolas,Inter,Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif !important;\n}\n\n.cm-editor {\n  height: 100%;\n}\n\n.preview {\n  height: 100%;\n  overflow: auto;\n}\n\n\n/* 通用容器基类 */\n.md-container {\n  margin: 16px 0;\n  border-radius: 6px;\n  border: 1px solid #d0d7de;\n  overflow: hidden;\n}\n\n/* 链接卡片 */\n.link-card {\n  background: #f6f8fa;\n}\n\n.link-card-content {\n  padding: 16px;\n}\n\n.link-card-title {\n  margin: 0 0 4px;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.link-card-title a {\n  color: #0969da;\n  text-decoration: none;\n}\n\n.link-card-title a:hover {\n  text-decoration: underline;\n}\n\n.link-card-desc {\n  margin: 0;\n  font-size: 14px;\n  color: #57606a;\n  line-height: 1.5;\n}\n\n.link-card-primary {\n  background: #ddf4ff;\n  border-color: #54aeff;\n}\n\n.link-card-primary .link-card-title a {\n  color: #0550ae;\n}\n\n.link-card-warning {\n  background: #fff8c5;\n  border-color: #d4a72c;\n}\n\n.link-card-warning .link-card-title a {\n  color: #7d4e00;\n}\n\n/* 注释组件 */\n.note {\n  padding: 12px 16px;\n}\n\n.note-info {\n  background: #ddf4ff;\n  border-color: #54aeff;\n}\n\n.note-tip {\n  background: #dafbe1;\n  border-color: #4ac26b;\n}\n\n.note-warning {\n  background: #fff8c5;\n  border-color: #d4a72c;\n}\n\n.note-danger {\n  background: #ffebe9;\n  border-color: #fb857b;\n}\n\n.note-title {\n  margin: 0 0 4px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.note-text {\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n/* 编辑弹窗样式 */\n.edit-dialog {\n  padding: 8px 0;\n}\n\n.edit-dialog-field {\n  margin-bottom: 16px;\n}\n\n.edit-dialog-label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #24292f;\n}\n\n.edit-dialog-input {\n  width: 100%;\n  padding: 6px 10px;\n  font-size: 14px;\n  border: 1px solid #d0d7de;\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.15s;\n}\n\n.edit-dialog-input:focus {\n  border-color: #0969da;\n  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);\n}\n\n.edit-dialog-textarea {\n  resize: vertical;\n  font-family: inherit;\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import React__default from 'react';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-
-interface MarkdownEditorRef {
-    getContent: () => string;
-}
-interface MarkdownEditorProps {
-    /** 初始内容 */
-    defaultValue?: string;
-    /** 受控内容 */
-    value?: string;
-    /** 内容变化回调 */
-    onChange?: (value: string) => void;
-    /** 是否显示预览面板 */
-    showPreview?: boolean;
-    /** 是否支持全屏 */
-    fullscreen?: boolean;
-}
-declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
-
-interface ToolbarButtonConfig {
-    id?: string;
-    icon?: React__default.ComponentType;
-    label?: string;
-    children?: ToolbarButtonConfig[];
-    handler?: (view: EditorView, state: EditorState) => void;
-    separatorBefore?: boolean;
-    customRender?: () => React__default.ReactNode;
-}
-/**
- * 弹窗属性配置
- * 用于定义 Markdown 容器中需要填充的属性字段
- */
-interface DialogField {
-    /** 字段键名，用于 Markdown 属性填充 */
-    key: string;
-    /** 默认值 */
-    defaultValue?: string;
-}
-/**
- * 组件 Schema
- * 每个容器组件（如 :::linkCard）定义可编辑字段和弹窗渲染逻辑
- */
-interface ComponentSchema {
-    /** 容器名称，对应 :::name 语法 */
-    name: string;
-    /** 工具栏按钮显示的标签 */
-    label: string;
-    /** 工具栏按钮显示的图标 */
-    icon?: React__default.ReactNode;
-    /** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段 */
-    fields: DialogField[];
-    /**
-     * 弹窗内容渲染函数（必填）
-     * 接收当前属性值和回调函数，由用户完全自定义弹窗内容的渲染
-     * @param props 当前属性值，用于回显
-     * @param onChange 属性变更回调，用于更新表单值
-     * @returns 弹窗内容的 ReactNode
-     */
-    renderDialog: (props: Record<string, string>, onChange: (key: string, value: string) => void) => React__default.ReactNode;
-}
-
-/**
- * 注册自定义容器组件到工具栏。支持单个或批量注册。
- * 支持 linkCard 形式的 schema（name + fields + renderDialog）。
- * fields 定义 Markdown 属性字段，renderDialog 定义弹窗内容。
- *
- * @example 单个注册
- * ```tsx
- * const schema: ComponentSchema = {
- *   name: 'alert',
- *   label: '警告框',
- *   icon: <AlertOutlined />,
- *   fields: [{ key: 'level', defaultValue: 'info' }],
- *   renderDialog: (props, onChange) => (
- *     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
- *   ),
- * }
- *
- * function MyPage() {
- *   useRegisterToolbar(schema)
- *   return <MarkdownEditor />
- * }
- * ```
- *
- * @example 批量注册
- * ```tsx
- * function MyPage() {
- *   useRegisterToolbar([schema1, schema2, schema3])
- *   return <MarkdownEditor />
- * }
- * ```
- */
-declare function useRegisterToolbar(schemas: ComponentSchema | ComponentSchema[]): void;
-
-export { type ComponentSchema, type DialogField, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, type ToolbarButtonConfig, useRegisterToolbar };