@ccs-ui/rc-pro 2.4.6 → 2.4.7-beta.2

package/es/editor/lexical/base/toolbar/index.js

@@ -0,0 +1,562 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined, BgColorsOutlined, BoldOutlined, DisconnectOutlined, FileImageOutlined, FontColorsOutlined, ItalicOutlined, LinkOutlined, MenuOutlined, RedoOutlined, StrikethroughOutlined, UnderlineOutlined, UndoOutlined } from '@ant-design/icons';
+import { $onGenerateHTML } from "../../../rich/export";
+import { $generateNodesFromDOM } from '@lexical/html';
+import { $isLinkNode as $isLinkNodeHelper, TOGGLE_LINK_COMMAND } from '@lexical/link'; // 别名避免冲突
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { mergeRegister } from '@lexical/utils';
+import { Button, Divider, Drawer, Form, Input, Modal, Radio, Select, Tooltip } from 'antd';
+import { $getRoot, $getSelection, $insertNodes, $isRangeSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from 'lexical';
+import { useCallback, useContext, useEffect } from 'react';
+import { EditorRichContext } from '..';
+import { CcsAtom } from "../../../../";
+import CcsColorPicker from "../../../../color-picker";
+import { useInsertCss } from "../../../../hooks/use-insert-css";
+import CodeEdit from "./code";
+import UploadModal from "./upload";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function LinkEdit(_ref) {
+  var onCancel = _ref.onCancel,
+    onOk = _ref.onOk;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  function onHandleOk() {
+    form.validateFields().then(function (values) {
+      onOk(values);
+      onCancel();
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Modal, {
+      open: true,
+      destroyOnHidden: true,
+      onCancel: onCancel,
+      onOk: onHandleOk,
+      children: /*#__PURE__*/_jsxs(Form, {
+        form: form,
+        initialValues: {
+          url: 'http://',
+          target: '_self'
+        },
+        layout: "horizontal",
+        labelCol: {
+          span: 6
+        },
+        wrapperCol: {
+          span: 15
+        },
+        children: [/*#__PURE__*/_jsx(Form.Item, {
+          label: "url",
+          name: "url",
+          rules: [{
+            required: true,
+            message: '请输入链接'
+          }],
+          children: /*#__PURE__*/_jsx(Input, {})
+        }), /*#__PURE__*/_jsx(Form.Item, {
+          label: "\u8BF4\u660E",
+          name: "title",
+          children: /*#__PURE__*/_jsx(Input, {})
+        }), /*#__PURE__*/_jsx(Form.Item, {
+          label: "\u7C7B\u578B",
+          name: "target",
+          children: /*#__PURE__*/_jsx(Radio.Group, {
+            optionType: "button",
+            options: [{
+              label: '内部链接',
+              value: '_self'
+            }, {
+              label: '外部链接',
+              value: '_blank'
+            }]
+          })
+        })]
+      })
+    })
+  });
+}
+var FONT_FAMILIES = [{
+  label: '默认',
+  value: 'inherit'
+}, {
+  label: '宋体',
+  value: 'SimSun, serif'
+}, {
+  label: '黑体',
+  value: 'SimHei, sans-serif'
+}, {
+  label: '微软雅黑',
+  value: '"Microsoft YaHei", sans-serif'
+}, {
+  label: 'Arial',
+  value: 'Arial, sans-serif'
+}, {
+  label: 'Times New Roman',
+  value: '"Times New Roman", serif'
+}, {
+  label: 'Courier New',
+  value: '"Courier New", monospace'
+}, {
+  label: 'Georgia',
+  value: 'Georgia, serif'
+}, {
+  label: 'Verdana',
+  value: 'Verdana, sans-serif'
+}];
+export default function ToolbarPlugin(_ref2) {
+  var style = _ref2.style,
+    disabled = _ref2.disabled;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useContext = useContext(EditorRichContext),
+    imageUpload = _useContext.imageUpload;
+  var _CcsAtom$useComplexSt = CcsAtom.useComplexState({
+      canUndo: false,
+      canRedo: false,
+      isBold: false,
+      isItalic: false,
+      isUnderline: false,
+      isStrikethrough: false,
+      isUpload: false,
+      isLinkOpen: false,
+      isLink: false,
+      fontSize: '14px',
+      fontFamily: 'inherit',
+      fontColor: undefined,
+      bgColor: undefined,
+      previewHtml: '',
+      codeEdit: ''
+    }),
+    state = _CcsAtom$useComplexSt.state,
+    setByPath = _CcsAtom$useComplexSt.setByPath;
+  var canRedo = state.canRedo,
+    canUndo = state.canUndo,
+    isBold = state.isBold,
+    isItalic = state.isItalic,
+    isUnderline = state.isUnderline,
+    isStrikethrough = state.isStrikethrough,
+    isUpload = state.isUpload,
+    isLinkOpen = state.isLinkOpen,
+    isLink = state.isLink,
+    fontSize = state.fontSize,
+    fontFamily = state.fontFamily,
+    fontColor = state.fontColor,
+    bgColor = state.bgColor,
+    previewHtml = state.previewHtml,
+    codeEdit = state.codeEdit;
+
+  // 应用样式
+  var applyStyleText = useCallback(function (styles) {
+    editor.update(function () {
+      var selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $patchStyleText(selection, styles);
+      }
+    });
+  }, [editor]);
+
+  // 设置字体大小
+  var onFontSizeChange = useCallback(function (size) {
+    applyStyleText({
+      'font-size': size
+    });
+    setByPath('fontSize', size);
+  }, [applyStyleText]);
+
+  // 设置字体
+  var onFontFamilyChange = useCallback(function (family) {
+    applyStyleText({
+      'font-family': family
+    });
+    setByPath('fontFamily', family);
+  }, [applyStyleText]);
+
+  // 设置字体颜色
+  var onFontColorChange = useCallback(function (color) {
+    applyStyleText({
+      color: color
+    });
+    setByPath('fontColor', color);
+  }, [applyStyleText]);
+
+  // 设置背景颜色
+  var onBgColorChange = useCallback(function (color) {
+    applyStyleText({
+      'background-color': color
+    });
+    setByPath('bgColor', color);
+  }, [applyStyleText]);
+
+  // 格式化文本
+  var onFormatText = function onFormatText(format) {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+  };
+
+  // 对齐
+  var onFormatAlign = function onFormatAlign(alignment) {
+    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment);
+  };
+  var FONT_SIZES = [{
+    label: 12,
+    value: '12px'
+  }, {
+    label: 14,
+    value: '14px'
+  }, {
+    label: 16,
+    value: '16px'
+  }, {
+    label: 18,
+    value: '18px'
+  }, {
+    label: 20,
+    value: '20px'
+  }, {
+    label: 24,
+    value: '24px'
+  }, {
+    label: 28,
+    value: '28px'
+  }, {
+    label: 38,
+    value: '36px'
+  }, {
+    label: 48,
+    value: '48px'
+  }, {
+    label: 72,
+    value: '72px'
+  }];
+  var $updateToolbar = useCallback(function () {
+    var selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      setByPath({
+        isBold: selection.hasFormat('bold'),
+        isItalic: selection.hasFormat('italic'),
+        isUnderline: selection.hasFormat('underline'),
+        isStrikethrough: selection.hasFormat('strikethrough'),
+        fontSize: $getSelectionStyleValueForProperty(selection, 'font-size', '16px'),
+        fontFamily: $getSelectionStyleValueForProperty(selection, 'font-family', 'inherit'),
+        fontColor: $getSelectionStyleValueForProperty(selection, 'color', '#000000'),
+        bgColor: $getSelectionStyleValueForProperty(selection, 'background-color', undefined)
+      });
+      var parent = selection.anchor.getNode().getParent();
+      // 判断父节点是否为 LinkNode
+      setByPath('isLink', $isLinkNodeHelper(parent));
+    }
+  }, []);
+
+  // add editor css
+  useInsertCss('editor', function (prefixCls) {
+    return [".ccs-rich-upload .".concat(prefixCls, "-upload-wrapper.").concat(prefixCls, "-upload-picture-card-wrapper .").concat(prefixCls, "-upload.").concat(prefixCls, "-upload-select{width:200px;height:200px;}"), ".ccs-rich-upload .".concat(prefixCls, "-upload-wrapper.").concat(prefixCls, "-upload-picture-card-wrapper .").concat(prefixCls, "-upload-list.").concat(prefixCls, "-upload-list-picture-card .").concat(prefixCls, "-upload-list-item-container{width:200px;height:200px;}")];
+  });
+  useEffect(function () {
+    return mergeRegister(editor.registerUpdateListener(function (_ref3) {
+      var editorState = _ref3.editorState;
+      editorState.read(function () {
+        $updateToolbar();
+      }, {
+        editor: editor
+      });
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function (_payload, _newEditor) {
+      $updateToolbar();
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(CAN_UNDO_COMMAND, function (payload) {
+      setByPath('canUndo', payload);
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(CAN_REDO_COMMAND, function (payload) {
+      setByPath('canRedo', payload);
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor, $updateToolbar]);
+
+  // 插入链接
+  var onLinkOk = function onLinkOk(link) {
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, link);
+  };
+
+  // 插入或移除链接
+  var insertLink = useCallback(function () {
+    if (!isLink) {
+      setByPath('isLinkOpen', true);
+    } else {
+      // 如果当前已经是链接 -> 移除 (传入 null)
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  // 禁止操作按钮
+  var isDisabled = disabled;
+
+  // 源码改变
+  var onUpdateCode = function onUpdateCode(code) {
+    editor.update(function () {
+      // 源码变更
+      if (codeEdit !== code) {
+        var parser = new DOMParser();
+        var dom = parser.parseFromString(code || '', 'text/html');
+        var nodes = $generateNodesFromDOM(editor, dom);
+        $getRoot().clear(); // 清空
+        $getRoot().select();
+        $insertNodes(nodes); // 插入新内容
+      }
+      setByPath('codeEdit', '');
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "ccs-editor-toolbar",
+    style: style,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "\u64A4\u9500",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: !canUndo || isDisabled,
+        onClick: function onClick() {
+          editor.dispatchCommand(UNDO_COMMAND, undefined);
+        },
+        icon: /*#__PURE__*/_jsx(UndoOutlined, {}),
+        type: "text"
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u91CD\u505A",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: !canRedo || isDisabled,
+        onClick: function onClick() {
+          editor.dispatchCommand(REDO_COMMAND, undefined);
+        },
+        icon: /*#__PURE__*/_jsx(RedoOutlined, {}),
+        type: "text"
+      })
+    }), /*#__PURE__*/_jsx(Divider, {
+      type: "vertical"
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u52A0\u7C97",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatText('bold');
+        },
+        icon: /*#__PURE__*/_jsx(BoldOutlined, {}),
+        type: isBold ? 'link' : 'text'
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u659C\u4F53",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatText('italic');
+        },
+        icon: /*#__PURE__*/_jsx(ItalicOutlined, {}),
+        type: isItalic ? 'link' : 'text'
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u4E0B\u5212\u7EBF",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatText('underline');
+        },
+        icon: /*#__PURE__*/_jsx(UnderlineOutlined, {}),
+        type: isUnderline ? 'link' : 'text'
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u5220\u9664\u7EBF",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatText('strikethrough');
+        },
+        icon: /*#__PURE__*/_jsx(StrikethroughOutlined, {}),
+        type: isStrikethrough ? 'link' : 'text'
+      })
+    }), /*#__PURE__*/_jsx(Divider, {
+      type: "vertical"
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u5DE6\u5BF9\u9F50",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatAlign('left');
+        },
+        icon: /*#__PURE__*/_jsx(AlignLeftOutlined, {}),
+        type: "text"
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u4E2D\u95F4\u5BF9\u9F50",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatAlign('center');
+        },
+        icon: /*#__PURE__*/_jsx(AlignCenterOutlined, {}),
+        type: "text"
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u53F3\u5BF9\u9F50",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatAlign('right');
+        },
+        icon: /*#__PURE__*/_jsx(AlignRightOutlined, {}),
+        type: "text"
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u4E24\u6BB5\u5BF9\u9F50",
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: isDisabled,
+        onClick: function onClick() {
+          onFormatAlign('justify');
+        },
+        icon: /*#__PURE__*/_jsx(MenuOutlined, {}),
+        type: "text"
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u56FE\u7247\u4E0A\u4F20",
+      children: /*#__PURE__*/_jsx(Button, {
+        type: "text",
+        disabled: isDisabled,
+        icon: /*#__PURE__*/_jsx(FileImageOutlined, {}),
+        onClick: function onClick() {
+          return setByPath('isUpload', true);
+        }
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: isLink ? '取消超链接' : '添加超链接',
+      children: /*#__PURE__*/_jsx(Button, {
+        type: "text",
+        icon: isLink ? /*#__PURE__*/_jsx(DisconnectOutlined, {}) : /*#__PURE__*/_jsx(LinkOutlined, {}),
+        onClick: function onClick() {
+          return insertLink();
+        },
+        disabled: isDisabled
+      })
+    }), /*#__PURE__*/_jsx(Divider, {
+      type: "vertical"
+    }), /*#__PURE__*/_jsx(CcsColorPicker, {
+      value: fontColor,
+      onChange: function onChange(e) {
+        return onFontColorChange(e);
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "\u5B57\u4F53\u989C\u8272",
+        children: /*#__PURE__*/_jsx(Button, {
+          disabled: isDisabled,
+          style: {
+            color: fontColor
+          },
+          icon: /*#__PURE__*/_jsx(FontColorsOutlined, {}),
+          type: "text"
+        })
+      })
+    }), /*#__PURE__*/_jsx(CcsColorPicker, {
+      value: bgColor,
+      onChange: function onChange(e) {
+        return onBgColorChange(e);
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "\u80CC\u666F\u8272",
+        children: /*#__PURE__*/_jsx(Button, {
+          disabled: isDisabled,
+          style: {
+            color: bgColor
+          },
+          icon: /*#__PURE__*/_jsx(BgColorsOutlined, {}),
+          type: "text"
+        })
+      })
+    }), /*#__PURE__*/_jsx(Divider, {
+      type: "vertical"
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u5B57\u4F53",
+      children: /*#__PURE__*/_jsx(Select, {
+        value: fontFamily,
+        options: FONT_FAMILIES,
+        variant: "filled",
+        size: "small",
+        onChange: onFontFamilyChange,
+        style: {
+          marginRight: 6,
+          width: 80
+        },
+        popupMatchSelectWidth: 200
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u5B57\u4F53\u5927\u5C0F",
+      children: /*#__PURE__*/_jsx(Select, {
+        value: fontSize,
+        options: FONT_SIZES,
+        variant: "filled",
+        size: "small",
+        onChange: onFontSizeChange
+      })
+    }), /*#__PURE__*/_jsx(Divider, {
+      type: "vertical"
+    }), /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      type: "text",
+      onClick: function onClick() {
+        editor.read(function () {
+          var html = $onGenerateHTML(editor);
+          setByPath('codeEdit', html);
+        });
+      },
+      children: "\u6E90\u7801"
+    }), /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      type: "text",
+      onClick: function onClick() {
+        editor.read(function () {
+          var html = $onGenerateHTML(editor);
+          setByPath('previewHtml', html);
+        });
+      },
+      children: "\u9884\u89C8"
+    }), isUpload && (imageUpload === null || imageUpload === void 0 ? void 0 : imageUpload.uploadRequest) && /*#__PURE__*/_jsx(UploadModal, {
+      onCancel: function onCancel() {
+        return setByPath('isUpload', false);
+      }
+    }), isLinkOpen && /*#__PURE__*/_jsx(LinkEdit, {
+      onOk: onLinkOk,
+      onCancel: function onCancel() {
+        return setByPath('isLinkOpen', false);
+      }
+    }), !!previewHtml && /*#__PURE__*/_jsx(Drawer, {
+      title: "\u9884\u89C8",
+      width: "100%",
+      open: true,
+      onClose: function onClose() {
+        return setByPath('previewHtml', '');
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: previewHtml
+        }
+      })
+    }), !!codeEdit && /*#__PURE__*/_jsx(CodeEdit, {
+      code: codeEdit,
+      onOk: onUpdateCode,
+      onClose: function onClose() {
+        return setByPath('codeEdit', '');
+      }
+    })]
+  });
+}

package/es/editor/lexical/base/toolbar/upload.d.ts

@@ -0,0 +1,5 @@
+import { ImageNodeType } from '../../plugins/image/ImageNode';
+export default function UploadModal({ imageProps, onCancel, }: {
+    imageProps?: Partial<ImageNodeType>;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;