@fonixtree/magic-design 2.0.51 → 2.0.52

package/lib/core/Designer/ToolBarModal/ToolBtn/components/ColorPickerBtn/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _UnderlineSelectPicker = _interopRequireDefault(require("./UnderlineSelectPicker"));
+
 var _FontColorSVG = _interopRequireDefault(require("../../images/FontColorSVG"));
 
 var _BackgroundSVG = _interopRequireDefault(require("../../images/BackgroundSVG"));
@@ -17,6 +19,8 @@ var _UnderlineSVG = _interopRequireDefault(require("../../images/UnderlineSVG"))
 
 var _ColorPicker = _interopRequireDefault(require("../../../../../../common/ColorPicker"));
 
+var _Iconfont = _interopRequireDefault(require("../../../../../../common/Iconfont"));
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -56,7 +60,8 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      visibility: false
+      visibility: false,
+      showSelectUnderline: false
     };
     return _this;
   }
@@ -68,11 +73,18 @@ function (_super) {
         value = _a.value,
         onChange = _a.onChange,
         _b = _a.type,
-        type = _b === void 0 ? 'color' : _b;
-    var visibility = this.state.visibility;
+        type = _b === void 0 ? 'color' : _b,
+        underlineValue = _a.underlineValue,
+        underlineOnChange = _a.underlineOnChange;
+    var _c = this.state,
+        visibility = _c.visibility,
+        showSelectUnderline = _c.showSelectUnderline;
     var color = value === null || value === void 0 ? void 0 : value.color;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('tool-btn-wrap'),
+      className: (0, _classnames["default"])('color-picker-tool-btn-wrap', {
+        padding: type == 'text-decoration-color'
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       onClick: function onClick() {
         _this.setState({
           visibility: !visibility
@@ -84,7 +96,26 @@ function (_super) {
       color: color || '#262626'
     }), type == 'text-decoration-color' && /*#__PURE__*/_react["default"].createElement(_UnderlineSVG["default"], {
       color: color || '#262626'
-    }), /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
+    })), type == 'text-decoration-color' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "btn_icon",
+      color: "#8493AF",
+      onClick: function onClick() {
+        return _this.setState({
+          showSelectUnderline: !showSelectUnderline
+        });
+      },
+      size: 12,
+      type: "icon-outlined-down"
+    }), showSelectUnderline && /*#__PURE__*/_react["default"].createElement(_UnderlineSelectPicker["default"], {
+      onChange: function onChange(v) {
+        underlineOnChange(v);
+
+        _this.setState({
+          showSelectUnderline: !showSelectUnderline
+        });
+      },
+      value: underlineValue
+    })), /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
       color: color,
       onChangeColor: onChange,
       onClose: function onClose() {

package/lib/core/Designer/ToolBarModal/ToolBtn/components/ColorPickerBtn/index.less

@@ -1,26 +1,27 @@
-.tool-btn-wrap {
-  width: 26px;
-  height: 26px;
+.color-picker-tool-btn-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  border-radius: 6px;
-  padding: 0;
-  border: none;
-  transition: .2s all linear;
-  position: relative;
 
-  &:hover {
-    background: #f8f8f8;
+  >div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  &.active {
-    background: #E7E9E8;
+  &.padding {
+    padding: 0 5px;
   }
 
-  svg {
-    height: 18px;
-    height: 18px;
+  .underlineWrap {
+    position: absolute;
+    left: 0;
+    top: 27px;
+    padding: 5px;
+    background-color: #fff;
+    // border: 1px solid #E7E9E8;
+    box-shadow: 0 8px 16px 4px hsla(0, 0%, 0%, 0.04);
+    color: #262626;
+    border-radius: 6px;
   }
 }

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.js

@@ -23,6 +23,8 @@ var _LowerRomanSVG = _interopRequireDefault(require("./images/LowerRomanSVG"));
 
 var _UpperRomanSVG = _interopRequireDefault(require("./images/UpperRomanSVG"));
 
+var _Iconfont = _interopRequireDefault(require("../../../../../../common/Iconfont"));
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -81,18 +83,37 @@ function (_super) {
 
     var _a = this.props,
         value = _a.value,
-        onChange = _a.onChange;
+        _onChange = _a.onChange;
     var visibility = this.state.visibility;
-    var list = (value === null || value === void 0 ? void 0 : value.list) || 'decimal';
+    var list = value === null || value === void 0 ? void 0 : value.list;
+
+    var iconClick = function iconClick() {
+      if (list) _onChange('');else _onChange('decimal');
+    };
+
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('tool-btn-wrap'),
+      className: (0, _classnames["default"])('ordered-tool-btn-wrap')
+    }, /*#__PURE__*/_react["default"].createElement(_DecimalSVG["default"], {
+      onChange: iconClick
+    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "btn_icon",
+      color: "#8493AF",
       onClick: function onClick() {
         _this.setState({
           visibility: !visibility
         });
-      }
-    }, SvgMap[list] ? SvgMap[list]({}) : /*#__PURE__*/_react["default"].createElement(_DecimalSVG["default"], null), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
-      onChange: onChange,
+      },
+      size: 12,
+      type: "icon-outlined-down"
+    }), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
+      onChange: function onChange(v) {
+        _onChange(v);
+
+        _this.setState({
+          visibility: !visibility
+        });
+      },
+      value: list,
       visibility: visibility
     }));
   };

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.less

@@ -1,26 +1,10 @@
-.tool-btn-wrap {
-  width: 26px;
-  height: 26px;
+.ordered-tool-btn-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  border-radius: 6px;
-  padding: 0;
-  border: none;
-  transition: .2s all linear;
-  position: relative;
+  padding: 0 3px;
 
-  &:hover {
-    background: #f8f8f8;
-  }
-
-  &.active {
-    background: #E7E9E8;
-  }
-
-  svg {
-    height: 18px;
-    height: 18px;
+  .btn_icon {
+    margin-left: 3px;
   }
 }

package/lib/core/Designer/ToolBarModal/ToolBtn/images/AlignCenterSVG.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    height: "10",
+    id: "ne-t-alignment-center",
+    onClick: onChange,
+    viewBox: "0 0 15 10",
+    width: "15",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H13.375C13.7892 0.25 14.125 0.585786 14.125 1C14.125 1.41421 13.7892 1.75 13.375 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 8.875C0.25 8.46079 0.585786 8.125 1 8.125H13.375C13.7892 8.125 14.125 8.46079 14.125 8.875C14.125 9.28921 13.7892 9.625 13.375 9.625H1C0.585786 9.625 0.25 9.28921 0.25 8.875Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }));
+};
+
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/images/AlignLeftSVG.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    height: "10",
+    id: "ne-t-alignment-left",
+    onClick: onChange,
+    viewBox: "0 0 15 10",
+    width: "15",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H10C10.4142 0.25 10.75 0.585786 10.75 1C10.75 1.41421 10.4142 1.75 10 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 8.875C0.25 8.46079 0.585786 8.125 1 8.125H10C10.4142 8.125 10.75 8.46079 10.75 8.875C10.75 9.28921 10.4142 9.625 10 9.625H1C0.585786 9.625 0.25 9.28921 0.25 8.875Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }));
+};
+
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/images/AlignRightSVG.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    height: "10",
+    id: "ne-t-alignment-right",
+    onClick: onChange,
+    viewBox: "0 0 15 10",
+    width: "15",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M3.625 1C3.625 0.585786 3.96079 0.25 4.375 0.25H13.375C13.7892 0.25 14.125 0.585786 14.125 1C14.125 1.41421 13.7892 1.75 13.375 1.75H4.375C3.96079 1.75 3.625 1.41421 3.625 1Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M3.625 8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H13.375C13.7892 8.125 14.125 8.46079 14.125 8.875C14.125 9.28921 13.7892 9.625 13.375 9.625H4.375C3.96079 9.625 3.625 9.28921 3.625 8.875Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }));
+};
+
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/index.js

@@ -27,6 +27,12 @@ var _OrderSVG = _interopRequireDefault(require("./images/OrderSVG"));
 
 var _UnorderSVG = _interopRequireDefault(require("./images/UnorderSVG"));
 
+var _AlignLeftSVG = _interopRequireDefault(require("./images/AlignLeftSVG"));
+
+var _AlignCenterSVG = _interopRequireDefault(require("./images/AlignCenterSVG"));
+
+var _AlignRightSVG = _interopRequireDefault(require("./images/AlignRightSVG"));
+
 var _BulletPicker = _interopRequireDefault(require("./components/BulletPicker"));
 
 var _OrderedPicker = _interopRequireDefault(require("./components/OrderedPicker"));
@@ -63,6 +69,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var iconTypeMap = {
   bold: _BoldSVG["default"],
   italic: _ItalicSVG["default"],
@@ -95,15 +117,9 @@ var iconTypeMap = {
       type: "text-decoration-color"
     }, props));
   },
-  alignLeft: function alignLeft(props) {
-    return /*#__PURE__*/_react["default"].createElement(_OrderedPicker["default"], props);
-  },
-  alignCenter: function alignCenter(props) {
-    return /*#__PURE__*/_react["default"].createElement(_OrderedPicker["default"], props);
-  },
-  alignRight: function alignRight(props) {
-    return /*#__PURE__*/_react["default"].createElement(_OrderedPicker["default"], props);
-  }
+  alignLeft: _AlignLeftSVG["default"],
+  alignCenter: _AlignCenterSVG["default"],
+  alignRight: _AlignRightSVG["default"]
 };
 
 var ToolBtn =
@@ -146,10 +162,10 @@ function (_super) {
       className: (0, _classnames["default"])('tool-btn-wrap', {
         active: active
       })
-    }, iconTypeMap[type]({
+    }, iconTypeMap[type](__assign({
       value: value,
       onChange: onChange
-    }));
+    }, this.props)));
   };
 
   ToolBtn.defaultProps = {};

package/lib/core/Designer/ToolBarModal/ToolBtn/index.less

@@ -1,5 +1,6 @@
 .tool-btn-wrap {
-  width: 26px;
+  width: auto;
+  min-width: 26px;
   height: 26px;
   display: flex;
   align-items: center;

package/lib/core/Designer/ToolBarModal/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fontWeightList = exports.fontSizeList = exports.fontFamilyList = exports["default"] = void 0;
+exports.fontWeightList = exports.fontSizeList = exports.fontFamilyList = exports["default"] = exports.OpenSansFontWeightList = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,12 +11,8 @@ var _antd = require("antd");
 
 var _ToolBtn = _interopRequireDefault(require("./ToolBtn"));
 
-var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
-
 var _coreUtil = require("../../../utils/coreUtil");
 
-var _UnderlineSelect = _interopRequireDefault(require("../../../meta-comp/config-panels/TextConfig/UnderlineSelect"));
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,6 +67,17 @@ var fontWeightList = [{
   value: '700'
 }];
 exports.fontWeightList = fontWeightList;
+var OpenSansFontWeightList = [{
+  name: 'Regular',
+  value: '400'
+}, {
+  name: 'Semibold',
+  value: '600'
+}, {
+  name: 'Bold',
+  value: '700'
+}];
+exports.OpenSansFontWeightList = OpenSansFontWeightList;
 
 var ToolBarModal =
 /** @class */
@@ -164,24 +171,30 @@ function (_super) {
       } else if (type == 'bullet') {
         _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
 
-        _this.props.quillRef.format('list-style-type', value);
+        if (!value || value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list-style-type', '');
 
-        if (value === quillFormat['list-style-type']) {
           _this.props.quillRef.format('list', '');
         } else {
+          _this.props.quillRef.format('list-style-type', value);
+
           _this.props.quillRef.format('list', 'bullet');
         }
       } else if (type == 'ordered') {
         _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
 
-        _this.props.quillRef.format('list-style-type', value);
+        if (!value || value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list-style-type', '');
 
-        if (value === quillFormat['list-style-type']) {
           _this.props.quillRef.format('list', '');
         } else {
+          _this.props.quillRef.format('list-style-type', value);
+
           _this.props.quillRef.format('list', 'ordered');
         }
       } else if (type == 'text-decoration-color') {
+        _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
+
         if (value) {
           _this.props.quillRef.format('underline', true);
         } else {
@@ -218,6 +231,10 @@ function (_super) {
     var _this = this;
 
     var quillFormat = this.state.quillFormat;
+    console.log('quillFormat render', quillFormat);
+
+    var _fontWeightList = quillFormat['font-family'] === 'OpenSans' ? OpenSansFontWeightList : fontWeightList;
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.toolBarRef,
       className: "toolbar-wrap"
@@ -252,7 +269,7 @@ function (_super) {
         width: '150px'
       },
       value: quillFormat['font-weight']
-    }, fontWeightList.map(function (v) {
+    }, _fontWeightList.map(function (v) {
       return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         label: v.name,
         value: v.value
@@ -274,20 +291,7 @@ function (_super) {
         label: v.name,
         value: v
       }, v, "px");
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tool-item"
-    }, /*#__PURE__*/_react["default"].createElement(_UnderlineSelect["default"], {
-      onChange: function onChange(v) {
-        _this.onToolBtnClick('text-decoration-style', v);
-      },
-      placeholder: "Underline Style",
-      repeatCount: 28,
-      size: "small",
-      style: {
-        width: '140px'
-      },
-      value: quillFormat['text-decoration-style']
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "toolbar-row"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
@@ -312,16 +316,13 @@ function (_super) {
         _this.onToolBtnClick('text-decoration-color', value);
       },
       type: "text-decoration-color",
+      underlineOnChange: function underlineOnChange(value) {
+        return _this.onToolBtnClick('text-decoration-style', value);
+      },
+      underlineValue: quillFormat['text-decoration-style'],
       value: {
         color: quillFormat['text-decoration-color']
       }
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.onToolBtnClick('text-decoration-color', '');
-      },
-      size: 12,
-      type: "icon-outlined-down"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooll-line"
     }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -354,13 +355,6 @@ function (_super) {
       value: {
         list: quillFormat['list-style-type']
       }
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.onToolBtnClick('text-decoration-color', '');
-      },
-      size: 12,
-      type: "icon-outlined-down"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
@@ -371,34 +365,30 @@ function (_super) {
       value: {
         list: quillFormat['list-style-type']
       }
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.onToolBtnClick('text-decoration-color', '');
-      },
-      size: 12,
-      type: "icon-outlined-down"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooll-line"
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      onChange: function onChange(value) {
-        _this.onToolBtnClick('', value);
+      active: quillFormat['align'] === undefined,
+      onChange: function onChange() {
+        _this.onToolBtnClick('align', '');
       },
       type: "alignLeft"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      onChange: function onChange(value) {
-        _this.onToolBtnClick('link', value);
+      active: quillFormat['align'] === 'center',
+      onChange: function onChange() {
+        _this.onToolBtnClick('align', 'center');
       },
       type: "alignCenter"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      onChange: function onChange(value) {
-        _this.onToolBtnClick('link', value);
+      active: quillFormat['align'] === 'right',
+      onChange: function onChange() {
+        _this.onToolBtnClick('align', 'right');
       },
       type: "alignRight"
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/meta-comp/components/Text/index.less

@@ -35,6 +35,14 @@
     font-style: normal;
     font-weight: 600;
   }
+
+  .ql-align-center {
+    text-align: center;
+  }
+
+  .ql-align-right {
+    text-align: right;
+  }
 }
 
 .ql-clipboard {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.51",
+  "version": "2.0.52",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",