@tachybase/client 0.23.8-alpha.21 → 0.23.8-alpha.22

package/lib/schema-component/antd/variable/RawTextArea.mjs

@@ -0,0 +1,125 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_style__ from "antd-style";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";
+import * as __WEBPACK_EXTERNAL_MODULE__VariableSelect_mjs__ from "./VariableSelect.mjs";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "antd"
+
+;// CONCATENATED MODULE: external "antd-style"
+
+;// CONCATENATED MODULE: external "lodash"
+
+;// CONCATENATED MODULE: external "./VariableSelect.mjs"
+
+;// CONCATENATED MODULE: ./packages/client/src/schema-component/antd/variable/RawTextArea.tsx?__rslib_entry__
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    const data = _tagged_template_literal([
+        "\n      position: relative;\n      .ant-input {\n        width: 100%;\n      }\n    "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "\n      position: absolute;\n      right: 0;\n      top: 0;\n      .ant-btn-sm {\n        font-size: 85%;\n      }\n    "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal([
+        "\n      &:not(:hover) {\n        border-right-color: transparent;\n        border-top-color: transparent;\n      }\n      background-color: transparent;\n    "
+    ]);
+    _templateObject2 = function() {
+        return data;
+    };
+    return data;
+}
+
+
+
+
+
+
+// NOTE: https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js/46012210#46012210
+function setNativeInputValue(input, value) {
+    var _Object_getOwnPropertyDescriptor;
+    const nativeInputValueSetter = (_Object_getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value')) === null || _Object_getOwnPropertyDescriptor === void 0 ? void 0 : _Object_getOwnPropertyDescriptor.set;
+    nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(input, value);
+    input.dispatchEvent(new Event('input', {
+        bubbles: true
+    }));
+}
+const useStyles = (0,__WEBPACK_EXTERNAL_MODULE_antd_style__.createStyles)((param)=>{
+    let { css } = param;
+    return {
+        container: css(_templateObject()),
+        group: css(_templateObject1()),
+        select: css(_templateObject2())
+    };
+});
+function RawTextArea(props) {
+    const inputRef = (0,__WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const { changeOnSelect, component: Component = __WEBPACK_EXTERNAL_MODULE_antd__.Input.TextArea, ...others } = props;
+    const scope = typeof props.scope === 'function' ? props.scope() : props.scope;
+    const [options, setOptions] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)(scope ? (0,__WEBPACK_EXTERNAL_MODULE_lodash__.cloneDeep)(scope) : []);
+    const { styles } = useStyles();
+    function onInsert(selected) {
+        if (!inputRef.current) {
+            return;
+        }
+        const variable = "{{".concat(selected.join('.'), "}}");
+        const { textArea } = inputRef.current.resizableTextArea;
+        const nextValue = textArea.value.slice(0, textArea.selectionStart) + variable + textArea.value.slice(textArea.selectionEnd);
+        const nextPos = [
+            textArea.selectionStart,
+            textArea.selectionStart + variable.length
+        ];
+        setNativeInputValue(textArea, nextValue);
+        textArea.setSelectionRange(...nextPos);
+        textArea.focus();
+    }
+    var _props_buttonClass;
+    return /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("div", {
+        className: styles.container,
+        children: [
+            /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Component, {
+                ...others,
+                ref: inputRef
+            }),
+            /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button.Group, {
+                className: styles.group,
+                children: /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__VariableSelect_mjs__.VariableSelect, {
+                    className: (_props_buttonClass = props.buttonClass) !== null && _props_buttonClass !== void 0 ? _props_buttonClass : styles.select,
+                    fieldNames: props.fieldNames,
+                    options: options,
+                    setOptions: setOptions,
+                    onInsert: onInsert,
+                    changeOnSelect: changeOnSelect
+                })
+            })
+        ]
+    });
+}
+
+export { RawTextArea };

package/lib/schema-component/antd/variable/TextArea.mjs

@@ -0,0 +1,504 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__tachybase_schema__ from "@tachybase/schema";
+import * as __WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__ from "@tachybase/utils/client";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";
+import * as __WEBPACK_EXTERNAL_MODULE_sanitize_html__ from "sanitize-html";
+import * as __WEBPACK_EXTERNAL_MODULE__index_mjs__ from "../../index.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__style_mjs__ from "./style.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__VariableSelect_mjs__ from "./VariableSelect.mjs";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "@tachybase/schema"
+
+;// CONCATENATED MODULE: external "@tachybase/utils/client"
+
+;// CONCATENATED MODULE: external "antd"
+
+;// CONCATENATED MODULE: external "classnames"
+
+;// CONCATENATED MODULE: external "lodash"
+
+;// CONCATENATED MODULE: external "sanitize-html"
+
+;// CONCATENATED MODULE: external "../../index.mjs"
+
+;// CONCATENATED MODULE: external "./style.mjs"
+
+;// CONCATENATED MODULE: external "./VariableSelect.mjs"
+
+;// CONCATENATED MODULE: ./packages/client/src/schema-component/antd/variable/TextArea.tsx?__rslib_entry__
+
+
+
+
+
+
+
+
+
+
+
+const VARIABLE_RE = /{{\s*([^{}]+)\s*}}/g;
+function pasteHTML(container, html) {
+    let { selectPastedContent = false, range: indexes } = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    var _window_getSelection, _window;
+    // IE9 and non-IE
+    const sel = (_window_getSelection = (_window = window).getSelection) === null || _window_getSelection === void 0 ? void 0 : _window_getSelection.call(_window);
+    const range = sel === null || sel === void 0 ? void 0 : sel.getRangeAt(0);
+    if (!range) {
+        return;
+    }
+    if (indexes) {
+        const children = Array.from(container.childNodes);
+        if (indexes[0] === -1) {
+            if (indexes[1]) {
+                range.setStartAfter(children[indexes[1] - 1]);
+            } else {
+                range.setStart(container, 0);
+            }
+        } else {
+            range.setStart(children[indexes[0]], indexes[1]);
+        }
+        if (indexes[2] === -1) {
+            if (indexes[3]) {
+                range.setEndAfter(children[indexes[3] - 1]);
+            } else {
+                range.setEnd(container, 0);
+            }
+        } else {
+            range.setEnd(children[indexes[2]], indexes[3]);
+        }
+    }
+    // Range.createContextualFragment() would be useful here but is
+    // only relatively recently standardized and is not supported in
+    // some browsers (IE9, for one)
+    const el = document.createElement('div');
+    el.innerHTML = html;
+    const frag = document.createDocumentFragment();
+    let lastNode;
+    while(el.firstChild){
+        lastNode = frag.appendChild(el.firstChild);
+    }
+    const { firstChild } = frag;
+    range.deleteContents();
+    range.insertNode(frag);
+    // Preserve the selection
+    if (lastNode) {
+        const next = new Range();
+        next.setStartAfter(lastNode);
+        if (selectPastedContent) {
+            if (firstChild) {
+                next.setStartBefore(firstChild);
+            }
+        } else {
+            next.collapse(true);
+        }
+        sel.removeAllRanges();
+        sel.addRange(next);
+    }
+}
+function getValue(el) {
+    const values = [];
+    for (const node of el.childNodes){
+        if (node.nodeName === 'SPAN' && node['dataset']['variable']) {
+            values.push("{{".concat(node['dataset']['variable'], "}}"));
+        } else {
+            values.push(node.textContent);
+        }
+    }
+    return values.join('');
+}
+function renderHTML(exp, keyLabelMap) {
+    return exp.replace(VARIABLE_RE, (_, i)=>{
+        const key = i.trim();
+        var _createVariableTagHTML;
+        return (_createVariableTagHTML = createVariableTagHTML(key, keyLabelMap)) !== null && _createVariableTagHTML !== void 0 ? _createVariableTagHTML : '';
+    });
+}
+function createOptionsValueLabelMap(options) {
+    const map = new Map();
+    for (const option of options){
+        map.set(option.value, [
+            option.label
+        ]);
+        if (option.children) {
+            for (const [value, labels] of createOptionsValueLabelMap(option.children)){
+                map.set("".concat(option.value, ".").concat(value), [
+                    option.label,
+                    ...labels
+                ]);
+            }
+        }
+    }
+    return map;
+}
+function createVariableTagHTML(variable, keyLabelMap) {
+    const labels = keyLabelMap.get(variable);
+    return '<span class="ant-tag ant-tag-blue" contentEditable="false" data-variable="'.concat(variable, '">').concat(labels ? labels.join(' / ') : '...', "</span>");
+}
+// [#, <>, #, #, <>]
+// [#, #]
+// [<>, #, #]
+// [#, #, <>]
+function getSingleEndRange(nodes, index, offset) {
+    if (index === -1) {
+        var _nodes_realIndex;
+        let realIndex = offset;
+        let collapseFlag = false;
+        if (realIndex && nodes[realIndex - 1].nodeName === '#text' && ((_nodes_realIndex = nodes[realIndex]) === null || _nodes_realIndex === void 0 ? void 0 : _nodes_realIndex.nodeName) === '#text') {
+            // set a flag for collapse
+            collapseFlag = true;
+        }
+        let textOffset = 0;
+        for(let i = offset - 1; i >= 0; i--){
+            var _nodes_;
+            if (collapseFlag) {
+                if (nodes[i].nodeName === '#text') {
+                    textOffset += nodes[i].textContent.length;
+                } else {
+                    collapseFlag = false;
+                }
+            }
+            if (nodes[i].nodeName === '#text' && ((_nodes_ = nodes[i + 1]) === null || _nodes_ === void 0 ? void 0 : _nodes_.nodeName) === '#text') {
+                realIndex -= 1;
+            }
+        }
+        return textOffset ? [
+            realIndex,
+            textOffset
+        ] : [
+            -1,
+            realIndex
+        ];
+    } else {
+        let realIndex = 0;
+        let textOffset = 0;
+        for(let i = 0; i < index + 1; i++){
+            if (nodes[i].nodeName === '#text') {
+                if (i !== index && nodes[i + 1] && nodes[i + 1].nodeName !== '#text') {
+                    realIndex += 1;
+                }
+                textOffset += i === index ? offset : nodes[i].textContent.length;
+            } else {
+                realIndex += 1;
+                textOffset = 0;
+            }
+        }
+        return [
+            realIndex,
+            textOffset
+        ];
+    }
+}
+function getCurrentRange(element) {
+    var _window_getSelection, _window;
+    const sel = (_window_getSelection = (_window = window).getSelection) === null || _window_getSelection === void 0 ? void 0 : _window_getSelection.call(_window);
+    const range = sel === null || sel === void 0 ? void 0 : sel.getRangeAt(0);
+    if (!range) {
+        return [
+            -1,
+            0,
+            -1,
+            0
+        ];
+    }
+    const nodes = Array.from(element.childNodes);
+    if (!nodes.length) {
+        return [
+            -1,
+            0,
+            -1,
+            0
+        ];
+    }
+    const startElementIndex = range.startContainer === element ? -1 : nodes.indexOf(range.startContainer);
+    const endElementIndex = range.endContainer === element ? -1 : nodes.indexOf(range.endContainer);
+    const result = [
+        ...getSingleEndRange(nodes, startElementIndex, range.startOffset),
+        ...getSingleEndRange(nodes, endElementIndex, range.endOffset)
+    ];
+    return result;
+}
+function TextArea(props) {
+    const { value = '', scope, onChange, multiline = true, changeOnSelect } = props;
+    const { styles } = (0,__WEBPACK_EXTERNAL_MODULE__style_mjs__.useStyles)({
+        multiline
+    });
+    const inputRef = (0,__WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [options, setOptions] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
+    const form = (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useForm)();
+    const keyLabelMap = (0,__WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>createOptionsValueLabelMap(options), [
+        options
+    ]);
+    const [ime, setIME] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [changed, setChanged] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [html, setHtml] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)(()=>renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap));
+    // NOTE: e.g. [startElementIndex, startOffset, endElementIndex, endOffset]
+    const [range, setRange] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)([
+        -1,
+        0,
+        -1,
+        0
+    ]);
+    (0,__WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        preloadOptions(scope, value).then((preloaded)=>{
+            setOptions(preloaded);
+        }).catch((err)=>console.error);
+    }, [
+        scope,
+        value
+    ]);
+    (0,__WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        setHtml(renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap));
+        if (!changed) {
+            setRange([
+                -1,
+                0,
+                -1,
+                0
+            ]);
+        }
+    }, [
+        value,
+        keyLabelMap
+    ]);
+    (0,__WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        const { current } = inputRef;
+        if (!current) {
+            return;
+        }
+        const nextRange = new Range();
+        if (changed) {
+            var _window_getSelection, _window;
+            // setChanged(false);
+            if (range.join() === '-1,0,-1,0') {
+                return;
+            }
+            const sel = (_window_getSelection = (_window = window).getSelection) === null || _window_getSelection === void 0 ? void 0 : _window_getSelection.call(_window);
+            if (sel) {
+                try {
+                    const children = Array.from(current.childNodes);
+                    if (children.length) {
+                        if (range[0] === -1) {
+                            if (range[1]) {
+                                nextRange.setStartAfter(children[range[1] - 1]);
+                            }
+                        } else {
+                            nextRange.setStart(children[range[0]], range[1]);
+                        }
+                        if (range[2] === -1) {
+                            if (range[3]) {
+                                nextRange.setEndAfter(children[range[3] - 1]);
+                            }
+                        } else {
+                            nextRange.setEnd(children[range[2]], range[3]);
+                        }
+                    }
+                    nextRange.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(nextRange);
+                } catch (ex) {
+                // console.error(ex);
+                }
+            }
+        } else {
+            const { lastChild } = current;
+            if (lastChild) {
+                nextRange.setStartAfter(lastChild);
+                nextRange.setEndAfter(lastChild);
+                const nodes = Array.from(current.childNodes);
+                const startElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
+                const endElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
+                setRange([
+                    startElementIndex,
+                    nextRange.startOffset,
+                    endElementIndex,
+                    nextRange.endOffset
+                ]);
+            }
+        }
+    }, [
+        html
+    ]);
+    const onInsert = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(function(paths) {
+        const variable = paths.filter((key)=>Boolean(key.trim()));
+        const { current } = inputRef;
+        if (!current || !variable) {
+            return;
+        }
+        current.focus();
+        const content = createVariableTagHTML(variable.join('.'), keyLabelMap);
+        pasteHTML(current, content, {
+            range
+        });
+        setChanged(true);
+        setRange(getCurrentRange(current));
+        onChange(getValue(current));
+    }, [
+        keyLabelMap,
+        onChange,
+        range
+    ]);
+    const onInput = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(function(param) {
+        let { currentTarget } = param;
+        if (ime) {
+            return;
+        }
+        setChanged(true);
+        setRange(getCurrentRange(currentTarget));
+        onChange(getValue(currentTarget));
+    }, [
+        ime,
+        onChange
+    ]);
+    const onBlur = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(function(param) {
+        let { currentTarget } = param;
+        setRange(getCurrentRange(currentTarget));
+    }, []);
+    const onKeyDown = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(function(ev) {
+        if (ev.key === 'Enter') {
+            ev.preventDefault();
+        }
+    }, []);
+    const onCompositionStart = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(function() {
+        setIME(true);
+    }, []);
+    const onCompositionEnd = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)((param)=>{
+        let { currentTarget } = param;
+        setIME(false);
+        setChanged(true);
+        setRange(getCurrentRange(currentTarget));
+        onChange(getValue(currentTarget));
+    }, [
+        onChange
+    ]);
+    const onPaste = (0,__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(function(ev) {
+        ev.preventDefault();
+        const input = ev.clipboardData.getData('text/html') || ev.clipboardData.getData('text');
+        const sanitizedHTML = (0,__WEBPACK_EXTERNAL_MODULE_sanitize_html__["default"])(input, {
+            allowedTags: [
+                'span'
+            ],
+            allowedAttributes: {
+                span: [
+                    'data-variable',
+                    'contenteditable'
+                ]
+            },
+            allowedClasses: {
+                span: [
+                    'ant-tag',
+                    'ant-tag-*'
+                ]
+            },
+            transformTags: {
+                span (tagName, attribs) {
+                    return attribs['data-variable'] ? {
+                        tagName: tagName,
+                        attribs
+                    } : {};
+                }
+            }
+        }).replace(/\n/g, ' ');
+        setChanged(true);
+        pasteHTML(ev.currentTarget, sanitizedHTML);
+        setRange(getCurrentRange(ev.currentTarget));
+        onChange(getValue(ev.currentTarget));
+    }, [
+        onChange
+    ]);
+    const disabled = props.disabled || form.disabled;
+    return /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space.Compact, {
+        className: (0,__WEBPACK_EXTERNAL_MODULE_classnames__["default"])(styles.fixInput, styles.outerContainer, styles.container),
+        children: [
+            /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
+                role: "button",
+                "aria-label": "textbox",
+                onInput: onInput,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                onPaste: onPaste,
+                onCompositionStart: onCompositionStart,
+                onCompositionEnd: onCompositionEnd,
+                className: (0,__WEBPACK_EXTERNAL_MODULE_classnames__["default"])('ant-input', {
+                    'ant-input-disabled': disabled
+                }, styles.button),
+                ref: inputRef,
+                contentEditable: !disabled,
+                dangerouslySetInnerHTML: {
+                    __html: html
+                }
+            }),
+            !disabled ? /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__VariableSelect_mjs__.VariableSelect, {
+                className: "",
+                options: options,
+                setOptions: setOptions,
+                onInsert: onInsert,
+                changeOnSelect: changeOnSelect
+            }) : null
+        ]
+    });
+}
+async function preloadOptions(scope, value) {
+    const options = (0,__WEBPACK_EXTERNAL_MODULE_lodash__.cloneDeep)(scope !== null && scope !== void 0 ? scope : []);
+    // 重置正则的匹配位置
+    VARIABLE_RE.lastIndex = 0;
+    for(let matcher; matcher = VARIABLE_RE.exec(value !== null && value !== void 0 ? value : '');){
+        const keys = matcher[1].split('.');
+        let prevOption = null;
+        for(let i = 0; i < keys.length; i++){
+            const key = keys[i];
+            try {
+                if (i === 0) {
+                    prevOption = options.find((item)=>item.value === key);
+                } else {
+                    var _prevOption_children;
+                    if (prevOption.loadChildren && !((_prevOption_children = prevOption.children) === null || _prevOption_children === void 0 ? void 0 : _prevOption_children.length)) {
+                        await prevOption.loadChildren(prevOption);
+                    }
+                    prevOption = prevOption.children.find((item)=>item.value === key);
+                }
+            } catch (err) {
+                (0,__WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__.error)(err);
+            }
+        }
+    }
+    return options;
+}
+TextArea.ReadPretty = function ReadPretty(props) {
+    const { value } = props;
+    const scope = typeof props.scope === 'function' ? props.scope() : props.scope;
+    const [options, setOptions] = (0,__WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
+    const keyLabelMap = (0,__WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>createOptionsValueLabelMap(options), [
+        options
+    ]);
+    const { styles } = (0,__WEBPACK_EXTERNAL_MODULE__style_mjs__.useStyles)();
+    (0,__WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        preloadOptions(scope, value).then((preloaded)=>{
+            setOptions(preloaded);
+        }).catch(__WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__.error);
+    }, [
+        scope,
+        value
+    ]);
+    const html = renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap);
+    const content = /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
+        dangerouslySetInnerHTML: {
+            __html: html
+        },
+        className: styles.pretty
+    });
+    return /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.EllipsisWithTooltip, {
+        ellipsis: true,
+        popoverContent: content,
+        children: content
+    });
+};
+
+export { TextArea };

package/lib/schema-component/antd/variable/Variable.mjs

@@ -0,0 +1,57 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__tachybase_schema__ from "@tachybase/schema";
+import * as __WEBPACK_EXTERNAL_MODULE__CodeMirror_mjs__ from "./CodeMirror.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__Input_mjs__ from "./Input.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__JSONInput_mjs__ from "./JSONInput.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__RawTextArea_mjs__ from "./RawTextArea.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__TextArea_mjs__ from "./TextArea.mjs";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "@tachybase/schema"
+
+;// CONCATENATED MODULE: external "./CodeMirror.mjs"
+
+;// CONCATENATED MODULE: external "./Input.mjs"
+
+;// CONCATENATED MODULE: external "./JSONInput.mjs"
+
+;// CONCATENATED MODULE: external "./RawTextArea.mjs"
+
+;// CONCATENATED MODULE: external "./TextArea.mjs"
+
+;// CONCATENATED MODULE: ./packages/client/src/schema-component/antd/variable/Variable.tsx?__rslib_entry__
+
+
+
+
+
+
+
+
+const VariableScopeContext = /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react__.createContext)([]);
+VariableScopeContext.displayName = 'VariableScopeContext';
+function VariableScopeProvider(param) {
+    let { scope = [], children } = param;
+    return /*#__PURE__*/ (0,__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(VariableScopeContext.Provider, {
+        value: scope,
+        children: children
+    });
+}
+function useVariableScope() {
+    return (0,__WEBPACK_EXTERNAL_MODULE_react__.useContext)(VariableScopeContext);
+}
+function Variable() {
+    return null;
+}
+Variable.Input = (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.connect)(__WEBPACK_EXTERNAL_MODULE__Input_mjs__.Input);
+Variable.TextArea = (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.connect)(__WEBPACK_EXTERNAL_MODULE__TextArea_mjs__.TextArea, (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.mapReadPretty)(__WEBPACK_EXTERNAL_MODULE__TextArea_mjs__.TextArea.ReadPretty));
+Variable.RawTextArea = (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.connect)(__WEBPACK_EXTERNAL_MODULE__RawTextArea_mjs__.RawTextArea);
+Variable.JSON = (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.connect)(__WEBPACK_EXTERNAL_MODULE__JSONInput_mjs__.JSONInput);
+Variable.CodeMirror = (0,__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.connect)(__WEBPACK_EXTERNAL_MODULE__CodeMirror_mjs__.CodeMirror);
+/* ESM default export */ const Variable_rslib_entry_ = (Variable);
+
+export { Variable, VariableScopeProvider, Variable_rslib_entry_ as default, useVariableScope };