@fonixtree/magic-design 2.0.14 → 2.0.15

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

@@ -9,19 +9,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
-require("./index.less");
-
-var _Iconfont = require("../../../common/Iconfont");
+var _quill = _interopRequireDefault(require("quill"));
 
 var _decorator = require("../../../decorator");
 
 var _coreUtil = require("../../../utils/coreUtil");
 
+var _commonUtil = require("../../../utils/commonUtil");
+
 var _mobx = require("../../../mobx");
 
-var _commonUtil = require("../../../utils/commonUtil");
+var _ToolBarModal = require("../../../core/Designer/ToolBarModal");
+
+require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -78,20 +78,22 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
   }
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable react/no-danger */
 
-var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
-    s += arguments[i].length;
-  }
 
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
-    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
-      r[k] = a[j];
-    }
-  }
+var sizeStyle = _quill["default"]["import"]('attributors/style/size');
 
-  return r;
-};
+sizeStyle.whitelist = null;
+
+_quill["default"].register(sizeStyle, true);
+
+var fonts = _quill["default"]["import"]('formats/font');
+
+fonts.whitelist = _ToolBarModal.fontFamilyList.map(function (item) {
+  return item.value;
+});
+
+_quill["default"].register(fonts, true);
 
 var contentStyle = function contentStyle(content) {
   return {
@@ -105,187 +107,9 @@ var contentStyle = function contentStyle(content) {
     width: '100%'
   };
 };
-/** 从父级数组中 分离出 片段数组 */
-
 
 exports.contentStyle = contentStyle;
 
-var calcSplitRange = function calcSplitRange(parentRange, splitRange) {
-  if (parentRange[0] == splitRange[0]) {
-    if (parentRange[1] == splitRange[1]) {
-      return parentRange;
-    } else {
-      return [[parentRange[0], splitRange[1]], [splitRange[1], parentRange[1]]];
-    }
-  }
-
-  if (parentRange[1] == splitRange[1]) {
-    return [[parentRange[0], splitRange[0]], [splitRange[0], parentRange[1]]];
-  }
-
-  return [[parentRange[0], splitRange[0]], [splitRange[0], splitRange[1]], [splitRange[1], parentRange[1]]];
-};
-/** 驱动配置面板渲染 */
-
-
-var triggerTextConfigRender = function triggerTextConfigRender() {
-  window.document.dispatchEvent(new Event('text-render', {
-    bubbles: false
-  }));
-};
-/** 初始化监听事件 */
-
-
-var initSelectionEvent = function initSelectionEvent() {
-  if (!window.document.onselectionchange) {
-    window.document.onselectionchange = (0, _lodash.debounce)(function (e) {
-      var _a;
-
-      var _b, _c, _d, _e;
-      /** 找到选中的text区域 并且注册过事件 */
-
-
-      var findSelectionTarget = window._selectionTarget.find(function (_a) {
-        var target = _a.target;
-        return target == e.target.activeElement;
-      });
-      /** 所有选中状态清楚 */
-
-
-      var clearSelection = function clearSelection() {
-        _mobx.store.setState({
-          textSelection: null
-        });
-
-        triggerTextConfigRender();
-      };
-
-      if (findSelectionTarget) {
-        var range = window.getSelection().getRangeAt(0);
-        /** 记录当前选中的范围 给label使用 */
-
-        window._currentRange = window.getSelection().getRangeAt(0);
-        var startOffset = range.startOffset,
-            endOffset = range.endOffset,
-            startContainer_1 = range.startContainer,
-            endContainer = range.endContainer;
-        /** 起始点=终点 取消 */
-
-        if (startOffset == endOffset) {
-          clearSelection();
-          return;
-        }
-        /** 如果全部选中 取消 */
-
-
-        if (startOffset == 0 && endOffset == findSelectionTarget.data.text.length) {
-          clearSelection();
-          return;
-        }
-        /** 判断起始点和结束点是否相同  */
-
-
-        if (startContainer_1 == endContainer) {
-          /** 如果还没有选中区域 */
-          if (findSelectionTarget.data.specialContent.length == 0) {
-            var nowRange_1 = [startOffset, endOffset].sort(function (a, b) {
-              return a - b;
-            });
-            var rangeList = calcSplitRange([0, findSelectionTarget.data.text.length], nowRange_1);
-            findSelectionTarget.data.specialContent = rangeList.map(function (range) {
-              return {
-                range: range,
-                content: {}
-              };
-            });
-            var findSelectionRange = (_b = findSelectionTarget.data.specialContent) === null || _b === void 0 ? void 0 : _b.find(function (c) {
-              return JSON.stringify(c.range) == JSON.stringify(nowRange_1);
-            });
-
-            _mobx.store.setState({
-              textSelection: findSelectionRange.content
-            });
-          } else {
-            /** 如果已有选中区域 */
-            var nowRange_2 = [startOffset, endOffset].sort(function (a, b) {
-              return a - b;
-            });
-            var selectionRangeJSON_1 = Object.keys(findSelectionTarget.selectionRefMap).find(function (rangeTarget) {
-              return findSelectionTarget.selectionRefMap[rangeTarget] == startContainer_1.parentNode;
-            });
-            var findSelectionRangeTarget_1 = (_c = findSelectionTarget.data.specialContent) === null || _c === void 0 ? void 0 : _c.find(function (c) {
-              return JSON.stringify(c.range) == selectionRangeJSON_1;
-            });
-            /** 选中没配置过的区域 可以进行拆分 */
-
-            if ((0, _lodash.isEmpty)(findSelectionRangeTarget_1.content)) {
-              /** 计算偏移值 */
-              nowRange_2[0] += findSelectionRangeTarget_1.range[0];
-              nowRange_2[1] += findSelectionRangeTarget_1.range[0];
-              /** 补充新的选中区域 */
-
-              if (JSON.stringify(findSelectionRangeTarget_1.range) != JSON.stringify(nowRange_2)) {
-                var rangeList = calcSplitRange(findSelectionRangeTarget_1.range, nowRange_2);
-                var nowContentIndex = (_d = findSelectionTarget.data.specialContent) === null || _d === void 0 ? void 0 : _d.findIndex(function (c) {
-                  return c == findSelectionRangeTarget_1;
-                });
-
-                (_a = findSelectionTarget.data.specialContent).splice.apply(_a, __spreadArrays([nowContentIndex, 1], rangeList.map(function (range) {
-                  return {
-                    range: range,
-                    content: {}
-                  };
-                })));
-              }
-
-              var findSelectionRange = (_e = findSelectionTarget.data.specialContent) === null || _e === void 0 ? void 0 : _e.find(function (c) {
-                return JSON.stringify(c.range) == JSON.stringify(nowRange_2);
-              });
-
-              _mobx.store.setState({
-                textSelection: findSelectionRange.content
-              });
-            } else {
-              /** 选中已经配置过的区域 不能拆分 */
-              _mobx.store.setState({
-                textSelection: findSelectionRangeTarget_1.content
-              });
-            }
-          }
-        } else {
-          _mobx.store.setState({
-            textSelection: null
-          });
-        }
-
-        findSelectionTarget.refresh();
-      } // todo 不知道干什么用的
-
-
-      triggerTextConfigRender();
-    }, 500);
-  }
-};
-/** 添加选择区域监听目标 */
-
-
-var appendSelectionTarget = function appendSelectionTarget(data) {
-  if (!window._selectionTarget) {
-    window._selectionTarget = [__assign({}, data)];
-  } else {
-    window._selectionTarget.push(__assign({}, data));
-  }
-};
-/** 删除监听目标 */
-
-
-var deleteSelectionTarget = function deleteSelectionTarget(deleteTarget) {
-  window._selectionTarget = window._selectionTarget.filter(function (_a) {
-    var target = _a.target;
-    return target != deleteTarget;
-  });
-};
-
 var Text =
 /** @class */
 function (_super) {
@@ -294,145 +118,56 @@ function (_super) {
   function Text() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.state = {};
-    /** 分割区域dom映射 */
-
-    _this.selectionRefMap = {};
     _this.textRef = /*#__PURE__*/_react["default"].createRef();
-    /** 备份历史数据 比对不一致时渲染 */
-
-    _this.preData = '';
-    _this.preTextSelection = null;
-    /** 创建关闭图标按钮 */
-
-    _this.createHoverClose = function (node, onCloseClick) {
-      if (onCloseClick === void 0) {
-        onCloseClick = function onCloseClick() {};
-      }
-
-      node.className = 'select-container';
-      var closeNode = document.createElement('span');
-      closeNode.className = 'close-wrap';
-      closeNode.contentEditable = 'false';
-      var iconNode = document.createElement('span');
-      iconNode.contentEditable = 'false';
-      iconNode.className = (0, _Iconfont.convertIconClass)('icon-close-circle');
-      iconNode.onclick = onCloseClick;
-      closeNode.appendChild(iconNode);
-      node.appendChild(closeNode);
+    _this.quillRef = null;
+    _this.state = {
+      editabled: false
     };
 
-    _this.renderText = function (data, mode) {
-      var outputType = _this.props.outputType || window.magicDesign.outputType;
-
-      var _mode = mode || window.magicDesign.mode;
-
-      if (!_this.textRef.current) return;
-
-      _this.textRef.current.blur();
-      /** 保留历史数据 */
-
-
-      _this.preData = JSON.stringify(data);
-      _this.preTextSelection = _mobx.store.textSelection;
-      _this.preDevice = window.magicDesign.device;
-      /** 渲染html */
-
-      if (data.specialContent.length == 0) {
-        if (outputType == 'html' && _mode == 'renderer') {
-          if (data === null || data === void 0 ? void 0 : data.content.clickUrl) {
-            var a = document.createElement('a');
-            a.href = _typeof(data.content.clickUrl) === 'object' ? data.content.clickUrl.value : data.content.clickUrl;
-            a.target = '_blank';
-            a.innerHTML = data.text;
-            _this.textRef.current.innerHTML = '';
+    _this.renderEditor = function () {
+      _this.setState({
+        editabled: true
+      }, function () {
+        _this.quillRef = new _quill["default"](_this.textRef.current, {
+          placeholder: '请输入内容...'
+        });
 
-            _this.textRef.current.appendChild(a);
-          } else {
-            _this.textRef.current.innerHTML = data.text;
+        _mobx.frameStore.setState({
+          textModalState: {
+            quillRef: null
           }
-        } else {
-          _this.textRef.current.innerHTML = data.text;
-        }
-      } else {
-        _this.textRef.current.innerHTML = '';
-        data.specialContent.forEach(function (c, index) {
-          var _a, _b, _c;
-
-          var node = document.createElement('span');
-          node.style = (0, _commonUtil.styleStringify)(contentStyle(c.content));
-
-          if (c === null || c === void 0 ? void 0 : c.content.clickUrl) {
-            if (outputType == 'html' && _mode == 'renderer') {
-              var a = document.createElement('a');
-              a.href = _typeof(c.content.clickUrl) === 'object' ? c.content.clickUrl.value : c.content.clickUrl;
-              a.target = '_blank';
-
-              if (_mode == 'designer') {
-                a.onclick = function (e) {
-                  e.preventDefault();
-                };
-              }
-
-              a.innerText = (_a = data.text).slice.apply(_a, c.range);
-              node.appendChild(a);
-            } else {
-              node.innerText = (_b = data.text).slice.apply(_b, c.range);
-
-              node.onclick = function (e) {
-                if (c.content.clickUrl) {
-                  e.stopPropagation();
-                }
-
-                (0, _coreUtil.clickUrl)(c.content.clickUrl);
-              };
-            }
-          } else {
-            node.innerText = (_c = data.text).slice.apply(_c, c.range);
-          }
-
-          _this.selectionRefMap[JSON.stringify(c.range)] = node;
-
-          _this.textRef.current.appendChild(node);
-          /** 找到当前选中的区域 */
-
-
-          if (_mobx.store.textSelection == (c === null || c === void 0 ? void 0 : c.content)) {
-            /** 添加删除按钮 */
-            _this.createHoverClose(node, function () {
-              /** 第一步去除选中区域 */
-              _mobx.store.setState({
-                textSelection: null
-              });
-              /** 清空区间配置 */
-
+        });
 
-              data.specialContent[index].content = {};
-              /** 合并区间无配置区间 */
+        setTimeout(function () {
+          _mobx.frameStore.setState({
+            textModalState: {
+              quillRef: _this.quillRef
+            }
+          });
+        }, 100);
+      });
+    };
 
-              for (var i = 0; i < data.specialContent.length - 1;) {
-                /** 如果本级和下级都是空值 那么合并 */
-                if ((0, _lodash.isEmpty)(data.specialContent[i].content) && (0, _lodash.isEmpty)(data.specialContent[i + 1].content)) {
-                  data.specialContent[i].range = [data.specialContent[i].range[0], data.specialContent[i + 1].range[1]];
-                  data.specialContent.splice(i + 1, 1);
-                } else {
-                  i += 1;
-                }
-              }
+    _this.onContentClick = function () {
+      var data = _this.props.data;
 
-              triggerTextConfigRender();
-            });
-          }
-        });
+      if (window.magicDesign.mode == 'designer') {
+        _this.renderEditor();
+      } else {
+        (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-      /** 清除无用的node */
+    };
 
+    _this.onEditorClose = function () {
+      _this.props.data.html = _this.quillRef.root.innerHTML;
 
-      Object.keys(_this.selectionRefMap).forEach(function (key) {
-        if (!data.specialContent.find(function (c) {
-          return JSON.stringify(c.range) == key;
-        })) {
-          Reflect.deleteProperty(_this.selectionRefMap, key);
+      _this.setState({
+        editabled: false
+      });
+
+      _mobx.frameStore.setState({
+        textModalState: {
+          quillRef: null
         }
       });
     };
@@ -441,49 +176,24 @@ function (_super) {
   }
 
   Text.prototype.componentDidMount = function () {
-    var _this = this;
-
-    this.renderText(this.props.data, this.props.mode);
-    initSelectionEvent();
-    appendSelectionTarget({
-      target: this.textRef.current,
-      data: this.props.data,
-      selectionRefMap: this.selectionRefMap,
-      refresh: function refresh() {
-        _this.renderText(_this.props.data, _this.props.mode);
-      }
-    });
-  };
-
-  Text.prototype.shouldComponentUpdate = function (nextProps) {
-    var should1 = JSON.stringify(nextProps.data) != this.preData;
-    var should2 = _mobx.store.textSelection != this.preTextSelection;
-    var should3 = window.magicDesign.device != this.preDevice;
-    var result = should1 || should2 || should3;
-
-    if (result) {
-      this.renderText(nextProps.data, nextProps.mode);
-    }
+    var _a;
 
-    return result;
-  };
+    (_a = this.textRef.current.querySelector('.quill-text-content-wrap a')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', function (event) {
+      event.preventDefault();
+      var target = event.target;
+      var href = target.getAttribute('href'); // 在这里执行你想要的操作
 
-  Text.prototype.componentWillUnmount = function () {
-    deleteSelectionTarget(this.textRef.current);
+      console.log('链接点击事件:', href);
+      var data = JSON.parse(href);
+      (0, _coreUtil.clickUrl)(data);
+    });
   };
 
   Text.prototype.render = function () {
-    var _this = this;
-
     var _a = this.props,
         data = _a.data,
-        className = _a.className,
-        readonly = _a.readonly,
-        onTextInput = _a.onTextInput,
-        mode = _a.mode;
-
-    var _mode = mode || window.magicDesign.mode;
-
+        className = _a.className;
+    var editabled = this.state.editabled;
     var style = contentStyle(data.content);
 
     if (data.underline) {
@@ -501,41 +211,46 @@ function (_super) {
       } else {
         style = __assign(__assign({}, style), data.spacing.mobile);
       }
-    } // const style: React.CSSProperties = {
-    //   ...contentStyle(data.content),
-    //   textDecorationLine: data?.underline.open ? 'underline' : 'none',
-    //   textDecorationColor: data?.underline.textDecorationColor,
-    //   textDecorationStyle: data?.underline.textDecorationStyle,
-    // };
+    }
 
+    if (editabled) {
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "editor-shadow",
+        onClick: this.onEditorClose
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "quill-text-content-wrap",
+        style: {
+          zIndex: 3
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.textRef,
+        className: (0, _classnames["default"])('m-meta-text', className),
+        dangerouslySetInnerHTML: {
+          __html: data.html || data.text
+        },
+        onClick: function onClick() {
+          (0, _coreUtil.clickUrl)(data.content.clickUrl);
+        },
+        onKeyDown: function onKeyDown(e) {
+          e.stopPropagation();
+        },
+        style: (0, _commonUtil.pxToRem)(__assign({}, style))
+      })));
+    }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,
-      className: (0, _classnames["default"])('m-meta-text', className),
-      contentEditable: _mode == 'designer' && !readonly,
-      onClick: function onClick() {
-        (0, _coreUtil.clickUrl)(data.content.clickUrl);
-      },
-      onInput: function onInput(e) {
-        var text = e.target.textContent;
-        data.text = text;
-        /** 毁灭吧 累了 */
-
-        data.specialContent = [];
-        /** 主动更新历史数据避免render */
-
-        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
-          text: text
-        }));
-        /** 通知变更 */
-
-        onTextInput(text);
+      className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className),
+      dangerouslySetInnerHTML: {
+        __html: data.html || data.text
       },
+      onClick: this.onContentClick,
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: (0, _commonUtil.pxToRem)(__assign({}, style)),
-      suppressContentEditableWarning: true
+      style: (0, _commonUtil.pxToRem)(__assign(__assign({}, style), {
+        zIndex: 1
+      }))
     });
   };
 

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

@@ -1,6 +1,63 @@
+.editor-shadow {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 2;
+}
+
+.quill-text-content-wrap {
+  position: relative;
+  z-index: 3;
+
+  .ql-font-Montserrat {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .ql-font-MontserratBold {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  .ql-font-OpenSans {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .ql-font-OpenSansBold {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+  }
+}
+
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+
 .m-meta-text {
   display: block;
 
+
+  ol,
+  ul,
+  dl,
+  p {
+    margin-bottom: 0;
+  }
+
+
+
   .select-container {
     position: relative;