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

package/es/tools/generateStylesFromSettings.js

@@ -1,24 +1,204 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+export var STYLE_ID = 'ueditor-custom-styles';
+
+// 自定义格式设置标签，用于回填格式设置
+export var FORMAT_STYLE_TAG = 'format-style';
+
 /**
  * 生成CSS样式内容
+ * 将css设置到元素上
  * @param settings 格式设置
- * @returns CSS样式字符串
  */
-export var generateStylesFromSettings = function generateStylesFromSettings(settings) {
-  var css = '';
+export var generateStylesFromSettings = function generateStylesFromSettings(settings, body) {
+  var cssMap = {
+    h1: undefined,
+    h2: undefined,
+    h3: undefined,
+    h4: undefined,
+    h5: undefined,
+    h6: undefined,
+    p: undefined,
+    ul: undefined,
+    ol: undefined
+  };
+  var cssStyles = '';
 
   // 处理标题样式
   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");
+    cssMap[heading] = {
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      lineHeight: style.lineHeight,
+      color: style.color
+    };
   });
 
   // 处理段落样式
-  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");
+  cssMap.p = {
+    fontFamily: settings.paragraph.fontFamily,
+    fontSize: settings.paragraph.fontSize,
+    fontWeight: settings.paragraph.fontWeight,
+    lineHeight: settings.paragraph.lineHeight,
+    color: settings.paragraph.color
+  };
 
   // 处理列表样式
-  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;
+  cssMap.ul = {
+    fontFamily: settings.lists.ul.fontFamily,
+    fontSize: settings.lists.ul.fontSize,
+    fontWeight: settings.lists.ul.fontWeight,
+    lineHeight: settings.lists.ul.lineHeight,
+    color: settings.lists.ul.color,
+    paddingLeft: settings.lists.ul.paddingLeft,
+    marginTop: settings.lists.ul.marginTop,
+    marginBottom: settings.lists.ul.marginBottom
+  };
+  cssMap.ol = {
+    fontFamily: settings.lists.ol.fontFamily,
+    fontSize: settings.lists.ol.fontSize,
+    fontWeight: settings.lists.ol.fontWeight,
+    lineHeight: settings.lists.ol.lineHeight,
+    color: settings.lists.ol.color,
+    paddingLeft: settings.lists.ol.paddingLeft,
+    marginTop: settings.lists.ol.marginTop,
+    marginBottom: settings.lists.ol.marginBottom
+  };
+  Object.entries(cssMap).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    if (value) {
+      cssStyles += "".concat(key, " {").concat(value.fontFamily ? "font-family: ".concat(value.fontFamily, ";\n") : '').concat(value.fontSize ? "font-size: ".concat(value.fontSize, ";\n") : '').concat(value.fontWeight ? "font-weight: ".concat(value.fontWeight, ";\n") : '').concat(value.lineHeight ? "line-height: ".concat(value.lineHeight, ";\n") : '').concat(value.color ? "color: ".concat(value.color, ";\n") : '').concat(value.marginTop ? "margin-top: ".concat(value.marginTop, ";\n") : '').concat(value.marginBottom ? "margin-bottom: ".concat(value.marginBottom, ";\n") : '').concat(value.paddingLeft ? "padding-left: ".concat(value.paddingLeft, ";\n") : '', "\n      }");
+      body.querySelectorAll(key).forEach(function (item) {
+        // 遍历样式属性,仅在元素没有该样式时设置
+        Object.entries(value).forEach(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            styleName = _ref6[0],
+            styleValue = _ref6[1];
+          if (styleValue) {
+            item.style[styleName] = styleValue;
+          }
+        });
+      });
+    }
+  });
+  return cssStyles;
+};
+
+/**
+ * 从现有样式标签中提取格式设置
+ * @param body HTML body元素
+ * @returns 格式设置对象，如果未找到样式标签则返回undefined
+ */
+export var extractSettingsFromStyles = function extractSettingsFromStyles(body) {
+  var styleElement = body.querySelector("#".concat(STYLE_ID));
+  if (!styleElement || !styleElement.textContent) {
+    return undefined;
+  }
+  var cssText = styleElement.textContent;
+
+  // 解析CSS规则
+  var parseCSSRule = function parseCSSRule(selector) {
+    var regex = new RegExp("".concat(selector, "\\s*{([^}]+)}"), 'g');
+    var match = regex.exec(cssText);
+    if (!match) return {};
+    var styleText = match[1];
+    var styles = {};
+
+    // 解析样式属性
+    var styleRegex = /([a-zA-Z-]+)\s*:\s*([^;]+);/g;
+    var styleMatch = styleRegex.exec(styleText);
+    while (styleMatch !== null) {
+      var _styleMatch = styleMatch,
+        _styleMatch2 = _slicedToArray(_styleMatch, 3),
+        property = _styleMatch2[1],
+        value = _styleMatch2[2];
+      styles[property.trim()] = value.trim();
+      styleMatch = styleRegex.exec(styleText);
+    }
+    return styles;
+  };
+
+  // 提取文本样式
+  var extractTextStyle = function extractTextStyle(selector) {
+    var styles = parseCSSRule(selector);
+    return {
+      fontSize: styles['font-size'] || '16px',
+      fontFamily: styles['font-family'] || 'Arial, sans-serif',
+      fontWeight: styles['font-weight'] || 'normal',
+      lineHeight: styles['line-height'] || '1.5',
+      color: styles.color || '#000000'
+    };
+  };
+
+  // 提取标题样式
+  var extractHeadingStyle = function extractHeadingStyle(selector) {
+    var textStyle = extractTextStyle(selector);
+    var styles = parseCSSRule(selector);
+    return _objectSpread(_objectSpread({}, textStyle), {}, {
+      marginTop: styles['margin-top'] || '0',
+      marginBottom: styles['margin-bottom'] || '0'
+    });
+  };
+
+  // 提取列表样式
+  var extractListStyle = function extractListStyle(selector) {
+    var textStyle = extractTextStyle(selector);
+    var styles = parseCSSRule(selector);
+    return _objectSpread(_objectSpread({}, textStyle), {}, {
+      paddingLeft: styles['padding-left'] || '0',
+      marginTop: styles['margin-top'] || '0',
+      marginBottom: styles['margin-bottom'] || '0'
+    });
+  };
+
+  // 构建FormatSettings对象
+  var formatSettings = {
+    headings: {
+      h1: extractHeadingStyle('h1'),
+      h2: extractHeadingStyle('h2'),
+      h3: extractHeadingStyle('h3'),
+      h4: extractHeadingStyle('h4'),
+      h5: extractHeadingStyle('h5'),
+      h6: extractHeadingStyle('h6')
+    },
+    paragraph: extractTextStyle('p'),
+    lists: {
+      ul: extractListStyle('ul'),
+      ol: extractListStyle('ol')
+    }
+  };
+  return formatSettings;
+};
+
+/**
+ * 设置格式设置
+ * @param body
+ * @param settings
+ */
+export var setFormatSettings = function setFormatSettings(body, cssStyles) {
+  var styleEl = body.querySelector("#".concat(STYLE_ID));
+  if (!styleEl || !cssStyles) {
+    return;
+  }
+  if (cssStyles) {
+    // 触发编辑器视图更新
+    if (body) {
+      // 查找或创建样式元素
+      var _styleEl = body === null || body === void 0 ? void 0 : body.querySelector("#".concat(STYLE_ID));
+      if (!_styleEl) {
+        _styleEl = document.createElement(FORMAT_STYLE_TAG);
+        _styleEl.style.display = 'none';
+        _styleEl.id = STYLE_ID;
+        body.insertBefore(_styleEl, body.firstChild);
+      }
+      // 设置样式内容
+      _styleEl.textContent = cssStyles;
+    }
+  }
 };

package/es/type.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FormatSettings } from './tools/generateStylesFromSettings';
 interface IUeditorStype extends React.CSSProperties {
     toolbarColor?: string;
 }
@@ -110,13 +109,13 @@ export interface ILcdpUeditorProps {
      */
     prefixCls?: string;
     /**
-     * 格式设置变化
+     * 设置变化
      */
-    onFormatChange?(val: FormatSettings): void;
+    onSettingChange?(val: Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>): void;
     /**
-     * 默认格式设置
+     * 默认设置
      */
-    defaultFormatSetting?: FormatSettings;
+    defaultSetting?: Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>;
     /**
      * 底部功能类型
      */

package/lib/LcdpUeditor.d.ts

@@ -82,6 +82,7 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      * 初始化编辑器实例
      */
     initUeditor(): Promise<void>;
+    onSettingChange: (setting: any) => void;
     /**
      * 渲染状态栏
      */

package/lib/LcdpUeditor.js

@@ -40,6 +40,7 @@ var import_UeditorResourceLoader = __toESM(require("./tools/UeditorResourceLoade
 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);
@@ -85,7 +86,11 @@ var LcdpUeditor = class extends import_react.default.Component {
      * 编辑器配置项
      */
     this.editorConfig = {};
-    const { config, prefixCls, onFormatChange } = props;
+    this.onSettingChange = (setting) => {
+      this.editorConfig.onSettingChange(setting);
+      this.onContentChange();
+    };
+    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;
@@ -121,7 +126,7 @@ var LcdpUeditor = class extends import_react.default.Component {
       uploadFunction: this.uploadFunction,
       initialContent: "",
       pasteplain: (config == null ? void 0 : config.pasteplain) === true,
-      onFormatChange,
+      onSettingChange,
       exportFileName: (config == null ? void 0 : config.exportFileName) || "未命名"
     };
     this.debounceContentChange = (0, import_debounce.default)(this.onContentChange.bind(this), 300);
@@ -146,7 +151,7 @@ var LcdpUeditor = class extends import_react.default.Component {
   }
   componentDidUpdate(prevProps) {
     var _a, _b, _c;
-    if (this.state.isReady && (prevProps.defaultFormatSetting !== this.props.defaultFormatSetting || 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))) {
+    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();
     }
   }
@@ -319,8 +324,8 @@ var LcdpUeditor = class extends import_react.default.Component {
         ueditorInst: this.ueditorInst,
         prefixCls: this.prefixCls,
         containerRef: this.containerRef,
-        defaultFormatSetting: this.props.defaultFormatSetting,
-        onFormatChange: this.editorConfig.onFormatChange,
+        defaultSetting: this.props.defaultSetting,
+        onSettingChange: this.onSettingChange,
         isReady: this.state.isReady,
         bottomTypes: this.props.bottomTypes,
         exportFileName: (_c = (_b = this.props) == null ? void 0 : _b.config) == null ? void 0 : _c.exportFileName
@@ -328,9 +333,9 @@ var LcdpUeditor = class extends import_react.default.Component {
     );
     if (bottomBarContainer) {
       let statusContainer = bottomBarContainer.querySelector(`#${id}_bottomStatusBar`);
-      bottomBarContainer.classList.remove("ueditor-bottom-bar-with-status");
+      bottomBarContainer.classList.remove(BOTTOM_STATUS_BAR_CLASS);
       if ((_d = this.props.bottomTypes) == null ? void 0 : _d.length) {
-        bottomBarContainer.classList.add("ueditor-bottom-bar-with-status");
+        bottomBarContainer.classList.add(BOTTOM_STATUS_BAR_CLASS);
         if (!statusContainer) {
           statusContainer = document.createElement("div");
           statusContainer.id = `${id}_bottomStatusBar`;

package/lib/ToolBottomBar/FormatModal/index.js

@@ -52,6 +52,31 @@ var defaultSettings = {
     ol: { fontSize: "16px", fontFamily: "系统字体", fontWeight: "normal", lineHeight: "1.7", color: "#2c3e50", paddingLeft: "1rem", marginTop: "1rem", marginBottom: "1rem" }
   }
 };
+var fontFamilyTranslations = {
+  default: "默认",
+  songti: "宋体",
+  kaiti: "楷体",
+  heiti: "黑体",
+  lishu: "隶书",
+  yahei: "微软雅黑",
+  fangsong: "仿宋",
+  dengxian: "等线",
+  segoeUI: "Segoe UI",
+  calibri: "Calibri",
+  arial: "arial",
+  timesNewRoman: "times new roman",
+  pingfangSC: "苹方(简)",
+  pingfangTC: "苹方(繁)",
+  hiraginoSansGB: "冬青黑体",
+  stFangsong: "华文仿宋",
+  sanFrancisco: "旧金山字体",
+  helveticaNeue: "Helvetica Neue",
+  sourceHanSans: "Source Han Sans",
+  wenQuanYiMicroHei: "文泉驿微米黑",
+  wenQuanYiZenHei: "文泉驿正黑",
+  dejaVuSans: "DejaVu Sans",
+  liberationSans: "Liberation Sans"
+};
 var getOSType = () => {
   const userAgent = navigator.userAgent.toLowerCase();
   if (userAgent.includes("win"))
@@ -92,57 +117,43 @@ var generateFontOptions = () => {
   const osType = getOSType();
   const baseFonts = [
     { value: "系统字体", label: "系统字体(推荐)" },
-    { value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif", label: "完整系统字体栈" }
+    { value: 'STHeiti, 黑体, SimHei, "Noto Sans CJK SC"', label: fontFamilyTranslations.heiti },
+    { value: 'STSong, 宋体, SimSun, "Noto Serif CJK SC"', label: fontFamilyTranslations.songti }
+    // { value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif", label: '完整系统字体栈' },
   ];
   const platformFonts = {
     windows: [
-      { value: "微软雅黑", label: "微软雅黑" },
-      { value: "仿宋", label: "仿宋" },
-      { value: "黑体", label: "黑体" },
-      { value: "楷体", label: "楷体" },
-      { value: "宋体", label: "宋体" },
-      { value: "等线", label: "等线" },
-      { value: "Segoe UI", label: "Segoe UI" },
-      { value: "Calibri", label: "Calibri" }
+      { value: "微软雅黑,Microsoft YaHei", label: fontFamilyTranslations.yahei },
+      { value: "仿宋", label: fontFamilyTranslations.fangsong },
+      { value: "STKaiti, 楷体, 楷体_GB2312, SimKai", label: fontFamilyTranslations.kaiti },
+      { value: "隶书,SimLi", label: fontFamilyTranslations.lishu },
+      { value: "等线", label: fontFamilyTranslations.dengxian },
+      { value: "Segoe UI", label: fontFamilyTranslations.segoeUI },
+      { value: "Calibri", label: fontFamilyTranslations.calibri },
+      { value: "arial,helvetica,sans-serif", label: fontFamilyTranslations.arial },
+      { value: "times new roman", label: fontFamilyTranslations.timesNewRoman }
     ],
     mac: [
-      { value: "PingFang SC", label: "苹方(简)" },
-      { value: "PingFang TC", label: "苹方(繁)" },
-      { value: "Hiragino Sans GB", label: "冬青黑体" },
-      { value: "STHeiti", label: "华文黑体" },
-      { value: "STKaiti", label: "华文楷体" },
-      { value: "STSong", label: "华文宋体" },
-      { value: "STFangsong", label: "华文仿宋" },
-      { value: "San Francisco", label: "旧金山字体" },
-      { value: "Helvetica Neue", label: "Helvetica Neue" }
+      { value: "STKaiti, 楷体, 楷体_GB2312, SimKai", label: fontFamilyTranslations.kaiti },
+      { value: "PingFang SC", label: fontFamilyTranslations.pingfangSC },
+      { value: "PingFang TC", label: fontFamilyTranslations.pingfangTC },
+      { value: "Hiragino Sans GB", label: fontFamilyTranslations.hiraginoSansGB },
+      { value: "STFangsong", label: fontFamilyTranslations.stFangsong },
+      { value: "San Francisco", label: fontFamilyTranslations.sanFrancisco },
+      { value: "Helvetica Neue", label: fontFamilyTranslations.helveticaNeue }
     ],
     linux: [
-      { value: "Noto Sans CJK SC", label: "思源黑体" },
-      { value: "Noto Serif CJK SC", label: "思源宋体" },
-      { value: "Source Han Sans", label: "Source Han Sans" },
-      { value: "WenQuanYi Micro Hei", label: "文泉驿微米黑" },
-      { value: "WenQuanYi Zen Hei", label: "文泉驿正黑" },
-      { value: "DejaVu Sans", label: "DejaVu Sans" },
-      { value: "Liberation Sans", label: "Liberation Sans" }
+      { value: "Source Han Sans", label: fontFamilyTranslations.sourceHanSans },
+      { value: "WenQuanYi Micro Hei", label: fontFamilyTranslations.wenQuanYiMicroHei },
+      { value: "WenQuanYi Zen Hei", label: fontFamilyTranslations.wenQuanYiZenHei },
+      { value: "DejaVu Sans", label: fontFamilyTranslations.dejaVuSans },
+      { value: "Liberation Sans", label: fontFamilyTranslations.liberationSans }
     ]
   };
-  const webSafeFonts = [
-    { value: "Arial", label: "Arial" },
-    { value: "Helvetica", label: "Helvetica" },
-    { value: "Times New Roman", label: "Times New Roman" },
-    { value: "Times", label: "Times" },
-    { value: "Courier New", label: "Courier New" },
-    { value: "Georgia", label: "Georgia" },
-    { value: "Verdana", label: "Verdana" },
-    { value: "sans-serif", label: "系统无衬线字体" },
-    { value: "serif", label: "系统衬线字体" },
-    { value: "monospace", label: "系统等宽字体" }
-  ];
   const allFonts = [...baseFonts];
   if (platformFonts[osType]) {
     allFonts.push(...platformFonts[osType]);
   }
-  allFonts.push(...webSafeFonts);
   const availableFonts = allFonts.map((font) => ({
     ...font,
     available: isFontAvailable(font.value)

package/lib/ToolBottomBar/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FormatSettings } from '../tools/generateStylesFromSettings';
 import './index.less';
 import { ILcdpUeditorProps } from '../type';
 declare const ToolBottomBar: (props: {
@@ -15,8 +14,8 @@ declare const ToolBottomBar: (props: {
      * 容器引用
      */
     containerRef?: React.RefObject<HTMLDivElement> | undefined;
-    defaultFormatSetting?: FormatSettings | undefined;
-    onFormatChange?: ((val: FormatSettings) => void) | undefined;
+    defaultSetting?: Record<"chineseCount" | "charCount" | "pageWidth" | "formatSetting" | "exportPdf" | "fullScreen" | "copy", any> | undefined;
+    onSettingChange?: ((setting: Partial<Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>>) => void) | undefined;
     /**
      * 是否准备就绪
      */

package/lib/ToolBottomBar/index.js

@@ -51,9 +51,8 @@ var MENU_OPTIONS = {
   a5: "A5",
   a0: "铺满"
 };
-var STYLE_ID = "ueditor-custom-styles";
 var ToolBottomBar = (props) => {
-  const { ueditorInst, prefixCls, containerRef, defaultFormatSetting, onFormatChange, isReady, bottomTypes, exportFileName } = props;
+  const { ueditorInst, prefixCls, containerRef, defaultSetting, onSettingChange, isReady, bottomTypes, exportFileName } = props;
   const { id: uiId } = ueditorInst.ui || {};
   const [chineseTextCount, setChineseTextCount] = (0, import_react.useState)(0);
   const [totalTextCount, setTotalTextCount] = (0, import_react.useState)(0);
@@ -62,6 +61,7 @@ var ToolBottomBar = (props) => {
   const [pageWidth, setPageWidth] = (0, import_react.useState)(void 0);
   const timer = (0, import_react.useRef)(void 0);
   const progressModalRef = (0, import_react.useRef)(null);
+  const [formatSetting, setFormatSetting] = (0, import_react.useState)(void 0);
   const debounceContentChange = (0, import_debounce.default)(() => {
     var _a;
     try {
@@ -124,27 +124,54 @@ var ToolBottomBar = (props) => {
     }
   };
   const handleApply = (settings, isUpdate = true) => {
-    var _a, _b, _c;
-    const cssStyles = (0, import_generateStylesFromSettings.generateStylesFromSettings)(settings);
-    const frame = ueditorInst.frame || ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.querySelector(`#${uiId}_iframeholder > iframe`));
-    if ((_b = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _b.documentElement) {
-      let styleEl = (_c = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _c.getElementById(STYLE_ID);
-      if (!styleEl) {
-        styleEl = document.createElement("style");
-        styleEl.id = STYLE_ID;
-        frame.contentDocument.head.appendChild(styleEl);
+    if (!settings) {
+      return;
+    }
+    setFormatSetting(settings);
+    if (isUpdate) {
+      if (ueditorInst.body) {
+        (0, import_generateStylesFromSettings.generateStylesFromSettings)(settings, ueditorInst.body);
+      }
+      onSettingChange == null ? void 0 : onSettingChange({
+        formatSetting: settings,
+        pageWidth
+      });
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    handleApply(defaultSetting == null ? void 0 : defaultSetting.formatSetting, false);
+  }, [defaultSetting == null ? void 0 : defaultSetting.formatSetting]);
+  const handlePageWidthChange = (key, isUpdate = true) => {
+    const newClass = `ueditor-rich-status-content-${key}`;
+    const oldClass = `ueditor-rich-status-content-${pageWidth}`;
+    if (containerRef == null ? void 0 : containerRef.current) {
+      const frame = containerRef.current.querySelector(`#${uiId}_iframeholder`);
+      const frameContainer = ueditorInst.container || containerRef.current.querySelector(`#${uiId}`);
+      if (frame) {
+        frame.classList.remove(oldClass);
+        frame.classList.add(newClass);
+      }
+      if (frameContainer) {
+        if (key === "a0") {
+          frameContainer.classList.remove("ueditor-rich-status-not-full");
+        } else {
+          frameContainer.classList.add("ueditor-rich-status-not-full");
+        }
       }
-      styleEl.textContent = cssStyles;
     }
+    setPageWidth(key);
     if (isUpdate) {
-      onFormatChange == null ? void 0 : onFormatChange(settings);
+      onSettingChange == null ? void 0 : onSettingChange({
+        pageWidth: key,
+        formatSetting
+      });
     }
   };
   (0, import_react.useEffect)(() => {
-    if (defaultFormatSetting) {
-      handleApply(defaultFormatSetting, false);
+    if (defaultSetting == null ? void 0 : defaultSetting.pageWidth) {
+      handlePageWidthChange(defaultSetting.pageWidth, false);
     }
-  }, [defaultFormatSetting]);
+  }, [defaultSetting == null ? void 0 : defaultSetting.pageWidth]);
   const onProgress = (progress, title) => {
     var _a;
     (_a = progressModalRef.current) == null ? void 0 : _a.updateProgress(progress, title);
@@ -165,24 +192,7 @@ var ToolBottomBar = (props) => {
         import_antd.Menu,
         {
           onClick: ({ key }) => {
-            const newClass = `ueditor-rich-status-content-${key}`;
-            const oldClass = `ueditor-rich-status-content-${pageWidth}`;
-            if (containerRef == null ? void 0 : containerRef.current) {
-              const frame = containerRef.current.querySelector(`#${uiId}_iframeholder`);
-              const frameContainer = ueditorInst.container || containerRef.current.querySelector(`#${uiId}`);
-              if (frame) {
-                frame.classList.remove(oldClass);
-                frame.classList.add(newClass);
-              }
-              if (frameContainer) {
-                if (key === "a0") {
-                  frameContainer.classList.remove("ueditor-rich-status-not-full");
-                } else {
-                  frameContainer.classList.add("ueditor-rich-status-not-full");
-                }
-              }
-            }
-            setPageWidth(key);
+            handlePageWidthChange(key);
           }
         },
         Object.keys(MENU_OPTIONS).map((k) => /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: k }, /* @__PURE__ */ import_react.default.createElement("span", null, "页面宽度 ", MENU_OPTIONS[k])))
@@ -196,7 +206,7 @@ var ToolBottomBar = (props) => {
     import_FormatModal.default,
     {
       onApply: handleApply,
-      initialSettings: defaultFormatSetting
+      initialSettings: defaultSetting == null ? void 0 : defaultSetting.formatSetting
     },
     getStatusBarItem({
       icon: /* @__PURE__ */ import_react.default.createElement(import_icons.SettingOutlined, null),

package/lib/tools/generateStylesFromSettings.d.ts

@@ -29,10 +29,24 @@ export interface FormatSettings {
         ol: ListStyle;
     };
 }
+export declare const STYLE_ID = "ueditor-custom-styles";
+export declare const FORMAT_STYLE_TAG = "format-style";
 /**
  * 生成CSS样式内容
+ * 将css设置到元素上
  * @param settings 格式设置
- * @returns CSS样式字符串
  */
-export declare const generateStylesFromSettings: (settings: FormatSettings) => string;
+export declare const generateStylesFromSettings: (settings: FormatSettings, body: HTMLElement) => string;
+/**
+ * 从现有样式标签中提取格式设置
+ * @param body HTML body元素
+ * @returns 格式设置对象，如果未找到样式标签则返回undefined
+ */
+export declare const extractSettingsFromStyles: (body: HTMLElement) => FormatSettings | undefined;
+/**
+ * 设置格式设置
+ * @param body
+ * @param settings
+ */
+export declare const setFormatSettings: (body: HTMLElement, cssStyles: string) => void;
 export {};