@flowgram.ai/form-materials 0.4.5 → 0.4.7
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/esm/chunk-727SU246.js +13 -0
- package/dist/esm/chunk-727SU246.js.map +1 -0
- package/dist/esm/chunk-DEZUEMUM.js +284 -0
- package/dist/esm/chunk-DEZUEMUM.js.map +1 -0
- package/dist/esm/chunk-MFDEE4HB.js +440 -0
- package/dist/esm/chunk-MFDEE4HB.js.map +1 -0
- package/dist/esm/editor-2YHACGQ2.js +282 -0
- package/dist/esm/editor-2YHACGQ2.js.map +1 -0
- package/dist/esm/editor-6UMULJYB.js +180 -0
- package/dist/esm/editor-6UMULJYB.js.map +1 -0
- package/dist/esm/editor-E2BQTPCD.js +388 -0
- package/dist/esm/editor-E2BQTPCD.js.map +1 -0
- package/dist/esm/editor-G63XGWH2.js +249 -0
- package/dist/esm/editor-G63XGWH2.js.map +1 -0
- package/dist/esm/editor-OXPGKPF5.js +167 -0
- package/dist/esm/editor-OXPGKPF5.js.map +1 -0
- package/dist/esm/index.js +607 -2300
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +141 -51
- package/dist/index.d.ts +141 -51
- package/dist/index.js +3545 -2825
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
- package/src/components/code-editor/editor.tsx +96 -0
- package/src/components/code-editor/index.tsx +5 -89
- package/src/components/code-editor-mini/index.tsx +2 -2
- package/src/components/condition-row/index.tsx +4 -0
- package/src/components/db-condition-row/hooks/use-left.tsx +66 -0
- package/src/components/db-condition-row/hooks/use-op.tsx +59 -0
- package/src/components/db-condition-row/index.tsx +93 -0
- package/src/components/db-condition-row/styles.tsx +43 -0
- package/src/components/db-condition-row/types.ts +34 -0
- package/src/components/display-inputs-values/index.tsx +1 -1
- package/src/components/dynamic-value-input/hooks.ts +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/inputs-values-tree/hooks/use-child-list.tsx +1 -1
- package/src/components/json-editor-with-variables/editor.tsx +69 -0
- package/src/components/json-editor-with-variables/extensions/variable-tag.tsx +1 -1
- package/src/components/json-editor-with-variables/index.tsx +5 -60
- package/src/components/json-schema-editor/hooks.tsx +1 -1
- package/src/components/prompt-editor/editor.tsx +81 -0
- package/src/components/prompt-editor/index.tsx +5 -69
- package/src/components/prompt-editor-with-inputs/editor.tsx +25 -0
- package/src/components/prompt-editor-with-inputs/index.tsx +5 -15
- package/src/components/prompt-editor-with-inputs/inputs-picker.tsx +1 -1
- package/src/components/prompt-editor-with-variables/editor.tsx +22 -0
- package/src/components/prompt-editor-with-variables/extensions/variable-tag.tsx +1 -1
- package/src/components/prompt-editor-with-variables/index.tsx +5 -13
- package/src/effects/validate-when-variable-sync/index.ts +1 -1
- package/src/form-plugins/infer-assign-plugin/index.ts +1 -1
- package/src/form-plugins/infer-inputs-plugin/index.ts +1 -1
- package/src/hooks/use-object-list/index.tsx +1 -1
- package/src/shared/flow-value/utils.ts +1 -1
- package/src/shared/format-legacy-refs/index.ts +1 -1
- package/src/shared/index.ts +1 -0
- package/src/shared/lazy-suspense/index.tsx +28 -0
- package/src/validate/validate-flow-value/index.tsx +1 -1
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CodeEditor,
|
|
3
|
+
useVariableTree
|
|
4
|
+
} from "./chunk-MFDEE4HB.js";
|
|
5
|
+
import {
|
|
6
|
+
polyfillCreateRoot
|
|
7
|
+
} from "./chunk-DEZUEMUM.js";
|
|
8
|
+
|
|
9
|
+
// src/components/json-editor-with-variables/editor.tsx
|
|
10
|
+
import React3 from "react";
|
|
11
|
+
import { I18n } from "@flowgram.ai/editor";
|
|
12
|
+
import { transformerCreator } from "@coze-editor/editor/preset-code";
|
|
13
|
+
|
|
14
|
+
// src/components/json-editor-with-variables/extensions/variable-tree.tsx
|
|
15
|
+
import React, { useEffect, useState } from "react";
|
|
16
|
+
import { Popover, Tree } from "@douyinfe/semi-ui";
|
|
17
|
+
import {
|
|
18
|
+
Mention,
|
|
19
|
+
getCurrentMentionReplaceRange,
|
|
20
|
+
useEditor,
|
|
21
|
+
PositionMirror
|
|
22
|
+
} from "@coze-editor/editor/react";
|
|
23
|
+
function VariableTree() {
|
|
24
|
+
const [posKey, setPosKey] = useState("");
|
|
25
|
+
const [visible, setVisible] = useState(false);
|
|
26
|
+
const [position, setPosition] = useState(-1);
|
|
27
|
+
const editor = useEditor();
|
|
28
|
+
function insert(variablePath) {
|
|
29
|
+
const range = getCurrentMentionReplaceRange(editor.$view.state);
|
|
30
|
+
if (!range) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
editor.replaceText({
|
|
34
|
+
...range,
|
|
35
|
+
text: "{{" + variablePath + "}}"
|
|
36
|
+
});
|
|
37
|
+
setVisible(false);
|
|
38
|
+
}
|
|
39
|
+
function handleOpenChange(e) {
|
|
40
|
+
setPosition(e.state.selection.main.head);
|
|
41
|
+
setVisible(e.value);
|
|
42
|
+
}
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
if (!editor) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
}, [editor, visible]);
|
|
48
|
+
const treeData = useVariableTree({});
|
|
49
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Mention, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React.createElement(
|
|
50
|
+
Popover,
|
|
51
|
+
{
|
|
52
|
+
visible,
|
|
53
|
+
trigger: "custom",
|
|
54
|
+
position: "topLeft",
|
|
55
|
+
rePosKey: posKey,
|
|
56
|
+
content: /* @__PURE__ */ React.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React.createElement(
|
|
57
|
+
Tree,
|
|
58
|
+
{
|
|
59
|
+
treeData,
|
|
60
|
+
onSelect: (v) => {
|
|
61
|
+
insert(v);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
))
|
|
65
|
+
},
|
|
66
|
+
/* @__PURE__ */ React.createElement(
|
|
67
|
+
PositionMirror,
|
|
68
|
+
{
|
|
69
|
+
position,
|
|
70
|
+
onChange: () => setPosKey(String(Math.random()))
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// src/components/json-editor-with-variables/extensions/variable-tag.tsx
|
|
77
|
+
import React2, { useLayoutEffect } from "react";
|
|
78
|
+
import { isEqual, last } from "lodash-es";
|
|
79
|
+
import {
|
|
80
|
+
Disposable,
|
|
81
|
+
DisposableCollection,
|
|
82
|
+
useCurrentScope
|
|
83
|
+
} from "@flowgram.ai/editor";
|
|
84
|
+
import { Popover as Popover2 } from "@douyinfe/semi-ui";
|
|
85
|
+
import { IconIssueStroked } from "@douyinfe/semi-icons";
|
|
86
|
+
import { useInjector } from "@coze-editor/editor/react";
|
|
87
|
+
import {
|
|
88
|
+
Decoration,
|
|
89
|
+
EditorView,
|
|
90
|
+
MatchDecorator,
|
|
91
|
+
ViewPlugin,
|
|
92
|
+
WidgetType
|
|
93
|
+
} from "@codemirror/view";
|
|
94
|
+
|
|
95
|
+
// src/components/json-editor-with-variables/styles.tsx
|
|
96
|
+
import styled from "styled-components";
|
|
97
|
+
import { Tag } from "@douyinfe/semi-ui";
|
|
98
|
+
var UIRootTitle = styled.div`
|
|
99
|
+
margin-right: 4px;
|
|
100
|
+
min-width: 20px;
|
|
101
|
+
overflow: hidden;
|
|
102
|
+
text-overflow: ellipsis;
|
|
103
|
+
white-space: nowrap;
|
|
104
|
+
color: var(--semi-color-text-2);
|
|
105
|
+
`;
|
|
106
|
+
var UIVarName = styled.div`
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
text-overflow: ellipsis;
|
|
109
|
+
white-space: nowrap;
|
|
110
|
+
`;
|
|
111
|
+
var UITag = styled(Tag)`
|
|
112
|
+
display: inline-flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: flex-start;
|
|
115
|
+
max-width: 300px;
|
|
116
|
+
|
|
117
|
+
& .semi-tag-content-center {
|
|
118
|
+
justify-content: flex-start;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&.semi-tag {
|
|
122
|
+
margin: 0 5px;
|
|
123
|
+
}
|
|
124
|
+
`;
|
|
125
|
+
var UIPopoverContent = styled.div`
|
|
126
|
+
padding: 10px;
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: flex-start;
|
|
130
|
+
`;
|
|
131
|
+
|
|
132
|
+
// src/components/json-editor-with-variables/extensions/variable-tag.tsx
|
|
133
|
+
var VariableTagWidget = class extends WidgetType {
|
|
134
|
+
constructor({ keyPath, scope }) {
|
|
135
|
+
super();
|
|
136
|
+
this.toDispose = new DisposableCollection();
|
|
137
|
+
this.renderIcon = (icon) => {
|
|
138
|
+
if (typeof icon === "string") {
|
|
139
|
+
return /* @__PURE__ */ React2.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
|
|
140
|
+
}
|
|
141
|
+
return icon;
|
|
142
|
+
};
|
|
143
|
+
this.keyPath = keyPath;
|
|
144
|
+
this.scope = scope;
|
|
145
|
+
}
|
|
146
|
+
renderVariable(v) {
|
|
147
|
+
if (!v) {
|
|
148
|
+
this.root.render(
|
|
149
|
+
/* @__PURE__ */ React2.createElement(UITag, { prefixIcon: /* @__PURE__ */ React2.createElement(IconIssueStroked, null), color: "amber" }, "Unknown")
|
|
150
|
+
);
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
const rootField = last(v.parentFields);
|
|
154
|
+
const rootTitle = /* @__PURE__ */ React2.createElement(UIRootTitle, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
|
|
155
|
+
const rootIcon = this.renderIcon(rootField?.meta.icon);
|
|
156
|
+
this.root.render(
|
|
157
|
+
/* @__PURE__ */ React2.createElement(
|
|
158
|
+
Popover2,
|
|
159
|
+
{
|
|
160
|
+
content: /* @__PURE__ */ React2.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React2.createElement(UIVarName, null, v?.keyPath.slice(1).join(".")))
|
|
161
|
+
},
|
|
162
|
+
/* @__PURE__ */ React2.createElement(UITag, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React2.createElement(UIVarName, null, v?.key))
|
|
163
|
+
)
|
|
164
|
+
);
|
|
165
|
+
}
|
|
166
|
+
toDOM(view) {
|
|
167
|
+
const dom = document.createElement("span");
|
|
168
|
+
this.root = polyfillCreateRoot(dom);
|
|
169
|
+
this.toDispose.push(
|
|
170
|
+
Disposable.create(() => {
|
|
171
|
+
this.root.unmount();
|
|
172
|
+
})
|
|
173
|
+
);
|
|
174
|
+
this.toDispose.push(
|
|
175
|
+
this.scope.available.trackByKeyPath(
|
|
176
|
+
this.keyPath,
|
|
177
|
+
(v) => {
|
|
178
|
+
this.renderVariable(v);
|
|
179
|
+
},
|
|
180
|
+
{ triggerOnInit: false }
|
|
181
|
+
)
|
|
182
|
+
);
|
|
183
|
+
this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
|
|
184
|
+
return dom;
|
|
185
|
+
}
|
|
186
|
+
eq(other) {
|
|
187
|
+
return isEqual(this.keyPath, other.keyPath);
|
|
188
|
+
}
|
|
189
|
+
ignoreEvent() {
|
|
190
|
+
return false;
|
|
191
|
+
}
|
|
192
|
+
destroy(dom) {
|
|
193
|
+
this.toDispose.dispose();
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
function VariableTagInject() {
|
|
197
|
+
const injector = useInjector();
|
|
198
|
+
const scope = useCurrentScope();
|
|
199
|
+
useLayoutEffect(() => {
|
|
200
|
+
const atMatcher = new MatchDecorator({
|
|
201
|
+
regexp: /\{\{([^\}\{]+)\}\}/g,
|
|
202
|
+
decoration: (match) => Decoration.replace({
|
|
203
|
+
widget: new VariableTagWidget({
|
|
204
|
+
keyPath: match[1]?.split(".") ?? [],
|
|
205
|
+
scope
|
|
206
|
+
})
|
|
207
|
+
})
|
|
208
|
+
});
|
|
209
|
+
return injector.inject([
|
|
210
|
+
ViewPlugin.fromClass(
|
|
211
|
+
class {
|
|
212
|
+
constructor(view) {
|
|
213
|
+
this.view = view;
|
|
214
|
+
this.decorations = atMatcher.createDeco(view);
|
|
215
|
+
}
|
|
216
|
+
update() {
|
|
217
|
+
this.decorations = atMatcher.createDeco(this.view);
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
decorations: (p) => p.decorations,
|
|
222
|
+
provide(p) {
|
|
223
|
+
return EditorView.atomicRanges.of(
|
|
224
|
+
(view) => view.plugin(p)?.decorations ?? Decoration.none
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
)
|
|
229
|
+
]);
|
|
230
|
+
}, [injector]);
|
|
231
|
+
return null;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
// src/components/json-editor-with-variables/editor.tsx
|
|
235
|
+
function findAllMatches(inputString, regex) {
|
|
236
|
+
const globalRegex = new RegExp(
|
|
237
|
+
regex,
|
|
238
|
+
regex.flags.includes("g") ? regex.flags : regex.flags + "g"
|
|
239
|
+
);
|
|
240
|
+
let match;
|
|
241
|
+
const matches = [];
|
|
242
|
+
while ((match = globalRegex.exec(inputString)) !== null) {
|
|
243
|
+
if (match.index === globalRegex.lastIndex) {
|
|
244
|
+
globalRegex.lastIndex++;
|
|
245
|
+
}
|
|
246
|
+
matches.push({
|
|
247
|
+
match: match[0],
|
|
248
|
+
range: [match.index, match.index + match[0].length]
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
return matches;
|
|
252
|
+
}
|
|
253
|
+
var transformer = transformerCreator((text) => {
|
|
254
|
+
const originalSource = text.toString();
|
|
255
|
+
const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
|
|
256
|
+
if (matches.length > 0) {
|
|
257
|
+
matches.forEach(({ range }) => {
|
|
258
|
+
text.replaceRange(range[0], range[1], "null");
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
return text;
|
|
262
|
+
});
|
|
263
|
+
function JsonEditorWithVariables(props) {
|
|
264
|
+
return /* @__PURE__ */ React3.createElement(
|
|
265
|
+
CodeEditor,
|
|
266
|
+
{
|
|
267
|
+
languageId: "json",
|
|
268
|
+
activeLinePlaceholder: I18n.t("Press '@' to Select variable"),
|
|
269
|
+
...props,
|
|
270
|
+
options: {
|
|
271
|
+
transformer,
|
|
272
|
+
...props.options || {}
|
|
273
|
+
}
|
|
274
|
+
},
|
|
275
|
+
/* @__PURE__ */ React3.createElement(VariableTree, null),
|
|
276
|
+
/* @__PURE__ */ React3.createElement(VariableTagInject, null)
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
export {
|
|
280
|
+
JsonEditorWithVariables
|
|
281
|
+
};
|
|
282
|
+
//# sourceMappingURL=editor-2YHACGQ2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/json-editor-with-variables/editor.tsx","../../src/components/json-editor-with-variables/extensions/variable-tree.tsx","../../src/components/json-editor-with-variables/extensions/variable-tag.tsx","../../src/components/json-editor-with-variables/styles.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { I18n } from '@flowgram.ai/editor';\nimport { transformerCreator } from '@coze-editor/editor/preset-code';\nimport { Text } from '@coze-editor/editor/language-json';\n\nimport { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';\n\nimport { VariableTree } from './extensions/variable-tree';\nimport { VariableTagInject } from './extensions/variable-tag';\n\ntype Match = { match: string; range: [number, number] };\nfunction findAllMatches(inputString: string, regex: RegExp): Match[] {\n const globalRegex = new RegExp(\n regex,\n regex.flags.includes('g') ? regex.flags : regex.flags + 'g'\n );\n let match;\n const matches: Match[] = [];\n\n while ((match = globalRegex.exec(inputString)) !== null) {\n if (match.index === globalRegex.lastIndex) {\n globalRegex.lastIndex++;\n }\n matches.push({\n match: match[0],\n range: [match.index, match.index + match[0].length],\n });\n }\n\n return matches;\n}\n\nconst transformer = transformerCreator((text: Text) => {\n const originalSource = text.toString();\n const matches = findAllMatches(originalSource, /\\{\\{([^\\}]*)\\}\\}/g);\n\n if (matches.length > 0) {\n matches.forEach(({ range }) => {\n text.replaceRange(range[0], range[1], 'null');\n });\n }\n\n return text;\n});\n\nexport interface JsonEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}\n\nexport function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {\n return (\n <CodeEditor\n languageId=\"json\"\n activeLinePlaceholder={I18n.t(\"Press '@' to Select variable\")}\n {...props}\n options={{\n transformer,\n ...(props.options || {}),\n }}\n >\n <VariableTree />\n <VariableTagInject />\n </CodeEditor>\n );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useEffect, useState } from 'react';\n\nimport { Popover, Tree } from '@douyinfe/semi-ui';\nimport {\n Mention,\n MentionOpenChangeEvent,\n getCurrentMentionReplaceRange,\n useEditor,\n PositionMirror,\n} from '@coze-editor/editor/react';\nimport { EditorAPI } from '@coze-editor/editor/preset-prompt';\n\nimport { useVariableTree } from '@/components/variable-selector';\n\nexport function VariableTree() {\n const [posKey, setPosKey] = useState('');\n const [visible, setVisible] = useState(false);\n const [position, setPosition] = useState(-1);\n const editor = useEditor<EditorAPI>();\n\n function insert(variablePath: string) {\n const range = getCurrentMentionReplaceRange(editor.$view.state);\n\n if (!range) {\n return;\n }\n\n editor.replaceText({\n ...range,\n text: '{{' + variablePath + '}}',\n });\n\n setVisible(false);\n }\n\n function handleOpenChange(e: MentionOpenChangeEvent) {\n setPosition(e.state.selection.main.head);\n setVisible(e.value);\n }\n\n useEffect(() => {\n if (!editor) {\n return;\n }\n }, [editor, visible]);\n\n const treeData = useVariableTree({});\n\n return (\n <>\n <Mention triggerCharacters={['@']} onOpenChange={handleOpenChange} />\n\n <Popover\n visible={visible}\n trigger=\"custom\"\n position=\"topLeft\"\n rePosKey={posKey}\n content={\n <div style={{ width: 300 }}>\n <Tree\n treeData={treeData}\n onSelect={(v) => {\n insert(v);\n }}\n />\n </div>\n }\n >\n {/* PositionMirror allows the Popover to appear at the specified cursor position */}\n <PositionMirror\n position={position}\n // When Doc scroll, update position\n onChange={() => setPosKey(String(Math.random()))}\n />\n </Popover>\n </>\n );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useLayoutEffect } from 'react';\n\nimport { isEqual, last } from 'lodash-es';\nimport {\n BaseVariableField,\n Disposable,\n DisposableCollection,\n Scope,\n useCurrentScope,\n} from '@flowgram.ai/editor';\nimport { Popover } from '@douyinfe/semi-ui';\nimport { IconIssueStroked } from '@douyinfe/semi-icons';\nimport { useInjector } from '@coze-editor/editor/react';\nimport {\n Decoration,\n DecorationSet,\n EditorView,\n MatchDecorator,\n ViewPlugin,\n WidgetType,\n} from '@codemirror/view';\n\nimport { IPolyfillRoot, polyfillCreateRoot } from '@/shared';\n\nimport { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';\n\nclass VariableTagWidget extends WidgetType {\n keyPath?: string[];\n\n toDispose = new DisposableCollection();\n\n scope: Scope;\n\n root: IPolyfillRoot;\n\n constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {\n super();\n\n this.keyPath = keyPath;\n this.scope = scope;\n }\n\n renderIcon = (icon: string | JSX.Element) => {\n if (typeof icon === 'string') {\n return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;\n }\n\n return icon;\n };\n\n renderVariable(v?: BaseVariableField) {\n if (!v) {\n this.root.render(\n <UITag prefixIcon={<IconIssueStroked />} color=\"amber\">\n Unknown\n </UITag>\n );\n return;\n }\n\n const rootField = last(v.parentFields);\n\n const rootTitle = (\n <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>\n );\n const rootIcon = this.renderIcon(rootField?.meta.icon);\n\n this.root.render(\n <Popover\n content={\n <UIPopoverContent>\n {rootIcon}\n {rootTitle}\n <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>\n </UIPopoverContent>\n }\n >\n <UITag prefixIcon={rootIcon}>\n {rootTitle}\n <UIVarName>{v?.key}</UIVarName>\n </UITag>\n </Popover>\n );\n }\n\n toDOM(view: EditorView): HTMLElement {\n const dom = document.createElement('span');\n\n this.root = polyfillCreateRoot(dom);\n\n this.toDispose.push(\n Disposable.create(() => {\n this.root.unmount();\n })\n );\n\n this.toDispose.push(\n this.scope.available.trackByKeyPath(\n this.keyPath,\n (v) => {\n this.renderVariable(v);\n },\n { triggerOnInit: false }\n )\n );\n\n this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));\n\n return dom;\n }\n\n eq(other: VariableTagWidget) {\n return isEqual(this.keyPath, other.keyPath);\n }\n\n ignoreEvent(): boolean {\n return false;\n }\n\n destroy(dom: HTMLElement): void {\n this.toDispose.dispose();\n }\n}\n\nexport function VariableTagInject() {\n const injector = useInjector();\n\n const scope = useCurrentScope();\n\n // 基于 {{var}} 的正则进行匹配,匹配后进行自定义渲染\n useLayoutEffect(() => {\n const atMatcher = new MatchDecorator({\n regexp: /\\{\\{([^\\}\\{]+)\\}\\}/g,\n decoration: (match) =>\n Decoration.replace({\n widget: new VariableTagWidget({\n keyPath: match[1]?.split('.') ?? [],\n scope,\n }),\n }),\n });\n\n return injector.inject([\n ViewPlugin.fromClass(\n class {\n decorations: DecorationSet;\n\n constructor(private view: EditorView) {\n this.decorations = atMatcher.createDeco(view);\n }\n\n update() {\n this.decorations = atMatcher.createDeco(this.view);\n }\n },\n {\n decorations: (p) => p.decorations,\n provide(p) {\n return EditorView.atomicRanges.of(\n (view) => view.plugin(p)?.decorations ?? Decoration.none\n );\n },\n }\n ),\n ]);\n }, [injector]);\n\n return null;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport styled from 'styled-components';\nimport { Tag } from '@douyinfe/semi-ui';\n\nexport const UIRootTitle = styled.div`\n margin-right: 4px;\n min-width: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--semi-color-text-2);\n`;\n\nexport const UIVarName = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const UITag = styled(Tag)`\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n max-width: 300px;\n\n & .semi-tag-content-center {\n justify-content: flex-start;\n }\n\n &.semi-tag {\n margin: 0 5px;\n }\n`;\n\nexport const UIPopoverContent = styled.div`\n padding: 10px;\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n`;\n"],"mappings":"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","names":["React","React","Popover","React","Popover","React"]}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
// src/components/prompt-editor/editor.tsx
|
|
2
|
+
import React, { useEffect, useRef } from "react";
|
|
3
|
+
import {
|
|
4
|
+
Renderer,
|
|
5
|
+
EditorProvider,
|
|
6
|
+
ActiveLinePlaceholder
|
|
7
|
+
} from "@coze-editor/editor/react";
|
|
8
|
+
import preset from "@coze-editor/editor/preset-prompt";
|
|
9
|
+
|
|
10
|
+
// src/components/prompt-editor/styles.tsx
|
|
11
|
+
import styled, { css } from "styled-components";
|
|
12
|
+
var UIContainer = styled.div`
|
|
13
|
+
background-color: var(--semi-color-fill-0);
|
|
14
|
+
padding-left: 10px;
|
|
15
|
+
padding-right: 6px;
|
|
16
|
+
|
|
17
|
+
${({ $hasError }) => $hasError && css`
|
|
18
|
+
border: 1px solid var(--semi-color-danger-6);
|
|
19
|
+
`}
|
|
20
|
+
`;
|
|
21
|
+
|
|
22
|
+
// src/components/prompt-editor/extensions/markdown.tsx
|
|
23
|
+
import { useLayoutEffect } from "react";
|
|
24
|
+
import { useInjector } from "@coze-editor/editor/react";
|
|
25
|
+
import { astDecorator } from "@coze-editor/editor";
|
|
26
|
+
import { EditorView } from "@codemirror/view";
|
|
27
|
+
function MarkdownHighlight() {
|
|
28
|
+
const injector = useInjector();
|
|
29
|
+
useLayoutEffect(
|
|
30
|
+
() => injector.inject([
|
|
31
|
+
astDecorator.whole.of((cursor) => {
|
|
32
|
+
if (cursor.name.startsWith("ATXHeading")) {
|
|
33
|
+
return {
|
|
34
|
+
type: "className",
|
|
35
|
+
className: "heading"
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
if (cursor.name === "Emphasis") {
|
|
39
|
+
return {
|
|
40
|
+
type: "className",
|
|
41
|
+
className: "emphasis"
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
if (cursor.name === "StrongEmphasis") {
|
|
45
|
+
return {
|
|
46
|
+
type: "className",
|
|
47
|
+
className: "strong-emphasis"
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
if (cursor.name === "ListMark" || cursor.name === "QuoteMark") {
|
|
51
|
+
return {
|
|
52
|
+
type: "className",
|
|
53
|
+
className: "mark"
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
}),
|
|
57
|
+
EditorView.theme({
|
|
58
|
+
".heading": {
|
|
59
|
+
color: "#00818C",
|
|
60
|
+
fontWeight: "bold"
|
|
61
|
+
},
|
|
62
|
+
".emphasis": {
|
|
63
|
+
fontStyle: "italic"
|
|
64
|
+
},
|
|
65
|
+
".strong-emphasis": {
|
|
66
|
+
fontWeight: "bold"
|
|
67
|
+
},
|
|
68
|
+
".mark": {
|
|
69
|
+
color: "#4E40E5"
|
|
70
|
+
}
|
|
71
|
+
})
|
|
72
|
+
]),
|
|
73
|
+
[injector]
|
|
74
|
+
);
|
|
75
|
+
return null;
|
|
76
|
+
}
|
|
77
|
+
var markdown_default = MarkdownHighlight;
|
|
78
|
+
|
|
79
|
+
// src/components/prompt-editor/extensions/language-support.tsx
|
|
80
|
+
import { useLayoutEffect as useLayoutEffect2 } from "react";
|
|
81
|
+
import { useInjector as useInjector2 } from "@coze-editor/editor/react";
|
|
82
|
+
import { languageSupport } from "@coze-editor/editor/preset-prompt";
|
|
83
|
+
function LanguageSupport() {
|
|
84
|
+
const injector = useInjector2();
|
|
85
|
+
useLayoutEffect2(() => injector.inject([languageSupport]), [injector]);
|
|
86
|
+
return null;
|
|
87
|
+
}
|
|
88
|
+
var language_support_default = LanguageSupport;
|
|
89
|
+
|
|
90
|
+
// src/components/prompt-editor/extensions/jinja.tsx
|
|
91
|
+
import { useLayoutEffect as useLayoutEffect3 } from "react";
|
|
92
|
+
import { useInjector as useInjector3 } from "@coze-editor/editor/react";
|
|
93
|
+
import { astDecorator as astDecorator2 } from "@coze-editor/editor";
|
|
94
|
+
import { EditorView as EditorView2 } from "@codemirror/view";
|
|
95
|
+
function JinjaHighlight() {
|
|
96
|
+
const injector = useInjector3();
|
|
97
|
+
useLayoutEffect3(
|
|
98
|
+
() => injector.inject([
|
|
99
|
+
astDecorator2.whole.of((cursor) => {
|
|
100
|
+
if (cursor.name === "JinjaStatementStart" || cursor.name === "JinjaStatementEnd") {
|
|
101
|
+
return {
|
|
102
|
+
type: "className",
|
|
103
|
+
className: "jinja-statement-bracket"
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
if (cursor.name === "JinjaComment") {
|
|
107
|
+
return {
|
|
108
|
+
type: "className",
|
|
109
|
+
className: "jinja-comment"
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
if (cursor.name === "JinjaExpression") {
|
|
113
|
+
return {
|
|
114
|
+
type: "className",
|
|
115
|
+
className: "jinja-expression"
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
}),
|
|
119
|
+
EditorView2.theme({
|
|
120
|
+
".jinja-statement-bracket": {
|
|
121
|
+
color: "#D1009D"
|
|
122
|
+
},
|
|
123
|
+
".jinja-comment": {
|
|
124
|
+
color: "#0607094D"
|
|
125
|
+
},
|
|
126
|
+
".jinja-expression": {
|
|
127
|
+
color: "#4E40E5"
|
|
128
|
+
}
|
|
129
|
+
})
|
|
130
|
+
]),
|
|
131
|
+
[injector]
|
|
132
|
+
);
|
|
133
|
+
return null;
|
|
134
|
+
}
|
|
135
|
+
var jinja_default = JinjaHighlight;
|
|
136
|
+
|
|
137
|
+
// src/components/prompt-editor/editor.tsx
|
|
138
|
+
function PromptEditor(props) {
|
|
139
|
+
const {
|
|
140
|
+
value,
|
|
141
|
+
onChange,
|
|
142
|
+
readonly,
|
|
143
|
+
placeholder,
|
|
144
|
+
activeLinePlaceholder,
|
|
145
|
+
style,
|
|
146
|
+
hasError,
|
|
147
|
+
children,
|
|
148
|
+
disableMarkdownHighlight,
|
|
149
|
+
options
|
|
150
|
+
} = props || {};
|
|
151
|
+
const editorRef = useRef(null);
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
if (editorRef.current?.getValue() !== value?.content) {
|
|
154
|
+
editorRef.current?.setValue(String(value?.content || ""));
|
|
155
|
+
}
|
|
156
|
+
}, [value]);
|
|
157
|
+
return /* @__PURE__ */ React.createElement(UIContainer, { $hasError: hasError, style }, /* @__PURE__ */ React.createElement(EditorProvider, null, /* @__PURE__ */ React.createElement(
|
|
158
|
+
Renderer,
|
|
159
|
+
{
|
|
160
|
+
didMount: (editor) => {
|
|
161
|
+
editorRef.current = editor;
|
|
162
|
+
},
|
|
163
|
+
plugins: preset,
|
|
164
|
+
defaultValue: String(value?.content),
|
|
165
|
+
options: {
|
|
166
|
+
readOnly: readonly,
|
|
167
|
+
editable: !readonly,
|
|
168
|
+
placeholder,
|
|
169
|
+
...options
|
|
170
|
+
},
|
|
171
|
+
onChange: (e) => {
|
|
172
|
+
onChange({ type: "template", content: e.value });
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
), activeLinePlaceholder && /* @__PURE__ */ React.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ React.createElement(markdown_default, null), /* @__PURE__ */ React.createElement(language_support_default, null), /* @__PURE__ */ React.createElement(jinja_default, null), children));
|
|
176
|
+
}
|
|
177
|
+
export {
|
|
178
|
+
PromptEditor
|
|
179
|
+
};
|
|
180
|
+
//# sourceMappingURL=editor-6UMULJYB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/prompt-editor/editor.tsx","../../src/components/prompt-editor/styles.tsx","../../src/components/prompt-editor/extensions/markdown.tsx","../../src/components/prompt-editor/extensions/language-support.tsx","../../src/components/prompt-editor/extensions/jinja.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useEffect, useRef } from 'react';\n\nimport {\n Renderer,\n EditorProvider,\n ActiveLinePlaceholder,\n InferValues,\n} from '@coze-editor/editor/react';\nimport preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';\n\nimport { PropsType } from './types';\nimport { UIContainer } from './styles';\nimport MarkdownHighlight from './extensions/markdown';\nimport LanguageSupport from './extensions/language-support';\nimport JinjaHighlight from './extensions/jinja';\n\ntype Preset = typeof preset;\ntype Options = Partial<InferValues<Preset[number]>>;\n\nexport interface PromptEditorPropsType extends PropsType {\n options?: Options;\n}\n\nexport function PromptEditor(props: PromptEditorPropsType) {\n const {\n value,\n onChange,\n readonly,\n placeholder,\n activeLinePlaceholder,\n style,\n hasError,\n children,\n disableMarkdownHighlight,\n options,\n } = props || {};\n\n const editorRef = useRef<EditorAPI | null>(null);\n\n useEffect(() => {\n // listen to value change\n if (editorRef.current?.getValue() !== value?.content) {\n editorRef.current?.setValue(String(value?.content || ''));\n }\n }, [value]);\n\n return (\n <UIContainer $hasError={hasError} style={style}>\n <EditorProvider>\n <Renderer\n didMount={(editor: EditorAPI) => {\n editorRef.current = editor;\n }}\n plugins={preset}\n defaultValue={String(value?.content)}\n options={{\n readOnly: readonly,\n editable: !readonly,\n placeholder,\n ...options,\n }}\n onChange={(e) => {\n onChange({ type: 'template', content: e.value });\n }}\n />\n {activeLinePlaceholder && (\n <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>\n )}\n {!disableMarkdownHighlight && <MarkdownHighlight />}\n <LanguageSupport />\n <JinjaHighlight />\n {children}\n </EditorProvider>\n </UIContainer>\n );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport styled, { css } from 'styled-components';\n\nexport const UIContainer = styled.div<{ $hasError?: boolean }>`\n background-color: var(--semi-color-fill-0);\n padding-left: 10px;\n padding-right: 6px;\n\n ${({ $hasError }) =>\n $hasError &&\n css`\n border: 1px solid var(--semi-color-danger-6);\n `}\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useLayoutEffect } from 'react';\n\nimport { useInjector } from '@coze-editor/editor/react';\nimport { astDecorator } from '@coze-editor/editor';\nimport { EditorView } from '@codemirror/view';\n\nfunction MarkdownHighlight() {\n const injector = useInjector();\n\n useLayoutEffect(\n () =>\n injector.inject([\n astDecorator.whole.of((cursor) => {\n // # heading\n if (cursor.name.startsWith('ATXHeading')) {\n return {\n type: 'className',\n className: 'heading',\n };\n }\n\n // *italic*\n if (cursor.name === 'Emphasis') {\n return {\n type: 'className',\n className: 'emphasis',\n };\n }\n\n // **bold**\n if (cursor.name === 'StrongEmphasis') {\n return {\n type: 'className',\n className: 'strong-emphasis',\n };\n }\n\n // -\n // 1.\n // >\n if (cursor.name === 'ListMark' || cursor.name === 'QuoteMark') {\n return {\n type: 'className',\n className: 'mark',\n };\n }\n }),\n EditorView.theme({\n '.heading': {\n color: '#00818C',\n fontWeight: 'bold',\n },\n '.emphasis': {\n fontStyle: 'italic',\n },\n '.strong-emphasis': {\n fontWeight: 'bold',\n },\n '.mark': {\n color: '#4E40E5',\n },\n }),\n ]),\n [injector]\n );\n\n return null;\n}\n\nexport default MarkdownHighlight;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useLayoutEffect } from 'react';\n\nimport { useInjector } from '@coze-editor/editor/react';\nimport { languageSupport } from '@coze-editor/editor/preset-prompt';\n\nfunction LanguageSupport() {\n const injector = useInjector();\n\n useLayoutEffect(() => injector.inject([languageSupport]), [injector]);\n\n return null;\n}\n\nexport default LanguageSupport;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useLayoutEffect } from 'react';\n\nimport { useInjector } from '@coze-editor/editor/react';\nimport { astDecorator } from '@coze-editor/editor';\nimport { EditorView } from '@codemirror/view';\n\nfunction JinjaHighlight() {\n const injector = useInjector();\n\n useLayoutEffect(\n () =>\n injector.inject([\n astDecorator.whole.of((cursor) => {\n if (cursor.name === 'JinjaStatementStart' || cursor.name === 'JinjaStatementEnd') {\n return {\n type: 'className',\n className: 'jinja-statement-bracket',\n };\n }\n\n if (cursor.name === 'JinjaComment') {\n return {\n type: 'className',\n className: 'jinja-comment',\n };\n }\n\n if (cursor.name === 'JinjaExpression') {\n return {\n type: 'className',\n className: 'jinja-expression',\n };\n }\n }),\n EditorView.theme({\n '.jinja-statement-bracket': {\n color: '#D1009D',\n },\n '.jinja-comment': {\n color: '#0607094D',\n },\n '.jinja-expression': {\n color: '#4E40E5',\n },\n }),\n ]),\n [injector]\n );\n\n return null;\n}\n\nexport default JinjaHighlight;\n"],"mappings":"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","names":["useLayoutEffect","useInjector","useLayoutEffect","useInjector","astDecorator","EditorView"]}
|