@flowgram.ai/form-materials 0.4.10 → 0.4.12
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/dist/cjs/components/blur-input/index.js +2 -12
- package/dist/cjs/components/{prompt-editor-with-inputs/inputs-picker.js → coze-editor-extensions/extensions/inputs-tree.js} +70 -2
- package/dist/cjs/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.js +10 -7
- package/dist/cjs/components/coze-editor-extensions/index.js +86 -0
- package/dist/cjs/components/display-schema-tree/index.js +2 -2
- package/dist/cjs/components/index.js +11 -1
- package/dist/cjs/components/json-editor-with-variables/editor.js +10 -6
- package/dist/cjs/components/prompt-editor-with-inputs/editor.js +2 -2
- package/dist/cjs/components/prompt-editor-with-variables/editor.js +3 -4
- package/dist/cjs/components/type-selector/index.js +2 -2
- package/dist/cjs/components/variable-selector/index.js +1 -0
- package/dist/cjs/components/variable-selector/use-variable-tree.js +1 -2
- package/dist/cjs/index.js +10 -1
- package/dist/cjs/plugins/json-schema-preset/index.js +3 -13
- package/dist/cjs/plugins/json-schema-preset/react.js +50 -0
- package/dist/cjs/shared/inject-material/index.js +2 -1
- package/dist/esm/components/blur-input/index.mjs +2 -2
- package/dist/esm/components/coze-editor-extensions/extensions/inputs-tree.mjs +135 -0
- package/dist/esm/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.mjs +10 -7
- package/dist/esm/components/coze-editor-extensions/index.mjs +18 -0
- package/dist/esm/components/display-schema-tree/index.mjs +1 -1
- package/dist/esm/components/index.mjs +2 -1
- package/dist/esm/components/json-editor-with-variables/editor.mjs +8 -4
- package/dist/esm/components/prompt-editor-with-inputs/editor.mjs +2 -2
- package/dist/esm/components/prompt-editor-with-variables/editor.mjs +3 -4
- package/dist/esm/components/type-selector/index.mjs +1 -1
- package/dist/esm/components/variable-selector/index.mjs +1 -0
- package/dist/esm/components/variable-selector/use-variable-tree.mjs +1 -2
- package/dist/esm/index.mjs +2 -2
- package/dist/esm/plugins/json-schema-preset/index.mjs +3 -13
- package/dist/esm/plugins/json-schema-preset/react.mjs +13 -0
- package/dist/esm/shared/inject-material/index.mjs +2 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/blur-input/index.d.ts +7 -1
- package/dist/types/components/{prompt-editor-with-inputs/inputs-picker.d.ts → coze-editor-extensions/extensions/inputs-tree.d.ts} +5 -0
- package/dist/types/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.d.ts +3 -1
- package/dist/types/components/coze-editor-extensions/index.d.ts +18 -0
- package/dist/types/components/display-schema-tree/index.d.ts +1 -1
- package/dist/types/components/dynamic-value-input/index.d.ts +3 -1
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/type-selector/index.d.ts +3 -1
- package/dist/types/components/variable-selector/index.d.ts +4 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/plugins/json-schema-preset/index.d.ts +3 -7
- package/dist/types/plugins/json-schema-preset/react.d.ts +11 -0
- package/dist/types/shared/inject-material/index.d.ts +6 -4
- package/dist/types/validate/validate-flow-value/index.d.ts +1 -1
- package/package.json +51 -12
- package/src/components/blur-input/index.tsx +9 -1
- package/src/components/{prompt-editor-with-inputs/inputs-picker.tsx → coze-editor-extensions/extensions/inputs-tree.tsx} +95 -5
- package/src/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.tsx +9 -3
- package/src/components/coze-editor-extensions/index.tsx +33 -0
- package/src/components/display-schema-tree/index.tsx +6 -4
- package/src/components/index.ts +5 -0
- package/src/components/json-editor-with-variables/editor.tsx +4 -4
- package/src/components/prompt-editor-with-inputs/editor.tsx +2 -3
- package/src/components/prompt-editor-with-variables/editor.tsx +3 -5
- package/src/components/type-selector/index.tsx +2 -3
- package/src/components/variable-selector/index.tsx +4 -2
- package/src/components/variable-selector/use-variable-tree.tsx +7 -4
- package/src/index.ts +3 -0
- package/src/plugins/json-schema-preset/index.tsx +4 -20
- package/src/plugins/json-schema-preset/react.tsx +28 -0
- package/src/shared/inject-material/index.tsx +10 -6
- package/src/validate/validate-flow-value/index.tsx +1 -2
- package/dist/cjs/components/json-editor-with-variables/extensions/variable-tree.js +0 -97
- package/dist/cjs/components/prompt-editor-with-inputs/extensions/inputs-tree.js +0 -101
- package/dist/cjs/components/prompt-editor-with-variables/extensions/variable-tag.js +0 -151
- package/dist/cjs/components/prompt-editor-with-variables/styles.js +0 -89
- package/dist/esm/components/json-editor-with-variables/extensions/variable-tree.mjs +0 -63
- package/dist/esm/components/prompt-editor-with-inputs/extensions/inputs-tree.mjs +0 -67
- package/dist/esm/components/prompt-editor-with-inputs/inputs-picker.mjs +0 -70
- package/dist/esm/components/prompt-editor-with-variables/extensions/variable-tag.mjs +0 -117
- package/dist/esm/components/prompt-editor-with-variables/styles.mjs +0 -36
- package/dist/types/components/json-editor-with-variables/extensions/variable-tree.d.ts +0 -6
- package/dist/types/components/prompt-editor-with-inputs/extensions/inputs-tree.d.ts +0 -9
- package/dist/types/components/prompt-editor-with-variables/extensions/variable-tag.d.ts +0 -5
- package/dist/types/components/prompt-editor-with-variables/styles.d.ts +0 -9
- package/src/components/json-editor-with-variables/extensions/variable-tree.tsx +0 -83
- package/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx +0 -94
- package/src/components/prompt-editor-with-variables/extensions/variable-tag.tsx +0 -174
- package/src/components/prompt-editor-with-variables/styles.tsx +0 -44
- /package/dist/cjs/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.js +0 -0
- /package/dist/cjs/components/{json-editor-with-variables → coze-editor-extensions}/styles.js +0 -0
- /package/dist/esm/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.mjs +0 -0
- /package/dist/esm/components/{json-editor-with-variables → coze-editor-extensions}/styles.mjs +0 -0
- /package/dist/types/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.d.ts +0 -0
- /package/dist/types/components/{json-editor-with-variables → coze-editor-extensions}/styles.d.ts +0 -0
- /package/src/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.tsx +0 -0
- /package/src/components/{json-editor-with-variables → coze-editor-extensions}/styles.tsx +0 -0
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
-
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: definition[key]
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
})();
|
|
11
|
-
(()=>{
|
|
12
|
-
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
-
})();
|
|
14
|
-
(()=>{
|
|
15
|
-
__webpack_require__.r = (exports1)=>{
|
|
16
|
-
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
-
value: 'Module'
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
-
value: true
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
})();
|
|
24
|
-
var __webpack_exports__ = {};
|
|
25
|
-
__webpack_require__.r(__webpack_exports__);
|
|
26
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
VariableTree: ()=>VariableTree
|
|
28
|
-
});
|
|
29
|
-
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
-
const external_react_namespaceObject = require("react");
|
|
31
|
-
const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
|
|
32
|
-
const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
|
|
33
|
-
const index_js_namespaceObject = require("../../variable-selector/index.js");
|
|
34
|
-
function VariableTree() {
|
|
35
|
-
const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
|
|
36
|
-
const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
|
|
37
|
-
const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
|
|
38
|
-
const editor = (0, react_namespaceObject.useEditor)();
|
|
39
|
-
function insert(variablePath) {
|
|
40
|
-
const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
|
|
41
|
-
if (!range) return;
|
|
42
|
-
editor.replaceText({
|
|
43
|
-
...range,
|
|
44
|
-
text: '{{' + variablePath + '}}'
|
|
45
|
-
});
|
|
46
|
-
setVisible(false);
|
|
47
|
-
}
|
|
48
|
-
function handleOpenChange(e) {
|
|
49
|
-
setPosition(e.state.selection.main.head);
|
|
50
|
-
setVisible(e.value);
|
|
51
|
-
}
|
|
52
|
-
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
53
|
-
if (!editor) return;
|
|
54
|
-
}, [
|
|
55
|
-
editor,
|
|
56
|
-
visible
|
|
57
|
-
]);
|
|
58
|
-
const treeData = (0, index_js_namespaceObject.useVariableTree)({});
|
|
59
|
-
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
60
|
-
children: [
|
|
61
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
|
|
62
|
-
triggerCharacters: [
|
|
63
|
-
'@'
|
|
64
|
-
],
|
|
65
|
-
onOpenChange: handleOpenChange
|
|
66
|
-
}),
|
|
67
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
|
|
68
|
-
visible: visible,
|
|
69
|
-
trigger: "custom",
|
|
70
|
-
position: "topLeft",
|
|
71
|
-
rePosKey: posKey,
|
|
72
|
-
content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
73
|
-
style: {
|
|
74
|
-
width: 300
|
|
75
|
-
},
|
|
76
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
|
|
77
|
-
treeData: treeData,
|
|
78
|
-
onSelect: (v)=>{
|
|
79
|
-
insert(v);
|
|
80
|
-
}
|
|
81
|
-
})
|
|
82
|
-
}),
|
|
83
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
|
|
84
|
-
position: position,
|
|
85
|
-
onChange: ()=>setPosKey(String(Math.random()))
|
|
86
|
-
})
|
|
87
|
-
})
|
|
88
|
-
]
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
exports.VariableTree = __webpack_exports__.VariableTree;
|
|
92
|
-
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
93
|
-
"VariableTree"
|
|
94
|
-
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
95
|
-
Object.defineProperty(exports, '__esModule', {
|
|
96
|
-
value: true
|
|
97
|
-
});
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
-
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: definition[key]
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
})();
|
|
11
|
-
(()=>{
|
|
12
|
-
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
-
})();
|
|
14
|
-
(()=>{
|
|
15
|
-
__webpack_require__.r = (exports1)=>{
|
|
16
|
-
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
-
value: 'Module'
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
-
value: true
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
})();
|
|
24
|
-
var __webpack_exports__ = {};
|
|
25
|
-
__webpack_require__.r(__webpack_exports__);
|
|
26
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
InputsTree: ()=>InputsTree
|
|
28
|
-
});
|
|
29
|
-
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
-
const external_react_namespaceObject = require("react");
|
|
31
|
-
const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
|
|
32
|
-
const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
|
|
33
|
-
const external_inputs_picker_js_namespaceObject = require("../inputs-picker.js");
|
|
34
|
-
function InputsTree({ inputsValues }) {
|
|
35
|
-
const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
|
|
36
|
-
const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
|
|
37
|
-
const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
|
|
38
|
-
const editor = (0, react_namespaceObject.useEditor)();
|
|
39
|
-
function insert(variablePath) {
|
|
40
|
-
const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
|
|
41
|
-
if (!range) return;
|
|
42
|
-
let { from, to } = range;
|
|
43
|
-
while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
|
|
44
|
-
while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
|
|
45
|
-
editor.replaceText({
|
|
46
|
-
...range,
|
|
47
|
-
text: '{{' + variablePath + '}}'
|
|
48
|
-
});
|
|
49
|
-
setVisible(false);
|
|
50
|
-
}
|
|
51
|
-
function handleOpenChange(e) {
|
|
52
|
-
setPosition(e.state.selection.main.head);
|
|
53
|
-
setVisible(e.value);
|
|
54
|
-
}
|
|
55
|
-
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
56
|
-
if (!editor) return;
|
|
57
|
-
}, [
|
|
58
|
-
editor,
|
|
59
|
-
visible
|
|
60
|
-
]);
|
|
61
|
-
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
62
|
-
children: [
|
|
63
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
|
|
64
|
-
triggerCharacters: [
|
|
65
|
-
'{',
|
|
66
|
-
'{}',
|
|
67
|
-
'@'
|
|
68
|
-
],
|
|
69
|
-
onOpenChange: handleOpenChange
|
|
70
|
-
}),
|
|
71
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
|
|
72
|
-
visible: visible,
|
|
73
|
-
trigger: "custom",
|
|
74
|
-
position: "topLeft",
|
|
75
|
-
rePosKey: posKey,
|
|
76
|
-
content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
77
|
-
style: {
|
|
78
|
-
width: 300
|
|
79
|
-
},
|
|
80
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_inputs_picker_js_namespaceObject.InputsPicker, {
|
|
81
|
-
inputsValues: inputsValues,
|
|
82
|
-
onSelect: (v)=>{
|
|
83
|
-
insert(v);
|
|
84
|
-
}
|
|
85
|
-
})
|
|
86
|
-
}),
|
|
87
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
|
|
88
|
-
position: position,
|
|
89
|
-
onChange: ()=>setPosKey(String(Math.random()))
|
|
90
|
-
})
|
|
91
|
-
})
|
|
92
|
-
]
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
exports.InputsTree = __webpack_exports__.InputsTree;
|
|
96
|
-
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
97
|
-
"InputsTree"
|
|
98
|
-
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
99
|
-
Object.defineProperty(exports, '__esModule', {
|
|
100
|
-
value: true
|
|
101
|
-
});
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
-
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: definition[key]
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
})();
|
|
11
|
-
(()=>{
|
|
12
|
-
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
-
})();
|
|
14
|
-
(()=>{
|
|
15
|
-
__webpack_require__.r = (exports1)=>{
|
|
16
|
-
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
-
value: 'Module'
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
-
value: true
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
})();
|
|
24
|
-
var __webpack_exports__ = {};
|
|
25
|
-
__webpack_require__.r(__webpack_exports__);
|
|
26
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
VariableTagInject: ()=>VariableTagInject
|
|
28
|
-
});
|
|
29
|
-
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
-
const external_react_namespaceObject = require("react");
|
|
31
|
-
const external_lodash_es_namespaceObject = require("lodash-es");
|
|
32
|
-
const editor_namespaceObject = require("@flowgram.ai/editor");
|
|
33
|
-
const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
|
|
34
|
-
const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
|
|
35
|
-
const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
|
|
36
|
-
const view_namespaceObject = require("@codemirror/view");
|
|
37
|
-
const index_js_namespaceObject = require("../../../shared/index.js");
|
|
38
|
-
const external_styles_js_namespaceObject = require("../styles.js");
|
|
39
|
-
class VariableTagWidget extends view_namespaceObject.WidgetType {
|
|
40
|
-
constructor({ keyPath, scope }){
|
|
41
|
-
super(), this.toDispose = new editor_namespaceObject.DisposableCollection(), this.renderIcon = (icon)=>{
|
|
42
|
-
if ('string' == typeof icon) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
|
|
43
|
-
style: {
|
|
44
|
-
marginRight: 8
|
|
45
|
-
},
|
|
46
|
-
width: 12,
|
|
47
|
-
height: 12,
|
|
48
|
-
src: icon
|
|
49
|
-
});
|
|
50
|
-
return icon;
|
|
51
|
-
};
|
|
52
|
-
this.keyPath = keyPath;
|
|
53
|
-
this.scope = scope;
|
|
54
|
-
}
|
|
55
|
-
renderVariable(v) {
|
|
56
|
-
if (!v) return void this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITag, {
|
|
57
|
-
prefixIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconIssueStroked, {}),
|
|
58
|
-
color: "amber",
|
|
59
|
-
children: "Unknown"
|
|
60
|
-
}));
|
|
61
|
-
const rootField = (0, external_lodash_es_namespaceObject.last)(v.parentFields);
|
|
62
|
-
const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRootTitle, {
|
|
63
|
-
children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
|
|
64
|
-
});
|
|
65
|
-
const rootIcon = this.renderIcon(rootField?.meta.icon);
|
|
66
|
-
this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
|
|
67
|
-
content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIPopoverContent, {
|
|
68
|
-
children: [
|
|
69
|
-
rootIcon,
|
|
70
|
-
rootTitle,
|
|
71
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
|
|
72
|
-
children: v?.keyPath.slice(1).join('.')
|
|
73
|
-
})
|
|
74
|
-
]
|
|
75
|
-
}),
|
|
76
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITag, {
|
|
77
|
-
prefixIcon: rootIcon,
|
|
78
|
-
children: [
|
|
79
|
-
rootTitle,
|
|
80
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
|
|
81
|
-
children: v?.key
|
|
82
|
-
})
|
|
83
|
-
]
|
|
84
|
-
})
|
|
85
|
-
}));
|
|
86
|
-
}
|
|
87
|
-
toDOM(view) {
|
|
88
|
-
const dom = document.createElement('span');
|
|
89
|
-
this.root = (0, index_js_namespaceObject.polyfillCreateRoot)(dom);
|
|
90
|
-
this.toDispose.push(editor_namespaceObject.Disposable.create(()=>{
|
|
91
|
-
this.root.unmount();
|
|
92
|
-
}));
|
|
93
|
-
this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
|
|
94
|
-
this.renderVariable(v);
|
|
95
|
-
}, {
|
|
96
|
-
triggerOnInit: false
|
|
97
|
-
}));
|
|
98
|
-
this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
|
|
99
|
-
return dom;
|
|
100
|
-
}
|
|
101
|
-
eq(other) {
|
|
102
|
-
return (0, external_lodash_es_namespaceObject.isEqual)(this.keyPath, other.keyPath);
|
|
103
|
-
}
|
|
104
|
-
ignoreEvent() {
|
|
105
|
-
return false;
|
|
106
|
-
}
|
|
107
|
-
destroy(dom) {
|
|
108
|
-
this.toDispose.dispose();
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
function VariableTagInject() {
|
|
112
|
-
const injector = (0, react_namespaceObject.useInjector)();
|
|
113
|
-
const scope = (0, editor_namespaceObject.useCurrentScope)();
|
|
114
|
-
(0, external_react_namespaceObject.useLayoutEffect)(()=>{
|
|
115
|
-
const atMatcher = new view_namespaceObject.MatchDecorator({
|
|
116
|
-
regexp: /\{\{([^\}\{]+)\}\}/g,
|
|
117
|
-
decoration: (match)=>view_namespaceObject.Decoration.replace({
|
|
118
|
-
widget: new VariableTagWidget({
|
|
119
|
-
keyPath: match[1]?.split('.') ?? [],
|
|
120
|
-
scope
|
|
121
|
-
})
|
|
122
|
-
})
|
|
123
|
-
});
|
|
124
|
-
return injector.inject([
|
|
125
|
-
view_namespaceObject.ViewPlugin.fromClass(class {
|
|
126
|
-
constructor(view){
|
|
127
|
-
this.view = view;
|
|
128
|
-
this.decorations = atMatcher.createDeco(view);
|
|
129
|
-
}
|
|
130
|
-
update() {
|
|
131
|
-
this.decorations = atMatcher.createDeco(this.view);
|
|
132
|
-
}
|
|
133
|
-
}, {
|
|
134
|
-
decorations: (p)=>p.decorations,
|
|
135
|
-
provide (p) {
|
|
136
|
-
return view_namespaceObject.EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? view_namespaceObject.Decoration.none);
|
|
137
|
-
}
|
|
138
|
-
})
|
|
139
|
-
]);
|
|
140
|
-
}, [
|
|
141
|
-
injector
|
|
142
|
-
]);
|
|
143
|
-
return null;
|
|
144
|
-
}
|
|
145
|
-
exports.VariableTagInject = __webpack_exports__.VariableTagInject;
|
|
146
|
-
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
147
|
-
"VariableTagInject"
|
|
148
|
-
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
149
|
-
Object.defineProperty(exports, '__esModule', {
|
|
150
|
-
value: true
|
|
151
|
-
});
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.n = (module)=>{
|
|
5
|
-
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
6
|
-
__webpack_require__.d(getter, {
|
|
7
|
-
a: getter
|
|
8
|
-
});
|
|
9
|
-
return getter;
|
|
10
|
-
};
|
|
11
|
-
})();
|
|
12
|
-
(()=>{
|
|
13
|
-
__webpack_require__.d = (exports1, definition)=>{
|
|
14
|
-
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: definition[key]
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
|
-
})();
|
|
20
|
-
(()=>{
|
|
21
|
-
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
22
|
-
})();
|
|
23
|
-
(()=>{
|
|
24
|
-
__webpack_require__.r = (exports1)=>{
|
|
25
|
-
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
26
|
-
value: 'Module'
|
|
27
|
-
});
|
|
28
|
-
Object.defineProperty(exports1, '__esModule', {
|
|
29
|
-
value: true
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
})();
|
|
33
|
-
var __webpack_exports__ = {};
|
|
34
|
-
__webpack_require__.r(__webpack_exports__);
|
|
35
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
36
|
-
UIRootTitle: ()=>UIRootTitle,
|
|
37
|
-
UIPopoverContent: ()=>UIPopoverContent,
|
|
38
|
-
UIVarName: ()=>UIVarName,
|
|
39
|
-
UITag: ()=>UITag
|
|
40
|
-
});
|
|
41
|
-
const external_styled_components_namespaceObject = require("styled-components");
|
|
42
|
-
var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
|
|
43
|
-
const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
|
|
44
|
-
const UIRootTitle = external_styled_components_default().div`
|
|
45
|
-
margin-right: 4px;
|
|
46
|
-
min-width: 20px;
|
|
47
|
-
overflow: hidden;
|
|
48
|
-
text-overflow: ellipsis;
|
|
49
|
-
white-space: nowrap;
|
|
50
|
-
color: var(--semi-color-text-2);
|
|
51
|
-
`;
|
|
52
|
-
const UIVarName = external_styled_components_default().div`
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
text-overflow: ellipsis;
|
|
55
|
-
white-space: nowrap;
|
|
56
|
-
`;
|
|
57
|
-
const UITag = external_styled_components_default()(semi_ui_namespaceObject.Tag)`
|
|
58
|
-
display: inline-flex;
|
|
59
|
-
align-items: center;
|
|
60
|
-
justify-content: flex-start;
|
|
61
|
-
max-width: 300px;
|
|
62
|
-
|
|
63
|
-
& .semi-tag-content-center {
|
|
64
|
-
justify-content: flex-start;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&.semi-tag {
|
|
68
|
-
margin: 0 5px;
|
|
69
|
-
}
|
|
70
|
-
`;
|
|
71
|
-
const UIPopoverContent = external_styled_components_default().div`
|
|
72
|
-
padding: 10px;
|
|
73
|
-
display: inline-flex;
|
|
74
|
-
align-items: center;
|
|
75
|
-
justify-content: flex-start;
|
|
76
|
-
`;
|
|
77
|
-
exports.UIPopoverContent = __webpack_exports__.UIPopoverContent;
|
|
78
|
-
exports.UIRootTitle = __webpack_exports__.UIRootTitle;
|
|
79
|
-
exports.UITag = __webpack_exports__.UITag;
|
|
80
|
-
exports.UIVarName = __webpack_exports__.UIVarName;
|
|
81
|
-
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
82
|
-
"UIPopoverContent",
|
|
83
|
-
"UIRootTitle",
|
|
84
|
-
"UITag",
|
|
85
|
-
"UIVarName"
|
|
86
|
-
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
87
|
-
Object.defineProperty(exports, '__esModule', {
|
|
88
|
-
value: true
|
|
89
|
-
});
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
|
|
4
|
-
import { Popover, Tree } from "@douyinfe/semi-ui";
|
|
5
|
-
import { useVariableTree } from "../../variable-selector/index.mjs";
|
|
6
|
-
function VariableTree() {
|
|
7
|
-
const [posKey, setPosKey] = useState('');
|
|
8
|
-
const [visible, setVisible] = useState(false);
|
|
9
|
-
const [position, setPosition] = useState(-1);
|
|
10
|
-
const editor = useEditor();
|
|
11
|
-
function insert(variablePath) {
|
|
12
|
-
const range = getCurrentMentionReplaceRange(editor.$view.state);
|
|
13
|
-
if (!range) return;
|
|
14
|
-
editor.replaceText({
|
|
15
|
-
...range,
|
|
16
|
-
text: '{{' + variablePath + '}}'
|
|
17
|
-
});
|
|
18
|
-
setVisible(false);
|
|
19
|
-
}
|
|
20
|
-
function handleOpenChange(e) {
|
|
21
|
-
setPosition(e.state.selection.main.head);
|
|
22
|
-
setVisible(e.value);
|
|
23
|
-
}
|
|
24
|
-
useEffect(()=>{
|
|
25
|
-
if (!editor) return;
|
|
26
|
-
}, [
|
|
27
|
-
editor,
|
|
28
|
-
visible
|
|
29
|
-
]);
|
|
30
|
-
const treeData = useVariableTree({});
|
|
31
|
-
return /*#__PURE__*/ jsxs(Fragment, {
|
|
32
|
-
children: [
|
|
33
|
-
/*#__PURE__*/ jsx(Mention, {
|
|
34
|
-
triggerCharacters: [
|
|
35
|
-
'@'
|
|
36
|
-
],
|
|
37
|
-
onOpenChange: handleOpenChange
|
|
38
|
-
}),
|
|
39
|
-
/*#__PURE__*/ jsx(Popover, {
|
|
40
|
-
visible: visible,
|
|
41
|
-
trigger: "custom",
|
|
42
|
-
position: "topLeft",
|
|
43
|
-
rePosKey: posKey,
|
|
44
|
-
content: /*#__PURE__*/ jsx("div", {
|
|
45
|
-
style: {
|
|
46
|
-
width: 300
|
|
47
|
-
},
|
|
48
|
-
children: /*#__PURE__*/ jsx(Tree, {
|
|
49
|
-
treeData: treeData,
|
|
50
|
-
onSelect: (v)=>{
|
|
51
|
-
insert(v);
|
|
52
|
-
}
|
|
53
|
-
})
|
|
54
|
-
}),
|
|
55
|
-
children: /*#__PURE__*/ jsx(PositionMirror, {
|
|
56
|
-
position: position,
|
|
57
|
-
onChange: ()=>setPosKey(String(Math.random()))
|
|
58
|
-
})
|
|
59
|
-
})
|
|
60
|
-
]
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
export { VariableTree };
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
|
|
4
|
-
import { Popover } from "@douyinfe/semi-ui";
|
|
5
|
-
import { InputsPicker } from "../inputs-picker.mjs";
|
|
6
|
-
function InputsTree({ inputsValues }) {
|
|
7
|
-
const [posKey, setPosKey] = useState('');
|
|
8
|
-
const [visible, setVisible] = useState(false);
|
|
9
|
-
const [position, setPosition] = useState(-1);
|
|
10
|
-
const editor = useEditor();
|
|
11
|
-
function insert(variablePath) {
|
|
12
|
-
const range = getCurrentMentionReplaceRange(editor.$view.state);
|
|
13
|
-
if (!range) return;
|
|
14
|
-
let { from, to } = range;
|
|
15
|
-
while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
|
|
16
|
-
while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
|
|
17
|
-
editor.replaceText({
|
|
18
|
-
...range,
|
|
19
|
-
text: '{{' + variablePath + '}}'
|
|
20
|
-
});
|
|
21
|
-
setVisible(false);
|
|
22
|
-
}
|
|
23
|
-
function handleOpenChange(e) {
|
|
24
|
-
setPosition(e.state.selection.main.head);
|
|
25
|
-
setVisible(e.value);
|
|
26
|
-
}
|
|
27
|
-
useEffect(()=>{
|
|
28
|
-
if (!editor) return;
|
|
29
|
-
}, [
|
|
30
|
-
editor,
|
|
31
|
-
visible
|
|
32
|
-
]);
|
|
33
|
-
return /*#__PURE__*/ jsxs(Fragment, {
|
|
34
|
-
children: [
|
|
35
|
-
/*#__PURE__*/ jsx(Mention, {
|
|
36
|
-
triggerCharacters: [
|
|
37
|
-
'{',
|
|
38
|
-
'{}',
|
|
39
|
-
'@'
|
|
40
|
-
],
|
|
41
|
-
onOpenChange: handleOpenChange
|
|
42
|
-
}),
|
|
43
|
-
/*#__PURE__*/ jsx(Popover, {
|
|
44
|
-
visible: visible,
|
|
45
|
-
trigger: "custom",
|
|
46
|
-
position: "topLeft",
|
|
47
|
-
rePosKey: posKey,
|
|
48
|
-
content: /*#__PURE__*/ jsx("div", {
|
|
49
|
-
style: {
|
|
50
|
-
width: 300
|
|
51
|
-
},
|
|
52
|
-
children: /*#__PURE__*/ jsx(InputsPicker, {
|
|
53
|
-
inputsValues: inputsValues,
|
|
54
|
-
onSelect: (v)=>{
|
|
55
|
-
insert(v);
|
|
56
|
-
}
|
|
57
|
-
})
|
|
58
|
-
}),
|
|
59
|
-
children: /*#__PURE__*/ jsx(PositionMirror, {
|
|
60
|
-
position: position,
|
|
61
|
-
onChange: ()=>setPosKey(String(Math.random()))
|
|
62
|
-
})
|
|
63
|
-
})
|
|
64
|
-
]
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
export { InputsTree };
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from "react";
|
|
3
|
-
import { isPlainObject, last } from "lodash-es";
|
|
4
|
-
import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
|
|
5
|
-
import { Tree } from "@douyinfe/semi-ui";
|
|
6
|
-
import { FlowValueUtils } from "../../shared/index.mjs";
|
|
7
|
-
function InputsPicker({ inputsValues, onSelect }) {
|
|
8
|
-
const available = useScopeAvailable();
|
|
9
|
-
const getArrayDrilldown = (type, depth = 1)=>{
|
|
10
|
-
if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
|
|
11
|
-
return {
|
|
12
|
-
type: type.items,
|
|
13
|
-
depth: depth
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
const renderVariable = (variable, keyPath)=>{
|
|
17
|
-
let type = variable?.type;
|
|
18
|
-
let children;
|
|
19
|
-
if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
|
|
20
|
-
...keyPath,
|
|
21
|
-
_property.key
|
|
22
|
-
])).filter(Boolean);
|
|
23
|
-
if (ASTMatch.isArray(type)) {
|
|
24
|
-
const drilldown = getArrayDrilldown(type);
|
|
25
|
-
if (ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
|
|
26
|
-
...keyPath,
|
|
27
|
-
...new Array(drilldown.depth).fill('[0]'),
|
|
28
|
-
_property.key
|
|
29
|
-
])).filter(Boolean);
|
|
30
|
-
}
|
|
31
|
-
const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
|
|
32
|
-
return {
|
|
33
|
-
key: key,
|
|
34
|
-
label: last(keyPath),
|
|
35
|
-
value: key,
|
|
36
|
-
children
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
const getTreeData = (value, keyPath)=>{
|
|
40
|
-
const currKey = keyPath.join('.');
|
|
41
|
-
if (FlowValueUtils.isFlowValue(value)) {
|
|
42
|
-
if (FlowValueUtils.isRef(value)) {
|
|
43
|
-
const variable = available.getByKeyPath(value.content || []);
|
|
44
|
-
if (variable) return renderVariable(variable, keyPath);
|
|
45
|
-
}
|
|
46
|
-
return {
|
|
47
|
-
key: currKey,
|
|
48
|
-
value: currKey,
|
|
49
|
-
label: last(keyPath)
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
if (isPlainObject(value)) return {
|
|
53
|
-
key: currKey,
|
|
54
|
-
value: currKey,
|
|
55
|
-
label: last(keyPath),
|
|
56
|
-
children: Object.entries(value).map(([key, value])=>getTreeData(value, [
|
|
57
|
-
...keyPath,
|
|
58
|
-
key
|
|
59
|
-
])).filter(Boolean)
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
const treeData = useMemo(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
|
|
63
|
-
key
|
|
64
|
-
])).filter(Boolean), []);
|
|
65
|
-
return /*#__PURE__*/ jsx(Tree, {
|
|
66
|
-
treeData: treeData,
|
|
67
|
-
onSelect: (v)=>onSelect(v)
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
export { InputsPicker };
|