@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.9 → 1.0.4-alpha.2

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/filterHtmlNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterHtmlNode.d.ts","sourceRoot":"","sources":["filterHtmlNode.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,QAAS,MAAM;;;;CA2CzC,CAAC"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateStylesFromSettings.d.ts","sourceRoot":"","sources":["generateStylesFromSettings.ts"],"names":[],"mappings":"AAAA,UAAU,YAAa,SAAQ,SAAS;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,SAAU,SAAQ,SAAS;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AACD,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE;QACR,EAAE,EAAE,YAAY,CAAC;QACjB,EAAE,EAAE,YAAY,CAAC;QACjB,EAAE,EAAE,YAAY,CAAC;QACjB,EAAE,EAAE,YAAY,CAAC;QACjB,EAAE,EAAE,YAAY,CAAC;QACjB,EAAE,EAAE,YAAY,CAAC;KAClB,CAAC;IACF,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE;QACL,EAAE,EAAE,SAAS,CAAC;QACd,EAAE,EAAE,SAAS,CAAC;KACf,CAAC;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,aAAc,cAAc,KAAG,MAuDrE,CAAC"}

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/tools/loadScript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadScript.d.ts","sourceRoot":"","sources":["loadScript.ts"],"names":[],"mappings":"AACA;;;GAGG;AACH,eAAO,MAAM,cAAc,SAAgB,MAAM,EAAE,kBAUlD,CAAC"}

package/es/type.d.ts

@@ -68,6 +68,10 @@ export interface ILcdpUeditorProps {
          */
         videoAllowFiles?: string[];
         maximumWords?: number;
+        /**
+         * 导出文件名
+         */
+        exportFileName?: string;
     };
     toolbars?: string[][];
     /**
@@ -100,6 +104,22 @@ export interface ILcdpUeditorProps {
      * @param val 编辑器内容
      */
     onChange?(val: string): void;
+    /**
+     * 样式前缀
+     */
+    prefixCls?: string;
+    /**
+     * 设置变化
+     */
+    onSettingChange?(val: Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>): void;
+    /**
+     * 默认设置
+     */
+    defaultSetting?: Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>;
+    /**
+     * 底部功能类型
+     */
+    bottomTypes?: Array<'chineseCount' | 'charCount' | 'pageWidth' | 'formatSetting' | 'exportPdf' | 'fullScreen' | 'copy'>;
 }
 export interface ILcdpUeditorInst {
     /**

package/es/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["type.ts"],"names":[],"mappings":"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"}

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;
     }>;
     /**
      * 编辑器配置项
@@ -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/lib/LcdpUeditor.js

@@ -33,11 +33,14 @@ __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 BOTTOM_STATUS_BAR_CLASS = "ueditor-bottom-bar-with-status";
 var LcdpUeditor = class extends import_react.default.Component {
   constructor(props) {
     super(props);
@@ -66,20 +69,24 @@ 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;
+    const { config, prefixCls, onSettingChange } = props;
     this.containerId = `ueditor_${Date.now()}_${String(Math.random()).slice(2, 6)}`;
     if (this.props.ueditorPath) {
       this.ueditorPath = this.props.ueditorPath;
@@ -103,6 +110,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 +121,9 @@ 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,
+      onSettingChange,
+      exportFileName: (config == null ? void 0 : config.exportFileName) || "未命名"
     };
     this.debounceContentChange = (0, import_debounce.default)(this.onContentChange.bind(this), 300);
   }
@@ -121,7 +131,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);
@@ -135,9 +145,15 @@ var LcdpUeditor = class extends import_react.default.Component {
       }
     }
   }
+  componentDidUpdate(prevProps) {
+    var _a, _b, _c;
+    if (this.state.isReady && (prevProps.defaultSetting !== this.props.defaultSetting || prevProps.bottomTypes !== this.props.bottomTypes || ((_a = prevProps == null ? void 0 : prevProps.config) == null ? void 0 : _a.exportFileName) !== ((_c = (_b = this.props) == null ? void 0 : _b.config) == null ? void 0 : _c.exportFileName))) {
+      this.renderStatusBar();
+    }
+  }
   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 +275,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 +295,7 @@ var LcdpUeditor = class extends import_react.default.Component {
         }
         this.initStyle();
         this.mountRef();
+        this.renderStatusBar();
       });
     };
     import_UeditorResourceLoader.default.onReady(readyFunc);
@@ -288,6 +307,42 @@ var LcdpUeditor = class extends import_react.default.Component {
     });
     import_UeditorResourceLoader.default.startLoad(jsList);
   }
+  /**
+   * 渲染状态栏
+   */
+  renderStatusBar() {
+    var _a, _b, _c, _d;
+    const { id } = this.ueditorInst.ui || {};
+    const bottomBarContainer = (_a = this.containerRef.current) == null ? void 0 : _a.querySelector(`#${id}_bottombar`);
+    const comp = /* @__PURE__ */ import_react.default.createElement(
+      import_ToolBottomBar.default,
+      {
+        ueditorInst: this.ueditorInst,
+        prefixCls: this.prefixCls,
+        containerRef: this.containerRef,
+        defaultSetting: this.props.defaultSetting,
+        onSettingChange: this.editorConfig.onSettingChange,
+        isReady: this.state.isReady,
+        bottomTypes: this.props.bottomTypes,
+        exportFileName: (_c = (_b = this.props) == null ? void 0 : _b.config) == null ? void 0 : _c.exportFileName
+      }
+    );
+    if (bottomBarContainer) {
+      let statusContainer = bottomBarContainer.querySelector(`#${id}_bottomStatusBar`);
+      bottomBarContainer.classList.remove(BOTTOM_STATUS_BAR_CLASS);
+      if ((_d = this.props.bottomTypes) == null ? void 0 : _d.length) {
+        bottomBarContainer.classList.add(BOTTOM_STATUS_BAR_CLASS);
+        if (!statusContainer) {
+          statusContainer = document.createElement("div");
+          statusContainer.id = `${id}_bottomStatusBar`;
+          bottomBarContainer.appendChild(statusContainer);
+        }
+        import_react_dom.default.render(comp, statusContainer);
+      } else if (statusContainer) {
+        statusContainer.remove();
+      }
+    }
+  }
   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;