@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.13 → 1.0.3-alpha.14

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;
     }>;
     /**
      * 编辑器配置项
@@ -80,6 +81,16 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      * 初始化编辑器实例
      */
     initUeditor(): Promise<void>;
+    getStatusBarItem: (params: {
+        icon: React.ReactNode;
+        content: React.ReactNode;
+        onClick?: () => void;
+        extraNode?: React.ReactNode;
+    }) => JSX.Element;
+    /**
+     * 渲染状态栏
+     */
+    renderStatusBar(): void;
     render(): React.ReactNode;
 }
 export default LcdpUeditor;

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,45 @@ 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;
+    _defineProperty(_assertThisInitialized(_this), "getStatusBarItem", function (params) {
+      var icon = params.icon,
+        content = params.content,
+        onClick = params.onClick,
+        extraNode = params.extraNode;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "ueditor-rich-status-bar-item",
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "ueditor-rich-status-bar-icon"
+      }, icon), /*#__PURE__*/React.createElement("span", {
+        className: "ueditor-rich-status-bar-content"
+      }, content), extraNode);
+    });
+    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 +124,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 +134,8 @@ 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
     });
     _this.debounceContentChange = debounce(_this.onContentChange.bind(_assertThisInitialized(_this)), 300);
     return _this;
@@ -124,7 +148,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);
@@ -142,7 +166,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
   }, {
     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 +360,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 +383,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
                   }
                   _this3.initStyle();
                   _this3.mountRef();
+                  _this3.renderStatusBar();
                 });
               };
               UeditorResourceLoader.onReady(readyFunc);
@@ -379,6 +406,28 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
       }
       return initUeditor;
     }())
+  }, {
+    key: "renderStatusBar",
+    value:
+    /**
+     * 渲染状态栏
+     */
+    function renderStatusBar() {
+      var _this$containerRef$cu, _this$props$bottomTyp;
+      var bottomBarContainer = (_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.querySelector('#edui1_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
+      });
+      if (bottomBarContainer && (_this$props$bottomTyp = this.props.bottomTypes) !== null && _this$props$bottomTyp !== void 0 && _this$props$bottomTyp.length) {
+        ReactDOM.render(comp, bottomBarContainer);
+      }
+    }
   }, {
     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;