@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.8 → 1.0.4-alpha.1

package/es/LcdpUeditor.d.ts

@@ -37,19 +37,20 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      * 上传文件函数
      */
     private uploadFunction;
-    /**
-     * 是否加载完成
-     */
-    private isReady;
     /**
      * 保存 compositionend 事件处理器引用
      */
     private compositionEndHandler?;
+    /**
+     * 是否全屏
+     */
+    private prefixCls;
     /**
      * 初始加载失败
      */
     state: Readonly<{
         initError: boolean;
+        isReady: boolean;
     }>;
     /**
      * 编辑器配置项
@@ -58,6 +59,7 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
     constructor(props: ILcdpUeditorProps);
     componentDidMount(): void;
     componentWillReceiveProps(nextProps: ILcdpUeditorProps): void;
+    componentDidUpdate(prevProps: Readonly<ILcdpUeditorProps>): void;
     componentWillUnmount(): void;
     private onContentChange;
     private getExtString;
@@ -80,6 +82,10 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      * 初始化编辑器实例
      */
     initUeditor(): Promise<void>;
+    /**
+     * 渲染状态栏
+     */
+    renderStatusBar(): void;
     render(): React.ReactNode;
 }
 export default LcdpUeditor;

package/es/LcdpUeditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LcdpUeditor.d.ts","sourceRoot":"","sources":["LcdpUeditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQhD,cAAM,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC9D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAwB;IAE3C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAwD;IAExE;;OAEG;IACH,OAAO,CAAC,YAAY,CAAwD;IAE5E;;OAEG;IACH,OAAO,CAAC,WAAW,CAAS;IAE5B;;OAEG;IACH,OAAO,CAAC,WAAW,CAAa;IAEhC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAiB;IAErC;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAAW;IAExC;;OAEG;IACH,OAAO,CAAC,cAAc,CAAc;IAEpC;;OAEG;IACH,OAAO,CAAC,cAAc,CAAM;IAE5B;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAAC,CAAa;IAE3C;;OAEG;IACH,OAAO,CAAC,SAAS,CAAuB;IAExC;;OAEG;IACH,KAAK,EAAE,QAAQ,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAOvD;IAEF;;OAEG;IACH,YAAY,EAAE,GAAG,CAAM;gBAEX,KAAK,EAAE,iBAAiB;IAgDpC,iBAAiB,IAAI,IAAI;IAIzB,yBAAyB,CAAC,SAAS,EAAE,iBAAiB;IAiBtD,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAUhE,oBAAoB,IAAI,IAAI;IAY5B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,UAAU;IAWlB;;;;OAIG;YACW,UAAU;IAqCxB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAMhB;;OAEG;IACH,OAAO,CAAC,SAAS;IAcjB;;OAEG;IACG,WAAW;IA4DjB;;OAEG;IACH,eAAe;IAsCf,MAAM,IAAI,KAAK,CAAC,SAAS;CAY1B;AAED,eAAe,WAAW,CAAC"}

package/es/LcdpUeditor.js

@@ -8,11 +8,13 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { DEFAULT_UEDITOR_CONFIG, DEFAULT_UEDITOR_PATH } from "./const";
 import DefaultConfig from "./defaultConfig.json";
 import UeditorResourceLoader from "./tools/UeditorResourceLoader";
 import debounce from 'lodash/debounce';
 import { filterHtmlNode } from "./tools/filterHtmlNode";
+import ToolBottomBar from "./ToolBottomBar";
 var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
   _inherits(LcdpUeditor, _React$Component);
   var _super = _createSuper(LcdpUeditor);
@@ -56,25 +58,31 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
      * 上传文件函数
      */
     _defineProperty(_assertThisInitialized(_this), "uploadFunction", void 0);
-    /**
-     * 是否加载完成
-     */
-    _defineProperty(_assertThisInitialized(_this), "isReady", false);
     /**
      * 保存 compositionend 事件处理器引用
      */
     _defineProperty(_assertThisInitialized(_this), "compositionEndHandler", void 0);
+    /**
+     * 是否全屏
+     */
+    _defineProperty(_assertThisInitialized(_this), "prefixCls", 'pcfactory');
     /**
      * 初始加载失败
      */
     _defineProperty(_assertThisInitialized(_this), "state", {
-      initError: false
+      initError: false,
+      /**
+      * 是否加载完成
+      */
+      isReady: false
     });
     /**
      * 编辑器配置项
      */
     _defineProperty(_assertThisInitialized(_this), "editorConfig", {});
-    var config = props.config;
+    var config = props.config,
+      prefixCls = props.prefixCls,
+      onFormatChange = props.onFormatChange;
     _this.containerId = "ueditor_".concat(Date.now(), "_").concat(String(Math.random()).slice(2, 6));
     if (_this.props.ueditorPath) {
       _this.ueditorPath = _this.props.ueditorPath;
@@ -102,6 +110,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
       }
       return null;
     };
+    _this.prefixCls = prefixCls || 'pcfactory';
     _this.editorConfig = _objectSpread(_objectSpread({}, DefaultConfig), {}, {
       maximumWords: (config === null || config === void 0 ? void 0 : config.maximumWords) || 10000,
       initialFrameHeight: (config === null || config === void 0 ? void 0 : config.height) || 300,
@@ -111,7 +120,9 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
       },
       uploadFunction: _this.uploadFunction,
       initialContent: '',
-      pasteplain: (config === null || config === void 0 ? void 0 : config.pasteplain) === true
+      pasteplain: (config === null || config === void 0 ? void 0 : config.pasteplain) === true,
+      onFormatChange: onFormatChange,
+      exportFileName: (config === null || config === void 0 ? void 0 : config.exportFileName) || '未命名'
     });
     _this.debounceContentChange = debounce(_this.onContentChange.bind(_assertThisInitialized(_this)), 300);
     return _this;
@@ -124,7 +135,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      if (this.isReady) {
+      if (this.state.isReady) {
         if ('value' in nextProps && this.currentContent !== nextProps.value) {
           this.isReportFlag = false;
           this.ueditorInst.setContent(filterHtmlNode(nextProps.value || '').str);
@@ -139,10 +150,18 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
         }
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _prevProps$config, _this$props;
+      if (this.state.isReady && (prevProps.defaultFormatSetting !== this.props.defaultFormatSetting || prevProps.bottomTypes !== this.props.bottomTypes || (prevProps === null || prevProps === void 0 || (_prevProps$config = prevProps.config) === null || _prevProps$config === void 0 ? void 0 : _prevProps$config.exportFileName) !== ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.config) === null || _this$props === void 0 ? void 0 : _this$props.exportFileName))) {
+        this.renderStatusBar();
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.isReady) {
+      if (this.state.isReady) {
         var _this$ueditorInst, _this$ueditorInst2, _this$ueditorInst2$de;
         var editorBody = (_this$ueditorInst = this.ueditorInst) === null || _this$ueditorInst === void 0 ? void 0 : _this$ueditorInst.body;
         if (editorBody && this.compositionEndHandler) {
@@ -336,7 +355,9 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
                   if (nextValue) {
                     _this3.ueditorInst.setContent(nextValue);
                   }
-                  _this3.isReady = true;
+                  _this3.setState({
+                    isReady: true
+                  });
                   // 禁用状态设置
                   if (_this3.props.disabled) {
                     _this3.ueditorInst.setDisabled();
@@ -357,6 +378,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
                   }
                   _this3.initStyle();
                   _this3.mountRef();
+                  _this3.renderStatusBar();
                 });
               };
               UeditorResourceLoader.onReady(readyFunc);
@@ -378,7 +400,51 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
         return _initUeditor.apply(this, arguments);
       }
       return initUeditor;
-    }())
+    }()
+    /**
+     * 渲染状态栏
+     */
+    )
+  }, {
+    key: "renderStatusBar",
+    value: function renderStatusBar() {
+      var _this$containerRef$cu, _this$props2;
+      var _ref4 = this.ueditorInst.ui || {},
+        id = _ref4.id;
+      var bottomBarContainer = (_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.querySelector("#".concat(id, "_bottombar"));
+      var comp = /*#__PURE__*/React.createElement(ToolBottomBar, {
+        ueditorInst: this.ueditorInst,
+        prefixCls: this.prefixCls,
+        containerRef: this.containerRef,
+        defaultFormatSetting: this.props.defaultFormatSetting,
+        onFormatChange: this.editorConfig.onFormatChange,
+        isReady: this.state.isReady,
+        bottomTypes: this.props.bottomTypes,
+        exportFileName: (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.config) === null || _this$props2 === void 0 ? void 0 : _this$props2.exportFileName
+      });
+      if (bottomBarContainer) {
+        var _this$props$bottomTyp;
+        // 获取底部状态组件
+        var statusContainer = bottomBarContainer.querySelector("#".concat(id, "_bottomStatusBar"));
+        // 移除底部状态栏的样式
+        bottomBarContainer.classList.remove('ueditor-bottom-bar-with-status');
+        // 如果底部状态栏有类型，则添加样式
+        if ((_this$props$bottomTyp = this.props.bottomTypes) !== null && _this$props$bottomTyp !== void 0 && _this$props$bottomTyp.length) {
+          bottomBarContainer.classList.add('ueditor-bottom-bar-with-status');
+          // 如果底部状态栏没有组件，则创建组件
+          if (!statusContainer) {
+            statusContainer = document.createElement('div');
+            statusContainer.id = "".concat(id, "_bottomStatusBar");
+            bottomBarContainer.appendChild(statusContainer);
+          }
+          // 渲染组件
+          ReactDOM.render(comp, statusContainer);
+        } else if (statusContainer) {
+          // 如果底部状态栏有类型，但是类型为空，则移除组件
+          statusContainer.remove();
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {

package/es/ToolBottomBar/FormatModal/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+import { FormatSettings } from '../../tools/generateStylesFromSettings';
+interface FormatSettingsPanelProps {
+    onApply: (settings: FormatSettings) => void;
+    initialSettings?: Partial<FormatSettings>;
+}
+declare const FormatSettingsPanel: React.FC<React.PropsWithChildren<FormatSettingsPanelProps>>;
+export default FormatSettingsPanel;

package/es/ToolBottomBar/FormatModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAa,MAAM,wCAAwC,CAAC;AAEnF,UAAU,wBAAwB;IAChC,OAAO,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC3C;AA6LD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,CA8JpF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}