@cloudbase/weda-ui 3.1.4 → 3.1.6

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/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.6",
   "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.23",
     "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",