amis-ui 1.0.0-beta.0

package/esm-dist/components/formula/Picker.js

@@ -0,0 +1,222 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __rest, __decorate, __metadata } from 'tslib';
+import { uncontrollable } from 'uncontrollable';
+import React__default from 'react';
+import Editor, { FormulaEditor } from './Editor.js';
+import { parse, Evaluator, generateIcon, noop, autobind, themeable, localeable } from 'amis-core';
+import ResultBox from '../ResultBox.js';
+import Button from '../Button.js';
+import { Icon } from '../icons.js';
+import FinalModal from '../Modal.js';
+
+var FormulaPicker = /** @class */ (function (_super) {
+    __extends(FormulaPicker, _super);
+    function FormulaPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            value: _this.props.value,
+            editorValue: _this.props.value,
+            isError: false
+        };
+        _this.props.onRef && _this.props.onRef(_this);
+        return _this;
+    }
+    FormulaPicker.prototype.handleConfirm = function () {
+        var _a, _b;
+        var value = this.state.value;
+        if (this.props.onConfirm) {
+            this.props.onConfirm(value);
+        }
+        else {
+            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        }
+    };
+    FormulaPicker.prototype.renderFormulaValue = function (item) {
+        var _a = this.props, allowInput = _a.allowInput, cx = _a.classnames;
+        var html = { __html: item.html };
+        if (allowInput) {
+            return '';
+        }
+        return (React__default.createElement("div", { className: cx('FormulaPicker-ResultBox'), dangerouslySetInnerHTML: html }));
+    };
+    FormulaPicker.prototype.handleInputChange = function (value) {
+        var _this = this;
+        this.setState({ value: value }, function () { return _this.handleConfirm(); });
+    };
+    FormulaPicker.prototype.handleEditorChange = function (value) {
+        this.setState({
+            editorValue: value,
+            isError: false
+        });
+    };
+    FormulaPicker.prototype.handleEditorConfirm = function () {
+        var _this = this;
+        this.props.translate;
+        var value = this.state.editorValue;
+        var validate = this.validate(value);
+        if (validate === true) {
+            this.setState({ value: value }, function () {
+                _this.close(undefined, function () { return _this.handleConfirm(); });
+            });
+        }
+        else {
+            this.setState({ isError: validate });
+        }
+    };
+    FormulaPicker.prototype.handleClick = function () {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var state, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _c = [{}];
+                        return [4 /*yield*/, ((_b = (_a = this.props).onPickerOpen) === null || _b === void 0 ? void 0 : _b.call(_a, this.props))];
+                    case 1:
+                        state = __assign.apply(void 0, [__assign.apply(void 0, _c.concat([(_d.sent())])), { editorValue: this.props.value, isOpened: true }]);
+                        this.setState(state);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FormulaPicker.prototype.close = function (e, callback) {
+        this.setState({
+            isOpened: false,
+            isError: false
+        }, function () {
+            if (callback) {
+                callback();
+                return;
+            }
+        });
+    };
+    FormulaPicker.prototype.updateState = function (state) {
+        if (state === void 0) { state = {}; }
+        state.isOpened; var rest = __rest(state, ["isOpened"]);
+        this.setState(__assign(__assign({}, this.state), rest));
+    };
+    FormulaPicker.prototype.validate = function (value) {
+        this.props.translate;
+        try {
+            var ast = parse(value, {
+                evalMode: this.props.evalMode,
+                allowFilter: false
+            });
+            new Evaluator({}).evalute(ast);
+            return true;
+        }
+        catch (e) {
+            if (/\s(\d+:\d+)$/.test(e.message)) {
+                var _a = /\s(\d+:\d+)$/.exec(e.message) || [], position = _a[1];
+                return position;
+            }
+            return e.message;
+        }
+    };
+    FormulaPicker.prototype.render = function () {
+        var _a, _b, _c;
+        var _d, _e, _f, _g, _h;
+        var _j = this.props, cx = _j.classnames, __ = _j.translate, disabled = _j.disabled, allowInput = _j.allowInput, className = _j.className; _j.onChange; _j.size; var borderMode = _j.borderMode, placeholder = _j.placeholder, mode = _j.mode, btnLabel = _j.btnLabel, level = _j.level, btnSize = _j.btnSize, icon = _j.icon, title = _j.title, clearable = _j.clearable, variables = _j.variables, functions = _j.functions, children = _j.children, variableMode = _j.variableMode, rest = __rest(_j, ["classnames", "translate", "disabled", "allowInput", "className", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "variables", "functions", "children", "variableMode"]);
+        var _k = this.state, isOpened = _k.isOpened, value = _k.value, editorValue = _k.editorValue, isError = _k.isError;
+        var iconElement = generateIcon(cx, icon, 'Icon');
+        return (React__default.createElement(React__default.Fragment, null,
+            children ? (children({
+                isOpened: this.state.isOpened,
+                onClick: this.handleClick,
+                setState: this.updateState
+            })) : (React__default.createElement("div", { className: cx('FormulaPicker', className) }, mode === 'button' ? (React__default.createElement(Button, { className: cx('FormulaPicker-action', 'w-full'), level: level, size: btnSize, onClick: this.handleClick },
+                iconElement ? (React__default.cloneElement(iconElement, {
+                    className: cx((_e = (_d = iconElement === null || iconElement === void 0 ? void 0 : iconElement.props) === null || _d === void 0 ? void 0 : _d.className) !== null && _e !== void 0 ? _e : '', 'FormulaPicker-icon', (_a = {},
+                        _a['is-filled'] = !!value,
+                        _a))
+                })) : (React__default.createElement(Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_b = {},
+                        _b['is-filled'] = !!value,
+                        _b)) })),
+                React__default.createElement("span", { className: cx('FormulaPicker-label') }, __(btnLabel || 'FormulaEditor.btnLabel')))) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(ResultBox, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), allowInput: allowInput, clearable: clearable, value: value, result: allowInput
+                        ? void 0
+                        : FormulaEditor.highlightValue(value, variables, this.props.evalMode), itemRender: this.renderFormulaValue, onResultChange: noop, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                React__default.createElement(Button, { className: cx('FormulaPicker-action'), onClick: this.handleClick },
+                    React__default.createElement(Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_c = {},
+                            _c['is-filled'] = !!value,
+                            _c)) })))))),
+            React__default.createElement(FinalModal, { size: "md", closeOnEsc: true, show: this.state.isOpened, onHide: this.close },
+                React__default.createElement(FinalModal.Header, { onClose: this.close, className: "font-bold" }, __(title || 'FormulaEditor.title')),
+                React__default.createElement(FinalModal.Body, null,
+                    React__default.createElement(Editor, __assign({}, rest, { variables: (_f = this.state.variables) !== null && _f !== void 0 ? _f : variables, functions: (_g = this.state.functions) !== null && _g !== void 0 ? _g : functions, variableMode: (_h = this.state.variableMode) !== null && _h !== void 0 ? _h : variableMode, value: editorValue, onChange: this.handleEditorChange }))),
+                React__default.createElement(FinalModal.Footer, null,
+                    !!isError ? (React__default.createElement("div", { className: cx('Dialog-info'), key: "info" },
+                        React__default.createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null,
+                    React__default.createElement(Button, { onClick: this.close }, __('cancel')),
+                    React__default.createElement(Button, { onClick: this.handleEditorConfirm, level: "primary" }, __('confirm'))))));
+    };
+    FormulaPicker.defaultProps = {
+        evalMode: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "renderFormulaValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleInputChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleEditorChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleEditorConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], FormulaPicker.prototype, "handleClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Function]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "close", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "updateState", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "validate", null);
+    return FormulaPicker;
+}(React__default.Component));
+var Picker = themeable(localeable(uncontrollable(FormulaPicker, {
+    value: 'onChange'
+})));
+
+export { FormulaPicker, Picker as default };

package/esm-dist/components/formula/VariableList.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import type { VariableItem } from './Editor';
+import type { ItemRenderStates } from '../Selection';
+import type { Option } from '../Select';
+import type { TabsMode } from '../Tabs';
+export interface VariableListProps extends ThemeProps {
+    className?: string;
+    itemClassName?: string;
+    value?: any;
+    data: Array<VariableItem>;
+    selectMode?: 'list' | 'tree' | 'tabs';
+    tabsMode?: TabsMode;
+    itemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;
+    onSelect?: (item: VariableItem) => void;
+}
+declare function VariableList(props: VariableListProps): JSX.Element;
+declare const _default: {
+    new (props: Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<VariableListProps, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof VariableList>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof VariableList, {}> & {
+    ComposedComponent: typeof VariableList;
+};
+export default _default;

package/esm-dist/components/formula/VariableList.js

@@ -0,0 +1,41 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import React__default from 'react';
+import { themeable, findTree } from 'amis-core';
+import ListSelection from '../GroupedSelection.js';
+import ThemedTabs, { Tab } from '../Tabs.js';
+import TreeSelection from '../TreeSelection.js';
+import SearchBox from '../SearchBox.js';
+
+function VariableList(props) {
+    var list = props.data, className = props.className, cx = props.classnames, _a = props.tabsMode, tabsMode = _a === void 0 ? 'line' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect;
+    var _b = React__default.useState(list), filterVars = _b[0], setFilterVars = _b[1];
+    var classPrefix = "".concat(themePrefix, "FormulaEditor-VariableList");
+    var itemRender = props.itemRender && typeof props.itemRender === 'function'
+        ? props.itemRender
+        : function (option, states) {
+            return (React__default.createElement("span", { className: cx("".concat(classPrefix, "-item"), itemClassName) },
+                React__default.createElement("label", null, option.label),
+                (option === null || option === void 0 ? void 0 : option.tag) ? (React__default.createElement("span", { className: cx("".concat(classPrefix, "-item-tag")) }, option.tag)) : null));
+        };
+    function onSearch(term) {
+        var tree = findTree(list, function (i) { return ~i.label.indexOf(term); });
+        setFilterVars(!term ? list : tree ? [tree] : list);
+    }
+    function renderSearchBox() {
+        return (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-searchBox') },
+            React__default.createElement(SearchBox, { mini: false, onSearch: onSearch })));
+    }
+    return (React__default.createElement("div", { className: cx(className, 'FormulaEditor-VariableList', selectMode && "FormulaEditor-VariableList-".concat(selectMode)) }, selectMode === 'tabs' ? (React__default.createElement(ThemedTabs, { tabsMode: tabsMode, className: cx("".concat(classPrefix, "-base ").concat(classPrefix, "-tabs")) }, filterVars.map(function (item, index) { return (React__default.createElement(Tab, { className: cx("".concat(classPrefix, "-tab")), eventKey: index, key: index, title: item.label },
+        React__default.createElement(VariableList, { classnames: cx, classPrefix: "".concat(classPrefix, "-sub-"), className: cx("".concat(classPrefix, "-sub")), itemRender: itemRender, selectMode: item.selectMode, data: item.children, onSelect: onSelect }))); }))) : selectMode === 'tree' ? (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-body') },
+        renderSearchBox(),
+        React__default.createElement(TreeSelection, { itemRender: itemRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, options: filterVars, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } }))) : (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-body') },
+        renderSearchBox(),
+        React__default.createElement(ListSelection, { itemRender: itemRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, options: filterVars, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } })))));
+}
+var VariableList$1 = themeable(VariableList);
+
+export { VariableList$1 as default };

package/esm-dist/components/formula/plugin.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file 扩展 codemirror
+ */
+import type CodeMirror from 'codemirror';
+import type { FormulaEditorProps, VariableItem } from './Editor';
+export declare function editorFactory(dom: HTMLElement, cm: typeof CodeMirror, props: any): CodeMirror.Editor;
+export declare class FormulaPlugin {
+    readonly editor: CodeMirror.Editor;
+    readonly cm: typeof CodeMirror;
+    readonly getProps: () => FormulaEditorProps;
+    constructor(editor: CodeMirror.Editor, cm: typeof CodeMirror, getProps: () => FormulaEditorProps);
+    autoMarkText(): void;
+    computedBracesPosition(exp: string): {
+        begin: number;
+        end: number;
+    }[];
+    checkStrIsInBraces([from, to]: number[], braces: {
+        begin: number;
+        end: number;
+    }[]): boolean;
+    insertBraces(originFrom: CodeMirror.Position, originTo: CodeMirror.Position): void;
+    insertContent(value: any, type?: 'variable' | 'func'): void;
+    markText(from: CodeMirror.Position, to: CodeMirror.Position, label: string, className?: string): void;
+    autoMark(variables: Array<VariableItem>): void;
+    dispose(): void;
+    validate(): void;
+}

package/esm-dist/components/formula/plugin.js

@@ -0,0 +1,206 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { eachTree } from 'amis-core';
+
+/**
+ * @file 扩展 codemirror
+ */
+function editorFactory(dom, cm, props) {
+    registerLaunguageMode(cm);
+    return cm(dom, {
+        value: props.value || '',
+        autofocus: true,
+        mode: props.evalMode ? 'text/formula' : 'text/formula-template'
+    });
+}
+var FormulaPlugin = /** @class */ (function () {
+    function FormulaPlugin(editor, cm, getProps) {
+        this.editor = editor;
+        this.cm = cm;
+        this.getProps = getProps;
+        // editor.on('change', this.autoMarkText);
+        this.autoMarkText();
+    }
+    FormulaPlugin.prototype.autoMarkText = function () {
+        var _a = this.getProps(); _a.functions; var variables = _a.variables, value = _a.value;
+        if (value) {
+            // todo functions 也需要自动替换
+            this.autoMark(variables);
+        }
+    };
+    // 计算 `${`、`}` 括号的位置，如 ${a}+${b}, 结果是 [ { from: 0, to: 3 }, { from: 5, to: 8 } ]
+    FormulaPlugin.prototype.computedBracesPosition = function (exp) {
+        var braces = [];
+        exp === null || exp === void 0 ? void 0 : exp.replace(/\$\{/g, function (val, offset) {
+            if (val) {
+                var charArr = exp.slice(offset + val.length).split('');
+                var cache = ['${'];
+                for (var index = 0; index < charArr.length; index++) {
+                    var char = charArr[index];
+                    if (char === '$' && charArr[index + 1] === '{') {
+                        cache.push('${');
+                    }
+                    else if (char === '}') {
+                        cache.pop();
+                    }
+                    if (cache.length === 0) {
+                        braces.push({ begin: offset + 2, end: index + offset + 2 });
+                        break;
+                    }
+                }
+            }
+            return '';
+        });
+        return braces;
+    };
+    // 判断字符串是否在 ${} 中
+    FormulaPlugin.prototype.checkStrIsInBraces = function (_a, braces) {
+        var from = _a[0], to = _a[1];
+        var isIn = false;
+        if (braces.length) {
+            for (var index = 0; index < braces.length; index++) {
+                var brace = braces[index];
+                if (from > brace.begin && to <= brace.end) {
+                    isIn = true;
+                    break;
+                }
+            }
+        }
+        return isIn;
+    };
+    FormulaPlugin.prototype.insertBraces = function (originFrom, originTo) {
+        var str = this.editor.getValue();
+        var braces = this.computedBracesPosition(str);
+        if (!this.checkStrIsInBraces([originFrom.ch, originTo.ch], braces)) {
+            this.editor.setCursor({
+                line: originFrom.line,
+                ch: originFrom.ch
+            });
+            this.editor.replaceSelection('${');
+            this.editor.setCursor({
+                line: originTo.line,
+                ch: originTo.ch + 2
+            });
+            this.editor.replaceSelection('}');
+        }
+    };
+    FormulaPlugin.prototype.insertContent = function (value, type) {
+        var from = this.editor.getCursor();
+        var evalMode = this.getProps().evalMode;
+        if (type === 'variable') {
+            this.editor.replaceSelection(value.key);
+            var to = this.editor.getCursor();
+            this.markText(from, to, value.name, 'cm-field');
+            !evalMode && this.insertBraces(from, to);
+        }
+        else if (type === 'func') {
+            this.editor.replaceSelection("".concat(value, "()"));
+            var to = this.editor.getCursor();
+            this.markText(from, {
+                line: to.line,
+                ch: to.ch - 2
+            }, value, 'cm-func');
+            this.editor.setCursor({
+                line: to.line,
+                ch: to.ch - 1
+            });
+            if (!evalMode) {
+                this.insertBraces(from, to);
+                this.editor.setCursor({
+                    line: to.line,
+                    ch: to.ch + 1
+                });
+            }
+        }
+        else if (typeof value === 'string') {
+            this.editor.replaceSelection(value);
+        }
+        this.editor.focus();
+    };
+    FormulaPlugin.prototype.markText = function (from, to, label, className) {
+        if (className === void 0) { className = 'cm-func'; }
+        var text = document.createElement('span');
+        text.className = className;
+        text.innerText = label;
+        this.editor.markText(from, to, {
+            atomic: true,
+            replacedWith: text
+        });
+    };
+    FormulaPlugin.prototype.autoMark = function (variables) {
+        var _this = this;
+        if (!Array.isArray(variables) || !variables.length) {
+            return;
+        }
+        var varMap = {};
+        eachTree(variables, function (item) {
+            if (item.value) {
+                var key = item.value;
+                varMap[key] = item.label;
+            }
+        });
+        var vars = Object.keys(varMap).sort(function (a, b) { return b.length - a.length; });
+        var editor = this.editor;
+        var lines = editor.lineCount();
+        var _loop_1 = function (line) {
+            var content = editor.getLine(line);
+            // 标记方法调用
+            content.replace(/([A-Z]+)\s*\(/g, function (_, func, pos) {
+                _this.markText({
+                    line: line,
+                    ch: pos
+                }, {
+                    line: line,
+                    ch: pos + func.length
+                }, func, 'cm-func');
+                return _;
+            });
+            // 标记变量
+            vars.forEach(function (v) {
+                var from = 0;
+                var idx = -1;
+                while (~(idx = content.indexOf(v, from))) {
+                    _this.markText({
+                        line: line,
+                        ch: idx
+                    }, {
+                        line: line,
+                        ch: idx + v.length
+                    }, varMap[v], 'cm-field');
+                    from = idx + v.length;
+                }
+            });
+        };
+        for (var line = 0; line < lines; line++) {
+            _loop_1(line);
+        }
+    };
+    FormulaPlugin.prototype.dispose = function () { };
+    FormulaPlugin.prototype.validate = function () { };
+    return FormulaPlugin;
+}());
+var modeRegisted = false;
+function registerLaunguageMode(cm) {
+    if (modeRegisted) {
+        return;
+    }
+    modeRegisted = true;
+    // 对应 evalMode
+    cm.defineMode('formula', function (config, parserConfig) {
+        var formula = cm.getMode(config, 'javascript');
+        if (!parserConfig || !parserConfig.base)
+            return formula;
+        return cm.multiplexingMode(cm.getMode(config, parserConfig.base), {
+            open: '${',
+            close: '}',
+            mode: formula
+        });
+    });
+    cm.defineMIME('text/formula', { name: 'formula' });
+    cm.defineMIME('text/formula-template', { name: 'formula', base: 'htmlmixed' });
+}
+
+export { FormulaPlugin, editorFactory };

package/esm-dist/components/icons.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @file Icon
+ * @description
+ * @author fex
+ */
+import React from 'react';
+import CloseIcon from '../icons/close.svg';
+import UnDoIcon from '../icons/undo.svg';
+import ReDoIcon from '../icons/redo.svg';
+import EnterIcon from '../icons/enter.svg';
+import VolumeIcon from '../icons/volume.svg';
+import MuteIcon from '../icons/mute.svg';
+import PlayIcon from '../icons/play.svg';
+import PauseIcon from '../icons/pause.svg';
+import LeftArrowIcon from '../icons/left-arrow.svg';
+import RightArrowIcon from '../icons/right-arrow.svg';
+import CheckIcon from '../icons/check.svg';
+import PlusIcon from '../icons/plus.svg';
+import MinusIcon from '../icons/minus.svg';
+import PencilIcon from '../icons/pencil.svg';
+import ReloadIcon from '../icons/reload.svg';
+import FunctionIcon from '../icons/function.svg';
+import InputClearIcon from '../icons/input-clear.svg';
+import MenuIcon from '../icons/menu.svg';
+import UserRemove from '../icons/user-remove.svg';
+import Role from '../icons/role.svg';
+import Department from '../icons/department.svg';
+import Post from '../icons/post.svg';
+export declare const closeIcon: JSX.Element;
+export declare const unDoIcon: JSX.Element;
+export declare const reDoIcon: JSX.Element;
+export declare const enterIcon: JSX.Element;
+export declare const volumeIcon: JSX.Element;
+export declare const muteIcon: JSX.Element;
+export declare const playIcon: JSX.Element;
+export declare const pauseIcon: JSX.Element;
+export declare const leftArrowIcon: JSX.Element;
+export declare const rightArrowIcon: JSX.Element;
+export declare function getIcon(key: string): React.ReactType<{}>;
+export declare function hasIcon(iconName: string): boolean;
+export declare function registerIcon(key: string, component: React.ReactType<{}>): void;
+export declare function Icon({ icon, className, ...rest }: {
+    icon: string;
+} & React.ComponentProps<any>): JSX.Element;
+export { InputClearIcon, CloseIcon, UnDoIcon, ReDoIcon, EnterIcon, VolumeIcon, MuteIcon, PlayIcon, PauseIcon, ReloadIcon, LeftArrowIcon, RightArrowIcon, CheckIcon, PlusIcon, MinusIcon, PencilIcon, FunctionIcon, MenuIcon, UserRemove, Role, Department, Post };