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

package/es/ToolBottomBar/FormatModal/index.js

@@ -0,0 +1,543 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { Button, Col, Form, Input, InputNumber, Popover, Row, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import "./index.less";
+var suffixCls = 'ueditor-format';
+
+// 系统字体实际对应内容
+var SYSTEM_FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif";
+
+// 默认设置 - 与theme.less中的样式保持一致
+var defaultSettings = {
+  headings: {
+    h1: {
+      fontSize: '28px',
+      fontFamily: '系统字体',
+      fontWeight: '700',
+      lineHeight: '1.3',
+      color: '#1a202c',
+      marginTop: '2.5rem',
+      marginBottom: '1.2rem'
+    },
+    h2: {
+      fontSize: '24px',
+      fontFamily: '系统字体',
+      fontWeight: '600',
+      lineHeight: '1.3',
+      color: '#1a202c',
+      marginTop: '2.5rem',
+      marginBottom: '1.2rem'
+    },
+    h3: {
+      fontSize: '20px',
+      fontFamily: '系统字体',
+      fontWeight: '600',
+      lineHeight: '1.3',
+      color: '#1a202c',
+      marginTop: '2rem',
+      marginBottom: '0.8rem'
+    },
+    h4: {
+      fontSize: '18px',
+      fontFamily: '系统字体',
+      fontWeight: '600',
+      lineHeight: '1.3',
+      color: '#1a202c',
+      marginTop: '2rem',
+      marginBottom: '0.8rem'
+    },
+    h5: {
+      fontSize: '16px',
+      fontFamily: '系统字体',
+      fontWeight: '600',
+      lineHeight: '1.3',
+      color: '#1a202c',
+      marginTop: '2rem',
+      marginBottom: '0.8rem'
+    },
+    h6: {
+      fontSize: '16px',
+      fontFamily: '系统字体',
+      fontWeight: '600',
+      lineHeight: '1.3',
+      color: '#1a202c',
+      marginTop: '2rem',
+      marginBottom: '0.8rem'
+    }
+  },
+  paragraph: {
+    fontSize: '16px',
+    fontFamily: '系统字体',
+    fontWeight: 'normal',
+    lineHeight: '1.7',
+    color: '#2c3e50'
+  },
+  lists: {
+    ul: {
+      fontSize: '16px',
+      fontFamily: '系统字体',
+      fontWeight: 'normal',
+      lineHeight: '1.7',
+      color: '#2c3e50',
+      paddingLeft: '1rem',
+      marginTop: '1rem',
+      marginBottom: '1rem'
+    },
+    ol: {
+      fontSize: '16px',
+      fontFamily: '系统字体',
+      fontWeight: 'normal',
+      lineHeight: '1.7',
+      color: '#2c3e50',
+      paddingLeft: '1rem',
+      marginTop: '1rem',
+      marginBottom: '1rem'
+    }
+  }
+};
+
+// 检测操作系统类型
+var getOSType = function getOSType() {
+  var userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes('win')) return 'windows';
+  if (userAgent.includes('mac')) return 'mac';
+  if (userAgent.includes('linux')) return 'linux';
+  return 'unknown';
+};
+
+// 改进的字体可用性检测
+var isFontAvailable = function isFontAvailable(fontName) {
+  // 跳过特殊的系统字体和复合字体栈
+  if (fontName === '系统字体' || fontName.includes(',') || fontName.includes('sans-serif') || fontName.includes('serif') || fontName.includes('monospace')) {
+    return true;
+  }
+
+  // 使用document.fonts API (现代浏览器)
+  if ('fonts' in document) {
+    try {
+      // @ts-ignore - TypeScript可能不包含fonts API的完整类型定义
+      return document.fonts.check("12px \"".concat(fontName, "\""));
+    } catch (e) {
+      // 降级到canvas方法
+    }
+  }
+
+  // 降级方案：使用canvas检测
+  try {
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');
+    if (!context) return false;
+
+    // 测试文本，包含中英文字符
+    var testText = 'abcdefghijklmnopqrstuvwxyz测试字体ABCDEFG';
+
+    // 设置基线字体并测量
+    context.font = '72px monospace';
+    var baselineWidth = context.measureText(testText).width;
+
+    // 设置测试字体并测量
+    context.font = "72px \"".concat(fontName, "\", monospace");
+    var testWidth = context.measureText(testText).width;
+
+    // 如果宽度有显著差异，说明字体存在
+    return Math.abs(testWidth - baselineWidth) > 2;
+  } catch (e) {
+    console.warn("\u5B57\u4F53\u68C0\u6D4B\u5931\u8D25: ".concat(fontName), e);
+    return false;
+  }
+};
+
+// 根据操作系统生成字体选项
+var generateFontOptions = function generateFontOptions() {
+  var osType = getOSType();
+
+  // 基础通用字体
+  var baseFonts = [{
+    value: '系统字体',
+    label: '系统字体(推荐)'
+  }, {
+    value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif",
+    label: '完整系统字体栈'
+  }];
+
+  // 各平台特定字体
+  var platformFonts = {
+    windows: [{
+      value: '微软雅黑',
+      label: '微软雅黑'
+    }, {
+      value: '仿宋',
+      label: '仿宋'
+    }, {
+      value: '黑体',
+      label: '黑体'
+    }, {
+      value: '楷体',
+      label: '楷体'
+    }, {
+      value: '宋体',
+      label: '宋体'
+    }, {
+      value: '等线',
+      label: '等线'
+    }, {
+      value: 'Segoe UI',
+      label: 'Segoe UI'
+    }, {
+      value: 'Calibri',
+      label: 'Calibri'
+    }],
+    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'
+    }],
+    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'
+    }]
+  };
+
+  // 通用Web安全字体
+  var 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: '系统等宽字体'
+  }];
+
+  // 合并字体列表
+  var allFonts = [].concat(baseFonts);
+
+  // 添加平台特定字体
+  if (platformFonts[osType]) {
+    allFonts.push.apply(allFonts, _toConsumableArray(platformFonts[osType]));
+  }
+
+  // 添加Web安全字体
+  allFonts.push.apply(allFonts, webSafeFonts);
+
+  // 启用字体检测，但不阻塞界面
+  var availableFonts = allFonts.map(function (font) {
+    return _objectSpread(_objectSpread({}, font), {}, {
+      available: isFontAvailable(font.value)
+    });
+  });
+
+  // 将不可用的字体标记出来
+  return availableFonts.map(function (font) {
+    return {
+      value: font.value,
+      label: font.available ? font.label : "".concat(font.label, " (\u4E0D\u53EF\u7528)"),
+      disabled: !font.available && !['系统字体', '完整系统字体栈'].includes(font.label)
+    };
+  });
+};
+
+// 字体选项 - 动态生成
+var fontFamilyOptions = generateFontOptions();
+
+// 字重选项
+var fontWeightOptions = [{
+  value: 'normal',
+  label: '常规'
+}, {
+  value: '500',
+  label: '中等'
+}, {
+  value: '600',
+  label: '半粗'
+}, {
+  value: 'bold',
+  label: '粗体'
+}];
+
+// 字号选项
+var fontSizeOptions = [{
+  value: '12px',
+  label: '12px'
+}, {
+  value: '14px',
+  label: '14px'
+}, {
+  value: '16px',
+  label: '16px'
+}, {
+  value: '18px',
+  label: '18px'
+}, {
+  value: '20px',
+  label: '20px'
+}, {
+  value: '22px',
+  label: '22px'
+}, {
+  value: '24px',
+  label: '24px'
+}, {
+  value: '28px',
+  label: '28px'
+}, {
+  value: '32px',
+  label: '32px'
+}, {
+  value: '36px',
+  label: '36px'
+}, {
+  value: '1.0em',
+  label: '1.0em'
+}, {
+  value: '1.2em',
+  label: '1.2em'
+}, {
+  value: '1.5em',
+  label: '1.5em'
+}, {
+  value: '1.8em',
+  label: '1.8em'
+}];
+var FormatSettingsPanel = function FormatSettingsPanel(_ref) {
+  var onApply = _ref.onApply,
+    initialSettings = _ref.initialSettings,
+    children = _ref.children;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(_objectSpread({}, defaultSettings)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    settings = _useState4[0],
+    setSettings = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentOS = _useState6[0],
+    setCurrentOS = _useState6[1];
+  useEffect(function () {
+    if (initialSettings) {
+      // 递归处理所有字体设置
+      var processFontFamily = function processFontFamily(obj) {
+        for (var _key in obj) {
+          if (_typeof(obj[_key]) === 'object' && obj[_key] !== null) {
+            processFontFamily(obj[_key]);
+          } else if (_key === 'fontFamily' && obj[_key] === SYSTEM_FONT_STACK) {
+            obj[_key] = '系统字体';
+          }
+        }
+      };
+      processFontFamily(initialSettings);
+      setSettings(function (pre) {
+        return _objectSpread(_objectSpread({}, pre), initialSettings);
+      });
+    }
+  }, [initialSettings]);
+  useEffect(function () {
+    // 检测并设置当前操作系统信息
+    var osType = getOSType();
+    var osNames = {
+      windows: 'Windows',
+      mac: 'macOS',
+      linux: 'Linux',
+      unknown: '未知系统'
+    };
+    setCurrentOS(osNames[osType] || '未知系统');
+  }, []);
+  useEffect(function () {
+    if (open) {
+      form.setFieldsValue(settings);
+    }
+  }, [open, form, settings]);
+  var handleValuesChange = function handleValuesChange(changedValues, allValues) {
+    setSettings(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), allValues);
+    });
+  };
+  var handleApply = function handleApply() {
+    form.validateFields().then(function (values) {
+      // 处理"系统字体"映射为实际的系统字体栈
+      var processedValues = JSON.parse(JSON.stringify(values)); // 深拷贝避免修改原值
+
+      // 递归处理所有字体设置
+      var processFontFamily = function processFontFamily(obj) {
+        for (var _key2 in obj) {
+          if (_typeof(obj[_key2]) === 'object' && obj[_key2] !== null) {
+            processFontFamily(obj[_key2]);
+          } else if (_key2 === 'fontFamily' && obj[_key2] === '系统字体') {
+            obj[_key2] = SYSTEM_FONT_STACK;
+          }
+        }
+      };
+      processFontFamily(processedValues);
+      onApply(processedValues);
+      setOpen(false);
+    });
+  };
+  var handleCancel = function handleCancel() {
+    setOpen(false);
+  };
+  var renderStyleRow = function renderStyleRow(prefix, label, style) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(suffixCls, "-style-row")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(suffixCls, "-row-label")
+    }, label), /*#__PURE__*/React.createElement(Row, {
+      gutter: 12
+    }, /*#__PURE__*/React.createElement(Col, {
+      span: 7
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: [].concat(_toConsumableArray(prefix.split('.')), ['fontFamily']),
+      noStyle: true
+    }, /*#__PURE__*/React.createElement(Select, {
+      placeholder: "\u5B57\u4F53",
+      options: fontFamilyOptions,
+      size: "small"
+    }))), /*#__PURE__*/React.createElement(Col, {
+      span: 5
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: [].concat(_toConsumableArray(prefix.split('.')), ['fontSize']),
+      noStyle: true
+    }, /*#__PURE__*/React.createElement(Select, {
+      placeholder: "\u5B57\u53F7",
+      options: fontSizeOptions,
+      size: "small"
+    }))), /*#__PURE__*/React.createElement(Col, {
+      span: 4
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: [].concat(_toConsumableArray(prefix.split('.')), ['fontWeight']),
+      noStyle: true
+    }, /*#__PURE__*/React.createElement(Select, {
+      placeholder: "\u5B57\u91CD",
+      options: fontWeightOptions,
+      size: "small"
+    }))), /*#__PURE__*/React.createElement(Col, {
+      span: 4
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: [].concat(_toConsumableArray(prefix.split('.')), ['lineHeight']),
+      noStyle: true
+    }, /*#__PURE__*/React.createElement(InputNumber, {
+      placeholder: "\u884C\u9AD8",
+      step: 0.1,
+      min: 1,
+      max: 3,
+      size: "small",
+      style: {
+        width: '100%'
+      }
+    }))), /*#__PURE__*/React.createElement(Col, {
+      span: 4
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: [].concat(_toConsumableArray(prefix.split('.')), ['color']),
+      noStyle: true
+    }, /*#__PURE__*/React.createElement(Input, {
+      type: "color",
+      style: {
+        width: '100%',
+        padding: 0,
+        height: 24
+      }
+    })))));
+  };
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-popover-content")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-system-info")
+  }, "\u5F53\u524D\u7CFB\u7EDF: ", currentOS, " | \u5B57\u4F53\u9009\u9879\u5DF2\u9488\u5BF9\u60A8\u7684\u7CFB\u7EDF\u4F18\u5316"), /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    layout: "vertical",
+    initialValues: settings,
+    onValuesChange: handleValuesChange,
+    size: "small"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-section")
+  }, renderStyleRow('paragraph', '正文', settings.paragraph), renderStyleRow('headings.h1', '主标题', settings.headings.h1), renderStyleRow('headings.h2', '二级标题', settings.headings.h2), renderStyleRow('headings.h3', '三级标题', settings.headings.h3), renderStyleRow('headings.h4', '四级标题', settings.headings.h4), renderStyleRow('headings.h5', '五级标题', settings.headings.h5), renderStyleRow('headings.h6', '六级标题', settings.headings.h6), renderStyleRow('lists.ul', '无序列表', settings.lists.ul), renderStyleRow('lists.ol', '有序列表', settings.lists.ol)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: handleCancel
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    type: "primary",
+    onClick: handleApply
+  }, "\u5E94\u7528"))));
+  return /*#__PURE__*/React.createElement(Popover, {
+    content: content,
+    title: "\u683C\u5F0F\u8BBE\u7F6E",
+    trigger: "click",
+    visible: open,
+    onVisibleChange: setOpen,
+    placement: "bottomRight",
+    overlayClassName: "".concat(suffixCls, "-settings-popover")
+  }, children);
+};
+export default FormatSettingsPanel;