@para-ui/core 5.0.0-beta.11 → 5.0.0-beta.13

package/lib/Tag/component.json

@@ -0,0 +1,221 @@
+{
+    "name": "Tag",
+    "category": "Data Display",
+    "description": "进行标记和分类的小标签，支持 4 种预设色 + 自定义色、描边/实色、closable 可关闭、editable 内置编辑模式、visible 显隐控制",
+    "semantic": {
+        "intent": [
+            "分类",
+            "标记",
+            "选择"
+        ],
+        "useCases": [
+            "文章标签",
+            "状态展示",
+            "筛选条件"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "normal": {
+            "meaning": "普通标签"
+        },
+        "outline": {
+            "meaning": "描边标签"
+        }
+    },
+    "states": [
+        "default",
+        "closable",
+        "visible",
+        "editable"
+    ],
+    "idealProps": {
+        "children": {
+            "type": "ReactNode",
+            "description": "**标签文案**（src 通过 PropsWithChildren 接收，与 props 分开）。直接作为 children 传入：`<Tag>已激活</Tag>`。**editable 模式下**：当 children 是 string 时会作为内嵌 input 的初始值（src/Tag/index.tsx:118-122 实证）"
+        },
+        "color": {
+            "type": "'blue' | 'green' | 'yellow' | 'red' | string",
+            "description": "标签颜色。**预设色（4 个）**：blue / green / yellow / red——会命中专门 CSS 类生成完整配色方案。**非预设值**（如 'gray' / hex / rgb()）走 tinycolor 解析，渲染为带 0.1 alpha 的对应色背景 + 原色文字（无 hover/active 等专门 CSS）。**状态色推荐语义**（业界常见映射）：green=success/激活、yellow=warning/待处理、red=error/危险、blue=info/默认；灰色场景建议传 hex '#808080' 或 '#999'。需求方若需要灰色等常用色，可以提议加入预设清单（src 改 PresetColors + 加专门样式）",
+            "_presetNote": "DEFECT 反查：src/Tag/index.tsx:67 PresetColors = ['blue','green','yellow','red']；非预设走 tinycolor 通用渲染但视觉效果有差异——不是 bug 是设计取舍"
+        },
+        "type": {
+            "type": "enum",
+            "values": [
+                "normal",
+                "outline"
+            ],
+            "default": "normal",
+            "description": "标签类型——normal 实色填充，outline 描边版（color 仍生效，但作为边框色 + 文字色，背景透明）"
+        },
+        "size": {
+            "type": "enum",
+            "values": [
+                "small",
+                "medium",
+                "large"
+            ],
+            "default": "small",
+            "description": "标签大小。三档统一为 small / medium / large(2026-05-08 跨组件命名 epic §3.1 选项 B 实施,medium 为新增视觉档,默认 small 不变,既有 small/large 调用零回归)"
+        },
+        "closable": {
+            "type": "boolean",
+            "default": false,
+            "description": "是否可关闭——开启后右侧自动渲染 ✕ 图标；自定义关闭图标传 closeIcon prop。**半受控行为**（src/Tag/index.tsx:175-178 实证）：未传 visible prop 时点击 ✕ 自动 setVisible(false) 内部隐藏；传了 visible 后由父组件控制（点击 ✕ 仅触发 onClose 不自动隐藏）"
+        },
+        "onClose": {
+            "type": "function",
+            "signature": "(event: React.MouseEvent) => void",
+            "description": "关闭按钮点击回调（**完整签名带 React MouseEvent 参数**，src/Tag/index.tsx:36 实证）。**事件**：内部已 stopPropagation；如需阻止默认隐藏（visible 未受控场景），调用 event.preventDefault() 即可——src 检查 e.defaultPrevented 后跳过 setVisible(false)"
+        },
+        "closeIcon": {
+            "type": "ReactNode",
+            "description": "自定义关闭图标节点（替代默认 CloseIcon），仅在 closable=true 时渲染"
+        },
+        "visible": {
+            "type": "boolean",
+            "default": true,
+            "description": "是否显示标签。**受控**：传入后 Tag 显隐完全跟随 visible（onClose 后不会自动隐藏，由父组件 setState 控制）。**非受控**：不传时 onClose 后 src 内部 setVisible(false) 自动隐藏。如需完全不挂载 DOM，在父组件做条件渲染 `{isShown && <Tag />}` 而非依赖 visible prop（visible=false 时 DOM 仍渲染只是 CSS 隐藏）"
+        },
+        "icon": {
+            "type": "ReactNode",
+            "description": "**前置图标**（src/Tag/index.tsx:231-254 实证 icon 渲染在文案左侧；与 closeIcon 在右侧不同）。editable=true 时此 prop 被忽略（前缀位置改渲染 EditIcon）"
+        },
+        "editable": {
+            "type": "boolean",
+            "default": false,
+            "description": "**Tag 内置可编辑模式**——传 editable={true} 后，Tag 在前缀位置自动渲染编辑图标（EditIcon），点击图标会切换为内嵌 input；按 Enter 或失焦提交。**回调通过 tagChange prop 触发**：`tagChange?: (value: string) => void`。**初值来源**：children 为 string 时作为 input 初始值；不是 string 时初值为空字符串。无需手写原生 input。editable 模式下 children 仅作为编辑态进入时的 initialValue；父组件后续更新 children **不会刷新已激活 input**；父组件需通过 tagChange 回调维护 state"
+        },
+        "tagChange": {
+            "type": "function",
+            "signature": "(value: string) => void",
+            "description": "**editable=true 模式下 input 值变化的回调**（src/Tag/index.tsx:259 实证：每次 onChange 触发 = 实时键入回调，**不是 onBlur/Enter 才触发**）。提交动作仅控制是否退出编辑态，与 tagChange 触发频率无关"
+        },
+        "editInputClassName": {
+            "type": "string",
+            "description": "editable 模式下内嵌 input 的类名"
+        },
+        "editInputWidth": {
+            "type": "number",
+            "description": "editable 模式下内嵌 input 的宽度（默认根据内容自适应）"
+        },
+        "maxWidth": {
+            "type": "number | string",
+            "description": "标签最大宽度。超出时配合 AutoTips 显示 tooltip（不截断）"
+        },
+        "tipMaxWidth": {
+            "type": "number | string",
+            "description": "AutoTips tooltip 的最大宽度（src/Tag/index.tsx:56,310 实证：透传给 AutoTips 的 tipMaxWidth prop，控制文案截断时 tooltip 浮层宽度）"
+        },
+        "onEdit": {
+            "type": "function",
+            "signature": "(event: React.MouseEvent) => void",
+            "description": "编辑图标点击回调（src/Tag/index.tsx:38,198 实证：editable=true 时点击前缀 EditIcon 触发，可通过 event.preventDefault() 阻止切换为 input 编辑状态）"
+        },
+        "getWidth": {
+            "type": "function",
+            "signature": "(width: number) => void",
+            "description": "获取标签宽度回调（src/Tag/index.tsx:40,115 实证：挂载及 inputVisible 变化后通过 useEffect 将 tagRef 的 offsetWidth 传出）"
+        },
+        "marginBottom": {
+            "type": "string",
+            "description": "标签下边距（src/Tag/index.tsx:58,136 实证：inline style 直接透传，用于 TagGroup 等批量排列场景控制行间距）"
+        },
+        "marginRight": {
+            "type": "string",
+            "description": "标签右边距（src/Tag/index.tsx:60,137 实证：inline style 直接透传，用于 TagGroup 等批量排列场景控制列间距）"
+        },
+        "className": {
+            "type": "string",
+            "description": "自定义类名（src/Tag/index.tsx:48 interface 声明，透传到根 span 元素）"
+        }
+    },
+    "do": [
+        "使用颜色区分不同类型的标签——状态徽章推荐：green=激活/成功、yellow=警告/待处理、red=错误/危险、blue=信息/默认、灰色用 hex '#808080'",
+        "使用 closable 实现标签的删除交互（visible 受控时父组件 setState 移除；非受控时 src 内部自动隐藏）",
+        "需要可编辑标签时直接传 editable={true} + tagChange 回调——Tag 内置 EditIcon + input 渲染逻辑，**不需要在 children 内手写原生 <input>**；children 为 string 时作为 input 初始值",
+        "**跨组件引用 Tag 表达状态色**：在 Table render / Form 选项渲染等场景，用 `<Tag color='green'>已激活</Tag>` 而非 inline style 兜底——预设 4 色已覆盖大多数状态语义"
+    ],
+    "dont": [
+        "在 Tag 中放置过长的文本",
+        "滥用 Tag 作为按钮使用",
+        "**不要在 editable 模式同时传 icon**——editable=true 时前缀位置改渲染 EditIcon，icon prop 被忽略；如需图标 + 编辑混用，需自实现",
+        "不要假设非预设色（hex / rgb / 'gray'）有完整 hover/active CSS——非预设走 tinycolor 0.1 alpha 渲染，无专门样式"
+    ],
+    "events": {
+        "onClose": {
+            "signature": "(event: React.MouseEvent) => void",
+            "asyncSupported": false,
+            "examples": [
+                "受控关闭：onClose={(e) => setVisible(false)}",
+                "阻止默认隐藏（非受控场景）：onClose={(e) => { e.preventDefault(); /* 自定义逻辑 */ }}",
+                "受控模式父组件删除标签：onClose={() => setTags(prev => prev.filter(t => t.id !== id))}"
+            ],
+            "commonMistakes": [
+                "不传 visible prop 时期望 onClose 后标签仍显示——未传 visible 时 Tag 内部自动 setVisible(false)；要阻止需调 e.preventDefault()",
+                "假设 onClose 只在显式关闭时触发——Tag 本体 stopPropagation，但父元素 onClick 不受影响",
+                "忘记在受控模式（传了 visible）中通过 onClose 更新父 state——Tag 不会自动隐藏，需父组件响应 onClose 更新 visible"
+            ]
+        },
+        "onEdit": {
+            "signature": "(event: React.MouseEvent) => void",
+            "asyncSupported": false,
+            "examples": [
+                "监听编辑图标点击：onEdit={(e) => console.log('edit clicked')}",
+                "阻止进入内置编辑态：onEdit={(e) => { e.preventDefault(); openCustomEditModal(); }}"
+            ],
+            "commonMistakes": [
+                "期望 onEdit 是编辑完成后的回调——onEdit 是点击编辑图标时触发；编辑完成回调是 tagChange",
+                "同时传 onEdit 和 editable 却期望自定义完全替代内置 input——onEdit 调 e.preventDefault() 才能阻止切换 input"
+            ]
+        },
+        "tagChange": {
+            "signature": "(value: string) => void",
+            "asyncSupported": false,
+            "examples": [
+                "实时同步编辑值：tagChange={(v) => setTagValue(v)}",
+                "受控：在 tagChange 中更新父组件 state，children 随之变化（editable 模式下 children 是初始值）"
+            ],
+            "commonMistakes": [
+                "假设 tagChange 是 onBlur/Enter 确认后触发——实际是实时 onChange（每次键入都触发）",
+                "不传 tagChange 期望 Tag 自己保存编辑值——编辑完成后父组件 children 不更新则下次进入编辑态仍是旧初始值"
+            ]
+        },
+        "getWidth": {
+            "signature": "(width: number) => void",
+            "asyncSupported": false,
+            "examples": [
+                "获取标签实际渲染宽度：getWidth={(w) => setTagWidth(w)}"
+            ],
+            "commonMistakes": [
+                "期望 getWidth 实时响应容器宽度变化——实际只在挂载时和 inputVisible 变化时触发（不是 ResizeObserver）"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "TagProps extends React.HTMLAttributes<HTMLSpanElement>，onClick 等原生事件直接透传，不需要单独声明",
+            "wrong": "// 以为 Tag 没有 onClick，外层包一个 div：<div onClick={handleClick}><Tag>文本</Tag></div>",
+            "right": "<Tag onClick={handleClick}>文本</Tag>  // HTMLAttributes 的所有事件都可直接传"
+        },
+        {
+            "issue": "editable 模式下 children 只作为编辑态初始值，不是受控值——父组件更新 children 不刷新已激活 input",
+            "wrong": "// 期望 children 变化实时反映到编辑 input 中\n<Tag editable tagChange={setVal}>{controlledValue}</Tag>  // editInputVisible 激活后 children 更新不生效",
+            "right": "// 用 key 或在 tagChange 回调中维护 state：\nconst [val, setVal] = useState(initialValue);\n<Tag editable tagChange={setVal}>{val}</Tag>  // 父组件维护 val，但注意切换编辑时仍取最新 children 作初始值"
+        },
+        {
+            "issue": "非预设色（hex/rgb/'gray' 等）走 tinycolor 渲染，TS 不报错但无完整 hover/active CSS",
+            "wrong": "color='gray'  // TS 接受（string 类型），但没有专门 CSS，只有 tinycolor 0.1 alpha 背景",
+            "right": "// 预设色（有完整 CSS）：color='blue' | 'green' | 'yellow' | 'red'\n// 非预设色自定义（通用渲染）：color='#808080'  // 接受但无专门 hover/active 样式"
+        },
+        {
+            "issue": "closable 半受控行为：未传 visible 时 onClose 自动隐藏；传了 visible 则需父组件主动响应 onClose",
+            "wrong": "// 传了 visible 但不响应 onClose：\n<Tag closable visible={isVisible} onClose={() => {}}>文本</Tag>  // 点关闭后 Tag 不隐藏",
+            "right": "// 受控：onClose 更新父组件 state\n<Tag closable visible={isVisible} onClose={() => setIsVisible(false)}>文本</Tag>"
+        }
+    ],
+    "mapping": {
+        "realComponent": "Tag",
+        "adapter": null
+    }
+}

package/lib/Tag/index.css

@@ -1 +1 @@
-@charset "UTF-8";.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid rgb(92,101,115)}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid rgb(46,101,230)}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid rgb(19,191,76)}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid rgb(255,147,38)}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid rgb(244,66,66)}.paraui-v4-tag-edit-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag{vertical-align:bottom;display:inline-flex;justify-content:center;align-items:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;color:#1d2126;white-space:nowrap;background:#eaecf1;border-radius:2px;line-height:18px}.paraui-v4-tag .tag-custom-icon:hover{background:none!important;cursor:default}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-small{height:20px;font-size:12px;padding:0 6px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{color:inherit;font-size:16px}.paraui-v4-tag .tag-edit-icon{color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:#2e65e61a}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:#13bf4c1a}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:#ff93261a}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:#f442421a}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;align-items:center;flex-flow:row wrap}.paraui-v4-tag-group .tag-group-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed rgb(212,218,227)}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none!important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}
+@charset "UTF-8";.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid rgb(92,101,115)}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid rgb(46,101,230)}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid rgb(19,191,76)}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid rgb(255,147,38)}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid rgb(244,66,66)}.paraui-v4-tag-edit-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag{display:inline-flex;align-items:center;justify-content:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;line-height:18px;color:#1d2126;white-space:nowrap;vertical-align:bottom;background:#eaecf1;border-radius:2px}.paraui-v4-tag .tag-custom-icon:hover{cursor:default;background:none!important}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-large{line-height:28px}.paraui-v4-tag.paraui-v4-tag-medium{line-height:24px}.paraui-v4-tag.paraui-v4-tag-small{height:20px;padding:0 6px;font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{font-size:16px;color:inherit}.paraui-v4-tag .tag-edit-icon{font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:#2e65e61a}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:#13bf4c1a}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:#ff93261a}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:#f442421a}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;flex-flow:row wrap;align-items:center}.paraui-v4-tag-group .tag-group-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed rgb(212,218,227)}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none!important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}

package/lib/Tag/index.d.ts

@@ -30,7 +30,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** cls */
     className?: string;
     /** 大小 */
-    size?: 'small' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /** 编辑输入框样式 */
     editInputClassName?: string;
     /** 编辑输入框宽度 */

package/lib/Tag/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),n=require("react");require("../node_modules/@para-ui/icons/SvgIcon/index.js");const le=require("../node_modules/@para-ui/icons/Close/index.js"),ae=require("../node_modules/@para-ui/icons/EditOutline/index.js"),w=require("clsx"),ue=require("./TagGroup.js"),o=require("../GlobalContext/constant.js"),ce=require("../AutoTips/index.js"),p=require("../node_modules/tinycolor2/esm/tinycolor.js"),de=require("../Hooks/useGlobalProps.js");;/* empty css            */const pe=["blue","green","yellow","red"],fe=a=>{const{type:f="normal",className:A,children:r,icon:u,color:t,onClose:G,onEdit:x,getWidth:g,tagChange:h,editInputClassName:F,closeIcon:m,closable:_=!1,editable:C=!1,size:E="larage",maxWidth:B,style:O,visible:R,editInputWidth:z,tipMaxWidth:D,marginBottom:j,marginRight:v,...K}=de.default(a,"TagGroup"),[H,b]=n.useState(!0),[I,$]=n.useState(!1),[y,S]=n.useState(""),[q,J]=n.useState(0),[Q,c]=n.useState(!1),[U,d]=n.useState(!1),X=n.useRef(),i=n.useRef(null);n.useEffect(()=>{"visible"in a&&b(!!R)},[R]),n.useEffect(()=>{if(!i.current)return;const{offsetWidth:e}=i.current;J(e),g&&g(e)},[i,I]),n.useEffect(()=>{typeof r=="string"&&S(r)},[r]);const l=()=>t?pe.includes(t):!1,Y={color:t&&!l()?t:void 0,backgroundColor:t&&!l()?p.default(t).setAlpha(.1).toRgbString():void 0,borderColor:t&&!l()&&f==="outline"?t:void 0,maxWidth:B,marginBottom:j,marginRight:v,...O},M={backgroundColor:Q?p.default(t).setAlpha(.1).toRgbString():void 0,borderRadius:"2px"},Z={backgroundColor:U?p.default(t).setAlpha(.1).toRgbString():void 0,marginRight:r?E==="small"?"2px":"4px":void 0,borderRadius:"2px"},ee=w(`${o.$prefixCls}-tag`,`${o.$prefixCls}-tag-${f}`,`${o.$prefixCls}-tag-${E}`,A,{[`${o.$prefixCls}-tag-has-color`]:t,[`${o.$prefixCls}-tag-hidden`]:!H,[`${o.$prefixCls}-tag-${t}`]:l()}),N=e=>{e.stopPropagation(),G?.(e),c(!1),!e.defaultPrevented&&("visible"in a||b(!1))},P=()=>{c(!0)},k=()=>{c(!1)},T=()=>{d(!0)},W=()=>{d(!1)},te=e=>{e.stopPropagation(),x&&x(e),!e.defaultPrevented&&(d(!1),$(!0))},se=()=>_?m?s.jsxRuntimeExports.jsx("span",{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k,children:m}):s.jsxRuntimeExports.jsx(le.Close,{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k}):null,ne=()=>(C||u)&&s.jsxRuntimeExports.jsx("span",{className:`tag-edit-icon ${u?"tag-custom-icon":""}`,style:Z,onMouseEnter:T,onMouseLeave:W,children:C?s.jsxRuntimeExports.jsx(ae.EditOutline,{onMouseEnter:T,onMouseLeave:W,className:"tag-edit-icon",onClick:te}):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:u})}),oe=e=>{S(e.target.value),h&&h(e.target.value)},L=()=>{$(!1)},re=e=>{(e.keyCode===13||e.which===13)&&L()},ie=()=>{const e=w(`${o.$prefixCls}-tag-edit-input`,F);return s.jsxRuntimeExports.jsx("input",{style:{width:z||q,minWidth:q,marginBottom:j,marginRight:v},type:"text",autoFocus:!0,ref:X,className:e,value:y,onChange:oe,onBlur:L,onKeyDown:re})};return s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:I?ie():s.jsxRuntimeExports.jsxs("span",{...K,className:ee,style:Y,ref:i,children:[ne(),r&&s.jsxRuntimeExports.jsx(ce.default,{tipMaxWidth:D,children:s.jsxRuntimeExports.jsx("span",{className:"tag-text",children:y||r})}),se()]})})},V=fe;exports.TagGroup=ue.default;exports.Tag=V;exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),n=require("react");require("../node_modules/@para-ui/icons/SvgIcon/index.js");const le=require("../node_modules/@para-ui/icons/Close/index.js"),ae=require("../node_modules/@para-ui/icons/EditOutline/index.js"),w=require("clsx"),ue=require("./TagGroup.js"),o=require("../GlobalContext/constant.js"),ce=require("../AutoTips/index.js"),p=require("../node_modules/tinycolor2/esm/tinycolor.js"),de=require("../Hooks/useGlobalProps.js");;/* empty css            */const pe=["blue","green","yellow","red"],fe=a=>{const{type:f="normal",className:A,children:r,icon:u,color:t,onClose:G,onEdit:x,getWidth:g,tagChange:h,editInputClassName:F,closeIcon:m,closable:_=!1,editable:C=!1,size:E="small",maxWidth:B,style:O,visible:R,editInputWidth:z,tipMaxWidth:D,marginBottom:j,marginRight:v,...K}=de.default(a,"TagGroup"),[H,b]=n.useState(!0),[I,$]=n.useState(!1),[y,S]=n.useState(""),[q,J]=n.useState(0),[Q,c]=n.useState(!1),[U,d]=n.useState(!1),X=n.useRef(),i=n.useRef(null);n.useEffect(()=>{"visible"in a&&b(!!R)},[R]),n.useEffect(()=>{if(!i.current)return;const{offsetWidth:e}=i.current;J(e),g&&g(e)},[i,I]),n.useEffect(()=>{typeof r=="string"&&S(r)},[r]);const l=()=>t?pe.includes(t):!1,Y={color:t&&!l()?t:void 0,backgroundColor:t&&!l()?p.default(t).setAlpha(.1).toRgbString():void 0,borderColor:t&&!l()&&f==="outline"?t:void 0,maxWidth:B,marginBottom:j,marginRight:v,...O},M={backgroundColor:Q?p.default(t).setAlpha(.1).toRgbString():void 0,borderRadius:"2px"},Z={backgroundColor:U?p.default(t).setAlpha(.1).toRgbString():void 0,marginRight:r?E==="small"?"2px":"4px":void 0,borderRadius:"2px"},ee=w(`${o.$prefixCls}-tag`,`${o.$prefixCls}-tag-${f}`,`${o.$prefixCls}-tag-${E}`,A,{[`${o.$prefixCls}-tag-has-color`]:t,[`${o.$prefixCls}-tag-hidden`]:!H,[`${o.$prefixCls}-tag-${t}`]:l()}),N=e=>{e.stopPropagation(),G?.(e),c(!1),!e.defaultPrevented&&("visible"in a||b(!1))},P=()=>{c(!0)},k=()=>{c(!1)},T=()=>{d(!0)},W=()=>{d(!1)},te=e=>{e.stopPropagation(),x&&x(e),!e.defaultPrevented&&(d(!1),$(!0))},se=()=>_?m?s.jsxRuntimeExports.jsx("span",{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k,children:m}):s.jsxRuntimeExports.jsx(le.Close,{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k}):null,ne=()=>(C||u)&&s.jsxRuntimeExports.jsx("span",{className:`tag-edit-icon ${u?"tag-custom-icon":""}`,style:Z,onMouseEnter:T,onMouseLeave:W,children:C?s.jsxRuntimeExports.jsx(ae.EditOutline,{onMouseEnter:T,onMouseLeave:W,className:"tag-edit-icon",onClick:te}):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:u})}),oe=e=>{S(e.target.value),h&&h(e.target.value)},L=()=>{$(!1)},re=e=>{(e.keyCode===13||e.which===13)&&L()},ie=()=>{const e=w(`${o.$prefixCls}-tag-edit-input`,F);return s.jsxRuntimeExports.jsx("input",{style:{width:z||q,minWidth:q,marginBottom:j,marginRight:v},type:"text",autoFocus:!0,ref:X,className:e,value:y,onChange:oe,onBlur:L,onKeyDown:re})};return s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:I?ie():s.jsxRuntimeExports.jsxs("span",{...K,className:ee,style:Y,ref:i,children:[ne(),r&&s.jsxRuntimeExports.jsx(ce.default,{tipMaxWidth:D,children:s.jsxRuntimeExports.jsx("span",{className:"tag-text",children:y||r})}),se()]})})},V=fe;exports.TagGroup=ue.default;exports.Tag=V;exports.default=V;
 //# sourceMappingURL=index.js.map

package/lib/Tag/style/index.css

@@ -1 +1 @@
-.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid #5c6573}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid #2e65e6}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid #13bf4c}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid #ff9326}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid #f44242}.paraui-v4-tag-edit-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag{vertical-align:bottom;display:inline-flex;justify-content:center;align-items:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;color:#1d2126;white-space:nowrap;background:#eaecf1;border-radius:2px;line-height:18px}.paraui-v4-tag .tag-custom-icon:hover{background:none !important;cursor:default}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-small{height:20px;font-size:12px;padding:0 6px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{color:inherit;font-size:16px}.paraui-v4-tag .tag-edit-icon{color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:rgba(46,101,230,.1)}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:rgba(19,191,76,.1)}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:rgba(255,147,38,.1)}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:rgba(244,66,66,.1)}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;align-items:center;flex-flow:row wrap}.paraui-v4-tag-group .tag-group-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed #d4dae3}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none !important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}
+.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid #5c6573}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid #2e65e6}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid #13bf4c}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid #ff9326}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid #f44242}.paraui-v4-tag-edit-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag{display:inline-flex;align-items:center;justify-content:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;line-height:18px;color:#1d2126;white-space:nowrap;vertical-align:bottom;background:#eaecf1;border-radius:2px}.paraui-v4-tag .tag-custom-icon:hover{cursor:default;background:none !important}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-large{line-height:28px}.paraui-v4-tag.paraui-v4-tag-medium{line-height:24px}.paraui-v4-tag.paraui-v4-tag-small{height:20px;padding:0 6px;font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{font-size:16px;color:inherit}.paraui-v4-tag .tag-edit-icon{font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:rgba(46,101,230,.1)}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:rgba(19,191,76,.1)}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:rgba(255,147,38,.1)}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:rgba(244,66,66,.1)}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;flex-flow:row wrap;align-items:center}.paraui-v4-tag-group .tag-group-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed #d4dae3}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none !important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}

package/lib/TextEditor/component.json

@@ -0,0 +1,186 @@
+{
+    "name": "TextEditor",
+    "category": "Data Entry",
+    "description": "基于 wangEditor 的富文本编辑器，支持图片/视频上传与自定义工具栏",
+    "semantic": {
+        "intent": [
+            "富文本编辑",
+            "内容创作"
+        ],
+        "useCases": [
+            "文章编辑",
+            "邮件编辑",
+            "公告发布"
+        ],
+        "riskLevel": "normal"
+    },
+    "variants": {
+        "default": {
+            "meaning": "默认样式"
+        }
+    },
+    "states": [
+        "default",
+        "disabled",
+        "readonly"
+    ],
+    "idealProps": {
+        "server": {
+            "type": "string",
+            "required": true,
+            "description": "⚠️ 必传。文件上传服务地址(string 无问号);**即使不上传图片/视频也必须传占位 url(如 /api/noop)**;不传 TS 报错。占位场景安全:仅在用户主动插入图片/视频时才触发上传请求,纯文字编辑不会请求"
+        },
+        "value": {
+            "type": "string",
+            "description": "受控 HTML 字符串(配 onChange)"
+        },
+        "defaultValue": {
+            "type": "string",
+            "description": "非受控初始 HTML 字符串(配 ref 拿值);**也可与 onChange 同时使用监听变化,不互斥**"
+        },
+        "onChange": {
+            "type": "function",
+            "description": "(value: string, text: string) => void 内容变化回调;受控/非受控均可用"
+        },
+        "toolbarKeys": {
+            "type": "array",
+            "description": "完整工具栏菜单白名单(覆盖默认;空数组进入预览模式)。常用 menuKey:bold/italic/underline/bulletedList/numberedList/insertLink/uploadImage;详见 api.ts toolbarKeys 列出的完整 key"
+        },
+        "excludeKeys": {
+            "type": "array",
+            "description": "从默认工具栏排除的菜单 key 数组"
+        },
+        "max": {
+            "type": "number",
+            "description": "纯文本最大字符数"
+        },
+        "label": {
+            "type": "ReactNode",
+            "description": "编辑器顶部标题"
+        },
+        "placeholder": {
+            "type": "string",
+            "default": "请输入内容",
+            "description": "空内容占位文案"
+        },
+        "required": {
+            "type": "boolean",
+            "default": "false",
+            "description": "UI 必填标记"
+        },
+        "readOnly": {
+            "type": "boolean",
+            "default": "false",
+            "description": "只读模式(展示语义)"
+        },
+        "disabled": {
+            "type": "boolean",
+            "default": "false",
+            "description": "禁用模式(权限语义;内部强制 readOnly)"
+        },
+        "uploadImage": {
+            "type": "object",
+            "description": "图片上传配置 Partial<UpLoadImgConfig>"
+        },
+        "in18": {
+            "type": "enum",
+            "values": [
+                "en",
+                "zh-CN"
+            ],
+            "description": "国际化语言。**⚠️ src prop 名是 in18(历史 typo · 实际应为 i18n);写 i18n 不会切换语言也不报错**"
+        }
+    },
+    "do": [
+        "受控模式传 value + onChange 保持内容同步；非受控模式传 defaultValue + ref 拿值",
+        "server 必传：即使纯文字场景也要传占位 URL（如 /api/noop），否则 TS 报错",
+        "用 ref 调用命令式 API（getContent/getText/clearEditor/setContent）而非直接操控 DOM",
+        "toolbarKeys=[] 可切换到预览模式（只读展示，无工具栏），适合详情页展示富文本内容",
+        "in18 属性控制工具栏语言，注意 prop 名是 in18（历史 typo，不是 i18n）",
+        "需要限制字数时用 max 属性（对应 wangEditor maxLength，按纯文本字符数计算）"
+    ],
+    "dont": [
+        "不要同时传 value + defaultValue（受控/非受控不能混用）",
+        "不要忘记 server 属性——即使不上传图片也必须传占位 URL，否则 TS 类型错误",
+        "不要把 onChange 回调中的 value 直接 dangerouslySetInnerHTML 展示——须经 XSS 过滤",
+        "不要在 onBlur/onFocus 中直接操作 editor 实例的 DOM，应通过 IDomEditor 提供的 API",
+        "不要在组件卸载后访问 ref.current（组件内部已在 useEffect cleanup 中 destroy editor）"
+    ],
+    "events": {
+        "onChange": {
+            "signature": "(value: string, text: string) => void",
+            "asyncSupported": false,
+            "examples": [
+                "内容变化时触发：value 是 HTML 字符串（getHtml()），text 是纯文本（getText()）",
+                "受控模式：onChange 中调用 setState 更新 value prop，实现受控回路",
+                "字数统计：用 text.length 而非 value.length（HTML 含标签字符会计入 value.length）"
+            ],
+            "commonMistakes": [
+                "假设 value 参数是纯文本——value 实际是 HTML 字符串，纯文本用第二参 text",
+                "受控模式下不在 onChange 中更新 value prop——导致编辑器内容反复跳回",
+                "初始化时 defaultValue 设置后 onChange 也会触发——内部 valueRef 机制防抖，但需注意初始渲染的 HTML 等价性检查"
+            ]
+        },
+        "onBlur": {
+            "signature": "(editor: IDomEditor) => void",
+            "asyncSupported": false,
+            "examples": [
+                "失焦时触发：editor 是 wangEditor IDomEditor 实例，可通过 editor.getHtml() 获取最新内容",
+                "表单校验场景：在 onBlur 中调用父表单的校验方法",
+                "自动保存：onBlur 时发送草稿保存请求"
+            ],
+            "commonMistakes": [
+                "假设 onBlur 时内容一定与 onChange 最后一次触发一致——如果内容没变 onChange 不触发，onBlur 仍会触发",
+                "在 onBlur 中直接调用 editor.destroy()——组件内部有自己的生命周期管理，外部不要手动销毁"
+            ]
+        },
+        "onFocus": {
+            "signature": "(editor: IDomEditor) => void",
+            "asyncSupported": false,
+            "examples": [
+                "聚焦时触发：editor 是 IDomEditor 实例",
+                "显示字数统计 UI：onFocus 时展示计数条"
+            ],
+            "commonMistakes": [
+                "在 onFocus 中调用 editor.focus() 会造成递归触发——已经聚焦不要再次 focus"
+            ]
+        },
+        "onDestroyed": {
+            "signature": "(editor: IDomEditor) => void",
+            "asyncSupported": false,
+            "examples": [
+                "编辑器实例销毁时触发（组件卸载时内部调用 editor.destroy()）",
+                "用于清理与 editor 实例关联的外部副作用（如自定义菜单注册）"
+            ],
+            "commonMistakes": [
+                "在 onDestroyed 中访问 editor.getHtml()——销毁时内部 editor 状态可能已清空"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "prop 名是 in18 不是 i18n（历史拼写 typo）",
+            "wrong": "// 写 i18n 不报错但不生效\n<TextEditor i18n='en' server='/api/upload' />",
+            "right": "<TextEditor in18='en' server='/api/upload' />  // 注意是 in18，不是 i18n"
+        },
+        {
+            "issue": "server 属性是必填的，即使不上传图片也要传",
+            "wrong": "// 缺少 server 会导致 TS 类型错误 'Property server is missing'\n<TextEditor value={html} onChange={setHtml} />",
+            "right": "<TextEditor value={html} onChange={setHtml} server='/api/upload' />"
+        },
+        {
+            "issue": "useRef 拿 TextEditorRef 类型时需正确声明泛型",
+            "wrong": "const ref = useRef(null); ref.current.getContent(); // ref.current 为 null，TS 报错",
+            "right": "import { TextEditorRef } from '@para-ui/core'; const ref = useRef<TextEditorRef>(null); ref.current?.getContent();"
+        },
+        {
+            "issue": "onChange 第一参是 HTML 字符串不是纯文本",
+            "wrong": "onChange={(value) => setCount(value.length)}  // value.length 包含 HTML 标签字符数",
+            "right": "onChange={(value, text) => setCount(text.length)}  // 用第二参 text 获取纯文本长度"
+        }
+    ],
+    "mapping": {
+        "realComponent": "TextEditor",
+        "adapter": null
+    }
+}

package/lib/TextEditor/index.d.ts

@@ -34,19 +34,19 @@ export interface UpLoadImgConfig {
     /** 5 * 1024(5kb) */
     base64LimitSize: number;
     /** 单个文件上传成功之后 */
-    onSuccess: (file: File, res: any) => void;
+    onSuccess: (file: File, res: unknown) => void;
     /** 单个文件上传失败 */
-    onFailed: (file: File, res: any) => void;
+    onFailed: (file: File, res: unknown) => void;
     /** 上传进度回调 */
     onProgress: (progress: number) => void;
     /** 上传之前触发 */
-    onBeforeUpload: (file: File) => any;
+    onBeforeUpload: (file: File) => unknown;
     /** 上传错误，或者触发 timeout 超时 */
-    onError: (file: File, err: any, res: any) => void;
+    onError: (file: File, err: unknown, res: unknown) => void;
     /** 用户自定义图片上传 */
     customUpload: (file: File, insertFn: InsertFnType) => void;
     /** 用户自定义图片插入 */
-    customInsert: (res: any, insertFn: InsertFnType) => void;
+    customInsert: (res: unknown, insertFn: InsertFnType) => void;
 }
 export type UpLoadVideoConfig = Omit<UpLoadImgConfig, 'base64LimitSize'>;
 export interface TextEditorProps extends HelperTextDetailProps {

package/lib/TextEditor/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../node_modules/@wangeditor/editor/dist/css/style.css');require('./index.css');const o=require("../_virtual/jsx-runtime.js"),t=require("react"),le=require("../Label/index.js"),T=require("@wangeditor/editor-for-react"),ae=require("@wangeditor/editor"),ie=require("../HelperText/index.js"),ce=require("../GlobalContext/constant.js"),de=require("./common.js"),fe=require("@paraview/lib"),me=require("../GlobalContext/useFormatMessage.js"),xe=require("./lang/index.js");;/* empty css            */;/* empty css                                                     */const ge=t.forwardRef((d,S)=>{const N=me.default("TextEditor",xe.default),{style:F,toolbarStyle:H={},editorStyle:$={height:"300px",overflowY:"hidden"},hideErrorDom:M,className:f,error:m,server:x,helperText:_,required:g,labelSign:C,label:u,labelTooltip:s,placeholder:B=N({id:"pleaseEnter"}),onChange:E,onFocus:b,onBlur:p,onDestroyed:v,readOnly:I=!1,autoFocus:L=!1,max:O,in18:l,defaultValue:h,value:n,excludeKeys:w,insertKeys:D,toolbarKeys:a=de.TOOL_BAR_CONFIG,uploadImage:K={base64LimitSize:5*1024*1024,timeout:15*1e3},uploadVideo:V={timeout:15*1e3},disabled:y}=d,i=t.useRef(""),[r,q]=t.useState(null),[P,c]=t.useState(""),[U,k]=t.useState(fe.UUID),[z,A]=t.useState(!1);t.useEffect(()=>{A(a.length<1)},[a]);const G=e=>{b&&b(e)},Y=e=>{p&&p(e)},J=e=>{v&&v(e)},Q=e=>{d.value===void 0&&c(e.getHtml()),i.current!==e.getHtml()&&(i.current=e.getHtml(),E&&E(e.getHtml(),e.getText()))},W={excludeKeys:w,toolbarKeys:a,insertKeys:D},X={placeholder:B,onFocus:G,onBlur:Y,onDestroyed:J,readOnly:I,autoFocus:L,maxLength:O,MENU_CONF:{uploadImage:{...K,server:x},uploadVideo:{...V,server:x}}};t.useEffect(()=>{l&&ae.i18nChangeLanguage(l),k(Math.random().toString(36).slice(-8))},[l]),t.useEffect(()=>{h!==void 0&&c(h)},[]),t.useEffect(()=>{n!==void 0&&c(n),i.current=n||""},[n]),t.useEffect(()=>{y?r?.disable():r?.enable()},[y]);const Z=()=>{if(r)return r.getHtml()},ee=()=>{if(r)return r.getText()},te=()=>{r&&r.clear()},re=e=>{r&&(r.setHtml(e),setTimeout(()=>{r.focus(!0)}))},oe=()=>r;t.useEffect(()=>()=>{r!=null&&(r.destroy(),q(null))},[r]),t.useImperativeHandle(S,()=>({getContent:Z,getText:ee,clearEditor:te,setContent:re,getEditor:oe}));const se=()=>{let e=`${ce.$prefixCls}-text-editor`;return f&&(e+=` ${f}`),m&&(e+=" is-error"),e},ne=t.useMemo(()=>{const e=()=>{let R="text-editor-label";return s&&s.className&&(R+=` ${s.className}`),R};return u?o.jsxRuntimeExports.jsx(le.default,{label:u,required:g,labelSign:C,...s,className:e()}):null},[u,C,g,s]),j=t.useRef(!1),ue=t.useCallback(e=>{j.current||q(e)},[]);return t.useEffect(()=>()=>{j.current=!0},[]),o.jsxRuntimeExports.jsxs("div",{className:se(),style:F,children:[ne,o.jsxRuntimeExports.jsxs("div",{className:`text-editor-content ${z?"preview-mode":""}`,children:[o.jsxRuntimeExports.jsx(T.Toolbar,{editor:r,defaultConfig:W,mode:"default",style:H},U),o.jsxRuntimeExports.jsx(T.Editor,{defaultConfig:X,value:P,onCreated:ue,onChange:Q,mode:"default",style:$})]}),o.jsxRuntimeExports.jsx(ie.default,{className:"text-editor-error-text",error:m,helperText:_,hideErrorDom:M})]})});exports.default=ge;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../node_modules/@wangeditor/editor/dist/css/style.css');require('./index.css');const o=require("../_virtual/jsx-runtime.js"),t=require("react"),le=require("../Label/index.js"),T=require("@wangeditor/editor-for-react"),ae=require("@wangeditor/editor"),ie=require("../HelperText/index.js"),ce=require("../GlobalContext/constant.js"),de=require("./common.js"),fe=require("@snack-kit/lib"),me=require("../GlobalContext/useFormatMessage.js"),xe=require("./lang/index.js");;/* empty css            */;/* empty css                                                     */const ge=t.forwardRef((d,S)=>{const N=me.default("TextEditor",xe.default),{style:F,toolbarStyle:H={},editorStyle:M={height:"300px",overflowY:"hidden"},hideErrorDom:_,className:f,error:m,server:x,helperText:B,required:g,labelSign:C,label:u,labelTooltip:s,placeholder:I=N({id:"pleaseEnter"}),onChange:E,onFocus:b,onBlur:p,onDestroyed:v,readOnly:L=!1,autoFocus:O=!1,max:$,in18:l,defaultValue:h,value:n,excludeKeys:w,insertKeys:D,toolbarKeys:a=de.TOOL_BAR_CONFIG,uploadImage:K={base64LimitSize:5*1024*1024,timeout:15*1e3},uploadVideo:V={timeout:15*1e3},disabled:y}=d,i=t.useRef(""),[r,j]=t.useState(null),[P,c]=t.useState(""),[U,k]=t.useState(fe.UUID),[z,A]=t.useState(!1);t.useEffect(()=>{A(a.length<1)},[a]);const G=e=>{b&&b(e)},Y=e=>{p&&p(e)},J=e=>{v&&v(e)},Q=e=>{d.value===void 0&&c(e.getHtml()),i.current!==e.getHtml()&&(i.current=e.getHtml(),E&&E(e.getHtml(),e.getText()))},W={excludeKeys:w,toolbarKeys:a,insertKeys:D},X={placeholder:I,onFocus:G,onBlur:Y,onDestroyed:J,readOnly:L,autoFocus:O,maxLength:$,MENU_CONF:{uploadImage:{...K,server:x},uploadVideo:{...V,server:x}}};t.useEffect(()=>{l&&ae.i18nChangeLanguage(l),k(Math.random().toString(36).slice(-8))},[l]),t.useEffect(()=>{h!==void 0&&c(h)},[]),t.useEffect(()=>{n!==void 0&&c(n),i.current=n||""},[n]),t.useEffect(()=>{y?r?.disable():r?.enable()},[y]);const Z=()=>{if(r)return r.getHtml()},ee=()=>{if(r)return r.getText()},te=()=>{r&&r.clear()},re=e=>{r&&(r.setHtml(e),setTimeout(()=>{r.focus(!0)}))},oe=()=>r;t.useEffect(()=>()=>{r!=null&&(r.destroy(),j(null))},[r]),t.useImperativeHandle(S,()=>({getContent:Z,getText:ee,clearEditor:te,setContent:re,getEditor:oe}));const se=()=>{let e=`${ce.$prefixCls}-text-editor`;return f&&(e+=` ${f}`),m&&(e+=" is-error"),e},ne=t.useMemo(()=>{const e=()=>{let R="text-editor-label";return s&&s.className&&(R+=` ${s.className}`),R};return u?o.jsxRuntimeExports.jsx(le.default,{label:u,required:g,labelSign:C,...s,className:e()}):null},[u,C,g,s]),q=t.useRef(!1),ue=t.useCallback(e=>{q.current||j(e)},[]);return t.useEffect(()=>()=>{q.current=!0},[]),o.jsxRuntimeExports.jsxs("div",{className:se(),style:F,children:[ne,o.jsxRuntimeExports.jsxs("div",{className:`text-editor-content ${z?"preview-mode":""}`,children:[o.jsxRuntimeExports.jsx(T.Toolbar,{editor:r,defaultConfig:W,mode:"default",style:H},U),o.jsxRuntimeExports.jsx(T.Editor,{defaultConfig:X,value:P,onCreated:ue,onChange:Q,mode:"default",style:M})]}),o.jsxRuntimeExports.jsx(ie.default,{className:"text-editor-error-text",error:m,helperText:B,hideErrorDom:_})]})});exports.default=ge;
 //# sourceMappingURL=index.js.map