@nocobase/client 0.9.1-alpha.2 → 0.9.2-alpha.1

package/es/schema-component/antd/variable/TextArea.js

@@ -1,94 +1,75 @@
 var _templateObject, _templateObject2, _templateObject3;
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { Input, Cascader, Tooltip, Button } from 'antd';
+import { Input } from 'antd';
 import { useForm } from '@formily/react';
 import { cx, css } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
-import { useCompile } from '../..';
+import * as sanitizeHTML from 'sanitize-html';
+import { EllipsisWithTooltip, useCompile } from '../..';
+import { VariableSelect } from './VariableSelect';
 var VARIABLE_RE = /{{\s*([^{}]+)\s*}}/g;
-
-function pasteHtml(container, html, _ref) {
+function pasteHTML(container, html) {
   var _window$getSelection, _window;
-
-  var _ref$selectPastedCont = _ref.selectPastedContent,
-      selectPastedContent = _ref$selectPastedCont === void 0 ? false : _ref$selectPastedCont,
-      indexes = _ref.range;
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$selectPastedCont = _ref.selectPastedContent,
+    selectPastedContent = _ref$selectPastedCont === void 0 ? false : _ref$selectPastedCont,
+    indexes = _ref.range;
   // IE9 and non-IE
   var sel = (_window$getSelection = (_window = window).getSelection) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.call(_window);
-
-  if (!(sel === null || sel === void 0 ? void 0 : sel.getRangeAt) || !sel.rangeCount) {
-    return;
-  }
-
-  var range = sel.getRangeAt(0);
-
+  var range = sel === null || sel === void 0 ? void 0 : sel.getRangeAt(0);
   if (!range) {
     return;
   }
-
-  var children = Array.from(container.childNodes);
-
-  if (indexes[0] === -1) {
-    if (indexes[1]) {
-      range.setStartAfter(children[indexes[1] - 1]);
+  if (indexes) {
+    var 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]);
     }
-  } else {
-    range.setStart(children[indexes[0]], indexes[1]);
-  }
-
-  if (indexes[2] === -1) {
-    if (indexes[3]) {
-      range.setEndAfter(children[indexes[3] - 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]);
     }
-  } else {
-    range.setEnd(children[indexes[2]], indexes[3]);
   }
-
-  range.deleteContents(); // Range.createContextualFragment() would be useful here but is
+  // Range.createContextualFragment() would be useful here but is
   // only relatively recently standardized and is not supported in
   // some browsers (IE9, for one)
-
   var el = document.createElement('div');
   el.innerHTML = html;
   var frag = document.createDocumentFragment();
   var lastNode;
-
   while (el.firstChild) {
     lastNode = frag.appendChild(el.firstChild);
   }
-
   var firstChild = frag.firstChild;
-  range.insertNode(frag); // Preserve the selection
-
+  range.deleteContents();
+  range.insertNode(frag);
+  // Preserve the selection
   if (lastNode) {
-    var next = range.cloneRange();
+    var next = new Range();
     next.setStartAfter(lastNode);
-
     if (selectPastedContent) {
       if (firstChild) {
         next.setStartBefore(firstChild);
@@ -96,28 +77,21 @@ function pasteHtml(container, html, _ref) {
     } else {
       next.collapse(true);
     }
-
     sel.removeAllRanges();
     sel.addRange(next);
   }
 }
-
 function getValue(el) {
   var values = [];
-
   var _iterator = _createForOfIteratorHelper(el.childNodes),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var node = _step.value;
-
-      if (node.nodeName === 'SPAN') {
-        values.push("{{".concat(node['dataset']['key'], "}}"));
+      if (node.nodeName === 'SPAN' && node['dataset']['variable']) {
+        values.push("{{".concat(node['dataset']['variable'], "}}"));
       } else {
-        var _node$textContent, _node$textContent$tri;
-
-        values.push((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : (_node$textContent$tri = _node$textContent.trim) === null || _node$textContent$tri === void 0 ? void 0 : _node$textContent$tri.call(_node$textContent));
+        values.push(node.textContent);
       }
     }
   } catch (err) {
@@ -125,40 +99,31 @@ function getValue(el) {
   } finally {
     _iterator.f();
   }
-
-  return values.join(' ').replace(/\s+/g, ' ').trim();
+  return values.join('');
 }
-
 function renderHTML(exp, keyLabelMap) {
   return exp.replace(VARIABLE_RE, function (_, i) {
     var _createVariableTagHTM;
-
     var key = i.trim();
     return (_createVariableTagHTM = createVariableTagHTML(key, keyLabelMap)) !== null && _createVariableTagHTM !== void 0 ? _createVariableTagHTM : '';
   });
 }
-
 function createOptionsValueLabelMap(options) {
   var map = new Map();
-
   var _iterator2 = _createForOfIteratorHelper(options),
-      _step2;
-
+    _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var option = _step2.value;
       map.set(option.value, [option.label]);
-
       if (option.children) {
         var _iterator3 = _createForOfIteratorHelper(createOptionsValueLabelMap(option.children)),
-            _step3;
-
+          _step3;
         try {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var _step3$value = _slicedToArray(_step3.value, 2),
-                value = _step3$value[0],
-                labels = _step3$value[1];
-
+              value = _step3$value[0],
+              labels = _step3$value[1];
             map.set("".concat(option.value, ".").concat(value), [option.label].concat(_toConsumableArray(labels)));
           }
         } catch (err) {
@@ -173,123 +138,238 @@ function createOptionsValueLabelMap(options) {
   } finally {
     _iterator2.f();
   }
-
   return map;
 }
-
 function createVariableTagHTML(variable, keyLabelMap) {
   var labels = keyLabelMap.get(variable);
-  return "<span class=\"ant-tag ant-tag-blue\" contentEditable=\"false\" data-key=\"".concat(variable, "\">").concat(labels === null || labels === void 0 ? void 0 : labels.join(' / '), "</span>");
+  return "<span class=\"ant-tag ant-tag-blue\" contentEditable=\"false\" data-variable=\"".concat(variable, "\">").concat(labels === null || labels === void 0 ? void 0 : labels.join(' / '), "</span>");
+}
+// [#, <>, #, #, <>]
+// [#, #]
+// [<>, #, #]
+// [#, #, <>]
+function getSingleEndRange(nodes, index, offset) {
+  if (index === -1) {
+    var _nodes$realIndex;
+    var realIndex = offset;
+    var 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;
+    }
+    var textOffset = 0;
+    for (var 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 {
+    var _realIndex = 0;
+    var _textOffset = 0;
+    for (var _i2 = 0; _i2 < index + 1; _i2++) {
+      // console.log(i, realIndex, textOffset);
+      if (nodes[_i2].nodeName === '#text') {
+        if (_i2 !== index && nodes[_i2 + 1] && nodes[_i2 + 1].nodeName !== '#text') {
+          _realIndex += 1;
+        }
+        _textOffset += _i2 === index ? offset : nodes[_i2].textContent.length;
+      } else {
+        _realIndex += 1;
+        _textOffset = 0;
+      }
+    }
+    return [_realIndex, _textOffset];
+  }
+}
+function getCurrentRange(element) {
+  var _window$getSelection2, _window2;
+  var sel = (_window$getSelection2 = (_window2 = window).getSelection) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.call(_window2);
+  var range = sel === null || sel === void 0 ? void 0 : sel.getRangeAt(0);
+  if (!range) {
+    return [-1, 0, -1, 0];
+  }
+  var nodes = Array.from(element.childNodes);
+  if (!nodes.length) {
+    return [-1, 0, -1, 0];
+  }
+  var startElementIndex = range.startContainer === element ? -1 : nodes.indexOf(range.startContainer);
+  var endElementIndex = range.endContainer === element ? -1 : nodes.indexOf(range.endContainer);
+  var result = [].concat(_toConsumableArray(getSingleEndRange(nodes, startElementIndex, range.startOffset)), _toConsumableArray(getSingleEndRange(nodes, endElementIndex, range.endOffset)));
+  return result;
 }
-
 export function TextArea(props) {
   var _ref2;
-
   var _props$value = props.value,
-      value = _props$value === void 0 ? '' : _props$value,
-      scope = props.scope,
-      onChange = props.onChange,
-      _props$multiline = props.multiline,
-      multiline = _props$multiline === void 0 ? true : _props$multiline,
-      button = props.button;
+    value = _props$value === void 0 ? '' : _props$value,
+    scope = props.scope,
+    onChange = props.onChange,
+    _props$multiline = props.multiline,
+    multiline = _props$multiline === void 0 ? true : _props$multiline;
   var compile = useCompile();
-
   var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
+    t = _useTranslation.t;
   var inputRef = useRef(null);
   var options = compile((_ref2 = typeof scope === 'function' ? scope() : scope) !== null && _ref2 !== void 0 ? _ref2 : []);
   var form = useForm();
   var keyLabelMap = useMemo(function () {
     return createOptionsValueLabelMap(options);
   }, [scope]);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      changed = _useState2[0],
-      setChanged = _useState2[1];
-
-  var _useState3 = useState(function () {
-    return renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap);
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      html = _useState4[0],
-      setHtml = _useState4[1]; // [startElementIndex, startOffset, endElementIndex, endOffset]
-
-
-  var _useState5 = useState([-1, 0, -1, 0]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      range = _useState6[0],
-      setRange = _useState6[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    ime = _useState2[0],
+    setIME = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    changed = _useState4[0],
+    setChanged = _useState4[1];
+  var _useState5 = useState(function () {
+      return renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap);
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    html = _useState6[0],
+    setHtml = _useState6[1];
+  // NOTE: e.g. [startElementIndex, startOffset, endElementIndex, endOffset]
+  var _useState7 = useState([-1, 0, -1, 0]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    range = _useState8[0],
+    setRange = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedVar = _useState10[0],
+    setSelectedVar = _useState10[1];
+  useEffect(function () {
+    setSelectedVar([]);
+  }, [scope]);
   useEffect(function () {
-    if (changed) {
-      return;
-    }
-
     setHtml(renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap));
+    if (!changed) {
+      setRange([-1, 0, -1, 0]);
+    }
   }, [value]);
   useEffect(function () {
     var current = inputRef.current;
-
-    if (!current || changed) {
+    if (!current) {
       return;
     }
-
     var nextRange = new Range();
-    var lastChild = current.lastChild;
-
-    if (lastChild) {
-      nextRange.setStartAfter(lastChild);
-      nextRange.setEndAfter(lastChild);
-      var nodes = Array.from(current.childNodes);
-      var startElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
-      var endElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
-      setRange([startElementIndex, nextRange.startOffset, endElementIndex, nextRange.endOffset]);
+    if (changed) {
+      var _window$getSelection3, _window3;
+      setChanged(false);
+      if (range.join() === '-1,0,-1,0') {
+        return;
+      }
+      var sel = (_window$getSelection3 = (_window3 = window).getSelection) === null || _window$getSelection3 === void 0 ? void 0 : _window$getSelection3.call(_window3);
+      if (sel) {
+        var children = Array.from(current.childNodes);
+        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);
+      }
+    } else {
+      var lastChild = current.lastChild;
+      if (lastChild) {
+        nextRange.setStartAfter(lastChild);
+        nextRange.setEndAfter(lastChild);
+        var nodes = Array.from(current.childNodes);
+        var startElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
+        var endElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
+        setRange([startElementIndex, nextRange.startOffset, endElementIndex, nextRange.endOffset]);
+      }
     }
   }, [html]);
-
-  function onInsert(keyPath) {
-    var variable = keyPath.filter(function (key) {
+  function onInsert(paths) {
+    var variable = paths.filter(function (key) {
       return Boolean(key.trim());
     });
     var current = inputRef.current;
-
     if (!current || !variable) {
       return;
     }
-
     current.focus();
-    pasteHtml(current, createVariableTagHTML(variable.join('.'), keyLabelMap), {
+    var content = createVariableTagHTML(variable.join('.'), keyLabelMap);
+    pasteHTML(current, content, {
       range: range
     });
     setChanged(true);
+    setRange(getCurrentRange(current));
     onChange(getValue(current));
   }
-
   function onInput(_ref3) {
     var currentTarget = _ref3.currentTarget;
+    if (ime) {
+      return;
+    }
     setChanged(true);
+    setRange(getCurrentRange(currentTarget));
     onChange(getValue(currentTarget));
   }
-
   function onBlur(_ref4) {
-    var _window$getSelection2, _window2;
-
     var currentTarget = _ref4.currentTarget;
-    var sel = (_window$getSelection2 = (_window2 = window).getSelection) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.call(_window2);
-
-    if (!(sel === null || sel === void 0 ? void 0 : sel.getRangeAt) || !sel.rangeCount) {
-      return;
+    setRange(getCurrentRange(currentTarget));
+  }
+  function onKeyDown(ev) {
+    if (ev.key === 'Enter') {
+      ev.preventDefault();
     }
-
-    var r = sel.getRangeAt(0);
-    var nodes = Array.from(currentTarget.childNodes);
-    var startElementIndex = nodes.indexOf(r.startContainer);
-    var endElementIndex = nodes.indexOf(r.endContainer);
-    setRange([startElementIndex, r.startOffset, endElementIndex, r.endOffset]);
+    setIME(ev.keyCode === 229);
+    // if (ev.key === 'Control') {
+    //   console.debug(getSelection().getRangeAt(0));
+    // }
+    // if (ev.key === 'Alt') {
+    //   console.debug(getCurrentRange(ev.currentTarget));
+    // }
   }
 
+  function onPaste(ev) {
+    ev.preventDefault();
+    var input = ev.clipboardData.getData('text/html') || ev.clipboardData.getData('text');
+    var sanitizedHTML = sanitizeHTML(input, {
+      allowedTags: ['span'],
+      allowedAttributes: {
+        span: ['data-variable', 'contenteditable']
+      },
+      allowedClasses: {
+        span: ['ant-tag', 'ant-tag-*']
+      },
+      transformTags: {
+        span: function span(tagName, attribs) {
+          return attribs['data-variable'] ? {
+            tagName: tagName,
+            attribs: attribs
+          } : {};
+        }
+      }
+    }).replace(/\n/g, ' ');
+    // ev.clipboardData.setData('text/html', sanitizedHTML);
+    // console.log(input, sanitizedHTML);
+    setChanged(true);
+    pasteHTML(ev.currentTarget, sanitizedHTML);
+    setRange(getCurrentRange(ev.currentTarget));
+    onChange(getValue(ev.currentTarget));
+  }
   var disabled = props.disabled || form.disabled;
   return /*#__PURE__*/React.createElement(Input.Group, {
     compact: true,
@@ -297,11 +377,8 @@ export function TextArea(props) {
   }, /*#__PURE__*/React.createElement("div", {
     onInput: onInput,
     onBlur: onBlur,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-      }
-    },
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
     className: cx('ant-input', {
       'ant-input-disabled': disabled
     }, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            overflow: auto;\n            white-space: ", ";\n\n            .ant-tag {\n              display: inline;\n              line-height: 19px;\n              margin: 0 0.5em;\n              padding: 2px 7px;\n              border-radius: 10px;\n            }\n          "])), multiline ? 'normal' : 'nowrap')),
@@ -310,13 +387,31 @@ export function TextArea(props) {
     dangerouslySetInnerHTML: {
       __html: html
     }
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: t('Use variable')
-  }, /*#__PURE__*/React.createElement(Cascader, {
-    value: [],
+  }), !disabled ? /*#__PURE__*/React.createElement(VariableSelect, {
     options: options,
-    onChange: onInsert
-  }, button !== null && button !== void 0 ? button : /*#__PURE__*/React.createElement(Button, {
-    className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                font-style: italic;\n                font-family: 'New York', 'Times New Roman', Times, serif;\n              "])))
-  }, "x"))));
-}
+    onInsert: onInsert
+  }) : null);
+}
+TextArea.ReadPretty = function (props) {
+  var _ref5;
+  var value = props.value,
+    _props$multiline2 = props.multiline,
+    multiline = _props$multiline2 === void 0 ? true : _props$multiline2,
+    scope = props.scope;
+  var compile = useCompile();
+  var options = compile((_ref5 = typeof scope === 'function' ? scope() : scope) !== null && _ref5 !== void 0 ? _ref5 : []);
+  var keyLabelMap = useMemo(function () {
+    return createOptionsValueLabelMap(options);
+  }, [scope]);
+  var html = renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap);
+  var content = /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: html
+    },
+    className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n\n        .ant-tag {\n          display: inline;\n          line-height: 19px;\n          margin: 0 .25em;\n          padding: 2px 7px;\n          border-radius: 10px;\n        }\n      "])))
+  });
+  return /*#__PURE__*/React.createElement(EllipsisWithTooltip, {
+    ellipsis: true,
+    popoverContent: content
+  }, content);
+};

package/es/schema-component/antd/variable/Variable.js

@@ -1,4 +1,4 @@
-import { connect } from '@formily/react';
+import { connect, mapReadPretty } from '@formily/react';
 import { Input } from "./Input";
 import { TextArea } from "./TextArea";
 import { JSONInput } from "./JSONInput";
@@ -6,6 +6,6 @@ export function Variable() {
   return null;
 }
 Variable.Input = connect(Input);
-Variable.TextArea = connect(TextArea);
+Variable.TextArea = connect(TextArea, mapReadPretty(TextArea.ReadPretty));
 Variable.JSON = connect(JSONInput);
 export default Variable;

package/es/schema-component/antd/variable/VariableSelect.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function VariableSelect(props: any): JSX.Element;

package/es/schema-component/antd/variable/VariableSelect.js

@@ -0,0 +1,65 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { css, cx } from "@emotion/css";
+import { Button, Cascader } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+export function VariableSelect(props) {
+  var options = props.options,
+    onInsert = props.onInsert;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedVar = _useState2[0],
+    setSelectedVar = _useState2[1];
+  useEffect(function () {
+    setSelectedVar([]);
+  }, [options]);
+  return /*#__PURE__*/React.createElement(Button, {
+    className: cx('x-button', css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      .ant-select.ant-cascader{\n        position: absolute;\n        top: -1px;\n        left: -1px;\n        min-width: auto;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n        overflow: hidden;\n        opacity: 0;\n      }\n    "]))))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          font-style: italic;\n          font-family: \"New York\", \"Times New Roman\", Times, serif;\n        "])))
+  }, "x"), /*#__PURE__*/React.createElement(Cascader, {
+    placeholder: t('Select a variable'),
+    value: [],
+    options: options,
+    onChange: function onChange() {
+      var _option$children;
+      var keyPaths = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      setSelectedVar(keyPaths);
+      if (!keyPaths.length) {
+        return;
+      }
+      var option = selectedOptions[selectedOptions.length - 1];
+      if (!(option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : _option$children.length)) {
+        onInsert(keyPaths);
+      }
+    },
+    changeOnSelect: true,
+    onClick: function onClick(e) {
+      if (e.detail !== 2) {
+        return;
+      }
+      for (var n = e.target; n && n !== e.currentTarget; n = n.parentNode) {
+        var _n$classList;
+        if (Array.from((_n$classList = n.classList) !== null && _n$classList !== void 0 ? _n$classList : []).includes('ant-cascader-menu-item')) {
+          onInsert(selectedVar);
+        }
+      }
+    },
+    dropdownClassName: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-cascader-menu{\n            margin-bottom: 0;\n          }\n        "]))),
+    dropdownRender: function dropdownRender(menu) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, menu, /*#__PURE__*/React.createElement("div", {
+        className: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                padding: .5em;\n                border-top: 1px solid rgba(0, 0, 0, .06);\n                color: rgba(0, 0, 0, .45);\n              "])))
+      }, t('Double click to choose entire object')));
+    }
+  }));
+}

package/es/schema-component/antd/variable/XButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const XButton: React.ForwardRefExoticComponent<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: "button" | "submit" | "reset";
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">> & React.RefAttributes<unknown>>;