cosmic-ai-input 1.0.0 → 1.0.3
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.
- package/README.md +68 -129
- package/dist/index.cjs.js +3 -3
- package/dist/index.es.js +45 -36
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install cosmic-ai-input
|
|
9
|
+
|
|
9
10
|
pnpm install cosmic-ai-input
|
|
10
11
|
```
|
|
11
12
|
|
|
@@ -23,11 +24,6 @@ pnpm install cosmic-ai-input
|
|
|
23
24
|
|
|
24
25
|
**重要：** 使用本组件时，必须手动导入样式文件，否则组件将没有样式。
|
|
25
26
|
|
|
26
|
-
```css
|
|
27
|
-
/* 在你的全局 CSS 文件中导入 */
|
|
28
|
-
@import 'cosmic-ai-input/dist/style.css';
|
|
29
|
-
```
|
|
30
|
-
|
|
31
27
|
## 使用方法
|
|
32
28
|
|
|
33
29
|
### ES 模块环境
|
|
@@ -36,7 +32,7 @@ pnpm install cosmic-ai-input
|
|
|
36
32
|
import React, { useRef } from 'react';
|
|
37
33
|
import { AiInput } from 'cosmic-ai-input';
|
|
38
34
|
// 导入样式（推荐方法）
|
|
39
|
-
import 'cosmic-ai-input/
|
|
35
|
+
import 'cosmic-ai-input/dist/style.css';
|
|
40
36
|
|
|
41
37
|
const App = () => {
|
|
42
38
|
const aiInputRef = useRef(null);
|
|
@@ -46,27 +42,27 @@ const App = () => {
|
|
|
46
42
|
type: 'input',
|
|
47
43
|
name: 'name',
|
|
48
44
|
content: '',
|
|
49
|
-
|
|
45
|
+
placeholder: 'Your name'
|
|
50
46
|
},
|
|
51
47
|
{
|
|
52
48
|
type: 'select',
|
|
53
49
|
name: 'gender',
|
|
54
50
|
content: '',
|
|
55
|
-
|
|
51
|
+
placeholder: 'Select gender',
|
|
56
52
|
options: ['Male', 'Female', 'Other']
|
|
57
53
|
},
|
|
58
54
|
{
|
|
59
55
|
type: 'multiple-select',
|
|
60
56
|
name: 'hobbies',
|
|
61
57
|
content: '',
|
|
62
|
-
|
|
58
|
+
placeholder: 'Select hobbies',
|
|
63
59
|
options: ['Reading', 'Sports', 'Music', 'Travel']
|
|
64
60
|
},
|
|
65
61
|
{
|
|
66
62
|
type: 'date-picker',
|
|
67
63
|
name: 'birthday',
|
|
68
64
|
content: '',
|
|
69
|
-
|
|
65
|
+
placeholder: 'Select birthday'
|
|
70
66
|
}
|
|
71
67
|
];
|
|
72
68
|
|
|
@@ -89,7 +85,7 @@ const App = () => {
|
|
|
89
85
|
ref={aiInputRef}
|
|
90
86
|
varList={varList}
|
|
91
87
|
value="你好 [name]，你的性别是 [gender]，爱好是 [hobbies]，生日是 [birthday]"
|
|
92
|
-
|
|
88
|
+
placeholder="在这里输入你的消息..."
|
|
93
89
|
onSend={handleSend}
|
|
94
90
|
/>
|
|
95
91
|
<button onClick={handleGetValue}>获取当前值</button>
|
|
@@ -100,145 +96,88 @@ const App = () => {
|
|
|
100
96
|
export default App;
|
|
101
97
|
```
|
|
102
98
|
|
|
103
|
-
### CommonJS 环境
|
|
104
|
-
|
|
105
|
-
```jsx
|
|
106
|
-
const React = require('react');
|
|
107
|
-
const { useRef } = React;
|
|
108
|
-
const { AiInput } = require('cosmic-ai-input');
|
|
109
|
-
// 获取样式文件路径
|
|
110
|
-
const styles = require('cosmic-ai-input/styles.cjs');
|
|
111
|
-
|
|
112
|
-
const App = () => {
|
|
113
|
-
const aiInputRef = useRef(null);
|
|
114
|
-
|
|
115
|
-
const varList = [
|
|
116
|
-
{
|
|
117
|
-
type: 'input',
|
|
118
|
-
name: 'name',
|
|
119
|
-
content: '',
|
|
120
|
-
cosmic-ai-input-placeholder: 'Your name'
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
type: 'select',
|
|
124
|
-
name: 'gender',
|
|
125
|
-
content: '',
|
|
126
|
-
cosmic-ai-input-placeholder: 'Select gender',
|
|
127
|
-
options: ['Male', 'Female', 'Other']
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
type: 'multiple-select',
|
|
131
|
-
name: 'hobbies',
|
|
132
|
-
content: '',
|
|
133
|
-
cosmic-ai-input-placeholder: 'Select hobbies',
|
|
134
|
-
options: ['Reading', 'Sports', 'Music', 'Travel']
|
|
135
|
-
},
|
|
136
|
-
{
|
|
137
|
-
type: 'date-picker',
|
|
138
|
-
name: 'birthday',
|
|
139
|
-
content: '',
|
|
140
|
-
cosmic-ai-input-placeholder: 'Select birthday'
|
|
141
|
-
}
|
|
142
|
-
];
|
|
143
|
-
|
|
144
|
-
const handleSend = (value) => {
|
|
145
|
-
console.log('发送的消息:', value);
|
|
146
|
-
// 在这里处理发送逻辑
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
const handleGetValue = () => {
|
|
150
|
-
if (aiInputRef.current) {
|
|
151
|
-
const currentValue = aiInputRef.current.getCurrentValue();
|
|
152
|
-
console.log('当前值:', currentValue);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
return (
|
|
157
|
-
<div>
|
|
158
|
-
{/* 在 HTML 中手动引入样式文件 */}
|
|
159
|
-
<link rel="stylesheet" href={styles.stylePath} />
|
|
160
|
-
|
|
161
|
-
<h1>AI 对话输入组件示例</h1>
|
|
162
|
-
<AiInput
|
|
163
|
-
ref={aiInputRef}
|
|
164
|
-
varList={varList}
|
|
165
|
-
value="你好 [name]，你的性别是 [gender]，爱好是 [hobbies]，生日是 [birthday]"
|
|
166
|
-
cosmic-ai-input-placeholder="在这里输入你的消息..."
|
|
167
|
-
onSend={handleSend}
|
|
168
|
-
/>
|
|
169
|
-
<button onClick={handleGetValue}>获取当前值</button>
|
|
170
|
-
</div>
|
|
171
|
-
);
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
module.exports = App;
|
|
175
|
-
```
|
|
176
|
-
|
|
177
99
|
## API
|
|
178
100
|
|
|
179
101
|
### AiInputProps
|
|
180
102
|
|
|
181
103
|
| 属性 | 类型 | 默认值 | 描述 |
|
|
182
104
|
|------|------|--------|------|
|
|
183
|
-
| value | string | - |
|
|
184
|
-
| varList |
|
|
185
|
-
|
|
|
186
|
-
| maxLength | 1 \| 2 \| 3 \| 4 \| undefined | - |
|
|
187
|
-
| defaultRows | number | 3 |
|
|
188
|
-
| disabled | boolean | false |
|
|
189
|
-
| onParse | (parsedValue: string) => void | - |
|
|
190
|
-
| onSend | (value: string) => void | - |
|
|
191
|
-
| onMaxLengthExceeded | (value: string, maxLength: number) => void | - |
|
|
192
|
-
| onFocus | (e: React.FocusEvent) => void | - |
|
|
193
|
-
| onBlur | (e: React.FocusEvent) => void | - |
|
|
194
|
-
| onChange | (value: string) => void | - |
|
|
195
|
-
| onClick | (e: React.MouseEvent) => void | - |
|
|
196
|
-
| onKeyDown | (e: React.KeyboardEvent) => void | - |
|
|
197
|
-
| onKeyUp | (e: React.KeyboardEvent) => void | - |
|
|
198
|
-
|
|
199
|
-
###
|
|
105
|
+
| value | string | - | 输入框的值，支持使用 `[变量名]` 格式引用变量 |
|
|
106
|
+
| varList | VarItem[] | - | 变量列表，包含输入框、选择框、多选框和日期选择器等 |
|
|
107
|
+
| placeholder | string | '' | 占位符文本 |
|
|
108
|
+
| maxLength | 1 \| 2 \| 3 \| 4 \| undefined | - | 最大行数限制 |
|
|
109
|
+
| defaultRows | number | 3 | 默认显示行数 |
|
|
110
|
+
| disabled | boolean | false | 是否禁用输入框 |
|
|
111
|
+
| onParse | (parsedValue: string) => void | - | 解析输入值时的回调函数 |
|
|
112
|
+
| onSend | (value: string) => void | - | 发送消息时的回调函数 |
|
|
113
|
+
| onMaxLengthExceeded | (value: string, maxLength: number) => void | - | 超过最大长度时的回调函数 |
|
|
114
|
+
| onFocus | (e: React.FocusEvent) => void | - | 获得焦点时的回调函数 |
|
|
115
|
+
| onBlur | (e: React.FocusEvent) => void | - | 失去焦点时的回调函数 |
|
|
116
|
+
| onChange | (value: string) => void | - | 值改变时的回调函数 |
|
|
117
|
+
| onClick | (e: React.MouseEvent) => void | - | 点击时的回调函数 |
|
|
118
|
+
| onKeyDown | (e: React.KeyboardEvent) => void | - | 按键按下时的回调函数 |
|
|
119
|
+
| onKeyUp | (e: React.KeyboardEvent) => void | - | 按键抬起时的回调函数 |
|
|
120
|
+
|
|
121
|
+
### BaseInputItem
|
|
122
|
+
|
|
123
|
+
所有输入项的基础接口：
|
|
200
124
|
|
|
201
125
|
| 属性 | 类型 | 描述 |
|
|
202
126
|
|------|------|------|
|
|
203
|
-
| type |
|
|
204
|
-
| name | string |
|
|
205
|
-
| content | string |
|
|
206
|
-
|
|
|
127
|
+
| type | string | 组件类型 |
|
|
128
|
+
| name | string | 变量名，用于在 value 中引用 |
|
|
129
|
+
| content | string | 初始内容 |
|
|
130
|
+
| placeholder | string | 占位符文本 |
|
|
131
|
+
|
|
132
|
+
### InputItem
|
|
133
|
+
|
|
134
|
+
基础输入项：
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
interface InputItem extends BaseInputItem {
|
|
138
|
+
type: 'input';
|
|
139
|
+
}
|
|
140
|
+
```
|
|
207
141
|
|
|
208
142
|
### SelectItem
|
|
209
143
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
144
|
+
下拉选择项：
|
|
145
|
+
|
|
146
|
+
```typescript
|
|
147
|
+
interface SelectItem extends BaseInputItem {
|
|
148
|
+
type: 'select';
|
|
149
|
+
options: string[]; // 选项列表
|
|
150
|
+
}
|
|
151
|
+
```
|
|
217
152
|
|
|
218
153
|
### MultipleSelectItem
|
|
219
154
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
155
|
+
多选框项：
|
|
156
|
+
|
|
157
|
+
```typescript
|
|
158
|
+
interface MultipleSelectItem extends BaseInputItem {
|
|
159
|
+
type: 'multiple-select';
|
|
160
|
+
options: string[]; // 选项列表
|
|
161
|
+
}
|
|
162
|
+
```
|
|
227
163
|
|
|
228
164
|
### DatePickerItem
|
|
229
165
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
166
|
+
日期选择器项：
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
interface DatePickerItem extends BaseInputItem {
|
|
170
|
+
type: 'date-picker';
|
|
171
|
+
}
|
|
172
|
+
```
|
|
236
173
|
|
|
237
174
|
### AiInputRef
|
|
238
175
|
|
|
176
|
+
通过 ref 可以访问的方法：
|
|
177
|
+
|
|
239
178
|
| 方法 | 类型 | 描述 |
|
|
240
179
|
|------|------|------|
|
|
241
|
-
| getCurrentValue | () => string |
|
|
180
|
+
| getCurrentValue | () => string | 获取当前输入框的值（包含变量替换后的完整文本） |
|
|
242
181
|
|
|
243
182
|
## TypeScript 支持
|
|
244
183
|
|
|
@@ -252,7 +191,7 @@ import React from 'react';
|
|
|
252
191
|
export interface BaseInputItem {
|
|
253
192
|
name: string;
|
|
254
193
|
content: string;
|
|
255
|
-
|
|
194
|
+
placeholder: string;
|
|
256
195
|
}
|
|
257
196
|
|
|
258
197
|
export interface InputItem extends BaseInputItem {
|
|
@@ -278,7 +217,7 @@ export type VarItem = InputItem | SelectItem | MultipleSelectItem | DatePickerIt
|
|
|
278
217
|
export interface AiInputProps {
|
|
279
218
|
value?: string;
|
|
280
219
|
varList: VarItem[];
|
|
281
|
-
|
|
220
|
+
placeholder?: string;
|
|
282
221
|
maxLength?: 1 | 2 | 3 | 4;
|
|
283
222
|
defaultRows?: number;
|
|
284
223
|
disabled?: boolean;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),a=require("react"),Fe=require("classnames"),Oe=require("react-dom"),ae=a.forwardRef(({value:c,position:r,id:s,onChange:h},S)=>{const[
|
|
2
|
-
`);i.forEach((P,Le)=>{P&&n.push({type:"text",content:P,id:`text-${f++}`}),Le<i.length-1&&n.push({type:"newline",id:`newline-${f++}`})})}const
|
|
3
|
-
`);l.forEach((i,P)=>{i&&n.push({type:"text",content:i,id:`text-${f++}`}),P<l.length-1&&n.push({type:"newline",id:`newline-${f++}`})})}return n},z=()=>{var e;(e=M.current)==null||e.setAttribute("contenteditable","true"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),a=require("react"),Fe=require("classnames"),Oe=require("react-dom"),ae=a.forwardRef(({value:c,position:r,id:s,onChange:h},S)=>{const[x,E]=a.useState(!0),m=a.useRef(null),C=a.useRef(null);a.useEffect(()=>{typeof S=="function"?S(m.current):S&&(S.current=m.current)},[S]);const w=d=>{console.log("DatePicker handleChange",d);const N=d.target.value;h==null||h(N,"date-picker")};a.useEffect(()=>{if(C.current)try{setTimeout(()=>{R()},100)}catch(d){console.log("无法自动打开日期选择器，浏览器安全策略限制",d)}},[]);const R=()=>{if(C.current)try{C.current.showPicker()}catch(d){console.log("点击后无法打开日期选择器",d)}},b=d=>{d.stopPropagation(),console.log("DatePicker handleClick",d)};return x?u.jsx("div",{ref:m,id:s,style:{top:(r==null?void 0:r.top)||0,left:(r==null?void 0:r.left)||0},className:"cosmic-ai-input-datePicker",suppressHydrationWarning:!0,children:u.jsx("input",{ref:C,type:"date",value:c||"",onChange:w,onClick:b})}):null});ae.displayName="DatePicker";function X(c){const r=c.textContent||"",s=c.nextSibling;r.length?(s==null||s.setAttribute("style","display: none"),c.style.padding="2px 4px",c.style.borderTopLeftRadius="2px",c.style.borderBottomLeftRadius="2px",c.style.borderTopRightRadius="2px",c.style.borderBottomRightRadius="2px"):(s==null||s.setAttribute("style","display: inline"),c.style.padding="2px 0 2px 4px",c.style.borderTopLeftRadius="2px",c.style.borderBottomLeftRadius="2px",c.style.borderTopRightRadius="0",c.style.borderBottomRightRadius="0")}function L(c){if(c&&c.getAttribute("data-set-type")==="input"){const r=c.children[0];r.setAttribute("contenteditable","true"),requestAnimationFrame(()=>{r.focus()})}}function ie(c){c&&c.getAttribute("data-set-type")==="input"&&c.children[0].setAttribute("contenteditable","false")}function F(c){return c&&c.getAttribute("data-set-type")==="input"}const de=a.forwardRef(({options:c,value:r,position:s,id:h,height:S=37,onChange:x},E)=>{const[m,C]=a.useState(r||""),w=a.useRef(null);a.useEffect(()=>{typeof E=="function"?E(w.current):E&&(E.current=w.current)},[E]);const R=d=>{const N=m.split(",").filter(D=>D)||[];let A="";N.includes(d)?A=N.filter(D=>D!==d).join(","):(console.log("handleOptionClick",N),N.length?A=`${N.join(",")},${d}`:A=d),C(A),x==null||x(A,"multiple-select")},b=m.split(",")||[];return u.jsx("div",{ref:w,className:"cosmic-ai-input-selectFloatElement",id:h,style:{position:"absolute",top:(s==null?void 0:s.top)||0,left:(s==null?void 0:s.left)||0,zIndex:5e3,maxHeight:`${S}px`},children:c.map((d,N)=>u.jsx("div",{className:`selectOption ${b.includes(d)?"selected":""}`,onClick:()=>R(d),children:d},N))})});de.displayName="MultipleSelect";const ue=a.forwardRef(({options:c,value:r,position:s,id:h,height:S=120,onChange:x},E)=>{const[m,C]=a.useState(r||""),w=a.useRef(null);a.useEffect(()=>{typeof E=="function"?E(w.current):E&&(E.current=w.current)},[E]);const R=b=>{C(b),x==null||x(b,"select")};return u.jsx("div",{ref:w,className:"cosmic-ai-input-selectFloatElement",id:h,style:{position:"absolute",top:(s==null?void 0:s.top)||0,left:(s==null?void 0:s.left)||0,zIndex:5e3,maxHeight:`${S}px`},children:c.map((b,d)=>u.jsx("div",{className:`selectOption ${m===b?"selected":""}`,onClick:()=>R(b),children:b},d))})});ue.displayName="Select";function re(c){const r=c instanceof Element?c:document.getElementById(c);return r&&r.children[0].textContent||""}function Me(c,r){const s=c instanceof Element?c:document.getElementById(c);s&&(s.children[0].textContent=r)}function q(c){const r=document.createRange(),s=window.getSelection();if(!s){console.error("无法获取selection对象");return}r.selectNodeContents(c),r.collapse(!0),s.removeAllRanges(),s.addRange(r)}function B(c){const r=document.createRange(),s=window.getSelection();if(!s){console.error("无法获取selection对象");return}r.selectNodeContents(c),r.collapse(!1),s.removeAllRanges(),s.addRange(r)}function G(c){const r=window.getSelection();if(!r||r.rangeCount===0)return 0;const s=r.getRangeAt(0),h=s.cloneRange();return h.selectNodeContents(c),h.setEnd(s.startContainer,s.startOffset),h.toString().length}function $e(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const s=c.getRangeAt(0).startContainer;return s.nodeType===Node.TEXT_NODE?s.parentElement:s.nodeType===Node.ELEMENT_NODE?s:null}function qe(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),s=r.startContainer,h=r.startOffset;return s.nodeType===Node.TEXT_NODE?h>0?s:s.previousSibling:s.nodeType===Node.ELEMENT_NODE?h>0?s.childNodes[h-1]:s.previousSibling:null}function Be(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),s=r.startContainer,h=r.startOffset;return s.nodeType===Node.TEXT_NODE?h<s.length?s:s.nextSibling:s.nodeType===Node.ELEMENT_NODE?h<s.childNodes.length?s.childNodes[h]:s.nextSibling:null}function Ve(c){return c&&!c.getAttribute("data-set-type")}const pe=a.forwardRef((c,r)=>{const{value:s,varList:h,placeholder:S="",maxLength:x,defaultRows:E=3,disabled:m=!1,onFocus:C,onBlur:w,onChange:R,onClick:b,onSend:d,onParse:N,onKeyDown:A,onKeyUp:D,onMaxLengthExceeded:V}=c,[J,He]=a.useState(s||""),[Ke,Q]=a.useState(s||""),[he,Y]=a.useState(""),[H,O]=a.useState(!1),[K,W]=a.useState({top:0,left:0}),[Z,v]=a.useState([]),[_,I]=a.useState(""),[j,ee]=a.useState(null),[te,ne]=a.useState(120),fe=240,ge=240,le=240,oe=276,M=a.useRef(null),y=a.useRef(null),T=a.useRef(null),$=()=>{var e;return((e=M.current)==null?void 0:e.innerText)||""},se=()=>{var e;return((e=M.current)==null?void 0:e.innerHTML)||""},ye=e=>{const n=[];let t=0;const o=/\[([^\]]+)\]/g;let p,f=0;const k=new Set(h.map(g=>g.name));for(;(p=o.exec(e))!==null;){if(p.index>t){const i=e.substring(t,p.index).split(`
|
|
2
|
+
`);i.forEach((P,Le)=>{P&&n.push({type:"text",content:P,id:`text-${f++}`}),Le<i.length-1&&n.push({type:"newline",id:`newline-${f++}`})})}const g=p[1];if(k.has(g)){const l=h.find(i=>i.name===g);(l==null?void 0:l.type)==="input"?n.push({type:"input",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||g,id:`input-${f++}`}):(l==null?void 0:l.type)==="select"?n.push({type:"select",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||g,options:(l==null?void 0:l.options)||[],id:`select-${f++}`}):(l==null?void 0:l.type)==="multiple-select"?n.push({type:"multiple-select",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||g,options:(l==null?void 0:l.options)||[],id:`multiple-select-${f++}`}):(l==null?void 0:l.type)==="date-picker"&&n.push({type:"date-picker",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||g,id:`date-picker-${f++}`})}else n.push({type:"text",content:`[${g}]`,id:`text-${f++}`});t=o.lastIndex}if(t<e.length){const l=e.substring(t).split(`
|
|
3
|
+
`);l.forEach((i,P)=>{i&&n.push({type:"text",content:i,id:`text-${f++}`}),P<l.length-1&&n.push({type:"newline",id:`newline-${f++}`})})}return n},z=()=>{var e;(e=M.current)==null||e.setAttribute("contenteditable","true"),y.current&&(F(y.current)&&y.current.children[0].setAttribute("contenteditable","false"),y.current=null)},xe=e=>{console.log("handleEditorClick",e),b==null||b(e)},Ee=e=>{console.log("handleEditorMouseDown",e),z()},be=e=>{console.log("handleEditorInput",e),Q($()),Y(se()),R==null||R($())},we=e=>{if(e.code==="Enter"&&!e.shiftKey){e.preventDefault();const n=$();console.log("onSend",n,"maxLength:",x,"length:",n.length),x?n.length<=x?d==null||d(n):(console.log("maxLength exceeded",n,x),V==null||V(n,x)):d==null||d(n)}},Ce=e=>{var t;console.log("handleEditorKeyDown",e),A==null||A(e);const n=$e();if(n&&Ve(n)){if(e.code==="ArrowLeft"){const o=n==null?void 0:n.previousElementSibling,p=G(n);o&&p===0&&F(o)&&o.children[0]&&(y.current=o,L(o),requestAnimationFrame(()=>{B(o.children[0])}))}if(e.code==="ArrowRight"){const o=n==null?void 0:n.nextElementSibling,p=G(n);o&&p===((t=n.textContent)==null?void 0:t.length)&&F(o)&&o.children[0]&&(y.current=o,L(o),requestAnimationFrame(()=>{q(o.children[0])}))}}if(n&&n.getAttribute("data-set-type")==="container"){if(e.code==="ArrowLeft"){const o=qe();F(o)&&o.children[0]&&(y.current=o,L(o),requestAnimationFrame(()=>{B(o.children[0])}))}if(e.code==="ArrowRight"){const o=Be();F(o)&&o.children[0]&&(y.current=o,L(o),requestAnimationFrame(()=>{q(o.children[0])}))}}we(e)},Re=e=>{console.log("handleEditorKeyUp",e),D==null||D(e)},Ae=(e,n)=>{n.stopPropagation(),console.log("handleInputClick",e)},Se=(e,n)=>{var o;n.stopPropagation(),console.log("handleInputMouseDown",e,n),y.current&&ie(y.current),(o=M.current)==null||o.setAttribute("contenteditable","false");const t=document.getElementById(e.id);y.current=t,requestAnimationFrame(()=>{L(t)})},ke=(e,n)=>{var p,f,k,g,l;console.log("handleInputKeyDown",e,n),A==null||A(n),n.stopPropagation();const t=n.target,o=G(t);if(n.code==="Backspace"&&o===0){const i=(p=t.parentElement)==null?void 0:p.previousElementSibling;console.log("previousElement",i),i&&(F(i)&&i.children[0]&&((f=i.children[0].textContent)!=null&&f.length)?(y.current=i,L(i),B(i.children[0]),requestAnimationFrame(()=>{X(i.children[0])})):(z(),B(i)))}if(n.code==="ArrowRight"&&o===((k=t.textContent)==null?void 0:k.length)){const i=(g=t.parentElement)==null?void 0:g.nextElementSibling;console.log("nextElement",i),i&&(F(i)&&i.children[0]&&((l=i.children[0].textContent)!=null&&l.length)?(y.current=i,L(i),q(i.children[0]),requestAnimationFrame(()=>{X(i.children[0])})):(z(),q(i)))}},me=(e,n)=>{console.log("handleInputKeyUp",e,n),D==null||D(n);const t=n.target;X(t)},Ne=(e,n)=>{var o;n.stopPropagation(),console.log("handlePlaceholderMouseDown",e),y.current&&ie(y.current),(o=M.current)==null||o.setAttribute("contenteditable","false");const t=document.getElementById(e.id);y.current=t,requestAnimationFrame(()=>{L(t)})},De=(e,n)=>{console.log("handleInputChange",e,n),Q($()),Y(se()),R==null||R($())},Te=(e,n)=>{console.log("handleTextSpanKeyDown 不生效",e,n)};a.useEffect(()=>{if(!H)return;const e=o=>{T.current&&!T.current.contains(o.target)&&O(!1)},n=o=>{T.current&&!T.current.contains(o.target)&&O(!1)},t=()=>{O(!1)};return document.addEventListener("mousedown",e),document.addEventListener("scroll",n,!0),window.addEventListener("resize",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("scroll",n,!0),window.removeEventListener("resize",t)}},[H]);const U=(e,n)=>{if(console.log("handleFloatChange",e,n),j&&Me(j.id,e),n==="select"&&O(!1),n==="multiple-select"||n==="date-picker"){const t=document.getElementById(j.id);t&&t.children[0]&&t.children[1]&&(e.length>0?(t.children[0].setAttribute("style","display: inline"),t.children[0].setAttribute("contenteditable","false"),t.children[1].setAttribute("style","display: none"),t.children[1].setAttribute("contenteditable","true")):(t.children[0].setAttribute("style","display: none"),t.children[0].setAttribute("contenteditable","true"),t.children[1].setAttribute("style","display: inline"),t.children[1].setAttribute("contenteditable","true")))}},ce=(e,n)=>{console.log("handleSelectClick",e,n);const o=n.target.getBoundingClientRect();v(e.options),I(e.value||re(e.id)),W({top:-999999,left:-999999999}),ee(e),ne(ge),O(!0),requestAnimationFrame(()=>{if(T.current){console.log("currentFloatElementRef.current",T.current);const p=T.current.getBoundingClientRect();let f=o.left,k=o.top+o.height;window.innerWidth-o.right<fe&&o.width<p.width&&(f=o.right-p.width),o.top<p.height&&(k=o.top+o.height),W({top:k,left:f}),ne(p.height)}})},je=(e,n)=>{console.log("handleDatePickerClick",e,n);const o=n.target.getBoundingClientRect();let p=o.left,f=o.top-oe;window.innerWidth-o.right<le&&(p=p-le+o.width),o.top<oe&&(f=o.top+o.height),v(e.options),I(e.value||re(e.id)),W({top:f,left:p}),ee(e),O(!0)},Pe=()=>{const e=ye(J);console.log("parsed",e);const n=[];return e.forEach(t=>{var o,p,f,k,g,l;if(t.type==="text")n.push(u.jsx("span",{onKeyDown:i=>Te(t,i),children:t.content},t.id));else if(t.type==="newline")n.push(u.jsx("br",{},t.id));else if(t.type==="input")n.push(u.jsxs("span",{id:t.id,"data-set-type":"input",contentEditable:!1,suppressContentEditableWarning:!0,onInput:i=>De(t,i),onClick:i=>Ae(t,i),onMouseDown:i=>Se(t,i),"data-cosmic-ai-input-placeholder":t.placeholder,children:[u.jsx("span",{className:"cosmic-ai-input-inputContent",style:{padding:(o=t.content)!=null&&o.length?"2px 4px":"2px 0 2px 4px"},contentEditable:!1,onKeyDown:i=>ke(t,i),onKeyUp:i=>me(t,i),children:t.content}),u.jsx("span",{contentEditable:!1,style:{display:(p=t.content)!=null&&p.length?"none":"inline"},className:"cosmic-ai-input-placeholder",onMouseDown:i=>Ne(t,i),children:t.placeholder})]},t.id));else if(t.type==="select"){const i=t.content||((f=t.options)==null?void 0:f[0])||t.placeholder;n.push(u.jsx("span",{id:t.id,"data-set-type":"select",contentEditable:!0,suppressContentEditableWarning:!0,onClick:P=>ce(t,P),"data-cosmic-ai-input-placeholder":t.placeholder,children:u.jsx("span",{contentEditable:!1,children:i})},t.id))}else if(t.type==="multiple-select"){const i=t.content||((k=t.options)==null?void 0:k[0]);n.push(u.jsxs("span",{id:t.id,"data-set-type":"multiple-select",contentEditable:!0,suppressContentEditableWarning:!0,onClick:P=>ce(t,P),"data-cosmic-ai-input-placeholder":t.placeholder,children:[u.jsx("span",{style:{display:i!=null&&i.length?"inline":"none"},contentEditable:!1,children:i}),u.jsx("span",{style:{display:i!=null&&i.length?"none":"inline"},className:"cosmic-ai-input-selectPlaceholder",contentEditable:!1,children:t.placeholder})]},t.id))}else t.type==="date-picker"&&n.push(u.jsxs("span",{id:t.id,"data-set-type":"date-picker",contentEditable:!0,suppressContentEditableWarning:!0,onClick:i=>je(t,i),"data-cosmic-ai-input-placeholder":t.placeholder,children:[u.jsx("span",{style:{display:(g=t.content)!=null&&g.length?"inline":"none"},contentEditable:!1,children:t.content}),u.jsx("span",{style:{display:(l=t.content)!=null&&l.length?"none":"inline"},className:"cosmic-ai-input-datePickerPlaceholder",contentEditable:!1,children:t.placeholder})]},t.id))}),n};return a.useImperativeHandle(r,()=>({getCurrentValue:$})),u.jsxs(u.Fragment,{children:[u.jsx("div",{"data-set-type":"container","data-cosmic-ai-input-placeholder":S,className:Fe("cosmic-ai-input",`cosmic-ai-input-rows${E}`,{"is-disabled":m},{"is-empty":J.length===0||he==="<br>"}),ref:M,contentEditable:!0,suppressContentEditableWarning:!0,onClick:e=>xe(e),onFocus:e=>{C==null||C(e)},onBlur:e=>{w==null||w(e)},onMouseDown:e=>Ee(e),onKeyDown:e=>Ce(e),onKeyUp:e=>Re(e),onInput:e=>be(e),children:Pe()}),H&&Oe.createPortal((j==null?void 0:j.type)==="multiple-select"?u.jsx(de,{ref:T,options:Z,value:_,position:K,height:te,onChange:U},"multiple-select"):(j==null?void 0:j.type)==="date-picker"?u.jsx(ae,{ref:T,value:_,position:K,onChange:U},"date-picker"):u.jsx(ue,{ref:T,options:Z,value:_,position:K,height:te,onChange:U},"select"),document.body)]})});pe.displayName="AiInput";exports.default=pe;
|
package/dist/index.es.js
CHANGED
|
@@ -4,7 +4,7 @@ import He from "classnames";
|
|
|
4
4
|
import { createPortal as qe } from "react-dom";
|
|
5
5
|
const he = _(
|
|
6
6
|
({ value: s, position: r, id: c, onChange: u }, k) => {
|
|
7
|
-
const [
|
|
7
|
+
const [y, E] = A(!0), N = $(null), w = $(null);
|
|
8
8
|
H(() => {
|
|
9
9
|
typeof k == "function" ? k(N.current) : k && (k.current = N.current);
|
|
10
10
|
}, [k]);
|
|
@@ -14,15 +14,15 @@ const he = _(
|
|
|
14
14
|
u == null || u(S, "date-picker");
|
|
15
15
|
};
|
|
16
16
|
H(() => {
|
|
17
|
-
if (w.current
|
|
17
|
+
if (w.current)
|
|
18
18
|
try {
|
|
19
19
|
setTimeout(() => {
|
|
20
20
|
C();
|
|
21
|
-
},
|
|
21
|
+
}, 100);
|
|
22
22
|
} catch (a) {
|
|
23
23
|
console.log("无法自动打开日期选择器，浏览器安全策略限制", a);
|
|
24
24
|
}
|
|
25
|
-
}, [
|
|
25
|
+
}, []);
|
|
26
26
|
const C = () => {
|
|
27
27
|
if (w.current)
|
|
28
28
|
try {
|
|
@@ -33,7 +33,7 @@ const he = _(
|
|
|
33
33
|
}, b = (a) => {
|
|
34
34
|
a.stopPropagation(), console.log("DatePicker handleClick", a);
|
|
35
35
|
};
|
|
36
|
-
return
|
|
36
|
+
return y ? /* @__PURE__ */ h(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
ref: N,
|
|
@@ -44,7 +44,16 @@ const he = _(
|
|
|
44
44
|
},
|
|
45
45
|
className: "cosmic-ai-input-datePicker",
|
|
46
46
|
suppressHydrationWarning: !0,
|
|
47
|
-
children: /* @__PURE__ */ h(
|
|
47
|
+
children: /* @__PURE__ */ h(
|
|
48
|
+
"input",
|
|
49
|
+
{
|
|
50
|
+
ref: w,
|
|
51
|
+
type: "date",
|
|
52
|
+
value: s || "",
|
|
53
|
+
onChange: x,
|
|
54
|
+
onClick: b
|
|
55
|
+
}
|
|
56
|
+
)
|
|
48
57
|
}
|
|
49
58
|
) : null;
|
|
50
59
|
}
|
|
@@ -74,7 +83,7 @@ const fe = _(({
|
|
|
74
83
|
position: c,
|
|
75
84
|
id: u,
|
|
76
85
|
height: k = 37,
|
|
77
|
-
onChange:
|
|
86
|
+
onChange: y
|
|
78
87
|
}, E) => {
|
|
79
88
|
const [N, w] = A(r || ""), x = $(null);
|
|
80
89
|
H(() => {
|
|
@@ -83,7 +92,7 @@ const fe = _(({
|
|
|
83
92
|
const C = (a) => {
|
|
84
93
|
const S = N.split(",").filter((D) => D) || [];
|
|
85
94
|
let m = "";
|
|
86
|
-
S.includes(a) ? m = S.filter((D) => D !== a).join(",") : (console.log("handleOptionClick", S), S.length ? m = `${S.join(",")},${a}` : m = a), w(m),
|
|
95
|
+
S.includes(a) ? m = S.filter((D) => D !== a).join(",") : (console.log("handleOptionClick", S), S.length ? m = `${S.join(",")},${a}` : m = a), w(m), y == null || y(m, "multiple-select");
|
|
87
96
|
}, b = N.split(",") || [];
|
|
88
97
|
return /* @__PURE__ */ h(
|
|
89
98
|
"div",
|
|
@@ -117,14 +126,14 @@ const ge = _(({
|
|
|
117
126
|
position: c,
|
|
118
127
|
id: u,
|
|
119
128
|
height: k = 120,
|
|
120
|
-
onChange:
|
|
129
|
+
onChange: y
|
|
121
130
|
}, E) => {
|
|
122
131
|
const [N, w] = A(r || ""), x = $(null);
|
|
123
132
|
H(() => {
|
|
124
133
|
typeof E == "function" ? E(x.current) : E && (E.current = x.current);
|
|
125
134
|
}, [E]);
|
|
126
135
|
const C = (b) => {
|
|
127
|
-
w(b),
|
|
136
|
+
w(b), y == null || y(b, "select");
|
|
128
137
|
};
|
|
129
138
|
return /* @__PURE__ */ h(
|
|
130
139
|
"div",
|
|
@@ -208,7 +217,7 @@ function je(s) {
|
|
|
208
217
|
return s && !s.getAttribute("data-set-type");
|
|
209
218
|
}
|
|
210
219
|
const Ue = _((s, r) => {
|
|
211
|
-
const { value: c, varList: u, placeholder: k = "", maxLength:
|
|
220
|
+
const { value: c, varList: u, placeholder: k = "", maxLength: y, defaultRows: E = 3, disabled: N = !1, onFocus: w, onBlur: x, onChange: C, onClick: b, onSend: a, onParse: S, onKeyDown: m, onKeyUp: D, onMaxLengthExceeded: z } = s, [I, Xe] = A(c || ""), [Ge, v] = A(c || ""), [ye, ee] = A(""), [j, M] = A(!1), [U, X] = A({ top: 0, left: 0 }), [te, ne] = A([]), [G, le] = A(""), [P, oe] = A(null), [ce, se] = A(120), Ee = 240, be = 240, ie = 240, re = 276, B = $(null), g = $(null), T = $(null), V = () => {
|
|
212
221
|
var e;
|
|
213
222
|
return ((e = B.current) == null ? void 0 : e.innerText) || "";
|
|
214
223
|
}, ae = () => {
|
|
@@ -219,7 +228,7 @@ const Ue = _((s, r) => {
|
|
|
219
228
|
let t = 0;
|
|
220
229
|
const o = /\[([^\]]+)\]/g;
|
|
221
230
|
let d, p = 0;
|
|
222
|
-
const R = new Set(u.map((
|
|
231
|
+
const R = new Set(u.map((f) => f.name));
|
|
223
232
|
for (; (d = o.exec(e)) !== null; ) {
|
|
224
233
|
if (d.index > t) {
|
|
225
234
|
const i = e.substring(t, d.index).split(`
|
|
@@ -235,40 +244,40 @@ const Ue = _((s, r) => {
|
|
|
235
244
|
});
|
|
236
245
|
});
|
|
237
246
|
}
|
|
238
|
-
const
|
|
239
|
-
if (R.has(
|
|
240
|
-
const l = u.find((i) => i.name ===
|
|
247
|
+
const f = d[1];
|
|
248
|
+
if (R.has(f)) {
|
|
249
|
+
const l = u.find((i) => i.name === f);
|
|
241
250
|
(l == null ? void 0 : l.type) === "input" ? n.push({
|
|
242
251
|
type: "input",
|
|
243
252
|
name: l == null ? void 0 : l.name,
|
|
244
253
|
content: (l == null ? void 0 : l.content) || "",
|
|
245
|
-
placeholder: (l == null ? void 0 : l.placeholder) ||
|
|
254
|
+
placeholder: (l == null ? void 0 : l.placeholder) || f,
|
|
246
255
|
id: `input-${p++}`
|
|
247
256
|
}) : (l == null ? void 0 : l.type) === "select" ? n.push({
|
|
248
257
|
type: "select",
|
|
249
258
|
name: l == null ? void 0 : l.name,
|
|
250
259
|
content: (l == null ? void 0 : l.content) || "",
|
|
251
|
-
placeholder: (l == null ? void 0 : l.placeholder) ||
|
|
260
|
+
placeholder: (l == null ? void 0 : l.placeholder) || f,
|
|
252
261
|
options: (l == null ? void 0 : l.options) || [],
|
|
253
262
|
id: `select-${p++}`
|
|
254
263
|
}) : (l == null ? void 0 : l.type) === "multiple-select" ? n.push({
|
|
255
264
|
type: "multiple-select",
|
|
256
265
|
name: l == null ? void 0 : l.name,
|
|
257
266
|
content: (l == null ? void 0 : l.content) || "",
|
|
258
|
-
placeholder: (l == null ? void 0 : l.placeholder) ||
|
|
267
|
+
placeholder: (l == null ? void 0 : l.placeholder) || f,
|
|
259
268
|
options: (l == null ? void 0 : l.options) || [],
|
|
260
269
|
id: `multiple-select-${p++}`
|
|
261
270
|
}) : (l == null ? void 0 : l.type) === "date-picker" && n.push({
|
|
262
271
|
type: "date-picker",
|
|
263
272
|
name: l == null ? void 0 : l.name,
|
|
264
273
|
content: (l == null ? void 0 : l.content) || "",
|
|
265
|
-
placeholder: (l == null ? void 0 : l.placeholder) ||
|
|
274
|
+
placeholder: (l == null ? void 0 : l.placeholder) || f,
|
|
266
275
|
id: `date-picker-${p++}`
|
|
267
276
|
});
|
|
268
277
|
} else
|
|
269
278
|
n.push({
|
|
270
279
|
type: "text",
|
|
271
|
-
content: `[${
|
|
280
|
+
content: `[${f}]`,
|
|
272
281
|
id: `text-${p++}`
|
|
273
282
|
});
|
|
274
283
|
t = o.lastIndex;
|
|
@@ -290,7 +299,7 @@ const Ue = _((s, r) => {
|
|
|
290
299
|
return n;
|
|
291
300
|
}, J = () => {
|
|
292
301
|
var e;
|
|
293
|
-
(e = B.current) == null || e.setAttribute("contenteditable", "true"),
|
|
302
|
+
(e = B.current) == null || e.setAttribute("contenteditable", "true"), g.current && (O(g.current) && g.current.children[0].setAttribute("contenteditable", "false"), g.current = null);
|
|
294
303
|
}, we = (e) => {
|
|
295
304
|
console.log("handleEditorClick", e), b == null || b(e);
|
|
296
305
|
}, Ce = (e) => {
|
|
@@ -301,7 +310,7 @@ const Ue = _((s, r) => {
|
|
|
301
310
|
if (e.code === "Enter" && !e.shiftKey) {
|
|
302
311
|
e.preventDefault();
|
|
303
312
|
const n = V();
|
|
304
|
-
console.log("onSend", n, "maxLength:",
|
|
313
|
+
console.log("onSend", n, "maxLength:", y, "length:", n.length), y ? n.length <= y ? a == null || a(n) : (console.log("maxLength exceeded", n, y), z == null || z(n, y)) : a == null || a(n);
|
|
305
314
|
}
|
|
306
315
|
}, ke = (e) => {
|
|
307
316
|
var t;
|
|
@@ -310,13 +319,13 @@ const Ue = _((s, r) => {
|
|
|
310
319
|
if (n && je(n)) {
|
|
311
320
|
if (e.code === "ArrowLeft") {
|
|
312
321
|
const o = n == null ? void 0 : n.previousElementSibling, d = Z(n);
|
|
313
|
-
o && d === 0 && O(o) && o.children[0] && (
|
|
322
|
+
o && d === 0 && O(o) && o.children[0] && (g.current = o, F(o), requestAnimationFrame(() => {
|
|
314
323
|
W(o.children[0]);
|
|
315
324
|
}));
|
|
316
325
|
}
|
|
317
326
|
if (e.code === "ArrowRight") {
|
|
318
327
|
const o = n == null ? void 0 : n.nextElementSibling, d = Z(n);
|
|
319
|
-
o && d === ((t = n.textContent) == null ? void 0 : t.length) && O(o) && o.children[0] && (
|
|
328
|
+
o && d === ((t = n.textContent) == null ? void 0 : t.length) && O(o) && o.children[0] && (g.current = o, F(o), requestAnimationFrame(() => {
|
|
320
329
|
K(o.children[0]);
|
|
321
330
|
}));
|
|
322
331
|
}
|
|
@@ -324,13 +333,13 @@ const Ue = _((s, r) => {
|
|
|
324
333
|
if (n && n.getAttribute("data-set-type") === "container") {
|
|
325
334
|
if (e.code === "ArrowLeft") {
|
|
326
335
|
const o = _e();
|
|
327
|
-
O(o) && o.children[0] && (
|
|
336
|
+
O(o) && o.children[0] && (g.current = o, F(o), requestAnimationFrame(() => {
|
|
328
337
|
W(o.children[0]);
|
|
329
338
|
}));
|
|
330
339
|
}
|
|
331
340
|
if (e.code === "ArrowRight") {
|
|
332
341
|
const o = ze();
|
|
333
|
-
O(o) && o.children[0] && (
|
|
342
|
+
O(o) && o.children[0] && (g.current = o, F(o), requestAnimationFrame(() => {
|
|
334
343
|
K(o.children[0]);
|
|
335
344
|
}));
|
|
336
345
|
}
|
|
@@ -342,24 +351,24 @@ const Ue = _((s, r) => {
|
|
|
342
351
|
n.stopPropagation(), console.log("handleInputClick", e);
|
|
343
352
|
}, Se = (e, n) => {
|
|
344
353
|
var o;
|
|
345
|
-
n.stopPropagation(), console.log("handleInputMouseDown", e, n),
|
|
354
|
+
n.stopPropagation(), console.log("handleInputMouseDown", e, n), g.current && ue(g.current), (o = B.current) == null || o.setAttribute("contenteditable", "false");
|
|
346
355
|
const t = document.getElementById(e.id);
|
|
347
|
-
|
|
356
|
+
g.current = t, requestAnimationFrame(() => {
|
|
348
357
|
F(t);
|
|
349
358
|
});
|
|
350
359
|
}, De = (e, n) => {
|
|
351
|
-
var d, p, R,
|
|
360
|
+
var d, p, R, f, l;
|
|
352
361
|
console.log("handleInputKeyDown", e, n), m == null || m(n), n.stopPropagation();
|
|
353
362
|
const t = n.target, o = Z(t);
|
|
354
363
|
if (n.code === "Backspace" && o === 0) {
|
|
355
364
|
const i = (d = t.parentElement) == null ? void 0 : d.previousElementSibling;
|
|
356
|
-
console.log("previousElement", i), i && (O(i) && i.children[0] && ((p = i.children[0].textContent) != null && p.length) ? (
|
|
365
|
+
console.log("previousElement", i), i && (O(i) && i.children[0] && ((p = i.children[0].textContent) != null && p.length) ? (g.current = i, F(i), W(i.children[0]), requestAnimationFrame(() => {
|
|
357
366
|
Y(i.children[0]);
|
|
358
367
|
})) : (J(), W(i)));
|
|
359
368
|
}
|
|
360
369
|
if (n.code === "ArrowRight" && o === ((R = t.textContent) == null ? void 0 : R.length)) {
|
|
361
|
-
const i = (
|
|
362
|
-
console.log("nextElement", i), i && (O(i) && i.children[0] && ((l = i.children[0].textContent) != null && l.length) ? (
|
|
370
|
+
const i = (f = t.parentElement) == null ? void 0 : f.nextElementSibling;
|
|
371
|
+
console.log("nextElement", i), i && (O(i) && i.children[0] && ((l = i.children[0].textContent) != null && l.length) ? (g.current = i, F(i), K(i.children[0]), requestAnimationFrame(() => {
|
|
363
372
|
Y(i.children[0]);
|
|
364
373
|
})) : (J(), K(i)));
|
|
365
374
|
}
|
|
@@ -369,9 +378,9 @@ const Ue = _((s, r) => {
|
|
|
369
378
|
Y(t);
|
|
370
379
|
}, Pe = (e, n) => {
|
|
371
380
|
var o;
|
|
372
|
-
n.stopPropagation(), console.log("handlePlaceholderMouseDown", e),
|
|
381
|
+
n.stopPropagation(), console.log("handlePlaceholderMouseDown", e), g.current && ue(g.current), (o = B.current) == null || o.setAttribute("contenteditable", "false");
|
|
373
382
|
const t = document.getElementById(e.id);
|
|
374
|
-
|
|
383
|
+
g.current = t, requestAnimationFrame(() => {
|
|
375
384
|
F(t);
|
|
376
385
|
});
|
|
377
386
|
}, Le = (e, n) => {
|
|
@@ -419,7 +428,7 @@ const Ue = _((s, r) => {
|
|
|
419
428
|
console.log("parsed", e);
|
|
420
429
|
const n = [];
|
|
421
430
|
return e.forEach((t) => {
|
|
422
|
-
var o, d, p, R,
|
|
431
|
+
var o, d, p, R, f, l;
|
|
423
432
|
if (t.type === "text")
|
|
424
433
|
n.push(
|
|
425
434
|
/* @__PURE__ */ h("span", { onKeyDown: (i) => Fe(t, i), children: t.content }, t.id)
|
|
@@ -495,7 +504,7 @@ const Ue = _((s, r) => {
|
|
|
495
504
|
onClick: (i) => Oe(t, i),
|
|
496
505
|
"data-cosmic-ai-input-placeholder": t.placeholder,
|
|
497
506
|
children: [
|
|
498
|
-
/* @__PURE__ */ h("span", { style: { display: (
|
|
507
|
+
/* @__PURE__ */ h("span", { style: { display: (f = t.content) != null && f.length ? "inline" : "none" }, contentEditable: !1, children: t.content }),
|
|
499
508
|
/* @__PURE__ */ h("span", { style: { display: (l = t.content) != null && l.length ? "none" : "inline" }, className: "cosmic-ai-input-datePickerPlaceholder", contentEditable: !1, children: t.placeholder })
|
|
500
509
|
]
|
|
501
510
|
},
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cosmic-ai-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A powerful AI conversation input component for React with TypeScript support",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.es.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
|
-
"private": false,
|
|
8
|
+
"private": false,
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"import": "./dist/index.es.js",
|
|
@@ -30,7 +30,13 @@
|
|
|
30
30
|
"dev": "vite",
|
|
31
31
|
"build": "vite build",
|
|
32
32
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
33
|
-
"prepublishOnly": "npm run build"
|
|
33
|
+
"prepublishOnly": "npm run build",
|
|
34
|
+
"version:patch": "node scripts/bump-version.js patch",
|
|
35
|
+
"version:minor": "node scripts/bump-version.js minor",
|
|
36
|
+
"version:major": "node scripts/bump-version.js major",
|
|
37
|
+
"release:patch": "node scripts/publish.js patch",
|
|
38
|
+
"release:minor": "node scripts/publish.js minor",
|
|
39
|
+
"release:major": "node scripts/publish.js major"
|
|
34
40
|
},
|
|
35
41
|
"keywords": [
|
|
36
42
|
"react",
|