@cloudbase/weda-ui 3.4.11 → 3.4.13

package/dist/web/components/richText/index.js

@@ -1,20 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo, useRef, useState } from 'react';
-import { useSetState } from '../../utils/hooks/useSetState';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import classNames from '../../utils/classnames';
-import Editor, { EditorState, convertEditorStateToHTML } from 'kedao';
-import { insertMedias, handleKeyCommand } from 'kedao/lib/utils';
-import { createStateFromContent } from 'kedao/lib/editor';
-import { getCloudInstance } from '../../utils/tcb';
-import { message, Button, Input, Modal, Progress, Upload, Text, } from 'tea-component';
-import { v4 as uuidv4 } from 'uuid';
-import { defaultBase64 } from './const';
-import { renderDecorator } from '../form/renderDecorator';
 import { usePlatform } from '../../utils/platform';
-import './index.css';
+import { getTempFileURL } from '../../utils/tcb';
+import { v4 as uuidv4 } from 'uuid';
 import styleM from './richtext.module.css';
-import { useDeepCompareEffect, useSyncedRef } from '@react-hookz/web';
-import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+import { LOAD_ERR_IMG_BASE64, RICH_TEXT_ICON_PACK } from '../../utils/constant';
+import { message } from 'tea-component';
+import './index.css';
+import { useEventListener, useResizeObserver } from '@react-hookz/web';
+import { renderDecorator } from '../form/renderDecorator';
 // 默认图片类型
 const IMAGE_TYPES = [
     'image/jpeg',
@@ -24,44 +19,51 @@ const IMAGE_TYPES = [
     'image/tiff',
     'image/svg+xml',
 ];
-const defaultControls = [
+// 默认音频类型
+const AUDIO_TYPES = [
+    'audio/*',
+    '.mp3',
+    '.wma',
+    '.aac',
+    '.flac',
+    '.wav',
+    '.amr',
+    '.m4a',
+];
+const toolbarArrayH5 = [
+    'fullscreen',
     'undo',
     'redo',
-    'separator',
-    'headings',
-    'separator',
-    'font-size',
-    'separator',
-    'line-height',
-    'letter-spacing',
-    'text-color',
+    'heading',
+    'color',
+    'backgroundColor',
+    'fontFamily',
+    'fontSize',
     'bold',
     'italic',
     'underline',
-    'strike-through',
-    'superscript',
-    'subscript',
-    'remove-styles',
-    'emoji',
-    'text-indent',
-    'text-align',
-    'list-ul',
-    'list-ol',
-    'blockquote',
-    'code',
-    'link',
+    'strikethrough',
     'hr',
-    'media',
-    'clear',
+    'textAlign',
+    'orderList',
+    'bulletList',
 ];
+const toolbarPC = 'fullscreen clearFormat paintFormat | heading headingNumbering fontFamily fontSize bold italic underline strikethrough superScript subScript color backgroundColor link quote bulletList orderList hr picture table textAlign textIndent marginTop marginBottom marginSide lineSpace wordSpace paragraphCheck | undo redo';
+const popover = 'clearFormat bold italic underline color backgroundColor';
+//加载组件
+let loadEditorPromise;
+// 默认视频类型
+const VIDEO_TYPES = ['video/*'];
 export default React.memo(RichText);
 function RichText({ 
 // 系统属性
 id, style, className, events, 
 // 组件属性
-label, labelVisible, value, readOnly, layout, requiredFlag, onChange, maxSize, acceptTypes, cloudPath, disabled, decorator = undefined, }) {
-    const [editorState, setEditorState] = useState();
-    const latestEditorState = useSyncedRef(editorState);
+label, labelVisible, value, readOnly, layout, disabled, requiredFlag, onChange, decorator = undefined, acceptTypes, 
+// acceptAudioTypes,
+// acceptVideoTypes,
+initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const cls = classNames({
         'weda-ui': true,
         'weda-richText': true,
@@ -75,11 +77,23 @@ label, labelVisible, value, readOnly, layout, requiredFlag, onChange, maxSize, a
         'weui-cell_form': isH5,
         'weui-cell_disabled': isH5 && disabled,
     });
-    const previousValueRef = useRef();
+    const [, setRandomId] = React.useState('');
+    const [editorHeight, setEditorHeight] = React.useState(0);
+    const [editorWidth, setEditorWidth] = React.useState(0);
+    const [defaultValue, setDefaultValue] = React.useState('');
+    const [currentMap, setCurrentMap] = React.useState({});
+    const [toolbar, setToolbar] = React.useState(platform === 'h5' ? toolbarArrayH5.join(' ') : toolbarPC);
+    const ref = React.useRef({});
+    const editorDomRef = React.useRef(null);
+    const toolbarDomRef = React.useRef(null);
+    const cloudRef = React.useRef({
+        cloudToHttpsMap: {},
+    });
+    const previousValueRef = React.useRef();
     const onDataChange = function (value) {
         if (previousValueRef.current !== value) {
-            events.change &&
-                events.change({ value: value === '<p></p>' ? '' : value });
+            previousValueRef.current = value;
+            events === null || events === void 0 ? void 0 : events.change({ value: value === '<p></p>' ? '' : value });
             if (onChange) {
                 if (value === '<p></p>') {
                     onChange('');
@@ -89,96 +103,259 @@ label, labelVisible, value, readOnly, layout, requiredFlag, onChange, maxSize, a
                 }
             }
         }
-        previousValueRef.current = value;
     };
-    useDeepCompareEffect(() => {
-        if (previousValueRef.current !== value) {
-            const state = createStateFromContent(value, {});
-            setEditorState(state);
+    const isSizeAccept = (file) => {
+        if (file.size > maxSize * 1024 * 1024) {
+            message.error({
+                content: `文件大小超过上限${maxSize}M`,
+            });
+            return false;
         }
-    }, [value]);
-    const excludeControls = useMemo(() => {
-        const result = [
-            'media',
-            'fullscreen',
-            'line-height',
-            'letter-spacing',
-            'emoji',
-            'superscript',
-            'subscript',
-        ];
-        if (isH5) {
-            result.push('separator', 'undo', 'redo', 'blockquote', 'code', 'link', 'hr', 'list-ul', 'list-ol', 'hr', 'clear', 'text-indent', 
-            // 'font-size',
-            'headings', 'remove-styles', 'text-align');
+        return true;
+    };
+    const upload = async (file) => {
+        var _a, _b, _c, _d, _e;
+        const tcb = await ((_b = (_a = window === null || window === void 0 ? void 0 : window.app) === null || _a === void 0 ? void 0 : _a.cloud) === null || _b === void 0 ? void 0 : _b.getCloudInstance());
+        try {
+            const fileType = (_e = (_d = (_c = file === null || file === void 0 ? void 0 : file.name) === null || _c === void 0 ? void 0 : _c.split('.')) === null || _d === void 0 ? void 0 : _d.pop()) === null || _e === void 0 ? void 0 : _e.toLowerCase();
+            const path = `${cloudPath}/uploader-${uuidv4()}.${fileType}`;
+            const { fileID } = await tcb.uploadFile({
+                cloudPath: path,
+                filePath: file,
+            });
+            setCurrentMap({ ...cloudRef.current.cloudToHttpsMap, [fileID]: '' });
+            const src = await getTempFileURL(fileID);
+            src && (cloudRef.current.cloudToHttpsMap[fileID] = src);
+            setCurrentMap(cloudRef.current.cloudToHttpsMap);
+            if (!ref.current.editor.hasFocus()) {
+                ref.current.editor.focus();
+            }
+            return src;
         }
-        return result;
-    }, [isH5]);
-    const extendControls = useMemo(() => {
-        if (!isH5) {
-            return [
-                {
-                    key: 'richtext-uploader',
-                    type: 'component',
-                    component: (_jsx(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
-                            const state = insertMedias(latestEditorState.current, [
-                                { type: 'IMAGE', url },
-                            ]);
-                            setEditorState((curState) => {
-                                const currentSelection = curState.getSelection();
-                                EditorState.forceSelection(state, currentSelection);
-                                return state;
+        catch (e) {
+            message.error({
+                content: '上传图片失败' + e.message,
+            });
+        }
+    };
+    React.useEffect(() => {
+        if (!(window === null || window === void 0 ? void 0 : window.ExEditor3) && !loadEditorPromise) {
+            loadEditorPromise = new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.src =
+                    'https://qbase.cdn-go.cn/lcap/lcap-resource-cdngo/-/release/_files/static/richtext/exeditor3.min.js';
+                script.onload = () => {
+                    resolve('');
+                };
+                document.body.appendChild(script);
+                const link = document.createElement('link');
+                link.setAttribute('rel', 'stylesheet');
+                link.setAttribute('href', 'https://qbase.cdn-go.cn/lcap/lcap-resource-cdngo/-/release/_files/static/richtext/exeditor3.min.css');
+                const head = document.getElementsByTagName('head');
+                if (head.length) {
+                    head[0].appendChild(link);
+                }
+                else {
+                    document.body.appendChild(link);
+                }
+            });
+        }
+        if (loadEditorPromise) {
+            loadEditorPromise.then(() => {
+                setRandomId(`${new Date().getTime()}`);
+            });
+        }
+    }, []);
+    React.useEffect(() => {
+        if (window === null || window === void 0 ? void 0 : window.ExEditor3) {
+            const editor = window === null || window === void 0 ? void 0 : window.ExEditor3({
+                root: editorDomRef.current,
+                toolbarRoot: toolbarDomRef.current,
+                toolbar: {
+                    static: toolbar,
+                    popover,
+                },
+                initialContent: defaultValue || initialContent,
+                placeholder: placeholder,
+                onCopy: (isSuccess) => {
+                    if (isSuccess) {
+                        message.success({
+                            content: '复制成功',
+                        });
+                    }
+                },
+                iconPack: iconPack,
+            }, {
+                HeadingPlugin: {
+                    levels: [1, 2, 3, 4, 5, 6],
+                    options: [
+                        { label: '标题H1', value: '1' },
+                        { label: '标题H2', value: '2' },
+                        { label: '标题H3', value: '3' },
+                        { label: '标题H4', value: '4' },
+                        { label: '标题H5', value: '5' },
+                        { label: '标题H6', value: '6' },
+                        { label: '常规', value: '' },
+                    ],
+                },
+                PicturePlugin: {
+                    upload,
+                    accept: acceptTypes.join(),
+                    inline: true,
+                    acceptFile: (file) => {
+                        let typeRegex = new RegExp(`^((${acceptTypes.join(')|(').replace('+', '\\+')}))$`);
+                        if (acceptTypes.join().includes('*')) {
+                            typeRegex = new RegExp(`^image/.+$`);
+                        }
+                        if (!typeRegex.test(file.type)) {
+                            message.error({
+                                content: '文件格式不支持',
                             });
-                        } })),
+                            return false;
+                        }
+                        return isSizeAccept(file);
+                    },
+                },
+                FontFamilyPlugin: {
+                    default: 'initial',
+                    options: [
+                        {
+                            label: '思源黑体',
+                            value: 'Source Han Sans SC, 思源黑体, sans-serif',
+                        },
+                    ],
                 },
-            ];
+            });
+            editor.on('blur', () => {
+                let html = editor.getHTML();
+                const map = cloudRef.current.cloudToHttpsMap || {};
+                Object.keys(map).forEach((key) => {
+                    if (map[key]) {
+                        html = html.replace(`${map[key]}`.replace('&', '&amp;'), `${key}`);
+                    }
+                });
+                onDataChange(html);
+                if (html.length > 32768) {
+                    console.warn('富文本长度过长，可能导致保存失败，当前', html.length);
+                }
+            });
+            editor.on('resize', () => {
+                var _a, _b;
+                setEditorHeight(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
+                setEditorWidth(((_b = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0);
+            });
+            ref.current.editor = editor;
+            return () => {
+                editor.destroy();
+            };
         }
-    }, [
-        acceptTypes,
-        maxSize,
-        cloudPath,
-        latestEditorState,
-        insertMedias,
-        setEditorState,
-        isH5,
-    ]);
-    // 修改img显示逻辑
-    const blockRenderFn = (contentBlock, { editor, editorState }) => {
-        var _a;
-        if (contentBlock.getType() === 'atomic') {
-            const entityKey = contentBlock.getEntityAt(0);
-            if (!entityKey) {
-                return null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [window === null || window === void 0 ? void 0 : window.ExEditor3, toolbar]);
+    React.useEffect(() => {
+        if (ref.current.editor) {
+            if (readOnly || disabled) {
+                ref.current.editor.setReadOnly(true);
             }
-            const entity = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getEntity(entityKey);
-            if (entity.getType() === 'IMAGE') {
-                return {
-                    component: RichTextImg,
-                    editable: false,
-                    props: { editor, editorState }, // 传入的内容可以在组件中通过this.props.blockProps获取到
-                };
+            else {
+                ref.current.editor.setReadOnly(false);
+            }
+        }
+    }, [readOnly, disabled, ref.current.editor]);
+    const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
+    const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
+    let tempValue = (_b = (_a = (defaultValue || '')) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+    const getSrc = async (img, startSetHtml) => {
+        const url = img.replace(regex, '$1');
+        if (img.includes('cloud://')) {
+            const newURL = await getTempFileURL(url);
+            if (newURL) {
+                tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
+                cloudRef.current.cloudToHttpsMap[url] = newURL;
             }
         }
+        if (startSetHtml) {
+            ref.current.editor.setHTML(tempValue);
+        }
     };
-    const richTextEl = (_jsx("div", { className: subCls, children: _jsx("div", { style: style, className: styleM.richtextInner, children: _jsx(Editor, { value: editorState, readOnly: readOnly, disabled: disabled, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
-                    setEditorState(s);
-                    const html = convertEditorStateToHTML(s, {});
-                    onDataChange(html);
-                    if (html.length > 32768) {
-                        message.warning({
-                            content: '富文本长度过长，可能导致保存失败',
-                        });
-                    }
-                }, controls: defaultControls, excludeControls: excludeControls, 
-                /** @ts-ignore jsx */
-                extendControls: extendControls, handleKeyCommand: (command, editState) => {
-                    const newState = handleKeyCommand(editState, command);
-                    if (newState) {
-                        setEditorState(newState);
-                        return true;
-                    }
-                    return false;
-                } }, id) }) }));
+    React.useEffect(() => {
+        if (ref.current.editor) {
+            cloudRef.current.cloudToHttpsMap = {};
+            const imgs = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.match(regex);
+            if (imgs && imgs.length > 0) {
+                imgs.forEach((img, index) => {
+                    const startSetHtml = index === imgs.length - 1;
+                    getSrc(img, startSetHtml);
+                });
+            }
+            else {
+                ref.current.editor.setHTML(tempValue);
+            }
+        }
+    }, [defaultValue, ref.current.editor]);
+    React.useEffect(() => {
+        var _a;
+        setEditorWidth(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
+    }, [style === null || style === void 0 ? void 0 : style.width, (_c = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth]);
+    React.useEffect(() => {
+        var _a;
+        setEditorHeight(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
+    }, [style === null || style === void 0 ? void 0 : style.height, (_d = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
+    React.useEffect(() => {
+        if (value && previousValueRef.current !== value) {
+            setDefaultValue(value);
+        }
+        if (!value) {
+            setDefaultValue('');
+        }
+    }, [value]);
+    React.useEffect(() => {
+        const map = currentMap;
+        if (map && Object.keys(map).length > 0) {
+            Object.keys(map).every((key) => map[key]) &&
+                (events === null || events === void 0 ? void 0 : events.finishUploadAll({ value: map }));
+        }
+    }, [currentMap]);
+    const children = (_g = (_f = (_e = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.children;
+    React.useEffect(() => {
+        var _a;
+        if (platform === 'h5' && children && children.length > 0) {
+            for (let i = children.length - 1; i >= 0; i--) {
+                if (((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > 70) {
+                    children[i].remove();
+                }
+                else {
+                    setToolbar(`${toolbarArrayH5.slice(0, i).join(' ')} fold(${toolbarArrayH5
+                        .slice(i)
+                        .join(' ')})`);
+                    break;
+                }
+            }
+        }
+    }, [platform, children, labelVisible, layout, visible]);
+    React.useEffect(() => {
+        var _a;
+        // pc表单输入类的组件采用的是table布局，需要重新计算max高度
+        if (platform !== 'h5') {
+            const basicDiv = (_a = editorDomRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ExEditor-basic');
+            if (basicDiv && (style === null || style === void 0 ? void 0 : style.height) && editorHeight) {
+                basicDiv.style.maxHeight = `calc(${style === null || style === void 0 ? void 0 : style.height} - ${editorHeight}px)`;
+            }
+        }
+    }, [style === null || style === void 0 ? void 0 : style.height, editorHeight, (_h = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _h === void 0 ? void 0 : _h.clientHeight]);
+    useEventListener(window, 'resize', () => {
+        var _a;
+        setEditorWidth(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
+    });
+    useResizeObserver(toolbarDomRef, () => {
+        var _a;
+        setEditorWidth(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
+    });
+    const richTextEl = (_jsx("div", { className: subCls, style: { height: '100%' }, children: _jsx("div", { className: styleM.richtextInner, style: { height: '100%' }, children: _jsxs("div", { className: "weda-richtext-container", id: id, children: [_jsx("div", { ref: toolbarDomRef, className: "weda-richtext-toolbar", role: "richtext" }), _jsx("div", { ref: editorDomRef, className: "weda-richtext-editor", style: {
+                            height: editorHeight
+                                ? `calc(100% - ${editorHeight + 1}px)`
+                                : '100%',
+                            width: editorWidth ? `${editorWidth}px` : '100%',
+                        } })] }) }) }));
     return renderDecorator(richTextEl, decorator)({
         id,
         className: cls,
@@ -189,127 +366,6 @@ label, labelVisible, value, readOnly, layout, requiredFlag, onChange, maxSize, a
         requiredFlag,
     });
 }
-export const CustomUploader = (props) => {
-    const { onChange = () => { }, acceptTypes, maxSize, cloudPath } = props;
-    const [{ fileList, percent, visible, uploading, inputUrl, previewImg }, setState,] = useSetState({
-        fileList: [],
-        percent: 0,
-        visible: false,
-        uploading: false,
-        inputUrl: '',
-        previewImg: defaultBase64,
-    });
-    // 获取base64
-    const getBase64 = (file) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            /** @ts-ignore jsx */
-            setState({ previewImg: reader.result });
-        };
-        reader.readAsDataURL(file);
-    };
-    // 计算上传进度
-    const onProgress = (progressEvent) => {
-        let percentCompleted = 0;
-        try {
-            percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-            percentCompleted < 100 ? percentCompleted : 100;
-        }
-        catch (e) {
-            console.error(e);
-            message.error({
-                content: '上传图片失败',
-            });
-        }
-        setState({ uploading: true, percent: percentCompleted });
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("button", { role: "richtext", type: "button", "data-title": "\u5A92\u4F53\u4E0A\u4F20", className: "control-item button", onClick: () => setState({ visible: true }), children: _jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.6205 1.61428V3.60631L15.6105 3.6063L15.6105 5.1063L13.6205 5.10631V7.08572H12.1205V5.10633L10.1391 5.10635L10.139 3.60635L12.1205 3.60633V1.61428H13.6205ZM8.84998 2.38572H2.49536C1.94308 2.38572 1.49536 2.83343 1.49536 3.38572V11.6761V13.3857C1.49536 13.403 1.4958 13.4201 1.49666 13.4372C1.5019 13.5405 1.52282 13.6397 1.5571 13.7324C1.69808 14.1138 2.06497 14.3857 2.49536 14.3857H4.49757H4.76178H12.4954C13.0476 14.3857 13.4954 13.938 13.4954 13.3857V13.2088L13.4954 13.2088V11.0909L13.4954 11.0909V8.38572H11.9954V9.59579L10.2484 7.85452L9.71895 7.32678L9.18948 7.85452L6.4372 10.5979L5.03662 9.20183L4.50715 8.67408L3.97769 9.20183L2.99536 10.181V3.88572H8.84998V2.38572ZM2.99536 12.8857V12.2988L4.50715 10.792L5.37481 11.6568L4.14188 12.8857H2.99536ZM11.9954 12.8857H6.26667L9.71895 9.44465L11.9954 11.7137V12.8857Z", fill: "#6A6F7B" }) }) }), _jsxs(Modal, { onClose: () => {
-                    setState({ visible: false });
-                }, visible: visible, maskClosable: true, children: [_jsx("p", { children: "\u8F93\u5165\u94FE\u63A5\u63D2\u5165\u56FE\u7247" }), _jsxs("div", { className: "richText-upload-link", children: [_jsx(Input, { value: inputUrl, placeholder: "\u8F93\u5165\u56FE\u7247\u5730\u5740", onChange: (value) => setState({ inputUrl: value }) }), "\u00A0", _jsx(Button, { type: "primary", onClick: () => {
-                                    onChange(inputUrl);
-                                    setState({ visible: false });
-                                }, children: "\u786E\u8BA4" })] }), _jsx("p", { style: { marginBottom: '16px' }, children: "\u6216\u62D6\u62FD\u4E0A\u4F20\u63D2\u5165\u56FE\u7247" }), _jsx(Upload, { accept: acceptTypes.join(), maxSize: 1024 * 1024, beforeUpload: (file) => {
-                            getBase64(file);
-                            let typeRegex = new RegExp(`^((${acceptTypes.join(')|(').replace('+', '\\+')}))$`);
-                            if (acceptTypes.join().includes('*')) {
-                                typeRegex = new RegExp(`^image/.+$`);
-                            }
-                            if (!typeRegex.test(file.type)) {
-                                message.error({
-                                    content: '文件格式不支持',
-                                });
-                                return false;
-                            }
-                            if (file.size > maxSize * 1024 * 1024) {
-                                message.error({
-                                    content: `文件大小超过上限${maxSize}M`,
-                                });
-                                return false;
-                            }
-                            setState({
-                                uploading: true,
-                                percent: 0,
-                                fileList: [
-                                    {
-                                        name: file.name,
-                                    },
-                                ],
-                            });
-                            getCloudInstance().then(async (tcb) => {
-                                try {
-                                    const fileType = file.name.split('.').pop().toLowerCase();
-                                    const path = `${cloudPath}/uploader-${uuidv4()}.${fileType}`;
-                                    const { fileID } = await tcb.uploadFile({
-                                        cloudPath: path,
-                                        filePath: file,
-                                        onUploadProgress: onProgress,
-                                    });
-                                    onChange(fileID);
-                                    setState({
-                                        visible: false,
-                                        fileList: [],
-                                    });
-                                }
-                                catch (e) {
-                                    setState({
-                                        fileList: [],
-                                    });
-                                    console.error(e);
-                                    message.error({
-                                        content: '上传图片失败' + e.message,
-                                    });
-                                }
-                                finally {
-                                    setState({ uploading: false, percent: 100 });
-                                }
-                            });
-                            return false;
-                        }, children: ({ open, isDragging }) => (_jsx(Upload.Dragger, { filename: fileList[0] && fileList[0].name, percent: percent, image: previewImg, className: "richtext_upload_dragger", children: isDragging ? ('释放鼠标') : (_jsxs(_Fragment, { children: [_jsx("a", { onClick: open, children: "\u70B9\u51FB\u4E0A\u4F20" }), _jsx(Text, { theme: "weak", children: "/\u62D6\u62FD\u5230\u6B64\u533A\u57DF" })] })) })) }), uploading && (_jsx(Progress, { style: { marginTop: '10px' }, percent: percent }))] })] }));
-};
-const Img = React.memo(function Img(props) {
-    const { src, style, onError } = props;
-    const { data: realSrc, error } = useTempUrl(src);
-    const realstyle = useMemo(() => {
-        if (error) {
-            return { ...style, width: '80px' };
-        }
-        return style;
-    }, [error, style]);
-    return (_jsx("img", { src: error ? defaultBase64 : realSrc, style: realstyle, onError: () => {
-            onError === null || onError === void 0 ? void 0 : onError();
-        } }));
-});
-const imgStyle = { maxWidth: '100%' };
-export const RichTextImg = ({ contentState, block }) => {
-    const blockData = contentState.getEntity(block.getEntityAt(0)).getData();
-    const { url } = blockData || {};
-    return (url && (_jsx(_Fragment, { children: _jsxs("div", { className: "bf-media", children: [_jsx("div", { draggable: "true", className: "bf-image", style: { float: 'left' }, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx(Img, { src: url, style: imgStyle }), _jsx("div", { className: "bf-pre-csize" })] }) }), _jsx("div", { style: {
-                        clear: 'both',
-                        height: '0px',
-                        lineHeight: 0,
-                        float: 'none',
-                    } })] }) })));
-};
 RichText.whyDidYouRender = true;
 RichText.defaultProps = {
     // 系统属性
@@ -320,16 +376,20 @@ RichText.defaultProps = {
     labelVisible: true,
     name: 'formRichText',
     value: '',
-    readOnly: true,
-    disabled: true,
     layout: 'vertical',
     requiredFlag: false,
     maxSize: 10,
     acceptTypes: IMAGE_TYPES,
+    acceptAudioTypes: AUDIO_TYPES,
+    acceptVideoTypes: VIDEO_TYPES,
     cloudPath: 'weda-richtext-upload',
-};
-CustomUploader.defaultProps = {
-    maxSize: 10,
-    acceptTypes: IMAGE_TYPES,
-    cloudPath: 'weda-richtext-upload',
+    initialContent: '',
+    placeholder: '请输入',
+    iconPack: RICH_TEXT_ICON_PACK,
+    toolbar: {
+        static: 
+        // 'fullscreen clearFormat paintFormat | heading headingNumbering fontFamily fontSize bold italic underline strikethrough superScript subScript color backgroundColor link quote bulletList orderList hr codeBlock mathFormula picture video audio attachment table unsafeHtml textAlign textIndent fold(marginTop marginBottom marginSide lineSpace wordSpace paragraphCheck) | undo redo',
+        'fullscreen clearFormat paintFormat | heading headingNumbering fontFamily fontSize bold italic underline strikethrough superScript subScript color backgroundColor link quote bulletList orderList hr picture table textAlign textIndent marginTop marginBottom marginSide lineSpace wordSpace paragraphCheck | undo redo',
+        popover: 'clearFormat bold italic underline color backgroundColor',
+    },
 };

package/dist/web/components/richText/richtext.module.css

@@ -1,5 +1,6 @@
 .richtext_richtextInner__-9STf {
   border: 1px solid #d1d1d1;
+  border-radius: 3px;
   background-color: inherit;
   width: 100%;
 }