@flowgram.ai/form-materials 0.4.10 → 0.4.11

package/src/components/prompt-editor-with-variables/editor.tsx

@@ -6,17 +6,15 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
 
 export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
   return (
     <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
+      <EditorVariableTree />
+      <EditorVariableTagInject />
     </PromptEditor>
   );
 }

package/src/components/variable-selector/index.tsx

@@ -73,6 +73,8 @@ export const VariableSelector = ({
     return icon;
   };
 
+  console.log('debugger treeValue', treeValue);
+
   return (
     <>
       <UITreeSelect

package/src/index.ts

@@ -34,6 +34,9 @@ export {
   TypeSelector,
   VariableSelector,
   VariableSelectorProvider,
+  EditorVariableTagInject,
+  EditorVariableTree,
+  EditorInputsTree,
   getTypeSelectValue,
   parseTypeSelectValue,
   type AssignValueType,

package/src/shared/inject-material/index.tsx

@@ -11,6 +11,8 @@ import {
   usePlaygroundContainer,
 } from '@flowgram.ai/editor';
 
+type WithRenderKey<T> = T & { renderKey?: string };
+
 /**
  * Creates a material component wrapper with dependency injection support
  *
@@ -48,12 +50,15 @@ import {
  * @returns Wrapper component with dependency injection support
  */
 export function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
+  Component: WithRenderKey<React.FC<Props> | React.ExoticComponent<Props>>,
   params?: {
     renderKey?: string;
   }
-): React.FC<Props> {
-  const InjectComponent: React.FC<Props> = (props) => {
+): WithRenderKey<React.FC<Props>> {
+  // Determine render key: prioritize param specified, then component renderKey, finally component name
+  const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
+
+  const InjectComponent: WithRenderKey<React.FC<Props>> = (props) => {
     const container = usePlaygroundContainer();
 
     // Check if renderer registry is bound in container
@@ -65,9 +70,6 @@ export function createInjectMaterial<Props>(
     // Get renderer registry instance
     const rendererRegistry = container.get(FlowRendererRegistry);
 
-    // Determine render key: prioritize param specified, then component renderKey, finally component name
-    const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
-
     // Get corresponding renderer from registry
     const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
 
@@ -83,5 +85,7 @@ export function createInjectMaterial<Props>(
     });
   };
 
+  InjectComponent.renderKey = renderKey;
+
   return InjectComponent;
 }

package/dist/cjs/components/json-editor-with-variables/extensions/variable-tree.js

@@ -1,97 +0,0 @@
-"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__, {
-    VariableTree: ()=>VariableTree
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_react_namespaceObject = require("react");
-const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
-const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
-const index_js_namespaceObject = require("../../variable-selector/index.js");
-function VariableTree() {
-    const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
-    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
-    const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
-    const editor = (0, react_namespaceObject.useEditor)();
-    function insert(variablePath) {
-        const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
-        if (!range) return;
-        editor.replaceText({
-            ...range,
-            text: '{{' + variablePath + '}}'
-        });
-        setVisible(false);
-    }
-    function handleOpenChange(e) {
-        setPosition(e.state.selection.main.head);
-        setVisible(e.value);
-    }
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!editor) return;
-    }, [
-        editor,
-        visible
-    ]);
-    const treeData = (0, index_js_namespaceObject.useVariableTree)({});
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
-                triggerCharacters: [
-                    '@'
-                ],
-                onOpenChange: handleOpenChange
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
-                visible: visible,
-                trigger: "custom",
-                position: "topLeft",
-                rePosKey: posKey,
-                content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    style: {
-                        width: 300
-                    },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
-                        treeData: treeData,
-                        onSelect: (v)=>{
-                            insert(v);
-                        }
-                    })
-                }),
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
-                    position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
-                })
-            })
-        ]
-    });
-}
-exports.VariableTree = __webpack_exports__.VariableTree;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "VariableTree"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/cjs/components/prompt-editor-with-inputs/extensions/inputs-tree.js

@@ -1,101 +0,0 @@
-"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__, {
-    InputsTree: ()=>InputsTree
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_react_namespaceObject = require("react");
-const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
-const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
-const external_inputs_picker_js_namespaceObject = require("../inputs-picker.js");
-function InputsTree({ inputsValues }) {
-    const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
-    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
-    const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
-    const editor = (0, react_namespaceObject.useEditor)();
-    function insert(variablePath) {
-        const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
-        if (!range) return;
-        let { from, to } = range;
-        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
-        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
-        editor.replaceText({
-            ...range,
-            text: '{{' + variablePath + '}}'
-        });
-        setVisible(false);
-    }
-    function handleOpenChange(e) {
-        setPosition(e.state.selection.main.head);
-        setVisible(e.value);
-    }
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!editor) return;
-    }, [
-        editor,
-        visible
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
-                triggerCharacters: [
-                    '{',
-                    '{}',
-                    '@'
-                ],
-                onOpenChange: handleOpenChange
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
-                visible: visible,
-                trigger: "custom",
-                position: "topLeft",
-                rePosKey: posKey,
-                content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    style: {
-                        width: 300
-                    },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_inputs_picker_js_namespaceObject.InputsPicker, {
-                        inputsValues: inputsValues,
-                        onSelect: (v)=>{
-                            insert(v);
-                        }
-                    })
-                }),
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
-                    position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
-                })
-            })
-        ]
-    });
-}
-exports.InputsTree = __webpack_exports__.InputsTree;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "InputsTree"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/cjs/components/prompt-editor-with-variables/extensions/variable-tag.js

@@ -1,151 +0,0 @@
-"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__, {
-    VariableTagInject: ()=>VariableTagInject
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_react_namespaceObject = require("react");
-const external_lodash_es_namespaceObject = require("lodash-es");
-const editor_namespaceObject = require("@flowgram.ai/editor");
-const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
-const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
-const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
-const view_namespaceObject = require("@codemirror/view");
-const index_js_namespaceObject = require("../../../shared/index.js");
-const external_styles_js_namespaceObject = require("../styles.js");
-class VariableTagWidget extends view_namespaceObject.WidgetType {
-    constructor({ keyPath, scope }){
-        super(), this.toDispose = new editor_namespaceObject.DisposableCollection(), this.renderIcon = (icon)=>{
-            if ('string' == typeof icon) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-                style: {
-                    marginRight: 8
-                },
-                width: 12,
-                height: 12,
-                src: icon
-            });
-            return icon;
-        };
-        this.keyPath = keyPath;
-        this.scope = scope;
-    }
-    renderVariable(v) {
-        if (!v) return void this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITag, {
-            prefixIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconIssueStroked, {}),
-            color: "amber",
-            children: "Unknown"
-        }));
-        const rootField = (0, external_lodash_es_namespaceObject.last)(v.parentFields);
-        const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRootTitle, {
-            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
-        });
-        const rootIcon = this.renderIcon(rootField?.meta.icon);
-        this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
-            content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIPopoverContent, {
-                children: [
-                    rootIcon,
-                    rootTitle,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
-                        children: v?.keyPath.slice(1).join('.')
-                    })
-                ]
-            }),
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITag, {
-                prefixIcon: rootIcon,
-                children: [
-                    rootTitle,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
-                        children: v?.key
-                    })
-                ]
-            })
-        }));
-    }
-    toDOM(view) {
-        const dom = document.createElement('span');
-        this.root = (0, index_js_namespaceObject.polyfillCreateRoot)(dom);
-        this.toDispose.push(editor_namespaceObject.Disposable.create(()=>{
-            this.root.unmount();
-        }));
-        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
-            this.renderVariable(v);
-        }, {
-            triggerOnInit: false
-        }));
-        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
-        return dom;
-    }
-    eq(other) {
-        return (0, external_lodash_es_namespaceObject.isEqual)(this.keyPath, other.keyPath);
-    }
-    ignoreEvent() {
-        return false;
-    }
-    destroy(dom) {
-        this.toDispose.dispose();
-    }
-}
-function VariableTagInject() {
-    const injector = (0, react_namespaceObject.useInjector)();
-    const scope = (0, editor_namespaceObject.useCurrentScope)();
-    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
-        const atMatcher = new view_namespaceObject.MatchDecorator({
-            regexp: /\{\{([^\}\{]+)\}\}/g,
-            decoration: (match)=>view_namespaceObject.Decoration.replace({
-                    widget: new VariableTagWidget({
-                        keyPath: match[1]?.split('.') ?? [],
-                        scope
-                    })
-                })
-        });
-        return injector.inject([
-            view_namespaceObject.ViewPlugin.fromClass(class {
-                constructor(view){
-                    this.view = view;
-                    this.decorations = atMatcher.createDeco(view);
-                }
-                update() {
-                    this.decorations = atMatcher.createDeco(this.view);
-                }
-            }, {
-                decorations: (p)=>p.decorations,
-                provide (p) {
-                    return view_namespaceObject.EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? view_namespaceObject.Decoration.none);
-                }
-            })
-        ]);
-    }, [
-        injector
-    ]);
-    return null;
-}
-exports.VariableTagInject = __webpack_exports__.VariableTagInject;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "VariableTagInject"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/cjs/components/prompt-editor-with-variables/styles.js

@@ -1,89 +0,0 @@
-"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__, {
-    UIRootTitle: ()=>UIRootTitle,
-    UIPopoverContent: ()=>UIPopoverContent,
-    UIVarName: ()=>UIVarName,
-    UITag: ()=>UITag
-});
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
-const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
-const UIRootTitle = external_styled_components_default().div`
-  margin-right: 4px;
-  min-width: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--semi-color-text-2);
-`;
-const UIVarName = external_styled_components_default().div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const UITag = external_styled_components_default()(semi_ui_namespaceObject.Tag)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  max-width: 300px;
-
-  & .semi-tag-content-center {
-    justify-content: flex-start;
-  }
-
-  &.semi-tag {
-    margin: 0 5px;
-  }
-`;
-const UIPopoverContent = external_styled_components_default().div`
-  padding: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-`;
-exports.UIPopoverContent = __webpack_exports__.UIPopoverContent;
-exports.UIRootTitle = __webpack_exports__.UIRootTitle;
-exports.UITag = __webpack_exports__.UITag;
-exports.UIVarName = __webpack_exports__.UIVarName;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "UIPopoverContent",
-    "UIRootTitle",
-    "UITag",
-    "UIVarName"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/esm/components/json-editor-with-variables/extensions/variable-tree.mjs

@@ -1,63 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
-import { Popover, Tree } from "@douyinfe/semi-ui";
-import { useVariableTree } from "../../variable-selector/index.mjs";
-function VariableTree() {
-    const [posKey, setPosKey] = useState('');
-    const [visible, setVisible] = useState(false);
-    const [position, setPosition] = useState(-1);
-    const editor = useEditor();
-    function insert(variablePath) {
-        const range = getCurrentMentionReplaceRange(editor.$view.state);
-        if (!range) return;
-        editor.replaceText({
-            ...range,
-            text: '{{' + variablePath + '}}'
-        });
-        setVisible(false);
-    }
-    function handleOpenChange(e) {
-        setPosition(e.state.selection.main.head);
-        setVisible(e.value);
-    }
-    useEffect(()=>{
-        if (!editor) return;
-    }, [
-        editor,
-        visible
-    ]);
-    const treeData = useVariableTree({});
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Mention, {
-                triggerCharacters: [
-                    '@'
-                ],
-                onOpenChange: handleOpenChange
-            }),
-            /*#__PURE__*/ jsx(Popover, {
-                visible: visible,
-                trigger: "custom",
-                position: "topLeft",
-                rePosKey: posKey,
-                content: /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: 300
-                    },
-                    children: /*#__PURE__*/ jsx(Tree, {
-                        treeData: treeData,
-                        onSelect: (v)=>{
-                            insert(v);
-                        }
-                    })
-                }),
-                children: /*#__PURE__*/ jsx(PositionMirror, {
-                    position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
-                })
-            })
-        ]
-    });
-}
-export { VariableTree };

package/dist/esm/components/prompt-editor-with-inputs/extensions/inputs-tree.mjs

@@ -1,67 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
-import { Popover } from "@douyinfe/semi-ui";
-import { InputsPicker } from "../inputs-picker.mjs";
-function InputsTree({ inputsValues }) {
-    const [posKey, setPosKey] = useState('');
-    const [visible, setVisible] = useState(false);
-    const [position, setPosition] = useState(-1);
-    const editor = useEditor();
-    function insert(variablePath) {
-        const range = getCurrentMentionReplaceRange(editor.$view.state);
-        if (!range) return;
-        let { from, to } = range;
-        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
-        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
-        editor.replaceText({
-            ...range,
-            text: '{{' + variablePath + '}}'
-        });
-        setVisible(false);
-    }
-    function handleOpenChange(e) {
-        setPosition(e.state.selection.main.head);
-        setVisible(e.value);
-    }
-    useEffect(()=>{
-        if (!editor) return;
-    }, [
-        editor,
-        visible
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Mention, {
-                triggerCharacters: [
-                    '{',
-                    '{}',
-                    '@'
-                ],
-                onOpenChange: handleOpenChange
-            }),
-            /*#__PURE__*/ jsx(Popover, {
-                visible: visible,
-                trigger: "custom",
-                position: "topLeft",
-                rePosKey: posKey,
-                content: /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: 300
-                    },
-                    children: /*#__PURE__*/ jsx(InputsPicker, {
-                        inputsValues: inputsValues,
-                        onSelect: (v)=>{
-                            insert(v);
-                        }
-                    })
-                }),
-                children: /*#__PURE__*/ jsx(PositionMirror, {
-                    position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
-                })
-            })
-        ]
-    });
-}
-export { InputsTree };