@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.
Files changed (90) hide show
  1. package/dist/cjs/components/blur-input/index.js +2 -12
  2. package/dist/cjs/components/{prompt-editor-with-inputs/inputs-picker.js → coze-editor-extensions/extensions/inputs-tree.js} +70 -2
  3. package/dist/cjs/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.js +10 -7
  4. package/dist/cjs/components/coze-editor-extensions/index.js +86 -0
  5. package/dist/cjs/components/display-schema-tree/index.js +2 -2
  6. package/dist/cjs/components/index.js +11 -1
  7. package/dist/cjs/components/json-editor-with-variables/editor.js +10 -6
  8. package/dist/cjs/components/prompt-editor-with-inputs/editor.js +2 -2
  9. package/dist/cjs/components/prompt-editor-with-variables/editor.js +3 -4
  10. package/dist/cjs/components/type-selector/index.js +2 -2
  11. package/dist/cjs/components/variable-selector/index.js +1 -0
  12. package/dist/cjs/components/variable-selector/use-variable-tree.js +1 -2
  13. package/dist/cjs/index.js +10 -1
  14. package/dist/cjs/plugins/json-schema-preset/index.js +3 -13
  15. package/dist/cjs/plugins/json-schema-preset/react.js +50 -0
  16. package/dist/cjs/shared/inject-material/index.js +2 -1
  17. package/dist/esm/components/blur-input/index.mjs +2 -2
  18. package/dist/esm/components/coze-editor-extensions/extensions/inputs-tree.mjs +135 -0
  19. package/dist/esm/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.mjs +10 -7
  20. package/dist/esm/components/coze-editor-extensions/index.mjs +18 -0
  21. package/dist/esm/components/display-schema-tree/index.mjs +1 -1
  22. package/dist/esm/components/index.mjs +2 -1
  23. package/dist/esm/components/json-editor-with-variables/editor.mjs +8 -4
  24. package/dist/esm/components/prompt-editor-with-inputs/editor.mjs +2 -2
  25. package/dist/esm/components/prompt-editor-with-variables/editor.mjs +3 -4
  26. package/dist/esm/components/type-selector/index.mjs +1 -1
  27. package/dist/esm/components/variable-selector/index.mjs +1 -0
  28. package/dist/esm/components/variable-selector/use-variable-tree.mjs +1 -2
  29. package/dist/esm/index.mjs +2 -2
  30. package/dist/esm/plugins/json-schema-preset/index.mjs +3 -13
  31. package/dist/esm/plugins/json-schema-preset/react.mjs +13 -0
  32. package/dist/esm/shared/inject-material/index.mjs +2 -1
  33. package/dist/tsconfig.tsbuildinfo +1 -1
  34. package/dist/types/components/blur-input/index.d.ts +7 -1
  35. package/dist/types/components/{prompt-editor-with-inputs/inputs-picker.d.ts → coze-editor-extensions/extensions/inputs-tree.d.ts} +5 -0
  36. package/dist/types/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.d.ts +3 -1
  37. package/dist/types/components/coze-editor-extensions/index.d.ts +18 -0
  38. package/dist/types/components/display-schema-tree/index.d.ts +1 -1
  39. package/dist/types/components/dynamic-value-input/index.d.ts +3 -1
  40. package/dist/types/components/index.d.ts +1 -0
  41. package/dist/types/components/type-selector/index.d.ts +3 -1
  42. package/dist/types/components/variable-selector/index.d.ts +4 -2
  43. package/dist/types/index.d.ts +1 -1
  44. package/dist/types/plugins/json-schema-preset/index.d.ts +3 -7
  45. package/dist/types/plugins/json-schema-preset/react.d.ts +11 -0
  46. package/dist/types/shared/inject-material/index.d.ts +6 -4
  47. package/dist/types/validate/validate-flow-value/index.d.ts +1 -1
  48. package/package.json +51 -12
  49. package/src/components/blur-input/index.tsx +9 -1
  50. package/src/components/{prompt-editor-with-inputs/inputs-picker.tsx → coze-editor-extensions/extensions/inputs-tree.tsx} +95 -5
  51. package/src/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.tsx +9 -3
  52. package/src/components/coze-editor-extensions/index.tsx +33 -0
  53. package/src/components/display-schema-tree/index.tsx +6 -4
  54. package/src/components/index.ts +5 -0
  55. package/src/components/json-editor-with-variables/editor.tsx +4 -4
  56. package/src/components/prompt-editor-with-inputs/editor.tsx +2 -3
  57. package/src/components/prompt-editor-with-variables/editor.tsx +3 -5
  58. package/src/components/type-selector/index.tsx +2 -3
  59. package/src/components/variable-selector/index.tsx +4 -2
  60. package/src/components/variable-selector/use-variable-tree.tsx +7 -4
  61. package/src/index.ts +3 -0
  62. package/src/plugins/json-schema-preset/index.tsx +4 -20
  63. package/src/plugins/json-schema-preset/react.tsx +28 -0
  64. package/src/shared/inject-material/index.tsx +10 -6
  65. package/src/validate/validate-flow-value/index.tsx +1 -2
  66. package/dist/cjs/components/json-editor-with-variables/extensions/variable-tree.js +0 -97
  67. package/dist/cjs/components/prompt-editor-with-inputs/extensions/inputs-tree.js +0 -101
  68. package/dist/cjs/components/prompt-editor-with-variables/extensions/variable-tag.js +0 -151
  69. package/dist/cjs/components/prompt-editor-with-variables/styles.js +0 -89
  70. package/dist/esm/components/json-editor-with-variables/extensions/variable-tree.mjs +0 -63
  71. package/dist/esm/components/prompt-editor-with-inputs/extensions/inputs-tree.mjs +0 -67
  72. package/dist/esm/components/prompt-editor-with-inputs/inputs-picker.mjs +0 -70
  73. package/dist/esm/components/prompt-editor-with-variables/extensions/variable-tag.mjs +0 -117
  74. package/dist/esm/components/prompt-editor-with-variables/styles.mjs +0 -36
  75. package/dist/types/components/json-editor-with-variables/extensions/variable-tree.d.ts +0 -6
  76. package/dist/types/components/prompt-editor-with-inputs/extensions/inputs-tree.d.ts +0 -9
  77. package/dist/types/components/prompt-editor-with-variables/extensions/variable-tag.d.ts +0 -5
  78. package/dist/types/components/prompt-editor-with-variables/styles.d.ts +0 -9
  79. package/src/components/json-editor-with-variables/extensions/variable-tree.tsx +0 -83
  80. package/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx +0 -94
  81. package/src/components/prompt-editor-with-variables/extensions/variable-tag.tsx +0 -174
  82. package/src/components/prompt-editor-with-variables/styles.tsx +0 -44
  83. /package/dist/cjs/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.js +0 -0
  84. /package/dist/cjs/components/{json-editor-with-variables → coze-editor-extensions}/styles.js +0 -0
  85. /package/dist/esm/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.mjs +0 -0
  86. /package/dist/esm/components/{json-editor-with-variables → coze-editor-extensions}/styles.mjs +0 -0
  87. /package/dist/types/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.d.ts +0 -0
  88. /package/dist/types/components/{json-editor-with-variables → coze-editor-extensions}/styles.d.ts +0 -0
  89. /package/src/components/{json-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.tsx +0 -0
  90. /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 };