@hw-component/form 1.9.69 → 1.9.71

package/lib/Form/hooks/useAddFormat.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../Context/index.js');
+var React = require('react');
+
+var formatMaker = function formatMaker(itemProps, formats) {
+  var _ref = formats || {},
+    inputValue = _ref.inputValue,
+    outputValue = _ref.outputValue;
+  var _itemProps$initValueP = itemProps.initValueProvider,
+    initValueProvider = _itemProps$initValueP === void 0 ? inputValue : _itemProps$initValueP,
+    _itemProps$subProvide = itemProps.subProvider,
+    subProvider = _itemProps$subProvide === void 0 ? outputValue : _itemProps$subProvide;
+  var resultObj = {};
+  if (initValueProvider) {
+    resultObj.inputValue = function (value) {
+      return initValueProvider(itemProps, value);
+    };
+  }
+  if (subProvider) {
+    resultObj.outputValue = function (value) {
+      return subProvider(itemProps, value);
+    };
+  }
+  var keysLen = Object.keys(resultObj).length;
+  return keysLen === 0 ? undefined : resultObj;
+};
+var useAddFormat = (function (props) {
+  var name = props.name,
+    itemProps = props.itemProps;
+  var _useFormContext = index.useFormContext(),
+    form = _useFormContext.form,
+    _useFormContext$value = _useFormContext.valueType,
+    valueType = _useFormContext$value === void 0 ? "float" : _useFormContext$value;
+  var relName = Array.isArray(name) ? name.join(".") : name;
+  React.useEffect(function () {
+    if (!relName || !itemProps) {
+      return;
+    }
+    form === null || form === void 0 || form.addFormat(relName, formatMaker(itemProps));
+  }, [valueType, props]);
+});
+
+exports.default = useAddFormat;
+exports.formatMaker = formatMaker;
+// powered by h

package/lib/Form/modal.d.ts

@@ -109,6 +109,10 @@ interface ConfigUploadProps {
     maxSize?: number;
     request?: PromiseFnResult;
 }
+interface ConfigRichEditorProps {
+    fileRequest?: PromiseFnResult;
+    valueType?: "html" | "state";
+}
 export type ComponentModal = React.FunctionComponent<any> | React.ComponentClass<any> | React.ForwardRefExoticComponent<any>;
 export interface ConfigComponentModal {
     Component: ComponentModal;
@@ -127,6 +131,7 @@ export interface IFormConfigContextProps {
     defaultComponent?: DefaultComponentModal;
     formItemStyle?: React.CSSProperties;
     itemProps?: ItemPropsType;
+    richEditorProps?: ConfigRichEditorProps;
 }
 interface ActionModal {
     key: string;

package/lib/RichEditor/hooks.d.ts

@@ -0,0 +1,15 @@
+import { IHRichEditorProps } from "src/components/RichEditor/modal";
+export declare const useProps: ({ fileRequest, valueType }: IHRichEditorProps) => {
+    fileRequest: any;
+    valueType: any;
+};
+export declare const useFocusClassname: ({ bordered, onFocus: focusProps, onBlur: blurProps, }: IHRichEditorProps) => {
+    focusClassname: string;
+    onFocus: (editState: any) => void;
+    onBlur: (editState: any) => void;
+};
+export declare const useVC: ({ value, onChange, valueType }: IHRichEditorProps) => {
+    richValue: any;
+    change: (editorState: any) => void;
+};
+export declare const useUploadFn: ({ fileRequest }: IHRichEditorProps) => (params: any) => Promise<void>;

package/lib/RichEditor/hooks.js

@@ -0,0 +1,114 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var FormConfigProvider = require('../Form/Context/FormConfigProvider.js');
+var config = require('../config.js');
+var index = require('../hooks/index.js');
+var React = require('react');
+var BraftEditor = require('braft-editor');
+
+var useProps = function useProps(_ref) {
+  var _baseConfig$richEdito;
+  var fileRequest = _ref.fileRequest,
+    valueType = _ref.valueType;
+  var _useFormConfigContext = FormConfigProvider.useFormConfigContext("richEditorProps"),
+    _useFormConfigContext2 = _useFormConfigContext.fileRequest,
+    contextFileRequest = _useFormConfigContext2 === void 0 ? fileRequest : _useFormConfigContext2,
+    _useFormConfigContext3 = _useFormConfigContext.valueType,
+    contextValueType = _useFormConfigContext3 === void 0 ? valueType : _useFormConfigContext3;
+  var cuRequest = fileRequest === null ? (_baseConfig$richEdito = config.baseConfig.richEditorProps) === null || _baseConfig$richEdito === void 0 ? void 0 : _baseConfig$richEdito.fileRequest : contextFileRequest;
+  return {
+    fileRequest: cuRequest,
+    valueType: contextValueType
+  };
+};
+var useFocusClassname = function useFocusClassname(_ref2) {
+  var bordered = _ref2.bordered,
+    focusProps = _ref2.onFocus,
+    blurProps = _ref2.onBlur;
+  var styleFocusClassName = index.useClassName("hw-rich-editor-focus");
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusClassname = _useState2[0],
+    setFocusClassname = _useState2[1];
+  var onFocus = function onFocus(editState) {
+    focusProps === null || focusProps === void 0 || focusProps(editState);
+    if (!bordered) {
+      setFocusClassname("");
+      return;
+    }
+    setFocusClassname(styleFocusClassName);
+  };
+  var onBlur = function onBlur(editState) {
+    setFocusClassname("");
+    blurProps === null || blurProps === void 0 || blurProps(editState);
+  };
+  return {
+    focusClassname: focusClassname,
+    onFocus: onFocus,
+    onBlur: onBlur
+  };
+};
+var useVC = function useVC(_ref3) {
+  var value = _ref3.value,
+    onChange = _ref3.onChange,
+    valueType = _ref3.valueType;
+  var richValue = valueType === "html" ? BraftEditor.createEditorState(value) : value;
+  var change = function change(editorState) {
+    var changeVal = valueType === "html" ? editorState.toHTML() : editorState;
+    var isEmpty = !!richValue ? richValue.isEmpty() : true;
+    if (isEmpty && editorState.isEmpty()) {
+      return;
+    }
+    onChange === null || onChange === void 0 || onChange(changeVal);
+  };
+  return {
+    richValue: richValue,
+    change: change
+  };
+};
+var useUploadFn = function useUploadFn(_ref4) {
+  var fileRequest = _ref4.fileRequest;
+  return /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+      var file, id, _yield$fileRequest, url;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            file = params.file, id = params.id;
+            _context.next = 3;
+            return fileRequest === null || fileRequest === void 0 ? void 0 : fileRequest(file, params);
+          case 3:
+            _yield$fileRequest = _context.sent;
+            url = _yield$fileRequest.url;
+            params.success({
+              url: url,
+              meta: {
+                id: id,
+                title: file.name,
+                alt: "媒体资源",
+                loop: false,
+                autoPlay: false,
+                controls: true,
+                poster: url
+              }
+            });
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+};
+
+exports.useFocusClassname = useFocusClassname;
+exports.useProps = useProps;
+exports.useUploadFn = useUploadFn;
+exports.useVC = useVC;
+// powered by h

package/lib/RichEditor/index.d.ts

@@ -0,0 +1,4 @@
+import "braft-editor/dist/index.css";
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<import("../Form/modal").HFormItemProps & React.RefAttributes<any>>;
+export default _default;

package/lib/RichEditor/index.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var jsxRuntime = require('react/jsx-runtime');
+var BraftEditor = require('braft-editor');
+require('braft-editor/dist/index.css');
+var hooks = require('./hooks.js');
+var index = require('../hooks/index.js');
+var React = require('react');
+var HFormConnect = require('../Form/HFormConnect.js');
+
+var _excluded = ["value", "onChange", "valueType", "fileRequest", "media", "contentStyle", "bordered", "onBlur", "onFocus", "addFormat"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultContentStyle = {
+  height: 400
+};
+var Index = function Index(_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    valueType = _ref.valueType,
+    fileRequest = _ref.fileRequest,
+    media = _ref.media,
+    _ref$contentStyle = _ref.contentStyle,
+    contentStyle = _ref$contentStyle === void 0 ? defaultContentStyle : _ref$contentStyle,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    addFormat = _ref.addFormat,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useProps = hooks.useProps({
+      fileRequest: fileRequest,
+      valueType: valueType
+    }),
+    fileReq = _useProps.fileRequest,
+    vType = _useProps.valueType;
+  var _useFocusClassname = hooks.useFocusClassname({
+      bordered: bordered,
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focusClassname = _useFocusClassname.focusClassname,
+    selfFocus = _useFocusClassname.onFocus,
+    selfBlur = _useFocusClassname.onBlur;
+  var _useVC = hooks.useVC({
+      value: value,
+      onChange: onChange,
+      valueType: vType
+    }),
+    richValue = _useVC.richValue,
+    change = _useVC.change;
+  var uploadFn = hooks.useUploadFn({
+    fileRequest: fileReq
+  });
+  var bodyClassName = index.useClassName("hw-rich-editor");
+  var borderClassName = index.useClassName("hw-rich-editor-border");
+  addFormat === null || addFormat === void 0 || addFormat({
+    float: {
+      inputValue: function inputValue(item, initValue) {
+        var _item$name = item.name,
+          name = _item$name === void 0 ? "" : _item$name;
+        var keyName = name;
+        var itemVal = initValue[keyName];
+        var initVal = typeof itemVal === "string" ? BraftEditor.createEditorState(itemVal) : itemVal;
+        return _defineProperty({}, keyName, initVal);
+      },
+      outputValue: function outputValue(item, _outputValue) {
+        var _item$name2 = item.name,
+          name = _item$name2 === void 0 ? "" : _item$name2;
+        var keyName = name;
+        var itemVal = _outputValue[keyName];
+        var outputVal = typeof itemVal === "string" ? itemVal : itemVal === null || itemVal === void 0 ? void 0 : itemVal.toHTML();
+        return _defineProperty({}, keyName, outputVal);
+      }
+    }
+  });
+  return jsxRuntime.jsx("div", {
+    className: "".concat(bodyClassName, " ").concat(bordered ? borderClassName : "", " ").concat(focusClassname),
+    children: jsxRuntime.jsx(BraftEditor, _objectSpread({
+      contentStyle: contentStyle,
+      value: richValue,
+      onChange: change,
+      onFocus: selfFocus,
+      ref: ref,
+      onBlur: selfBlur,
+      media: _objectSpread({
+        uploadFn: uploadFn
+      }, media)
+    }, props))
+  });
+};
+var HRichEditor = HFormConnect.default(/*#__PURE__*/React.forwardRef(Index));
+
+exports.default = HRichEditor;
+// powered by h

package/lib/RichEditor/modal.d.ts

@@ -0,0 +1,11 @@
+import { BraftEditorProps, EditorState } from "braft-editor";
+import { PromiseFnResult } from "../modal";
+import { addFormatItemModal } from "../Form/modal";
+export interface IHRichEditorProps extends Omit<BraftEditorProps, "value" | "onChange"> {
+    value?: string | EditorState;
+    onChange?: (value: string | EditorState) => void;
+    fileRequest?: PromiseFnResult;
+    valueType?: "html" | "state";
+    bordered?: boolean;
+    addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}

package/lib/config.js

@@ -70,7 +70,33 @@ var baseConfig = {
   },
   defaultComponent: {},
   formItemStyle: {},
-  itemProps: {}
+  itemProps: {},
+  richEditorProps: {
+    fileRequest: function () {
+      var _fileRequest = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
+        var url;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return util.fileToBase64(file);
+            case 2:
+              url = _context2.sent;
+              return _context2.abrupt("return", {
+                url: url
+              });
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function fileRequest(_x2) {
+        return _fileRequest.apply(this, arguments);
+      }
+      return fileRequest;
+    }()
+  }
 };
 
 exports.baseConfig = baseConfig;

package/lib/index.css

@@ -54,6 +54,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   margin-left: 4px;
+  cursor: pointer;
 }
 .ant-hw-form-base-item {
   display: -webkit-box;
@@ -289,3 +290,25 @@
 .ant-form-item-has-error .ant-hw-input-group-body {
   border-color: #ff4d4f !important;
 }
+.ant-hw-rich-editor {
+  box-sizing: border-box;
+  width: 100%;
+}
+.ant-hw-rich-editor .bf-container .public-DraftEditorPlaceholder-root {
+  color: #bfbfbf;
+  font-size: 14px;
+}
+.ant-hw-rich-editor-border {
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+.ant-hw-rich-editor-border:hover {
+  border-color: #40a9ff;
+}
+.ant-hw-rich-editor-focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-form-item-has-error .ant-hw-rich-editor-border {
+  border-color: #ff4d4f !important;
+}

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export { default as HBasicForm } from "./Form/Basic";
 export { default as HInputGroup } from "./InputGroup";
 export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInput: ({ copy: copyProps, value, addonAfter, ...props }: import("./Input/modal").HInputProps) => JSX.Element;
+export declare const HRichEditor: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, inputHelper, style, exFiles, spaceSize, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;

package/lib/index.js

@@ -14,6 +14,7 @@ var index$3 = require('./DialogForm/DrawerForm/index.js');
 
 var HSelect = config.default.select;
 var HInput = config.default.input;
+var HRichEditor = config.default.richEditor;
 var HSelectInput = config.default.selectInput;
 var HUpload = config.default.upload;
 var HUrlUpload = config.default.urlUpload.Component;
@@ -58,6 +59,7 @@ exports.HModalForm = HModalForm;
 exports.HPageHandler = HPageHandler;
 exports.HRadioGroup = HRadioGroup;
 exports.HRangePicker = HRangePicker;
+exports.HRichEditor = HRichEditor;
 exports.HSelect = HSelect;
 exports.HSelectInput = HSelectInput;
 exports.HSwitch = HSwitch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.9.69",
+  "version": "1.9.71",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",
@@ -36,6 +36,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
     "ahooks": "2.10.9",
+    "braft-editor": "^2.3.9",
     "copy-to-clipboard": "3.3.1",
     "react-color": "2.19.3"
   },

package/src/components/DialogForm/hooks.tsx

@@ -72,9 +72,9 @@ export const useModifyProps = ({
       setModalVisible(false);
     };
   }, [afterClose, autoClear]);
-  dialogForm.getParams=()=>{
-    return (formParams as Record<string, any>)||{};
-  }
+  dialogForm.getParams = () => {
+    return (formParams as Record<string, any>) || {};
+  };
   return {
     modalFormData,
     modalVisible,
@@ -94,9 +94,9 @@ export const useHDialogForm = () => {
       ...hForm,
       show: (params) => {},
       hide: () => {},
-      getParams:()=>{
-        return {}
-      }
+      getParams: () => {
+        return {};
+      },
     };
   }, []);
 };

package/src/components/DialogForm/modal.ts

@@ -28,7 +28,7 @@ export interface ShowParamsModal<P = any, T = any> {
 export interface HDialogFormInstance<P = any, T = any> extends HFormInstance {
   show: (data?: ShowParamsModal<P, T>) => void;
   hide: VoidFunction;
-  getParams:()=>Record<string, any>;
+  getParams: () => Record<string, any>;
 }
 export type FooterRender = (
   dialogForm?: HDialogFormInstance,

package/src/components/Form/Basic.tsx

@@ -1,8 +1,4 @@
-import type {
-  HFormProps,
-  HItemProps,
-  ItemPropsType,
-} from "./modal";
+import type { HFormProps, HItemProps, ItemPropsType } from "./modal";
 import Item from "./FormItem";
 import { Row } from "antd";
 import { useFormContext } from "./Context";
@@ -15,8 +11,8 @@ export default ({
   dismissOnPressEnter = true,
   itemSpan,
   labelWidth,
-                  formItemStyle,
-                  flexBox:formFlexBox
+  formItemStyle,
+  flexBox: formFlexBox,
 }: HFormProps) => {
   const {
     form,
@@ -49,7 +45,7 @@ export default ({
           colon: itemColon,
           itemSpan: configItemSpan,
           nameKey,
-            flexBox=formFlexBox
+          flexBox = formFlexBox,
         } = itemData;
         const defaultItemProps = {
           onPressEnter: dismissOnPressEnter ? undefined : defaultOnPressEnter,
@@ -58,7 +54,7 @@ export default ({
         };
         const arrayName = Array.isArray(name) ? name.join(".") : name;
         const key = arrayName || nameKey;
-        const itemStyle=style||formItemStyle;
+        const itemStyle = style || formItemStyle;
         return (
           <Item
             {...itemData}

package/src/components/Form/FormItem/BasicItem.tsx

@@ -56,7 +56,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
     noStyle = false,
     hidden,
     rowWrapper,
-      flexBox,
+    flexBox,
     ...oProps
   } = props;
   const { labelAlign: align = "right", itemProps, ...inProps } = props;
@@ -73,7 +73,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
     { ...inProps, itemProps: defaultItemProps },
     defaultComponent
   );
-  const rowClassname=useClassName("hw-form-item-row");
+  const rowClassname = useClassName("hw-form-item-row");
   const className = usePositionClassName(align);
   const hideItem = useHide({ hide, form });
   const disHide = useHide({ hide: hidden, form });
@@ -87,7 +87,9 @@ const Index: React.FC<HFormItemProps> = (props) => {
   return (
     <Col
       {...itemSpan}
-      className={`${colClassName} ${itemClassName} ${flexBox?rowClassname:""}`}
+      className={`${colClassName} ${itemClassName} ${
+        flexBox ? rowClassname : ""
+      }`}
       style={colStyle}
     >
       <Form.Item

package/src/components/Form/FormItem/index.tsx

@@ -2,6 +2,7 @@ import { useFormItemDomControl } from "./hooks";
 import React from "react";
 import type { HItemProps } from "../modal";
 import { useFormContext } from "../Context";
+import useAddFormat from "../hooks/useAddFormat";
 
 export default (props: HItemProps) => {
   const {
@@ -20,6 +21,7 @@ export default (props: HItemProps) => {
     colon,
     rowWrapper = formRowWrapper,
   } = props;
+  useAddFormat(props);
   const Component = useFormItemDomControl(props);
   return (
     <Component

package/src/components/Form/HFormConnect.tsx

@@ -1,44 +1,14 @@
 import { useFormContext } from "./Context";
-import type { HFormItemProps } from "@/components/Form/modal";
-import React, { useEffect } from "react";
-import type { ConnectConfigModal } from "@/components/Form/modal";
-import type { addFormatItemModal } from "@/components/Form/modal";
-import type { ConnectResultProps } from "@/components/Form/modal";
-import type { argsFn } from "@/components/Form/modal";
-interface ResultModal {
-  inputValue?: (value: Record<string, any>) => Record<string, any>;
-  outputValue?: (value: Record<string, any>) => Record<string, any>;
-}
-const formatMaker = (
-  itemProps: HFormItemProps,
-  formats?: addFormatItemModal
-) => {
-  const { inputValue, outputValue } = formats || {};
-  const { initValueProvider = inputValue, subProvider = outputValue } =
-    itemProps;
-  const resultObj: ResultModal = {};
-  if (initValueProvider) {
-    resultObj.inputValue = (value) => {
-      return initValueProvider(itemProps, value);
-    };
-  }
-  if (subProvider) {
-    resultObj.outputValue = (value) => {
-      return subProvider(itemProps, value);
-    };
-  }
-  const keysLen = Object.keys(resultObj).length;
-  return keysLen === 0 ? undefined : resultObj;
-};
+import React from "react";
+import type { addFormatItemModal ,HFormItemProps,ConnectResultProps,argsFn} from "./modal";
+import {formatMaker} from "./hooks/useAddFormat";
 
 export default (
   component:
     | React.FunctionComponent
     | React.ComponentClass
     | React.ForwardRefRenderFunction<any, any>,
-  config: ConnectConfigModal = {}
 ) => {
-  const { format = {} } = config;
   const Index: React.ForwardRefRenderFunction<any, HFormItemProps> = (
     props: HFormItemProps,
     ref
@@ -46,12 +16,6 @@ export default (
     const { form, valueType = "float" } = useFormContext();
     const { name } = props;
     const relName = Array.isArray(name) ? name.join(".") : name;
-    useEffect(() => {
-      if (!relName) {
-        return;
-      }
-      form?.addFormat(relName, formatMaker(props, format[valueType]));
-    }, [valueType, props]);
     const addFormat = (aFormat: Record<string, addFormatItemModal>) => {
       if (!relName) {
         return;

package/src/components/Form/config.ts

@@ -22,6 +22,8 @@ import TrimInput from "../Input/TrimInput";
 import TrimTextArea from "../TextArea/TrimTextArea";
 import HInputNumberGroup from "../Input/InputNumberGroup";
 import HText from "../Text";
+import HRichEditor from "../RichEditor";
+
 export const placeholderConfig = {
   inputType: [
     "input",
@@ -32,6 +34,7 @@ export const placeholderConfig = {
     "trimInput",
     "urlUpload",
     "textArea",
+    "richEditor",
   ],
   selectType: [
     "select",
@@ -66,6 +69,7 @@ const componentConfig = {
   inputNumberGroup: HInputNumberGroup,
   treeSelect: HTreeSelect,
   text: HText,
+  richEditor: HRichEditor,
 };
 
 export default componentConfig;

package/src/components/Form/hooks/index.ts

@@ -128,3 +128,7 @@ export const useValuesChange = ({
     onValuesChange?.(changedValues, values);
   };
 };
+
+export const useAddFormat=()=>{
+
+}