amis-editor 5.5.0 → 5.6.1

package/esm/renderer/style-control/ThemeCssCode.js

@@ -1,316 +1,148 @@
 /**
- * amis-editor v5.5.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
 import { __extends, __assign, __decorate, __read } from 'tslib';
 import React__default, { useRef, useState, useEffect } from 'react';
-import { Button, Overlay, PopOver, Editor } from 'amis-ui';
-import { styleMap, FormItem } from 'amis-core';
+import { Editor, Overlay, PopOver } from 'amis-ui';
+import { FormItem } from 'amis-core';
 import { parse } from 'amis-postcss';
-import { debounce, isEmpty } from 'lodash';
+import isObject from 'lodash/isObject';
+import debounce from 'lodash/debounce';
+import isEmpty from 'lodash/isEmpty';
 import '../../icons/index.js';
-import editorFactory from './themeLanguage.js';
-import cx from 'classnames';
 import { i18n } from 'i18n-runtime';
 import { Icon } from 'amis-editor-core';
 
-var valueMap = {};
-for (var key in styleMap) {
-  valueMap[styleMap[key]] = key;
-}
-var fontStyle = ['color', 'font-weight', 'font-size', 'font-style', 'text-decoration', 'text-align', 'vertical-align', 'font-family', 'line-height'];
-function AmisThemeCssCodeEditor(props) {
-  var themeClass = props.themeClass,
-    data = props.data;
-  var id = data.id.replace('u:', '');
-  var _a = __read(useState([]), 2),
-    cssNodes = _a[0],
-    setCssNodes = _a[1];
-  var _b = __read(useState(0), 2),
-    tabId = _b[0],
-    setTabId = _b[1];
-  function getCssAndSetValue(themeClass) {
-    try {
-      var newCssNodes_1 = [];
-      themeClass === null || themeClass === void 0 ? void 0 : themeClass.forEach(function (n) {
-        var classId = n.value ? id + '-' + n.value : id;
-        var state = n.state || ['default'];
-        var className = n.className || 'className';
-        var dom = document.getElementById(classId || '') || null;
-        var content = (dom === null || dom === void 0 ? void 0 : dom.innerHTML) || '';
-        var ast = parse(content);
-        var nodes = [];
-        ast.nodes.forEach(function (node) {
-          var selector = node.selector;
-          if (!selector.endsWith('.hover') && !selector.endsWith('.active')) {
-            nodes.push(node);
-          }
-        });
-        var css = [];
-        state.forEach(function (s) {
-          css.push({
-            selector: ".".concat(className, "-").concat(id).concat(s === 'default' ? '' : ':' + s),
-            state: s,
-            value: ''
-          });
-        });
-        nodes.forEach(function (node) {
-          var style = node.nodes.map(function (n) {
-            return "".concat(n.prop, ": ").concat(n.value, ";");
-          });
-          var item = css.find(function (c) {
-            if (c.selector === node.selector || node.selector.endsWith(":".concat(c.state)) || node.selector.split(' ').indexOf(c.selector) > -1) {
-              return c;
-            }
-            return false;
-          });
-          item.value = style.join('\n');
-        });
-        newCssNodes_1.push({
-          name: n.name || i18n("f01c3cd99ecb0c534cc47081d3433c9f"),
-          children: css
-        });
-      });
-      setCssNodes(newCssNodes_1);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-  useEffect(function () {
-    getCssAndSetValue(themeClass);
-  }, []);
-  var editorChange = debounce(function (nodeTabs) {
-    try {
-      var data_1 = props.data,
-        onBulkChange = props.onBulkChange;
-      var sourceCss = data_1.themeCss || data_1.css || {};
-      var newCss_1 = {};
-      nodeTabs.forEach(function (tab) {
-        tab.children.forEach(function (node) {
-          var nodes = parse(node.value).nodes.map(function (node) {
-            var prop = node.prop,
-              value = node.value;
-            return {
-              prop: prop,
-              value: value
-            };
-          }).filter(function (n) {
-            return n.value;
-          });
-          var selector = node.selector;
-          var nameEtr = /\.(.*)\-/.exec(selector);
-          var cssCode = {};
-          var name = nameEtr ? nameEtr[1] : '';
-          var state = 'default';
-          if (!!~selector.indexOf(':active')) {
-            state = 'active';
-          } else if (!!~selector.indexOf(':hover')) {
-            state = 'hover';
-          }
-          nodes.forEach(function (item) {
-            var prop = item.prop;
-            var cssValue = item.value;
-            if (!!~prop.indexOf('radius')) {
-              var type = 'radius:' + state;
-              !cssCode[type] && (cssCode[type] = {});
-              var radius = cssValue.split(' ');
-              cssCode[type]['top-left-border-radius'] = radius[0];
-              cssCode[type]['top-right-border-radius'] = radius[1];
-              cssCode[type]['bottom-right-border-radius'] = radius[2];
-              cssCode[type]['bottom-left-border-radius'] = radius[3];
-            } else if (!!~prop.indexOf('border')) {
-              !cssCode['border:' + state] && (cssCode['border:' + state] = {});
-              cssCode['border:' + state][valueMap[prop] || prop] = cssValue;
-            } else if (!!~prop.indexOf('padding') || !!~prop.indexOf('margin')) {
-              !cssCode['padding-and-margin:' + state] && (cssCode['padding-and-margin:' + state] = {});
-              cssCode['padding-and-margin:' + state][valueMap[prop] || prop] = cssValue;
-            } else if (fontStyle.includes(prop)) {
-              !cssCode['font:' + state] && (cssCode['font:' + state] = {});
-              cssCode['font:' + state][valueMap[prop] || prop] = cssValue;
-            } else {
-              cssCode[(valueMap[prop] || prop) + ':' + state] = cssValue;
-            }
-          });
-          if (newCss_1[name]) {
-            newCss_1[name] = Object.assign(newCss_1[name], cssCode);
-          } else {
-            newCss_1[name] = cssCode;
-          }
-        });
-      });
-      onBulkChange && onBulkChange({
-        themeCss: __assign(__assign({}, sourceCss), newCss_1)
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  });
-  function handleChange(value, i, j) {
-    var newCssNodes = cssNodes;
-    newCssNodes[i].children[j].value = value;
-    setCssNodes(newCssNodes); // 好像不需要这个?
-    editorChange(newCssNodes);
-  }
-  function formateTitle(title) {
-    if (title.endsWith('hover')) {
-      return i18n("fd2bed5e9a84273b22f79950a0a1807f");
-    } else if (title.endsWith('active')) {
-      return i18n("1daee167a43c72dbe9e31e955b670b4f");
-    } else if (title.endsWith('disabled')) {
-      return i18n("d117954f3769008ef22b864060913c65");
-    }
-    return i18n("d37c4140bd531fc117e91e727d7e576c");
-  }
-  return React__default.createElement("div", {
-    className: "ThemeCssCode-editor"
-  }, React__default.createElement("div", {
-    className: "ThemeCssCode-editor-title"
-  }, "\u7F16\u8F91\u6837\u5F0F\u6E90\u7801"), React__default.createElement("div", {
-    className: "ThemeCssCode-editor-close"
-  }, React__default.createElement(Button, {
-    onClick: props.onHide,
-    level: "link"
-  }, React__default.createElement(Icon, {
-    icon: "close",
-    className: "icon"
-  }))), React__default.createElement("div", {
-    className: "ThemeCssCode-editor-content"
-  }, React__default.createElement("div", {
-    className: "ThemeCssCode-editor-content-header"
-  }, cssNodes.map(function (node, index) {
-    return React__default.createElement("div", {
-      key: index,
-      onClick: function () {
-        return setTabId(index);
-      },
-      className: cx('ThemeCssCode-editor-content-header-title', index === tabId && 'ThemeCssCode-editor-content-header-title--active')
-    }, node.name);
-  })), React__default.createElement("div", {
-    className: "ThemeCssCode-editor-content-main"
-  }, cssNodes.map(function (node, i) {
-    var children = node.children;
-    return React__default.createElement("div", {
-      key: i,
-      className: cx(i !== tabId && 'ThemeCssCode-editor-content-body--hidden')
-    }, children.map(function (css, j) {
-      return React__default.createElement("div", {
-        className: "ThemeCssCode-editor-content-body",
-        key: "".concat(i, "-").concat(j, "-").concat(css.selector),
-        id: "".concat(i, "-").concat(j, "-").concat(css.selector)
-      }, children.length > 1 ? React__default.createElement("div", {
-        className: "ThemeCssCode-editor-content-body-title"
-      }, formateTitle(css.selector)) : null, React__default.createElement("div", {
-        className: "ThemeCssCode-editor-content-body-editor"
-      }, React__default.createElement(Editor, {
-        value: css.value,
-        editorFactory: editorFactory,
-        options: {
-          onChange: function (value) {
-            return handleChange(value, i, j);
-          }
-        }
-      })));
-    }));
-  }))));
-}
-function AmisStyleCodeEditor(props) {
+var editorPlaceholder = i18n("0552d08957a270160d5203e0611661b2");
+var editorOptions = {
+  autoIndent: true,
+  formatOnType: true,
+  formatOnPaste: true,
+  selectOnLineNumbers: true,
+  scrollBeyondLastLine: false,
+  folding: true,
+  minimap: {
+    enabled: false
+  },
+  scrollbar: {
+    alwaysConsumeMouseWheel: false
+  },
+  bracketPairColorization: {
+    enabled: true
+  },
+  automaticLayout: true,
+  lineNumbers: 'off',
+  glyphMargin: false,
+  wordWrap: 'on',
+  lineDecorationsWidth: 0,
+  lineNumbersMinChars: 0,
+  overviewRulerBorder: false
+};
+function ThemeCssCode(props) {
   var data = props.data,
     onBulkChange = props.onBulkChange;
-  var style = data.style;
-  var _a = __read(useState(''), 2),
-    value = _a[0],
-    setValue = _a[1];
-  function getCssAndSetValue(data) {
+  var wrapperCustomStyle = data.wrapperCustomStyle;
+  var ref = useRef(null);
+  var _a = __read(useState(false), 2),
+    showEditor = _a[0],
+    setShowEditor = _a[1];
+  var _b = __read(useState(''), 2),
+    value = _b[0],
+    setValue = _b[1];
+  // 前面加上空格
+  function getSpaceByDep(dep) {
+    var spaces = '';
+    for (var i = 0; i < dep; i++) {
+      spaces += '  ';
+    }
+    return spaces;
+  }
+  function getCssAndSetValue(data, str, dep) {
     if (isEmpty(data)) {
       return '';
     }
-    var str = '';
     for (var key in data) {
-      if (key === 'radius') {
-        str += "border-radius: ".concat(data.radius['top-left-border-radius'] + ' ' + data.radius['top-right-border-radius'] + ' ' + data.radius['bottom-right-border-radius'] + ' ' + data.radius['bottom-left-border-radius'], ";\n");
-      } else {
-        str += "".concat(styleMap[key] || key, ": ").concat(data[key], ";\n");
+      if (data.hasOwnProperty(key)) {
+        if (isObject(data[key])) {
+          str += getSpaceByDep(dep) + "".concat(key, " {\n");
+          str += getCssAndSetValue(data[key], '', dep + 1);
+          str += getSpaceByDep(dep) + "}\n";
+          if (dep === 0) {
+            str += '\n';
+          }
+        } else {
+          str += getSpaceByDep(dep) + "".concat(key, ": ").concat(data[key], ";\n");
+        }
       }
     }
     return str;
   }
   useEffect(function () {
-    var res = getCssAndSetValue(style);
-    setValue(res);
+    setValue(getCssAndSetValue(wrapperCustomStyle, '', 0));
   }, []);
-  var editorChange = debounce(function (value) {
+  function handleShowEditor() {
+    setShowEditor(true);
+  }
+  // 递归获取自定义样式
+  function getStyle(style) {
     var newStyle = {};
-    try {
-      var style_1 = parse(value);
-      style_1.nodes.forEach(function (node) {
-        var prop = node.prop,
-          value = node.value;
-        if (value) {
-          if (prop === 'border-radius') {
-            var radius = value.split(' ');
-            newStyle['radius'] = {
-              'top-left-border-radius': radius[0] || '',
-              'top-right-border-radius': radius[1] || '',
-              'bottom-right-border-radius': radius[2] || '',
-              'bottom-left-border-radius': radius[3] || ''
-            };
-          } else {
-            newStyle[valueMap[prop] || prop] = value;
-          }
+    if (isEmpty(style)) {
+      return newStyle;
+    }
+    style.nodes.forEach(function (node) {
+      var prop = node.prop,
+        value = node.value,
+        selector = node.selector;
+      if (value) {
+        newStyle[prop] = value;
+        if (node.important) {
+          newStyle[prop] += ' !important';
         }
-      });
+      }
+      if (node.nodes) {
+        newStyle[selector] = getStyle(node);
+      }
+    });
+    return newStyle;
+  }
+  var editorChange = debounce(function (value) {
+    try {
+      var style = parse(value);
+      var newStyle = getStyle(style);
       onBulkChange && onBulkChange({
-        style: newStyle
+        wrapperCustomStyle: newStyle
       });
-    } catch (error) {
-      console.error(error);
-    }
+    } catch (error) {}
   });
   function handleChange(value) {
     editorChange(value);
     setValue(value);
   }
-  return React__default.createElement("div", {
-    className: "ThemeCssCode-editor"
-  }, React__default.createElement("div", {
-    className: "ThemeCssCode-editor-title"
-  }, "\u7F16\u8F91\u6837\u5F0F\u6E90\u7801"), React__default.createElement("div", {
-    className: "ThemeCssCode-editor-close"
-  }, React__default.createElement(Button, {
-    onClick: props.onHide,
-    level: "link"
-  }, React__default.createElement(Icon, {
-    icon: "close",
-    className: "icon"
-  }))), React__default.createElement("div", {
-    className: "ThemeCssCode-editor-content"
-  }, React__default.createElement(Editor, {
-    value: value,
-    editorFactory: editorFactory,
-    options: {
-      onChange: handleChange
-    }
-  })));
-}
-function ThemeCssCode(props) {
-  var ref = useRef(null);
-  var _a = __read(useState(false), 2),
-    showEditor = _a[0],
-    setShowEditor = _a[1];
-  function handleShowEditor() {
-    setShowEditor(true);
-  }
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     ref: ref,
     className: "ThemeCssCode"
-  }, React__default.createElement(Button, {
+  }, React__default.createElement("a", {
     onClick: handleShowEditor,
-    className: ":ThemeCssCode-button"
+    className: "ThemeCssCode-button ThemeCssCode-icon"
   }, React__default.createElement(Icon, {
-    icon: "theme-css",
+    icon: "expand-alt",
     className: "icon"
-  }), " \u7F16\u8F91\u6837\u5F0F\u6E90\u7801")), React__default.createElement(Overlay, {
+  })), React__default.createElement("div", {
+    className: "ThemeCssCode-editor-wrap",
+    style: {
+      height: '180px'
+    }
+  }, React__default.createElement(Editor, {
+    className: "ThemeCssCode-custom-editor",
+    value: value,
+    placeholder: editorPlaceholder,
+    language: "scss",
+    onChange: handleChange,
+    options: editorOptions
+  }))), React__default.createElement(Overlay, {
     container: document.body,
     placement: "left",
     target: ref.current,
@@ -321,15 +153,34 @@ function ThemeCssCode(props) {
     onHide: function () {
       return setShowEditor(false);
     }
-  }, props.isLayout ? React__default.createElement(AmisStyleCodeEditor, __assign({}, props, {
-    onHide: function () {
-      return setShowEditor(false);
-    }
-  })) : React__default.createElement(AmisThemeCssCodeEditor, __assign({}, props, {
-    onHide: function () {
+  }, React__default.createElement("div", {
+    className: "ThemeCssCode-editor"
+  }, React__default.createElement("div", {
+    className: "ThemeCssCode-editor-title"
+  }, i18n("aaf9656ba493b58fbab398d52efa9f7c")), React__default.createElement("div", {
+    className: "ThemeCssCode-editor-close"
+  }, React__default.createElement("a", {
+    onClick: function () {
       return setShowEditor(false);
+    },
+    className: "ThemeCssCode-icon"
+  }, React__default.createElement(Icon, {
+    icon: "close",
+    className: "icon"
+  }))), React__default.createElement("div", {
+    className: "ThemeCssCode-editor-content"
+  }, React__default.createElement("div", {
+    className: "ThemeCssCode-editor-wrap",
+    style: {
+      height: '460px'
     }
-  })))));
+  }, React__default.createElement(Editor, {
+    value: value,
+    placeholder: editorPlaceholder,
+    language: "scss",
+    onChange: handleChange,
+    options: editorOptions
+  })))))));
 }
 /** @class */(function (_super) {
   __extends(ThemeCssCodeRenderer, _super);
@@ -345,3 +196,4 @@ function ThemeCssCode(props) {
   })], ThemeCssCodeRenderer);
   return ThemeCssCodeRenderer;
 })(React__default.Component);
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/esm/renderer/style-control/font-family.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.5.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -143,3 +144,4 @@ fontFamilyList.reduce(function (memo, current) {
 }, {});
 
 export { fontFamilyList };
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/esm/renderer/style-control/helper.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.5.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -61,3 +62,4 @@ var inputStateFunc = function (visibleOn, state, className, path, options) {
 };
 
 export { inputStateFunc, inputStateTpl };
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/esm/renderer/style-control/transformation.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.5.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -73,3 +74,4 @@ function normalizeBoxShadow(config) {
 }
 
 export { normalizeBoxShadow, parseBoxShadow };
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/esm/renderer/textarea-formula/FormulaPicker.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.5.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -49,10 +50,11 @@ var FormulaPicker = function (props) {
     onChange: handleChange
   }))), React__default.createElement(Modal.Footer, null, React__default.createElement(Button, {
     onClick: handleClose
-  }, "\u53D6\u6D88"), React__default.createElement(Button, {
+  }, i18n("625fb26b4b3340f7872b411f401e754c")), React__default.createElement(Button, {
     onClick: handleConfirm,
     level: "primary"
-  }, "\u786E\u8BA4")));
+  }, i18n("e83a256e4f5bb4ff8b3d804b5473217a"))));
 };
 
 export { FormulaPicker as default };
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/esm/renderer/textarea-formula/TextareaFormulaControl.d.ts

@@ -89,6 +89,7 @@ interface TextareaFormulaControlState {
     tooltipStyle: {
         [key: string]: string;
     };
+    loading: boolean;
 }
 export declare class TextareaFormulaControl extends React.Component<TextareaFormulaControlProps, TextareaFormulaControlState> {
     static defaultProps: Partial<TextareaFormulaControlProps>;
@@ -110,10 +111,11 @@ export declare class TextareaFormulaControl extends React.Component<TextareaForm
     editorFactory(dom: HTMLElement, cm: any): any;
     handleEditorMounted(cm: any, editor: any): void;
     handleFullscreenModeChange(): void;
+    handleFormulaEditorOpen(): Promise<void>;
     handleFormulaClick(e: React.MouseEvent, type?: string): Promise<void>;
     editorAutoMark(): void;
     handleAddtionalMenuClick(e: MouseEvent<HTMLAnchorElement>, item: AdditionalMenu): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default class TextareaFormulaControlRenderer extends TextareaFormulaControl {
 }