@chaoswise/ui 3.0.6 → 3.0.7

package/lib/WangEditor/index.js

@@ -0,0 +1,298 @@
+var _excluded = ["isSeparation", "htmlContent", "value", "disabled", "onChange", "onFocus", "onBlur", "pasteTextHandle", "autoFocus", "isUsePreview", "dropListPosition"];
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useEffect, Fragment, useRef, forwardRef } from "react";
+import E from "./wangEditor";
+import PropTypes from "prop-types";
+import { localeObj, localObjTW } from "./locale/index";
+import { useIntl } from "../locales";
+import usePreview from "./usePreview";
+import resizeable from "./resizeable";
+var localOptionsMap = {
+  en: localeObj,
+  en_US: localeObj,
+  zh_TW: localObjTW,
+  zh: {},
+  zh_CN: {}
+};
+import classnames from "classnames";
+import useConfigContext from "../useConfigContext";
+import useStyle from "./index.style";
+
+/**
+ * 基于wangEditor封装 支持value受控 ref获取editor实例；
+ * 如当前API无法满足使用，请查阅官方文档，使用ref获取editor实例来进行操作
+ */
+var WangEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$isSeparation = _ref.isSeparation,
+    isSeparation = _ref$isSeparation === void 0 ? false : _ref$isSeparation,
+    _ref$htmlContent = _ref.htmlContent,
+    htmlContent = _ref$htmlContent === void 0 ? "<p><br></p>" : _ref$htmlContent,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "<p><br></p>" : _ref$value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    _ref$pasteTextHandle = _ref.pasteTextHandle,
+    pasteTextHandle = _ref$pasteTextHandle === void 0 ? function () {} : _ref$pasteTextHandle,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$isUsePreview = _ref.isUsePreview,
+    isUsePreview = _ref$isUsePreview === void 0 ? true : _ref$isUsePreview,
+    _ref$dropListPosition = _ref.dropListPosition,
+    dropListPosition = _ref$dropListPosition === void 0 ? "right" : _ref$dropListPosition,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("editor");
+  var _useStyle = useStyle(prefixCls),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var _usePreview = usePreview(),
+    modalDom = _usePreview.modalDom,
+    dispatchSetImgList = _usePreview.dispatchSetImgList;
+  var editor = useRef(null);
+  var notSeparationRef = useRef(null);
+  var separaTopRef = useRef(null);
+  var separaBotRef = useRef(null);
+  var intl = useIntl();
+  var _ref2 = (intl === null || intl === void 0 ? void 0 : intl.options) || {},
+    _ref2$currentLocale = _ref2.currentLocale,
+    locale = _ref2$currentLocale === void 0 ? "zh_CN" : _ref2$currentLocale;
+
+  // 初始化编辑器
+  useEffect(function () {
+    var notSepaDom = notSeparationRef.current;
+    var sepaTopDom = separaTopRef.current;
+    var sepaBotDom = separaBotRef.current;
+
+    //菜单和编辑器是否分离
+    if (isSeparation) {
+      editor.current = new E(sepaTopDom, sepaBotDom);
+    } else {
+      editor.current = new E(notSepaDom);
+    }
+
+    // 初始化配置
+    initConfig(editor.current);
+
+    // 创建
+    editor.current.create();
+
+    // 自定义方法
+    customFunc(editor.current);
+
+    // 挂载实例
+    if (ref) {
+      ref.current = editor.current;
+    }
+  }, []);
+  useEffect(function () {
+    var editorContainer = editor.current.getTextElem();
+    var imgList = [];
+    editorContainer.querySelectorAll("img").forEach(function (img, index) {
+      resizeable({
+        target: img
+      });
+      imgList.push({
+        src: img === null || img === void 0 ? void 0 : img.getAttribute("src"),
+        alt: ""
+      });
+      if (isUsePreview) {
+        img.ondblclick = function (e) {
+          dispatchSetImgList(imgList, index);
+        };
+      }
+    });
+  });
+  useEffect(function () {
+    // 切换语言
+    editor.current.customConfig.lang = localOptionsMap[locale];
+    editor.current._initConfig();
+    editor.current.$toolbarElem.html("");
+    editor.current._initMenus();
+  }, [locale]);
+  useEffect(function () {
+    editor.current.txt.html(htmlContent, true); // 第二个参数是否外部受控
+  }, [htmlContent]);
+  useEffect(function () {
+    // FIXED 输入第一个汉字，首字母会自动输入为英文
+    var _value = value || "<p><br></p>";
+    editor.current.txt.html(_value, true);
+  }, [value]);
+
+  // 初始化配置文件
+  var initConfig = function initConfig(editor) {
+    // 取消延迟
+    editor.customConfig.onchangeTimeout = 1;
+    // 调整操作icon层级 10000 太高了
+    editor.customConfig.zIndex = 100;
+    // 禁用配置
+    editor.customConfig.disabled = disabled;
+    // 自动聚焦配置
+    editor.customConfig.autoFocus = autoFocus;
+    // dropList弹出位置
+    editor.customConfig.dropListPosition = dropListPosition;
+    // 重写方法名称为驼峰
+    editor.customConfig.onchange = onChange;
+    editor.customConfig.onblur = onBlur;
+    editor.customConfig.onfocus = onFocus;
+    editor.customConfig.pasteTextHandle = pasteTextHandle;
+    editor.customConfig.lang = localOptionsMap[locale];
+    for (var i in rest) {
+      editor.customConfig[i] = rest[i];
+    }
+  };
+
+  // 基于wangeditor api 封装的函数
+  var customFunc = function customFunc(editor) {
+    // 设计编辑器内容
+    editor.insertHtml = function (insertHtml) {
+      editor.cmd["do"]("insertHTML", insertHtml);
+    };
+    // 清空内容
+    editor.clear = function () {
+      editor.txt.clear();
+    };
+    // 获取编辑器的唯一标识
+    editor.getId = function () {
+      return editor.id;
+    };
+    // 获取编辑区域DOM节点
+    editor.getTextElem = function () {
+      return editor.$textElem[0];
+    };
+    // 获取菜单栏 DOM 节点
+    editor.getToolbarElem = function () {
+      return editor.$toolbarElem[0];
+    };
+    // 获取编辑器配置信息
+    editor.getConfig = function () {
+      return editor.config;
+    };
+    // 获取编辑区域 DOM 节点 ID
+    editor.getTextElemId = function () {
+      return editor.textElemId;
+    };
+    // 获取菜单栏 DOM 节点 ID
+    editor.getToolbarElemId = function () {
+      return editor.toolbarElemId;
+    };
+    // 获取菜单栏中“图片”菜单的 DOM 节点 ID
+    editor.getImgMenuId = function () {
+      return editor.current.imgMenuId;
+    };
+    // 获取选中的文字
+    editor.getSelectionText = function () {
+      return editor.selection.getSelectionText();
+    };
+    // 获取选取所在的 DOM 节点
+    editor.getSelectionContainerElem = function () {
+      return editor.selection.getSelectionContainerElem()[0];
+    };
+    // 开始节点
+    editor.getSelectionStartElem = function () {
+      return editor.selection.getSelectionStartElem()[0];
+    };
+    // 结束节点
+    editor.getSelectionEndElem = function () {
+      return editor.selection.getSelectionEndElem()[0];
+    };
+    // 折叠选取
+    editor.collapseRange = function () {
+      editor.selection.collapseRange();
+    };
+    // 获取html
+    editor.getHtml = function () {
+      editor.txt.html();
+    };
+    // 获取text
+    editor.getText = function () {
+      editor.txt.text();
+    };
+    // 获取JSON
+    editor.getJSON = function () {
+      editor.txt.getJSON();
+    };
+  };
+
+  // 是否禁用
+  useEffect(function () {
+    editor.current.$textElem.attr("contenteditable", !disabled);
+  }, [disabled]);
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(prefixCls, hashId, cssVarCls, "".concat(prefixCls, "-wrapper"))
+  }, !isSeparation ? /*#__PURE__*/React.createElement("div", {
+    id: "".concat(prefixCls),
+    ref: notSeparationRef
+  }) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-toolbar"),
+    ref: separaTopRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-text"),
+    ref: separaBotRef
+  })), modalDom));
+});
+WangEditor.defaultProps = {
+  uploadImgShowBase64: true,
+  dropListPosition: "right",
+  pasteTextHandle: function pasteTextHandle(content) {
+    return content;
+  }
+};
+WangEditor.propTypes = {
+  /**
+   * 是否禁用编辑器
+   */
+  disabled: PropTypes.bool,
+  /**
+   * 菜单和编辑区是否分离
+   */
+  isSeparation: PropTypes.bool,
+  /**
+   * 设置编辑器的内容即将废弃（将使用value代替）
+   */
+  htmlContent: PropTypes.string,
+  /**
+   * 设置编辑器的内容
+   */
+  value: PropTypes.string,
+  /**
+   * 配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行。
+   * onChange = (newHtml) = { console.log(newHtml) }
+   */
+  onChange: PropTypes.func,
+  /**
+   * 聚焦的回调
+   * onFocus = () = {  }
+   */
+  onFocus: PropTypes.func,
+  /**
+   * 失焦的回调
+   * onBlur = (newHtml) = { console.log(newHtml) }
+   */
+  onBlur: PropTypes.func,
+  /**
+   * dropList弹出位置
+   */
+  dropListPosition: PropTypes.oneOf(["left", "center", "right"]),
+  /**
+   * 自定义处理粘贴的文本内容
+   * pasteTextHandle = (content) => {return content}
+   */
+  pasteTextHandle: PropTypes.func
+};
+export default WangEditor;

package/lib/WangEditor/index.style.js

@@ -0,0 +1,203 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genStyleHooks } from "../Antd5/theme/internal";
+var genCustomCWWangEditorStyle = function genCustomCWWangEditorStyle(token) {
+  var _$concat;
+  var prefixCls = token.antCls,
+    WangEditorPrefix = token.prefixCls;
+  var editorPrefix = "".concat(prefixCls, "-editor");
+  return _defineProperty({}, "".concat(prefixCls, "-editor-wrapper"), (_$concat = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat, "#".concat(WangEditorPrefix), {
+    "h1, h2, h3, h4, h5, h6": {
+      color: token.colorText
+    },
+    ".w-e-toolbar": {
+      backgroundColor: "".concat(token.colorFillQuaternary, " !important"),
+      borderColor: "".concat(token.colorBorderSecondary, " !important"),
+      padding: "16px 12px",
+      ".w-e-menu": {
+        padding: "0 24px 0 0",
+        "&:hover": {
+          zIndex: "999 !important"
+        },
+        "> i": {
+          display: "block",
+          width: "16px",
+          height: "16px",
+          lineHeight: "16px",
+          "&::before": {
+            fontSize: "12px"
+          }
+        },
+        ".w-e-droplist": {
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorderSecondary,
+          ".w-e-dp-title": {
+            borderBottomColor: token.colorBorderSecondary
+          },
+          "ul.w-e-list": {
+            "li.w-e-item": {
+              color: token.colorText,
+              fontSize: "12px"
+            }
+          }
+        }
+      }
+    },
+    ".w-e-text-container": {
+      borderColor: "".concat(token.colorBorderSecondary, " !important"),
+      ".w-e-text": {
+        padding: "12px !important",
+        fontSize: "12px",
+        a: {
+          color: token.colorPrimary,
+          textDecoration: "none",
+          backgroundColor: "transparent",
+          outline: "none",
+          cursor: "pointer"
+        },
+        "> p, h1, h2, h3, h4, h5, table, pre": {
+          margin: "0"
+        },
+        blockquote: {
+          backgroundColor: token.colorFillTertiary
+        }
+      },
+      ".w-e-panel-container": {
+        backgroundColor: token.colorBgContainer,
+        borderColor: token.colorBorderSecondary,
+        boxShadow: token.boxShadow,
+        ".w-e-panel-tab-title": {
+          borderColor: token.colorBorderSecondary
+        },
+        ".w-e-panel-tab-content": {
+          input: {
+            backgroundColor: token.colorBgContainer
+          },
+          textarea: {
+            backgroundColor: token.colorBgContainer,
+            borderColor: token.colorBorderSecondary
+          },
+          ".w-e-button-container": {
+            button: {
+              backgroundColor: token.colorBgContainer
+            }
+          }
+        }
+      }
+    }
+  }), "".concat(editorPrefix, "-toolbar"), {
+    border: "1px solid ".concat(token.colorBorderSecondary),
+    marginBottom: "8px",
+    padding: "16px 12px",
+    ".w-e-menu": {
+      padding: "0 24px 0 0",
+      "> i": {
+        display: "block",
+        width: "16px",
+        height: "16px",
+        lineHeight: "16px",
+        "&::before": {
+          fontSize: "12px"
+        }
+      }
+    }
+  }), "".concat(editorPrefix, "-text"), {
+    border: "1px solid ".concat(token.colorBorderSecondary),
+    minHeight: "208px",
+    ".w-e-text": {
+      padding: "12px !important",
+      "> p, h1, h2, h3, h4, h5, table, pre": {
+        margin: "0"
+      }
+    }
+  }), ".w-e-show-placeholder[placeholder]:before", {
+    content: "attr(placeholder)",
+    color: token.colorTextSecondary
+  }), ".w-e-show-placeholder[placeholder]:focus::before", {
+    content: '""'
+  }), ".w-e-tooltip", {
+    position: "absolute",
+    display: "flex",
+    color: "#f1f1f1",
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.15)",
+    borderRadius: "4px",
+    padding: "4px 5px 6px !important",
+    justifyContent: "center",
+    alignItems: "center",
+    lineHeight: "initial",
+    ".w-e-tooltip-item-wrapper": {
+      cursor: "pointer",
+      fontSize: "14px !important",
+      margin: "0 5px !important"
+    }
+  }), ".w-e-tooltip-up::after", {
+    content: '""',
+    position: "absolute",
+    top: "100%",
+    left: "50%",
+    marginLeft: "-5px",
+    border: "5px solid rgba(0, 0, 0, 0)",
+    borderTopColor: "rgba(0, 0, 0, 0.73)"
+  }), ".w-e-tooltip-down::before", {
+    content: '""',
+    position: "absolute",
+    top: "-10px",
+    left: "50%",
+    marginLeft: "-5px",
+    border: "5px solid rgba(0, 0, 0, 0)",
+    borderBottomColor: "rgba(0, 0, 0, 0.73)"
+  }), ".w-e-tooltip-up-left::after", {
+    content: '""',
+    position: "absolute",
+    top: "100%",
+    left: "24%",
+    marginLeft: "-5px",
+    border: "5px solid rgba(0, 0, 0, 0)",
+    borderTopColor: "rgba(0, 0, 0, 0.73)"
+  }), ".w-e-tooltip-down-left::before", {
+    content: '""',
+    position: "absolute",
+    top: "-10px",
+    left: "24%",
+    marginLeft: "-5px",
+    border: "5px solid rgba(0, 0, 0, 0)",
+    borderBottomColor: "rgba(0, 0, 0, 0.73)"
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat, ".w-e-tooltip-up-right::after", {
+    content: '""',
+    position: "absolute",
+    top: "100%",
+    left: "75%",
+    marginLeft: "-5px",
+    border: "5px solid rgba(0, 0, 0, 0)",
+    borderTopColor: "rgba(0, 0, 0, 0.73)"
+  }), ".w-e-tooltip-down-right::before", {
+    content: '""',
+    position: "absolute",
+    top: "-10px",
+    left: "75%",
+    marginLeft: "-5px",
+    border: "5px solid rgba(0, 0, 0, 0)",
+    borderBottomColor: "rgba(0, 0, 0, 0.73)"
+  }), ".chr", {
+    cursor: "ew-resize !important"
+  }), ".cvr", {
+    cursor: "ns-resize !important"
+  }), ".cner", {
+    cursor: "nesw-resize !important"
+  }), ".cnwr", {
+    cursor: "nwse-resize !important"
+  }), ".cdft", {
+    cursor: "cursor !important"
+  }), ".cmove", {
+    cursor: "move !important"
+  })));
+};
+// ============================== Export ==============================
+export default genStyleHooks("CWWangEditor", function (token) {
+  return [
+  //
+  genCustomCWWangEditorStyle(token)];
+});

package/lib/WangEditor/locale/index.js

@@ -0,0 +1,62 @@
+export var localeObj = {
+  设置标题: "Heading",
+  正文: "Normal",
+  链接文字: "Link text",
+  链接: "Link",
+  上传图片: "Local",
+  上传: "Upload",
+  有序列表: "Ordered list",
+  无序列表: "Unordered list",
+  靠左: "Left",
+  居中: "Center",
+  靠右: "Right",
+  字号: "Font size",
+  字体: "Font",
+  文字颜色: "Font color",
+  背景色: "Background color",
+  设置列表: "List",
+  插入代码: "Code",
+  插入视频: "Video",
+  格式如: "Format example",
+  插入表格: "Table",
+  列的表格: "columns",
+  行: "rows",
+  默认: "Default",
+  新浪: "Sina",
+  对齐方式: "Alignment",
+  网络图片: "Web",
+  插入: "Insert",
+  创建: "Create",
+  图片: "Image "
+};
+export var localObjTW = {
+  设置标题: "設置標題",
+  正文: "正文",
+  链接文字: "鏈接文字",
+  链接: "鏈接",
+  上传图片: "上傳圖片",
+  上传: "上傳",
+  有序列表: "有序列表",
+  无序列表: "無序列表",
+  靠左: "靠左",
+  居中: "居中",
+  靠右: "靠右",
+  字号: "字號",
+  字体: "字體",
+  文字颜色: "文字顏色",
+  背景色: "背景色",
+  设置列表: "設置列表",
+  插入代码: "插入代碼",
+  插入视频: "插入視頻",
+  格式如: "格式如",
+  插入表格: "插入表格",
+  列的表格: "列的表格",
+  行: "行",
+  默认: "默認",
+  新浪: "新浪",
+  对齐方式: "對齊方式",
+  网络图片: "網絡圖片",
+  插入: "插入",
+  创建: "創建",
+  图片: "圖片"
+};