@cloudbase/weda-ui 3.1.4 → 3.1.9

package/dist/configs/components/chart/bar.json

@@ -94,6 +94,9 @@
                 "title": "数据源",
                 "x-index": 50,
                 "x-component": "chart-datasource-select",
+                "x-props": {
+                    "data-hidebind": true
+                },
                 "x-component-props": {
                     "postChange": {
                         "addOrUpdateComponentDataBinds": {
@@ -301,7 +304,8 @@
                         "target": "*(xIsCountEmpty)",
                         "condition": "{{ $self.value && ($self.value.format !=='datetime' && $self.value.format !=='date') }}"
                     }
-                ]
+                ],
+                "remarks": "X轴数值字段选择"
             },
             "xStatistics": {
                 "title": "统计维度",
@@ -341,7 +345,8 @@
                         "target": "*(groupKey)",
                         "condition": "{{ (!$self.value || !$self.value.numValue || $self.value.numValue.length<=1) && !!$self.__datasourceName }}"
                     }
-                ]
+                ],
+                "remarks": "Y轴数值字段选择"
             },
             "groupKey": {
                 "type": "object",
@@ -581,7 +586,8 @@
                 "title": "显示数值",
                 "type": "boolean",
                 "x-index": 310,
-                "default": true
+                "default": true,
+                "remarks": "数值(Y轴)显示数值"
             },
             "dataTagShow": {
                 "x-index": 320,
@@ -594,7 +600,8 @@
                 "title": "显示数值",
                 "type": "boolean",
                 "x-index": 330,
-                "default": true
+                "default": true,
+                "remarks": "数据标签显示数值"
             },
             "unitShow": {
                 "x-index": 340,

package/dist/configs/components/chart/line.json

@@ -43,6 +43,9 @@
             "dataSource": {
                 "type": "object",
                 "title": "数据源",
+                "x-props": {
+                    "data-hidebind": true
+                },
                 "x-index": 40,
                 "x-component": "chart-datasource-select",
                 "x-component-props": {
@@ -244,7 +247,8 @@
                         "target": "*(xIsCountEmpty)",
                         "condition": "{{ $self.value && ($self.value.format !=='datetime' && $self.value.format !=='date') }}"
                     }
-                ]
+                ],
+                "remarks": "X轴数值字段选择"
             },
             "xStatistics": {
                 "title": "统计维度",
@@ -283,7 +287,8 @@
                         "condition": "{{ (!$self.value || !$self.value.numValue || $self.value.numValue.length<=1) && !!$self.__datasourceName }}"
                     }
                 ],
-                "x-datasource-method-reset": {}
+                "x-datasource-method-reset": {},
+                "remarks": "Y轴数值字段选择"
             },
             "groupKey": {
                 "type": "object",
@@ -527,7 +532,8 @@
                 "type": "boolean",
                 "x-index": 300,
                 "default": true,
-                "x-category": "高级属性"
+                "x-category": "高级属性",
+                "remarks": "数值(Y轴)字段选择"
             },
             "dataTagShow": {
                 "x-index": 310,
@@ -542,7 +548,8 @@
                 "type": "boolean",
                 "x-index": 320,
                 "default": true,
-                "x-category": "高级属性"
+                "x-category": "高级属性",
+                "remarks": "数据标签字段选择"
             },
             "unitShow": {
                 "x-index": 330,

package/dist/configs/components/chart/pie.json

@@ -45,6 +45,9 @@
                 "title": "数据源",
                 "x-index": 40,
                 "x-component": "chart-datasource-select",
+                "x-props": {
+                    "data-hidebind": true
+                },
                 "x-component-props": {
                     "postChange": {
                         "addOrUpdateComponentDataBinds": {
@@ -242,7 +245,8 @@
                         "target": "*(xIsCountEmpty)",
                         "condition": "{{ $self.value && ($self.value.format !=='datetime' && $self.value.format !=='date') }}"
                     }
-                ]
+                ],
+                "remarks": "X轴数值字段选择"
             },
             "xStatistics": {
                 "title": "统计维度",
@@ -274,7 +278,8 @@
                     "isMethod": true,
                     "dataSourceNamePropKey": "dataSource",
                     "maxFieldCount": 1
-                }
+                },
+                "remarks": "Y轴数值字段选择"
             },
             "legendShow": {
                 "x-index": 120,
@@ -355,7 +360,8 @@
                 "type": "boolean",
                 "x-index": 170,
                 "default": true,
-                "x-category": "高级属性"
+                "x-category": "高级属性",
+                "remarks": "数据标签字段选择"
             },
             "isPercent": {
                 "title": "显示百分比",

package/dist/configs/components/form/richText.json

@@ -7,21 +7,21 @@
                 "default": "标题",
                 "title": "标题",
                 "x-category": "基础属性",
-                "x-index": 1
+                "x-index": 10
             },
             "labelVisible": {
                 "type": "boolean",
                 "default": true,
                 "title": "是否显示标题",
                 "x-category": "基础属性",
-                "x-index": 2
+                "x-index": 20
             },
             "requiredFlag": {
                 "type": "boolean",
                 "default": false,
                 "title": "是否显示必填标记",
                 "x-category": "基础属性",
-                "x-index": 3
+                "x-index": 30
             },
             "layout": {
                 "title": "布局方式",
@@ -38,35 +38,42 @@
                     }
                 ],
                 "x-category": "基础属性",
-                "x-index": 4
+                "x-index": 40
             },
             "name": {
                 "type": "string",
                 "default": "formRichText",
                 "title": "提交后台所用字段",
                 "x-category": "基础属性",
-                "x-index": 5
+                "x-index": 50
             },
             "value": {
                 "type": "string",
                 "default": "",
                 "title": "初始值",
                 "x-category": "基础属性",
-                "x-index": 6
+                "x-index": 60
             },
             "readOnly": {
                 "type": "boolean",
                 "default": false,
                 "title": "是否只读",
                 "x-category": "基础属性",
-                "x-index": 7
+                "display": false,
+                "x-index": 70
+            },
+            "disabled": {
+                "type": "boolean",
+                "title": "禁用",
+                "default": false,
+                "x-index": 75
             },
             "maxSize": {
                 "type": "number",
                 "default": 10,
                 "title": "单张图片最大(M)",
                 "x-category": "基础属性",
-                "x-index": 8
+                "x-index": 80
             },
             "acceptTypes": {
                 "type": "array",
@@ -105,8 +112,9 @@
                         }
                     ]
                 },
+                "display": false,
                 "x-category": "基础属性",
-                "x-index": 9
+                "x-index": 90
             }
         }
     },

package/dist/docs/common/format.js

@@ -3,6 +3,21 @@ export const sortBy = (props) => {
         return a[props] - b[props];
     };
 };
+const platMaps = {
+    PCWEB: 'PC端',
+    MOBILEWEB: '移动端',
+    MP: '小程序',
+    WEB: 'WEB端',
+};
+const platTranslate = (platforms = []) => {
+    const platRemark = [];
+    if (platforms && platforms.length > 0) {
+        platforms.forEach((e) => {
+            platRemark.push(platMaps[e]);
+        });
+    }
+    return platRemark;
+};
 export const objFormat = (args, type, origin) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     //判断属性title值是否为拓展写法
@@ -16,9 +31,9 @@ export const objFormat = (args, type, origin) => {
                 description: ((_e = args[i]) === null || _e === void 0 ? void 0 : _e.remarks) || '-',
                 platforms: args[i]['x-platforms']
                     ? args[i]['x-platforms'].indexOf('MP') > -1
-                        ? '小程序端'
+                        ? '小程序'
                         : args[i]['x-platforms'].indexOf('WEB') > -1
-                            ? 'web端'
+                            ? 'WEB端'
                             : '兼容三端'
                     : '兼容三端',
             });
@@ -30,11 +45,15 @@ export const objFormat = (args, type, origin) => {
                 args[i]['x-component'] == 'Divider') {
                 continue;
             }
+            const titleName = args[i].title.indexOf('{{') != -1
+                ? (_h = args[i]) === null || _h === void 0 ? void 0 : _h.title.match(uuidReg)[1]
+                : (_j = args[i]) === null || _j === void 0 ? void 0 : _j.title;
             transformData.push({
                 code: i,
-                title: args[i].title.indexOf('{{') != -1
-                    ? (_h = args[i]) === null || _h === void 0 ? void 0 : _h.title.match(uuidReg)[1]
-                    : (_j = args[i]) === null || _j === void 0 ? void 0 : _j.title,
+                title: titleName +
+                    (platTranslate(args[i]['x-platforms']).length > 0
+                        ? '(' + platTranslate(args[i]['x-platforms']).join(',') + ')'
+                        : ''),
                 description: ((_k = args[i]) === null || _k === void 0 ? void 0 : _k.remarks) || '-',
                 type: ((_l = args[i]) === null || _l === void 0 ? void 0 : _l.type) || '-',
                 default: JSON.stringify((_m = args[i]) === null || _m === void 0 ? void 0 : _m.default) || '-',

package/dist/web/actions/showModal/index.css

@@ -0,0 +1,3 @@
+.weapps__modal {
+  z-index: 5001 !important;
+}

package/dist/web/actions/showModal/index.d.ts

@@ -1,3 +1,4 @@
+import './index.css';
 export default function showModal({ data }: {
     data: any;
 }): Promise<unknown>;

package/dist/web/actions/showModal/index.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Modal, Button, Text, ConfigProvider } from 'tea-component';
 import { noop } from '../../utils/constant';
+import './index.css';
 const ModalShow = forwardRef(function ModalShow(props, ref) {
     const [visible, setVisible] = useState(false);
     // 渲染之后，马上显示

package/dist/web/components/form/uploader/uploader.h5.js

@@ -70,12 +70,6 @@ export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTyp
         setProgress(percentCompleted);
     };
     const uploadToTcb = (file) => {
-        if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
-            weui.alert('请上传图片', {
-                title: 'Image Type Error',
-            });
-            return false;
-        }
         setUploading(true);
         getCloudInstance().then(async (tcb) => {
             var _a;
@@ -105,6 +99,29 @@ export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTyp
             ? IMAGE_TYPES
             : Array.from(new Set(acceptTypes));
     }, [acceptTypes]);
+    const islegalType = (files, accepts) => {
+        const illegalType = [];
+        let isImage = true;
+        for (const file of files) {
+            if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
+                weui.alert('请上传图片', {
+                    title: 'Image Type Error',
+                });
+                isImage = false;
+                break;
+            }
+            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
+                ? null
+                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
+        }
+        if (!isImage)
+            return false;
+        if (illegalType.length > 0) {
+            weui.alert('不支持上传' + Array.from(new Set(illegalType)).join(',') + '格式图片');
+            return false;
+        }
+        return true;
+    };
     const showAdd = React.useMemo(() => {
         if (single) {
             // single 模式时，仅当数组为空时显示
@@ -125,6 +142,8 @@ export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTyp
                             "%")))),
                 showAdd && (React.createElement("div", { className: "weui-uploader__input-box" }, !disabled && (React.createElement("input", { id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: true, onChange: (e) => {
                         const files = [...e.target.files];
+                        if (!islegalType(files, accepts))
+                            return;
                         if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
                             weui.alert('请上传不超过10M的图片');
                             return false;
@@ -150,7 +169,8 @@ function SingleImage({ src, deleteBySrc }) {
     React.useEffect(() => {
         const getSrc = async () => {
             try {
-                const _src = await getTempFileURL(src);
+                const url = await getTempFileURL(src);
+                const _src = encodeURI(url);
                 setRealSrc(_src);
                 return _src;
             }

package/dist/web/components/form/uploader/uploader.pc.js

@@ -68,8 +68,36 @@ export function UploaderPCInner(props) {
             fileRef.current = fileIDList;
         }
     });
+    //验证上传文件类型是否合法
+    const islegalType = (files, accepts) => {
+        const illegalType = [];
+        let isImage = true;
+        for (const file of files) {
+            if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
+                message.error({ content: '请上传图片' });
+                isImage = false;
+                break;
+            }
+            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
+                ? null
+                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
+        }
+        if (!isImage)
+            return false;
+        if (illegalType.length > 0) {
+            message.error({
+                content: '不支持上传' +
+                    Array.from(new Set(illegalType)).join(',') +
+                    '格式图片',
+            });
+            return false;
+        }
+        return true;
+    };
     // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
     const beforeHandle = (file, fileList, isAccepted, error) => {
+        if (!islegalType(fileList, extraProps['accept']))
+            return;
         if (!isAccepted) {
             try {
                 const errorList = [];
@@ -164,7 +192,8 @@ export const TcbImage = (props) => {
     React.useEffect(() => {
         const getSrc = async () => {
             try {
-                const _src = await getTempFileURL(fileID);
+                const url = await getTempFileURL(fileID);
+                const _src = encodeURI(url);
                 _src ? setSrc(_src) : setIsError(true);
             }
             catch (e) {

package/dist/web/components/form/uploaderFile/uploadFile.h5.js

@@ -83,15 +83,29 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
             ? ['*']
             : Array.from(new Set(acceptTypes));
     }, [acceptTypes]);
+    const islegalType = (files, accepts) => {
+        const illegalType = [];
+        for (const file of files) {
+            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
+                ? null
+                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
+        }
+        if (illegalType.length > 0) {
+            weui.alert('不支持上传' + Array.from(new Set(illegalType)).join(',') + '格式文件');
+            return false;
+        }
+        return true;
+    };
     // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
     const handleChange = ({ fileID, uuid, type, size }) => {
         // 上传时新增事件
         if (type === 'add') {
             fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
-            fileID && setfileIDList([...fileIDList, fileID]);
+            fileID && setfileIDList((fileIDList) => [...fileIDList, fileID]);
         }
         else {
-            fileID && setfileIDList(fileIDList.filter((f) => f !== fileID));
+            fileID &&
+                setfileIDList((fileIDList) => fileIDList.filter((f) => f !== fileID));
         }
         uuid && setFileList((list) => list.filter((item) => uuid !== (item === null || item === void 0 ? void 0 : item._uuid)));
     };
@@ -120,6 +134,12 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
                         React.createElement("div", null, btnDisabled ? (React.createElement(Button, { type: "weak", className: classNames(`${CLASS_PREFIX}__btn--weak`), disabled: btnDisabled }, btnTitle)) : (React.createElement("div", null,
                             React.createElement("input", { id: "uploaderInput", type: "file", "data-testid": "button-up", className: "weui-uploader-mobile__input", accept: accepts.join(','), multiple: !single, onChange: (e) => {
                                     const fileList = [...e.target.files];
+                                    //校验逻辑与图片有出入，文件类型限制为全部时，不设限
+                                    if (!(accepts.includes('*') ||
+                                        accepts.includes('') ||
+                                        accepts.length === 0) &&
+                                        !islegalType(fileList, accepts))
+                                        return;
                                     if (single && fileList.length > 1) {
                                         weui.alert(`上传文件总数不能超过1个`);
                                         return false;

package/dist/web/components/form/uploaderFile/uploadFile.pc.js

@@ -68,6 +68,11 @@ acceptTypes = emptyArray, downloadVisible = true, deleteVisible = true, uploadPa
     });
     // 批量上传文件前置事件
     const handleBefore = (file, fileList, isAccepted, error) => {
+        if (!((acceptTypes === null || acceptTypes === void 0 ? void 0 : acceptTypes.includes('*')) ||
+            (acceptTypes === null || acceptTypes === void 0 ? void 0 : acceptTypes.includes('')) ||
+            (acceptTypes === null || acceptTypes === void 0 ? void 0 : acceptTypes.length) === 0) &&
+            !islegalType(fileList, uploadProps['accept']))
+            return;
         if (fileList.length + fileIDList.length > maxUploadCount) {
             message.warning({ content: `上传文件总数不能超过${maxUploadCount}个` });
             return false;
@@ -112,6 +117,24 @@ acceptTypes = emptyArray, downloadVisible = true, deleteVisible = true, uploadPa
     tips && (uploadProps['title'] = tips);
     maxSize && (uploadProps['maxSize'] = maxSize * 1024 * 1024);
     const btnDisabled = fileIDList.length >= maxUploadCount || (single && fileIDList.length > 0);
+    //验证上传文件类型是否合法
+    const islegalType = (files, accepts) => {
+        const illegalType = [];
+        for (const file of files) {
+            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
+                ? null
+                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
+        }
+        if (illegalType.length > 0) {
+            message.error({
+                content: '不支持上传' +
+                    Array.from(new Set(illegalType)).join(',') +
+                    '格式文件',
+            });
+            return false;
+        }
+        return true;
+    };
     return renderDecorator(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
         React.createElement(FileContext.Provider, { value: {
                 uploadPath,
@@ -121,9 +144,9 @@ acceptTypes = emptyArray, downloadVisible = true, deleteVisible = true, uploadPa
                 isEdit,
                 events,
                 fileSizeObj,
-            } },
-            React.createElement("div", { className: `${CLASS_PREFIX}` },
-                isEdit && (React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, disabled || btnDisabled ? (React.createElement(Button, { type: "weak", disabled: true }, btnTitle)) : (React.createElement(Upload, { ...uploadProps, beforeUpload: handleBefore },
+            }, "data-testid": "button-up" },
+            React.createElement("div", { className: `${CLASS_PREFIX}`, "data-testid": "UploadFilePc" },
+                isEdit && (React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, disabled || btnDisabled ? (React.createElement(Button, { type: "weak", disabled: true }, btnTitle)) : (React.createElement(Upload, { ...uploadProps, beforeUpload: handleBefore, "data-testid": "Upload" },
                     React.createElement(Button, { type: "weak", className: `${CLASS_PREFIX}__btn--weak` }, btnTitle),
                     !single && (React.createElement(Text, { theme: "weak", className: `${CLASS_PREFIX}__btn-descripe` }, "\u652F\u6301\u6279\u91CF\u4E0A\u4F20")))))),
                 React.createElement(List, { split: "divide" },

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

@@ -27,6 +27,21 @@
   margin: 5PX 0PX 5PX 0PX !important;
 }
 
+.weda-richText .bf-controlbar .control-item.button-indent-increase,
+.weda-richText .bf-controlbar .control-item.button-indent-decrease,
+.weda-richText .bf-controlbar .control-item[data-alignment='left'],
+.weda-richText .bf-controlbar .control-item[data-alignment='center'],
+.weda-richText .bf-controlbar .control-item[data-alignment='right'],
+.weda-richText .bf-controlbar .control-item[data-alignment='justify'],
+.weda-richText .bf-controlbar .control-item.link-editor-dropdown,
+.weda-richText .bf-controlbar .control-item[data-title='清除链接'] {
+  margin-top: 0 !important;
+}
+
+.weda-richText .weda-formcells__content .weui-cell_form {
+  padding-top: 0;
+}
+
 .weda-richText .headings-dropdown {
   min-width: auto !important;
 }
@@ -40,11 +55,6 @@
   min-width: auto !important;
 }
 
-.weda-richText .weda-formcells__content .weui-cell {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
 .weda-richText {
   width: 100%;
 }
@@ -89,5 +99,9 @@
 }
 
 .weda-richText .weda-formcells__content.weui-flex__item {
-  margin-right: 2.28571rem;
+  margin-top: 1.14286rem;
+}
+
+.weda-richText .bf-font-size-dropdown {
+  min-width: 4.14286rem;
 }

package/dist/web/components/richText/index.d.ts

@@ -21,14 +21,13 @@ declare function RichText({ id, style, className, events, label, labelVisible, v
 declare namespace RichText {
     var defaultProps: {
         events: {};
-        style: {
-            width: string;
-        };
+        style: {};
         label: string;
         labelVisible: boolean;
         name: string;
         value: string;
         readOnly: boolean;
+        disabled: boolean;
         layout: string;
         requiredFlag: boolean;
         maxSize: number;

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

@@ -1,17 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useSetState } from '../../utils/useSetState';
 import classNames from '../../utils/classnames';
-import Editor, { convertEditorStateToHTML } from 'kedao';
-import { ContentUtils } from 'kedao/lib/utils';
+import Editor, { EditorState, convertEditorStateToHTML } from 'kedao';
+import { insertMedias, handleKeyCommand } from 'kedao/lib/utils';
 import { createStateFromContent } from 'kedao/lib/editor';
-import { getCloudInstance, getTempFileURL } from '../../utils/tcb';
+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 styleM from './richtext.module.css';
 import { useSyncedRef } from '@react-hookz/web';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
 // 默认图片类型
 const IMAGE_TYPES = [
     'image/jpeg',
@@ -21,6 +23,36 @@ const IMAGE_TYPES = [
     'image/tiff',
     'image/svg+xml',
 ];
+const defaultControls = [
+    'undo',
+    'redo',
+    'separator',
+    'headings',
+    'separator',
+    'font-size',
+    'separator',
+    'line-height',
+    'letter-spacing',
+    'text-color',
+    'bold',
+    'italic',
+    'underline',
+    'strike-through',
+    'superscript',
+    'subscript',
+    'remove-styles',
+    'emoji',
+    'text-indent',
+    'text-align',
+    'list-ul',
+    'list-ol',
+    'blockquote',
+    'code',
+    'link',
+    'hr',
+    'media',
+    'clear',
+];
 export default function RichText({ 
 // 系统属性
 id, style, className, events, 
@@ -37,37 +69,75 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
     const isH5 = platform === 'h5';
     const subCls = classNames({
         'weui-cell': isH5,
-        'weui-cell_active': isH5,
+        // 'weui-cell_active': isH5,
         'weui-cell_form': isH5,
         'weui-cell_disabled': isH5 && disabled,
     });
+    const previousValueRef = useRef();
     const onDataChange = function (value) {
-        events.change && events.change({ value: value === '<p></p>' ? '' : value });
-        if (onChange) {
-            if (value === '<p></p>') {
-                onChange('');
-            }
-            else {
-                onChange(value);
+        if (previousValueRef.current !== value) {
+            events.change &&
+                events.change({ value: value === '<p></p>' ? '' : value });
+            if (onChange) {
+                if (value === '<p></p>') {
+                    onChange('');
+                }
+                else {
+                    onChange(value);
+                }
             }
         }
+        previousValueRef.current = value;
     };
     useEffect(() => {
         const state = createStateFromContent(initialValue, {});
         setEditorState(state);
     }, []);
-    const extendControls = useMemo(() => {
-        return [
-            {
-                key: 'richtext-uploader',
-                type: 'component',
-                component: (React.createElement(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
-                        const state = ContentUtils.insertMedias(latestEditorState.current, [{ type: 'IMAGE', url }]);
-                        setEditorState(state);
-                    } })),
-            },
+    const excludeControls = useMemo(() => {
+        const result = [
+            'media',
+            'fullscreen',
+            'line-height',
+            'letter-spacing',
+            'emoji',
+            'superscript',
+            'subscript',
         ];
-    }, [setEditorState, acceptTypes, maxSize, cloudPath, ContentUtils]);
+        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 result;
+    }, [isH5]);
+    const extendControls = useMemo(() => {
+        if (!isH5) {
+            return [
+                {
+                    key: 'richtext-uploader',
+                    type: 'component',
+                    component: (React.createElement(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;
+                            });
+                        } })),
+                },
+            ];
+        }
+    }, [
+        acceptTypes,
+        maxSize,
+        cloudPath,
+        latestEditorState,
+        insertMedias,
+        setEditorState,
+        isH5,
+    ]);
     // 修改img显示逻辑
     const blockRenderFn = (contentBlock, { editor, editorState }) => {
         var _a;
@@ -87,12 +157,8 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
         }
     };
     const richTextEl = (React.createElement("div", { className: subCls },
-        React.createElement("div", { style: {
-                border: '1px solid #d1d1d1',
-                backgroundColor: '#fff',
-                ...style,
-            } },
-            React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
+        React.createElement("div", { style: style, className: styleM.richtextInner },
+            React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, disabled: disabled, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
                     setEditorState(s);
                     const html = convertEditorStateToHTML(s, {});
                     onDataChange(html);
@@ -101,11 +167,10 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
                             content: '富文本长度过长，可能导致保存失败',
                         });
                     }
-                }, excludeControls: ['media', 'fullscreen'], 
+                }, controls: defaultControls, excludeControls: excludeControls, 
                 /** @ts-ignore jsx */
                 extendControls: extendControls, handleKeyCommand: (command, editState) => {
-                    const newState = ContentUtils.handleKeyCommand(editState, command);
-                    console.log(newState, editState, command);
+                    const newState = handleKeyCommand(editState, command);
                     if (newState) {
                         setEditorState(newState);
                         return true;
@@ -158,10 +223,8 @@ export const CustomUploader = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { role: "richtext", type: "button", "data-title": "\u5A92\u4F53\u4E0A\u4F20", className: "control-item button", onClick: () => setState({ visible: true }) },
-            React.createElement("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "file-image", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
-                React.createElement("path", { d: "M534 352V136H232v752h560V394H576a42 42 0 01-42-42zm-134 50c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328.1c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8.1 8.1 0 0112.7 0l136.5 174c4.1 5.2.4 12.9-6.3 12.9z", fill: "#e6f7ff" }),
-                React.createElement("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0042 42h216v494z", fill: "#006eff" }),
-                React.createElement("path", { d: "M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0z", fill: "#006eff" }))),
+            React.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("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" }))),
         React.createElement(Modal, { onClose: () => {
                 setState({ visible: false });
             }, visible: visible, maskClosable: true },
@@ -235,38 +298,28 @@ export const CustomUploader = (props) => {
                 React.createElement(Text, { theme: "weak" }, "/\u62D6\u62FD\u5230\u6B64\u533A\u57DF")))))),
             uploading && (React.createElement(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 (React.createElement("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 || {};
-    const [src, setSrc] = React.useState('');
-    const [width, setWidth] = React.useState('unset');
-    useEffect(() => {
-        const getSrc = async () => {
-            try {
-                if (url.includes('cloud://')) {
-                    const _src = await getTempFileURL(url);
-                    setSrc(_src || url);
-                }
-                else {
-                    setSrc(url);
-                }
-            }
-            catch (e) {
-                message.error({
-                    content: `显示图片失败：${e.message || '未知原因'}`,
-                });
-            }
-        };
-        getSrc();
-    }, [url]);
-    return (src && (React.createElement(React.Fragment, null,
+    return (url && (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "bf-media" },
             React.createElement("div", { draggable: "true", className: "bf-image", style: { float: 'left' } },
                 React.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
-                    React.createElement("img", { src: src, style: { maxWidth: '100%', width }, onError: () => {
-                            setSrc(defaultBase64);
-                            setWidth('80px');
-                        } }),
+                    React.createElement(Img, { src: url, style: imgStyle }),
                     React.createElement("div", { className: "bf-pre-csize" }))),
             React.createElement("div", { style: {
                     clear: 'both',
@@ -278,13 +331,14 @@ export const RichTextImg = ({ contentState, block }) => {
 RichText.defaultProps = {
     // 系统属性
     events: {},
-    style: { width: '100%' },
+    style: {},
     // 组件属性
     label: '标题',
     labelVisible: true,
     name: 'formRichText',
     value: '',
-    readOnly: false,
+    readOnly: true,
+    disabled: true,
     layout: 'vertical',
     requiredFlag: false,
     maxSize: 10,

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

@@ -0,0 +1,5 @@
+.richtext_richtextInner__-9STf {
+  border: 0.07143rem solid #d1d1d1;
+  background-color: #fff;
+  width: 100%;
+}

package/dist/web/utils/use-cloud-id-temp-url.d.ts

@@ -0,0 +1 @@
+export declare function useTempUrl(cloudId: string): import("swr").SWRResponse<any, any>;

package/dist/web/utils/use-cloud-id-temp-url.js

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+import { getTempFileURL } from './tcb';
+export function useTempUrl(cloudId) {
+    const prefix = 'tcb:cloud-id:temp-url';
+    const key = `${prefix}:${cloudId}`;
+    return useSWR(key, async () => {
+        if (!cloudId.startsWith('cloud://')) {
+            return cloudId;
+        }
+        const tempUrl = await getTempFileURL(cloudId);
+        return tempUrl;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "3.1.4",
+  "version": "3.1.9",
   "main": "./dist/index.js",
   "module": "./dist/index",
   "miniprogram": "mpdist",
@@ -64,12 +64,13 @@
     "dayjs": "^1.10.7",
     "destr": "^1.1.1",
     "echarts": "^5.3.0",
-    "kedao": "0.1.13",
+    "kedao": "^0.1.24",
     "lodash.isequal": "^4.5.0",
     "object.fromentries": "^2.0.5",
     "prop-types": "^15.7.2",
     "react-easy-swipe": "0.0.22",
     "spark-md5": "^3.0.2",
+    "swr": "^1.3.0",
     "tdesign-icons-react": "0.0.8",
     "tea-component": "^2.7.3",
     "uuid": "8.3.2",