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

package/es/ToolBottomBar/index.less

@@ -0,0 +1,70 @@
+.ueditor-rich-status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px;
+  background-color: #f0f0f0;
+  border-top: 1px solid #e0e0e0;
+  min-height: 32px;
+  .ueditor-rich-status-bar-box {
+    display: flex;
+    gap: 16px;
+    color: #666;
+    .ueditor-rich-status-bar-item:not(.ueditor-rich-status-bar-text) {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 4px;
+      padding: 4px 10px;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        color: #1a73e8;
+      }
+      &.isActive {
+        color: #52c41a;
+      }
+    }
+    .ueditor-rich-status-bar-text {
+      display: flex;
+      align-items: center;
+    }
+    .ueditor-rich-status-bar-icon {
+      margin-right: 4px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+    }
+    .ueditor-rich-status-bar-extra {
+      margin-left: 12px;
+      color: rgba(0, 0, 0, 0.25);
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.edui-default .edui-editor {
+  &.ueditor-rich-status-not-full {
+    background-color: #fafbfc;
+    .edui-editor-iframeholder {
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      margin: 20px auto;
+      background-color: #fff;
+    }
+  }
+}
+
+.edui-default .edui-editor-iframeholder {
+  &.ueditor-rich-status-content {
+    &-a3 {
+      width: 80% !important;
+    }
+    &-a4 {
+      width: 60% !important;
+    }
+    &-a5 {
+      width: 40% !important;
+    }
+  }
+}

package/es/icon/ExportPDF.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ExportFile: () => JSX.Element;
+export default ExportFile;

package/es/icon/ExportPDF.js

@@ -0,0 +1,24 @@
+import React from 'react';
+var ExportFile = function ExportFile() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-file-down"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 2v4a2 2 0 0 0 2 2h4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 18v-6"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m9 15 3 3 3-3"
+  }));
+};
+export default ExportFile;

package/es/icon/TextCopy.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TextIcon: () => JSX.Element;
+export default TextIcon;

package/es/icon/TextCopy.js

@@ -0,0 +1,25 @@
+import React from 'react';
+var TextIcon = function TextIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-copy"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "14",
+    height: "14",
+    x: "8",
+    y: "8",
+    rx: "2",
+    ry: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+  }));
+};
+export default TextIcon;

package/es/icon/TextFileIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TextIcon: () => JSX.Element;
+export default TextIcon;

package/es/icon/TextFileIcon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+var TextIcon = function TextIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-file-text"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 2v4a2 2 0 0 0 2 2h4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 9H8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 13H8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 17H8"
+  }));
+};
+export default TextIcon;

package/es/icon/TextIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TextIcon: () => JSX.Element;
+export default TextIcon;

package/es/icon/TextIcon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+var TextIcon = function TextIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-type"
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "4 7 4 4 20 4 20 7"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "9",
+    x2: "15",
+    y1: "20",
+    y2: "20"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    x2: "12",
+    y1: "4",
+    y2: "20"
+  }));
+};
+export default TextIcon;

package/es/tools/exportPDF.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 将HTML内容转换为PDF文档流
+ * @param htmlElement HTML元素
+ * @param options 配置选项
+ * @returns PDF文档的Blob对象
+ */
+export declare const html2pdf: (htmlElement: HTMLElement, options?: {
+    filename?: string;
+    margin?: number;
+    image?: {
+        type?: 'jpeg' | 'png';
+        quality?: number;
+    };
+    jsPDF?: {
+        orientation?: 'portrait' | 'landscape';
+        unit?: 'pt' | 'mm' | 'cm' | 'in';
+        format?: 'a4' | 'a3' | 'a5' | 'a0';
+    };
+}, onProgress?: ((progress: number, title: string) => void) | undefined) => Promise<Blob>;
+/**
+ * 将HTML元素转换为PDF文档流并下载
+ * @param dom HTML元素
+ * @param pageWidth 页面宽度
+ * @param fileName 文件名
+ * @returns 下载的PDF文件
+ */
+export declare const domloadPdf: (dom: HTMLElement, pageWidth: 'a4' | 'a3' | 'a5' | 'a0', fileName?: string, onProgress?: ((progress: number, title: string) => void) | undefined) => Promise<void>;

package/es/tools/exportPDF.js

@@ -0,0 +1,146 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+/**
+ * 将HTML内容转换为PDF文档流
+ * @param htmlElement HTML元素
+ * @param options 配置选项
+ * @returns PDF文档的Blob对象
+ */
+export var html2pdf = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(htmlElement) {
+    var _options$jsPDF, _options$jsPDF2, _options$jsPDF3, _options$image, _options$image2;
+    var options,
+      onProgress,
+      _yield$import,
+      JS_PDF,
+      pdf,
+      _yield$import2,
+      html2canvas,
+      canvas,
+      imageType,
+      imageQuality,
+      imgData,
+      margin,
+      pdfWidth,
+      pdfHeight,
+      imgWidth,
+      imgHeight,
+      heightLeft,
+      position,
+      pageHeight,
+      _args = arguments;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+          onProgress = _args.length > 2 ? _args[2] : undefined;
+          _context.next = 4;
+          return import( /* webpackChunkName: "jspdf" */'jspdf');
+        case 4:
+          _yield$import = _context.sent;
+          JS_PDF = _yield$import.jsPDF;
+          // 创建jsPDF实例
+          pdf = new JS_PDF({
+            orientation: ((_options$jsPDF = options.jsPDF) === null || _options$jsPDF === void 0 ? void 0 : _options$jsPDF.orientation) || 'portrait',
+            unit: ((_options$jsPDF2 = options.jsPDF) === null || _options$jsPDF2 === void 0 ? void 0 : _options$jsPDF2.unit) || 'pt',
+            format: ((_options$jsPDF3 = options.jsPDF) === null || _options$jsPDF3 === void 0 ? void 0 : _options$jsPDF3.format) || 'a4'
+          });
+          _context.next = 9;
+          return import /* webpackChunkName: "html2canvas" */('html2canvas');
+        case 9:
+          _yield$import2 = _context.sent;
+          html2canvas = _yield$import2.default;
+          onProgress === null || onProgress === void 0 || onProgress(20, '渲染页面内容...');
+          // 将HTML元素转换为Canvas
+          _context.next = 14;
+          return html2canvas(htmlElement, {
+            scale: 2,
+            // 提高清晰度
+            useCORS: true,
+            // 允许跨域图片
+            logging: false
+          });
+        case 14:
+          canvas = _context.sent;
+          // 获取Canvas数据URL
+          imageType = ((_options$image = options.image) === null || _options$image === void 0 ? void 0 : _options$image.type) || 'jpeg';
+          imageQuality = ((_options$image2 = options.image) === null || _options$image2 === void 0 ? void 0 : _options$image2.quality) || 1.0;
+          imgData = canvas.toDataURL("image/".concat(imageType), imageQuality); // 设置页面边距
+          margin = options.margin || 20;
+          pdfWidth = pdf.internal.pageSize.getWidth();
+          pdfHeight = pdf.internal.pageSize.getHeight();
+          imgWidth = pdfWidth - margin * 2;
+          imgHeight = canvas.height * imgWidth / canvas.width; // 添加图片到PDF
+          heightLeft = imgHeight;
+          position = margin;
+          pageHeight = pdfHeight - margin * 2; // 处理多页情况
+          pdf.addImage(imgData, imageType.toUpperCase(), margin, position, imgWidth, imgHeight);
+          heightLeft -= pageHeight;
+          while (heightLeft >= 0) {
+            position = heightLeft - imgHeight;
+            pdf.addPage();
+            pdf.addImage(imgData, imageType.toUpperCase(), margin, position, imgWidth, imgHeight);
+            heightLeft -= pageHeight;
+          }
+          onProgress === null || onProgress === void 0 || onProgress(50, '转换HTML内容...');
+          // 返回PDF文档流
+          return _context.abrupt("return", pdf.output('blob'));
+        case 31:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function html2pdf(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+/**
+ * 将HTML元素转换为PDF文档流并下载
+ * @param dom HTML元素
+ * @param pageWidth 页面宽度
+ * @param fileName 文件名
+ * @returns 下载的PDF文件
+ */
+export var domloadPdf = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(dom, pageWidth) {
+    var fileName,
+      onProgress,
+      _yield$import3,
+      saveAs,
+      blob,
+      _args2 = arguments;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          fileName = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : '未命名';
+          onProgress = _args2.length > 3 ? _args2[3] : undefined;
+          _context2.next = 4;
+          return import /* webpackChunkName: "saveAs" */('file-saver');
+        case 4:
+          _yield$import3 = _context2.sent;
+          saveAs = _yield$import3.saveAs;
+          onProgress === null || onProgress === void 0 || onProgress(5, '初始化...');
+          _context2.next = 9;
+          return html2pdf(dom, {
+            jsPDF: {
+              orientation: 'portrait',
+              unit: 'pt',
+              format: pageWidth
+            }
+          }, onProgress);
+        case 9:
+          blob = _context2.sent;
+          onProgress === null || onProgress === void 0 || onProgress(80, '生成PDF...');
+          return _context2.abrupt("return", saveAs(blob, "".concat(fileName, ".pdf")));
+        case 12:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function domloadPdf(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/es/tools/generateStylesFromSettings.d.ts

@@ -0,0 +1,38 @@
+interface HeadingStyle extends TextStyle {
+    marginTop: string;
+    marginBottom: string;
+}
+export interface TextStyle {
+    fontSize: string;
+    fontFamily: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+}
+interface ListStyle extends TextStyle {
+    paddingLeft: string;
+    marginTop: string;
+    marginBottom: string;
+}
+export interface FormatSettings {
+    headings: {
+        h1: HeadingStyle;
+        h2: HeadingStyle;
+        h3: HeadingStyle;
+        h4: HeadingStyle;
+        h5: HeadingStyle;
+        h6: HeadingStyle;
+    };
+    paragraph: TextStyle;
+    lists: {
+        ul: ListStyle;
+        ol: ListStyle;
+    };
+}
+/**
+ * 生成CSS样式内容
+ * @param settings 格式设置
+ * @returns CSS样式字符串
+ */
+export declare const generateStylesFromSettings: (settings: FormatSettings) => string;
+export {};

package/es/tools/generateStylesFromSettings.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * 生成CSS样式内容
+ * @param settings 格式设置
+ * @returns CSS样式字符串
+ */
+export var generateStylesFromSettings = function generateStylesFromSettings(settings) {
+  var css = '';
+
+  // 处理标题样式
+  Object.entries(settings.headings).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      heading = _ref2[0],
+      style = _ref2[1];
+    css += "\n".concat(heading, " {\n  font-family: ").concat(style.fontFamily, ";\n  font-size: ").concat(style.fontSize, ";\n  font-weight: ").concat(style.fontWeight, ";\n  line-height: ").concat(style.lineHeight, ";\n  color: ").concat(style.color, ";\n  margin-top: ").concat(style.marginTop, ";\n  margin-bottom: ").concat(style.marginBottom, ";\n}\n");
+  });
+
+  // 处理段落样式
+  css += "\np {\n  font-family: ".concat(settings.paragraph.fontFamily, ";\n  font-size: ").concat(settings.paragraph.fontSize, ";\n  font-weight: ").concat(settings.paragraph.fontWeight, ";\n  line-height: ").concat(settings.paragraph.lineHeight, ";\n  color: ").concat(settings.paragraph.color, ";\n}\n");
+
+  // 处理列表样式
+  css += "\nul {\n  font-family: ".concat(settings.lists.ul.fontFamily, ";\n  font-size: ").concat(settings.lists.ul.fontSize, ";\n  font-weight: ").concat(settings.lists.ul.fontWeight, ";\n  line-height: ").concat(settings.lists.ul.lineHeight, ";\n  color: ").concat(settings.lists.ul.color, ";\n  padding-left: ").concat(settings.lists.ul.paddingLeft, ";\n  margin-top: ").concat(settings.lists.ul.marginTop, ";\n  margin-bottom: ").concat(settings.lists.ul.marginBottom, ";\n}\n\nol {\n  font-family: ").concat(settings.lists.ol.fontFamily, ";\n  font-size: ").concat(settings.lists.ol.fontSize, ";\n  font-weight: ").concat(settings.lists.ol.fontWeight, ";\n  line-height: ").concat(settings.lists.ol.lineHeight, ";\n  color: ").concat(settings.lists.ol.color, ";\n  padding-left: ").concat(settings.lists.ol.paddingLeft, ";\n  margin-top: ").concat(settings.lists.ol.marginTop, ";\n  margin-bottom: ").concat(settings.lists.ol.marginBottom, ";\n}\n");
+  return css;
+};

package/es/type.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormatSettings } from './tools/generateStylesFromSettings';
 interface IUeditorStype extends React.CSSProperties {
     toolbarColor?: string;
 }
@@ -100,6 +101,22 @@ export interface ILcdpUeditorProps {
      * @param val 编辑器内容
      */
     onChange?(val: string): void;
+    /**
+     * 样式前缀
+     */
+    prefixCls?: string;
+    /**
+     * 格式设置变化
+     */
+    onFormatChange?(val: FormatSettings): void;
+    /**
+     * 默认格式设置
+     */
+    defaultFormatSetting?: FormatSettings;
+    /**
+     * 底部功能类型
+     */
+    bottomTypes?: Array<'chineseCount' | 'charCount' | 'pageWidth' | 'formatSetting' | 'exportPdf' | 'fullScreen' | 'copy'>;
 }
 export interface ILcdpUeditorInst {
     /**

package/lib/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/lib/LcdpUeditor.js

@@ -33,11 +33,13 @@ __export(LcdpUeditor_exports, {
 });
 module.exports = __toCommonJS(LcdpUeditor_exports);
 var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
 var import_const = require("./const");
 var import_defaultConfig = __toESM(require("./defaultConfig.json"));
 var import_UeditorResourceLoader = __toESM(require("./tools/UeditorResourceLoader"));
 var import_debounce = __toESM(require("lodash/debounce"));
 var import_filterHtmlNode = require("./tools/filterHtmlNode");
+var import_ToolBottomBar = __toESM(require("./ToolBottomBar"));
 var LcdpUeditor = class extends import_react.default.Component {
   constructor(props) {
     super(props);
@@ -66,20 +68,28 @@ var LcdpUeditor = class extends import_react.default.Component {
      */
     this.currentContent = "";
     /**
-     * 是否加载完成
+     * 是否全屏
      */
-    this.isReady = false;
+    this.prefixCls = "pcfactory";
     /**
      * 初始加载失败
      */
     this.state = {
-      initError: false
+      initError: false,
+      /**
+      * 是否加载完成
+      */
+      isReady: false
     };
     /**
      * 编辑器配置项
      */
     this.editorConfig = {};
-    const { config } = props;
+    this.getStatusBarItem = (params) => {
+      const { icon, content, onClick, extraNode } = params;
+      return /* @__PURE__ */ import_react.default.createElement("span", { className: "ueditor-rich-status-bar-item", onClick }, /* @__PURE__ */ import_react.default.createElement("span", { className: "ueditor-rich-status-bar-icon" }, icon), /* @__PURE__ */ import_react.default.createElement("span", { className: "ueditor-rich-status-bar-content" }, content), extraNode);
+    };
+    const { config, prefixCls, onFormatChange } = props;
     this.containerId = `ueditor_${Date.now()}_${String(Math.random()).slice(2, 6)}`;
     if (this.props.ueditorPath) {
       this.ueditorPath = this.props.ueditorPath;
@@ -103,6 +113,7 @@ var LcdpUeditor = class extends import_react.default.Component {
       }
       return null;
     };
+    this.prefixCls = prefixCls || "pcfactory";
     this.editorConfig = {
       ...import_defaultConfig.default,
       maximumWords: (config == null ? void 0 : config.maximumWords) || 1e4,
@@ -113,7 +124,8 @@ var LcdpUeditor = class extends import_react.default.Component {
       },
       uploadFunction: this.uploadFunction,
       initialContent: "",
-      pasteplain: (config == null ? void 0 : config.pasteplain) === true
+      pasteplain: (config == null ? void 0 : config.pasteplain) === true,
+      onFormatChange
     };
     this.debounceContentChange = (0, import_debounce.default)(this.onContentChange.bind(this), 300);
   }
@@ -121,7 +133,7 @@ var LcdpUeditor = class extends import_react.default.Component {
     this.initUeditor();
   }
   componentWillReceiveProps(nextProps) {
-    if (this.isReady) {
+    if (this.state.isReady) {
       if ("value" in nextProps && this.currentContent !== nextProps.value) {
         this.isReportFlag = false;
         this.ueditorInst.setContent((0, import_filterHtmlNode.filterHtmlNode)(nextProps.value || "").str);
@@ -137,7 +149,7 @@ var LcdpUeditor = class extends import_react.default.Component {
   }
   componentWillUnmount() {
     var _a, _b, _c;
-    if (this.isReady) {
+    if (this.state.isReady) {
       const editorBody = (_a = this.ueditorInst) == null ? void 0 : _a.body;
       if (editorBody && this.compositionEndHandler) {
         editorBody.removeEventListener("compositionend", this.compositionEndHandler);
@@ -259,7 +271,9 @@ var LcdpUeditor = class extends import_react.default.Component {
         if (nextValue) {
           this.ueditorInst.setContent(nextValue);
         }
-        this.isReady = true;
+        this.setState({
+          isReady: true
+        });
         if (this.props.disabled) {
           this.ueditorInst.setDisabled();
         } else {
@@ -277,6 +291,7 @@ var LcdpUeditor = class extends import_react.default.Component {
         }
         this.initStyle();
         this.mountRef();
+        this.renderStatusBar();
       });
     };
     import_UeditorResourceLoader.default.onReady(readyFunc);
@@ -288,6 +303,28 @@ var LcdpUeditor = class extends import_react.default.Component {
     });
     import_UeditorResourceLoader.default.startLoad(jsList);
   }
+  /**
+   * 渲染状态栏
+   */
+  renderStatusBar() {
+    var _a, _b;
+    const bottomBarContainer = (_a = this.containerRef.current) == null ? void 0 : _a.querySelector("#edui1_bottombar");
+    const comp = /* @__PURE__ */ import_react.default.createElement(
+      import_ToolBottomBar.default,
+      {
+        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 && ((_b = this.props.bottomTypes) == null ? void 0 : _b.length)) {
+      import_react_dom.default.render(comp, bottomBarContainer);
+    }
+  }
   render() {
     const { initError } = this.state;
     if (initError) {

package/lib/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;