@flowgram.ai/form-materials 0.4.9 → 0.4.10

package/dist/cjs/components/json-schema-editor/index.js

@@ -0,0 +1,246 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    JsonSchemaEditor: ()=>JsonSchemaEditor
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
+const index_js_namespaceObject = require("../type-selector/index.js");
+const external_blur_input_index_js_namespaceObject = require("../blur-input/index.js");
+const external_styles_js_namespaceObject = require("./styles.js");
+const external_hooks_js_namespaceObject = require("./hooks.js");
+const external_default_value_js_namespaceObject = require("./default-value.js");
+const DEFAULT = {
+    type: 'object'
+};
+function JsonSchemaEditor(props) {
+    const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
+    const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = (0, external_hooks_js_namespaceObject.usePropertiesEdit)(value, onChangeProps);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIContainer, {
+        className: props.className,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItems, {
+                children: propertyList.map((_property)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PropertyEdit, {
+                        readonly: readonly,
+                        value: _property,
+                        config: config,
+                        onChange: (_v)=>{
+                            onEditProperty(_property.key, _v);
+                        },
+                        onRemove: ()=>{
+                            onRemoveProperty(_property.key);
+                        }
+                    }, _property.key))
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Button, {
+                disabled: readonly,
+                size: "small",
+                style: {
+                    marginTop: 10,
+                    marginLeft: 16
+                },
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconPlus, {}),
+                onClick: onAddProperty,
+                children: config?.addButtonText ?? editor_namespaceObject.I18n.t('Add')
+            })
+        ]
+    });
+}
+function PropertyEdit(props) {
+    const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
+    const [expand, setExpand] = (0, external_react_namespaceObject.useState)(false);
+    const [collapse, setCollapse] = (0, external_react_namespaceObject.useState)(false);
+    const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
+    const typeSelectorValue = (0, external_react_namespaceObject.useMemo)(()=>({
+            type,
+            items
+        }), [
+        type,
+        items
+    ]);
+    const { propertyList, canAddField, onAddProperty, onRemoveProperty, onEditProperty } = (0, external_hooks_js_namespaceObject.usePropertiesEdit)(value, onChangeProps);
+    const onChange = (key, _value)=>{
+        onChangeProps?.({
+            ...value || {},
+            [key]: _value
+        });
+    };
+    const showCollapse = canAddField && propertyList.length > 0;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItemLeft, {
+                $isLast: $isLast,
+                $showLine: $level > 0,
+                $showCollapse: showCollapse,
+                children: showCollapse && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UICollapseTrigger, {
+                    onClick: ()=>setCollapse((_collapse)=>!_collapse),
+                    children: collapse ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconChevronDown, {
+                        size: "small"
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconChevronRight, {
+                        size: "small"
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITreeItemRight, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITreeItemMain, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIRow, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIName, {
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blur_input_index_js_namespaceObject.BlurInput, {
+                                            disabled: readonly,
+                                            placeholder: config?.placeholder ?? editor_namespaceObject.I18n.t('Input Variable Name'),
+                                            size: "small",
+                                            value: name,
+                                            onChange: (value)=>onChange('name', value)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIType, {
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.InjectTypeSelector, {
+                                            value: typeSelectorValue,
+                                            readonly: readonly,
+                                            onChange: (_value)=>{
+                                                onChangeProps?.({
+                                                    ...value || {},
+                                                    ..._value
+                                                });
+                                            }
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRequired, {
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Checkbox, {
+                                            disabled: readonly,
+                                            checked: isPropertyRequired,
+                                            onChange: (e)=>onChange('isPropertyRequired', e.target.checked)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIActions, {
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.IconButton, {
+                                                disabled: readonly,
+                                                size: "small",
+                                                theme: "borderless",
+                                                icon: expand ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconShrink, {
+                                                    size: "small"
+                                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconExpand, {
+                                                    size: "small"
+                                                }),
+                                                onClick: ()=>{
+                                                    setExpand((_expand)=>!_expand);
+                                                }
+                                            }),
+                                            canAddField && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.IconButton, {
+                                                disabled: readonly,
+                                                size: "small",
+                                                theme: "borderless",
+                                                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.IconAddChildren, {}),
+                                                onClick: ()=>{
+                                                    onAddProperty();
+                                                    setCollapse(true);
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.IconButton, {
+                                                disabled: readonly,
+                                                size: "small",
+                                                theme: "borderless",
+                                                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconMinus, {
+                                                    size: "small"
+                                                }),
+                                                onClick: onRemove
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            expand && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIExpandDetail, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UILabel, {
+                                        children: config?.descTitle ?? editor_namespaceObject.I18n.t("Description")
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blur_input_index_js_namespaceObject.BlurInput, {
+                                        disabled: readonly,
+                                        size: "small",
+                                        value: description,
+                                        onChange: (value)=>onChange("description", value),
+                                        placeholder: config?.descPlaceholder ?? editor_namespaceObject.I18n.t('Help LLM to understand the property')
+                                    }),
+                                    0 === $level && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UILabel, {
+                                                style: {
+                                                    marginTop: 10
+                                                },
+                                                children: config?.defaultValueTitle ?? editor_namespaceObject.I18n.t('Default Value')
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.DefaultValueWrapper, {
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_default_value_js_namespaceObject.DefaultValue, {
+                                                    value: defaultValue,
+                                                    schema: value,
+                                                    placeholder: config?.defaultValuePlaceholder ?? editor_namespaceObject.I18n.t('Default Value'),
+                                                    onChange: (value)=>onChange('default', value)
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    showCollapse && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UICollapsible, {
+                        $collapse: collapse,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItems, {
+                            $shrink: true,
+                            children: propertyList.map((_property, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PropertyEdit, {
+                                    readonly: readonly,
+                                    value: _property,
+                                    config: config,
+                                    $level: $level + 1,
+                                    onChange: (_v)=>{
+                                        onEditProperty(_property.key, _v);
+                                    },
+                                    onRemove: ()=>{
+                                        onRemoveProperty(_property.key);
+                                    },
+                                    $isLast: index === propertyList.length - 1
+                                }, _property.key))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.JsonSchemaEditor = __webpack_exports__.JsonSchemaEditor;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "JsonSchemaEditor"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-editor/styles.js

@@ -0,0 +1,231 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    UITreeItemRight: ()=>UITreeItemRight,
+    UIRow: ()=>UIRow,
+    UIActions: ()=>UIActions,
+    UIName: ()=>UIName,
+    UIExpandDetail: ()=>UIExpandDetail,
+    UICollapsible: ()=>UICollapsible,
+    UICollapseTrigger: ()=>UICollapseTrigger,
+    DefaultValueWrapper: ()=>DefaultValueWrapper,
+    IconAddChildren: ()=>IconAddChildren,
+    UIContainer: ()=>UIContainer,
+    UILabel: ()=>UILabel,
+    UITreeItemLeft: ()=>UITreeItemLeft,
+    UITreeItems: ()=>UITreeItems,
+    UITreeItemMain: ()=>UITreeItemMain,
+    UIType: ()=>UIType,
+    UIRequired: ()=>UIRequired,
+    ConstantInputWrapper: ()=>ConstantInputWrapper
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const external_styled_components_namespaceObject = require("styled-components");
+var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
+const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
+var semi_icons_default = /*#__PURE__*/ __webpack_require__.n(semi_icons_namespaceObject);
+const UIContainer = external_styled_components_default().div`
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+`;
+const UIRow = external_styled_components_default().div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+const UICollapseTrigger = external_styled_components_default().div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+const UIExpandDetail = external_styled_components_default().div`
+  display: flex;
+  flex-direction: column;
+`;
+const UILabel = external_styled_components_default().div`
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+`;
+const UITreeItems = external_styled_components_default().div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink })=>$shrink && (0, external_styled_components_namespaceObject.css)`
+      padding-left: 3px;
+      margin-top: 10px;
+    `}
+`;
+const UITreeItemLeft = external_styled_components_default().div`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $showCollapse })=>{
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
+    return $showLine && (0, external_styled_components_namespaceObject.css)`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -14px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -14px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: ${width}; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `;
+}}
+`;
+const UITreeItemRight = external_styled_components_default().div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+const UITreeItemMain = external_styled_components_default().div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+`;
+const UICollapsible = external_styled_components_default().div`
+  display: none;
+
+  ${({ $collapse })=>$collapse && (0, external_styled_components_namespaceObject.css)`
+      display: block;
+    `}
+`;
+const UIName = external_styled_components_default().div`
+  flex-grow: 1;
+`;
+const UIType = external_styled_components_default().div``;
+const UIRequired = external_styled_components_default().div``;
+const UIActions = external_styled_components_default().div`
+  white-space: nowrap;
+`;
+const iconAddChildrenSvg = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+    className: "icon-icon icon-icon-coz_add_node ",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+        }),
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"
+        })
+    ]
+});
+const IconAddChildren = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_default(), {
+        size: "small",
+        svg: iconAddChildrenSvg
+    });
+const DefaultValueWrapper = external_styled_components_default().div`
+  margin: 0;
+`;
+const ConstantInputWrapper = external_styled_components_default().div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
+exports.ConstantInputWrapper = __webpack_exports__.ConstantInputWrapper;
+exports.DefaultValueWrapper = __webpack_exports__.DefaultValueWrapper;
+exports.IconAddChildren = __webpack_exports__.IconAddChildren;
+exports.UIActions = __webpack_exports__.UIActions;
+exports.UICollapseTrigger = __webpack_exports__.UICollapseTrigger;
+exports.UICollapsible = __webpack_exports__.UICollapsible;
+exports.UIContainer = __webpack_exports__.UIContainer;
+exports.UIExpandDetail = __webpack_exports__.UIExpandDetail;
+exports.UILabel = __webpack_exports__.UILabel;
+exports.UIName = __webpack_exports__.UIName;
+exports.UIRequired = __webpack_exports__.UIRequired;
+exports.UIRow = __webpack_exports__.UIRow;
+exports.UITreeItemLeft = __webpack_exports__.UITreeItemLeft;
+exports.UITreeItemMain = __webpack_exports__.UITreeItemMain;
+exports.UITreeItemRight = __webpack_exports__.UITreeItemRight;
+exports.UITreeItems = __webpack_exports__.UITreeItems;
+exports.UIType = __webpack_exports__.UIType;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ConstantInputWrapper",
+    "DefaultValueWrapper",
+    "IconAddChildren",
+    "UIActions",
+    "UICollapseTrigger",
+    "UICollapsible",
+    "UIContainer",
+    "UIExpandDetail",
+    "UILabel",
+    "UIName",
+    "UIRequired",
+    "UIRow",
+    "UITreeItemLeft",
+    "UITreeItemMain",
+    "UITreeItemRight",
+    "UITreeItems",
+    "UIType"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-editor/types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/prompt-editor/editor.js

@@ -0,0 +1,99 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PromptEditor: ()=>PromptEditor
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const preset_prompt_namespaceObject = require("@flowgram.ai/coze-editor/preset-prompt");
+var preset_prompt_default = /*#__PURE__*/ __webpack_require__.n(preset_prompt_namespaceObject);
+const external_styles_js_namespaceObject = require("./styles.js");
+const markdown_js_namespaceObject = require("./extensions/markdown.js");
+var markdown_js_default = /*#__PURE__*/ __webpack_require__.n(markdown_js_namespaceObject);
+const language_support_js_namespaceObject = require("./extensions/language-support.js");
+var language_support_js_default = /*#__PURE__*/ __webpack_require__.n(language_support_js_namespaceObject);
+const jinja_js_namespaceObject = require("./extensions/jinja.js");
+var jinja_js_default = /*#__PURE__*/ __webpack_require__.n(jinja_js_namespaceObject);
+function PromptEditor(props) {
+    const { value, onChange, readonly, placeholder, activeLinePlaceholder, style, hasError, children, disableMarkdownHighlight, options } = props || {};
+    const editorRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (editorRef.current?.getValue() !== value?.content) editorRef.current?.setValue(String(value?.content || ''));
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIContainer, {
+        $hasError: hasError,
+        style: style,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.EditorProvider, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Renderer, {
+                    didMount: (editor)=>{
+                        editorRef.current = editor;
+                    },
+                    plugins: preset_prompt_default(),
+                    defaultValue: String(value?.content),
+                    options: {
+                        readOnly: readonly,
+                        editable: !readonly,
+                        placeholder,
+                        ...options
+                    },
+                    onChange: (e)=>{
+                        onChange({
+                            type: 'template',
+                            content: e.value
+                        });
+                    }
+                }),
+                activeLinePlaceholder && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.ActiveLinePlaceholder, {
+                    children: activeLinePlaceholder
+                }),
+                !disableMarkdownHighlight && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(markdown_js_default(), {}),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(language_support_js_default(), {}),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jinja_js_default(), {}),
+                children
+            ]
+        })
+    });
+}
+exports.PromptEditor = __webpack_exports__.PromptEditor;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "PromptEditor"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/prompt-editor/extensions/jinja.js

@@ -0,0 +1,73 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>jinja
+});
+const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const coze_editor_namespaceObject = require("@flowgram.ai/coze-editor");
+const view_namespaceObject = require("@codemirror/view");
+function JinjaHighlight() {
+    const injector = (0, react_namespaceObject.useInjector)();
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>injector.inject([
+            coze_editor_namespaceObject.astDecorator.whole.of((cursor)=>{
+                if ('JinjaStatementStart' === cursor.name || 'JinjaStatementEnd' === cursor.name) return {
+                    type: 'className',
+                    className: 'jinja-statement-bracket'
+                };
+                if ('JinjaComment' === cursor.name) return {
+                    type: 'className',
+                    className: 'jinja-comment'
+                };
+                if ('JinjaExpression' === cursor.name) return {
+                    type: 'className',
+                    className: 'jinja-expression'
+                };
+            }),
+            view_namespaceObject.EditorView.theme({
+                '.jinja-statement-bracket': {
+                    color: '#D1009D'
+                },
+                '.jinja-comment': {
+                    color: '#0607094D'
+                },
+                '.jinja-expression': {
+                    color: '#4E40E5'
+                }
+            })
+        ]), [
+        injector
+    ]);
+    return null;
+}
+const jinja = JinjaHighlight;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});